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