]> Raphaël G. Git Repositories - airbundle/blob - Resources/public/css/screen.css
Update translations
[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: border-box;
602 border-collapse: collapse;
603 margin: .5rem;
604 }
605
606 #dashboard .subgrid:only-child,
607 #dashboard .subgrid:last-child,
608 #dashboard .subgrid:last-of-type {
609 margin-bottom: 0;
610 }
611
612 #dashboard .cell {
613 border-color: inherit;
614 border-style: inherit;
615 border-width: .1rem;
616 border-radius: inherit;
617 flex-grow: inherit;
618 box-sizing: inherit;
619 border-collapse: inherit;
620 }
621
622 #dashboard .subgrid .cell {
623 border-radius: 0;
624 border-width: 0 .1rem .1rem 0;
625 }
626 #dashboard .subgrid .cell:only-child,
627 #dashboard .subgrid .cell:last-child,
628 #dashboard .subgrid .cell:last-of-type {
629 border-radius: inherit;
630 }
631
632 #dashboard .fourth {
633 min-height: 5rem;
634 width: calc(100% / 4 - (3/4*.1rem));
635 }
636
637 #dashboard .seventh {
638 min-height: 5rem;
639 width: calc(100% / 7 - (6/7*.1rem));
640 }
641
642 #dashboard .third {
643 min-height: 5rem;
644 width: calc(100% / 3 - (2/3*.1rem));
645 }
646
647 #dashboard .session {
648 border: .1rem solid #00c3f9;
649 border-radius: .2rem;
650 white-space: nowrap;
651 display: flex;
652 flex-direction: row;
653 justify-content: space-between;
654 padding: .1rem;
655 }
656
657 #dashboard .session a {
658 overflow-x: hidden;
659 text-overflow: ellipsis;
660 }
661
662 #dashboard .session a:first-letter {
663 color: #066;
664 }
665
666 #dashboard .disabled {
667 /*color: #acc;
668 background-color: #bee;*/
669 filter: grayscale(33%);
670 }
671
672 #dashboard .current {
673 background-color: #cff;
674 }
675
676 #dashboard .current h3 {
677 text-decoration: underline solid #00c3f9;
678 }
679
680 #dashboard .next {
681 background-color: #eff;
682 }
683
684 #dashboard .pending {
685 background-color: #ccc;
686 }
687
688 #dashboard .granted {
689 background-color: #cff;
690 /*background-color: #33b679;
691 border-color: #33b679;*/
692 }
693
694 #dashboard .disputed {
695 background-color: #fcc;
696 }
697
698 #dashboard .orphaned {
699 background-color: #fc9;
700 }
701
702 #dashboard .highlight {
703 border-color: #3333c3;
704 background-color: #c3c3f9;
705 color: #3333c3;
706 }
707
708 /* Weather
709 * TODO: drop
710 >24°C
711 #dashboard .cleary a::before {
712 content: "☀";
713 }
714
715 >17°C
716 #dashboard .sunny a::before {
717 content: "⛅";
718 }
719
720 >10°C
721 #dashboard .cloudy a::before {
722 content: "☁";
723 }
724
725 <=10°C
726 #dashboard .winty a::before {
727 content: "❄️";
728 }
729
730 >0mm
731 #dashboard .rainy a::before {
732 content: "🌂";
733 }
734
735 >2mm
736 #dashboard .stormy a::before {
737 content: "☔";
738 }*/
739
740 /* Regulation */
741 #regulation {
742 }
743
744 #regulation dl {
745 /*display: flex;
746 flex-direction: row;
747 justify-content: space-around;
748 padding-bottom: .5rem;*/
749 padding: .25rem;
750 margin-bottom: .5rem;
751 }
752
753 #regulation dt {
754 font-size: .9rem;
755 font-weight: bold;
756 padding-bottom: .2rem;
757 }
758
759 #regulation dd {
760 font-size: .9rem;
761 margin-left: 1.5rem;
762 }
763
764 #regulation dd:before {
765 }
766
767 #regulation dl:only-child,
768 #regulation dl:last-child,
769 #regulation dl:last-of-type,
770 #regulation dt:only-child,
771 #regulation dt:last-child,
772 #regulation dt:last-of-type,
773 #regulation dd:only-child,
774 #regulation dd:last-child,
775 #regulation dd:last-of-type {
776 margin-bottom: 0;
777 }
778
779 /* Footer */
780 #footer {
781 border: .1rem solid #00c3f9;
782 border-radius: .5rem;
783 margin: .5rem;
784 margin-top: 0;
785 padding: .5rem;
786 text-align: center;
787 font-size: .8rem;
788 display: flex;
789 justify-content: space-between;
790 background-color: #cff;
791 }
792
793 #footer details {
794 font-weight: bold;
795 }
796
797 #footer summary::after {
798 display: none;
799 }
800
801 #footer summary::-webkit-details-marker {
802 display: none;
803 }
804
805 #footer ul {
806 list-style: none inside none;
807 margin: 0;
808 }
809
810 /* viewport responsive hack */
811 @media ( max-width: 900px ) {
812 .panel {
813 place-content: center;
814 flex-flow: column wrap;
815 }
816
817 .form {
818 flex-direction: row;
819 }
820
821 form label {
822 width: 6rem;
823 line-height: 2rem;
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 line-height: 2rem;
834 }
835
836 form button {
837 width: 6rem;
838 line-height: 2rem;
839 }
840
841 .col label,
842 .col input,
843 .col option,
844 .col optgroup,
845 .col select,
846 .col textarea {
847 width: 12rem;
848 }
849
850 .col button {
851 width: 12rem;
852 }
853
854 #dashboard .seventh:nth-child(7n+1),
855 #dashboard .seventh:nth-child(7n+2),
856 #dashboard .seventh:nth-child(7n+3),
857 #dashboard .seventh:nth-child(7n+4) {
858 width: calc(100% / 4 - (3/4*.1rem));
859 }
860
861 #dashboard .seventh:nth-child(7n+5),
862 #dashboard .seventh:nth-child(7n+6),
863 #dashboard .seventh:nth-child(7n+7) {
864 width: calc(100% / 3 - (2/3*.1rem));
865 }
866 }
867
868 @media ( max-width: 600px ) {
869 form label {
870 margin: 0 auto;
871 }
872
873 form input,
874 form option,
875 form optgroup,
876 form select,
877 form textarea,
878 form section section {
879 width: 14rem;
880 margin: 0 auto;
881 }
882
883 #header {
884 flex-direction: column;
885 }
886
887 #dashboard .seventh:nth-child(n) {
888 width: calc(100% / 2 - .1rem);
889 }
890
891 #dashboard .seventh:nth-child(7n) {
892 width: calc(100%);
893 }
894 }
895
896 @media ( max-width: 450px ) {
897 form .row,
898 .grid,
899 .form {
900 flex-direction: column;
901 }
902
903 #dashboard .seventh:nth-child(n) {
904 width: calc(100%);
905 }
906 }