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