]>
Commit | Line | Data |
---|---|---|
1 | /** | |
2 | * General | |
3 | */ | |
4 | body { | |
5 | background: url(../img/noise.png) #979797; | |
6 | } | |
7 | ||
8 | .strong { | |
9 | font-weight: bold; | |
10 | } | |
11 | ||
12 | .clear { | |
13 | clear: both; | |
14 | } | |
15 | ||
16 | .label { | |
17 | display: inline-block; | |
18 | padding: .25em .4em; | |
19 | font-size: 75%; | |
20 | font-weight: 700; | |
21 | line-height: 1; | |
22 | text-align: center; | |
23 | white-space: nowrap; | |
24 | vertical-align: baseline; | |
25 | border-radius: .25rem; | |
26 | } | |
27 | ||
28 | @font-face { | |
29 | font-family: 'Roboto Slab'; | |
30 | font-weight: 400; | |
31 | font-style: normal; | |
32 | src: | |
33 | local('Fira Sans'), | |
34 | local('Fira-Sans-regular'), | |
35 | url('../fonts/Fira-Sans-regular.woff2') format('woff2'), | |
36 | url('../fonts/Fira-Sans-regular.woff') format('woff'); | |
37 | } | |
38 | ||
39 | /** | |
40 | * Extends Pure grids responsive to hide items. | |
41 | * Use xx-0 to hide an item on xx screen. | |
42 | * Display it at any level with xx-visible. | |
43 | */ | |
44 | .pure-u-0 { display: none !important; } | |
45 | @media screen and (min-width: 35.5em) { | |
46 | .pure-u-sm-0 { display: none !important; } | |
47 | .pure-u-sm-visible { display: inline-block !important; } | |
48 | } | |
49 | @media screen and (min-width: 48em) { | |
50 | .pure-u-md-0 { display: none !important; } | |
51 | .pure-u-md-visible { display: inline-block !important; } | |
52 | } | |
53 | @media screen and (min-width: 64em) { | |
54 | .pure-u-lg-0 { display: none !important; } | |
55 | .pure-u-lg-visible { display: inline-block !important; } | |
56 | } | |
57 | @media screen and (min-width: 80em) { | |
58 | .pure-u-xl-0 { display: none !important; } | |
59 | .pure-u-xl-visible { display: inline-block !important; } | |
60 | } | |
61 | ||
62 | /** | |
63 | * MENU | |
64 | **/ | |
65 | .shaarli-menu { | |
66 | position: fixed; | |
67 | top: 0; | |
68 | width: 100%; | |
69 | background: #1b926c; | |
70 | -webkit-font-smoothing: antialiased; | |
71 | /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ | |
72 | max-height: 2.1em; | |
73 | transition: max-height 0.5s; | |
74 | overflow: hidden; | |
75 | z-index: 999; | |
76 | } | |
77 | ||
78 | .shaarli-menu.open { | |
79 | max-height: 500px; | |
80 | transition: max-height 0.75s; | |
81 | } | |
82 | ||
83 | .pure-menu-selected { | |
84 | background: #1A694C; | |
85 | } | |
86 | ||
87 | .pure-menu-link, | |
88 | .pure-menu-link:visited, | |
89 | .pure-menu-selected .pure-menu-link, | |
90 | .pure-menu-selected .pure-menu-link:visited { | |
91 | color: #b0ddce; | |
92 | } | |
93 | ||
94 | .pure-menu-link:hover, | |
95 | .pure-menu-selected .pure-menu-link:hover { | |
96 | color: #d1fff0; | |
97 | background: transparent; | |
98 | } | |
99 | ||
100 | .menu-toggle { | |
101 | width: 34px; | |
102 | height: 34px; | |
103 | position: absolute; | |
104 | top: 0; | |
105 | right: 0; | |
106 | display: none; | |
107 | } | |
108 | ||
109 | .menu-toggle .bar { | |
110 | background-color: #b0ddce; | |
111 | display: block; | |
112 | width: 20px; | |
113 | height: 2px; | |
114 | border-radius: 100px; | |
115 | position: absolute; | |
116 | top: 18px; | |
117 | right: 7px; | |
118 | transition: all 0.5s; | |
119 | } | |
120 | ||
121 | .menu-toggle .bar:first-child { | |
122 | transform: translateY(-6px); | |
123 | } | |
124 | ||
125 | .menu-toggle.x .bar { | |
126 | transform: rotate(45deg); | |
127 | } | |
128 | ||
129 | .menu-toggle.x .bar:first-child { | |
130 | transform: rotate(-45deg); | |
131 | } | |
132 | ||
133 | @media screen and (max-width: 64em) { | |
134 | .menu-toggle { | |
135 | display: block; | |
136 | } | |
137 | } | |
138 | ||
139 | /** | |
140 | * Header | |
141 | */ | |
142 | #header { | |
143 | width: 100%; | |
144 | height: 150px; | |
145 | background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em; | |
146 | } | |
147 | ||
148 | #header h1 { | |
149 | position: fixed; | |
150 | float: left; | |
151 | margin: 45px 0 0 125px; | |
152 | width: 55%; | |
153 | height: 100px; | |
154 | } | |
155 | ||
156 | #header h1 a, #header h1 a:visited { | |
157 | /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */ | |
158 | display: -ms-flexbox; | |
159 | display: flex; | |
160 | flex-direction: column; | |
161 | justify-content: center; | |
162 | ||
163 | overflow: hidden; | |
164 | height: 100px; | |
165 | color: #b0ddce; | |
166 | text-decoration: none; | |
167 | z-index: 1; | |
168 | ||
169 | font-family: Roboto Slab, Arial, sans-serif; | |
170 | font-size: 1.2em; | |
171 | } | |
172 | ||
173 | #header h1 a:hover { | |
174 | color: #d1fff0; | |
175 | } | |
176 | ||
177 | #linkcount { | |
178 | /* position: fixed; */ | |
179 | position: absolute; | |
180 | top: 40px; | |
181 | right: 10px; | |
182 | color: #b0ddce; | |
183 | font-size: 0.8em; | |
184 | } | |
185 | ||
186 | #search { | |
187 | /** | |
188 | * Can't make it work with awesomplete list z-index. Any idea? | |
189 | * position: fixed; | |
190 | */ | |
191 | position: absolute; | |
192 | top: 60px; | |
193 | right: 10px; | |
194 | width: 30%; | |
195 | text-align: right; | |
196 | } | |
197 | ||
198 | #search input[type="text"] { | |
199 | margin: 0 0 5px 0; | |
200 | padding: 5px 5px 3px 15px; | |
201 | height: 20px; | |
202 | width: 140px; | |
203 | transition: width .5s ease; | |
204 | background: #1b926c; | |
205 | border: medium none currentColor; | |
206 | border-radius: 25px; | |
207 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | |
208 | color: #b0ddce; | |
209 | } | |
210 | ||
211 | #search button { | |
212 | background: transparent; | |
213 | border: none; | |
214 | color: #b0ddce; | |
215 | } | |
216 | ||
217 | #search button:hover { | |
218 | color: #fff; | |
219 | } | |
220 | ||
221 | /** | |
222 | * CONTENT - GENERAL | |
223 | */ | |
224 | #content { | |
225 | position: relative; | |
226 | /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ | |
227 | margin-top: -4px; | |
228 | /* Hack-ish way to only shadow the top part. */ | |
229 | box-shadow: 0 -20px 20px -20px #797979; | |
230 | z-index: 2; | |
231 | background: url(../img/noise.png) #979797; | |
232 | } | |
233 | ||
234 | /** | |
235 | * CONTENT - LINKLIST PAGING | |
236 | */ | |
237 | @media screen and (max-width: 64em) { | |
238 | .linklist-paging { | |
239 | margin: 2.1em 0 0 0; | |
240 | } | |
241 | } | |
242 | ||
243 | @media screen and (min-width: 64em) { | |
244 | .linklist-paging { | |
245 | margin: 0; | |
246 | } | |
247 | } | |
248 | ||
249 | .linklist-filters { | |
250 | margin: 10px 0; | |
251 | color: #252525; | |
252 | } | |
253 | ||
254 | .linklist-filters span { | |
255 | margin: 0 0 0 10px; | |
256 | } | |
257 | ||
258 | .linklist-filters a { | |
259 | padding: 2px 5px; | |
260 | text-decoration: none; | |
261 | } | |
262 | ||
263 | .linklist-filters .filter-off { | |
264 | color: #252525; | |
265 | background: #c8c8c8; | |
266 | } | |
267 | ||
268 | .linklist-filters .filter-on { | |
269 | color: #b0ddce; | |
270 | background: #1b926c; | |
271 | } | |
272 | ||
273 | .linklist-pages { | |
274 | margin: 10px 0; | |
275 | color: #252525; | |
276 | text-align: center; | |
277 | } | |
278 | ||
279 | .linklist-pages a { | |
280 | color: #252525; | |
281 | text-decoration: none; | |
282 | } | |
283 | ||
284 | .linklist-pages a:hover { | |
285 | color: #fff; | |
286 | } | |
287 | ||
288 | .linksperpage { | |
289 | margin: 10px 0; | |
290 | text-align: right; | |
291 | color: #252525; | |
292 | } | |
293 | ||
294 | .linksperpage a { | |
295 | padding: 2px 5px; | |
296 | text-decoration: none; | |
297 | color: #252525; | |
298 | background: #c8c8c8; | |
299 | border: solid 1px #979797; | |
300 | } | |
301 | ||
302 | .linksperpage form { | |
303 | display: inline; | |
304 | margin: 0 10px 0 0; | |
305 | } | |
306 | ||
307 | .linksperpage input[type="text"] { | |
308 | width: 28px; | |
309 | height: 20px; | |
310 | margin: 0 0 5px 0; | |
311 | padding: 3px 5px 3px 8px; | |
312 | background: #c8c8c8; | |
313 | border: medium none currentColor; | |
314 | border-radius: 25px; | |
315 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | |
316 | color: #252525; | |
317 | font-size: 0.8em; | |
318 | } | |
319 | ||
320 | /** | |
321 | * CONTENT - LINKLIST ITEMS | |
322 | */ | |
323 | .linklist-item { | |
324 | margin: 15px 0; | |
325 | background: #f5f5f5; | |
326 | box-shadow: 2px 2px 0.5em #797979; | |
327 | } | |
328 | ||
329 | .linklist-item-title, .linklist-item-title h2 { | |
330 | margin: 0; | |
331 | } | |
332 | ||
333 | .linklist-item-title { | |
334 | background: #20b988 url(../img/noise.png); | |
335 | border-bottom: 1px solid #1b926c; | |
336 | box-shadow: 1px 1px 0.2em #1b926c; | |
337 | } | |
338 | ||
339 | .linklist-item-title h2 { | |
340 | padding: 3px 10px 0 10px; | |
341 | line-height: 25px; | |
342 | } | |
343 | ||
344 | .linklist-item-title a { | |
345 | font-size: 0.7em; | |
346 | color: #d0fff0; | |
347 | text-decoration: none; | |
348 | vertical-align: middle; | |
349 | font-family: Roboto Slab, Arial, sans-serif; | |
350 | } | |
351 | ||
352 | .linklist-item-title .linklist-link:visited { | |
353 | color: #ddd; | |
354 | } | |
355 | ||
356 | .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{ | |
357 | color: #fff; | |
358 | } | |
359 | ||
360 | ||
361 | .linklist-item-title .label-private { | |
362 | border: solid 1px #d0fff0; | |
363 | font-family: Arial, sans-serif; | |
364 | font-size: 0.65em; | |
365 | } | |
366 | ||
367 | .linklist-item-title .fold-button { | |
368 | display: none; | |
369 | } | |
370 | ||
371 | .linklist-item-editbuttons { | |
372 | float: right; | |
373 | padding: 5px; | |
374 | } | |
375 | ||
376 | .linklist-item-editbuttons a { | |
377 | font-size: 1em; | |
378 | } | |
379 | ||
380 | .linklist-item-description { | |
381 | padding: 10px; | |
382 | font-family: Roboto Slab, Arial, sans-serif; | |
383 | } | |
384 | ||
385 | .linklist-item-description a { | |
386 | text-decoration: none; | |
387 | color: #1b926c; | |
388 | } | |
389 | ||
390 | .linklist-item-description a:hover { | |
391 | text-shadow: 1px 1px #ddd; | |
392 | } | |
393 | ||
394 | .linklist-item-description a:visited { | |
395 | color: #20b988; | |
396 | } | |
397 | ||
398 | .linklist-item-infos { | |
399 | padding: 5px; | |
400 | background: #ddd url(../img/noise.png); | |
401 | border-top: 1px solid #989898; | |
402 | box-shadow: 1px -1px 0.2em #989898; | |
403 | color: #252525; | |
404 | font-size: 0.8em; | |
405 | } | |
406 | ||
407 | .linklist-item-infos a { | |
408 | color: #505050; | |
409 | text-decoration: none; | |
410 | } | |
411 | ||
412 | .linklist-item-infos a:hover { | |
413 | color: #000; | |
414 | } | |
415 | ||
416 | .linklist-item-tags { | |
417 | margin: 0 0 5px 0; | |
418 | } | |
419 | ||
420 | .linklist-item-infos .label-tag { | |
421 | border: 1px solid #505050; | |
422 | font-size: 0.9em; | |
423 | } | |
424 | ||
425 | .linklist-item-infos .label-tag:hover { | |
426 | border: 1px solid #000; | |
427 | } | |
428 | ||
429 | .linklist-plugin-icon { | |
430 | width: 13px; | |
431 | height: 13px; | |
432 | } | |
433 | ||
434 | .linklist-item-infos-url { | |
435 | text-align: right; | |
436 | white-space: nowrap; | |
437 | overflow: hidden; | |
438 | text-overflow: ellipsis; | |
439 | } | |
440 | ||
441 | /** | |
442 | * CONTENT - LINKLIST ITEMS | |
443 | */ | |
444 | .linklist-item { | |
445 | margin: 15px 0; | |
446 | background: #fff; | |
447 | box-shadow: 2px 2px 0.5em #797979; | |
448 | } | |
449 | ||
450 | .linklist-item-title, .linklist-item-title h2 { | |
451 | margin: 0; | |
452 | } | |
453 | ||
454 | .linklist-item-title { | |
455 | background: #20b988 url(../img/noise.png); | |
456 | border-bottom: 1px solid #1b926c; | |
457 | box-shadow: 1px 1px 0.2em #1b926c; | |
458 | } | |
459 | ||
460 | .linklist-item-title h2 { | |
461 | padding: 2px 10px; | |
462 | line-height: 25px; | |
463 | } | |
464 | ||
465 | .linklist-item-title a { | |
466 | font-size: 0.6em; | |
467 | color: #d0fff0; | |
468 | text-decoration: none; | |
469 | vertical-align: middle; | |
470 | } | |
471 | ||
472 | .linklist-item-title a:hover { | |
473 | color: #fff; | |
474 | } | |
475 | ||
476 | .linklist-item-title .label-private { | |
477 | border: solid 1px #d0fff0; | |
478 | } | |
479 | ||
480 | .linklist-item-editbuttons { | |
481 | float: right; | |
482 | padding: 5px; | |
483 | } | |
484 | ||
485 | .linklist-item-editbuttons a { | |
486 | font-size: 1em; | |
487 | } | |
488 | ||
489 | .linklist-item-description { | |
490 | padding: 10px; | |
491 | } | |
492 | ||
493 | .linklist-item-infos { | |
494 | padding: 5px; | |
495 | background: #ddd url(../img/noise.png); | |
496 | border-top: 1px solid #989898; | |
497 | box-shadow: 1px -1px 0.2em #989898; | |
498 | color: #252525; | |
499 | font-size: 0.8em; | |
500 | } | |
501 | ||
502 | .linklist-item-infos a { | |
503 | color: #505050; | |
504 | text-decoration: none; | |
505 | } | |
506 | ||
507 | .linklist-item-infos a:hover { | |
508 | color: #000; | |
509 | } | |
510 | ||
511 | .linklist-item-infos .label-tag { | |
512 | border: 1px solid #505050; | |
513 | font-size: 0.9em; | |
514 | } | |
515 | ||
516 | .linklist-item-infos .label-tag:hover { | |
517 | border: 1px solid #000; | |
518 | } | |
519 | ||
520 | .linklist-item-infos-url { | |
521 | text-align: right; | |
522 | white-space: nowrap; | |
523 | overflow: hidden; | |
524 | text-overflow: ellipsis; | |
525 | } |