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