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