diff options
Diffstat (limited to 'app/Resources/static/themes/baggy/css/main.css')
-rwxr-xr-x | app/Resources/static/themes/baggy/css/main.css | 1330 |
1 files changed, 1330 insertions, 0 deletions
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css new file mode 100755 index 00000000..44db2070 --- /dev/null +++ b/app/Resources/static/themes/baggy/css/main.css | |||
@@ -0,0 +1,1330 @@ | |||
1 | /* ========================================================================== | ||
2 | Sommaire | ||
3 | |||
4 | 1 = Style Guide | ||
5 | 2 = Layout | ||
6 | 3 = Pictos | ||
7 | 4 = Messages | ||
8 | 5 = Article | ||
9 | 6 = Media queries | ||
10 | |||
11 | ========================================================================== */ | ||
12 | |||
13 | html { | ||
14 | min-height: 100%; | ||
15 | } | ||
16 | |||
17 | body { | ||
18 | background-color: #eee; | ||
19 | } | ||
20 | |||
21 | .login { | ||
22 | background-color: #333; | ||
23 | } | ||
24 | |||
25 | .login #main { | ||
26 | padding: 0; | ||
27 | margin: 0; | ||
28 | } | ||
29 | |||
30 | .login form { | ||
31 | background-color: #fff; | ||
32 | padding: 1.5em; | ||
33 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); | ||
34 | width: 20em; | ||
35 | position: absolute; | ||
36 | top: 8em; | ||
37 | left: 50%; | ||
38 | margin-left: -10em; | ||
39 | } | ||
40 | |||
41 | .login .logo { | ||
42 | position: absolute; | ||
43 | top: 2em; | ||
44 | left: 50%; | ||
45 | margin-left: -55px; | ||
46 | } | ||
47 | |||
48 | /* ========================================================================== | ||
49 | 1 = Style Guide | ||
50 | ========================================================================== */ | ||
51 | |||
52 | ::selection { | ||
53 | color: #fff; | ||
54 | background-color: #000; | ||
55 | } | ||
56 | |||
57 | .desktopHide { | ||
58 | display: none; | ||
59 | } | ||
60 | |||
61 | .logo { | ||
62 | position: fixed; | ||
63 | z-index: 20; | ||
64 | top: 0.4em; | ||
65 | left: 0.6em; | ||
66 | } | ||
67 | |||
68 | h2, | ||
69 | h3, | ||
70 | h4 { | ||
71 | font-family: "PT Sans", sans-serif; | ||
72 | text-transform: uppercase; | ||
73 | } | ||
74 | |||
75 | p, | ||
76 | li, | ||
77 | label { | ||
78 | color: #666; | ||
79 | } | ||
80 | |||
81 | a { | ||
82 | color: #000; | ||
83 | font-weight: bold; | ||
84 | } | ||
85 | |||
86 | a.nostyle { | ||
87 | text-decoration: none; | ||
88 | } | ||
89 | |||
90 | a:hover, | ||
91 | a:focus { | ||
92 | text-decoration: none; | ||
93 | } | ||
94 | |||
95 | form fieldset { | ||
96 | border: 0; | ||
97 | padding: 0; | ||
98 | margin: 0; | ||
99 | } | ||
100 | |||
101 | form input[type="text"], | ||
102 | form input[type="number"], | ||
103 | select, | ||
104 | form input[type="password"], | ||
105 | form input[type="url"], | ||
106 | form input[type="email"] { | ||
107 | border: 1px solid #999; | ||
108 | padding: 0.5em 1em; | ||
109 | min-width: 12em; | ||
110 | color: #666; | ||
111 | } | ||
112 | |||
113 | @media screen and (-webkit-min-device-pixel-ratio: 0) { | ||
114 | select { | ||
115 | -webkit-appearance: none; | ||
116 | border-radius: 0; | ||
117 | background: #fff url("../../_global/img/bg-select.png") no-repeat right center; | ||
118 | } | ||
119 | } | ||
120 | |||
121 | .inline .row { | ||
122 | display: inline-block; | ||
123 | margin-right: 0.5em; | ||
124 | } | ||
125 | |||
126 | .inline label { | ||
127 | min-width: 6em; | ||
128 | } | ||
129 | |||
130 | fieldset label { | ||
131 | display: inline-block; | ||
132 | min-width: 12.5em; | ||
133 | color: #666; | ||
134 | } | ||
135 | |||
136 | label { | ||
137 | margin-right: 0.5em; | ||
138 | } | ||
139 | |||
140 | form .row { | ||
141 | margin-bottom: 0.5em; | ||
142 | } | ||
143 | |||
144 | form button, | ||
145 | input[type="submit"] { | ||
146 | cursor: pointer; | ||
147 | background-color: #000; | ||
148 | color: #fff; | ||
149 | padding: 0.5em 1em; | ||
150 | display: inline-block; | ||
151 | border: 1px solid #000; | ||
152 | } | ||
153 | |||
154 | form button:hover, | ||
155 | form button:focus, | ||
156 | input[type="submit"]:hover, | ||
157 | input[type="submit"]:focus { | ||
158 | background-color: #fff; | ||
159 | color: #000; | ||
160 | -webkit-transition: all 0.5s ease; | ||
161 | -moz-transition: all 0.5s ease; | ||
162 | -ms-transition: all 0.5s ease; | ||
163 | -o-transition: all 0.5s ease; | ||
164 | transition: all 0.5s ease; | ||
165 | } | ||
166 | |||
167 | #bookmarklet { | ||
168 | cursor: move; | ||
169 | } | ||
170 | |||
171 | h2::after { | ||
172 | content: ""; | ||
173 | height: 4px; | ||
174 | width: 70px; | ||
175 | background-color: #000; | ||
176 | display: block; | ||
177 | } | ||
178 | |||
179 | .links { | ||
180 | padding: 0; | ||
181 | margin: 0; | ||
182 | } | ||
183 | |||
184 | .links li { | ||
185 | list-style: none; | ||
186 | margin: 0; | ||
187 | padding: 0; | ||
188 | } | ||
189 | |||
190 | #links { | ||
191 | position: fixed; | ||
192 | top: 0; | ||
193 | width: 10em; | ||
194 | left: 0; | ||
195 | text-align: right; | ||
196 | background-color: #333; | ||
197 | padding-top: 9.5em; | ||
198 | height: 100%; | ||
199 | box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6); | ||
200 | z-index: 15; | ||
201 | } | ||
202 | |||
203 | #main { | ||
204 | margin-left: 12em; | ||
205 | position: relative; | ||
206 | z-index: 10; | ||
207 | padding-right: 5%; | ||
208 | padding-bottom: 1em; | ||
209 | } | ||
210 | |||
211 | #links > li > a { | ||
212 | display: block; | ||
213 | padding: 0.5em 2em 0.5em 1em; | ||
214 | color: #fff; | ||
215 | position: relative; | ||
216 | text-transform: uppercase; | ||
217 | text-decoration: none; | ||
218 | font-weight: normal; | ||
219 | font-family: "PT Sans", sans-serif; | ||
220 | -webkit-transition: all 0.5s ease; | ||
221 | -moz-transition: all 0.5s ease; | ||
222 | -ms-transition: all 0.5s ease; | ||
223 | -o-transition: all 0.5s ease; | ||
224 | transition: all 0.5s ease; | ||
225 | } | ||
226 | |||
227 | #links > li > a:hover, | ||
228 | #links > li > a:focus { | ||
229 | background-color: #999; | ||
230 | color: #000; | ||
231 | } | ||
232 | |||
233 | #links .current::after { | ||
234 | content: ""; | ||
235 | width: 0; | ||
236 | height: 0; | ||
237 | position: absolute; | ||
238 | border-style: solid; | ||
239 | border-width: 10px; | ||
240 | border-color: transparent #eee transparent transparent; | ||
241 | right: 0; | ||
242 | top: 50%; | ||
243 | margin-top: -10px; | ||
244 | } | ||
245 | |||
246 | #links li:last-child { | ||
247 | position: fixed; | ||
248 | bottom: 1em; | ||
249 | width: 10em; | ||
250 | } | ||
251 | |||
252 | #links li:last-child a::before { | ||
253 | font-size: 1.2em; | ||
254 | position: relative; | ||
255 | top: 2px; | ||
256 | } | ||
257 | |||
258 | #sort { | ||
259 | padding: 0; | ||
260 | list-style-type: none; | ||
261 | opacity: 0.5; | ||
262 | display: inline-block; | ||
263 | } | ||
264 | |||
265 | #sort li { | ||
266 | display: inline; | ||
267 | font-size: 0.9em; | ||
268 | } | ||
269 | |||
270 | #sort li + li { | ||
271 | margin-left: 10px; | ||
272 | } | ||
273 | |||
274 | #sort a { | ||
275 | padding: 2px 2px 0; | ||
276 | vertical-align: middle; | ||
277 | } | ||
278 | |||
279 | #sort img { | ||
280 | vertical-align: baseline; | ||
281 | } | ||
282 | |||
283 | #sort img:hover { | ||
284 | cursor: pointer; | ||
285 | } | ||
286 | |||
287 | #display-mode { | ||
288 | float: right; | ||
289 | margin-top: 10px; | ||
290 | margin-bottom: 10px; | ||
291 | opacity: 0.5; | ||
292 | } | ||
293 | |||
294 | #listmode { | ||
295 | width: 16px; | ||
296 | display: inline-block; | ||
297 | text-decoration: none; | ||
298 | } | ||
299 | |||
300 | #listmode a:hover { | ||
301 | opacity: 1; | ||
302 | } | ||
303 | |||
304 | #listmode.tablemode { | ||
305 | background-image: url("../img/baggy/table.png"); | ||
306 | background-repeat: no-repeat; | ||
307 | background-position: bottom; | ||
308 | } | ||
309 | |||
310 | #listmode.listmode { | ||
311 | background-image: url("../img/baggy/list.png"); | ||
312 | background-repeat: no-repeat; | ||
313 | background-position: bottom; | ||
314 | } | ||
315 | |||
316 | #warning_message { | ||
317 | position: fixed; | ||
318 | background-color: #ff6347; | ||
319 | z-index: 1000; | ||
320 | bottom: 0; | ||
321 | left: 0; | ||
322 | width: 100%; | ||
323 | color: #000; | ||
324 | } | ||
325 | |||
326 | /* ========================================================================== | ||
327 | 2 = Layout | ||
328 | ========================================================================== */ | ||
329 | |||
330 | #content { | ||
331 | margin-top: 2em; | ||
332 | min-height: 30em; | ||
333 | } | ||
334 | |||
335 | footer { | ||
336 | text-align: right; | ||
337 | position: relative; | ||
338 | bottom: 0; | ||
339 | right: 5em; | ||
340 | color: #999; | ||
341 | font-size: 0.8em; | ||
342 | font-style: italic; | ||
343 | z-index: 20; | ||
344 | } | ||
345 | |||
346 | footer a { | ||
347 | color: #999; | ||
348 | font-weight: normal; | ||
349 | } | ||
350 | |||
351 | .list-entries { | ||
352 | letter-spacing: -5px; | ||
353 | } | ||
354 | |||
355 | .listmode .entry { | ||
356 | width: 100% !important; | ||
357 | margin-left: 0 !important; | ||
358 | } | ||
359 | |||
360 | .card-entry-labels { | ||
361 | position: absolute; | ||
362 | top: 100px; | ||
363 | left: -1em; | ||
364 | z-index: 90; | ||
365 | max-width: 50%; | ||
366 | padding-left: 0; | ||
367 | } | ||
368 | |||
369 | .card-entry-labels li { | ||
370 | margin: 10px 10px 10px auto; | ||
371 | padding: 5px 12px 5px 25px; | ||
372 | background-color: rgba(0, 0, 0, 0.6); | ||
373 | border-radius: 0 3px 3px 0; | ||
374 | color: #fff; | ||
375 | cursor: default; | ||
376 | max-height: 2em; | ||
377 | overflow: hidden; | ||
378 | text-overflow: ellipsis; | ||
379 | white-space: nowrap; | ||
380 | } | ||
381 | |||
382 | .card-entry-tags { | ||
383 | max-height: 2em; | ||
384 | overflow-y: hidden; | ||
385 | padding: 0; | ||
386 | margin: 0; | ||
387 | } | ||
388 | |||
389 | .card-entry-tags li, | ||
390 | .card-entry-tags span { | ||
391 | display: inline-block; | ||
392 | margin: 0 5px; | ||
393 | padding: 5px 12px; | ||
394 | background-color: rgba(0, 0, 0, 0.6); | ||
395 | border-radius: 3px; | ||
396 | max-height: 2em; | ||
397 | overflow: hidden; | ||
398 | text-overflow: ellipsis; | ||
399 | } | ||
400 | |||
401 | .card-entry-tags a, | ||
402 | .card-entry-labels a { | ||
403 | text-decoration: none; | ||
404 | font-weight: normal; | ||
405 | color: #fff; | ||
406 | } | ||
407 | |||
408 | .nav-panel-add-tag { | ||
409 | margin-top: 10px; | ||
410 | } | ||
411 | |||
412 | .list-entries + .results { | ||
413 | margin-bottom: 2em; | ||
414 | } | ||
415 | |||
416 | .estimatedTime .reading-time { | ||
417 | color: #999; | ||
418 | font-style: italic; | ||
419 | font-weight: normal; | ||
420 | font-size: 0.9em; | ||
421 | } | ||
422 | |||
423 | .estimatedTime small { | ||
424 | position: relative; | ||
425 | top: -1px; | ||
426 | } | ||
427 | |||
428 | .entry { | ||
429 | background-color: #fff; | ||
430 | letter-spacing: normal; | ||
431 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | ||
432 | display: inline-block; | ||
433 | width: 32%; | ||
434 | margin-bottom: 1.5em; | ||
435 | vertical-align: top; | ||
436 | margin-right: 1%; | ||
437 | position: relative; | ||
438 | overflow: hidden; | ||
439 | padding: 1.5em 1.5em 3em; | ||
440 | height: 440px; | ||
441 | } | ||
442 | |||
443 | .entry::before { | ||
444 | content: ""; | ||
445 | width: 0; | ||
446 | height: 0; | ||
447 | border-style: solid; | ||
448 | border-color: transparent transparent #000; | ||
449 | border-width: 10px; | ||
450 | position: absolute; | ||
451 | bottom: 0.3em; | ||
452 | z-index: 10; | ||
453 | right: 1.5em; | ||
454 | -webkit-transition: all 0.5s ease; | ||
455 | -moz-transition: all 0.5s ease; | ||
456 | -ms-transition: all 0.5s ease; | ||
457 | -o-transition: all 0.5s ease; | ||
458 | transition: all 0.5s ease; | ||
459 | } | ||
460 | |||
461 | .entry::after { | ||
462 | content: ""; | ||
463 | position: absolute; | ||
464 | height: 7px; | ||
465 | width: 100%; | ||
466 | bottom: 0; | ||
467 | left: 0; | ||
468 | background-color: #000; | ||
469 | -webkit-transition: all 0.5s ease; | ||
470 | -moz-transition: all 0.5s ease; | ||
471 | -ms-transition: all 0.5s ease; | ||
472 | -o-transition: all 0.5s ease; | ||
473 | transition: all 0.5s ease; | ||
474 | } | ||
475 | |||
476 | .entry:hover { | ||
477 | box-shadow: 0 3px 10px rgba(0, 0, 0, 1); | ||
478 | } | ||
479 | |||
480 | .entry:hover::after { | ||
481 | height: 40px; | ||
482 | } | ||
483 | |||
484 | .entry:hover::before { | ||
485 | bottom: 2.4em; | ||
486 | } | ||
487 | |||
488 | .entry:hover h2 a { | ||
489 | color: #666; | ||
490 | } | ||
491 | |||
492 | .entry h2 { | ||
493 | text-transform: none; | ||
494 | margin-bottom: 0; | ||
495 | line-height: 1.2; | ||
496 | } | ||
497 | |||
498 | .entry h2::after { | ||
499 | content: none; | ||
500 | } | ||
501 | |||
502 | .entry h2 a { | ||
503 | display: block; | ||
504 | text-decoration: none; | ||
505 | color: #000; | ||
506 | word-wrap: break-word; | ||
507 | -webkit-transition: all 0.5s ease; | ||
508 | -moz-transition: all 0.5s ease; | ||
509 | -ms-transition: all 0.5s ease; | ||
510 | -o-transition: all 0.5s ease; | ||
511 | transition: all 0.5s ease; | ||
512 | } | ||
513 | |||
514 | img.preview { | ||
515 | max-width: calc(100% + 3em); | ||
516 | left: -1.5em; | ||
517 | position: relative; | ||
518 | } | ||
519 | |||
520 | .entry p { | ||
521 | color: #666; | ||
522 | font-size: 0.9em; | ||
523 | line-height: 1.7; | ||
524 | margin-top: 5px; | ||
525 | } | ||
526 | |||
527 | .entry h2 a::first-letter { | ||
528 | text-transform: uppercase; | ||
529 | } | ||
530 | |||
531 | .entry:hover .tools { | ||
532 | bottom: 0; | ||
533 | } | ||
534 | |||
535 | .entry .tools { | ||
536 | position: absolute; | ||
537 | bottom: -50px; | ||
538 | left: 0; | ||
539 | width: 100%; | ||
540 | z-index: 10; | ||
541 | padding-right: 0.5em; | ||
542 | text-align: right; | ||
543 | -webkit-transition: all 0.5s ease; | ||
544 | -moz-transition: all 0.5s ease; | ||
545 | -ms-transition: all 0.5s ease; | ||
546 | -o-transition: all 0.5s ease; | ||
547 | transition: all 0.5s ease; | ||
548 | } | ||
549 | |||
550 | .entry .tools a { | ||
551 | color: #666; | ||
552 | text-decoration: none; | ||
553 | display: block; | ||
554 | padding: 0.4em; | ||
555 | } | ||
556 | |||
557 | .entry .tools a:hover { | ||
558 | color: #fff; | ||
559 | } | ||
560 | |||
561 | .entry .tools li { | ||
562 | display: inline-block; | ||
563 | } | ||
564 | |||
565 | .entry:nth-child(3n+1) { | ||
566 | margin-left: 0; | ||
567 | } | ||
568 | |||
569 | .results { | ||
570 | letter-spacing: -5px; | ||
571 | padding: 0 0 0.5em; | ||
572 | } | ||
573 | |||
574 | .results > * { | ||
575 | display: inline-block; | ||
576 | vertical-align: top; | ||
577 | letter-spacing: normal; | ||
578 | width: 50%; | ||
579 | text-align: right; | ||
580 | } | ||
581 | |||
582 | div.pagination ul { | ||
583 | text-align: right; | ||
584 | margin-bottom: 50px; | ||
585 | } | ||
586 | |||
587 | .nb-results { | ||
588 | text-align: left; | ||
589 | font-style: italic; | ||
590 | color: #999; | ||
591 | } | ||
592 | |||
593 | div.pagination ul > * { | ||
594 | display: inline-block; | ||
595 | margin-left: 0.5em; | ||
596 | } | ||
597 | |||
598 | div.pagination ul a { | ||
599 | color: #999; | ||
600 | text-decoration: none; | ||
601 | } | ||
602 | |||
603 | div.pagination ul a:hover, | ||
604 | div.pagination ul a:focus { | ||
605 | text-decoration: underline; | ||
606 | } | ||
607 | |||
608 | div.pagination ul .prev.disabled, | ||
609 | div.pagination ul .next.disabled { | ||
610 | display: none; | ||
611 | } | ||
612 | |||
613 | div.pagination ul .current { | ||
614 | height: 25px; | ||
615 | padding: 4px 8px; | ||
616 | border: 1px solid #d5d5d5; | ||
617 | text-decoration: none; | ||
618 | font-weight: bold; | ||
619 | color: #000; | ||
620 | background-color: #ccc; | ||
621 | } | ||
622 | |||
623 | /* ========================================================================== | ||
624 | 2.1 = "save a link" related styles | ||
625 | ========================================================================== */ | ||
626 | |||
627 | .popup-form { | ||
628 | background: rgba(0, 0, 0, 0.5); | ||
629 | position: absolute; | ||
630 | top: 0; | ||
631 | left: 10em; | ||
632 | z-index: 20; | ||
633 | height: 100%; | ||
634 | width: 100%; | ||
635 | margin: 0; | ||
636 | margin-top: -30% !important; | ||
637 | padding: 2em; | ||
638 | display: none; | ||
639 | border-left: 1px #eee solid; | ||
640 | } | ||
641 | |||
642 | .popup-form form { | ||
643 | background-color: #fff; | ||
644 | position: absolute; | ||
645 | top: 0; | ||
646 | left: 0; | ||
647 | z-index: 20; | ||
648 | border: 10px solid #000; | ||
649 | width: 400px; | ||
650 | height: 200px; | ||
651 | padding: 2em; | ||
652 | } | ||
653 | |||
654 | #bagit-form-form .addurl { | ||
655 | margin-left: 0; | ||
656 | } | ||
657 | |||
658 | .closeMessage, | ||
659 | .close-button { | ||
660 | background-color: #000; | ||
661 | color: #fff; | ||
662 | font-size: 1.2em; | ||
663 | line-height: 1.6; | ||
664 | width: 1.6em; | ||
665 | height: 1.6em; | ||
666 | text-align: center; | ||
667 | text-decoration: none; | ||
668 | } | ||
669 | |||
670 | .closeMessage:hover, | ||
671 | .closeMessage:focus, | ||
672 | .close-button:hover, | ||
673 | .close-button:focus { | ||
674 | background-color: #999; | ||
675 | color: #000; | ||
676 | } | ||
677 | |||
678 | .close-button--popup { | ||
679 | display: inline-block; | ||
680 | position: absolute; | ||
681 | top: 0; | ||
682 | right: 0; | ||
683 | font-size: 1.4em; | ||
684 | } | ||
685 | |||
686 | .active-current { | ||
687 | background-color: #999; | ||
688 | } | ||
689 | |||
690 | .active-current::after { | ||
691 | content: ""; | ||
692 | width: 0; | ||
693 | height: 0; | ||
694 | position: absolute; | ||
695 | border-style: solid; | ||
696 | border-width: 10px; | ||
697 | border-color: transparent #eee transparent transparent; | ||
698 | right: 0; | ||
699 | top: 50%; | ||
700 | margin-top: -10px; | ||
701 | } | ||
702 | |||
703 | .opacity03 { | ||
704 | opacity: 0.3; | ||
705 | } | ||
706 | |||
707 | .add-to-wallabag-link-after { | ||
708 | background-color: #000; | ||
709 | color: #fff; | ||
710 | padding: 0 3px 2px; | ||
711 | } | ||
712 | |||
713 | a.add-to-wallabag-link-after { | ||
714 | visibility: hidden; | ||
715 | position: absolute; | ||
716 | opacity: 0; | ||
717 | transition-duration: 2s; | ||
718 | transition-timing-function: ease-out; | ||
719 | } | ||
720 | |||
721 | #article article a:hover + a.add-to-wallabag-link-after, | ||
722 | a.add-to-wallabag-link-after:hover { | ||
723 | opacity: 1; | ||
724 | visibility: visible; | ||
725 | transition-duration: 0.3s; | ||
726 | transition-timing-function: ease-in; | ||
727 | } | ||
728 | |||
729 | a.add-to-wallabag-link-after::after { | ||
730 | content: "w"; | ||
731 | } | ||
732 | |||
733 | #add-link-result { | ||
734 | font-weight: bold; | ||
735 | font-size: 0.9em; | ||
736 | } | ||
737 | |||
738 | .btn-clickable { | ||
739 | cursor: pointer; | ||
740 | } | ||
741 | |||
742 | /* ========================================================================== | ||
743 | 3 = Pictos | ||
744 | ========================================================================== */ | ||
745 | |||
746 | @font-face { | ||
747 | font-family: icomoon; | ||
748 | src: url("../fonts/IcoMoon-Free.ttf"); | ||
749 | font-weight: normal; | ||
750 | font-style: normal; | ||
751 | } | ||
752 | |||
753 | @font-face { | ||
754 | font-family: 'Material Icons'; | ||
755 | font-style: normal; | ||
756 | font-weight: 400; | ||
757 | src: url(../fonts/MaterialIcons-Regular.eot); | ||
758 | |||
759 | /* For IE6-8 */ | ||
760 | 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"); | ||
761 | } | ||
762 | |||
763 | .material-icons { | ||
764 | font-family: 'Material Icons'; | ||
765 | font-weight: normal; | ||
766 | font-style: normal; | ||
767 | font-size: 1em; /* Preferred icon size */ | ||
768 | width: 1em; | ||
769 | height: 1em; | ||
770 | display: inline-block; | ||
771 | line-height: 1; | ||
772 | text-transform: none; | ||
773 | letter-spacing: normal; | ||
774 | word-wrap: normal; | ||
775 | white-space: nowrap; | ||
776 | direction: ltr; | ||
777 | |||
778 | /* Support for all WebKit browsers. */ | ||
779 | -webkit-font-smoothing: antialiased; | ||
780 | |||
781 | /* Support for Safari and Chrome. */ | ||
782 | text-rendering: optimizeLegibility; | ||
783 | |||
784 | /* Support for Firefox. */ | ||
785 | -moz-osx-font-smoothing: grayscale; | ||
786 | |||
787 | /* Support for IE. */ | ||
788 | font-feature-settings: 'liga'; | ||
789 | } | ||
790 | |||
791 | .material-icons.md-18 { font-size: 18px; } | ||
792 | .material-icons.md-24 { font-size: 24px; } | ||
793 | .material-icons.md-36 { font-size: 36px; } | ||
794 | .material-icons.md-48 { font-size: 48px; } | ||
795 | |||
796 | .icon span, | ||
797 | .icon-image span { | ||
798 | position: absolute; | ||
799 | top: -9999px; | ||
800 | } | ||
801 | |||
802 | [class^="icon-"]::before, | ||
803 | [class*=" icon-"]::before { | ||
804 | font-family: icomoon; | ||
805 | speak: none; | ||
806 | font-style: normal; | ||
807 | font-weight: normal; | ||
808 | font-variant: normal; | ||
809 | text-transform: none; | ||
810 | line-height: 1; | ||
811 | |||
812 | /* Enable Ligatures ================ */ | ||
813 | letter-spacing: 0; | ||
814 | -webkit-font-feature-settings: "liga"; | ||
815 | -moz-font-feature-settings: "liga=1"; | ||
816 | -moz-font-feature-settings: "liga"; | ||
817 | -ms-font-feature-settings: "liga" 1; | ||
818 | -o-font-feature-settings: "liga"; | ||
819 | font-feature-settings: "liga"; | ||
820 | |||
821 | /* Better Font Rendering =========== */ | ||
822 | -webkit-font-smoothing: antialiased; | ||
823 | -moz-osx-font-smoothing: grayscale; | ||
824 | } | ||
825 | |||
826 | .icon-flattr::before { | ||
827 | content: "\ead4"; | ||
828 | } | ||
829 | |||
830 | .icon-mail::before { | ||
831 | content: "\ea86"; | ||
832 | } | ||
833 | |||
834 | .icon-up-open::before { | ||
835 | content: "\e80b"; | ||
836 | } | ||
837 | |||
838 | .icon-star::before { | ||
839 | content: "\e9d9"; | ||
840 | } | ||
841 | |||
842 | .icon-check::before { | ||
843 | content: "\ea10"; | ||
844 | } | ||
845 | |||
846 | .icon-link::before { | ||
847 | content: "\e9cb"; | ||
848 | } | ||
849 | |||
850 | .icon-reply::before { | ||
851 | content: "\e806"; | ||
852 | } | ||
853 | |||
854 | .icon-menu::before { | ||
855 | content: "\e9bd"; | ||
856 | } | ||
857 | |||
858 | .icon-clock::before { | ||
859 | content: "\e803"; | ||
860 | } | ||
861 | |||
862 | .icon-twitter::before { | ||
863 | content: "\ea96"; | ||
864 | } | ||
865 | |||
866 | .icon-down-open::before { | ||
867 | content: "\e809"; | ||
868 | } | ||
869 | |||
870 | .icon-trash::before { | ||
871 | content: "\e9ac"; | ||
872 | } | ||
873 | |||
874 | .icon-delete::before { | ||
875 | content: "\ea0d"; | ||
876 | } | ||
877 | |||
878 | .icon-power::before { | ||
879 | content: "\ea14"; | ||
880 | } | ||
881 | |||
882 | .icon-arrow-up-thick::before { | ||
883 | content: "\ea3a"; | ||
884 | } | ||
885 | |||
886 | .icon-rss::before { | ||
887 | content: "\e808"; | ||
888 | } | ||
889 | |||
890 | .icon-print::before { | ||
891 | content: "\e954"; | ||
892 | } | ||
893 | |||
894 | .icon-reload::before { | ||
895 | content: "\ea2e"; | ||
896 | } | ||
897 | |||
898 | .icon-price-tags::before { | ||
899 | content: "\e936"; | ||
900 | } | ||
901 | |||
902 | .icon-eye::before { | ||
903 | content: "\e9ce"; | ||
904 | } | ||
905 | |||
906 | .icon-no-eye::before { | ||
907 | content: "\e9d1"; | ||
908 | } | ||
909 | |||
910 | .icon-calendar::before { | ||
911 | content: "\e953"; | ||
912 | } | ||
913 | |||
914 | .icon-time::before { | ||
915 | content: "\e952"; | ||
916 | } | ||
917 | |||
918 | /* .icon-image class, for image-based icons | ||
919 | ========================================================================== */ | ||
920 | |||
921 | .icon-image { | ||
922 | background-size: 16px 16px; | ||
923 | background-repeat: no-repeat; | ||
924 | background-position: center; | ||
925 | padding-right: 1em !important; | ||
926 | padding-left: 1em !important; | ||
927 | } | ||
928 | |||
929 | /* Carrot (http://carrot.org) */ | ||
930 | .icon-image--carrot { | ||
931 | background-image: url("../../_global/img/icons/carrot-icon--white.png"); | ||
932 | } | ||
933 | |||
934 | /* Diaspora */ | ||
935 | .icon-image--diaspora { | ||
936 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); | ||
937 | } | ||
938 | |||
939 | /* shaarli */ | ||
940 | .icon-image--shaarli { | ||
941 | background-image: url("../../_global/img/icons/shaarli.png"); | ||
942 | } | ||
943 | |||
944 | /* ========================================================================== | ||
945 | Icon selected | ||
946 | ========================================================================== */ | ||
947 | |||
948 | .icon-star.fav::before { | ||
949 | color: #fff; | ||
950 | } | ||
951 | |||
952 | .icon-check.archive::before { | ||
953 | color: #fff; | ||
954 | } | ||
955 | |||
956 | /* ========================================================================== | ||
957 | 4 = Messages | ||
958 | ========================================================================== */ | ||
959 | |||
960 | .messages { | ||
961 | text-align: left; | ||
962 | margin-top: 1em; | ||
963 | } | ||
964 | |||
965 | .messages > * { | ||
966 | display: inline-block; | ||
967 | } | ||
968 | |||
969 | .warning { | ||
970 | font-weight: bold; | ||
971 | display: block; | ||
972 | width: 100%; | ||
973 | } | ||
974 | |||
975 | .more-info { | ||
976 | font-size: 0.85em; | ||
977 | line-height: 1.5; | ||
978 | color: #aaa; | ||
979 | } | ||
980 | |||
981 | .more-info a { | ||
982 | color: #aaa; | ||
983 | } | ||
984 | |||
985 | /* ========================================================================== | ||
986 | 5 = Article | ||
987 | ========================================================================== */ | ||
988 | |||
989 | #article { | ||
990 | width: 70%; | ||
991 | margin-bottom: 3em; | ||
992 | text-align: justify; | ||
993 | } | ||
994 | |||
995 | #article .tags { | ||
996 | margin-bottom: 1em; | ||
997 | } | ||
998 | |||
999 | #article i { | ||
1000 | font-style: normal; | ||
1001 | } | ||
1002 | |||
1003 | blockquote { | ||
1004 | border: 1px solid #999; | ||
1005 | background-color: #fff; | ||
1006 | padding: 1em; | ||
1007 | margin: 0; | ||
1008 | } | ||
1009 | |||
1010 | #article h1 { | ||
1011 | text-align: left; | ||
1012 | } | ||
1013 | |||
1014 | #article h2, | ||
1015 | #article h3, | ||
1016 | #article h4 { | ||
1017 | text-transform: none; | ||
1018 | } | ||
1019 | |||
1020 | #article h2::after { | ||
1021 | content: none; | ||
1022 | } | ||
1023 | |||
1024 | .topPosF { | ||
1025 | position: fixed; | ||
1026 | right: 20%; | ||
1027 | bottom: 2em; | ||
1028 | font-size: 1.5em; | ||
1029 | } | ||
1030 | |||
1031 | #article_toolbar { | ||
1032 | margin-bottom: 1em; | ||
1033 | } | ||
1034 | |||
1035 | #article_toolbar li { | ||
1036 | display: inline-block; | ||
1037 | margin: 3px auto; | ||
1038 | } | ||
1039 | |||
1040 | #article_toolbar a { | ||
1041 | background-color: #000; | ||
1042 | padding: 0.3em 0.5em 0.2em; | ||
1043 | color: #fff; | ||
1044 | text-decoration: none; | ||
1045 | } | ||
1046 | |||
1047 | #article_toolbar a:hover, | ||
1048 | #article_toolbar a:focus { | ||
1049 | background-color: #999; | ||
1050 | } | ||
1051 | |||
1052 | #nav-btn-add-tag { | ||
1053 | cursor: pointer; | ||
1054 | } | ||
1055 | |||
1056 | .shaarli::before { | ||
1057 | content: "*"; | ||
1058 | } | ||
1059 | |||
1060 | .return { | ||
1061 | text-decoration: none; | ||
1062 | margin-top: 1em; | ||
1063 | display: block; | ||
1064 | } | ||
1065 | |||
1066 | .return::before { | ||
1067 | margin-right: 0.5em; | ||
1068 | } | ||
1069 | |||
1070 | .notags { | ||
1071 | font-style: italic; | ||
1072 | color: #999; | ||
1073 | } | ||
1074 | |||
1075 | .icon-rss { | ||
1076 | background-color: #000; | ||
1077 | color: #fff; | ||
1078 | padding: 0.2em 0.5em; | ||
1079 | } | ||
1080 | |||
1081 | .icon-rss::before { | ||
1082 | position: relative; | ||
1083 | top: 2px; | ||
1084 | } | ||
1085 | |||
1086 | .list-tags li { | ||
1087 | margin-bottom: 0.5em; | ||
1088 | } | ||
1089 | |||
1090 | .list-tags .icon-rss:hover, | ||
1091 | .list-tags .icon-rss:focus { | ||
1092 | background-color: #fff; | ||
1093 | color: #000; | ||
1094 | text-decoration: none; | ||
1095 | } | ||
1096 | |||
1097 | .list-tags a { | ||
1098 | text-decoration: none; | ||
1099 | } | ||
1100 | |||
1101 | .list-tags a:hover, | ||
1102 | .list-tags a:focus { | ||
1103 | text-decoration: underline; | ||
1104 | } | ||
1105 | |||
1106 | pre code { | ||
1107 | font-family: "Courier New", Courier, monospace; | ||
1108 | } | ||
1109 | |||
1110 | #filters { | ||
1111 | position: fixed; | ||
1112 | width: 20%; | ||
1113 | height: 100%; | ||
1114 | top: 0; | ||
1115 | right: 0; | ||
1116 | background-color: #fff; | ||
1117 | padding: 15px; | ||
1118 | padding-right: 30px; | ||
1119 | padding-top: 30px; | ||
1120 | border-left: 1px #333 solid; | ||
1121 | z-index: 12; | ||
1122 | min-width: 300px; | ||
1123 | } | ||
1124 | |||
1125 | #filters form .filter-group { | ||
1126 | margin: 5px; | ||
1127 | } | ||
1128 | |||
1129 | #download-form { | ||
1130 | position: fixed; | ||
1131 | width: 10%; | ||
1132 | height: 100%; | ||
1133 | top: 0; | ||
1134 | right: 0; | ||
1135 | background-color: #fff; | ||
1136 | padding: 15px; | ||
1137 | padding-right: 30px; | ||
1138 | padding-top: 30px; | ||
1139 | border-left: 1px #333 solid; | ||
1140 | z-index: 12; | ||
1141 | min-width: 200px; | ||
1142 | } | ||
1143 | |||
1144 | #download-form li { | ||
1145 | display: block; | ||
1146 | padding: 0.5em 2em 0.5em 1em; | ||
1147 | color: #fff; | ||
1148 | position: relative; | ||
1149 | text-transform: uppercase; | ||
1150 | text-decoration: none; | ||
1151 | font-weight: 400; | ||
1152 | font-family: PT Sans, sans-serif; | ||
1153 | transition: all 0.5s ease; | ||
1154 | } | ||
1155 | |||
1156 | /* ========================================================================== | ||
1157 | 6 = Media Queries | ||
1158 | ========================================================================== */ | ||
1159 | |||
1160 | @media screen and (max-width: 1050px) { | ||
1161 | .entry { | ||
1162 | width: 49%; | ||
1163 | } | ||
1164 | |||
1165 | .entry:nth-child(3n+1) { | ||
1166 | margin-left: 1.5%; | ||
1167 | } | ||
1168 | |||
1169 | .entry:nth-child(2n+1) { | ||
1170 | margin-left: 0; | ||
1171 | } | ||
1172 | } | ||
1173 | |||
1174 | @media screen and (max-width: 900px) { | ||
1175 | #article { | ||
1176 | width: 80%; | ||
1177 | } | ||
1178 | |||
1179 | .topPosF { | ||
1180 | right: 2.5em; | ||
1181 | } | ||
1182 | } | ||
1183 | |||
1184 | @media screen and (max-width: 700px) { | ||
1185 | .entry { | ||
1186 | width: 100%; | ||
1187 | margin-left: 0; | ||
1188 | } | ||
1189 | |||
1190 | #display-mode { | ||
1191 | display: none; | ||
1192 | } | ||
1193 | } | ||
1194 | |||
1195 | @media screen and (max-height: 770px) { | ||
1196 | .menu.users, | ||
1197 | .menu.internal, | ||
1198 | .menu.developer { | ||
1199 | display: none; | ||
1200 | } | ||
1201 | } | ||
1202 | |||
1203 | @media screen and (max-width: 500px) { | ||
1204 | .entry { | ||
1205 | width: 100%; | ||
1206 | margin-left: 0; | ||
1207 | } | ||
1208 | |||
1209 | body > header { | ||
1210 | background-color: #333; | ||
1211 | position: fixed; | ||
1212 | top: 0; | ||
1213 | width: 100%; | ||
1214 | height: 3em; | ||
1215 | z-index: 11; | ||
1216 | } | ||
1217 | |||
1218 | #links li:last-child { | ||
1219 | position: static; | ||
1220 | width: auto; | ||
1221 | } | ||
1222 | |||
1223 | #links li:last-child a::before { | ||
1224 | content: none; | ||
1225 | } | ||
1226 | |||
1227 | .logo { | ||
1228 | width: 1.25em; | ||
1229 | height: 1.25em; | ||
1230 | left: 0; | ||
1231 | top: 0; | ||
1232 | } | ||
1233 | |||
1234 | .login > header { | ||
1235 | position: static; | ||
1236 | } | ||
1237 | |||
1238 | .login form { | ||
1239 | width: 100%; | ||
1240 | position: static; | ||
1241 | margin-left: 0; | ||
1242 | } | ||
1243 | |||
1244 | .login .logo { | ||
1245 | height: auto; | ||
1246 | top: 0.5em; | ||
1247 | width: 75px; | ||
1248 | margin-left: -37.5px; | ||
1249 | } | ||
1250 | |||
1251 | .desktopHide { | ||
1252 | display: block; | ||
1253 | position: fixed; | ||
1254 | z-index: 20; | ||
1255 | top: 0; | ||
1256 | right: 0; | ||
1257 | border: 0; | ||
1258 | width: 2.5em; | ||
1259 | height: 2.5em; | ||
1260 | cursor: pointer; | ||
1261 | background-color: #999; | ||
1262 | font-size: 1.2em; | ||
1263 | } | ||
1264 | |||
1265 | .desktopHide:hover, | ||
1266 | .desktopHide:focus { | ||
1267 | background-color: #fff; | ||
1268 | } | ||
1269 | |||
1270 | #links { | ||
1271 | display: none; | ||
1272 | width: 100%; | ||
1273 | height: auto; | ||
1274 | padding-top: 3em; | ||
1275 | } | ||
1276 | |||
1277 | #links.menu--open { | ||
1278 | display: block; | ||
1279 | } | ||
1280 | |||
1281 | footer { | ||
1282 | position: static; | ||
1283 | margin-right: 3em; | ||
1284 | } | ||
1285 | |||
1286 | #main { | ||
1287 | margin-left: 1.5em; | ||
1288 | padding-right: 1.5em; | ||
1289 | position: static; | ||
1290 | margin-top: 3em; | ||
1291 | } | ||
1292 | |||
1293 | .card-entry-labels { | ||
1294 | display: none; | ||
1295 | } | ||
1296 | |||
1297 | #article_toolbar .topPosF { | ||
1298 | display: none; | ||
1299 | } | ||
1300 | |||
1301 | #article { | ||
1302 | width: 100%; | ||
1303 | } | ||
1304 | |||
1305 | #article h1 { | ||
1306 | font-size: 1.5em; | ||
1307 | } | ||
1308 | |||
1309 | #article_toolbar a { | ||
1310 | padding: 0.3em 0.4em 0.2em; | ||
1311 | } | ||
1312 | |||
1313 | #display-mode { | ||
1314 | display: none; | ||
1315 | } | ||
1316 | |||
1317 | .popup-form, | ||
1318 | #bagit-form, | ||
1319 | #search-form { | ||
1320 | left: 0; | ||
1321 | width: 100%; | ||
1322 | border-left: none; | ||
1323 | } | ||
1324 | |||
1325 | .popup-form form, | ||
1326 | #bagit-form form, | ||
1327 | #search-form form { | ||
1328 | width: 100%; | ||
1329 | } | ||
1330 | } | ||