diff options
Diffstat (limited to 'tpl/default/css/shaarli.css')
-rw-r--r-- | tpl/default/css/shaarli.css | 1175 |
1 files changed, 1175 insertions, 0 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css new file mode 100644 index 00000000..fd0a144f --- /dev/null +++ b/tpl/default/css/shaarli.css | |||
@@ -0,0 +1,1175 @@ | |||
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 | .center { | ||
17 | text-align: center; | ||
18 | margin: auto; | ||
19 | } | ||
20 | |||
21 | .label { | ||
22 | display: inline-block; | ||
23 | padding: .25em .4em; | ||
24 | font-size: 75%; | ||
25 | font-weight: 700; | ||
26 | line-height: 1; | ||
27 | text-align: center; | ||
28 | white-space: nowrap; | ||
29 | vertical-align: baseline; | ||
30 | border-radius: .25rem; | ||
31 | } | ||
32 | |||
33 | pre { | ||
34 | max-width: 100%; | ||
35 | } | ||
36 | |||
37 | @font-face { | ||
38 | font-family: 'Roboto Slab'; | ||
39 | font-weight: 400; | ||
40 | font-style: normal; | ||
41 | src: | ||
42 | local('Fira Sans'), | ||
43 | local('Fira-Sans-regular'), | ||
44 | url('../fonts/Fira-Sans-regular.woff2') format('woff2'), | ||
45 | url('../fonts/Fira-Sans-regular.woff') format('woff'); | ||
46 | } | ||
47 | |||
48 | /** | ||
49 | * Extends Pure grids responsive to hide items. | ||
50 | * Use xx-0 to hide an item on xx screen. | ||
51 | * Display it at any level with xx-visible. | ||
52 | */ | ||
53 | .pure-u-0 { display: none !important; } | ||
54 | @media screen and (min-width: 35.5em) { | ||
55 | .pure-u-sm-0 { display: none !important; } | ||
56 | .pure-u-sm-visible { display: inline-block !important; } | ||
57 | } | ||
58 | @media screen and (min-width: 48em) { | ||
59 | .pure-u-md-0 { display: none !important; } | ||
60 | .pure-u-md-visible { display: inline-block !important; } | ||
61 | } | ||
62 | @media screen and (min-width: 64em) { | ||
63 | .pure-u-lg-0 { display: none !important; } | ||
64 | .pure-u-lg-visible { display: inline-block !important; } | ||
65 | } | ||
66 | @media screen and (min-width: 80em) { | ||
67 | .pure-u-xl-0 { display: none !important; } | ||
68 | .pure-u-xl-visible { display: inline-block !important; } | ||
69 | } | ||
70 | |||
71 | .pure-g [class*="pure-u"]{ | ||
72 | font-family: Roboto Slab, Arial, sans-serif; | ||
73 | } | ||
74 | |||
75 | /** | ||
76 | * Make pure-extras alert closable. | ||
77 | */ | ||
78 | .pure-alert-closable .fa-times { | ||
79 | float: right; | ||
80 | } | ||
81 | .pure-alert-close { | ||
82 | cursor: pointer; | ||
83 | } | ||
84 | |||
85 | .pure-alert-success { | ||
86 | background-color: #1b926c; | ||
87 | } | ||
88 | |||
89 | /** | ||
90 | * MENU | ||
91 | **/ | ||
92 | .shaarli-menu { | ||
93 | position: fixed; | ||
94 | top: 0; | ||
95 | width: 100%; | ||
96 | background: #1b926c; | ||
97 | -webkit-font-smoothing: antialiased; | ||
98 | /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ | ||
99 | max-height: 2.1em; | ||
100 | transition: max-height 0.5s; | ||
101 | overflow: hidden; | ||
102 | z-index: 999; | ||
103 | } | ||
104 | |||
105 | /* Chrome bugfix: with 100% height, it only displays the first element. */ | ||
106 | .pure-menu-item { | ||
107 | height: inherit; | ||
108 | } | ||
109 | |||
110 | .shaarli-menu.open { | ||
111 | max-height: 500px; | ||
112 | transition: max-height 0.75s; | ||
113 | } | ||
114 | |||
115 | .pure-menu-link, | ||
116 | .pure-menu-link:visited, | ||
117 | .pure-menu-selected .pure-menu-link, | ||
118 | .pure-menu-selected .pure-menu-link:visited { | ||
119 | color: #b0ddce; | ||
120 | } | ||
121 | |||
122 | .pure-menu-link:hover, | ||
123 | .pure-menu-selected .pure-menu-link:hover { | ||
124 | color: #d1fff0; | ||
125 | background: transparent; | ||
126 | } | ||
127 | |||
128 | .menu-toggle { | ||
129 | width: 34px; | ||
130 | height: 34px; | ||
131 | position: absolute; | ||
132 | top: 0; | ||
133 | right: 0; | ||
134 | display: none; | ||
135 | } | ||
136 | |||
137 | .menu-toggle .bar { | ||
138 | background-color: #b0ddce; | ||
139 | display: block; | ||
140 | width: 20px; | ||
141 | height: 2px; | ||
142 | border-radius: 100px; | ||
143 | position: absolute; | ||
144 | top: 18px; | ||
145 | right: 7px; | ||
146 | transition: all 0.5s; | ||
147 | } | ||
148 | |||
149 | .menu-toggle .bar:first-child { | ||
150 | transform: translateY(-6px); | ||
151 | } | ||
152 | |||
153 | .menu-toggle.x .bar { | ||
154 | transform: rotate(45deg); | ||
155 | } | ||
156 | |||
157 | .menu-toggle.x .bar:first-child { | ||
158 | transform: rotate(-45deg); | ||
159 | } | ||
160 | |||
161 | @media screen and (max-width: 64em) { | ||
162 | .menu-toggle { | ||
163 | display: block; | ||
164 | } | ||
165 | } | ||
166 | |||
167 | /** | ||
168 | * Header | ||
169 | */ | ||
170 | #header { | ||
171 | width: 100%; | ||
172 | height: 150px; | ||
173 | background: url(../img/noise.png), #979797 url(../img/logo.png) no-repeat 10px 2.5em; | ||
174 | } | ||
175 | |||
176 | #header h1 { | ||
177 | float: left; | ||
178 | margin: 45px 0 0 125px; | ||
179 | width: 55%; | ||
180 | height: 100px; | ||
181 | } | ||
182 | |||
183 | #header h1 a, #header h1 a:visited { | ||
184 | /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */ | ||
185 | display: -ms-flexbox; | ||
186 | display: flex; | ||
187 | flex-direction: column; | ||
188 | justify-content: center; | ||
189 | |||
190 | overflow: hidden; | ||
191 | height: 100px; | ||
192 | color: #252525; | ||
193 | text-decoration: none; | ||
194 | z-index: 1; | ||
195 | |||
196 | font-family: Roboto Slab, Arial, sans-serif; | ||
197 | font-size: 1.2em; | ||
198 | } | ||
199 | |||
200 | #header h1 a:hover { | ||
201 | color: #fff; | ||
202 | } | ||
203 | |||
204 | .header-buttons { | ||
205 | text-align: right; | ||
206 | } | ||
207 | |||
208 | #linkcount { | ||
209 | color: #252525; | ||
210 | font-size: 0.8em; | ||
211 | } | ||
212 | |||
213 | #search { | ||
214 | margin-top: 5px; | ||
215 | } | ||
216 | |||
217 | #search input[type="text"] { | ||
218 | width: 250px; | ||
219 | color: #b0ddce; | ||
220 | } | ||
221 | |||
222 | /* because chrome */ | ||
223 | #search input[type="text"]::-webkit-input-placeholder { | ||
224 | color: #b0ddce; | ||
225 | } | ||
226 | |||
227 | #search button { | ||
228 | background: transparent; | ||
229 | border: none; | ||
230 | color: #b0ddce; | ||
231 | } | ||
232 | |||
233 | #search button:hover { | ||
234 | color: #fff; | ||
235 | } | ||
236 | |||
237 | @media screen and (min-width: 64em) { | ||
238 | #search .searchform { | ||
239 | margin-right: 25px; | ||
240 | text-align: right; | ||
241 | } | ||
242 | |||
243 | #search .tagfilter { | ||
244 | margin-left: 25px; | ||
245 | text-align: left; | ||
246 | } | ||
247 | } | ||
248 | |||
249 | |||
250 | |||
251 | #header-login-form { | ||
252 | height: 0; | ||
253 | transition: 0.3s; | ||
254 | } | ||
255 | |||
256 | #header-login-form.open { | ||
257 | display: block; | ||
258 | height: 30px; | ||
259 | padding: 5px 0; | ||
260 | } | ||
261 | |||
262 | #header-login-form input[type="text"], #header-login-form input[type="password"] { | ||
263 | width: 200px; | ||
264 | } | ||
265 | |||
266 | #header-login-form input, #header-login-form .remember-me { | ||
267 | transition: visibility 1s, opacity 1s; | ||
268 | visibility: hidden; | ||
269 | opacity: 0; | ||
270 | } | ||
271 | |||
272 | #header-login-form.open input, #header-login-form.open .remember-me { | ||
273 | visibility: visible; | ||
274 | opacity: 1; | ||
275 | } | ||
276 | |||
277 | .subheader-form { | ||
278 | text-align: center; | ||
279 | background: #1b926c; | ||
280 | display: block; | ||
281 | //transition: 0.3s; | ||
282 | } | ||
283 | |||
284 | @media screen and (min-width: 64em) { | ||
285 | |||
286 | .subheader-form.closed { | ||
287 | height: 0; | ||
288 | } | ||
289 | |||
290 | .subheader-form.open { | ||
291 | height: 30px; | ||
292 | padding: 5px 0; | ||
293 | } | ||
294 | |||
295 | .subheader-form * { | ||
296 | --transition: visibility 1s, opacity 1s; | ||
297 | } | ||
298 | |||
299 | .subheader-form.open * { | ||
300 | visibility: visible; | ||
301 | opacity: 1; | ||
302 | } | ||
303 | |||
304 | .subheader-form.closed * { | ||
305 | visibility: hidden; | ||
306 | opacity: 0; | ||
307 | } | ||
308 | } | ||
309 | |||
310 | .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { | ||
311 | margin: 0 0 5px 0; | ||
312 | padding: 5px 5px 3px 15px; | ||
313 | height: 20px; | ||
314 | width: 20%; | ||
315 | background: #1fa67a; | ||
316 | border: medium none currentColor; | ||
317 | border-radius: 25px; | ||
318 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | ||
319 | color: #b0ddce; | ||
320 | } | ||
321 | |||
322 | /* because chrome */ | ||
323 | .subheader-form input[type="text"]::-webkit-input-placeholder, | ||
324 | .subheader-form input[type="password"]::-webkit-input-placeholder | ||
325 | { | ||
326 | color: #b0ddce; | ||
327 | } | ||
328 | |||
329 | .subheader-form .remember-me { | ||
330 | display: inline-block; | ||
331 | width: auto; | ||
332 | padding: 5px 20px 3px 20px; | ||
333 | cursor: pointer; | ||
334 | } | ||
335 | |||
336 | .subheader-form .remember-me label, .subheader-form .remember-me input { | ||
337 | cursor: pointer; | ||
338 | } | ||
339 | |||
340 | .subheader-form input[type="submit"] { | ||
341 | display: inline-block; | ||
342 | margin: 0 0 5px 0; | ||
343 | height: 25px; | ||
344 | width: 100px; | ||
345 | background: #0C7653; | ||
346 | border: medium none currentColor; | ||
347 | border-radius: 25px; | ||
348 | box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E; | ||
349 | color: #b0ddce; | ||
350 | } | ||
351 | |||
352 | .new-version-message { | ||
353 | text-align: center; | ||
354 | } | ||
355 | |||
356 | .new-version-message a { | ||
357 | color: rgb(151, 96, 13); | ||
358 | font-weight: bold; | ||
359 | } | ||
360 | |||
361 | /** | ||
362 | * CONTENT - GENERAL | ||
363 | */ | ||
364 | #content { | ||
365 | position: relative; | ||
366 | z-index: 2; | ||
367 | background: url(../img/noise.png) #979797; | ||
368 | } | ||
369 | |||
370 | @media screen and (max-width: 64em) { | ||
371 | #content { | ||
372 | margin: 2.1em 0 0 0; | ||
373 | } | ||
374 | } | ||
375 | |||
376 | @media screen and (min-width: 64em) { | ||
377 | #content { | ||
378 | margin-top: 34px; | ||
379 | } | ||
380 | } | ||
381 | |||
382 | /** | ||
383 | * CONTENT - LINKLIST PAGING | ||
384 | * 64em -> lg | ||
385 | */ | ||
386 | .linklist-filters { | ||
387 | margin: 10px 0; | ||
388 | color: #252525; | ||
389 | font-size: 0.9em; | ||
390 | } | ||
391 | |||
392 | .linklist-filters a { | ||
393 | padding: 2px 5px; | ||
394 | text-decoration: none; | ||
395 | } | ||
396 | |||
397 | .linklist-filters .filter-off { | ||
398 | color: #252525; | ||
399 | background: #c8c8c8; | ||
400 | } | ||
401 | |||
402 | .linklist-filters .filter-on { | ||
403 | color: #b0ddce; | ||
404 | background: #1b926c; | ||
405 | } | ||
406 | |||
407 | .linklist-pages { | ||
408 | margin: 10px 0; | ||
409 | color: #252525; | ||
410 | text-align: center; | ||
411 | } | ||
412 | |||
413 | .linklist-pages a { | ||
414 | color: #252525; | ||
415 | text-decoration: none; | ||
416 | } | ||
417 | |||
418 | .linklist-pages a:hover { | ||
419 | color: #fff; | ||
420 | } | ||
421 | |||
422 | .linksperpage { | ||
423 | margin: 10px 0; | ||
424 | text-align: right; | ||
425 | color: #252525; | ||
426 | font-size: 0.9em; | ||
427 | } | ||
428 | |||
429 | .linksperpage a { | ||
430 | padding: 2px 5px; | ||
431 | text-decoration: none; | ||
432 | color: #252525; | ||
433 | background: #c8c8c8; | ||
434 | border: solid 1px #979797; | ||
435 | } | ||
436 | |||
437 | .linksperpage form { | ||
438 | display: inline; | ||
439 | margin: 0 10px 0 0; | ||
440 | } | ||
441 | |||
442 | .linksperpage input[type="text"] { | ||
443 | width: 28px; | ||
444 | height: 16px; | ||
445 | margin: 0; | ||
446 | padding: 3px 5px 3px 8px; | ||
447 | background: #c8c8c8; | ||
448 | border: medium none currentColor; | ||
449 | --border-radius: 25px; | ||
450 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | ||
451 | color: #252525; | ||
452 | font-size: 0.8em; | ||
453 | } | ||
454 | |||
455 | /** | ||
456 | * CONTENT - LINKLIST ITEMS | ||
457 | */ | ||
458 | .linklist-item { | ||
459 | margin: 15px 0; | ||
460 | background: #f5f5f5; | ||
461 | box-shadow: 2px 2px 0.5em #797979; | ||
462 | } | ||
463 | |||
464 | .linklist-item-title, .linklist-item-title h2 { | ||
465 | margin: 0; | ||
466 | word-wrap: break-word; | ||
467 | } | ||
468 | |||
469 | .linklist-item-title { | ||
470 | background: #20b988 url(../img/noise.png); | ||
471 | border-bottom: 1px solid #1b926c; | ||
472 | box-shadow: 1px 1px 0.2em #1b926c; | ||
473 | } | ||
474 | |||
475 | .linklist-item-title h2 { | ||
476 | padding: 3px 10px 0 10px; | ||
477 | line-height: 25px; | ||
478 | } | ||
479 | |||
480 | .linklist-item-title a { | ||
481 | font-size: 0.7em; | ||
482 | color: #d0fff0; | ||
483 | text-decoration: none; | ||
484 | vertical-align: middle; | ||
485 | font-family: Roboto Slab, Arial, sans-serif; | ||
486 | } | ||
487 | |||
488 | .linklist-item-title .linklist-link:visited { | ||
489 | color: #ddd; | ||
490 | } | ||
491 | |||
492 | .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{ | ||
493 | color: #fff; | ||
494 | } | ||
495 | |||
496 | |||
497 | .linklist-item-title .label-private { | ||
498 | border: solid 1px #d0fff0; | ||
499 | font-family: Arial, sans-serif; | ||
500 | font-size: 0.65em; | ||
501 | } | ||
502 | |||
503 | .linklist-item-title .fold-button { | ||
504 | display: none; | ||
505 | } | ||
506 | |||
507 | .linklist-item-editbuttons { | ||
508 | float: right; | ||
509 | padding: 5px; | ||
510 | } | ||
511 | |||
512 | .linklist-item-editbuttons a { | ||
513 | font-size: 1em; | ||
514 | } | ||
515 | |||
516 | .linklist-item-description { | ||
517 | padding: 10px; | ||
518 | font-family: Roboto Slab, Arial, sans-serif; | ||
519 | word-wrap: break-word; | ||
520 | } | ||
521 | |||
522 | .linklist-item-description a { | ||
523 | text-decoration: none; | ||
524 | color: #1b926c; | ||
525 | } | ||
526 | |||
527 | .linklist-item-description a:hover { | ||
528 | text-shadow: 1px 1px #ddd; | ||
529 | } | ||
530 | |||
531 | .linklist-item-description a:visited { | ||
532 | color: #20b988; | ||
533 | } | ||
534 | |||
535 | .linklist-item-thumbnail { | ||
536 | margin-top: 10px; | ||
537 | padding: 10px; | ||
538 | float: left; | ||
539 | } | ||
540 | |||
541 | .linklist-item-infos { | ||
542 | padding: 5px 5px 0 5px; | ||
543 | background: #ddd url(../img/noise.png); | ||
544 | border-top: 1px solid #989898; | ||
545 | box-shadow: 1px -1px 0.2em #989898; | ||
546 | color: #252525; | ||
547 | } | ||
548 | |||
549 | .linklist-item-infos a { | ||
550 | color: #505050; | ||
551 | text-decoration: none; | ||
552 | } | ||
553 | |||
554 | .linklist-item-infos a:hover { | ||
555 | color: #000; | ||
556 | } | ||
557 | |||
558 | .linklist-item-infos .linklist-item-tags { | ||
559 | margin: 0 0 5px 0; | ||
560 | font-size: 0.8em; | ||
561 | } | ||
562 | |||
563 | .linklist-item-infos .linklist-item-infos .label-tag { | ||
564 | border: 1px solid #505050; | ||
565 | font-size: 0.9em; | ||
566 | } | ||
567 | |||
568 | .linklist-item-infos .label-tag:hover { | ||
569 | border: 1px solid #000; | ||
570 | } | ||
571 | |||
572 | .linklist-item-infos-dateblock { | ||
573 | font-size: 0.9em; | ||
574 | } | ||
575 | |||
576 | .linklist-plugin-icon { | ||
577 | width: 13px; | ||
578 | height: 13px; | ||
579 | } | ||
580 | |||
581 | .linklist-item-infos-url { | ||
582 | text-align: right; | ||
583 | white-space: nowrap; | ||
584 | overflow: hidden; | ||
585 | text-overflow: ellipsis; | ||
586 | font-size: 0.8em; | ||
587 | } | ||
588 | |||
589 | /** 64em -> lg **/ | ||
590 | @media screen and (max-width: 64em) { | ||
591 | .linklist-item-infos-url { | ||
592 | text-align: left; | ||
593 | } | ||
594 | } | ||
595 | |||
596 | /** | ||
597 | * Footer | ||
598 | */ | ||
599 | #footer { | ||
600 | margin: 20px 0; | ||
601 | padding: 5px; | ||
602 | text-align: center; | ||
603 | color: #252525; | ||
604 | } | ||
605 | |||
606 | #footer:before { | ||
607 | display: block; | ||
608 | content:""; | ||
609 | background: linear-gradient(to right, #949393, #252525, #949393); | ||
610 | height: 1px; | ||
611 | width: 80%; | ||
612 | margin: 10px auto; | ||
613 | } | ||
614 | |||
615 | #footer a { | ||
616 | color: #252525; | ||
617 | } | ||
618 | |||
619 | /** | ||
620 | * PAGE FORM | ||
621 | */ | ||
622 | .page-form { | ||
623 | margin: 20px 0 0 0; | ||
624 | background: url(../img/noise.png) #1fa67a; | ||
625 | border-radius: 5px; | ||
626 | box-shadow: 1px 1px 2px #797979; | ||
627 | color: #b0ddce; | ||
628 | } | ||
629 | |||
630 | .page-form .window-title { | ||
631 | margin: 0 0 10px 0; | ||
632 | padding: 10px 0; | ||
633 | width: 100%; | ||
634 | color: #b0ddce; | ||
635 | background: #1b926c; | ||
636 | text-align: center; | ||
637 | border-radius: 5px 5px 0 0; | ||
638 | border-bottom: 1px solid #797979; | ||
639 | } | ||
640 | |||
641 | .page-form .window-subtitle { | ||
642 | text-align: center; | ||
643 | } | ||
644 | |||
645 | .page-form a { | ||
646 | color: #b0ddce; | ||
647 | font-weight: bold; | ||
648 | } | ||
649 | |||
650 | .page-form input[type="text"], | ||
651 | .page-form input[type="password"], | ||
652 | .page-form textarea { | ||
653 | margin: 10px 0; | ||
654 | padding: 5px 5px 3px 15px; | ||
655 | height: 30px; | ||
656 | width: 80%; | ||
657 | background: #1b926c; | ||
658 | border: medium none currentColor; | ||
659 | border-radius: 25px; | ||
660 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | ||
661 | color: #b0ddce; | ||
662 | } | ||
663 | |||
664 | .page-form textarea { | ||
665 | height: 240px; | ||
666 | padding: 15px 5px 3px 15px; | ||
667 | resize: vertical; | ||
668 | overflow-y: auto; | ||
669 | word-wrap:break-word | ||
670 | } | ||
671 | |||
672 | /* because chrome */ | ||
673 | .page-form input[type="text"]::-webkit-input-placeholder, | ||
674 | .page-form input[type="password"]::-webkit-input-placeholder { | ||
675 | color: #b0ddce; | ||
676 | } | ||
677 | |||
678 | .page-form input[type="submit"] { | ||
679 | margin: 15px 5px; | ||
680 | height: 35px; | ||
681 | width: 150px; | ||
682 | background: #1b926c; | ||
683 | border: medium none currentColor; | ||
684 | border-radius: 25px; | ||
685 | box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653; | ||
686 | font-size: 1.2em; | ||
687 | font-weight: bold; | ||
688 | color: #b0ddce; | ||
689 | } | ||
690 | |||
691 | .page-form select { | ||
692 | color: black; | ||
693 | } | ||
694 | |||
695 | /** | ||
696 | * PAGE FORM - LIGHT | ||
697 | */ | ||
698 | .page-form-light div, .page-form-light p { | ||
699 | text-align: center; | ||
700 | } | ||
701 | |||
702 | /** | ||
703 | * PAGE FORM - COMPLETE | ||
704 | */ | ||
705 | .page-form-complete { | ||
706 | #background: #ddd; | ||
707 | } | ||
708 | |||
709 | .page-form-complete div, .page-form-complete p { | ||
710 | color: #b0ddce; | ||
711 | } | ||
712 | |||
713 | .page-form-complete .form-label, .page-form-complete .form-input { | ||
714 | position: relative; | ||
715 | height: 60px; | ||
716 | } | ||
717 | |||
718 | .page-form-complete .form-label label, | ||
719 | .page-form-complete .form-input input, | ||
720 | .page-form-complete .timezone { | ||
721 | position: absolute; | ||
722 | top: 50%; | ||
723 | transform: translateY(-50%); | ||
724 | } | ||
725 | |||
726 | .page-form-complete .form-label label { | ||
727 | text-align: right; | ||
728 | right: 0; | ||
729 | padding: 0 20px; | ||
730 | } | ||
731 | |||
732 | .page-form-complete .label-name { | ||
733 | font-weight: bold; | ||
734 | } | ||
735 | |||
736 | .page-form-complete .label-desc { | ||
737 | font-size: 0.8em; | ||
738 | } | ||
739 | |||
740 | .page-form-complete input[type="text"], | ||
741 | .page-form-complete input[type="password"], | ||
742 | .page-form-complete textarea { | ||
743 | margin: 0; | ||
744 | } | ||
745 | |||
746 | .page-form section { | ||
747 | margin-top: 20px; | ||
748 | } | ||
749 | |||
750 | |||
751 | .page-form table { | ||
752 | margin: auto; | ||
753 | width: 90%; | ||
754 | } | ||
755 | |||
756 | .page-form table .order { | ||
757 | text-decoration: none; | ||
758 | } | ||
759 | |||
760 | .page-form table, .page-form th, .page-form td { | ||
761 | border-width: 1px 0; | ||
762 | border-style: solid; | ||
763 | border-color: #b0ddce; | ||
764 | } | ||
765 | |||
766 | .page-form th, .page-form td { | ||
767 | padding: 5px; | ||
768 | |||
769 | } | ||
770 | |||
771 | /* Awesomeplete fix */ | ||
772 | .page-form .awesomplete { | ||
773 | width: 80%; | ||
774 | } | ||
775 | |||
776 | .page-form .awesomplete input { | ||
777 | width: 100%; | ||
778 | } | ||
779 | |||
780 | .page-form div.awesomplete > ul { | ||
781 | color: black; | ||
782 | } | ||
783 | |||
784 | @media screen and (max-width: 64em) { | ||
785 | .page-form-complete .form-label { | ||
786 | height: inherit; | ||
787 | } | ||
788 | |||
789 | .page-form-complete .form-label label, | ||
790 | .page-form-complete .form-input input, | ||
791 | .page-form-complete .timezone { | ||
792 | position: inherit; | ||
793 | top: inherit; | ||
794 | transform: translateY(0); | ||
795 | } | ||
796 | |||
797 | .page-form-complete .form-input input[type="checkbox"] { | ||
798 | position: absolute; | ||
799 | top: 50%; | ||
800 | right: 50%; | ||
801 | transform: translateY(-50%); | ||
802 | } | ||
803 | |||
804 | .page-form-complete .form-input { | ||
805 | text-align: center; | ||
806 | } | ||
807 | |||
808 | .page-form-complete .form-label label { | ||
809 | display: block; | ||
810 | text-align: left; | ||
811 | margin: 10px 0 0 0; | ||
812 | } | ||
813 | |||
814 | .timezone-continent:after { | ||
815 | content:"\a\a"; | ||
816 | white-space: pre; | ||
817 | } | ||
818 | |||
819 | .page-form-complete .radio-buttons { | ||
820 | text-align: left; | ||
821 | padding: 5px 15px; | ||
822 | } | ||
823 | } | ||
824 | |||
825 | /** | ||
826 | * Page visitor (page form extended) | ||
827 | */ | ||
828 | .page-visitor { | ||
829 | background: url(../img/noise.png) #fff; | ||
830 | color: #000; | ||
831 | } | ||
832 | |||
833 | #page404 { | ||
834 | color: #3f3f3f; | ||
835 | } | ||
836 | |||
837 | /** | ||
838 | * LOGIN | ||
839 | */ | ||
840 | #login-form .remember-me { | ||
841 | margin: 5px 0; | ||
842 | color: #b0ddce; | ||
843 | font-weight: bold; | ||
844 | } | ||
845 | |||
846 | /** | ||
847 | * CONTENT - LINKLIST ITEMS | ||
848 | */ | ||
849 | .linklist-item { | ||
850 | margin: 15px 0; | ||
851 | background: #f5f5f5; | ||
852 | box-shadow: 2px 2px 0.5em #797979; | ||
853 | } | ||
854 | |||
855 | .linklist-item-title, .linklist-item-title h2 { | ||
856 | margin: 0; | ||
857 | } | ||
858 | |||
859 | .linklist-item-title { | ||
860 | background: #20b988 url(../img/noise.png); | ||
861 | border-bottom: 1px solid #1b926c; | ||
862 | box-shadow: 1px 1px 0.2em #1b926c; | ||
863 | } | ||
864 | |||
865 | .linklist-item-title h2 { | ||
866 | padding: 3px 10px 0 10px; | ||
867 | line-height: 25px; | ||
868 | } | ||
869 | |||
870 | .linklist-item-title a { | ||
871 | font-size: 0.7em; | ||
872 | color: #d0fff0; | ||
873 | text-decoration: none; | ||
874 | vertical-align: middle; | ||
875 | font-family: Roboto Slab, Arial, sans-serif; | ||
876 | } | ||
877 | |||
878 | .linklist-item-title .linklist-link:visited { | ||
879 | color: #ddd; | ||
880 | } | ||
881 | |||
882 | .linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{ | ||
883 | color: #fff; | ||
884 | } | ||
885 | |||
886 | .linklist-item-title .label-private { | ||
887 | border: solid 1px #d0fff0; | ||
888 | font-family: Arial, sans-serif; | ||
889 | font-size: 0.65em; | ||
890 | } | ||
891 | |||
892 | .linklist-item-title .fold-button { | ||
893 | display: none; | ||
894 | } | ||
895 | |||
896 | .linklist-item-editbuttons { | ||
897 | float: right; | ||
898 | padding: 5px; | ||
899 | } | ||
900 | |||
901 | .linklist-item-editbuttons a { | ||
902 | font-size: 1em; | ||
903 | } | ||
904 | |||
905 | .linklist-item-description { | ||
906 | padding: 10px; | ||
907 | font-family: Roboto Slab, Arial, sans-serif; | ||
908 | } | ||
909 | |||
910 | .linklist-item-description a { | ||
911 | text-decoration: none; | ||
912 | color: #1b926c; | ||
913 | } | ||
914 | |||
915 | .linklist-item-description a:hover { | ||
916 | text-shadow: 1px 1px #ddd; | ||
917 | } | ||
918 | |||
919 | .linklist-item-description a:visited { | ||
920 | color: #20b988; | ||
921 | } | ||
922 | |||
923 | .linklist-item-infos { | ||
924 | padding: 5px; | ||
925 | background: #ddd url(../img/noise.png); | ||
926 | border-top: 1px solid #989898; | ||
927 | box-shadow: 1px -1px 0.2em #989898; | ||
928 | color: #252525; | ||
929 | font-size: 0.8em; | ||
930 | } | ||
931 | |||
932 | .linklist-item-infos a { | ||
933 | color: #505050; | ||
934 | text-decoration: none; | ||
935 | } | ||
936 | |||
937 | .linklist-item-infos a:hover { | ||
938 | color: #000; | ||
939 | } | ||
940 | |||
941 | .linklist-item-tags { | ||
942 | margin: 0 0 5px 0; | ||
943 | } | ||
944 | |||
945 | .label-tag { | ||
946 | border: 1px solid #505050; | ||
947 | font-size: 1em; | ||
948 | } | ||
949 | |||
950 | .label-tag:hover { | ||
951 | border: 1px solid #000; | ||
952 | } | ||
953 | |||
954 | .linklist-plugin-icon { | ||
955 | width: 13px; | ||
956 | height: 13px; | ||
957 | } | ||
958 | |||
959 | .linklist-item-infos-url { | ||
960 | text-align: right; | ||
961 | white-space: nowrap; | ||
962 | overflow: hidden; | ||
963 | text-overflow: ellipsis; | ||
964 | } | ||
965 | |||
966 | /** | ||
967 | * Search results | ||
968 | */ | ||
969 | .search-result a { | ||
970 | color: white; | ||
971 | text-decoration: none; | ||
972 | } | ||
973 | |||
974 | .search-result .label-tag { | ||
975 | border-color: white; | ||
976 | } | ||
977 | |||
978 | .search-result .label-tag .remove { | ||
979 | border-left: white 1px solid; | ||
980 | padding: 0 0 0 5px; | ||
981 | margin: 0 0 0 5px; | ||
982 | } | ||
983 | |||
984 | /** | ||
985 | * TOOLS | ||
986 | */ | ||
987 | .tools-item { | ||
988 | margin: 10px 0; | ||
989 | } | ||
990 | |||
991 | /** | ||
992 | * PLUGIN ADMIN | ||
993 | */ | ||
994 | #pluginform .mobile-row { | ||
995 | font-size: 0.9em; | ||
996 | } | ||
997 | |||
998 | #pluginform .more { | ||
999 | margin-top: 10px; | ||
1000 | } | ||
1001 | |||
1002 | @media screen and (max-width: 64em) { | ||
1003 | #pluginform .main-row, #pluginform .main-row td { | ||
1004 | border-bottom-style: none; | ||
1005 | } | ||
1006 | |||
1007 | #pluginform .mobile-row, #pluginform .mobile-row td { | ||
1008 | border-top-style: none; | ||
1009 | } | ||
1010 | } | ||
1011 | |||
1012 | |||
1013 | /** | ||
1014 | * IMPORT | ||
1015 | */ | ||
1016 | #import-field { | ||
1017 | margin: 15px 0; | ||
1018 | } | ||
1019 | |||
1020 | /** | ||
1021 | * TAG CLOUD | ||
1022 | */ | ||
1023 | #cloudtag { | ||
1024 | padding: 10px; | ||
1025 | text-align: center; | ||
1026 | } | ||
1027 | |||
1028 | #cloudtag, #cloudtag a { | ||
1029 | color: #000; | ||
1030 | text-decoration: none; | ||
1031 | } | ||
1032 | |||
1033 | #cloudtag .count { | ||
1034 | color: #7f7f7f; | ||
1035 | } | ||
1036 | |||
1037 | /** | ||
1038 | * Picture wall CSS | ||
1039 | */ | ||
1040 | #picwall_container { | ||
1041 | margin: 0 10px 10px 10px; | ||
1042 | color: #fff; | ||
1043 | background-color: #000; | ||
1044 | clear: both; | ||
1045 | } | ||
1046 | |||
1047 | .picwall_pictureframe { | ||
1048 | background-color: #000; | ||
1049 | z-index: 5; | ||
1050 | position: relative; | ||
1051 | display: table-cell; | ||
1052 | vertical-align: middle; | ||
1053 | width: 90px; | ||
1054 | height: 90px; | ||
1055 | overflow: hidden; | ||
1056 | text-align: center; | ||
1057 | float: left; | ||
1058 | } | ||
1059 | |||
1060 | .b-lazy { | ||
1061 | -webkit-transition: opacity 500ms ease-in-out; | ||
1062 | -moz-transition: opacity 500ms ease-in-out; | ||
1063 | -o-transition: opacity 500ms ease-in-out; | ||
1064 | transition: opacity 500ms ease-in-out; | ||
1065 | opacity: 0; | ||
1066 | } | ||
1067 | .b-lazy.b-loaded { | ||
1068 | opacity: 1; | ||
1069 | } | ||
1070 | |||
1071 | .picwall_pictureframe img { | ||
1072 | max-width: 100%; | ||
1073 | height: auto; | ||
1074 | color: transparent; | ||
1075 | } /* Adapt the width of the image */ | ||
1076 | |||
1077 | .picwall_pictureframe a { | ||
1078 | text-decoration: none; | ||
1079 | } | ||
1080 | |||
1081 | /* CSS to show title when hovering an image - no javascript required. */ | ||
1082 | .picwall_pictureframe span.info { | ||
1083 | display: none; | ||
1084 | } | ||
1085 | |||
1086 | .picwall_pictureframe:hover span.info { | ||
1087 | display: block; | ||
1088 | position: absolute; | ||
1089 | top: 0; | ||
1090 | left: 0; | ||
1091 | width: 90px; | ||
1092 | font-weight: bold; | ||
1093 | font-size: 8pt; | ||
1094 | color: #fff; | ||
1095 | text-align: left; | ||
1096 | background-color: transparent; | ||
1097 | background-color: rgba(0, 0, 0, 0.4); | ||
1098 | /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ | ||
1099 | filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); | ||
1100 | /* IE6IE9 */ | ||
1101 | text-shadow: 2px 2px 1px #000000; | ||
1102 | } | ||
1103 | |||
1104 | /** | ||
1105 | * DAILY | ||
1106 | */ | ||
1107 | .daily-desc { | ||
1108 | color: #7f7f7f; | ||
1109 | font-size: 0.8em; | ||
1110 | } | ||
1111 | |||
1112 | .daily-about a { | ||
1113 | color: #343434; | ||
1114 | text-decoration: none; | ||
1115 | } | ||
1116 | |||
1117 | .daily-about a:hover { | ||
1118 | color: #7f7f7f; | ||
1119 | } | ||
1120 | |||
1121 | .daily-about h3:before, .daily-about h3:after { | ||
1122 | display: block; | ||
1123 | content:""; | ||
1124 | background: linear-gradient(to right, #d5d4d4, #252525, #d5d4d4); | ||
1125 | height: 1px; | ||
1126 | width: 90%; | ||
1127 | margin: 10px auto; | ||
1128 | } | ||
1129 | |||
1130 | .daily-entry .daily-entry-title:after { | ||
1131 | display: block; | ||
1132 | content:""; | ||
1133 | background: linear-gradient(to right, #fff, #515151, #fff); | ||
1134 | height: 1px; | ||
1135 | width: 70%; | ||
1136 | margin: 5px auto; | ||
1137 | } | ||
1138 | |||
1139 | .daily-entry .daily-entry-title { | ||
1140 | margin: 10px 0 0 0; | ||
1141 | } | ||
1142 | |||
1143 | .daily-entry .daily-entry-title a { | ||
1144 | color: #000; | ||
1145 | text-decoration: none; | ||
1146 | } | ||
1147 | |||
1148 | .daily-entry .daily-entry-description { | ||
1149 | padding: 5px 5px 0 5px; | ||
1150 | font-size: 0.9em; | ||
1151 | text-align: justify; | ||
1152 | } | ||
1153 | |||
1154 | .daily-entry .daily-entry-tags { | ||
1155 | padding: 0 5px 5px 5px; | ||
1156 | font-size: 0.8em; | ||
1157 | } | ||
1158 | |||
1159 | .daily-entry-thumbnail { | ||
1160 | float: left; | ||
1161 | margin: 15px 5px 5px 5px; | ||
1162 | } | ||
1163 | |||
1164 | .daily-entry-description a { | ||
1165 | text-decoration: none; | ||
1166 | color: #1b926c; | ||
1167 | } | ||
1168 | |||
1169 | .daily-entry-description a:hover { | ||
1170 | text-shadow: 1px 1px #ddd; | ||
1171 | } | ||
1172 | |||
1173 | .daily-entry-description a:visited { | ||
1174 | color: #20b988; | ||
1175 | } | ||