]> Raphaƫl G. Git Repositories - airbundle/blob - Resources/public/css/screen.css
6d7d54c7a649553dab74d56133f4cae3dc6c2cf9
[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: auto;
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 text-align: right;
599 }
600
601 .calendar .pseudonym {
602 grid-column: span 2;
603 }
604
605 .seven {
606 grid-template-columns: repeat(7, 1fr);
607 }
608
609 .four {
610 grid-template-columns: repeat(4, 1fr);
611 }
612
613 .three {
614 grid-template-columns: repeat(3, 1fr);
615 }
616
617 .two {
618 grid-template-columns: repeat(2, 1fr);
619 }
620
621 .location h3 {
622 border-style: none;
623 flex: 1 1 auto;
624 white-space: nowrap;
625 overflow: hidden;
626 text-overflow: ellipsis;
627 }
628
629 .location p {
630 margin: 0 .5rem .5rem;
631 }
632
633 .location .grid article,
634 .location .grid section {
635 min-height: auto;
636 }
637
638 .location form {
639 margin: .5rem auto;
640 }
641
642 .location form .row {
643 flex-direction: column;
644 }
645
646 .location form div {
647 margin-left: auto;
648 margin-right: auto;
649 }
650
651 .location label {
652 width: 20rem;
653 padding-right: 0;
654 text-align: center;
655 }
656
657 .location input,
658 .location textarea {
659 width: 20rem;
660 margin: 0 .1rem;
661 }
662
663 .form {
664 margin: 0;
665 display: flex;
666 flex-direction: column;
667 gap: .5rem;
668 }
669
670 .form h2 {
671 font-size: 1.17rem;
672 padding: .4rem;
673 }
674
675 .form a {
676 white-space: nowrap;
677 }
678
679 .form section {
680 margin: 0;
681 border: .05rem solid #00c3f9;
682 border-radius: .2rem;
683 width: 100%;
684 }
685
686 .form form {
687 gap: .5rem;
688 }
689
690 /* Footer */
691 #footer {
692 border: .1rem solid #00c3f9;
693 border-radius: .5rem;
694 margin: .5rem;
695 margin-top: 0;
696 padding: .5rem;
697 text-align: center;
698 font-size: .8rem;
699 display: flex;
700 justify-content: space-between;
701 background-color: #cff;
702 }
703
704 #footer summary::after {
705 display: none;
706 }
707
708 #footer summary::-webkit-details-marker {
709 display: none;
710 }
711
712 #footer ul {
713 list-style: none inside none;
714 margin: 0;
715 }
716
717 /* viewport responsive hack */
718 @media ( max-width: 1400px ) {
719 .location label,
720 .location input,
721 .location textarea {
722 width: 12rem;
723 }
724 }
725
726 @media ( max-width: 900px ) {
727 .panel {
728 flex-flow: column wrap;
729 }
730
731 .form {
732 flex-direction: row;
733 }
734
735 form label {
736 width: 6rem;
737 line-height: 2rem;
738 }
739
740 form input,
741 form option,
742 form optgroup,
743 form select,
744 form textarea,
745 form section section {
746 width: 20rem;
747 line-height: 2rem;
748 }
749
750 form button {
751 width: 6rem;
752 line-height: 2rem;
753 }
754
755 .col label,
756 .col input,
757 .col option,
758 .col optgroup,
759 .col select,
760 .col textarea {
761 width: 12rem;
762 }
763
764 .col button {
765 width: 12rem;
766 }
767
768 .seven {
769 grid-template-columns: repeat(4, 1fr);
770 }
771
772 .calendar .sunday {
773 grid-column: span 2;
774 }
775
776 /*.grid section:nth-child(7n) {
777 grid-column: span 2;
778 }*/
779
780 .four {
781 grid-template-columns: repeat(3, 1fr);
782 }
783
784 /*#dashboard .seventh:nth-child(7n+1),
785 #dashboard .seventh:nth-child(7n+2),
786 #dashboard .seventh:nth-child(7n+3),
787 #dashboard .seventh:nth-child(7n+4) {
788 width: calc(100% / 4 - (3/4*.1rem));
789 }
790
791 #dashboard .seventh:nth-child(7n+5),
792 #dashboard .seventh:nth-child(7n+6),
793 #dashboard .seventh:nth-child(7n+7) {
794 width: calc(100% / 3 - (2/3*.1rem));
795 }*/
796 }
797
798 @media ( max-width: 600px ) {
799 form label {
800 margin: 0 auto;
801 }
802
803 form input,
804 form option,
805 form optgroup,
806 form select,
807 form textarea,
808 form section section {
809 width: 14rem;
810 margin: 0 auto;
811 }
812
813 #header {
814 flex-direction: column;
815 }
816
817 .seven {
818 grid-template-columns: repeat(2, 1fr);
819 }
820
821 /*.grid section:nth-child(7n) {
822 grid-column: span 2;
823 margin-bottom: .5rem;
824 }
825
826 .grid section:only-child,
827 .grid section:last-child,
828 .grid section:last-of-type {
829 margin-bottom: 0;
830 }*/
831
832 .calendar .sunday {
833 margin-bottom: .5rem;
834 }
835
836 .calendar .sunday:only-child,
837 .calendar .sunday:last-child {
838 margin-bottom: 0;
839 }
840
841 .four,
842 .three {
843 grid-template-columns: repeat(2, 1fr);
844 }
845
846 /*#dashboard .seventh:nth-child(n) {
847 width: calc(100% / 2 - .1rem);
848 }
849
850 #dashboard .seventh:nth-child(7n) {
851 width: calc(100%);
852 }*/
853 }
854
855 @media ( max-width: 450px ) {
856 form .row,
857 .grid,
858 .form,
859 #footer {
860 flex-direction: column;
861 }
862
863 .seven {
864 grid-template-columns: repeat(1, 1fr);
865 }
866
867 /*.grid section:nth-child(n) {
868 grid-column: auto;
869 }*/
870 .calendar .sunday {
871 grid-column: auto;
872 }
873
874 .four,
875 .three {
876 grid-template-columns: repeat(1, 1fr);
877 }
878 }
879
880 @media ( max-width: 260px ) {
881 .col label,
882 .col input,
883 .col option,
884 .col optgroup,
885 .col select,
886 .col textarea {
887 width: 10rem;
888 }
889
890 .col button {
891 width: 10rem;
892 }
893 }