]> Raphaël G. Git Repositories - airbundle/blob - Resources/public/css/screen.css
Add session index function
[airbundle] / Resources / public / css / screen.css
1 /* Reset link */
2 a {
3 text-decoration: none;
4 color: #066;
5 }
6
7 a:hover {
8 text-decoration: underline solid #00c3f9;
9 }
10
11 h1::first-letter,
12 h2::first-letter,
13 h3::first-letter,
14 h4::first-letter,
15 h5::first-letter,
16 h6::first-letter,
17 a::first-letter {
18 color: #00c3f9;
19 }
20
21 /* Font styling */
22 html, body, dd, li, p, td {
23 font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
24 /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
25 }
26
27 button, code, input, option, optgroup, pre, select, textarea {
28 font-family: 'Droid Sans Mono', monospace;
29 }
30
31 dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
32 font-family: 'Droid Serif', serif;
33 }
34
35 /* Default styling */
36 h1 {
37 font-size: 2rem;
38 margin: 1.34rem 0;
39 }
40
41 h2 {
42 font-size: 1.5rem;
43 margin: 1.245rem 0;
44 }
45
46 h3 {
47 font-size: 1.17rem;
48 margin: 1.17rem 0;
49 }
50
51 h4 {
52 font-size: 1rem;
53 margin: 1.33rem 0;
54 }
55
56 h5 {
57 font-size: .85rem;
58 margin: 1.386rem 0;
59 }
60
61 h6 {
62 font-size: .67rem;
63 margin: 1.561rem 0;
64 }
65
66 p,
67 dt {
68 font-size: 1rem;
69 }
70
71 dd {
72 font-size: .9rem;
73 }
74
75 body {
76 display: flex;
77 flex-flow: column wrap;
78 color: #066;
79 }
80
81 /* Header */
82 #header {
83 border: .1rem solid #00c3f9;
84 border-top: 0;
85 border-radius: 0 0 .5rem .5rem;
86 margin: .5rem;
87 margin-top: 0;
88 padding: .5rem;
89 left: 0;
90 right: 0;
91 display: flex;
92 justify-content: space-between;
93 min-width: 180px;
94 }
95
96 #header h1 {
97 order: 0;
98 padding: 0;
99 margin: 0;
100 vertical-align: middle;
101 white-space: nowrap;
102 }
103
104 #header h1 a {
105 display: flex;
106 }
107
108 /*#header h2 {
109 order: 1;
110 font-size: 1.5rem;
111 margin: 0;
112 white-space: nowrap;
113 }
114
115 #header h2:before {
116 content: ">\00a0";
117 }*/
118
119 #header nav {
120 order: 3;
121 margin-left: auto;
122 display: flex;
123 flex-direction: row;
124 flex-wrap: wrap;
125 align-items: center;
126 justify-content: flex-end;
127 }
128
129 #header nav h2 {
130 display: none;
131 }
132
133 #header nav a {
134 text-align: center;
135 border-radius: .25rem;
136 padding: .375rem .5rem .25rem .5rem;
137 margin: 0 0 .1rem .5rem;
138 border: .1rem solid #00c3f9;
139 font-weight: bold;
140 background-color: #cff;
141 }
142
143 /* Message */
144 .notice::before,
145 .notice::after,
146 .warning::before,
147 .warning::after,
148 .error::before,
149 .error::after {
150 content: "⚠";
151 line-height: 100%;
152 margin: auto 0;
153 padding: 0 .25rem;
154 }
155
156 .notice,
157 .warning,
158 .error {
159 display: flex;
160 flex-direction: row;
161 justify-content: space-between;
162 border: .05rem solid #c33333;
163 background-color: #f9c3c3;
164 color: #c33333;
165 font-size: .9rem;
166 padding: .2rem;
167 border-radius: .2rem;
168 text-align: center;
169 }
170
171 .notice::before,
172 .notice::after {
173 /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
174 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
175 content: "ℹ";
176 /*content: "⌘";*/
177 }
178
179 .notice {
180 border-color: #3333c3;
181 background-color: #c3c3f9;
182 color: #3333c3;
183 }
184
185 .warning::before,
186 .warning::after {
187 /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
188 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
189 content: "?";
190 /*content: "⌘";*/
191 }
192
193 .warning {
194 border-color: #c39333;
195 background-color: #f9c333;
196 color: #936333;
197 }
198
199 .flash {
200 margin: 0 .5rem .5rem;
201 }
202
203 p.notice,
204 p.warning,
205 p.error {
206 margin-bottom: .5rem;
207 }
208
209 pre.trace {
210 border: .05rem solid #00c3f9;
211 border-radius: .2rem;
212 padding: .5rem;
213 margin-bottom: 1rem;
214 font-size: .7rem;
215 }
216
217
218 /*ul#error::before,
219 ul#error::after,
220 ul.error::before,
221 ul.error::after,
222 ul#notice::before,
223 ul#notice::after {
224 content: "⚠";
225 padding: .1rem .5rem 0 .5rem;
226 position: absolute;
227 }
228
229 ul#error::before,
230 ul#error::after {
231 padding-top: .2rem;
232 }
233
234 ul#notice::before,
235 ul#notice::after {
236 content: "ℹ";
237 padding-top: .3rem;
238 }
239
240 ul#notice::after,
241 ul#error::after {
242 margin-left: 37.8rem;
243 }
244
245 ul.error::after {
246 margin-left: 34rem;
247 }
248
249 ul#notice,
250 ul#error,
251 ul.error {
252 display: flex;
253 flex-direction: column;
254 justify-content: center;
255 box-sizing: border-box;
256 text-align: center;
257 border: .05rem solid #c33333;
258 background-color: #f9c3c3;
259 color: #c33333;
260 font-size: .9rem;
261 padding: .2rem;
262 border-radius: .2rem;
263 width: 40rem;
264 margin: 0 auto .5rem auto;
265 }
266
267 ul.error {
268 width: 36rem;
269 margin: .2rem 0 0 0;
270 }
271
272 ul#notice {
273 border: .05rem solid #3333c3;
274 background-color: #c3c3f9;
275 color: #3333c3;
276 }
277
278 ul.error {
279 margin-top: .2rem;
280 }*/
281
282 /* Content */
283 #form,
284 #content,
285 #regulation,
286 #location,
287 #session {
288 border: .1rem solid #00c3f9;
289 border-radius: .5rem;
290 margin: .5rem;
291 margin-top: 0;
292 overflow: hidden;
293 padding: .5rem;
294 display: flex;
295 flex-direction: column;
296 }
297
298 /* Section */
299 section {
300 display: flex;
301 flex-direction: column;
302 border: .05rem solid #00c3f9;
303 border-radius: .2rem;
304 padding: .5rem;
305 margin-bottom: 1rem;
306 overflow: hidden;
307 }
308
309 section:only-child,
310 section:last-child,
311 section:last-of-type {
312 margin-bottom: .5rem;
313 }
314
315 section h2 {
316 background-color: #cff;
317 border-bottom: .1rem solid #00c3f9;
318 margin: -.5rem;
319 margin-bottom: .5rem;
320 padding: .5rem;
321 padding-bottom: .5rem;
322 }
323
324 section h3 {
325 background-color: #cff;
326 border-bottom: .1rem solid #00c3f9;
327 margin: -.5rem;
328 margin-bottom: .5rem;
329 padding: .4rem;
330 }
331
332 section h4 {
333 background-color: #cff;
334 border-bottom: .1rem solid #00c3f9;
335 margin: -.5rem;
336 margin-bottom: .5rem;
337 padding: .3rem;
338 }
339
340 section section {
341 padding: .5rem;
342 padding-bottom: .5rem;
343 margin-bottom: .5rem;
344 }
345
346 section section:only-child,
347 section section:last-child,
348 section section:last-of-type {
349 margin-bottom: 0;
350 }
351
352 /* Form */
353 /*#form div {
354 margin-bottom: .5rem;
355 }
356
357 #form div:only-child,
358 #form div:last-child,
359 #form div:last-of-type {
360 margin-bottom: 0;
361 }
362
363 form {
364 display: flex;
365 flex-direction: column;
366 / *border: .05rem solid #00c3f9;
367 border-radius: .2rem;* /
368 padding: .5rem;
369 }
370
371 form section {
372 margin-bottom: 1rem;
373 }
374
375 form section:only-child,
376 form section:last-child,
377 form section:last-of-type {
378 margin-bottom: .5rem;
379 }
380 */
381
382 form section,
383 form section:only-child,
384 form section:last-child,
385 form section:last-of-type {
386 border: none;
387 margin-bottom: .5rem;
388 }
389
390 form section section,
391 form section section:only-child,
392 form section section:last-child,
393 form section section:last-of-type {
394 width: 50%;
395 padding: 0;
396 margin-bottom: 0;
397 }
398
399 form div {
400 display: flex;
401 flex-direction: row;
402 justify-content: center;
403 margin-bottom: .5rem;
404 }
405
406 form div:only-child,
407 form div:last-child,
408 form div:last-of-type {
409 margin-bottom: 0;
410 }
411
412 form header div.error {
413 width: calc(50% + 10rem);
414 margin: 0 auto;
415 }
416
417 form section div.error {
418 margin-top: .25rem;
419 }
420
421
422 /*form section div.error {
423 margin: 0 1rem;
424 }*/
425
426
427 label {
428 min-width: 10rem;
429 font-size: .85rem;
430 padding: .2rem 1rem .2rem 0;
431 text-align: right;
432 white-space: nowrap;
433 }
434
435 button,
436 input,
437 select,
438 option,
439 optgroup,
440 textarea {
441 box-sizing: border-box;
442 width: 100%;
443 padding: .1rem;
444 border: .05rem solid #00c3f9;
445 border-radius: .2rem;
446 font-size: .8rem;
447 color: #066;
448 background-color: transparent;
449 }
450
451 button.submit {
452 width: 25%;
453 min-width: 8rem;
454 margin: 0 auto;
455 padding: .2rem .1rem;
456 }
457
458 /* Vertical form */
459 form.col {
460 }
461
462 form.col div {
463 flex-direction: column;
464 }
465
466 form.col div.error {
467 flex-direction: row;
468 }
469
470 form.col label {
471 text-align: center;
472 padding-right: 0;
473 }
474
475 form.col section {
476 padding: 0;
477 }
478
479 form.col section section {
480 width: auto;
481 }
482
483 form.col div.date {
484 flex-direction: row;
485 justify-content: space-between;
486 }
487
488 /* Dashboard */
489 #dashboard .panel {
490 display: flex;
491 flex-direction: row;
492 flex-wrap: wrap;
493 place-content: space-between;
494 border: 0;
495 margin: 0;
496 padding: 0;
497 }
498
499 #dashboard .grid {
500 display: table;
501 border: .05rem solid #00c3f9;
502 flex-grow: 1;
503 border-radius: .2rem; /* marche pas sur chrome */
504 table-layout: fixed;
505 /*width: calc(100% - 12rem);
506 border-collapse: collapse;*/
507 }
508
509 #dashboard .cell {
510 display: table-cell;
511 text-align: left;
512 border: .05rem solid #00c3f9;
513 font-size: initial;
514 height: 8rem;
515 }
516
517 #dashboard dl.cell {
518 height: 3rem;
519 }
520
521 #dashboard .cell h3 {
522 font-size: 1rem;
523 padding: .25rem;
524 margin: 0;
525 }
526
527 #dashboard .cell dd {
528 text-align: center;
529 }
530
531 #location .seventh {
532 width: calc(100% / 7);
533 }
534
535 #location .disabled {
536 color: #acc;
537 background-color: #bee;
538 }
539
540 #location .current {
541 background-color: #cff;
542 }
543
544 #location .next {
545 background-color: #eff;
546 }
547
548 #location .session {
549 border-radius: .2rem;
550 border: .1rem solid #00c3f9;
551 font-size: .8rem;
552 padding: .2rem;
553 margin: 0 .1rem .1rem .1rem;
554 overflow-x: hidden;
555 white-space: nowrap;
556 text-overflow: ellipsis;
557 }
558
559 #location .pending {
560 background-color: #ccc;
561 }
562
563 #location .granted {
564 background-color: #cff;
565 /*background-color: #33b679;
566 border-color: #33b679;*/
567 }
568
569 #location .disputed {
570 background-color: #fcc;
571 }
572
573 #location .orphaned {
574 background-color: #fc9;
575 }
576
577 /* Session */
578 #session {
579 }
580
581 #session h2 a::after {
582 content: " >";
583 }
584
585 #session h2 a:last-child::after {
586 content: none;
587 }
588
589 #location .panel,
590 #session .panel {
591 display: flex;
592 flex-direction: row;
593 flex-wrap: nowrap;
594 place-content: space-between;
595 border: 0;
596 margin: 0;
597 padding: 0;
598 }
599
600 #location .grid,
601 #session .grid {
602 display: table;
603 line-height: normal;
604 padding: 0;
605 flex-grow: 1;
606 table-layout: fixed;
607 border: 0 none;
608 /*width: calc(100% - 12rem);
609 border-collapse: collapse;*/
610 }
611
612 #location .grid {
613 width: calc(100% - 12rem);
614 border-collapse: collapse;
615 }
616
617 #session .row {
618 display: flex;
619 flex-wrap: wrap;
620 margin-bottom: .5rem;
621 border: .1rem solid #00c3f9;
622 border-radius: .2rem;
623 }
624
625 #location .cell,
626 #session .cell {
627 display: table-cell;
628 text-align: left;
629 padding: .5rem;
630 flex-grow: 1;
631 border: 0;
632 }
633
634 #location .cell {
635 border: .05rem solid #00c3f9;
636 Height: 6rem;
637 }
638
639 #session .sub {
640 display: flex;
641 flex-direction: column;
642 line-height: normal;
643 margin-bottom: .5rem;
644 margin-top: .5rem;
645 padding: .5rem;
646 border: .1rem solid #00c3f9;
647 border-radius: .2rem;
648 }
649
650 #session .grid dd dd {
651 text-indent: .5rem;
652 }
653
654 #location .form,
655 #session .form {
656 border: .1rem solid #00c3f9;
657 border-radius: .2rem;
658 padding: .5rem;
659 margin-left: .5rem;
660 width: 10rem;
661 }
662
663 #location .form label,
664 #location .form input,
665 #location .form button,
666 #session .form label,
667 #session .form input,
668 #session .form button {
669 text-align: center;
670 min-width: 6rem;
671 }
672
673 /* Regulation */
674 #regulation {
675 }
676
677
678 /*#regulation div {
679 display: flex;
680 flex-direction: row;
681 justify-content: space-around;
682 margin-bottom: .5rem;
683 }
684
685 #regulation div:only-child,
686 #regulation div:last-child,
687 #regulation div:last-of-type {
688 margin-bottom: 0;
689 }*/
690 /*
691 * XXX: TODO:
692 * see https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl
693 * see https://www.w3.org/Style/Examples/007/fonts.fr.html
694 * see https://fonts.googleapis.com/css?family=Droid+Sans:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Sans+Mono:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i|Droid+Serif:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i
695 * see https://fonts.google.com/?query=droi
696 * see https://fonts.google.com/specimen/Inconsolata
697 * see https://fonts.google.com/specimen/Tangerine%20light,light+italic+regular+semi-bold+bold+extra-bold
698 * see https://fonts.google.com/?selection.family=Roboto:100i
699 * see https://developers.google.com/fonts/docs/getting_started
700 */
701
702 #regulation dl {
703 /*display: flex;
704 flex-direction: row;
705 justify-content: space-around;
706 padding-bottom: .5rem;*/
707 padding: .25rem;
708 margin-bottom: .5rem;
709 }
710
711 #regulation dt {
712 font-size: .9rem;
713 font-weight: bold;
714 padding-bottom: .2rem;
715 }
716
717 #regulation dd {
718 font-size: .9rem;
719 margin-left: 1.5rem;
720 }
721
722 #regulation dd:before {
723 }
724
725 #regulation dl:only-child,
726 #regulation dl:last-child,
727 #regulation dl:last-of-type,
728 #regulation dt:only-child,
729 #regulation dt:last-child,
730 #regulation dt:last-of-type,
731 #regulation dd:only-child,
732 #regulation dd:last-child,
733 #regulation dd:last-of-type {
734 margin-bottom: 0;
735 }
736
737 /* Footer */
738 #footer {
739 border: .1rem solid #00c3f9;
740 Border-radius: .5rem;
741 margin: .5rem;
742 margin-top: 0;
743 padding: .5rem;
744 text-align: center;
745 font-size: .8rem;
746 display: flex;
747 justify-content: space-between;
748 background-color: #cff;
749 }
750
751 #footer details {
752 font-weight: bold;
753 }
754
755 #footer summary::after {
756 display: none;
757 }
758
759 #footer summary::-webkit-details-marker {
760 display: none;
761 }
762
763 /* viewport responsive hack */
764 @media ( max-width: 850px ) {
765 #header {
766 flex-wrap: wrap;
767 }
768
769 #location .panel,
770 #session .panel {
771 place-content: center;
772 flex-direction: column;
773 flex-wrap: wrap;
774 }
775
776 #location .grid,
777 #location .form,
778 #session .grid,
779 #session .form {
780 width: auto;
781 }
782
783 #location .form,
784 #session .form {
785 margin: .5rem auto 0 auto;
786 }
787 }