diff options
Diffstat (limited to 'themes/baggy/css/main.css')
-rwxr-xr-x | themes/baggy/css/main.css | 1071 |
1 files changed, 0 insertions, 1071 deletions
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css deleted file mode 100755 index 1df82910..00000000 --- a/themes/baggy/css/main.css +++ /dev/null | |||
@@ -1,1071 +0,0 @@ | |||
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, h3, h4 { | ||
69 | font-family: 'PT Sans', sans-serif; | ||
70 | text-transform: uppercase; | ||
71 | } | ||
72 | |||
73 | p, li, label { | ||
74 | color: #666; | ||
75 | } | ||
76 | |||
77 | a { | ||
78 | color: #000; | ||
79 | font-weight: bold; | ||
80 | } | ||
81 | |||
82 | a:hover, a:focus { | ||
83 | text-decoration: none; | ||
84 | } | ||
85 | |||
86 | form fieldset { | ||
87 | border:0; | ||
88 | padding: 0; | ||
89 | margin: 0; | ||
90 | } | ||
91 | |||
92 | form input[type="text"], select, form input[type="password"], form input[type="url"], form input[type="email"] { | ||
93 | border: 1px solid #999; | ||
94 | padding: 0.5em 1em; | ||
95 | min-width: 12em; | ||
96 | color: #666; | ||
97 | } | ||
98 | |||
99 | @media screen and (-webkit-min-device-pixel-ratio:0){ | ||
100 | select{ | ||
101 | -webkit-appearance: none; | ||
102 | border-radius: 0; | ||
103 | background: #FFF url(../img/bg-select.png) no-repeat right center; | ||
104 | } | ||
105 | } | ||
106 | |||
107 | .inline .row { | ||
108 | display: inline-block; | ||
109 | margin-right: 0.5em; | ||
110 | } | ||
111 | |||
112 | .inline label { | ||
113 | min-width: 6em; | ||
114 | } | ||
115 | |||
116 | fieldset label { | ||
117 | display: inline-block; | ||
118 | min-width: 12.5em; | ||
119 | color: #666; | ||
120 | } | ||
121 | |||
122 | label { | ||
123 | margin-right: 0.5em; | ||
124 | } | ||
125 | |||
126 | form .row { | ||
127 | margin-bottom: 0.5em; | ||
128 | } | ||
129 | |||
130 | form button, input[type="submit"] { | ||
131 | cursor:pointer; | ||
132 | background-color: #000; | ||
133 | color: #FFF; | ||
134 | border:0; | ||
135 | padding: 0.5em 1em; | ||
136 | display: inline-block; | ||
137 | border:1px solid #000; | ||
138 | } | ||
139 | |||
140 | form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus { | ||
141 | background-color: #FFF; | ||
142 | color: #000; | ||
143 | -webkit-transition: all 0.5s ease; | ||
144 | -moz-transition: all 0.5s ease; | ||
145 | -ms-transition: all 0.5s ease; | ||
146 | -o-transition: all 0.5s ease; | ||
147 | transition: all 0.5s ease; | ||
148 | } | ||
149 | |||
150 | #bookmarklet { | ||
151 | cursor: move; | ||
152 | } | ||
153 | |||
154 | h2:after { | ||
155 | content: ""; | ||
156 | height: 4px; | ||
157 | width: 70px; | ||
158 | background-color: #000; | ||
159 | display: block; | ||
160 | } | ||
161 | |||
162 | .links { | ||
163 | padding: 0; | ||
164 | margin: 0; | ||
165 | } | ||
166 | .links li { | ||
167 | list-style: none; | ||
168 | margin: 0; | ||
169 | padding: 0; | ||
170 | } | ||
171 | |||
172 | |||
173 | #links { | ||
174 | position: fixed; | ||
175 | top: 0; | ||
176 | width: 10em; | ||
177 | left: 0; | ||
178 | text-align: right; | ||
179 | background-color: #333; | ||
180 | padding-top: 9.5em; | ||
181 | height: 100%; | ||
182 | box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); | ||
183 | z-index: 15; | ||
184 | } | ||
185 | |||
186 | #main { | ||
187 | margin-left: 13em; | ||
188 | position: relative; | ||
189 | z-index: 10; | ||
190 | padding-right: 5%; | ||
191 | padding-bottom: 1em; | ||
192 | } | ||
193 | |||
194 | #links > li > a { | ||
195 | display: block; | ||
196 | padding: 0.5em 2em 0.5em 1em; | ||
197 | color: #FFF; | ||
198 | position: relative; | ||
199 | text-transform: uppercase; | ||
200 | text-decoration: none; | ||
201 | font-weight: normal; | ||
202 | font-family: 'PT Sans', sans-serif; | ||
203 | -webkit-transition: all 0.5s ease; | ||
204 | -moz-transition: all 0.5s ease; | ||
205 | -ms-transition: all 0.5s ease; | ||
206 | -o-transition: all 0.5s ease; | ||
207 | transition: all 0.5s ease; | ||
208 | } | ||
209 | |||
210 | #links > li > a:hover, #links > li > a:focus { | ||
211 | background-color: #999; | ||
212 | color: #000; | ||
213 | } | ||
214 | |||
215 | #links .current:after { | ||
216 | content: ""; | ||
217 | width: 0; | ||
218 | height: 0; | ||
219 | position: absolute; | ||
220 | border-style: solid; | ||
221 | border-width: 10px; | ||
222 | border-color: transparent #EEE transparent transparent; | ||
223 | right: 0; | ||
224 | top: 50%; | ||
225 | margin-top: -10px; | ||
226 | } | ||
227 | |||
228 | #links li:last-child { | ||
229 | position: fixed; | ||
230 | bottom: 1em; | ||
231 | width: 10em; | ||
232 | } | ||
233 | |||
234 | #links li:last-child a:before { | ||
235 | font-size: 1.2em; | ||
236 | position: relative; | ||
237 | top: 2px; | ||
238 | } | ||
239 | |||
240 | |||
241 | #sort { | ||
242 | padding: 0; | ||
243 | list-style-type: none; | ||
244 | opacity: 0.5; | ||
245 | display: inline-block; | ||
246 | } | ||
247 | |||
248 | #sort li { | ||
249 | display: inline; | ||
250 | font-size: 0.9em; | ||
251 | } | ||
252 | |||
253 | #sort li + li { | ||
254 | margin-left: 10px; | ||
255 | } | ||
256 | |||
257 | #sort a { | ||
258 | padding: 2px 2px 0; | ||
259 | vertical-align: middle; | ||
260 | } | ||
261 | |||
262 | #sort img { | ||
263 | vertical-align: baseline; | ||
264 | } | ||
265 | #sort img:hover { | ||
266 | cursor: pointer; | ||
267 | } | ||
268 | |||
269 | #display-mode { | ||
270 | float: right; | ||
271 | vertical-align: middle; | ||
272 | margin-top: 10px; | ||
273 | margin-bottom: 10px; | ||
274 | opacity: 0.5; | ||
275 | } | ||
276 | #listmode { | ||
277 | width: 16px; | ||
278 | display: inline-block; | ||
279 | text-decoration: none; | ||
280 | } | ||
281 | #listmode a:hover { | ||
282 | opacity: 1; | ||
283 | } | ||
284 | #listmode.tablemode { | ||
285 | background-image: url("../img/baggy/table.png"); | ||
286 | background-repeat: no-repeat; | ||
287 | background-position: bottom; | ||
288 | } | ||
289 | #listmode.listmode { | ||
290 | background-image: url("../img/baggy/list.png"); | ||
291 | background-repeat: no-repeat; | ||
292 | background-position: bottom; | ||
293 | } | ||
294 | |||
295 | |||
296 | /* ========================================================================== | ||
297 | 2 = Layout | ||
298 | ========================================================================== */ | ||
299 | |||
300 | #content { | ||
301 | margin-top: 5em; | ||
302 | min-height: 30em; | ||
303 | } | ||
304 | |||
305 | footer { | ||
306 | text-align: right; | ||
307 | position: relative; | ||
308 | bottom: 0; | ||
309 | right: 5em; | ||
310 | color: #999; | ||
311 | font-size: 0.8em; | ||
312 | font-style: italic; | ||
313 | z-index: 20; | ||
314 | } | ||
315 | |||
316 | footer a { | ||
317 | color: #999; | ||
318 | font-weight: normal; | ||
319 | } | ||
320 | |||
321 | .list-entries { | ||
322 | letter-spacing:-5px; | ||
323 | } | ||
324 | |||
325 | .listmode .entrie { | ||
326 | width: 100%!important; | ||
327 | margin-left: 0!important; | ||
328 | } | ||
329 | |||
330 | .list-entries + .results { | ||
331 | margin-bottom: 2em; | ||
332 | } | ||
333 | |||
334 | .estimatedTime .reading-time { | ||
335 | color: #999; | ||
336 | font-style: italic; | ||
337 | font-weight: normal; | ||
338 | font-size: 0.9em; | ||
339 | } | ||
340 | |||
341 | .estimatedTime small { | ||
342 | position: relative; | ||
343 | top: -1px; | ||
344 | } | ||
345 | |||
346 | .entrie { | ||
347 | background-color: #FFF; | ||
348 | letter-spacing:normal; | ||
349 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); | ||
350 | display: inline-block; | ||
351 | width: 32%; | ||
352 | margin-bottom: 1.5em; | ||
353 | vertical-align: top; | ||
354 | margin-left: 1.5%; | ||
355 | position: relative; | ||
356 | overflow: hidden; | ||
357 | padding: 1.5em 1.5em 3em 1.5em; | ||
358 | |||
359 | /* Removing CSS transitions because they make the switch from list view to | ||
360 | * table view jerky | ||
361 | */ | ||
362 | /* -webkit-transition: all 0.5s ease; */ | ||
363 | /* -moz-transition: all 0.5s ease; */ | ||
364 | /* -ms-transition: all 0.5s ease; */ | ||
365 | /* -o-transition: all 0.5s ease; */ | ||
366 | /* transition: all 0.5s ease; */ | ||
367 | } | ||
368 | |||
369 | .entrie:before { | ||
370 | content: ""; | ||
371 | width: 0; | ||
372 | height: 0; | ||
373 | border-style:solid; | ||
374 | border-color: transparent transparent #000 transparent; | ||
375 | border-width: 10px; | ||
376 | position: absolute; | ||
377 | bottom: 0.3em; | ||
378 | z-index: 10; | ||
379 | right: 1.5em; | ||
380 | -webkit-transition: all 0.5s ease; | ||
381 | -moz-transition: all 0.5s ease; | ||
382 | -ms-transition: all 0.5s ease; | ||
383 | -o-transition: all 0.5s ease; | ||
384 | transition: all 0.5s ease; | ||
385 | } | ||
386 | |||
387 | .entrie:after { | ||
388 | content: ""; | ||
389 | position: absolute; | ||
390 | height: 7px; | ||
391 | width: 100%; | ||
392 | bottom: 0; | ||
393 | left: 0; | ||
394 | background-color: #000; | ||
395 | -webkit-transition: all 0.5s ease; | ||
396 | -moz-transition: all 0.5s ease; | ||
397 | -ms-transition: all 0.5s ease; | ||
398 | -o-transition: all 0.5s ease; | ||
399 | transition: all 0.5s ease; | ||
400 | } | ||
401 | |||
402 | .entrie:hover { | ||
403 | box-shadow: 0 3px 10px rgba(0,0,0,1); | ||
404 | } | ||
405 | |||
406 | .entrie:hover:after { | ||
407 | height: 40px; | ||
408 | } | ||
409 | |||
410 | .entrie:hover:before { | ||
411 | bottom: 2.4em; | ||
412 | } | ||
413 | |||
414 | .entrie:hover h2 a { | ||
415 | color: #666; | ||
416 | } | ||
417 | |||
418 | .entrie h2 { | ||
419 | text-transform: none; | ||
420 | margin-bottom: 0; | ||
421 | line-height: 1.2; | ||
422 | } | ||
423 | |||
424 | .entrie h2:after { | ||
425 | content: none; | ||
426 | } | ||
427 | |||
428 | |||
429 | .entrie h2 a { | ||
430 | display: block; | ||
431 | text-decoration: none; | ||
432 | color: #000; | ||
433 | word-wrap: break-word; | ||
434 | -webkit-transition: all 0.5s ease; | ||
435 | -moz-transition: all 0.5s ease; | ||
436 | -ms-transition: all 0.5s ease; | ||
437 | -o-transition: all 0.5s ease; | ||
438 | transition: all 0.5s ease; | ||
439 | } | ||
440 | /* | ||
441 | .entrie h2 a:after { | ||
442 | content: ""; | ||
443 | position: absolute; | ||
444 | top: 0; | ||
445 | width: 100%; | ||
446 | height: 100%; | ||
447 | left: 0; | ||
448 | } | ||
449 | */ | ||
450 | |||
451 | .entrie p { | ||
452 | color: #666; | ||
453 | font-size: 0.9em; | ||
454 | line-height: 1.7; | ||
455 | } | ||
456 | |||
457 | .entrie h2 a:first-letter { | ||
458 | text-transform: uppercase; | ||
459 | } | ||
460 | |||
461 | .entrie:hover .tools { | ||
462 | bottom: 0; | ||
463 | } | ||
464 | |||
465 | .entrie .tools { | ||
466 | position: absolute; | ||
467 | bottom: -50px; | ||
468 | left: 0; | ||
469 | width: 100%; | ||
470 | z-index: 10; | ||
471 | padding-right: 0.5em; | ||
472 | text-align: right; | ||
473 | -webkit-transition: all 0.5s ease; | ||
474 | -moz-transition: all 0.5s ease; | ||
475 | -ms-transition: all 0.5s ease; | ||
476 | -o-transition: all 0.5s ease; | ||
477 | transition: all 0.5s ease; | ||
478 | } | ||
479 | |||
480 | .entrie .tools a { | ||
481 | color: #666; | ||
482 | text-decoration: none; | ||
483 | display: block; | ||
484 | padding: 0.4em; | ||
485 | } | ||
486 | |||
487 | .entrie .tools a:hover { | ||
488 | color: #FFF; | ||
489 | } | ||
490 | |||
491 | .entrie .tools li { | ||
492 | display: inline-block; | ||
493 | } | ||
494 | |||
495 | .entrie:nth-child(3n+1) { | ||
496 | margin-left: 0; | ||
497 | } | ||
498 | |||
499 | .results { | ||
500 | letter-spacing: -5px; | ||
501 | padding: 0 0 0.5em; | ||
502 | } | ||
503 | |||
504 | .results > * { | ||
505 | display: inline-block; | ||
506 | vertical-align: top; | ||
507 | letter-spacing: normal; | ||
508 | width: 50%; | ||
509 | } | ||
510 | |||
511 | .pagination { | ||
512 | text-align: right; | ||
513 | margin-bottom:50px; | ||
514 | } | ||
515 | |||
516 | .nb-results { | ||
517 | text-align: left; | ||
518 | font-style: italic; | ||
519 | color: #999; | ||
520 | } | ||
521 | |||
522 | .pagination > * { | ||
523 | display: inline-block; | ||
524 | margin-left: 0.5em; | ||
525 | } | ||
526 | |||
527 | .pagination a { | ||
528 | color: #999; | ||
529 | text-decoration: none; | ||
530 | } | ||
531 | |||
532 | .pagination a:hover, .pagination a:focus { | ||
533 | text-decoration: underline; | ||
534 | } | ||
535 | |||
536 | .pagination .disabled { | ||
537 | display: none; | ||
538 | } | ||
539 | |||
540 | /* ========================================================================== | ||
541 | 2.1 = "save a link" related styles | ||
542 | ========================================================================== */ | ||
543 | |||
544 | .popup-form { | ||
545 | background: rgba(0,0,0,0.5); | ||
546 | position: absolute; | ||
547 | top: 0; | ||
548 | left: 10em; | ||
549 | z-index: 20; | ||
550 | height: 100%; | ||
551 | width: 100%; | ||
552 | margin: 0; | ||
553 | margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */ | ||
554 | padding: 2em; | ||
555 | display: none; | ||
556 | border-left: 1px #EEE solid; | ||
557 | } | ||
558 | |||
559 | .popup-form form { | ||
560 | background-color: #FFF; | ||
561 | position: absolute; | ||
562 | top: 0; | ||
563 | left: 0; | ||
564 | z-index: 20; | ||
565 | border: 10px solid #000; | ||
566 | width: 400px; | ||
567 | height: 200px; | ||
568 | padding: 2em; | ||
569 | } | ||
570 | |||
571 | #bagit-form-form .addurl { | ||
572 | margin-left: 0; | ||
573 | } | ||
574 | |||
575 | .closeMessage, | ||
576 | .close-button { | ||
577 | background-color: #000; | ||
578 | color: #FFF; | ||
579 | font-size: 1.2em; | ||
580 | line-height: 1.6; | ||
581 | width: 1.6em; | ||
582 | height: 1.6em; | ||
583 | text-align: center; | ||
584 | text-decoration: none; | ||
585 | } | ||
586 | .closeMessage:hover, | ||
587 | .closeMessage:focus, | ||
588 | .close-button:hover, | ||
589 | .close-button:focus { | ||
590 | background-color: #999; | ||
591 | color: #000; | ||
592 | } | ||
593 | |||
594 | .close-button--popup { | ||
595 | display: inline-block; | ||
596 | position: absolute; | ||
597 | top: 0; | ||
598 | right: 0; | ||
599 | font-size: 1.4em; | ||
600 | } | ||
601 | |||
602 | .active-current { | ||
603 | background-color: #999; | ||
604 | } | ||
605 | |||
606 | .active-current:after { | ||
607 | content: ""; | ||
608 | width: 0; | ||
609 | height: 0; | ||
610 | position: absolute; | ||
611 | border-style: solid; | ||
612 | border-width: 10px; | ||
613 | border-color: transparent #EEE transparent transparent; | ||
614 | right: 0; | ||
615 | top: 50%; | ||
616 | margin-top: -10px; | ||
617 | } | ||
618 | |||
619 | .opacity03 { | ||
620 | opacity: 0.3; | ||
621 | } | ||
622 | |||
623 | .add-to-wallabag-link-after { | ||
624 | background-color: #000; | ||
625 | color: #fff; | ||
626 | padding: 0 3px 2px 3px; | ||
627 | } | ||
628 | |||
629 | a.add-to-wallabag-link-after { | ||
630 | visibility: hidden; | ||
631 | position: absolute; | ||
632 | opacity: 0; | ||
633 | transition-duration: 2s; | ||
634 | transition-timing-function: ease-out; | ||
635 | } | ||
636 | |||
637 | #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover { | ||
638 | opacity: 1; | ||
639 | visibility: visible; | ||
640 | transition-duration: .3s; | ||
641 | transition-timing-function: ease-in; | ||
642 | } | ||
643 | |||
644 | a.add-to-wallabag-link-after:after { | ||
645 | content: "w"; | ||
646 | } | ||
647 | |||
648 | #add-link-result { | ||
649 | font-weight: bold; | ||
650 | font-size: 0.9em; | ||
651 | } | ||
652 | |||
653 | /* ========================================================================== | ||
654 | 3 = Pictos | ||
655 | ========================================================================== */ | ||
656 | |||
657 | @font-face { | ||
658 | font-family: 'icomoon'; | ||
659 | src:url('../fonts/icomoon.eot?-s0mcsx'); | ||
660 | src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), | ||
661 | url('../fonts/icomoon.woff?-s0mcsx') format('woff'), | ||
662 | url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'), | ||
663 | url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg'); | ||
664 | font-weight: normal; | ||
665 | font-style: normal; | ||
666 | } | ||
667 | |||
668 | .icon span, | ||
669 | .icon-image span { | ||
670 | position: absolute; | ||
671 | top: -9999px; | ||
672 | } | ||
673 | |||
674 | [class^="icon-"]:before, [class*=" icon-"]:before { | ||
675 | font-family: 'icomoon'; | ||
676 | speak: none; | ||
677 | font-style: normal; | ||
678 | font-weight: normal; | ||
679 | font-variant: normal; | ||
680 | text-transform: none; | ||
681 | line-height: 1; | ||
682 | |||
683 | /* Better Font Rendering =========== */ | ||
684 | -webkit-font-smoothing: antialiased; | ||
685 | -moz-osx-font-smoothing: grayscale; | ||
686 | } | ||
687 | |||
688 | .icon-flattr:before { | ||
689 | content: "\e800"; | ||
690 | } | ||
691 | .icon-mail:before { | ||
692 | content: "\e80a"; | ||
693 | } | ||
694 | .icon-up-open:before { | ||
695 | content: "\e80b"; | ||
696 | } | ||
697 | .icon-star:before { | ||
698 | content: "\e805"; | ||
699 | } | ||
700 | .icon-check:before { | ||
701 | content: "\e804"; | ||
702 | } | ||
703 | .icon-link:before { | ||
704 | content: "\e801"; | ||
705 | } | ||
706 | .icon-reply:before { | ||
707 | content: "\e806"; | ||
708 | } | ||
709 | .icon-menu:before { | ||
710 | content: "\e802"; | ||
711 | } | ||
712 | .icon-clock:before { | ||
713 | content: "\e803"; | ||
714 | } | ||
715 | .icon-twitter:before { | ||
716 | content: "\e807"; | ||
717 | } | ||
718 | .icon-down-open:before { | ||
719 | content: "\e809"; | ||
720 | } | ||
721 | .icon-trash:before { | ||
722 | content: "\e80c"; | ||
723 | } | ||
724 | .icon-delete:before { | ||
725 | content: "\e600"; | ||
726 | } | ||
727 | .icon-power:before { | ||
728 | content: "\e601"; | ||
729 | } | ||
730 | .icon-arrow-up-thick:before { | ||
731 | content: "\e602"; | ||
732 | } | ||
733 | .icon-rss:before { | ||
734 | content: "\e808"; | ||
735 | } | ||
736 | .icon-print:before { | ||
737 | content: "\e80d"; | ||
738 | } | ||
739 | |||
740 | |||
741 | /* .icon-image class, for image-based icons | ||
742 | ========================================================================== */ | ||
743 | |||
744 | .icon-image { | ||
745 | background-size: 16px 16px; | ||
746 | background-repeat: no-repeat; | ||
747 | background-position: center; | ||
748 | padding-right: 1em !important; | ||
749 | padding-left: 1em !important; | ||
750 | } | ||
751 | |||
752 | /* Carrot (http://carrot.org) */ | ||
753 | .icon-image--carrot { | ||
754 | background-image: url('../../_global/img/icons/carrot-icon--white.png'); | ||
755 | } | ||
756 | |||
757 | /* Diaspora */ | ||
758 | .icon-image--diaspora { | ||
759 | background-image: url('../../_global/img/icons/diaspora-icon--black.png'); | ||
760 | }} | ||
761 | |||
762 | /* ========================================================================== | ||
763 | Icon selected | ||
764 | ========================================================================== */ | ||
765 | |||
766 | .icon-star.fav:before { | ||
767 | color: #FFF; | ||
768 | } | ||
769 | |||
770 | .icon-check.archive:before { | ||
771 | color: #FFF; | ||
772 | } | ||
773 | |||
774 | /* ========================================================================== | ||
775 | 4 = Messages | ||
776 | ========================================================================== */ | ||
777 | |||
778 | .messages { | ||
779 | text-align: left; | ||
780 | margin-top: 1em; | ||
781 | } | ||
782 | |||
783 | .messages > * { display: inline-block;} | ||
784 | |||
785 | .warning { | ||
786 | /* font-size: 3em; | ||
787 | color: #999; | ||
788 | font-style: italic; | ||
789 | position: absolute; | ||
790 | top: 50%; | ||
791 | left: 0; | ||
792 | width: 100%; | ||
793 | text-align: center; | ||
794 | padding-right: 5%; | ||
795 | margin-top: -2em;*/ | ||
796 | font-weight: bold; | ||
797 | display: block; | ||
798 | width: 100%; | ||
799 | } | ||
800 | |||
801 | .more-info { | ||
802 | font-size: 0.85em; | ||
803 | line-height: 1.5; | ||
804 | color: #aaa; | ||
805 | } | ||
806 | |||
807 | .more-info a { | ||
808 | color: #aaa; | ||
809 | } | ||
810 | |||
811 | /* ========================================================================== | ||
812 | 5 = Article | ||
813 | ========================================================================== */ | ||
814 | |||
815 | #article { | ||
816 | width: 70%; | ||
817 | margin-bottom: 3em; | ||
818 | text-align: justify; | ||
819 | } | ||
820 | |||
821 | #article .tags { | ||
822 | margin-bottom: 1em; | ||
823 | } | ||
824 | |||
825 | #article i { | ||
826 | font-style: normal; | ||
827 | } | ||
828 | |||
829 | blockquote { | ||
830 | border:1px solid #999; | ||
831 | background-color: #FFF; | ||
832 | padding: 1em; | ||
833 | margin: 0; | ||
834 | } | ||
835 | |||
836 | #article h1 { | ||
837 | text-align: left; | ||
838 | } | ||
839 | |||
840 | #article h2, #article h3, #article h4 { | ||
841 | text-transform: none; | ||
842 | } | ||
843 | |||
844 | #article h2:after { | ||
845 | content: none; | ||
846 | } | ||
847 | |||
848 | .topPosF { | ||
849 | position: fixed; | ||
850 | right: 20%; | ||
851 | bottom: 2em; | ||
852 | font-size: 1.5em; | ||
853 | } | ||
854 | |||
855 | #article_toolbar { | ||
856 | margin-bottom: 1em; | ||
857 | } | ||
858 | |||
859 | #article_toolbar li { | ||
860 | display: inline-block; | ||
861 | } | ||
862 | |||
863 | #article_toolbar a { | ||
864 | background-color: #000; | ||
865 | padding: 0.3em 0.5em 0.2em; | ||
866 | color: #FFF; | ||
867 | text-decoration: none; | ||
868 | } | ||
869 | |||
870 | #article_toolbar a:hover, #article_toolbar a:focus { | ||
871 | background-color: #999; | ||
872 | } | ||
873 | |||
874 | .shaarli:before { | ||
875 | content: "*"; | ||
876 | } | ||
877 | |||
878 | .return { | ||
879 | text-decoration: none; | ||
880 | margin-top: 1em; | ||
881 | display: block; | ||
882 | } | ||
883 | |||
884 | .return:before { | ||
885 | margin-right: 0.5em; | ||
886 | } | ||
887 | |||
888 | .notags { | ||
889 | font-style: italic; | ||
890 | color: #999; | ||
891 | } | ||
892 | |||
893 | .icon-rss { | ||
894 | background-color: #000; | ||
895 | color: #FFF; | ||
896 | padding: 0.2em 0.5em; | ||
897 | } | ||
898 | |||
899 | .icon-rss:before { | ||
900 | position: relative; | ||
901 | top: 2px; | ||
902 | } | ||
903 | |||
904 | .list-tags li { | ||
905 | margin-bottom: 0.5em; | ||
906 | } | ||
907 | |||
908 | .list-tags .icon-rss:hover, .list-tags .icon-rss:focus { | ||
909 | background-color: #FFF; | ||
910 | color: #000; | ||
911 | text-decoration: none; | ||
912 | } | ||
913 | |||
914 | .list-tags a { | ||
915 | text-decoration: none; | ||
916 | } | ||
917 | |||
918 | .list-tags a:hover, .list-tags a:focus { | ||
919 | text-decoration: underline; | ||
920 | } | ||
921 | |||
922 | pre code { | ||
923 | font-family: "Courier New", Courier, monospace; | ||
924 | border: 1px solid #ccc; | ||
925 | font-size: 0.96em; | ||
926 | } | ||
927 | |||
928 | |||
929 | /* ========================================================================== | ||
930 | 6 = Media Queries | ||
931 | ========================================================================== */ | ||
932 | |||
933 | @media screen and (max-width: 1050px) { | ||
934 | .entrie { | ||
935 | width: 49%; | ||
936 | } | ||
937 | .entrie:nth-child(3n+1) { | ||
938 | margin-left: 1.5%; | ||
939 | } | ||
940 | .entrie:nth-child(2n+1) { | ||
941 | margin-left: 0; | ||
942 | } | ||
943 | } | ||
944 | |||
945 | @media screen and (max-width: 900px) { | ||
946 | #article { | ||
947 | width: 80%; | ||
948 | } | ||
949 | .topPosF { | ||
950 | right: 2.5em; | ||
951 | } | ||
952 | } | ||
953 | |||
954 | @media screen and (max-width: 700px) { | ||
955 | .entrie { | ||
956 | width: 100%; | ||
957 | margin-left: 0; | ||
958 | } | ||
959 | #display-mode { | ||
960 | display: none; | ||
961 | } | ||
962 | } | ||
963 | |||
964 | @media screen and (max-width: 500px) { | ||
965 | .entrie { | ||
966 | width: 100%; | ||
967 | margin-left: 0; | ||
968 | } | ||
969 | body > header { | ||
970 | background-color: #333; | ||
971 | position: fixed; | ||
972 | top: 0; | ||
973 | width: 100%; | ||
974 | height: 3em; | ||
975 | z-index: 11; | ||
976 | } | ||
977 | #links li:last-child { | ||
978 | position: static; | ||
979 | width: auto; | ||
980 | } | ||
981 | #links li:last-child a:before { | ||
982 | content: none; | ||
983 | } | ||
984 | .logo { | ||
985 | width: 1.25em; | ||
986 | height: 1.25em; | ||
987 | left: 0; | ||
988 | top: 0; | ||
989 | } | ||
990 | .login > header { | ||
991 | position: static; | ||
992 | } | ||
993 | .login form { | ||
994 | width: 100%; | ||
995 | position: static; | ||
996 | margin-left: 0; | ||
997 | } | ||
998 | .login .logo { | ||
999 | width: auto; | ||
1000 | height: auto; | ||
1001 | top: 0.5em; | ||
1002 | width: 75px; | ||
1003 | height: 75px; | ||
1004 | margin-left: -37.5px; | ||
1005 | } | ||
1006 | .desktopHide { | ||
1007 | display: block; | ||
1008 | position: fixed; | ||
1009 | z-index: 20; | ||
1010 | top: 0; | ||
1011 | right: 0; | ||
1012 | border:0; | ||
1013 | width: 2.5em; | ||
1014 | height: 2.5em; | ||
1015 | cursor: pointer; | ||
1016 | background-color: #999; | ||
1017 | font-size: 1.2em; | ||
1018 | } | ||
1019 | .desktopHide:hover, .desktopHide:focus { | ||
1020 | background-color: #FFF; | ||
1021 | } | ||
1022 | #links { | ||
1023 | display: none; | ||
1024 | width: 100%; | ||
1025 | height: auto; | ||
1026 | padding-top: 3em; | ||
1027 | } | ||
1028 | #links.menu--open { | ||
1029 | display: block; | ||
1030 | } | ||
1031 | footer { | ||
1032 | position: static; | ||
1033 | margin-right: 3em; | ||
1034 | } | ||
1035 | #main { | ||
1036 | margin-left: 1.5em; | ||
1037 | padding-right: 1.5em; | ||
1038 | position: static; | ||
1039 | margin-top: 3em; | ||
1040 | } | ||
1041 | #article_toolbar .topPosF { | ||
1042 | display: none; | ||
1043 | } | ||
1044 | |||
1045 | #article { | ||
1046 | width: 100%; | ||
1047 | } | ||
1048 | |||
1049 | #article h1 { | ||
1050 | font-size: 1.5em; | ||
1051 | } | ||
1052 | #article_toolbar a { | ||
1053 | padding: 0.3em 0.4em 0.2em; | ||
1054 | } | ||
1055 | |||
1056 | #display-mode { | ||
1057 | display: none; | ||
1058 | } | ||
1059 | |||
1060 | .popup-form, #bagit-form, #search-form { | ||
1061 | left: 0; | ||
1062 | width: 100%; | ||
1063 | border-left: none; | ||
1064 | } | ||
1065 | |||
1066 | .popup-form form, | ||
1067 | #bagit-form form, | ||
1068 | #search-form form { | ||
1069 | width: 100%; | ||
1070 | } | ||
1071 | } | ||