]>
Commit | Line | Data |
---|---|---|
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 | } | |
387 | ||
388 | .card-entry-tags li { | |
389 | display: inline-block; | |
390 | margin: 0 5px; | |
391 | padding: 5px 12px; | |
392 | background-color: rgba(0, 0, 0, 0.6); | |
393 | border-radius: 3px; | |
394 | max-height: 2em; | |
395 | overflow: hidden; | |
396 | text-overflow: ellipsis; | |
397 | color: #fff; | |
398 | } | |
399 | ||
400 | .list-entries + .results { | |
401 | margin-bottom: 2em; | |
402 | } | |
403 | ||
404 | .estimatedTime .reading-time { | |
405 | color: #999; | |
406 | font-style: italic; | |
407 | font-weight: normal; | |
408 | font-size: 0.9em; | |
409 | } | |
410 | ||
411 | .estimatedTime small { | |
412 | position: relative; | |
413 | top: -1px; | |
414 | } | |
415 | ||
416 | .entry { | |
417 | background-color: #fff; | |
418 | letter-spacing: normal; | |
419 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
420 | display: inline-block; | |
421 | width: 32%; | |
422 | margin-bottom: 1.5em; | |
423 | vertical-align: top; | |
424 | margin-right: 1%; | |
425 | position: relative; | |
426 | overflow: hidden; | |
427 | padding: 1.5em 1.5em 3em; | |
428 | height: 440px; | |
429 | } | |
430 | ||
431 | .entry::before { | |
432 | content: ""; | |
433 | width: 0; | |
434 | height: 0; | |
435 | border-style: solid; | |
436 | border-color: transparent transparent #000; | |
437 | border-width: 10px; | |
438 | position: absolute; | |
439 | bottom: 0.3em; | |
440 | z-index: 10; | |
441 | right: 1.5em; | |
442 | -webkit-transition: all 0.5s ease; | |
443 | -moz-transition: all 0.5s ease; | |
444 | -ms-transition: all 0.5s ease; | |
445 | -o-transition: all 0.5s ease; | |
446 | transition: all 0.5s ease; | |
447 | } | |
448 | ||
449 | .entry::after { | |
450 | content: ""; | |
451 | position: absolute; | |
452 | height: 7px; | |
453 | width: 100%; | |
454 | bottom: 0; | |
455 | left: 0; | |
456 | background-color: #000; | |
457 | -webkit-transition: all 0.5s ease; | |
458 | -moz-transition: all 0.5s ease; | |
459 | -ms-transition: all 0.5s ease; | |
460 | -o-transition: all 0.5s ease; | |
461 | transition: all 0.5s ease; | |
462 | } | |
463 | ||
464 | .entry:hover { | |
465 | box-shadow: 0 3px 10px rgba(0, 0, 0, 1); | |
466 | } | |
467 | ||
468 | .entry:hover::after { | |
469 | height: 40px; | |
470 | } | |
471 | ||
472 | .entry:hover::before { | |
473 | bottom: 2.4em; | |
474 | } | |
475 | ||
476 | .entry:hover h2 a { | |
477 | color: #666; | |
478 | } | |
479 | ||
480 | .entry h2 { | |
481 | text-transform: none; | |
482 | margin-bottom: 0; | |
483 | line-height: 1.2; | |
484 | } | |
485 | ||
486 | .entry h2::after { | |
487 | content: none; | |
488 | } | |
489 | ||
490 | .entry h2 a { | |
491 | display: block; | |
492 | text-decoration: none; | |
493 | color: #000; | |
494 | word-wrap: break-word; | |
495 | -webkit-transition: all 0.5s ease; | |
496 | -moz-transition: all 0.5s ease; | |
497 | -ms-transition: all 0.5s ease; | |
498 | -o-transition: all 0.5s ease; | |
499 | transition: all 0.5s ease; | |
500 | } | |
501 | ||
502 | img.preview { | |
503 | max-width: calc(100% + 3em); | |
504 | left: -1.5em; | |
505 | position: relative; | |
506 | } | |
507 | ||
508 | .entry p { | |
509 | color: #666; | |
510 | font-size: 0.9em; | |
511 | line-height: 1.7; | |
512 | } | |
513 | ||
514 | .entry h2 a::first-letter { | |
515 | text-transform: uppercase; | |
516 | } | |
517 | ||
518 | .entry:hover .tools { | |
519 | bottom: 0; | |
520 | } | |
521 | ||
522 | .entry .tools { | |
523 | position: absolute; | |
524 | bottom: -50px; | |
525 | left: 0; | |
526 | width: 100%; | |
527 | z-index: 10; | |
528 | padding-right: 0.5em; | |
529 | text-align: right; | |
530 | -webkit-transition: all 0.5s ease; | |
531 | -moz-transition: all 0.5s ease; | |
532 | -ms-transition: all 0.5s ease; | |
533 | -o-transition: all 0.5s ease; | |
534 | transition: all 0.5s ease; | |
535 | } | |
536 | ||
537 | .entry .tools a { | |
538 | color: #666; | |
539 | text-decoration: none; | |
540 | display: block; | |
541 | padding: 0.4em; | |
542 | } | |
543 | ||
544 | .entry .tools a:hover { | |
545 | color: #fff; | |
546 | } | |
547 | ||
548 | .entry .tools li { | |
549 | display: inline-block; | |
550 | } | |
551 | ||
552 | .entry:nth-child(3n+1) { | |
553 | margin-left: 0; | |
554 | } | |
555 | ||
556 | .results { | |
557 | letter-spacing: -5px; | |
558 | padding: 0 0 0.5em; | |
559 | } | |
560 | ||
561 | .results > * { | |
562 | display: inline-block; | |
563 | vertical-align: top; | |
564 | letter-spacing: normal; | |
565 | width: 50%; | |
566 | text-align: right; | |
567 | } | |
568 | ||
569 | div.pagination ul { | |
570 | text-align: right; | |
571 | margin-bottom: 50px; | |
572 | } | |
573 | ||
574 | .nb-results { | |
575 | text-align: left; | |
576 | font-style: italic; | |
577 | color: #999; | |
578 | } | |
579 | ||
580 | div.pagination ul > * { | |
581 | display: inline-block; | |
582 | margin-left: 0.5em; | |
583 | } | |
584 | ||
585 | div.pagination ul a { | |
586 | color: #999; | |
587 | text-decoration: none; | |
588 | } | |
589 | ||
590 | div.pagination ul a:hover, | |
591 | div.pagination ul a:focus { | |
592 | text-decoration: underline; | |
593 | } | |
594 | ||
595 | div.pagination ul .prev.disabled, | |
596 | div.pagination ul .next.disabled { | |
597 | display: none; | |
598 | } | |
599 | ||
600 | div.pagination ul .current { | |
601 | height: 25px; | |
602 | padding: 4px 8px; | |
603 | border: 1px solid #d5d5d5; | |
604 | text-decoration: none; | |
605 | font-weight: bold; | |
606 | color: #000; | |
607 | background-color: #ccc; | |
608 | } | |
609 | ||
610 | /* ========================================================================== | |
611 | 2.1 = "save a link" related styles | |
612 | ========================================================================== */ | |
613 | ||
614 | .popup-form { | |
615 | background: rgba(0, 0, 0, 0.5); | |
616 | position: absolute; | |
617 | top: 0; | |
618 | left: 10em; | |
619 | z-index: 20; | |
620 | height: 100%; | |
621 | width: 100%; | |
622 | margin: 0; | |
623 | margin-top: -30% !important; | |
624 | padding: 2em; | |
625 | display: none; | |
626 | border-left: 1px #eee solid; | |
627 | } | |
628 | ||
629 | .popup-form form { | |
630 | background-color: #fff; | |
631 | position: absolute; | |
632 | top: 0; | |
633 | left: 0; | |
634 | z-index: 20; | |
635 | border: 10px solid #000; | |
636 | width: 400px; | |
637 | height: 200px; | |
638 | padding: 2em; | |
639 | } | |
640 | ||
641 | #bagit-form-form .addurl { | |
642 | margin-left: 0; | |
643 | } | |
644 | ||
645 | .closeMessage, | |
646 | .close-button { | |
647 | background-color: #000; | |
648 | color: #fff; | |
649 | font-size: 1.2em; | |
650 | line-height: 1.6; | |
651 | width: 1.6em; | |
652 | height: 1.6em; | |
653 | text-align: center; | |
654 | text-decoration: none; | |
655 | } | |
656 | ||
657 | .closeMessage:hover, | |
658 | .closeMessage:focus, | |
659 | .close-button:hover, | |
660 | .close-button:focus { | |
661 | background-color: #999; | |
662 | color: #000; | |
663 | } | |
664 | ||
665 | .close-button--popup { | |
666 | display: inline-block; | |
667 | position: absolute; | |
668 | top: 0; | |
669 | right: 0; | |
670 | font-size: 1.4em; | |
671 | } | |
672 | ||
673 | .active-current { | |
674 | background-color: #999; | |
675 | } | |
676 | ||
677 | .active-current::after { | |
678 | content: ""; | |
679 | width: 0; | |
680 | height: 0; | |
681 | position: absolute; | |
682 | border-style: solid; | |
683 | border-width: 10px; | |
684 | border-color: transparent #eee transparent transparent; | |
685 | right: 0; | |
686 | top: 50%; | |
687 | margin-top: -10px; | |
688 | } | |
689 | ||
690 | .opacity03 { | |
691 | opacity: 0.3; | |
692 | } | |
693 | ||
694 | .add-to-wallabag-link-after { | |
695 | background-color: #000; | |
696 | color: #fff; | |
697 | padding: 0 3px 2px; | |
698 | } | |
699 | ||
700 | a.add-to-wallabag-link-after { | |
701 | visibility: hidden; | |
702 | position: absolute; | |
703 | opacity: 0; | |
704 | transition-duration: 2s; | |
705 | transition-timing-function: ease-out; | |
706 | } | |
707 | ||
708 | #article article a:hover + a.add-to-wallabag-link-after, | |
709 | a.add-to-wallabag-link-after:hover { | |
710 | opacity: 1; | |
711 | visibility: visible; | |
712 | transition-duration: 0.3s; | |
713 | transition-timing-function: ease-in; | |
714 | } | |
715 | ||
716 | a.add-to-wallabag-link-after::after { | |
717 | content: "w"; | |
718 | } | |
719 | ||
720 | #add-link-result { | |
721 | font-weight: bold; | |
722 | font-size: 0.9em; | |
723 | } | |
724 | ||
725 | .btn-clickable { | |
726 | cursor: pointer; | |
727 | } | |
728 | ||
729 | /* ========================================================================== | |
730 | 3 = Pictos | |
731 | ========================================================================== */ | |
732 | ||
733 | @font-face { | |
734 | font-family: icomoon; | |
735 | src: url("../fonts/IcoMoon-Free.ttf"); | |
736 | font-weight: normal; | |
737 | font-style: normal; | |
738 | } | |
739 | ||
740 | @font-face { | |
741 | font-family: 'Material Icons'; | |
742 | font-style: normal; | |
743 | font-weight: 400; | |
744 | src: url(../fonts/MaterialIcons-Regular.eot); | |
745 | ||
746 | /* For IE6-8 */ | |
747 | 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"); | |
748 | } | |
749 | ||
750 | .material-icons { | |
751 | font-family: 'Material Icons'; | |
752 | font-weight: normal; | |
753 | font-style: normal; | |
754 | font-size: 1em; /* Preferred icon size */ | |
755 | width: 1em; | |
756 | height: 1em; | |
757 | display: inline-block; | |
758 | line-height: 1; | |
759 | text-transform: none; | |
760 | letter-spacing: normal; | |
761 | word-wrap: normal; | |
762 | white-space: nowrap; | |
763 | direction: ltr; | |
764 | ||
765 | /* Support for all WebKit browsers. */ | |
766 | -webkit-font-smoothing: antialiased; | |
767 | ||
768 | /* Support for Safari and Chrome. */ | |
769 | text-rendering: optimizeLegibility; | |
770 | ||
771 | /* Support for Firefox. */ | |
772 | -moz-osx-font-smoothing: grayscale; | |
773 | ||
774 | /* Support for IE. */ | |
775 | font-feature-settings: 'liga'; | |
776 | } | |
777 | ||
778 | .material-icons.md-18 { font-size: 18px; } | |
779 | .material-icons.md-24 { font-size: 24px; } | |
780 | .material-icons.md-36 { font-size: 36px; } | |
781 | .material-icons.md-48 { font-size: 48px; } | |
782 | ||
783 | .icon span, | |
784 | .icon-image span { | |
785 | position: absolute; | |
786 | top: -9999px; | |
787 | } | |
788 | ||
789 | [class^="icon-"]::before, | |
790 | [class*=" icon-"]::before { | |
791 | font-family: icomoon; | |
792 | speak: none; | |
793 | font-style: normal; | |
794 | font-weight: normal; | |
795 | font-variant: normal; | |
796 | text-transform: none; | |
797 | line-height: 1; | |
798 | ||
799 | /* Better Font Rendering =========== */ | |
800 | -webkit-font-smoothing: antialiased; | |
801 | -moz-osx-font-smoothing: grayscale; | |
802 | } | |
803 | ||
804 | .icon-flattr::before { | |
805 | content: "\ead4"; | |
806 | } | |
807 | ||
808 | .icon-mail::before { | |
809 | content: "\ea86"; | |
810 | } | |
811 | ||
812 | .icon-up-open::before { | |
813 | content: "\e80b"; | |
814 | } | |
815 | ||
816 | .icon-star::before { | |
817 | content: "\e9d9"; | |
818 | } | |
819 | ||
820 | .icon-check::before { | |
821 | content: "\ea10"; | |
822 | } | |
823 | ||
824 | .icon-link::before { | |
825 | content: "\e9cb"; | |
826 | } | |
827 | ||
828 | .icon-reply::before { | |
829 | content: "\e806"; | |
830 | } | |
831 | ||
832 | .icon-menu::before { | |
833 | content: "\e9bd"; | |
834 | } | |
835 | ||
836 | .icon-clock::before { | |
837 | content: "\e803"; | |
838 | } | |
839 | ||
840 | .icon-twitter::before { | |
841 | content: "\ea91"; | |
842 | } | |
843 | ||
844 | .icon-down-open::before { | |
845 | content: "\e809"; | |
846 | } | |
847 | ||
848 | .icon-trash::before { | |
849 | content: "\e9ac"; | |
850 | } | |
851 | ||
852 | .icon-delete::before { | |
853 | content: "\ea0d"; | |
854 | } | |
855 | ||
856 | .icon-power::before { | |
857 | content: "\ea14"; | |
858 | } | |
859 | ||
860 | .icon-arrow-up-thick::before { | |
861 | content: "\ea3a"; | |
862 | } | |
863 | ||
864 | .icon-rss::before { | |
865 | content: "\e808"; | |
866 | } | |
867 | ||
868 | .icon-print::before { | |
869 | content: "\e954"; | |
870 | } | |
871 | ||
872 | .icon-reload::before { | |
873 | content: "\ea2e"; | |
874 | } | |
875 | ||
876 | .icon-price-tags::before { | |
877 | content: "\e936"; | |
878 | } | |
879 | ||
880 | /* .icon-image class, for image-based icons | |
881 | ========================================================================== */ | |
882 | ||
883 | .icon-image { | |
884 | background-size: 16px 16px; | |
885 | background-repeat: no-repeat; | |
886 | background-position: center; | |
887 | padding-right: 1em !important; | |
888 | padding-left: 1em !important; | |
889 | } | |
890 | ||
891 | /* Carrot (http://carrot.org) */ | |
892 | .icon-image--carrot { | |
893 | background-image: url("../../_global/img/icons/carrot-icon--white.png"); | |
894 | } | |
895 | ||
896 | /* Diaspora */ | |
897 | .icon-image--diaspora { | |
898 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); | |
899 | } | |
900 | ||
901 | /* ========================================================================== | |
902 | Icon selected | |
903 | ========================================================================== */ | |
904 | ||
905 | .icon-star.fav::before { | |
906 | color: #fff; | |
907 | } | |
908 | ||
909 | .icon-check.archive::before { | |
910 | color: #fff; | |
911 | } | |
912 | ||
913 | /* ========================================================================== | |
914 | 4 = Messages | |
915 | ========================================================================== */ | |
916 | ||
917 | .messages { | |
918 | text-align: left; | |
919 | margin-top: 1em; | |
920 | } | |
921 | ||
922 | .messages > * { | |
923 | display: inline-block; | |
924 | } | |
925 | ||
926 | .warning { | |
927 | font-weight: bold; | |
928 | display: block; | |
929 | width: 100%; | |
930 | } | |
931 | ||
932 | .more-info { | |
933 | font-size: 0.85em; | |
934 | line-height: 1.5; | |
935 | color: #aaa; | |
936 | } | |
937 | ||
938 | .more-info a { | |
939 | color: #aaa; | |
940 | } | |
941 | ||
942 | /* ========================================================================== | |
943 | 5 = Article | |
944 | ========================================================================== */ | |
945 | ||
946 | #article { | |
947 | width: 70%; | |
948 | margin-bottom: 3em; | |
949 | text-align: justify; | |
950 | } | |
951 | ||
952 | #article .tags { | |
953 | margin-bottom: 1em; | |
954 | } | |
955 | ||
956 | #article i { | |
957 | font-style: normal; | |
958 | } | |
959 | ||
960 | blockquote { | |
961 | border: 1px solid #999; | |
962 | background-color: #fff; | |
963 | padding: 1em; | |
964 | margin: 0; | |
965 | } | |
966 | ||
967 | #article h1 { | |
968 | text-align: left; | |
969 | } | |
970 | ||
971 | #article h2, | |
972 | #article h3, | |
973 | #article h4 { | |
974 | text-transform: none; | |
975 | } | |
976 | ||
977 | #article h2::after { | |
978 | content: none; | |
979 | } | |
980 | ||
981 | .topPosF { | |
982 | position: fixed; | |
983 | right: 20%; | |
984 | bottom: 2em; | |
985 | font-size: 1.5em; | |
986 | } | |
987 | ||
988 | #article_toolbar { | |
989 | margin-bottom: 1em; | |
990 | } | |
991 | ||
992 | #article_toolbar li { | |
993 | display: inline-block; | |
994 | } | |
995 | ||
996 | #article_toolbar a { | |
997 | background-color: #000; | |
998 | padding: 0.3em 0.5em 0.2em; | |
999 | color: #fff; | |
1000 | text-decoration: none; | |
1001 | } | |
1002 | ||
1003 | #article_toolbar a:hover, | |
1004 | #article_toolbar a:focus { | |
1005 | background-color: #999; | |
1006 | } | |
1007 | ||
1008 | #nav-btn-add-tag { | |
1009 | cursor: pointer; | |
1010 | } | |
1011 | ||
1012 | .shaarli::before { | |
1013 | content: "*"; | |
1014 | } | |
1015 | ||
1016 | .return { | |
1017 | text-decoration: none; | |
1018 | margin-top: 1em; | |
1019 | display: block; | |
1020 | } | |
1021 | ||
1022 | .return::before { | |
1023 | margin-right: 0.5em; | |
1024 | } | |
1025 | ||
1026 | .notags { | |
1027 | font-style: italic; | |
1028 | color: #999; | |
1029 | } | |
1030 | ||
1031 | .icon-rss { | |
1032 | background-color: #000; | |
1033 | color: #fff; | |
1034 | padding: 0.2em 0.5em; | |
1035 | } | |
1036 | ||
1037 | .icon-rss::before { | |
1038 | position: relative; | |
1039 | top: 2px; | |
1040 | } | |
1041 | ||
1042 | .list-tags li { | |
1043 | margin-bottom: 0.5em; | |
1044 | } | |
1045 | ||
1046 | .list-tags .icon-rss:hover, | |
1047 | .list-tags .icon-rss:focus { | |
1048 | background-color: #fff; | |
1049 | color: #000; | |
1050 | text-decoration: none; | |
1051 | } | |
1052 | ||
1053 | .list-tags a { | |
1054 | text-decoration: none; | |
1055 | } | |
1056 | ||
1057 | .list-tags a:hover, | |
1058 | .list-tags a:focus { | |
1059 | text-decoration: underline; | |
1060 | } | |
1061 | ||
1062 | pre code { | |
1063 | font-family: "Courier New", Courier, monospace; | |
1064 | } | |
1065 | ||
1066 | #filters { | |
1067 | position: fixed; | |
1068 | width: 20%; | |
1069 | height: 100%; | |
1070 | top: 0; | |
1071 | right: 0; | |
1072 | background-color: #fff; | |
1073 | padding: 15px; | |
1074 | padding-right: 30px; | |
1075 | padding-top: 30px; | |
1076 | border-left: 1px #333 solid; | |
1077 | z-index: 12; | |
1078 | min-width: 300px; | |
1079 | } | |
1080 | ||
1081 | #filters form .filter-group { | |
1082 | margin: 5px; | |
1083 | } | |
1084 | ||
1085 | #download-form { | |
1086 | position: fixed; | |
1087 | width: 10%; | |
1088 | height: 100%; | |
1089 | top: 0; | |
1090 | right: 0; | |
1091 | background-color: #fff; | |
1092 | padding: 15px; | |
1093 | padding-right: 30px; | |
1094 | padding-top: 30px; | |
1095 | border-left: 1px #333 solid; | |
1096 | z-index: 12; | |
1097 | min-width: 200px; | |
1098 | } | |
1099 | ||
1100 | #download-form li { | |
1101 | display: block; | |
1102 | padding: 0.5em 2em 0.5em 1em; | |
1103 | color: #fff; | |
1104 | position: relative; | |
1105 | text-transform: uppercase; | |
1106 | text-decoration: none; | |
1107 | font-weight: 400; | |
1108 | font-family: PT Sans, sans-serif; | |
1109 | transition: all 0.5s ease; | |
1110 | } | |
1111 | ||
1112 | /* ========================================================================== | |
1113 | 6 = Media Queries | |
1114 | ========================================================================== */ | |
1115 | ||
1116 | @media screen and (max-width: 1050px) { | |
1117 | .entry { | |
1118 | width: 49%; | |
1119 | } | |
1120 | ||
1121 | .entry:nth-child(3n+1) { | |
1122 | margin-left: 1.5%; | |
1123 | } | |
1124 | ||
1125 | .entry:nth-child(2n+1) { | |
1126 | margin-left: 0; | |
1127 | } | |
1128 | } | |
1129 | ||
1130 | @media screen and (max-width: 900px) { | |
1131 | #article { | |
1132 | width: 80%; | |
1133 | } | |
1134 | ||
1135 | .topPosF { | |
1136 | right: 2.5em; | |
1137 | } | |
1138 | } | |
1139 | ||
1140 | @media screen and (max-width: 700px) { | |
1141 | .entry { | |
1142 | width: 100%; | |
1143 | margin-left: 0; | |
1144 | } | |
1145 | ||
1146 | #display-mode { | |
1147 | display: none; | |
1148 | } | |
1149 | } | |
1150 | ||
1151 | @media screen and (max-width: 500px) { | |
1152 | .entry { | |
1153 | width: 100%; | |
1154 | margin-left: 0; | |
1155 | } | |
1156 | ||
1157 | body > header { | |
1158 | background-color: #333; | |
1159 | position: fixed; | |
1160 | top: 0; | |
1161 | width: 100%; | |
1162 | height: 3em; | |
1163 | z-index: 11; | |
1164 | } | |
1165 | ||
1166 | #links li:last-child { | |
1167 | position: static; | |
1168 | width: auto; | |
1169 | } | |
1170 | ||
1171 | #links li:last-child a::before { | |
1172 | content: none; | |
1173 | } | |
1174 | ||
1175 | .logo { | |
1176 | width: 1.25em; | |
1177 | height: 1.25em; | |
1178 | left: 0; | |
1179 | top: 0; | |
1180 | } | |
1181 | ||
1182 | .login > header { | |
1183 | position: static; | |
1184 | } | |
1185 | ||
1186 | .login form { | |
1187 | width: 100%; | |
1188 | position: static; | |
1189 | margin-left: 0; | |
1190 | } | |
1191 | ||
1192 | .login .logo { | |
1193 | height: auto; | |
1194 | top: 0.5em; | |
1195 | width: 75px; | |
1196 | margin-left: -37.5px; | |
1197 | } | |
1198 | ||
1199 | .desktopHide { | |
1200 | display: block; | |
1201 | position: fixed; | |
1202 | z-index: 20; | |
1203 | top: 0; | |
1204 | right: 0; | |
1205 | border: 0; | |
1206 | width: 2.5em; | |
1207 | height: 2.5em; | |
1208 | cursor: pointer; | |
1209 | background-color: #999; | |
1210 | font-size: 1.2em; | |
1211 | } | |
1212 | ||
1213 | .desktopHide:hover, | |
1214 | .desktopHide:focus { | |
1215 | background-color: #fff; | |
1216 | } | |
1217 | ||
1218 | #links { | |
1219 | display: none; | |
1220 | width: 100%; | |
1221 | height: auto; | |
1222 | padding-top: 3em; | |
1223 | } | |
1224 | ||
1225 | #links.menu--open { | |
1226 | display: block; | |
1227 | } | |
1228 | ||
1229 | footer { | |
1230 | position: static; | |
1231 | margin-right: 3em; | |
1232 | } | |
1233 | ||
1234 | #main { | |
1235 | margin-left: 1.5em; | |
1236 | padding-right: 1.5em; | |
1237 | position: static; | |
1238 | margin-top: 3em; | |
1239 | } | |
1240 | ||
1241 | .card-entry-labels { | |
1242 | display: none; | |
1243 | } | |
1244 | ||
1245 | #article_toolbar .topPosF { | |
1246 | display: none; | |
1247 | } | |
1248 | ||
1249 | #article { | |
1250 | width: 100%; | |
1251 | } | |
1252 | ||
1253 | #article h1 { | |
1254 | font-size: 1.5em; | |
1255 | } | |
1256 | ||
1257 | #article_toolbar a { | |
1258 | padding: 0.3em 0.4em 0.2em; | |
1259 | } | |
1260 | ||
1261 | #display-mode { | |
1262 | display: none; | |
1263 | } | |
1264 | ||
1265 | .popup-form, | |
1266 | #bagit-form, | |
1267 | #search-form { | |
1268 | left: 0; | |
1269 | width: 100%; | |
1270 | border-left: none; | |
1271 | } | |
1272 | ||
1273 | .popup-form form, | |
1274 | #bagit-form form, | |
1275 | #search-form form { | |
1276 | width: 100%; | |
1277 | } | |
1278 | } |