diff options
Diffstat (limited to 'app/Resources/static/themes/material/css/main.css')
-rwxr-xr-x | app/Resources/static/themes/material/css/main.css | 658 |
1 files changed, 658 insertions, 0 deletions
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css new file mode 100755 index 00000000..cade37f6 --- /dev/null +++ b/app/Resources/static/themes/material/css/main.css | |||
@@ -0,0 +1,658 @@ | |||
1 | /* ========================================================================== | ||
2 | Sommaire | ||
3 | |||
4 | 0 = Common | ||
5 | 1 = Nav | ||
6 | 2 = Side-nav | ||
7 | 3 = Filters slider | ||
8 | 4 = Cards | ||
9 | 5 = Article | ||
10 | 6 = Media queries | ||
11 | 7 = Font | ||
12 | 8 = Others | ||
13 | |||
14 | ========================================================================== */ | ||
15 | |||
16 | /* ========================================================================== | ||
17 | 0 = Common | ||
18 | ========================================================================== */ | ||
19 | |||
20 | @font-face { | ||
21 | font-family: icomoon; | ||
22 | src: url("../fonts/icomoon.eot"); | ||
23 | src: | ||
24 | url("../fonts/icomoon.eot#iefix") format("embedded-opentype"), | ||
25 | url("../fonts/icomoon.ttf") format("truetype"), | ||
26 | url("../fonts/icomoon.woff") format("woff"), | ||
27 | url("../fonts/icomoon.svg#icomoon") format("svg"); | ||
28 | font-weight: normal; | ||
29 | font-style: normal; | ||
30 | } | ||
31 | |||
32 | @font-face { | ||
33 | font-family: 'Material Icons'; | ||
34 | font-style: normal; | ||
35 | font-weight: 400; | ||
36 | src: url(../fonts/MaterialIcons-Regular.eot); | ||
37 | |||
38 | /* For IE6-8 */ | ||
39 | src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); | ||
40 | } | ||
41 | |||
42 | .material-icons { | ||
43 | font-family: 'Material Icons'; | ||
44 | font-weight: normal; | ||
45 | font-style: normal; | ||
46 | font-size: 24px; /* Preferred icon size */ | ||
47 | width: 1em; | ||
48 | height: 1em; | ||
49 | display: inline-block; | ||
50 | line-height: 1; | ||
51 | text-transform: none; | ||
52 | letter-spacing: normal; | ||
53 | word-wrap: normal; | ||
54 | white-space: nowrap; | ||
55 | direction: ltr; | ||
56 | |||
57 | /* Support for all WebKit browsers. */ | ||
58 | -webkit-font-smoothing: antialiased; | ||
59 | |||
60 | /* Support for Safari and Chrome. */ | ||
61 | text-rendering: optimizeLegibility; | ||
62 | |||
63 | /* Support for Firefox. */ | ||
64 | -moz-osx-font-smoothing: grayscale; | ||
65 | |||
66 | /* Support for IE. */ | ||
67 | font-feature-settings: 'liga'; | ||
68 | } | ||
69 | |||
70 | [class^="icon-"], | ||
71 | [class*=" icon-"] { | ||
72 | font-family: icomoon; | ||
73 | speak: none; | ||
74 | font-style: normal; | ||
75 | font-weight: normal; | ||
76 | font-variant: normal; | ||
77 | text-transform: none; | ||
78 | line-height: 1; | ||
79 | |||
80 | /* Better Font Rendering =========== */ | ||
81 | -webkit-font-smoothing: antialiased; | ||
82 | -moz-osx-font-smoothing: grayscale; | ||
83 | } | ||
84 | |||
85 | body { | ||
86 | display: flex; | ||
87 | min-height: 100vh; | ||
88 | flex-direction: column; | ||
89 | background: #f0f0f0; | ||
90 | } | ||
91 | |||
92 | body.login main { | ||
93 | padding: 0; | ||
94 | } | ||
95 | |||
96 | .border-bottom { | ||
97 | border-bottom: 1px solid #ddd; | ||
98 | } | ||
99 | |||
100 | nav, | ||
101 | main, | ||
102 | footer { | ||
103 | padding-left: 240px; | ||
104 | } | ||
105 | |||
106 | main, | ||
107 | #content, | ||
108 | .valign-wrapper { | ||
109 | height: 100%; | ||
110 | } | ||
111 | |||
112 | #main { | ||
113 | flex: 1 0 auto; | ||
114 | } | ||
115 | |||
116 | .results { | ||
117 | height: 1em; | ||
118 | line-height: 30px; | ||
119 | } | ||
120 | |||
121 | .results .nb-results, | ||
122 | .results .pagination { | ||
123 | margin: 15px; | ||
124 | margin-bottom: 0; | ||
125 | } | ||
126 | |||
127 | .pagination { | ||
128 | float: right; | ||
129 | } | ||
130 | |||
131 | .pagination ul { | ||
132 | margin: 0 !important; | ||
133 | } | ||
134 | |||
135 | .pagination li { | ||
136 | padding: 0; | ||
137 | } | ||
138 | |||
139 | .pagination a { | ||
140 | padding: 0 10px; | ||
141 | height: 30px; | ||
142 | display: block; | ||
143 | } | ||
144 | |||
145 | .pagination .disabled { | ||
146 | margin-right: 10px; | ||
147 | margin-left: 10px; | ||
148 | } | ||
149 | |||
150 | div.pagination ul .prev.disabled, | ||
151 | div.pagination ul .next.disabled { | ||
152 | display: none; | ||
153 | } | ||
154 | |||
155 | .pagination li.active span { | ||
156 | padding: 0 10px; | ||
157 | height: 30px; | ||
158 | display: block; | ||
159 | color: #fff; | ||
160 | } | ||
161 | |||
162 | .page-footer .footer-copyright p { | ||
163 | display: inline; | ||
164 | } | ||
165 | |||
166 | .hidden { | ||
167 | display: none; | ||
168 | } | ||
169 | |||
170 | .picker__date-display { | ||
171 | display: none; | ||
172 | } | ||
173 | |||
174 | footer.page-footer { | ||
175 | margin-top: 10px; | ||
176 | padding-top: 10px; | ||
177 | } | ||
178 | |||
179 | footer .row { | ||
180 | margin-bottom: 10px; | ||
181 | } | ||
182 | |||
183 | /* ========================================================================== | ||
184 | 1 = Nav | ||
185 | ========================================================================== */ | ||
186 | |||
187 | nav input { | ||
188 | color: #aaa; | ||
189 | } | ||
190 | |||
191 | .nav-wrapper .button-collapse { | ||
192 | padding: 0 15px; | ||
193 | } | ||
194 | |||
195 | .nav-input { | ||
196 | display: none; | ||
197 | } | ||
198 | |||
199 | .nav-panels { | ||
200 | overflow: hidden; | ||
201 | } | ||
202 | |||
203 | .nav-panel-buttom li { | ||
204 | max-height: 64px; | ||
205 | } | ||
206 | |||
207 | .nav-panels { | ||
208 | transition: background 0.2s ease; | ||
209 | } | ||
210 | |||
211 | .nav-panel-add .add, | ||
212 | .nav-panel-search .search, | ||
213 | .nav-panels .close { | ||
214 | color: #444 !important; | ||
215 | } | ||
216 | |||
217 | .nav-panels .action { | ||
218 | padding-left: 0.75rem; | ||
219 | font-size: 2.1rem; | ||
220 | white-space: nowrap; | ||
221 | } | ||
222 | |||
223 | .nav-panels .input-field input { | ||
224 | display: block; | ||
225 | line-height: inherit; | ||
226 | padding-left: 4rem !important; | ||
227 | width: calc(100% - 8rem); | ||
228 | } | ||
229 | |||
230 | .nav-panels .input-field input:focus { | ||
231 | background-color: #fff; | ||
232 | border: 0; | ||
233 | box-shadow: none; | ||
234 | color: #444; | ||
235 | } | ||
236 | |||
237 | .input-field.nav-panel-add label { | ||
238 | left: 1rem; | ||
239 | } | ||
240 | |||
241 | .input-field.nav-panel-add .close { | ||
242 | position: absolute; | ||
243 | top: 0; | ||
244 | right: 1rem; | ||
245 | color: transparent; | ||
246 | cursor: pointer; | ||
247 | font-size: 2rem; | ||
248 | transition: 0.3s color; | ||
249 | } | ||
250 | |||
251 | #button_filters { | ||
252 | display: none; | ||
253 | } | ||
254 | |||
255 | #button_export { | ||
256 | display: none; | ||
257 | } | ||
258 | |||
259 | /* ========================================================================== | ||
260 | 2 = Side-nav | ||
261 | ========================================================================== */ | ||
262 | |||
263 | .side-nav.fixed a { | ||
264 | font-size: 13px; | ||
265 | line-height: 44px; | ||
266 | height: 44px; | ||
267 | } | ||
268 | |||
269 | .side-nav .collapsible-header, | ||
270 | .side-nav.fixed .collapsible-header { | ||
271 | height: 45px; | ||
272 | line-height: 44px; | ||
273 | padding: 0 20px; | ||
274 | } | ||
275 | |||
276 | .bold > a { | ||
277 | font-weight: bold; | ||
278 | } | ||
279 | |||
280 | .side-nav > li.logo { | ||
281 | line-height: 0; | ||
282 | text-align: center; | ||
283 | } | ||
284 | |||
285 | #main .logo a { | ||
286 | height: 100pt; | ||
287 | } | ||
288 | |||
289 | #main .logo img { | ||
290 | height: 100pt; | ||
291 | width: 100pt; | ||
292 | } | ||
293 | |||
294 | #main .logo:hover { | ||
295 | background: transparent; | ||
296 | } | ||
297 | |||
298 | .side-nav li { | ||
299 | padding: 0; | ||
300 | } | ||
301 | |||
302 | .side-nav a { | ||
303 | margin: 0 1rem; | ||
304 | } | ||
305 | |||
306 | /* ========================================================================== | ||
307 | * 3 = Filters slider | ||
308 | * ========================================================================== */ | ||
309 | |||
310 | #filters button { | ||
311 | padding: 0; | ||
312 | width: 100%; | ||
313 | } | ||
314 | |||
315 | .side-nav.fixed.right-aligned { | ||
316 | right: -250px; | ||
317 | left: auto !important; | ||
318 | overflow-y: visible; | ||
319 | } | ||
320 | |||
321 | #filters div.with-checkbox { | ||
322 | height: 3rem; | ||
323 | margin-top: 0; | ||
324 | } | ||
325 | |||
326 | /* ========================================================================== | ||
327 | 4 = Cards | ||
328 | ========================================================================== */ | ||
329 | |||
330 | main #content { | ||
331 | padding: 0 0.5rem; | ||
332 | } | ||
333 | |||
334 | main ul.row { | ||
335 | padding: 0 0.75rem; | ||
336 | } | ||
337 | |||
338 | .data .card .card-body { | ||
339 | height: 22em; | ||
340 | overflow: hidden; | ||
341 | } | ||
342 | |||
343 | .card .card-content .card-title { | ||
344 | line-height: 32px; | ||
345 | } | ||
346 | |||
347 | .card .card-entry-labels { | ||
348 | position: absolute; | ||
349 | top: 10px; | ||
350 | z-index: 90; | ||
351 | max-width: 50%; | ||
352 | } | ||
353 | |||
354 | .card .card-entry-labels li { | ||
355 | margin: 10px 10px 10px auto; | ||
356 | padding: 5px 12px 5px 16px; | ||
357 | background-color: rgba(0, 151, 167, 0.85); | ||
358 | border-radius: 0 3px 3px 0; | ||
359 | color: #fff; | ||
360 | cursor: default; | ||
361 | max-height: 2em; | ||
362 | overflow: hidden; | ||
363 | text-overflow: ellipsis; | ||
364 | white-space: nowrap; | ||
365 | } | ||
366 | |||
367 | .card .card-entry-labels-hidden { | ||
368 | margin-top: 5px; | ||
369 | } | ||
370 | |||
371 | .card .card-entry-labels-hidden li { | ||
372 | display: inline-block; | ||
373 | background-color: rgba(0, 151, 167, 0.85); | ||
374 | margin: 0 5px; | ||
375 | padding: 5px 12px; | ||
376 | border-radius: 3px; | ||
377 | color: #fff; | ||
378 | max-height: 2em; | ||
379 | max-width: calc(100% - 15px); | ||
380 | overflow: hidden; | ||
381 | text-overflow: ellipsis; | ||
382 | white-space: nowrap; | ||
383 | } | ||
384 | |||
385 | .card .card-content .estimatedTime { | ||
386 | margin-bottom: 10px; | ||
387 | } | ||
388 | |||
389 | .card .card-action .original { | ||
390 | line-height: 24px; | ||
391 | } | ||
392 | |||
393 | .card .card-action ul.links { | ||
394 | margin: 0; | ||
395 | font-size: 24px; | ||
396 | line-height: 24px; | ||
397 | } | ||
398 | |||
399 | .card .card-action a { | ||
400 | color: #fff; | ||
401 | margin: 0; | ||
402 | } | ||
403 | |||
404 | .card .card-action a:hover { | ||
405 | color: #fff; | ||
406 | } | ||
407 | |||
408 | .settings .div_tabs { | ||
409 | padding-bottom: 15px; | ||
410 | } | ||
411 | |||
412 | .card.sw { | ||
413 | max-width: 370px; | ||
414 | margin-left: auto; | ||
415 | margin-right: auto; | ||
416 | } | ||
417 | |||
418 | .card .card-image { | ||
419 | height: 14em; | ||
420 | } | ||
421 | |||
422 | .card .card-image .preview { | ||
423 | height: 14em; | ||
424 | background-size: cover; | ||
425 | background-repeat: no-repeat; | ||
426 | background-position: 50%; | ||
427 | } | ||
428 | |||
429 | /* ========================================================================== | ||
430 | 5 = Article | ||
431 | ========================================================================== */ | ||
432 | |||
433 | #article { | ||
434 | font-size: 20px; | ||
435 | margin: 0 auto; | ||
436 | max-width: 40em; | ||
437 | } | ||
438 | |||
439 | #article img, | ||
440 | #article figure { | ||
441 | max-width: 100%; | ||
442 | height: auto; | ||
443 | } | ||
444 | |||
445 | #article > header > h1 { | ||
446 | font-size: 2em; | ||
447 | } | ||
448 | |||
449 | .reader-mode { | ||
450 | width: 95px !important; | ||
451 | transition: width 0.2s ease; | ||
452 | } | ||
453 | |||
454 | .reader-mode:hover { | ||
455 | width: 240px !important; | ||
456 | } | ||
457 | |||
458 | .reader-mode .collapsible-body { | ||
459 | height: 0; | ||
460 | overflow: hidden; | ||
461 | } | ||
462 | |||
463 | .reader-mode:hover .collapsible-body { | ||
464 | height: auto; | ||
465 | } | ||
466 | |||
467 | .reader-mode span { | ||
468 | opacity: 0; | ||
469 | transition: opacity 0.2s ease; | ||
470 | } | ||
471 | |||
472 | .reader-mode:hover span { | ||
473 | opacity: 1; | ||
474 | } | ||
475 | |||
476 | .progress { | ||
477 | position: fixed; | ||
478 | top: 0; | ||
479 | width: 100%; | ||
480 | height: 3px; | ||
481 | margin: 0; | ||
482 | z-index: 9999; | ||
483 | } | ||
484 | |||
485 | #article aside .link { | ||
486 | color: #000; | ||
487 | font-size: 0.8em; | ||
488 | text-decoration: none; | ||
489 | } | ||
490 | |||
491 | #article aside #list { | ||
492 | float: right; | ||
493 | margin: 0 15px 10px; | ||
494 | } | ||
495 | |||
496 | #article aside .chip { | ||
497 | background-color: rgba(0, 151, 167, 0.85); | ||
498 | color: #fff; | ||
499 | padding: 0 15px 0 10px; | ||
500 | } | ||
501 | |||
502 | #article aside .chip i { | ||
503 | color: #fff; | ||
504 | } | ||
505 | |||
506 | /* ========================================================================== | ||
507 | 6 = Media queries | ||
508 | ========================================================================== */ | ||
509 | |||
510 | @media only screen and (max-width: 992px) { | ||
511 | header, | ||
512 | main, | ||
513 | footer { | ||
514 | padding-left: 0; | ||
515 | } | ||
516 | nav, | ||
517 | main, | ||
518 | footer { | ||
519 | padding-left: 0; | ||
520 | } | ||
521 | .pagination { | ||
522 | width: auto; | ||
523 | } | ||
524 | .reader-mode { | ||
525 | width: 240px !important; | ||
526 | } | ||
527 | .reader-mode span { | ||
528 | opacity: 1; | ||
529 | } | ||
530 | .tabs { | ||
531 | display: inline-block; | ||
532 | height: auto; | ||
533 | } | ||
534 | .tab { | ||
535 | min-width: 100%; | ||
536 | } | ||
537 | .indicator { | ||
538 | display: none; | ||
539 | } | ||
540 | .pagination li.prev, | ||
541 | .pagination li.next { | ||
542 | width: auto; | ||
543 | } | ||
544 | } | ||
545 | |||
546 | @media only screen and (min-width: 400px) { | ||
547 | .nav-panel-buttom { | ||
548 | float: right; | ||
549 | } | ||
550 | } | ||
551 | |||
552 | @media only screen and (min-width: 993px) and (max-width: 1180px) { | ||
553 | .row .col.l1 { | ||
554 | width: 25%; | ||
555 | margin-left: 0; | ||
556 | } | ||
557 | .row .col.l2 { | ||
558 | width: 33.33333%; | ||
559 | margin-left: 0; | ||
560 | } | ||
561 | .row .col.l3 { | ||
562 | width: 41.66667%; | ||
563 | margin-left: 0; | ||
564 | } | ||
565 | .row .col.l4 { | ||
566 | width: 50%; | ||
567 | margin-left: 0; | ||
568 | } | ||
569 | .row .col.l5 { | ||
570 | width: 58.33333%; | ||
571 | margin-left: 0; | ||
572 | } | ||
573 | .row .col.l6 { | ||
574 | width: 66.66667%; | ||
575 | margin-left: 0; | ||
576 | } | ||
577 | .row .col.l7 { | ||
578 | width: 75%; | ||
579 | margin-left: 0; | ||
580 | } | ||
581 | .row .col.l8 { | ||
582 | width: 83.33333%; | ||
583 | margin-left: 0; | ||
584 | } | ||
585 | .row .col.l9 { | ||
586 | width: 91.66667%; | ||
587 | margin-left: 0; | ||
588 | } | ||
589 | .row .col.l10 { | ||
590 | width: 100%; | ||
591 | margin-left: 0; | ||
592 | } | ||
593 | } | ||
594 | |||
595 | @media only screen and (max-width: 350px) { | ||
596 | .nb-results { | ||
597 | display: none; | ||
598 | } | ||
599 | } | ||
600 | |||
601 | /* ========================================================================== | ||
602 | 7 = Font | ||
603 | ========================================================================== */ | ||
604 | |||
605 | .icon-google-plus2::before { | ||
606 | content: "\ea89"; | ||
607 | } | ||
608 | |||
609 | .icon-facebook2::before { | ||
610 | content: "\ea8d"; | ||
611 | } | ||
612 | |||
613 | .icon-twitter::before { | ||
614 | content: "\ea91"; | ||
615 | } | ||
616 | |||
617 | .icon-apple::before { | ||
618 | content: "\eabf"; | ||
619 | } | ||
620 | |||
621 | .icon-android::before { | ||
622 | content: "\eac1"; | ||
623 | } | ||
624 | |||
625 | .icon-chrome::before { | ||
626 | content: "\eae5"; | ||
627 | } | ||
628 | |||
629 | .icon-firefox::before { | ||
630 | content: "\eae6"; | ||
631 | } | ||
632 | |||
633 | footer [class^="icon-"], | ||
634 | footer [class*=" icon-"] { | ||
635 | font-size: 2em; | ||
636 | transition: text-shadow 0.2s ease; | ||
637 | padding-right: 10px; | ||
638 | } | ||
639 | |||
640 | footer [class^="icon-"]:hover, | ||
641 | footer [class*=" icon-"]:hover { | ||
642 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | ||
643 | } | ||
644 | |||
645 | /* ========================================================================== | ||
646 | 8 = Others | ||
647 | ========================================================================== */ | ||
648 | |||
649 | /* force height on non-input field in the settings page */ | ||
650 | div.settings div.input-field div, | ||
651 | div.settings div.input-field ul { | ||
652 | margin-top: 40px; | ||
653 | } | ||
654 | |||
655 | /* but avoid to kill all file input */ | ||
656 | div.settings div.file-field div { | ||
657 | margin-top: inherit; | ||
658 | } | ||