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