]>
Commit | Line | Data |
---|---|---|
19f2f11e 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 | |
371ac69a | 10 | |
19f2f11e NL |
11 | ========================================================================== */ |
12 | ||
13 | html { | |
14 | min-height: 100%; | |
15 | } | |
16 | ||
17 | body { | |
5ecdfcd0 | 18 | background-color: #eee; |
19f2f11e NL |
19 | } |
20 | ||
21 | .login { | |
22 | background-color: #333; | |
23 | } | |
24 | ||
25 | .login #main { | |
26 | padding: 0; | |
27 | margin: 0; | |
28 | } | |
29 | ||
30 | .login form { | |
5ecdfcd0 | 31 | background-color: #fff; |
19f2f11e | 32 | padding: 1.5em; |
5ecdfcd0 | 33 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); |
19f2f11e NL |
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%; | |
371ac69a | 45 | margin-left: -55px; |
19f2f11e NL |
46 | } |
47 | ||
48 | /* ========================================================================== | |
49 | 1 = Style Guide | |
50 | ========================================================================== */ | |
51 | ||
371ac69a | 52 | ::selection { |
5ecdfcd0 | 53 | color: #fff; |
19f2f11e | 54 | background-color: #000; |
371ac69a | 55 | } |
19f2f11e NL |
56 | |
57 | .desktopHide { | |
58 | display: none; | |
59 | } | |
60 | ||
61 | .logo { | |
62 | position: fixed; | |
63 | z-index: 20; | |
64 | top: 0.4em; | |
371ac69a | 65 | left: 0.6em; |
19f2f11e NL |
66 | } |
67 | ||
5ecdfcd0 TC |
68 | h2, |
69 | h3, | |
70 | h4 { | |
71 | font-family: "PT Sans", sans-serif; | |
19f2f11e NL |
72 | text-transform: uppercase; |
73 | } | |
74 | ||
5ecdfcd0 TC |
75 | p, |
76 | li, | |
77 | label { | |
19f2f11e NL |
78 | color: #666; |
79 | } | |
80 | ||
81 | a { | |
82 | color: #000; | |
83 | font-weight: bold; | |
84 | } | |
85 | ||
5ecdfcd0 TC |
86 | a.nostyle { |
87 | text-decoration: none; | |
88 | } | |
89 | ||
90 | a:hover, | |
91 | a:focus { | |
19f2f11e NL |
92 | text-decoration: none; |
93 | } | |
94 | ||
95 | form fieldset { | |
5ecdfcd0 | 96 | border: 0; |
19f2f11e NL |
97 | padding: 0; |
98 | margin: 0; | |
99 | } | |
100 | ||
5ecdfcd0 TC |
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"] { | |
19f2f11e NL |
107 | border: 1px solid #999; |
108 | padding: 0.5em 1em; | |
109 | min-width: 12em; | |
110 | color: #666; | |
111 | } | |
112 | ||
5ecdfcd0 TC |
113 | @media screen and (-webkit-min-device-pixel-ratio: 0) { |
114 | select { | |
19f2f11e NL |
115 | -webkit-appearance: none; |
116 | border-radius: 0; | |
5ecdfcd0 | 117 | background: #fff url("../../_global/img/bg-select.png") no-repeat right center; |
19f2f11e NL |
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 | ||
5ecdfcd0 TC |
144 | form button, |
145 | input[type="submit"] { | |
146 | cursor: pointer; | |
19f2f11e | 147 | background-color: #000; |
5ecdfcd0 TC |
148 | color: #fff; |
149 | border: 0; | |
19f2f11e NL |
150 | padding: 0.5em 1em; |
151 | display: inline-block; | |
5ecdfcd0 | 152 | border: 1px solid #000; |
19f2f11e NL |
153 | } |
154 | ||
5ecdfcd0 TC |
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 | } | |
19f2f11e NL |
167 | |
168 | #bookmarklet { | |
169 | cursor: move; | |
371ac69a | 170 | } |
19f2f11e | 171 | |
5ecdfcd0 | 172 | h2::after { |
19f2f11e NL |
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 | } | |
19f2f11e | 184 | |
5ecdfcd0 TC |
185 | .links li { |
186 | list-style: none; | |
187 | margin: 0; | |
188 | padding: 0; | |
189 | } | |
19f2f11e NL |
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%; | |
5ecdfcd0 | 200 | box-shadow: inset -4px 0 20px rgba(0, 0, 0, 0.6); |
19f2f11e NL |
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 | ||
5ecdfcd0 TC |
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 | } | |
19f2f11e | 227 | |
5ecdfcd0 TC |
228 | #links > li > a:hover, |
229 | #links > li > a:focus { | |
230 | background-color: #999; | |
231 | color: #000; | |
232 | } | |
19f2f11e | 233 | |
5ecdfcd0 TC |
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 | } | |
19f2f11e | 246 | |
5ecdfcd0 TC |
247 | #links li:last-child { |
248 | position: fixed; | |
249 | bottom: 1em; | |
250 | width: 10em; | |
251 | } | |
19f2f11e | 252 | |
5ecdfcd0 TC |
253 | #links li:last-child a::before { |
254 | font-size: 1.2em; | |
255 | position: relative; | |
256 | top: 2px; | |
257 | } | |
19f2f11e NL |
258 | |
259 | #sort { | |
5ecdfcd0 TC |
260 | padding: 0; |
261 | list-style-type: none; | |
262 | opacity: 0.5; | |
263 | display: inline-block; | |
19f2f11e NL |
264 | } |
265 | ||
266 | #sort li { | |
5ecdfcd0 TC |
267 | display: inline; |
268 | font-size: 0.9em; | |
19f2f11e NL |
269 | } |
270 | ||
271 | #sort li + li { | |
5ecdfcd0 | 272 | margin-left: 10px; |
19f2f11e NL |
273 | } |
274 | ||
275 | #sort a { | |
5ecdfcd0 TC |
276 | padding: 2px 2px 0; |
277 | vertical-align: middle; | |
19f2f11e NL |
278 | } |
279 | ||
280 | #sort img { | |
5ecdfcd0 | 281 | vertical-align: baseline; |
19f2f11e | 282 | } |
5ecdfcd0 | 283 | |
19f2f11e | 284 | #sort img:hover { |
5ecdfcd0 | 285 | cursor: pointer; |
19f2f11e NL |
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 | } | |
5ecdfcd0 | 295 | |
19f2f11e NL |
296 | #listmode { |
297 | width: 16px; | |
298 | display: inline-block; | |
299 | text-decoration: none; | |
300 | } | |
5ecdfcd0 | 301 | |
19f2f11e NL |
302 | #listmode a:hover { |
303 | opacity: 1; | |
304 | } | |
5ecdfcd0 | 305 | |
19f2f11e NL |
306 | #listmode.tablemode { |
307 | background-image: url("../img/baggy/table.png"); | |
308 | background-repeat: no-repeat; | |
309 | background-position: bottom; | |
310 | } | |
5ecdfcd0 | 311 | |
19f2f11e NL |
312 | #listmode.listmode { |
313 | background-image: url("../img/baggy/list.png"); | |
314 | background-repeat: no-repeat; | |
315 | background-position: bottom; | |
316 | } | |
317 | ||
5ecdfcd0 TC |
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 | } | |
19f2f11e NL |
327 | |
328 | /* ========================================================================== | |
329 | 2 = Layout | |
330 | ========================================================================== */ | |
371ac69a | 331 | |
19f2f11e | 332 | #content { |
56349e47 | 333 | margin-top: 2em; |
19f2f11e NL |
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 { | |
5ecdfcd0 | 354 | letter-spacing: -5px; |
19f2f11e NL |
355 | } |
356 | ||
26864574 | 357 | .listmode .entry { |
5ecdfcd0 TC |
358 | width: 100% !important; |
359 | margin-left: 0 !important; | |
19f2f11e NL |
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 | ||
26864574 | 378 | .entry { |
5ecdfcd0 TC |
379 | background-color: #fff; |
380 | letter-spacing: normal; | |
381 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | |
19f2f11e NL |
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; | |
19f2f11e NL |
390 | } |
391 | ||
5ecdfcd0 | 392 | .entry::before { |
19f2f11e NL |
393 | content: ""; |
394 | width: 0; | |
395 | height: 0; | |
5ecdfcd0 | 396 | border-style: solid; |
19f2f11e NL |
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; | |
5ecdfcd0 TC |
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; | |
19f2f11e NL |
408 | } |
409 | ||
5ecdfcd0 | 410 | .entry::after { |
19f2f11e NL |
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; | |
5ecdfcd0 TC |
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; | |
19f2f11e NL |
423 | } |
424 | ||
26864574 | 425 | .entry:hover { |
5ecdfcd0 | 426 | box-shadow: 0 3px 10px rgba(0, 0, 0, 1); |
19f2f11e NL |
427 | } |
428 | ||
5ecdfcd0 | 429 | .entry:hover::after { |
19f2f11e NL |
430 | height: 40px; |
431 | } | |
432 | ||
5ecdfcd0 | 433 | .entry:hover::before { |
19f2f11e NL |
434 | bottom: 2.4em; |
435 | } | |
436 | ||
26864574 | 437 | .entry:hover h2 a { |
19f2f11e NL |
438 | color: #666; |
439 | } | |
440 | ||
26864574 | 441 | .entry h2 { |
19f2f11e NL |
442 | text-transform: none; |
443 | margin-bottom: 0; | |
444 | line-height: 1.2; | |
445 | } | |
446 | ||
5ecdfcd0 TC |
447 | .entry h2::after { |
448 | content: none; | |
449 | } | |
19f2f11e | 450 | |
26864574 | 451 | .entry h2 a { |
19f2f11e NL |
452 | display: block; |
453 | text-decoration: none; | |
454 | color: #000; | |
455 | word-wrap: break-word; | |
456 | -webkit-transition: all 0.5s ease; | |
5ecdfcd0 TC |
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; | |
19f2f11e | 461 | } |
19f2f11e | 462 | |
b026d3b1 | 463 | img.preview { |
5ecdfcd0 | 464 | max-width: 100%; |
b026d3b1 NL |
465 | } |
466 | ||
26864574 | 467 | .entry p { |
19f2f11e NL |
468 | color: #666; |
469 | font-size: 0.9em; | |
470 | line-height: 1.7; | |
471 | } | |
472 | ||
5ecdfcd0 TC |
473 | .entry h2 a::first-letter { |
474 | text-transform: uppercase; | |
475 | } | |
19f2f11e | 476 | |
26864574 | 477 | .entry:hover .tools { |
19f2f11e NL |
478 | bottom: 0; |
479 | } | |
480 | ||
26864574 | 481 | .entry .tools { |
19f2f11e NL |
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; | |
5ecdfcd0 TC |
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; | |
19f2f11e NL |
494 | } |
495 | ||
5ecdfcd0 TC |
496 | .entry .tools a { |
497 | color: #666; | |
498 | text-decoration: none; | |
499 | display: block; | |
500 | padding: 0.4em; | |
501 | } | |
19f2f11e | 502 | |
5ecdfcd0 TC |
503 | .entry .tools a:hover { |
504 | color: #fff; | |
505 | } | |
19f2f11e | 506 | |
5ecdfcd0 TC |
507 | .entry .tools li { |
508 | display: inline-block; | |
509 | } | |
19f2f11e | 510 | |
26864574 | 511 | .entry:nth-child(3n+1) { |
19f2f11e NL |
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%; | |
5ecdfcd0 | 525 | text-align: right; |
19f2f11e NL |
526 | } |
527 | ||
624a7c6d | 528 | div.pagination ul { |
19f2f11e | 529 | text-align: right; |
5ecdfcd0 | 530 | margin-bottom: 50px; |
19f2f11e NL |
531 | } |
532 | ||
533 | .nb-results { | |
534 | text-align: left; | |
535 | font-style: italic; | |
536 | color: #999; | |
537 | } | |
538 | ||
624a7c6d | 539 | div.pagination ul > * { |
19f2f11e NL |
540 | display: inline-block; |
541 | margin-left: 0.5em; | |
542 | } | |
543 | ||
624a7c6d | 544 | div.pagination ul a { |
19f2f11e NL |
545 | color: #999; |
546 | text-decoration: none; | |
547 | } | |
548 | ||
5ecdfcd0 TC |
549 | div.pagination ul a:hover, |
550 | div.pagination ul a:focus { | |
551 | text-decoration: underline; | |
624a7c6d | 552 | } |
19f2f11e | 553 | |
5ecdfcd0 TC |
554 | div.pagination ul .prev.disabled, |
555 | div.pagination ul .next.disabled { | |
19f2f11e NL |
556 | display: none; |
557 | } | |
558 | ||
624a7c6d | 559 | div.pagination ul .current { |
9fb6ac83 FG |
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 | ||
19f2f11e NL |
569 | /* ========================================================================== |
570 | 2.1 = "save a link" related styles | |
571 | ========================================================================== */ | |
572 | ||
573 | .popup-form { | |
5ecdfcd0 | 574 | background: rgba(0, 0, 0, 0.5); |
19f2f11e NL |
575 | position: absolute; |
576 | top: 0; | |
577 | left: 10em; | |
578 | z-index: 20; | |
579 | height: 100%; | |
580 | width: 100%; | |
581 | margin: 0; | |
b0b893ea | 582 | margin-top: -30% !important; |
19f2f11e NL |
583 | padding: 2em; |
584 | display: none; | |
5ecdfcd0 | 585 | border-left: 1px #eee solid; |
19f2f11e NL |
586 | } |
587 | ||
5ecdfcd0 TC |
588 | .popup-form form { |
589 | background-color: #fff; | |
0d3bafdf JB |
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; | |
5ecdfcd0 | 598 | } |
19f2f11e NL |
599 | |
600 | #bagit-form-form .addurl { | |
5ecdfcd0 | 601 | margin-left: 0; |
19f2f11e NL |
602 | } |
603 | ||
604 | .closeMessage, | |
605 | .close-button { | |
606 | background-color: #000; | |
5ecdfcd0 TC |
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; | |
19f2f11e NL |
613 | text-decoration: none; |
614 | } | |
5ecdfcd0 TC |
615 | |
616 | .closeMessage:hover, | |
617 | .closeMessage:focus, | |
618 | .close-button:hover, | |
619 | .close-button:focus { | |
0d3bafdf JB |
620 | background-color: #999; |
621 | color: #000; | |
5ecdfcd0 | 622 | } |
19f2f11e NL |
623 | |
624 | .close-button--popup { | |
5ecdfcd0 TC |
625 | display: inline-block; |
626 | position: absolute; | |
627 | top: 0; | |
628 | right: 0; | |
629 | font-size: 1.4em; | |
19f2f11e NL |
630 | } |
631 | ||
632 | .active-current { | |
633 | background-color: #999; | |
634 | } | |
635 | ||
5ecdfcd0 | 636 | .active-current::after { |
19f2f11e NL |
637 | content: ""; |
638 | width: 0; | |
639 | height: 0; | |
640 | position: absolute; | |
641 | border-style: solid; | |
642 | border-width: 10px; | |
5ecdfcd0 | 643 | border-color: transparent #eee transparent transparent; |
19f2f11e NL |
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 { | |
5ecdfcd0 TC |
660 | visibility: hidden; |
661 | position: absolute; | |
662 | opacity: 0; | |
663 | transition-duration: 2s; | |
664 | transition-timing-function: ease-out; | |
19f2f11e NL |
665 | } |
666 | ||
5ecdfcd0 TC |
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; | |
19f2f11e NL |
673 | } |
674 | ||
5ecdfcd0 TC |
675 | a.add-to-wallabag-link-after::after { |
676 | content: "w"; | |
19f2f11e NL |
677 | } |
678 | ||
679 | #add-link-result { | |
680 | font-weight: bold; | |
681 | font-size: 0.9em; | |
682 | } | |
683 | ||
5ecdfcd0 TC |
684 | .btn-clickable { |
685 | cursor: pointer; | |
686 | } | |
687 | ||
19f2f11e NL |
688 | /* ========================================================================== |
689 | 3 = Pictos | |
690 | ========================================================================== */ | |
371ac69a | 691 | |
19f2f11e | 692 | @font-face { |
5ecdfcd0 TC |
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"); | |
19f2f11e NL |
700 | font-weight: normal; |
701 | font-style: normal; | |
702 | } | |
703 | ||
5ecdfcd0 TC |
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 | ||
19f2f11e NL |
745 | .icon span, |
746 | .icon-image span { | |
747 | position: absolute; | |
748 | top: -9999px; | |
749 | } | |
750 | ||
5ecdfcd0 TC |
751 | [class^="icon-"]::before, |
752 | [class*=" icon-"]::before { | |
753 | font-family: icomoon; | |
19f2f11e NL |
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 | ||
5ecdfcd0 TC |
766 | .icon-flattr::before { |
767 | content: "\ead4"; | |
19f2f11e | 768 | } |
5ecdfcd0 TC |
769 | |
770 | .icon-mail::before { | |
771 | content: "\ea86"; | |
19f2f11e | 772 | } |
5ecdfcd0 TC |
773 | |
774 | .icon-up-open::before { | |
19f2f11e NL |
775 | content: "\e80b"; |
776 | } | |
5ecdfcd0 TC |
777 | |
778 | .icon-star::before { | |
779 | content: "\e9d9"; | |
19f2f11e | 780 | } |
5ecdfcd0 TC |
781 | |
782 | .icon-check::before { | |
783 | content: "\ea10"; | |
19f2f11e | 784 | } |
5ecdfcd0 TC |
785 | |
786 | .icon-link::before { | |
787 | content: "\e9cb"; | |
19f2f11e | 788 | } |
5ecdfcd0 TC |
789 | |
790 | .icon-reply::before { | |
19f2f11e NL |
791 | content: "\e806"; |
792 | } | |
5ecdfcd0 TC |
793 | |
794 | .icon-menu::before { | |
795 | content: "\e9bd"; | |
19f2f11e | 796 | } |
5ecdfcd0 TC |
797 | |
798 | .icon-clock::before { | |
19f2f11e NL |
799 | content: "\e803"; |
800 | } | |
5ecdfcd0 TC |
801 | |
802 | .icon-twitter::before { | |
803 | content: "\ea91"; | |
19f2f11e | 804 | } |
5ecdfcd0 TC |
805 | |
806 | .icon-down-open::before { | |
19f2f11e NL |
807 | content: "\e809"; |
808 | } | |
5ecdfcd0 TC |
809 | |
810 | .icon-trash::before { | |
811 | content: "\e9ac"; | |
19f2f11e | 812 | } |
5ecdfcd0 TC |
813 | |
814 | .icon-delete::before { | |
815 | content: "\ea0d"; | |
19f2f11e | 816 | } |
5ecdfcd0 TC |
817 | |
818 | .icon-power::before { | |
819 | content: "\ea14"; | |
19f2f11e | 820 | } |
5ecdfcd0 TC |
821 | |
822 | .icon-arrow-up-thick::before { | |
823 | content: "\ea3a"; | |
19f2f11e | 824 | } |
5ecdfcd0 TC |
825 | |
826 | .icon-rss::before { | |
19f2f11e NL |
827 | content: "\e808"; |
828 | } | |
5ecdfcd0 TC |
829 | |
830 | .icon-print::before { | |
831 | content: "\e954"; | |
19f2f11e | 832 | } |
5ecdfcd0 TC |
833 | |
834 | .icon-reload::before { | |
0cf434c0 JB |
835 | content: "\ea2e"; |
836 | } | |
19f2f11e | 837 | |
5ecdfcd0 TC |
838 | .icon-price-tags::before { |
839 | content: "\e936"; | |
840 | } | |
19f2f11e NL |
841 | |
842 | /* .icon-image class, for image-based icons | |
0d3bafdf | 843 | ========================================================================== */ |
19f2f11e NL |
844 | |
845 | .icon-image { | |
5ecdfcd0 TC |
846 | background-size: 16px 16px; |
847 | background-repeat: no-repeat; | |
848 | background-position: center; | |
849 | padding-right: 1em !important; | |
850 | padding-left: 1em !important; | |
19f2f11e NL |
851 | } |
852 | ||
853 | /* Carrot (http://carrot.org) */ | |
854 | .icon-image--carrot { | |
5ecdfcd0 | 855 | background-image: url("../../_global/img/icons/carrot-icon--white.png"); |
19f2f11e NL |
856 | } |
857 | ||
858 | /* Diaspora */ | |
859 | .icon-image--diaspora { | |
5ecdfcd0 | 860 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); |
a24c1ee3 | 861 | } |
19f2f11e NL |
862 | |
863 | /* ========================================================================== | |
864 | Icon selected | |
865 | ========================================================================== */ | |
866 | ||
5ecdfcd0 TC |
867 | .icon-star.fav::before { |
868 | color: #fff; | |
19f2f11e NL |
869 | } |
870 | ||
5ecdfcd0 TC |
871 | .icon-check.archive::before { |
872 | color: #fff; | |
19f2f11e NL |
873 | } |
874 | ||
875 | /* ========================================================================== | |
876 | 4 = Messages | |
877 | ========================================================================== */ | |
878 | ||
879 | .messages { | |
880 | text-align: left; | |
881 | margin-top: 1em; | |
882 | } | |
883 | ||
5ecdfcd0 TC |
884 | .messages > * { |
885 | display: inline-block; | |
886 | } | |
19f2f11e NL |
887 | |
888 | .warning { | |
19f2f11e NL |
889 | font-weight: bold; |
890 | display: block; | |
891 | width: 100%; | |
892 | } | |
893 | ||
894 | .more-info { | |
5ecdfcd0 | 895 | font-size: 0.85em; |
19f2f11e | 896 | line-height: 1.5; |
5ecdfcd0 | 897 | color: #aaa; |
19f2f11e NL |
898 | } |
899 | ||
5ecdfcd0 | 900 | .more-info a { |
0d3bafdf | 901 | color: #aaa; |
5ecdfcd0 | 902 | } |
19f2f11e NL |
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 { | |
5ecdfcd0 TC |
923 | border: 1px solid #999; |
924 | background-color: #fff; | |
19f2f11e NL |
925 | padding: 1em; |
926 | margin: 0; | |
927 | } | |
928 | ||
929 | #article h1 { | |
930 | text-align: left; | |
931 | } | |
932 | ||
5ecdfcd0 TC |
933 | #article h2, |
934 | #article h3, | |
935 | #article h4 { | |
19f2f11e NL |
936 | text-transform: none; |
937 | } | |
938 | ||
5ecdfcd0 | 939 | #article h2::after { |
19f2f11e NL |
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; | |
5ecdfcd0 | 961 | color: #fff; |
19f2f11e NL |
962 | text-decoration: none; |
963 | } | |
371ac69a | 964 | |
5ecdfcd0 TC |
965 | #article_toolbar a:hover, |
966 | #article_toolbar a:focus { | |
56349e47 TC |
967 | background-color: #999; |
968 | } | |
969 | ||
970 | #nav-btn-add-tag { | |
5ecdfcd0 | 971 | cursor: pointer; |
56349e47 | 972 | } |
19f2f11e | 973 | |
5ecdfcd0 | 974 | .shaarli::before { |
19f2f11e NL |
975 | content: "*"; |
976 | } | |
977 | ||
978 | .return { | |
979 | text-decoration: none; | |
980 | margin-top: 1em; | |
981 | display: block; | |
982 | } | |
983 | ||
5ecdfcd0 | 984 | .return::before { |
19f2f11e NL |
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; | |
5ecdfcd0 | 995 | color: #fff; |
19f2f11e NL |
996 | padding: 0.2em 0.5em; |
997 | } | |
998 | ||
5ecdfcd0 | 999 | .icon-rss::before { |
19f2f11e NL |
1000 | position: relative; |
1001 | top: 2px; | |
1002 | } | |
1003 | ||
1004 | .list-tags li { | |
1005 | margin-bottom: 0.5em; | |
1006 | } | |
1007 | ||
5ecdfcd0 TC |
1008 | .list-tags .icon-rss:hover, |
1009 | .list-tags .icon-rss:focus { | |
1010 | background-color: #fff; | |
19f2f11e NL |
1011 | color: #000; |
1012 | text-decoration: none; | |
1013 | } | |
1014 | ||
1015 | .list-tags a { | |
1016 | text-decoration: none; | |
1017 | } | |
1018 | ||
5ecdfcd0 TC |
1019 | .list-tags a:hover, |
1020 | .list-tags a:focus { | |
19f2f11e NL |
1021 | text-decoration: underline; |
1022 | } | |
1023 | ||
1024 | pre code { | |
0d3bafdf | 1025 | font-family: "Courier New", Courier, monospace; |
19f2f11e NL |
1026 | } |
1027 | ||
d2fcbf5d | 1028 | #filter-form { |
5def3f58 | 1029 | position: fixed; |
1a5f7e2d | 1030 | width: 20%; |
5def3f58 JB |
1031 | height: 100%; |
1032 | top: 0; | |
1033 | right: 0; | |
5ecdfcd0 | 1034 | background-color: #fff; |
5def3f58 JB |
1035 | padding: 15px; |
1036 | padding-right: 30px; | |
1037 | padding-top: 30px; | |
0d3bafdf | 1038 | border-left: 1px #333 solid; |
5def3f58 | 1039 | z-index: 12; |
5ecdfcd0 | 1040 | min-width: 300px; |
5def3f58 JB |
1041 | } |
1042 | ||
1043 | #filter-form form .filter-group { | |
1044 | margin: 5px; | |
d2fcbf5d JB |
1045 | } |
1046 | ||
5ecdfcd0 TC |
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 | } | |
19f2f11e NL |
1073 | |
1074 | /* ========================================================================== | |
1075 | 6 = Media Queries | |
1076 | ========================================================================== */ | |
1077 | ||
1078 | @media screen and (max-width: 1050px) { | |
26864574 | 1079 | .entry { |
19f2f11e NL |
1080 | width: 49%; |
1081 | } | |
26864574 | 1082 | .entry:nth-child(3n+1) { |
19f2f11e NL |
1083 | margin-left: 1.5%; |
1084 | } | |
26864574 | 1085 | .entry:nth-child(2n+1) { |
19f2f11e NL |
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) { | |
26864574 | 1100 | .entry { |
19f2f11e NL |
1101 | width: 100%; |
1102 | margin-left: 0; | |
1103 | } | |
1104 | #display-mode { | |
1105 | display: none; | |
1106 | } | |
1107 | } | |
1108 | ||
1109 | @media screen and (max-width: 500px) { | |
26864574 | 1110 | .entry { |
19f2f11e NL |
1111 | width: 100%; |
1112 | margin-left: 0; | |
1113 | } | |
5ecdfcd0 | 1114 | |
19f2f11e NL |
1115 | body > header { |
1116 | background-color: #333; | |
1117 | position: fixed; | |
1118 | top: 0; | |
1119 | width: 100%; | |
1120 | height: 3em; | |
1121 | z-index: 11; | |
1122 | } | |
5ecdfcd0 | 1123 | |
19f2f11e NL |
1124 | #links li:last-child { |
1125 | position: static; | |
1126 | width: auto; | |
1127 | } | |
5ecdfcd0 TC |
1128 | |
1129 | #links li:last-child a::before { | |
19f2f11e NL |
1130 | content: none; |
1131 | } | |
5ecdfcd0 | 1132 | |
19f2f11e NL |
1133 | .logo { |
1134 | width: 1.25em; | |
1135 | height: 1.25em; | |
1136 | left: 0; | |
1137 | top: 0; | |
1138 | } | |
5ecdfcd0 | 1139 | |
19f2f11e NL |
1140 | .login > header { |
1141 | position: static; | |
1142 | } | |
5ecdfcd0 | 1143 | |
19f2f11e NL |
1144 | .login form { |
1145 | width: 100%; | |
1146 | position: static; | |
1147 | margin-left: 0; | |
1148 | } | |
5ecdfcd0 | 1149 | |
19f2f11e NL |
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 | } | |
5ecdfcd0 | 1158 | |
19f2f11e NL |
1159 | .desktopHide { |
1160 | display: block; | |
1161 | position: fixed; | |
1162 | z-index: 20; | |
1163 | top: 0; | |
1164 | right: 0; | |
5ecdfcd0 | 1165 | border: 0; |
19f2f11e NL |
1166 | width: 2.5em; |
1167 | height: 2.5em; | |
1168 | cursor: pointer; | |
1169 | background-color: #999; | |
1170 | font-size: 1.2em; | |
1171 | } | |
5ecdfcd0 TC |
1172 | .desktopHide:hover, |
1173 | .desktopHide:focus { | |
1174 | background-color: #fff; | |
1175 | } | |
1176 | ||
19f2f11e NL |
1177 | #links { |
1178 | display: none; | |
1179 | width: 100%; | |
1180 | height: auto; | |
1181 | padding-top: 3em; | |
1182 | } | |
5ecdfcd0 | 1183 | |
19f2f11e NL |
1184 | #links.menu--open { |
1185 | display: block; | |
1186 | } | |
5ecdfcd0 TC |
1187 | |
1188 | footer { | |
19f2f11e NL |
1189 | position: static; |
1190 | margin-right: 3em; | |
1191 | } | |
5ecdfcd0 | 1192 | |
19f2f11e NL |
1193 | #main { |
1194 | margin-left: 1.5em; | |
1195 | padding-right: 1.5em; | |
1196 | position: static; | |
1197 | margin-top: 3em; | |
1198 | } | |
5ecdfcd0 | 1199 | |
19f2f11e NL |
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 | } | |
5ecdfcd0 | 1211 | |
19f2f11e NL |
1212 | #article_toolbar a { |
1213 | padding: 0.3em 0.4em 0.2em; | |
1214 | } | |
371ac69a | 1215 | |
19f2f11e NL |
1216 | #display-mode { |
1217 | display: none; | |
1218 | } | |
1219 | ||
5ecdfcd0 TC |
1220 | .popup-form, |
1221 | #bagit-form, | |
1222 | #search-form { | |
19f2f11e NL |
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 | } |