]>
Commit | Line | Data |
---|---|---|
943ac3c7 NL |
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 { | |
fc01f943 | 18 | background-color: #EEE; |
943ac3c7 NL |
19 | } |
20 | ||
21 | .login { | |
fc01f943 | 22 | background-color: #333; |
943ac3c7 NL |
23 | } |
24 | ||
25 | .login #main { | |
26 | padding: 0; | |
27 | margin: 0; | |
28 | } | |
29 | ||
30 | .login form { | |
fc01f943 | 31 | background-color: #FFF; |
943ac3c7 NL |
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; | |
fc01f943 | 54 | background-color: #000; |
943ac3c7 NL |
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 | ||
cc1f78a8 | 73 | p, li, label { |
943ac3c7 NL |
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 | ||
046b9316 | 92 | form input[type="text"], select, form input[type="password"], form input[type="url"], form input[type="email"] { |
943ac3c7 NL |
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 | ||
943ac3c7 NL |
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; | |
1087b3cb | 118 | min-width: 12.5em; |
943ac3c7 NL |
119 | color: #666; |
120 | } | |
121 | ||
1087b3cb JS |
122 | label { |
123 | margin-right: 0.5em; | |
124 | } | |
125 | ||
943ac3c7 NL |
126 | form .row { |
127 | margin-bottom: 0.5em; | |
128 | } | |
129 | ||
130 | form button, input[type="submit"] { | |
131 | cursor:pointer; | |
fc01f943 | 132 | background-color: #000; |
943ac3c7 NL |
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 { | |
fc01f943 | 141 | background-color: #FFF; |
943ac3c7 NL |
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; | |
fc01f943 | 158 | background-color: #000; |
943ac3c7 NL |
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; | |
4744cb0e | 176 | width: 10em; |
943ac3c7 NL |
177 | left: 0; |
178 | text-align: right; | |
fc01f943 | 179 | background-color: #333; |
36a733af | 180 | padding-top: 9.5em; |
943ac3c7 NL |
181 | height: 100%; |
182 | box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); | |
b9fa7d2c | 183 | z-index: 15; |
943ac3c7 NL |
184 | } |
185 | ||
186 | #main { | |
4744cb0e | 187 | margin-left: 13em; |
943ac3c7 NL |
188 | position: relative; |
189 | z-index: 10; | |
190 | padding-right: 5%; | |
36a733af | 191 | padding-bottom: 1em; |
943ac3c7 NL |
192 | } |
193 | ||
cd271fc4 | 194 | #links > li > a { |
943ac3c7 NL |
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 | ||
cd271fc4 | 210 | #links > li > a:hover, #links > li > a:focus { |
fc01f943 | 211 | background-color: #999; |
943ac3c7 NL |
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; | |
4744cb0e | 231 | width: 10em; |
943ac3c7 NL |
232 | } |
233 | ||
234 | #links li:last-child a:before { | |
235 | font-size: 1.2em; | |
236 | position: relative; | |
237 | top: 2px; | |
238 | } | |
239 | ||
240 | ||
36a733af MR |
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 | } | |
cc1f78a8 | 284 | #listmode.tablemode { |
36a733af MR |
285 | background-image: url("../img/baggy/table.png"); |
286 | background-repeat: no-repeat; | |
287 | background-position: bottom; | |
288 | } | |
cc1f78a8 | 289 | #listmode.listmode { |
36a733af MR |
290 | background-image: url("../img/baggy/list.png"); |
291 | background-repeat: no-repeat; | |
292 | background-position: bottom; | |
293 | } | |
294 | ||
295 | ||
943ac3c7 NL |
296 | /* ========================================================================== |
297 | 2 = Layout | |
298 | ========================================================================== */ | |
299 | ||
300 | #content { | |
301 | margin-top: 5em; | |
302 | min-height: 30em; | |
303 | } | |
304 | ||
305 | footer { | |
306 | text-align: right; | |
36a733af | 307 | position: relative; |
943ac3c7 NL |
308 | bottom: 0; |
309 | right: 5em; | |
310 | color: #999; | |
311 | font-size: 0.8em; | |
312 | font-style: italic; | |
565bb72d | 313 | z-index: 20; |
943ac3c7 NL |
314 | } |
315 | ||
316 | footer a { | |
317 | color: #999; | |
318 | font-weight: normal; | |
319 | } | |
320 | ||
321 | .list-entries { | |
322 | letter-spacing:-5px; | |
323 | } | |
324 | ||
4744cb0e TL |
325 | .listmode .entrie { |
326 | width: 100%!important; | |
327 | margin-left: 0!important; | |
328 | } | |
329 | ||
943ac3c7 NL |
330 | .list-entries + .results { |
331 | margin-bottom: 2em; | |
332 | } | |
333 | ||
cc1f78a8 | 334 | .estimatedTime .reading-time { |
943ac3c7 NL |
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 { | |
fc01f943 | 347 | background-color: #FFF; |
943ac3c7 NL |
348 | letter-spacing:normal; |
349 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); | |
350 | display: inline-block; | |
6e8030a0 | 351 | width: 32%; |
943ac3c7 NL |
352 | margin-bottom: 1.5em; |
353 | vertical-align: top; | |
6e8030a0 | 354 | margin-left: 1.5%; |
943ac3c7 NL |
355 | position: relative; |
356 | overflow: hidden; | |
357 | padding: 1.5em 1.5em 3em 1.5em; | |
c9e6fec4 JS |
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; */ | |
943ac3c7 NL |
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; | |
fc01f943 | 394 | background-color: #000; |
943ac3c7 NL |
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 | ||
22a46267 | 402 | .entrie:hover, .eselected { |
943ac3c7 NL |
403 | box-shadow: 0 3px 10px rgba(0,0,0,1); |
404 | } | |
405 | ||
22a46267 | 406 | .entrie:hover:after, .eselected:after { |
943ac3c7 NL |
407 | height: 40px; |
408 | } | |
409 | ||
22a46267 | 410 | .entrie:hover:before, .eselected:before { |
943ac3c7 NL |
411 | bottom: 2.4em; |
412 | } | |
413 | ||
22a46267 | 414 | .entrie:hover h2 a, .eselected h2 a { |
943ac3c7 NL |
415 | color: #666; |
416 | } | |
417 | ||
418 | .entrie h2 { | |
419 | text-transform: none; | |
420 | margin-bottom: 0; | |
cc1f78a8 | 421 | line-height: 1.2; |
943ac3c7 NL |
422 | } |
423 | ||
22a46267 TC |
424 | .entrie h2:after { |
425 | content: none; | |
426 | } | |
943ac3c7 | 427 | |
06e1a9a9 | 428 | |
943ac3c7 NL |
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 | } | |
943ac3c7 NL |
440 | |
441 | .entrie p { | |
442 | color: #666; | |
443 | font-size: 0.9em; | |
444 | line-height: 1.7; | |
445 | } | |
446 | ||
22a46267 TC |
447 | .entrie h2 a:first-letter { |
448 | text-transform: uppercase; | |
943ac3c7 NL |
449 | } |
450 | ||
451 | .entrie .tools { | |
452 | position: absolute; | |
453 | bottom: -50px; | |
454 | left: 0; | |
455 | width: 100%; | |
456 | z-index: 10; | |
457 | padding-right: 0.5em; | |
458 | text-align: right; | |
459 | -webkit-transition: all 0.5s ease; | |
460 | -moz-transition: all 0.5s ease; | |
461 | -ms-transition: all 0.5s ease; | |
462 | -o-transition: all 0.5s ease; | |
463 | transition: all 0.5s ease; | |
464 | } | |
465 | ||
22a46267 TC |
466 | .entrie:hover .tools, .eselected .tools { |
467 | bottom: 0; | |
468 | } | |
943ac3c7 | 469 | |
943ac3c7 | 470 | |
22a46267 TC |
471 | .entrie .tools a { |
472 | color: #666; | |
473 | text-decoration: none; | |
474 | display: block; | |
475 | padding: 0.4em; | |
476 | } | |
477 | ||
478 | .entrie .tools a:hover { | |
479 | color: #FFF; | |
480 | } | |
481 | ||
482 | .entrie .tools li { | |
483 | display: inline-block; | |
484 | } | |
943ac3c7 NL |
485 | |
486 | .entrie:nth-child(3n+1) { | |
6e8030a0 | 487 | margin-left: 0; |
943ac3c7 NL |
488 | } |
489 | ||
490 | .results { | |
491 | letter-spacing: -5px; | |
492 | padding: 0 0 0.5em; | |
493 | } | |
494 | ||
495 | .results > * { | |
496 | display: inline-block; | |
497 | vertical-align: top; | |
498 | letter-spacing: normal; | |
499 | width: 50%; | |
500 | } | |
501 | ||
502 | .pagination { | |
503 | text-align: right; | |
fa37042b | 504 | margin-bottom:50px; |
943ac3c7 NL |
505 | } |
506 | ||
507 | .nb-results { | |
508 | text-align: left; | |
509 | font-style: italic; | |
510 | color: #999; | |
511 | } | |
512 | ||
513 | .pagination > * { | |
514 | display: inline-block; | |
515 | margin-left: 0.5em; | |
516 | } | |
517 | ||
518 | .pagination a { | |
519 | color: #999; | |
520 | text-decoration: none; | |
521 | } | |
522 | ||
523 | .pagination a:hover, .pagination a:focus { | |
524 | text-decoration: underline; | |
525 | } | |
526 | ||
527 | .pagination .disabled { | |
528 | display: none; | |
529 | } | |
530 | ||
6775da70 | 531 | /* ========================================================================== |
74e09e56 | 532 | 2.1 = "save a link" related styles |
6775da70 MR |
533 | ========================================================================== */ |
534 | ||
4bc70ed4 | 535 | .popup-form { |
6775da70 MR |
536 | background: rgba(0,0,0,0.5); |
537 | position: absolute; | |
4744cb0e TL |
538 | top: 0; |
539 | left: 10em; | |
540 | z-index: 20; | |
541 | height: 100%; | |
542 | width: 100%; | |
543 | margin: 0; | |
4bc70ed4 | 544 | margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */ |
4744cb0e TL |
545 | padding: 2em; |
546 | display: none; | |
6775da70 | 547 | border-left: 1px #EEE solid; |
4744cb0e TL |
548 | } |
549 | ||
4bc70ed4 | 550 | .popup-form form { |
fc01f943 | 551 | background-color: #FFF; |
b95a6f57 JS |
552 | position: absolute; |
553 | top: 0; | |
554 | left: 0; | |
555 | z-index: 20; | |
556 | border: 10px solid #000; | |
557 | width: 400px; | |
558 | height: 200px; | |
559 | padding: 2em; | |
560 | } | |
4744cb0e | 561 | |
cd271fc4 JS |
562 | #bagit-form-form .addurl { |
563 | margin-left: 0; | |
564 | } | |
565 | ||
827bd1f8 JS |
566 | .closeMessage, |
567 | .close-button { | |
fc01f943 | 568 | background-color: #000; |
6775da70 | 569 | color: #FFF; |
827bd1f8 JS |
570 | font-size: 1.2em; |
571 | line-height: 1.6; | |
cd271fc4 JS |
572 | width: 1.6em; |
573 | height: 1.6em; | |
574 | text-align: center; | |
6775da70 | 575 | text-decoration: none; |
827bd1f8 JS |
576 | } |
577 | .closeMessage:hover, | |
578 | .closeMessage:focus, | |
579 | .close-button:hover, | |
580 | .close-button:focus { | |
fc01f943 | 581 | background-color: #999; |
827bd1f8 JS |
582 | color: #000; |
583 | } | |
584 | ||
585 | .close-button--popup { | |
cd271fc4 JS |
586 | display: inline-block; |
587 | position: absolute; | |
588 | top: 0; | |
589 | right: 0; | |
827bd1f8 | 590 | font-size: 1.4em; |
6775da70 MR |
591 | } |
592 | ||
593 | .active-current { | |
594 | background-color: #999; | |
595 | } | |
596 | ||
597 | .active-current:after { | |
598 | content: ""; | |
599 | width: 0; | |
600 | height: 0; | |
601 | position: absolute; | |
602 | border-style: solid; | |
603 | border-width: 10px; | |
604 | border-color: transparent #EEE transparent transparent; | |
605 | right: 0; | |
606 | top: 50%; | |
607 | margin-top: -10px; | |
608 | } | |
609 | ||
610 | .opacity03 { | |
611 | opacity: 0.3; | |
612 | } | |
613 | ||
614 | .add-to-wallabag-link-after { | |
615 | background-color: #000; | |
616 | color: #fff; | |
617 | padding: 0 3px 2px 3px; | |
618 | } | |
4744cb0e | 619 | |
74e09e56 | 620 | a.add-to-wallabag-link-after { |
621 | visibility: hidden; | |
622 | position: absolute; | |
623 | opacity: 0; | |
624 | transition-duration: 2s; | |
625 | transition-timing-function: ease-out; | |
626 | } | |
627 | ||
628 | #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover { | |
629 | opacity: 1; | |
630 | visibility: visible; | |
631 | transition-duration: .3s; | |
632 | transition-timing-function: ease-in; | |
633 | } | |
634 | ||
635 | a.add-to-wallabag-link-after:after { | |
636 | content: "w"; | |
637 | } | |
638 | ||
3ee27ee6 MR |
639 | #add-link-result { |
640 | font-weight: bold; | |
3e870665 | 641 | font-size: 0.9em; |
3ee27ee6 MR |
642 | } |
643 | ||
943ac3c7 NL |
644 | /* ========================================================================== |
645 | 3 = Pictos | |
646 | ========================================================================== */ | |
647 | ||
648 | @font-face { | |
649 | font-family: 'icomoon'; | |
cd425599 | 650 | src:url('../fonts/icomoon.eot?-s0mcsx'); |
fc01f943 JS |
651 | src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), |
652 | url('../fonts/icomoon.woff?-s0mcsx') format('woff'), | |
653 | url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'), | |
654 | url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg'); | |
943ac3c7 NL |
655 | font-weight: normal; |
656 | font-style: normal; | |
657 | } | |
658 | ||
fc01f943 JS |
659 | .icon span, |
660 | .icon-image span { | |
46533cac JS |
661 | position: absolute; |
662 | top: -9999px; | |
943ac3c7 NL |
663 | } |
664 | ||
665 | [class^="icon-"]:before, [class*=" icon-"]:before { | |
666 | font-family: 'icomoon'; | |
667 | speak: none; | |
668 | font-style: normal; | |
669 | font-weight: normal; | |
670 | font-variant: normal; | |
671 | text-transform: none; | |
672 | line-height: 1; | |
673 | ||
674 | /* Better Font Rendering =========== */ | |
675 | -webkit-font-smoothing: antialiased; | |
676 | -moz-osx-font-smoothing: grayscale; | |
677 | } | |
678 | ||
679 | .icon-flattr:before { | |
680 | content: "\e800"; | |
681 | } | |
682 | .icon-mail:before { | |
683 | content: "\e80a"; | |
684 | } | |
685 | .icon-up-open:before { | |
686 | content: "\e80b"; | |
687 | } | |
688 | .icon-star:before { | |
689 | content: "\e805"; | |
690 | } | |
691 | .icon-check:before { | |
692 | content: "\e804"; | |
693 | } | |
694 | .icon-link:before { | |
695 | content: "\e801"; | |
696 | } | |
697 | .icon-reply:before { | |
698 | content: "\e806"; | |
699 | } | |
700 | .icon-menu:before { | |
701 | content: "\e802"; | |
702 | } | |
703 | .icon-clock:before { | |
704 | content: "\e803"; | |
705 | } | |
706 | .icon-twitter:before { | |
707 | content: "\e807"; | |
708 | } | |
709 | .icon-down-open:before { | |
710 | content: "\e809"; | |
711 | } | |
712 | .icon-trash:before { | |
713 | content: "\e80c"; | |
714 | } | |
715 | .icon-delete:before { | |
716 | content: "\e600"; | |
717 | } | |
718 | .icon-power:before { | |
719 | content: "\e601"; | |
720 | } | |
721 | .icon-arrow-up-thick:before { | |
722 | content: "\e602"; | |
723 | } | |
724 | .icon-rss:before { | |
725 | content: "\e808"; | |
726 | } | |
c2cf7075 MR |
727 | .icon-print:before { |
728 | content: "\e80d"; | |
729 | } | |
311baf86 | 730 | .icon-random:before { |
89637c2a TC |
731 | content: "\e915"; |
732 | } | |
733 | .icon-reload:before { | |
734 | content: "\ea2e"; | |
311baf86 | 735 | } |
d0ea3544 TC |
736 | .icon-evernote:before { |
737 | content: "\e603"; | |
738 | } | |
1394c0bd TC |
739 | .icon-tags:before { |
740 | content: "\e936"; | |
741 | } | |
059a3380 TC |
742 | .icon-previous:before { |
743 | content: "\e606"; | |
744 | } | |
745 | .icon-next:before { | |
746 | content: "\e605"; | |
747 | } | |
748 | .icon-archiveandnext:before { | |
749 | content: "\e607"; | |
750 | } | |
943ac3c7 | 751 | |
fc01f943 JS |
752 | |
753 | /* .icon-image class, for image-based icons | |
754 | ========================================================================== */ | |
755 | ||
756 | .icon-image { | |
757 | background-size: 16px 16px; | |
758 | background-repeat: no-repeat; | |
759 | background-position: center; | |
760 | padding-right: 1em !important; | |
761 | padding-left: 1em !important; | |
762 | } | |
763 | ||
764 | /* Carrot (http://carrot.org) */ | |
765 | .icon-image--carrot { | |
766 | background-image: url('../../_global/img/icons/carrot-icon--white.png'); | |
767 | } | |
768 | ||
7f8f8271 TC |
769 | .icon-image--shaarli { |
770 | background-image: url('../../_global/img/icons/shaarli.png'); | |
771 | } | |
772 | ||
9c55ed09 TC |
773 | /* Diaspora */ |
774 | .icon-image--diaspora { | |
775 | background-image: url('../../_global/img/icons/diaspora-icon--black.png'); | |
d1c5afda | 776 | } |
9c55ed09 | 777 | |
943ac3c7 NL |
778 | /* ========================================================================== |
779 | Icon selected | |
780 | ========================================================================== */ | |
781 | ||
782 | .icon-star.fav:before { | |
783 | color: #FFF; | |
784 | } | |
785 | ||
f56791e6 | 786 | .icon-check.archive:before { |
787 | color: #FFF; | |
788 | } | |
789 | ||
943ac3c7 NL |
790 | /* ========================================================================== |
791 | 4 = Messages | |
792 | ========================================================================== */ | |
793 | ||
794 | .messages { | |
032e0ca1 MR |
795 | text-align: left; |
796 | margin-top: 1em; | |
943ac3c7 NL |
797 | } |
798 | ||
799 | .messages > * { display: inline-block;} | |
800 | ||
943ac3c7 | 801 | .warning { |
a4585f7e | 802 | /* font-size: 3em; |
943ac3c7 NL |
803 | color: #999; |
804 | font-style: italic; | |
805 | position: absolute; | |
806 | top: 50%; | |
807 | left: 0; | |
808 | width: 100%; | |
809 | text-align: center; | |
810 | padding-right: 5%; | |
a4585f7e MR |
811 | margin-top: -2em;*/ |
812 | font-weight: bold; | |
813 | display: block; | |
814 | width: 100%; | |
943ac3c7 NL |
815 | } |
816 | ||
cc1f78a8 JS |
817 | .more-info { |
818 | font-size: 0.85em; | |
819 | line-height: 1.5; | |
820 | color: #aaa; | |
821 | } | |
822 | ||
823 | .more-info a { | |
824 | color: #aaa; | |
825 | } | |
826 | ||
943ac3c7 NL |
827 | /* ========================================================================== |
828 | 5 = Article | |
829 | ========================================================================== */ | |
830 | ||
831 | #article { | |
832 | width: 70%; | |
833 | margin-bottom: 3em; | |
3ee27ee6 | 834 | text-align: justify; |
943ac3c7 NL |
835 | } |
836 | ||
837 | #article .tags { | |
838 | margin-bottom: 1em; | |
839 | } | |
840 | ||
841 | #article i { | |
842 | font-style: normal; | |
843 | } | |
844 | ||
845 | blockquote { | |
846 | border:1px solid #999; | |
fc01f943 | 847 | background-color: #FFF; |
943ac3c7 NL |
848 | padding: 1em; |
849 | margin: 0; | |
850 | } | |
851 | ||
cc1f78a8 JS |
852 | #article h1 { |
853 | text-align: left; | |
854 | } | |
855 | ||
943ac3c7 NL |
856 | #article h2, #article h3, #article h4 { |
857 | text-transform: none; | |
858 | } | |
859 | ||
860 | #article h2:after { | |
861 | content: none; | |
862 | } | |
863 | ||
864 | .topPosF { | |
865 | position: fixed; | |
866 | right: 20%; | |
867 | bottom: 2em; | |
868 | font-size: 1.5em; | |
869 | } | |
870 | ||
00dc7622 TC |
871 | .leftPosF { |
872 | position: fixed; | |
873 | right: 24%; | |
874 | bottom: 2em; | |
875 | font-size: 1.5em; | |
876 | } | |
877 | ||
878 | .rightPosF { | |
879 | position: fixed; | |
880 | right: 16%; | |
881 | bottom: 2em; | |
882 | font-size: 1.5em; | |
883 | } | |
884 | ||
943ac3c7 NL |
885 | #article_toolbar { |
886 | margin-bottom: 1em; | |
887 | } | |
888 | ||
889 | #article_toolbar li { | |
890 | display: inline-block; | |
891 | } | |
892 | ||
893 | #article_toolbar a { | |
fc01f943 | 894 | background-color: #000; |
943ac3c7 NL |
895 | padding: 0.3em 0.5em 0.2em; |
896 | color: #FFF; | |
897 | text-decoration: none; | |
898 | } | |
899 | ||
900 | #article_toolbar a:hover, #article_toolbar a:focus { | |
fc01f943 | 901 | background-color: #999; |
943ac3c7 NL |
902 | } |
903 | ||
943ac3c7 NL |
904 | .return { |
905 | text-decoration: none; | |
906 | margin-top: 1em; | |
907 | display: block; | |
908 | } | |
909 | ||
910 | .return:before { | |
911 | margin-right: 0.5em; | |
912 | } | |
913 | ||
914 | .notags { | |
915 | font-style: italic; | |
916 | color: #999; | |
917 | } | |
918 | ||
919 | .icon-rss { | |
fc01f943 | 920 | background-color: #000; |
943ac3c7 NL |
921 | color: #FFF; |
922 | padding: 0.2em 0.5em; | |
923 | } | |
924 | ||
925 | .icon-rss:before { | |
926 | position: relative; | |
927 | top: 2px; | |
928 | } | |
929 | ||
930 | .list-tags li { | |
931 | margin-bottom: 0.5em; | |
932 | } | |
933 | ||
934 | .list-tags .icon-rss:hover, .list-tags .icon-rss:focus { | |
fc01f943 | 935 | background-color: #FFF; |
943ac3c7 NL |
936 | color: #000; |
937 | text-decoration: none; | |
938 | } | |
939 | ||
940 | .list-tags a { | |
941 | text-decoration: none; | |
942 | } | |
943 | ||
944 | .list-tags a:hover, .list-tags a:focus { | |
945 | text-decoration: underline; | |
946 | } | |
947 | ||
9f8541ef MR |
948 | pre code { |
949 | font-family: "Courier New", Courier, monospace; | |
950 | border: 1px solid #ccc; | |
951 | font-size: 0.96em; | |
952 | } | |
953 | ||
ab87a7fe TC |
954 | /* ========================================================================== |
955 | 5.1 = Tags-related styles | |
956 | ========================================================================== */ | |
957 | ||
958 | .suggestedtag { | |
959 | padding: 4px; | |
960 | cursor: pointer; | |
961 | display: inline-block; | |
962 | } | |
963 | ||
964 | #tagcloud .smallesttag { | |
965 | font-size: x-small; | |
966 | } | |
967 | ||
968 | #tagcloud .smalltag { | |
969 | font-size: small; | |
970 | } | |
971 | ||
972 | #tagcloud .mediumtag { | |
973 | font-size:medium; | |
974 | } | |
975 | ||
976 | #tagcloud .largetag { | |
977 | font-size:large; | |
978 | } | |
979 | ||
980 | #tagcloud .largesttag { | |
981 | font-size:larger; | |
982 | } | |
9f8541ef | 983 | |
943ac3c7 NL |
984 | /* ========================================================================== |
985 | 6 = Media Queries | |
986 | ========================================================================== */ | |
987 | ||
988 | @media screen and (max-width: 1050px) { | |
989 | .entrie { | |
990 | width: 49%; | |
991 | } | |
992 | .entrie:nth-child(3n+1) { | |
993 | margin-left: 1.5%; | |
994 | } | |
995 | .entrie:nth-child(2n+1) { | |
996 | margin-left: 0; | |
997 | } | |
998 | } | |
999 | ||
1000 | @media screen and (max-width: 900px) { | |
1001 | #article { | |
1002 | width: 80%; | |
1003 | } | |
1004 | .topPosF { | |
1005 | right: 2.5em; | |
1006 | } | |
00dc7622 TC |
1007 | .leftPosF { |
1008 | right: 4.5em; | |
1009 | } | |
1010 | .rightPosF { | |
1011 | right: 0.5em; | |
1012 | } | |
943ac3c7 NL |
1013 | } |
1014 | ||
1015 | @media screen and (max-width: 700px) { | |
1016 | .entrie { | |
1017 | width: 100%; | |
1018 | margin-left: 0; | |
1019 | } | |
36a733af MR |
1020 | #display-mode { |
1021 | display: none; | |
1022 | } | |
943ac3c7 NL |
1023 | } |
1024 | ||
1025 | @media screen and (max-width: 500px) { | |
1026 | .entrie { | |
1027 | width: 100%; | |
1028 | margin-left: 0; | |
1029 | } | |
1030 | body > header { | |
fc01f943 | 1031 | background-color: #333; |
943ac3c7 NL |
1032 | position: fixed; |
1033 | top: 0; | |
1034 | width: 100%; | |
1035 | height: 3em; | |
1036 | z-index: 11; | |
1037 | } | |
1038 | #links li:last-child { | |
1039 | position: static; | |
1040 | width: auto; | |
1041 | } | |
1042 | #links li:last-child a:before { | |
1043 | content: none; | |
1044 | } | |
1045 | .logo { | |
f61ffec3 GB |
1046 | width: 1.25em; |
1047 | height: 1.25em; | |
943ac3c7 NL |
1048 | left: 0; |
1049 | top: 0; | |
1050 | } | |
1051 | .login > header { | |
1052 | position: static; | |
1053 | } | |
1054 | .login form { | |
1055 | width: 100%; | |
1056 | position: static; | |
1057 | margin-left: 0; | |
1058 | } | |
1059 | .login .logo { | |
1060 | width: auto; | |
1061 | height: auto; | |
1062 | top: 0.5em; | |
1063 | width: 75px; | |
1064 | height: 75px; | |
1065 | margin-left: -37.5px; | |
1066 | } | |
1067 | .desktopHide { | |
1068 | display: block; | |
1069 | position: fixed; | |
1070 | z-index: 20; | |
1071 | top: 0; | |
1072 | right: 0; | |
1073 | border:0; | |
1074 | width: 2.5em; | |
1075 | height: 2.5em; | |
1076 | cursor: pointer; | |
fc01f943 | 1077 | background-color: #999; |
943ac3c7 NL |
1078 | font-size: 1.2em; |
1079 | } | |
1080 | .desktopHide:hover, .desktopHide:focus { | |
fc01f943 | 1081 | background-color: #FFF; |
943ac3c7 NL |
1082 | } |
1083 | #links { | |
1084 | display: none; | |
1085 | width: 100%; | |
1086 | height: auto; | |
1087 | padding-top: 3em; | |
1088 | } | |
ebea829d | 1089 | #links.menu--open { |
e319c498 JS |
1090 | display: block; |
1091 | } | |
943ac3c7 NL |
1092 | footer { |
1093 | position: static; | |
1094 | margin-right: 3em; | |
1095 | } | |
1096 | #main { | |
1097 | margin-left: 1.5em; | |
1098 | padding-right: 1.5em; | |
1099 | position: static; | |
f61ffec3 | 1100 | margin-top: 3em; |
943ac3c7 NL |
1101 | } |
1102 | #article_toolbar .topPosF { | |
1103 | display: none; | |
1104 | } | |
1105 | ||
00dc7622 TC |
1106 | #article_toolbar .leftPosF { |
1107 | display: none; | |
1108 | } | |
1109 | ||
1110 | #article_toolbar .rightPosF { | |
1111 | display: none; | |
1112 | } | |
1113 | ||
943ac3c7 NL |
1114 | #article { |
1115 | width: 100%; | |
1116 | } | |
1117 | ||
1118 | #article h1 { | |
1119 | font-size: 1.5em; | |
1120 | } | |
1121 | #article_toolbar a { | |
1122 | padding: 0.3em 0.4em 0.2em; | |
1123 | } | |
36a733af MR |
1124 | |
1125 | #display-mode { | |
1126 | display: none; | |
1127 | } | |
6775da70 | 1128 | |
344c8f6b | 1129 | .popup-form, #bagit-form, #search-form { |
6775da70 | 1130 | left: 0; |
344c8f6b | 1131 | width: 100%; |
ad2b61db | 1132 | border-left: none; |
344c8f6b JS |
1133 | } |
1134 | ||
1135 | .popup-form form, | |
1136 | #bagit-form form, | |
1137 | #search-form form { | |
1138 | width: 100%; | |
6775da70 | 1139 | } |
032e0ca1 | 1140 | } |