diff options
Diffstat (limited to 'themes/baggy/css/main.css')
-rwxr-xr-x | themes/baggy/css/main.css | 104 |
1 files changed, 72 insertions, 32 deletions
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css index ce314860..1df82910 100755 --- a/themes/baggy/css/main.css +++ b/themes/baggy/css/main.css | |||
@@ -15,11 +15,11 @@ html { | |||
15 | } | 15 | } |
16 | 16 | ||
17 | body { | 17 | body { |
18 | background: #EEE; | 18 | background-color: #EEE; |
19 | } | 19 | } |
20 | 20 | ||
21 | .login { | 21 | .login { |
22 | background: #333; | 22 | background-color: #333; |
23 | } | 23 | } |
24 | 24 | ||
25 | .login #main { | 25 | .login #main { |
@@ -28,7 +28,7 @@ body { | |||
28 | } | 28 | } |
29 | 29 | ||
30 | .login form { | 30 | .login form { |
31 | background: #FFF; | 31 | background-color: #FFF; |
32 | padding: 1.5em; | 32 | padding: 1.5em; |
33 | box-shadow: 0 1px 8px rgba(0,0,0,0.9); | 33 | box-shadow: 0 1px 8px rgba(0,0,0,0.9); |
34 | width: 20em; | 34 | width: 20em; |
@@ -51,7 +51,7 @@ body { | |||
51 | 51 | ||
52 | ::selection { | 52 | ::selection { |
53 | color: #FFF; | 53 | color: #FFF; |
54 | background: #000; | 54 | background-color: #000; |
55 | } | 55 | } |
56 | 56 | ||
57 | .desktopHide { | 57 | .desktopHide { |
@@ -70,7 +70,7 @@ h2, h3, h4 { | |||
70 | text-transform: uppercase; | 70 | text-transform: uppercase; |
71 | } | 71 | } |
72 | 72 | ||
73 | p, li { | 73 | p, li, label { |
74 | color: #666; | 74 | color: #666; |
75 | } | 75 | } |
76 | 76 | ||
@@ -129,7 +129,7 @@ form .row { | |||
129 | 129 | ||
130 | form button, input[type="submit"] { | 130 | form button, input[type="submit"] { |
131 | cursor:pointer; | 131 | cursor:pointer; |
132 | background: #000; | 132 | background-color: #000; |
133 | color: #FFF; | 133 | color: #FFF; |
134 | border:0; | 134 | border:0; |
135 | padding: 0.5em 1em; | 135 | padding: 0.5em 1em; |
@@ -138,7 +138,7 @@ form button, input[type="submit"] { | |||
138 | } | 138 | } |
139 | 139 | ||
140 | form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus { | 140 | form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus { |
141 | background: #FFF; | 141 | background-color: #FFF; |
142 | color: #000; | 142 | color: #000; |
143 | -webkit-transition: all 0.5s ease; | 143 | -webkit-transition: all 0.5s ease; |
144 | -moz-transition: all 0.5s ease; | 144 | -moz-transition: all 0.5s ease; |
@@ -155,7 +155,7 @@ h2:after { | |||
155 | content: ""; | 155 | content: ""; |
156 | height: 4px; | 156 | height: 4px; |
157 | width: 70px; | 157 | width: 70px; |
158 | background: #000; | 158 | background-color: #000; |
159 | display: block; | 159 | display: block; |
160 | } | 160 | } |
161 | 161 | ||
@@ -176,7 +176,7 @@ h2:after { | |||
176 | width: 10em; | 176 | width: 10em; |
177 | left: 0; | 177 | left: 0; |
178 | text-align: right; | 178 | text-align: right; |
179 | background: #333; | 179 | background-color: #333; |
180 | padding-top: 9.5em; | 180 | padding-top: 9.5em; |
181 | height: 100%; | 181 | height: 100%; |
182 | box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); | 182 | box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); |
@@ -208,7 +208,7 @@ h2:after { | |||
208 | } | 208 | } |
209 | 209 | ||
210 | #links > li > a:hover, #links > li > a:focus { | 210 | #links > li > a:hover, #links > li > a:focus { |
211 | background: #999; | 211 | background-color: #999; |
212 | color: #000; | 212 | color: #000; |
213 | } | 213 | } |
214 | 214 | ||
@@ -281,12 +281,12 @@ h2:after { | |||
281 | #listmode a:hover { | 281 | #listmode a:hover { |
282 | opacity: 1; | 282 | opacity: 1; |
283 | } | 283 | } |
284 | .tablemode { | 284 | #listmode.tablemode { |
285 | background-image: url("../img/baggy/table.png"); | 285 | background-image: url("../img/baggy/table.png"); |
286 | background-repeat: no-repeat; | 286 | background-repeat: no-repeat; |
287 | background-position: bottom; | 287 | background-position: bottom; |
288 | } | 288 | } |
289 | .listmode { | 289 | #listmode.listmode { |
290 | background-image: url("../img/baggy/list.png"); | 290 | background-image: url("../img/baggy/list.png"); |
291 | background-repeat: no-repeat; | 291 | background-repeat: no-repeat; |
292 | background-position: bottom; | 292 | background-position: bottom; |
@@ -331,7 +331,7 @@ footer a { | |||
331 | margin-bottom: 2em; | 331 | margin-bottom: 2em; |
332 | } | 332 | } |
333 | 333 | ||
334 | .estimatedTime a { | 334 | .estimatedTime .reading-time { |
335 | color: #999; | 335 | color: #999; |
336 | font-style: italic; | 336 | font-style: italic; |
337 | font-weight: normal; | 337 | font-weight: normal; |
@@ -344,7 +344,7 @@ footer a { | |||
344 | } | 344 | } |
345 | 345 | ||
346 | .entrie { | 346 | .entrie { |
347 | background: #FFF; | 347 | background-color: #FFF; |
348 | letter-spacing:normal; | 348 | letter-spacing:normal; |
349 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); | 349 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); |
350 | display: inline-block; | 350 | display: inline-block; |
@@ -391,7 +391,7 @@ footer a { | |||
391 | width: 100%; | 391 | width: 100%; |
392 | bottom: 0; | 392 | bottom: 0; |
393 | left: 0; | 393 | left: 0; |
394 | background: #000; | 394 | background-color: #000; |
395 | -webkit-transition: all 0.5s ease; | 395 | -webkit-transition: all 0.5s ease; |
396 | -moz-transition: all 0.5s ease; | 396 | -moz-transition: all 0.5s ease; |
397 | -ms-transition: all 0.5s ease; | 397 | -ms-transition: all 0.5s ease; |
@@ -418,6 +418,7 @@ footer a { | |||
418 | .entrie h2 { | 418 | .entrie h2 { |
419 | text-transform: none; | 419 | text-transform: none; |
420 | margin-bottom: 0; | 420 | margin-bottom: 0; |
421 | line-height: 1.2; | ||
421 | } | 422 | } |
422 | 423 | ||
423 | .entrie h2:after { | 424 | .entrie h2:after { |
@@ -556,7 +557,7 @@ footer a { | |||
556 | } | 557 | } |
557 | 558 | ||
558 | .popup-form form { | 559 | .popup-form form { |
559 | background: #FFF; | 560 | background-color: #FFF; |
560 | position: absolute; | 561 | position: absolute; |
561 | top: 0; | 562 | top: 0; |
562 | left: 0; | 563 | left: 0; |
@@ -573,7 +574,7 @@ footer a { | |||
573 | 574 | ||
574 | .closeMessage, | 575 | .closeMessage, |
575 | .close-button { | 576 | .close-button { |
576 | background: #000; | 577 | background-color: #000; |
577 | color: #FFF; | 578 | color: #FFF; |
578 | font-size: 1.2em; | 579 | font-size: 1.2em; |
579 | line-height: 1.6; | 580 | line-height: 1.6; |
@@ -586,7 +587,7 @@ footer a { | |||
586 | .closeMessage:focus, | 587 | .closeMessage:focus, |
587 | .close-button:hover, | 588 | .close-button:hover, |
588 | .close-button:focus { | 589 | .close-button:focus { |
589 | background: #999; | 590 | background-color: #999; |
590 | color: #000; | 591 | color: #000; |
591 | } | 592 | } |
592 | 593 | ||
@@ -656,15 +657,16 @@ a.add-to-wallabag-link-after:after { | |||
656 | @font-face { | 657 | @font-face { |
657 | font-family: 'icomoon'; | 658 | font-family: 'icomoon'; |
658 | src:url('../fonts/icomoon.eot?-s0mcsx'); | 659 | src:url('../fonts/icomoon.eot?-s0mcsx'); |
659 | src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), | 660 | src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), |
660 | url('../fonts/icomoon.woff?-s0mcsx') format('woff'), | 661 | url('../fonts/icomoon.woff?-s0mcsx') format('woff'), |
661 | url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'), | 662 | url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'), |
662 | url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg'); | 663 | url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg'); |
663 | font-weight: normal; | 664 | font-weight: normal; |
664 | font-style: normal; | 665 | font-style: normal; |
665 | } | 666 | } |
666 | 667 | ||
667 | .icon span { | 668 | .icon span, |
669 | .icon-image span { | ||
668 | position: absolute; | 670 | position: absolute; |
669 | top: -9999px; | 671 | top: -9999px; |
670 | } | 672 | } |
@@ -735,6 +737,28 @@ a.add-to-wallabag-link-after:after { | |||
735 | content: "\e80d"; | 737 | content: "\e80d"; |
736 | } | 738 | } |
737 | 739 | ||
740 | |||
741 | /* .icon-image class, for image-based icons | ||
742 | ========================================================================== */ | ||
743 | |||
744 | .icon-image { | ||
745 | background-size: 16px 16px; | ||
746 | background-repeat: no-repeat; | ||
747 | background-position: center; | ||
748 | padding-right: 1em !important; | ||
749 | padding-left: 1em !important; | ||
750 | } | ||
751 | |||
752 | /* Carrot (http://carrot.org) */ | ||
753 | .icon-image--carrot { | ||
754 | background-image: url('../../_global/img/icons/carrot-icon--white.png'); | ||
755 | } | ||
756 | |||
757 | /* Diaspora */ | ||
758 | .icon-image--diaspora { | ||
759 | background-image: url('../../_global/img/icons/diaspora-icon--black.png'); | ||
760 | }} | ||
761 | |||
738 | /* ========================================================================== | 762 | /* ========================================================================== |
739 | Icon selected | 763 | Icon selected |
740 | ========================================================================== */ | 764 | ========================================================================== */ |
@@ -774,6 +798,16 @@ a.add-to-wallabag-link-after:after { | |||
774 | width: 100%; | 798 | width: 100%; |
775 | } | 799 | } |
776 | 800 | ||
801 | .more-info { | ||
802 | font-size: 0.85em; | ||
803 | line-height: 1.5; | ||
804 | color: #aaa; | ||
805 | } | ||
806 | |||
807 | .more-info a { | ||
808 | color: #aaa; | ||
809 | } | ||
810 | |||
777 | /* ========================================================================== | 811 | /* ========================================================================== |
778 | 5 = Article | 812 | 5 = Article |
779 | ========================================================================== */ | 813 | ========================================================================== */ |
@@ -794,11 +828,15 @@ a.add-to-wallabag-link-after:after { | |||
794 | 828 | ||
795 | blockquote { | 829 | blockquote { |
796 | border:1px solid #999; | 830 | border:1px solid #999; |
797 | background: #FFF; | 831 | background-color: #FFF; |
798 | padding: 1em; | 832 | padding: 1em; |
799 | margin: 0; | 833 | margin: 0; |
800 | } | 834 | } |
801 | 835 | ||
836 | #article h1 { | ||
837 | text-align: left; | ||
838 | } | ||
839 | |||
802 | #article h2, #article h3, #article h4 { | 840 | #article h2, #article h3, #article h4 { |
803 | text-transform: none; | 841 | text-transform: none; |
804 | } | 842 | } |
@@ -823,14 +861,14 @@ blockquote { | |||
823 | } | 861 | } |
824 | 862 | ||
825 | #article_toolbar a { | 863 | #article_toolbar a { |
826 | background: #000; | 864 | background-color: #000; |
827 | padding: 0.3em 0.5em 0.2em; | 865 | padding: 0.3em 0.5em 0.2em; |
828 | color: #FFF; | 866 | color: #FFF; |
829 | text-decoration: none; | 867 | text-decoration: none; |
830 | } | 868 | } |
831 | 869 | ||
832 | #article_toolbar a:hover, #article_toolbar a:focus { | 870 | #article_toolbar a:hover, #article_toolbar a:focus { |
833 | background: #999; | 871 | background-color: #999; |
834 | } | 872 | } |
835 | 873 | ||
836 | .shaarli:before { | 874 | .shaarli:before { |
@@ -853,7 +891,7 @@ blockquote { | |||
853 | } | 891 | } |
854 | 892 | ||
855 | .icon-rss { | 893 | .icon-rss { |
856 | background: #000; | 894 | background-color: #000; |
857 | color: #FFF; | 895 | color: #FFF; |
858 | padding: 0.2em 0.5em; | 896 | padding: 0.2em 0.5em; |
859 | } | 897 | } |
@@ -868,7 +906,7 @@ blockquote { | |||
868 | } | 906 | } |
869 | 907 | ||
870 | .list-tags .icon-rss:hover, .list-tags .icon-rss:focus { | 908 | .list-tags .icon-rss:hover, .list-tags .icon-rss:focus { |
871 | background: #FFF; | 909 | background-color: #FFF; |
872 | color: #000; | 910 | color: #000; |
873 | text-decoration: none; | 911 | text-decoration: none; |
874 | } | 912 | } |
@@ -929,7 +967,7 @@ pre code { | |||
929 | margin-left: 0; | 967 | margin-left: 0; |
930 | } | 968 | } |
931 | body > header { | 969 | body > header { |
932 | background: #333; | 970 | background-color: #333; |
933 | position: fixed; | 971 | position: fixed; |
934 | top: 0; | 972 | top: 0; |
935 | width: 100%; | 973 | width: 100%; |
@@ -975,11 +1013,11 @@ pre code { | |||
975 | width: 2.5em; | 1013 | width: 2.5em; |
976 | height: 2.5em; | 1014 | height: 2.5em; |
977 | cursor: pointer; | 1015 | cursor: pointer; |
978 | background: #999; | 1016 | background-color: #999; |
979 | font-size: 1.2em; | 1017 | font-size: 1.2em; |
980 | } | 1018 | } |
981 | .desktopHide:hover, .desktopHide:focus { | 1019 | .desktopHide:hover, .desktopHide:focus { |
982 | background: #FFF; | 1020 | background-color: #FFF; |
983 | } | 1021 | } |
984 | #links { | 1022 | #links { |
985 | display: none; | 1023 | display: none; |
@@ -987,6 +1025,9 @@ pre code { | |||
987 | height: auto; | 1025 | height: auto; |
988 | padding-top: 3em; | 1026 | padding-top: 3em; |
989 | } | 1027 | } |
1028 | #links.menu--open { | ||
1029 | display: block; | ||
1030 | } | ||
990 | footer { | 1031 | footer { |
991 | position: static; | 1032 | position: static; |
992 | margin-right: 3em; | 1033 | margin-right: 3em; |
@@ -1028,4 +1069,3 @@ pre code { | |||
1028 | width: 100%; | 1069 | width: 100%; |
1029 | } | 1070 | } |
1030 | } | 1071 | } |
1031 | |||