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