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