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