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