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