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