]> Raphaƫl G. Git Repositories - airbundle/blob - Resources/public/css/screen.css
Switch to tableless
[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 }
102
103 form {
104 display: flex;
105 flex-direction: column;
106 flex-wrap: wrap;
107 line-height: normal;
108 text-align: center;
109 }
110
111 form header {
112 margin-bottom: .5rem;
113 }
114
115 form header .message {
116 margin: 0;
117 }
118
119 form div {
120 margin-bottom: .5rem;
121 }
122
123 form div:only-child,
124 form div:last-child,
125 form div:last-of-type {
126 margin-bottom: 0;
127 }
128
129 form section div {
130 display: flex;
131 flex-direction: row;
132 align-content: space-around;
133 justify-content: center;
134 }
135
136 form section section {
137 display: flex;
138 flex-direction: column;
139 }
140
141 form label {
142 width: 12rem;
143 padding: .2rem 1rem .2rem 0;
144 text-align: right;
145 }
146
147 form input,
148 form option,
149 form optgroup,
150 form select,
151 form textarea {
152 width: 24rem;
153 padding: .1rem;
154 }
155
156 form select {
157 box-sizing: content-box;
158 padding: 0 .1rem .1rem .1rem;
159 }
160
161 form button {
162 width: 10rem;
163 margin: .5rem auto 0 auto;
164 padding: 0 .1rem .2rem .1rem;
165 }
166
167 form section .message {
168 margin: .25rem 0 0 0;
169 }
170
171 /* Vertical form */
172 form.col label {
173 width: 8rem;
174 padding: .2rem 0;
175 text-align: center;
176 }
177
178 form.col input,
179 form.col option,
180 form.col optgroup,
181 form.col select,
182 form.col textarea {
183 width: 8rem;
184 }
185
186 form.col button {
187 width: 8rem;
188 }
189
190 form.col div {
191 flex-direction: column;
192 }
193
194 form.col div.date {
195 flex-direction: row;
196 justify-content: space-between;
197 }
198
199 /* Header */
200 #header {
201 border: .1rem solid #00c3f9;
202 border-top: 0;
203 border-radius: 0 0 .5rem .5rem;
204 margin: .5rem;
205 margin-top: 0;
206 padding: .5rem;
207 left: 0;
208 right: 0;
209 display: flex;
210 justify-content: space-between;
211 min-width: 180px;
212 }
213
214 #header h1 {
215 order: 0;
216 padding: 0;
217 margin: 0;
218 vertical-align: middle;
219 white-space: nowrap;
220 }
221
222 #header h1 a {
223 display: flex;
224 }
225
226 #header nav {
227 order: 3;
228 margin-left: auto;
229 display: flex;
230 flex-direction: row;
231 flex-wrap: wrap;
232 align-items: center;
233 justify-content: flex-end;
234 }
235
236 #header nav h2 {
237 display: none;
238 }
239
240 #header nav a {
241 text-align: center;
242 border-radius: .25rem;
243 padding: .375rem .5rem .25rem .5rem;
244 margin: 0 0 .1rem .5rem;
245 border: .1rem solid #00c3f9;
246 font-weight: bold;
247 background-color: #cff;
248 }
249
250 /* Message */
251 .message {
252 margin: 0 .5rem .5rem;
253 display: flex;
254 flex-direction: row;
255 justify-content: space-between;
256 font-size: .9rem;
257 padding: .2rem;
258 border-radius: .2rem;
259 text-align: center;
260 border: .05rem solid transparent;
261 }
262
263 .message::before,
264 .message::after {
265 line-height: 100%;
266 margin: auto 0;
267 padding: 0 .25rem;
268 }
269
270 p.message {
271 margin: 0;
272 }
273
274 .error {
275 border-color: #c33333;
276 background-color: #f9c3c3;
277 color: #c33333;
278 }
279
280 .error::before,
281 .error::after {
282 /*XXX: display /!\ symbol */
283 content: "āš ";
284 }
285
286 .notice {
287 border-color: #3333c3;
288 background-color: #c3c3f9;
289 color: #3333c3;
290 }
291
292 .notice::before,
293 .notice::after {
294 /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
295 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
296 /*XXX: display i symbol */
297 content: "ā„¹";
298 /*XXX: display # symbol */
299 /*content: "āŒ˜";*/
300 }
301
302 .warning {
303 border-color: #c39333;
304 background-color: #f9c333;
305 color: #936333;
306 }
307
308 .warning::before,
309 .warning::after {
310 /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
311 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
312 content: "?";
313 /*XXX: display # symbol */
314 /*content: "āŒ˜";*/
315 }
316
317 /* Dashboard */
318 #dashboard,
319 #regulation,
320 #form {
321 border: .1rem solid #00c3f9;
322 border-radius: .5rem;
323 margin: .5rem;
324 margin-top: 0;
325 overflow: hidden;
326 padding: .5rem;
327 display: flex;
328 flex-direction: column;
329 }
330
331 #dashboard h2,
332 #regulation h2,
333 #form h2 {
334 background-color: #cff;
335 border-bottom: .1rem solid #00c3f9;
336 margin: -.5rem;
337 margin-bottom: .5rem;
338 padding: .5rem;
339 padding-bottom: .5rem;
340 }
341
342 #dashboard h3 {
343 background-color: #cff;
344 margin: 0;
345 margin: -.3rem -.1rem;
346 margin-bottom: .3rem;
347 padding: .3rem;
348 border-bottom: .1rem solid #00c3f9;
349 }
350
351 #dashboard h4 {
352 background-color: #cff;
353 margin: 0;
354 padding: .3rem;
355 border-bottom: .1rem solid #00c3f9;
356 }
357
358 #form .recover {
359 border: .1rem solid #00c3f9;
360 border-radius: .3rem;
361 margin-top: 1rem;
362 padding: .5rem;
363 }
364
365 #form h3 {
366 background-color: #cff;
367 margin: -.5rem;
368 margin-bottom: .5rem;
369 padding: .3rem;
370 }
371
372 #form h3,
373 #dashboard h3,
374 #dashboard h4 {
375 }
376
377 #dashboard .location h3 {
378 margin: 0;
379 border-bottom: 0;
380 }
381
382 #dashboard .location .cell {
383 padding: 0;
384 }
385
386 /*#dashboard .calendar h3 {
387 margin: -.3rem;
388 margin-bottom: .3rem;
389 }*/
390
391 #dashboard .subgrid .cell {
392 padding: .3rem;
393 }
394
395 #dashboard .subgrid h4 {
396 margin: -.3rem;
397 margin-bottom: .3rem;
398 }
399
400 /*#dashboard h4 {
401 background-color: #cff;
402 border-bottom: .1rem solid #00c3f9;
403 margin: -.5rem;
404 margin-bottom: .5rem;
405 padding: .1rem;
406 }*/
407
408 #dashboard .panel {
409 display: flex;
410 flex-direction: row;
411 flex-wrap: nowrap;
412 place-content: space-between;
413 border: 0;
414 margin: 0 0 .5rem 0;
415 padding: 0;
416 }
417
418 #dashboard .panel:only-child,
419 #dashboard .panel:last-child,
420 #dashboard .panel:last-of-type {
421 margin-bottom: 0;
422 }
423
424 #dashboard .grid {
425 display: flex;
426 flex-flow: row wrap;
427 border-style: solid;
428 border-color: #00c3f9;
429 border-radius: .2rem;
430 border-width: .1rem 0 0 .1rem;
431 line-height: normal;
432 flex-grow: 1;
433 box-sizing: inherit;
434 box-sizing: border-box;
435 border-collapse: collapse;
436 /*box-sizing: border-box;
437 display: table;
438 line-height: normal;
439 padding: 0;
440 flex-grow: 1;
441 table-layout: fixed;
442 border: 0 none;
443 width: fit-content;
444 border-collapse: collapse;*/
445 /*width: calc(100% - 12rem);
446 border-collapse: collapse;*/
447 /*width: calc(100% - 12rem);*/
448 }
449
450 #dashboard .grid:only-child,
451 #dashboard .grid:last-child,
452 #dashboard .grid:last-of-type {
453 margin-bottom: 0;
454 }
455
456 #dashboard .subgrid {
457 display: flex;
458 flex-flow: row wrap;
459 border-style: solid;
460 border-color: #00c3f9;
461 border-width: .1rem 0 0 .1rem;
462 border-radius: .2rem;
463 line-height: normal;
464 flex-grow: 1;
465 box-sizing: inherit;
466 box-sizing: border-box;
467 border-collapse: collapse;
468 margin: .5rem;
469 }
470
471 #dashboard .subgrid:only-child,
472 #dashboard .subgrid:last-child,
473 #dashboard .subgrid:last-of-type {
474 margin-bottom: 0;
475 }
476
477 #dashboard .cell {
478 border-color: inherit;
479 border-style: inherit;
480 border-width: 0 .1rem .1rem 0;
481 border-radius: .2rem;
482 flex-grow: inherit;
483 box-sizing: inherit;
484 border-collapse: inherit;
485 font-size: .8rem;
486 padding: .3rem .1rem;
487 }
488
489 #dashboard .cell:only-child,
490 #dashboard .cell:last-child,
491 #dashboard .cell:last-of-type {
492 border-radius: inherit;
493 }
494
495 #dashboard .subgrid .cell {
496 border-radius: 0;
497 border-width: 0 .1rem .1rem 0;
498 }
499 #dashboard .subgrid .cell:only-child,
500 #dashboard .subgrid .cell:last-child,
501 #dashboard .subgrid .cell:last-of-type {
502 border-radius: inherit;
503 }
504
505 #dashboard .fourth {
506 min-height: 5rem;
507 width: calc(100% / 4);
508 }
509
510 #dashboard .seventh {
511 min-height: 5rem;
512 width: calc(100% / 7);
513 }
514
515 #dashboard .third {
516 min-height: 5rem;
517 width: calc(100% / 3);
518 }
519
520 #dashboard .session {
521 border: .1rem solid #00c3f9;
522 border-radius: .2rem;
523 padding: .1rem;
524 margin: .1rem;
525 overflow-x: hidden;
526 white-space: nowrap;
527 text-overflow: ellipsis;
528 }
529
530 #dashboard .session:only-child,
531 #dashboard .session:last-child,
532 #dashboard .session:last-of-type {
533 margin-bottom: 0;
534 }
535
536 #dashboard .disabled {
537 color: #acc;
538 background-color: #bee;
539 }
540
541 #dashboard .current {
542 background-color: #cff;
543 }
544
545 #dashboard .next {
546 background-color: #eff;
547 }
548
549 #dashboard .pending {
550 background-color: #ccc;
551 }
552
553 #dashboard .granted {
554 background-color: #cff;
555 /*background-color: #33b679;
556 border-color: #33b679;*/
557 }
558
559 #dashboard .disputed {
560 background-color: #fcc;
561 }
562
563 #dashboard .orphaned {
564 background-color: #fc9;
565 }
566
567 #dashboard .highlight {
568 border-color: #3333c3;
569 background-color: #c3c3f9;
570 color: #3333c3;
571 }
572
573 #dashboard .form {
574 border: .1rem solid #00c3f9;
575 border-radius: .2rem;
576 padding: .5rem;
577 margin-left: .5rem;
578 }
579
580 /* Regulation */
581 #regulation {
582 }
583
584 #regulation dl {
585 /*display: flex;
586 flex-direction: row;
587 justify-content: space-around;
588 padding-bottom: .5rem;*/
589 padding: .25rem;
590 margin-bottom: .5rem;
591 }
592
593 #regulation dt {
594 font-size: .9rem;
595 font-weight: bold;
596 padding-bottom: .2rem;
597 }
598
599 #regulation dd {
600 font-size: .9rem;
601 margin-left: 1.5rem;
602 }
603
604 #regulation dd:before {
605 }
606
607 #regulation dl:only-child,
608 #regulation dl:last-child,
609 #regulation dl:last-of-type,
610 #regulation dt:only-child,
611 #regulation dt:last-child,
612 #regulation dt:last-of-type,
613 #regulation dd:only-child,
614 #regulation dd:last-child,
615 #regulation dd:last-of-type {
616 margin-bottom: 0;
617 }
618
619 /* Footer */
620 #footer {
621 border: .1rem solid #00c3f9;
622 border-radius: .5rem;
623 margin: .5rem;
624 margin-top: 0;
625 padding: .5rem;
626 text-align: center;
627 font-size: .8rem;
628 display: flex;
629 justify-content: space-between;
630 background-color: #cff;
631 }
632
633 #footer details {
634 font-weight: bold;
635 }
636
637 #footer summary::after {
638 display: none;
639 }
640
641 #footer summary::-webkit-details-marker {
642 display: none;
643 }
644
645 /* viewport responsive hack */
646 @media ( max-width: 850px ) {
647 #header {
648 flex-wrap: wrap;
649 }
650
651 #dashboard .calendar {
652 place-content: center;
653 flex-direction: column;
654 flex-wrap: wrap;
655 }
656
657 #dashboard .panel:only-child,
658 #dashboard .panel:last-child,
659 #dashboard .panel:last-of-type {
660 margin-bottom: .5rem;
661 }
662
663 #dashboard .form {
664 margin: .5rem auto 0 auto;
665 }
666
667 form label {
668 width: 6rem;
669 }
670
671 form input,
672 form option,
673 form optgroup,
674 form select,
675 form textarea {
676 width: 20rem;
677 }
678
679 form button {
680 width: 6rem;
681 }
682 }