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