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