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