diff options
Diffstat (limited to 'tpl/default/css')
-rw-r--r-- | tpl/default/css/shaarli.css | 130 |
1 files changed, 117 insertions, 13 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index 9a075574..14fddc4b 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css | |||
@@ -13,6 +13,10 @@ body { | |||
13 | clear: both; | 13 | clear: both; |
14 | } | 14 | } |
15 | 15 | ||
16 | .center { | ||
17 | text-align: center; | ||
18 | } | ||
19 | |||
16 | .label { | 20 | .label { |
17 | display: inline-block; | 21 | display: inline-block; |
18 | padding: .25em .4em; | 22 | padding: .25em .4em; |
@@ -63,6 +67,10 @@ pre { | |||
63 | .pure-u-xl-visible { display: inline-block !important; } | 67 | .pure-u-xl-visible { display: inline-block !important; } |
64 | } | 68 | } |
65 | 69 | ||
70 | .pure-g [class*="pure-u"]{ | ||
71 | font-family: Roboto Slab, Arial, sans-serif; | ||
72 | } | ||
73 | |||
66 | /** | 74 | /** |
67 | * Make pure-extras alert closable. | 75 | * Make pure-extras alert closable. |
68 | */ | 76 | */ |
@@ -242,15 +250,20 @@ pre { | |||
242 | } | 250 | } |
243 | 251 | ||
244 | #header-login-form { | 252 | #header-login-form { |
245 | display: none; | 253 | height: 0; |
246 | height: 30px; | ||
247 | padding: 5px 0; | ||
248 | text-align: center; | 254 | text-align: center; |
249 | background: #1b926c; | 255 | background: #1b926c; |
256 | transition: 0.3s; | ||
257 | } | ||
258 | |||
259 | #header-login-form.open { | ||
260 | display: block; | ||
261 | height: 30px; | ||
262 | padding: 5px 0; | ||
250 | box-shadow: 0 1px 1px 1px #797979; | 263 | box-shadow: 0 1px 1px 1px #797979; |
251 | } | 264 | } |
252 | 265 | ||
253 | #header-login-form input[type="text"], #header-login-form input[type="password"] { | 266 | #header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me { |
254 | margin: 0 0 5px 0; | 267 | margin: 0 0 5px 0; |
255 | padding: 5px 5px 3px 15px; | 268 | padding: 5px 5px 3px 15px; |
256 | height: 20px; | 269 | height: 20px; |
@@ -269,6 +282,17 @@ pre { | |||
269 | color: #b0ddce; | 282 | color: #b0ddce; |
270 | } | 283 | } |
271 | 284 | ||
285 | #header-login-form .remember-me { | ||
286 | display: inline-block; | ||
287 | width: auto; | ||
288 | padding: 5px 20px 3px 20px; | ||
289 | cursor: pointer; | ||
290 | } | ||
291 | |||
292 | #header-login-form .remember-me label, #header-login-form .remember-me input { | ||
293 | cursor: pointer; | ||
294 | } | ||
295 | |||
272 | #header-login-form input[type="submit"] { | 296 | #header-login-form input[type="submit"] { |
273 | display: inline-block; | 297 | display: inline-block; |
274 | margin: 0 0 5px 0; | 298 | margin: 0 0 5px 0; |
@@ -281,6 +305,17 @@ pre { | |||
281 | color: #b0ddce; | 305 | color: #b0ddce; |
282 | } | 306 | } |
283 | 307 | ||
308 | #header-login-form input, #header-login-form .remember-me { | ||
309 | transition: visibility 1s, opacity 1s; | ||
310 | visibility: hidden; | ||
311 | opacity: 0; | ||
312 | } | ||
313 | |||
314 | #header-login-form.open input, #header-login-form.open .remember-me { | ||
315 | visibility: visible; | ||
316 | opacity: 1; | ||
317 | } | ||
318 | |||
284 | .new-version-message { | 319 | .new-version-message { |
285 | text-align: center; | 320 | text-align: center; |
286 | } | 321 | } |
@@ -295,30 +330,31 @@ pre { | |||
295 | */ | 330 | */ |
296 | #content { | 331 | #content { |
297 | position: relative; | 332 | position: relative; |
298 | /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ | ||
299 | margin-top: -4px; | ||
300 | /* Hack-ish way to only shadow the top part. */ | 333 | /* Hack-ish way to only shadow the top part. */ |
301 | box-shadow: 0 -20px 20px -20px #797979; | 334 | box-shadow: 0 -20px 20px -20px #797979; |
302 | z-index: 2; | 335 | z-index: 2; |
303 | background: url(../img/noise.png) #979797; | 336 | background: url(../img/noise.png) #979797; |
304 | } | 337 | } |
305 | 338 | ||
306 | /** | ||
307 | * CONTENT - LINKLIST PAGING | ||
308 | * 64em -> lg | ||
309 | */ | ||
310 | @media screen and (max-width: 64em) { | 339 | @media screen and (max-width: 64em) { |
311 | .linklist-paging { | 340 | #content { |
312 | margin: 2.1em 0 0 0; | 341 | margin: 2.1em 0 0 0; |
313 | } | 342 | } |
314 | } | 343 | } |
315 | 344 | ||
316 | @media screen and (min-width: 64em) { | 345 | @media screen and (min-width: 64em) { |
317 | .linklist-paging { | 346 | #content { |
318 | margin: 0; | 347 | /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ |
348 | margin-top: -4px; | ||
319 | } | 349 | } |
320 | } | 350 | } |
321 | 351 | ||
352 | /** | ||
353 | * CONTENT - LINKLIST PAGING | ||
354 | * 64em -> lg | ||
355 | */ | ||
356 | |||
357 | |||
322 | .linklist-filters { | 358 | .linklist-filters { |
323 | margin: 10px 0; | 359 | margin: 10px 0; |
324 | color: #252525; | 360 | color: #252525; |
@@ -399,6 +435,7 @@ pre { | |||
399 | 435 | ||
400 | .linklist-item-title, .linklist-item-title h2 { | 436 | .linklist-item-title, .linklist-item-title h2 { |
401 | margin: 0; | 437 | margin: 0; |
438 | word-wrap: break-word; | ||
402 | } | 439 | } |
403 | 440 | ||
404 | .linklist-item-title { | 441 | .linklist-item-title { |
@@ -451,6 +488,7 @@ pre { | |||
451 | .linklist-item-description { | 488 | .linklist-item-description { |
452 | padding: 10px; | 489 | padding: 10px; |
453 | font-family: Roboto Slab, Arial, sans-serif; | 490 | font-family: Roboto Slab, Arial, sans-serif; |
491 | word-wrap: break-word; | ||
454 | } | 492 | } |
455 | 493 | ||
456 | .linklist-item-description a { | 494 | .linklist-item-description a { |
@@ -548,7 +586,73 @@ pre { | |||
548 | #footer a { | 586 | #footer a { |
549 | color: #252525; | 587 | color: #252525; |
550 | } | 588 | } |
589 | |||
551 | /** | 590 | /** |
591 | * Login page | ||
592 | */ | ||
593 | #login-form { | ||
594 | margin: 20px 0 0 0; | ||
595 | background: url(../img/noise.png) #1fa67a; | ||
596 | border-radius: 5px; | ||
597 | box-shadow: 1px 1px 2px #797979; | ||
598 | } | ||
599 | |||
600 | #login-form h2 { | ||
601 | margin: 0 0 10px 0; | ||
602 | padding: 10px 0; | ||
603 | width: 100%; | ||
604 | color: #b0ddce; | ||
605 | background: #1b926c; | ||
606 | text-align: center; | ||
607 | border-radius: 5px 5px 0 0; | ||
608 | border-bottom: 1px solid #797979; | ||
609 | } | ||
610 | |||
611 | #login-form div { | ||
612 | width: 100%; | ||
613 | text-align: center; | ||
614 | } | ||
615 | |||
616 | #login-form input[type="text"], #login-form input[type="password"] { | ||
617 | margin: 10px 0; | ||
618 | padding: 5px 5px 3px 15px; | ||
619 | height: 30px; | ||
620 | width: 80%; | ||
621 | background: #1b926c; | ||
622 | border: medium none currentColor; | ||
623 | border-radius: 25px; | ||
624 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | ||
625 | color: #b0ddce; | ||
626 | } | ||
627 | |||
628 | /* because chrome */ | ||
629 | #login-form input[type="text"]::-webkit-input-placeholder, | ||
630 | #login-form input[type="password"]::-webkit-input-placeholder { | ||
631 | color: #b0ddce; | ||
632 | } | ||
633 | |||
634 | #login-form .remember-me { | ||
635 | margin: 5px 0; | ||
636 | color: #b0ddce; | ||
637 | font-weight: bold; | ||
638 | } | ||
639 | |||
640 | #login-form input[type="submit"] { | ||
641 | margin: 10px 0; | ||
642 | height: 35px; | ||
643 | width: 150px; | ||
644 | background: #1b926c; | ||
645 | border: medium none currentColor; | ||
646 | border-radius: 25px; | ||
647 | box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653; | ||
648 | font-size: 1.2em; | ||
649 | font-weight: bold; | ||
650 | color: #b0ddce; | ||
651 | } | ||
652 | |||
653 | #page404 { | ||
654 | color: #3f3f3f; | ||
655 | }/** | ||
552 | * CONTENT - LINKLIST ITEMS | 656 | * CONTENT - LINKLIST ITEMS |
553 | */ | 657 | */ |
554 | .linklist-item { | 658 | .linklist-item { |