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