diff options
author | ArthurHoaro <arthur@hoa.ro> | 2017-01-06 14:50:09 +0100 |
---|---|---|
committer | ArthurHoaro <arthur@hoa.ro> | 2017-01-06 14:50:09 +0100 |
commit | b057607f1b8a242c5c0325ceaf7c963632b960aa (patch) | |
tree | ffcec7ca97bc9edc84d2a79d5d7cb9f37200cc50 /tpl/default/css | |
parent | 2bbf5d03ca47c9ce5bc88aabae6096f90f646cab (diff) | |
download | Shaarli-b057607f1b8a242c5c0325ceaf7c963632b960aa.tar.gz Shaarli-b057607f1b8a242c5c0325ceaf7c963632b960aa.tar.zst Shaarli-b057607f1b8a242c5c0325ceaf7c963632b960aa.zip |
A lot of minor improvements, cleanup, narrow mobile side blank spaces
Diffstat (limited to 'tpl/default/css')
-rw-r--r-- | tpl/default/css/shaarli.css | 209 |
1 files changed, 161 insertions, 48 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index ae0d5807..fafe7351 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css | |||
@@ -175,46 +175,70 @@ pre { | |||
175 | font-size: 0.8em; | 175 | font-size: 0.8em; |
176 | } | 176 | } |
177 | 177 | ||
178 | #search { | 178 | #search, #search-linklist { |
179 | position: fixed; | 179 | text-align: center; |
180 | width: 100%; | 180 | width: 100%; |
181 | } | 181 | } |
182 | 182 | ||
183 | #search input[type="text"] { | 183 | #search input[type="text"], #search-linklist input[type="text"] { |
184 | width: 250px; | 184 | padding: 0 5px; |
185 | height: 30px; | ||
186 | width: 260px; | ||
187 | background: #f5f5f5; | ||
188 | border: medium none currentColor; | ||
189 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; | ||
190 | border-radius: 2px; | ||
185 | color: #252525; | 191 | color: #252525; |
186 | } | 192 | } |
187 | 193 | ||
188 | /* because chrome */ | 194 | /* because chrome */ |
189 | #search input[type="text"]::-webkit-input-placeholder { | 195 | #search input[type="text"]::-webkit-input-placeholder, |
190 | color: #252525; | 196 | #search-linklist input[type="text"]::-webkit-input-placeholder { |
197 | color: #777777; | ||
191 | } | 198 | } |
192 | 199 | ||
193 | #search button { | 200 | #search button, |
201 | #search-linklist button { | ||
194 | background: transparent; | 202 | background: transparent; |
195 | border: none; | 203 | border: none; |
204 | } | ||
205 | |||
206 | #search button { | ||
196 | color: #f5f5f5; | 207 | color: #f5f5f5; |
197 | } | 208 | } |
198 | 209 | ||
210 | #search-linklist button { | ||
211 | color: #252525; | ||
212 | } | ||
213 | |||
199 | #search button:hover { | 214 | #search button:hover { |
200 | color: #fff; | 215 | color: #fff; |
201 | } | 216 | } |
202 | 217 | ||
218 | #search-linklist button:hover { | ||
219 | color: #000; | ||
220 | } | ||
221 | |||
222 | #search-linklist { | ||
223 | padding: 5px 0; | ||
224 | } | ||
225 | |||
203 | @media screen and (min-width: 64em) { | 226 | @media screen and (min-width: 64em) { |
204 | #search .searchform { | 227 | #search .searchform, |
228 | #search-linklist .searchform { | ||
205 | margin-right: 25px; | 229 | margin-right: 25px; |
206 | text-align: right; | 230 | text-align: right; |
207 | } | 231 | } |
208 | 232 | ||
209 | #search .tagfilter { | 233 | #search .tagfilter, |
234 | #search-linklist .tagfilter { | ||
210 | margin-left: 25px; | 235 | margin-left: 25px; |
211 | text-align: left; | 236 | text-align: left; |
212 | } | 237 | } |
213 | } | 238 | } |
214 | @media screen and (max-width: 64em) { | 239 | @media screen and (max-width: 64em) { |
215 | #search { | 240 | #search, #search * { |
216 | position: relative; | 241 | visibility: hidden; |
217 | height: 60px; | ||
218 | } | 242 | } |
219 | } | 243 | } |
220 | 244 | ||
@@ -239,11 +263,6 @@ pre { | |||
239 | visibility: visible; | 263 | visibility: visible; |
240 | } | 264 | } |
241 | } | 265 | } |
242 | @media screen and (max-width: 64em) { | ||
243 | #search.subheader-form, .subheader-form.open * { | ||
244 | visibility: visible; | ||
245 | } | ||
246 | } | ||
247 | 266 | ||
248 | .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { | 267 | .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { |
249 | margin: 0 0 5px 0; | 268 | margin: 0 0 5px 0; |
@@ -252,7 +271,7 @@ pre { | |||
252 | width: 20%; | 271 | width: 20%; |
253 | background: #f5f5f5; | 272 | background: #f5f5f5; |
254 | border: medium none currentColor; | 273 | border: medium none currentColor; |
255 | border-radius: 5px; | 274 | border-radius: 2px; |
256 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | 275 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; |
257 | color: #252525; | 276 | color: #252525; |
258 | } | 277 | } |
@@ -316,6 +335,46 @@ pre { | |||
316 | } | 335 | } |
317 | 336 | ||
318 | /** | 337 | /** |
338 | * Plugins additional forms | ||
339 | */ | ||
340 | .toolbar-plugin { | ||
341 | margin: 5px 0; | ||
342 | text-align: center; | ||
343 | } | ||
344 | |||
345 | .toolbar-plugin input[type="text"] { | ||
346 | padding: 0 5px; | ||
347 | height: 30px; | ||
348 | width: 300px; | ||
349 | background: #f5f5f5; | ||
350 | border: medium none currentColor; | ||
351 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; | ||
352 | border-radius: 2px; | ||
353 | color: #252525; | ||
354 | } | ||
355 | |||
356 | /* because chrome */ | ||
357 | .toolbar-plugin input[type="text"]::-webkit-input-placeholder { | ||
358 | color: #777777; | ||
359 | } | ||
360 | |||
361 | .toolbar-plugin input[type="submit"] { | ||
362 | padding: 0 10px; | ||
363 | height: 30px; | ||
364 | background: #f5f5f5; | ||
365 | border: medium none currentColor; | ||
366 | border-radius: 2px; | ||
367 | color: #252525; | ||
368 | } | ||
369 | |||
370 | @media screen and (max-width: 64em) { | ||
371 | .toolbar-plugin input[type="text"] { | ||
372 | width: 70%; | ||
373 | |||
374 | } | ||
375 | } | ||
376 | |||
377 | /** | ||
319 | * CONTENT - LINKLIST PAGING | 378 | * CONTENT - LINKLIST PAGING |
320 | * 64em -> lg | 379 | * 64em -> lg |
321 | */ | 380 | */ |
@@ -369,14 +428,18 @@ pre { | |||
369 | background: #f5f5f5; | 428 | background: #f5f5f5; |
370 | } | 429 | } |
371 | 430 | ||
431 | .linksperpage a, .linksperpage input[type="text"] { | ||
432 | display: inline-block; | ||
433 | width: 20px; | ||
434 | text-align: center; | ||
435 | } | ||
436 | |||
372 | .linksperpage form { | 437 | .linksperpage form { |
373 | display: inline; | 438 | display: inline; |
374 | margin: 0 10px 0 0; | ||
375 | } | 439 | } |
376 | 440 | ||
377 | .linksperpage input[type="text"] { | 441 | .linksperpage input[type="text"] { |
378 | width: 28px; | 442 | height: 15px; |
379 | height: 12px; | ||
380 | margin: 0; | 443 | margin: 0; |
381 | padding: 3px 5px 3px 8px; | 444 | padding: 3px 5px 3px 8px; |
382 | background: #f5f5f5; | 445 | background: #f5f5f5; |
@@ -400,9 +463,22 @@ pre { | |||
400 | } | 463 | } |
401 | 464 | ||
402 | .linklist-item-title { | 465 | .linklist-item-title { |
466 | position: relative; | ||
403 | background: #f5f5f5; | 467 | background: #f5f5f5; |
404 | } | 468 | } |
405 | 469 | ||
470 | .linklist-item.private .linklist-item-title::before { | ||
471 | position: absolute; | ||
472 | left: 3px; | ||
473 | top: 0; | ||
474 | display: block; | ||
475 | content:""; | ||
476 | background: #F89406; | ||
477 | height: 95%; | ||
478 | width: 3px; | ||
479 | margin-top: 3px; | ||
480 | } | ||
481 | |||
406 | .linklist-item-title h2 { | 482 | .linklist-item-title h2 { |
407 | padding: 3px 10px 0 10px; | 483 | padding: 3px 10px 0 10px; |
408 | line-height: 25px; | 484 | line-height: 25px; |
@@ -417,6 +493,7 @@ pre { | |||
417 | } | 493 | } |
418 | 494 | ||
419 | .linklist-item-title .linklist-link { | 495 | .linklist-item-title .linklist-link { |
496 | font-size: 1.1em; | ||
420 | color: #1b926c; | 497 | color: #1b926c; |
421 | } | 498 | } |
422 | 499 | ||
@@ -454,6 +531,12 @@ pre { | |||
454 | padding: 5px; | 531 | padding: 5px; |
455 | } | 532 | } |
456 | 533 | ||
534 | .linklist-item-editbuttons * { | ||
535 | display: block; | ||
536 | float: left; | ||
537 | margin: 0 1px; | ||
538 | } | ||
539 | |||
457 | .linklist-item-editbuttons a { | 540 | .linklist-item-editbuttons a { |
458 | font-size: 1em; | 541 | font-size: 1em; |
459 | } | 542 | } |
@@ -469,6 +552,7 @@ pre { | |||
469 | } | 552 | } |
470 | 553 | ||
471 | .linklist-item-description { | 554 | .linklist-item-description { |
555 | position: relative; | ||
472 | padding: 10px; | 556 | padding: 10px; |
473 | background: #f5f5f5; | 557 | background: #f5f5f5; |
474 | font-family: Roboto Slab, Arial, sans-serif; | 558 | font-family: Roboto Slab, Arial, sans-serif; |
@@ -476,6 +560,19 @@ pre { | |||
476 | color: #252525; | 560 | color: #252525; |
477 | } | 561 | } |
478 | 562 | ||
563 | .linklist-item.private .linklist-item-description::before { | ||
564 | position: absolute; | ||
565 | left: 3px; | ||
566 | top: 0; | ||
567 | display: block; | ||
568 | content:""; | ||
569 | background: #F89406; | ||
570 | height: 95%; | ||
571 | width: 3px; | ||
572 | z-index: 9999; | ||
573 | #margin: 0; | ||
574 | } | ||
575 | |||
479 | .linklist-item-description a { | 576 | .linklist-item-description a { |
480 | text-decoration: none; | 577 | text-decoration: none; |
481 | color: #1b926c; | 578 | color: #1b926c; |
@@ -496,13 +593,13 @@ pre { | |||
496 | } | 593 | } |
497 | 594 | ||
498 | .linklist-item-infos { | 595 | .linklist-item-infos { |
499 | padding: 5px 5px 0 5px; | 596 | padding: 8px 8px 5px 8px; |
500 | background: #ddd; | 597 | background: #ddd; |
501 | color: #252525; | 598 | color: #252525; |
502 | } | 599 | } |
503 | 600 | ||
504 | .linklist-item-infos a { | 601 | .linklist-item-infos a { |
505 | color: #505050; | 602 | color: #252525; |
506 | text-decoration: none; | 603 | text-decoration: none; |
507 | } | 604 | } |
508 | 605 | ||
@@ -511,17 +608,14 @@ pre { | |||
511 | } | 608 | } |
512 | 609 | ||
513 | .linklist-item-infos .linklist-item-tags { | 610 | .linklist-item-infos .linklist-item-tags { |
514 | margin: 0 0 5px 0; | ||
515 | font-size: 0.8em; | 611 | font-size: 0.8em; |
516 | } | 612 | } |
517 | 613 | ||
518 | .linklist-item-infos .label-tag { | 614 | .linklist-item-infos .label-tag { |
519 | border: 1px solid #505050; | ||
520 | font-size: 0.9em; | 615 | font-size: 0.9em; |
521 | } | 616 | } |
522 | 617 | ||
523 | .linklist-item-infos .label-tag:hover { | 618 | .linklist-item-infos .label-tag:hover { |
524 | border: 1px solid #000; | ||
525 | } | 619 | } |
526 | 620 | ||
527 | .linklist-item-infos-dateblock { | 621 | .linklist-item-infos-dateblock { |
@@ -541,6 +635,17 @@ pre { | |||
541 | font-size: 0.8em; | 635 | font-size: 0.8em; |
542 | } | 636 | } |
543 | 637 | ||
638 | .linklist-item-infos .mobile-buttons { | ||
639 | text-align: right; | ||
640 | } | ||
641 | |||
642 | .linklist-item-infos .linklist-plugin-icon { | ||
643 | display: inline-block; | ||
644 | margin: 0 2px; | ||
645 | width: 16px; | ||
646 | height: 16px; | ||
647 | } | ||
648 | |||
544 | /** 64em -> lg **/ | 649 | /** 64em -> lg **/ |
545 | @media screen and (max-width: 64em) { | 650 | @media screen and (max-width: 64em) { |
546 | .linklist-item-infos-url { | 651 | .linklist-item-infos-url { |
@@ -576,10 +681,10 @@ pre { | |||
576 | */ | 681 | */ |
577 | .page-form { | 682 | .page-form { |
578 | margin: 20px 0 0 0; | 683 | margin: 20px 0 0 0; |
579 | padding: 0 10px 0 10px; | ||
580 | background: #f5f5f5; | 684 | background: #f5f5f5; |
581 | box-shadow: 1px 1px 2px #797979; | 685 | box-shadow: 1px 1px 2px #797979; |
582 | color: #252525; | 686 | color: #252525; |
687 | overflow: hidden; | ||
583 | } | 688 | } |
584 | 689 | ||
585 | .page-form .window-title { | 690 | .page-form .window-title { |
@@ -609,16 +714,22 @@ pre { | |||
609 | font-weight: bold; | 714 | font-weight: bold; |
610 | } | 715 | } |
611 | 716 | ||
717 | .page-form p { | ||
718 | padding: 0 10px; | ||
719 | margin: 0; | ||
720 | } | ||
721 | |||
612 | .page-form input[type="text"], | 722 | .page-form input[type="text"], |
613 | .page-form input[type="password"], | 723 | .page-form input[type="password"], |
614 | .page-form textarea { | 724 | .page-form textarea { |
725 | box-sizing: border-box; | ||
615 | margin: 10px 0; | 726 | margin: 10px 0; |
616 | padding: 5px 5px 3px 15px; | 727 | padding: 5px 5px 3px 15px; |
617 | height: 30px; | 728 | height: 35px; |
618 | width: 80%; | 729 | width: 90%; |
619 | background: #f5f5f5; | 730 | background: #ebebeb; |
620 | border: medium none currentColor; | 731 | border: medium none currentColor; |
621 | border-radius: 5px; | 732 | border-radius: 2px; |
622 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; | 733 | box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; |
623 | color: #252525; | 734 | color: #252525; |
624 | } | 735 | } |
@@ -634,7 +745,7 @@ pre { | |||
634 | /* because chrome */ | 745 | /* because chrome */ |
635 | .page-form input[type="text"]::-webkit-input-placeholder, | 746 | .page-form input[type="text"]::-webkit-input-placeholder, |
636 | .page-form input[type="password"]::-webkit-input-placeholder { | 747 | .page-form input[type="password"]::-webkit-input-placeholder { |
637 | color: #252525; | 748 | color: #777777; |
638 | } | 749 | } |
639 | 750 | ||
640 | .page-form input[type="submit"] { | 751 | .page-form input[type="submit"] { |
@@ -648,6 +759,11 @@ pre { | |||
648 | color: #f5f5f5; | 759 | color: #f5f5f5; |
649 | } | 760 | } |
650 | 761 | ||
762 | |||
763 | .page-form input[type="submit"].button-red { | ||
764 | background: #ac2925; | ||
765 | } | ||
766 | |||
651 | .page-form select { | 767 | .page-form select { |
652 | color: #252525; | 768 | color: #252525; |
653 | } | 769 | } |
@@ -704,10 +820,9 @@ pre { | |||
704 | } | 820 | } |
705 | 821 | ||
706 | .page-form section { | 822 | .page-form section { |
707 | margin-top: 20px; | 823 | margin: 10px 0 25px 0; |
708 | } | 824 | } |
709 | 825 | ||
710 | |||
711 | .page-form table { | 826 | .page-form table { |
712 | margin: auto; | 827 | margin: auto; |
713 | width: 90%; | 828 | width: 90%; |
@@ -715,12 +830,13 @@ pre { | |||
715 | 830 | ||
716 | .page-form table .order { | 831 | .page-form table .order { |
717 | text-decoration: none; | 832 | text-decoration: none; |
833 | color: #252525; | ||
718 | } | 834 | } |
719 | 835 | ||
720 | .page-form table, .page-form th, .page-form td { | 836 | .page-form table, .page-form th, .page-form td { |
721 | border-width: 1px 0; | 837 | border-width: 1px 0; |
722 | border-style: solid; | 838 | border-style: solid; |
723 | border-color: #b0ddce; | 839 | border-color: #aaaaaa; |
724 | } | 840 | } |
725 | 841 | ||
726 | .page-form th, .page-form td { | 842 | .page-form th, .page-form td { |
@@ -730,7 +846,7 @@ pre { | |||
730 | 846 | ||
731 | /* Awesomeplete fix */ | 847 | /* Awesomeplete fix */ |
732 | .page-form .awesomplete { | 848 | .page-form .awesomplete { |
733 | width: 80%; | 849 | width: 90%; |
734 | } | 850 | } |
735 | 851 | ||
736 | .page-form .awesomplete input { | 852 | .page-form .awesomplete input { |
@@ -852,7 +968,6 @@ pre { | |||
852 | } | 968 | } |
853 | } | 969 | } |
854 | 970 | ||
855 | |||
856 | /** | 971 | /** |
857 | * IMPORT | 972 | * IMPORT |
858 | */ | 973 | */ |
@@ -882,13 +997,14 @@ pre { | |||
882 | */ | 997 | */ |
883 | #picwall_container { | 998 | #picwall_container { |
884 | margin: 0 10px 10px 10px; | 999 | margin: 0 10px 10px 10px; |
885 | color: #fff; | 1000 | color: #252525; |
886 | background-color: #000; | 1001 | background-color: #f5f5f5; |
887 | clear: both; | 1002 | clear: both; |
888 | } | 1003 | } |
889 | 1004 | ||
890 | .picwall_pictureframe { | 1005 | .picwall_pictureframe { |
891 | background-color: #000; | 1006 | margin: 2px; |
1007 | background-color: #f5f5f5; | ||
892 | z-index: 5; | 1008 | z-index: 5; |
893 | position: relative; | 1009 | position: relative; |
894 | display: table-cell; | 1010 | display: table-cell; |
@@ -924,6 +1040,7 @@ pre { | |||
924 | /* CSS to show title when hovering an image - no javascript required. */ | 1040 | /* CSS to show title when hovering an image - no javascript required. */ |
925 | .picwall_pictureframe span.info { | 1041 | .picwall_pictureframe span.info { |
926 | display: none; | 1042 | display: none; |
1043 | font-family: Arial, sans-serif; | ||
927 | } | 1044 | } |
928 | 1045 | ||
929 | .picwall_pictureframe:hover span.info { | 1046 | .picwall_pictureframe:hover span.info { |
@@ -932,16 +1049,12 @@ pre { | |||
932 | top: 0; | 1049 | top: 0; |
933 | left: 0; | 1050 | left: 0; |
934 | width: 90px; | 1051 | width: 90px; |
1052 | height: 90px; | ||
935 | font-weight: bold; | 1053 | font-weight: bold; |
936 | font-size: 8pt; | 1054 | font-size: 9pt; |
937 | color: #fff; | 1055 | color: #f5f5f5; |
938 | text-align: left; | 1056 | text-align: left; |
939 | background-color: transparent; | 1057 | background-color: rgba(0, 0, 0, 0.8); |
940 | background-color: rgba(0, 0, 0, 0.4); | ||
941 | /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ | ||
942 | filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); | ||
943 | /* IE6IE9 */ | ||
944 | text-shadow: 2px 2px 1px #000000; | ||
945 | } | 1058 | } |
946 | 1059 | ||
947 | /** | 1060 | /** |