aboutsummaryrefslogtreecommitdiffhomepage
path: root/themes/baggy/css
diff options
context:
space:
mode:
Diffstat (limited to 'themes/baggy/css')
-rwxr-xr-xthemes/baggy/css/main.css278
1 files changed, 146 insertions, 132 deletions
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index 6d320cd2..1df82910 100755
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -15,11 +15,11 @@ html {
15} 15}
16 16
17body { 17body {
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
73p, li { 73p, li, label {
74 color: #666; 74 color: #666;
75} 75}
76 76
@@ -89,7 +89,7 @@ form fieldset {
89 margin: 0; 89 margin: 0;
90} 90}
91 91
92form input[type="text"], select, form input[type="password"], form input[type="url"] { 92form input[type="text"], select, form input[type="password"], form input[type="url"], form input[type="email"] {
93 border: 1px solid #999; 93 border: 1px solid #999;
94 padding: 0.5em 1em; 94 padding: 0.5em 1em;
95 min-width: 12em; 95 min-width: 12em;
@@ -104,10 +104,6 @@ form input[type="text"], select, form input[type="password"], form input[type="u
104 } 104 }
105} 105}
106 106
107fieldset label {
108 min-width: 12.5em;
109}
110
111.inline .row { 107.inline .row {
112 display: inline-block; 108 display: inline-block;
113 margin-right: 0.5em; 109 margin-right: 0.5em;
@@ -119,17 +115,21 @@ fieldset label {
119 115
120fieldset label { 116fieldset label {
121 display: inline-block; 117 display: inline-block;
122 margin-right: 0.5em; 118 min-width: 12.5em;
123 color: #666; 119 color: #666;
124} 120}
125 121
122label {
123 margin-right: 0.5em;
124}
125
126form .row { 126form .row {
127 margin-bottom: 0.5em; 127 margin-bottom: 0.5em;
128} 128}
129 129
130form button, input[type="submit"] { 130form 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,11 +176,11 @@ 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);
183 z-index: 10; 183 z-index: 15;
184} 184}
185 185
186#main { 186#main {
@@ -191,7 +191,7 @@ h2:after {
191 padding-bottom: 1em; 191 padding-bottom: 1em;
192} 192}
193 193
194 #links a { 194 #links > li > a {
195 display: block; 195 display: block;
196 padding: 0.5em 2em 0.5em 1em; 196 padding: 0.5em 2em 0.5em 1em;
197 color: #FFF; 197 color: #FFF;
@@ -207,8 +207,8 @@ h2:after {
207 transition: all 0.5s ease; 207 transition: all 0.5s ease;
208 } 208 }
209 209
210 #links a:hover, #links 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;
@@ -327,15 +327,11 @@ footer a {
327 margin-left: 0!important; 327 margin-left: 0!important;
328} 328}
329 329
330.listmode .entrie p {
331 display: none;
332}
333
334.list-entries + .results { 330.list-entries + .results {
335 margin-bottom: 2em; 331 margin-bottom: 2em;
336} 332}
337 333
338.estimatedTime a { 334.estimatedTime .reading-time {
339 color: #999; 335 color: #999;
340 font-style: italic; 336 font-style: italic;
341 font-weight: normal; 337 font-weight: normal;
@@ -348,7 +344,7 @@ footer a {
348} 344}
349 345
350.entrie { 346.entrie {
351 background: #FFF; 347 background-color: #FFF;
352 letter-spacing:normal; 348 letter-spacing:normal;
353 box-shadow: 0 3px 7px rgba(0,0,0,0.3); 349 box-shadow: 0 3px 7px rgba(0,0,0,0.3);
354 display: inline-block; 350 display: inline-block;
@@ -359,11 +355,15 @@ footer a {
359 position: relative; 355 position: relative;
360 overflow: hidden; 356 overflow: hidden;
361 padding: 1.5em 1.5em 3em 1.5em; 357 padding: 1.5em 1.5em 3em 1.5em;
362 -webkit-transition: all 0.5s ease; 358
363 -moz-transition: all 0.5s ease; 359 /* Removing CSS transitions because they make the switch from list view to
364 -ms-transition: all 0.5s ease; 360 * table view jerky
365 -o-transition: all 0.5s ease; 361 */
366 transition: all 0.5s ease; 362 /* -webkit-transition: all 0.5s ease; */
363 /* -moz-transition: all 0.5s ease; */
364 /* -ms-transition: all 0.5s ease; */
365 /* -o-transition: all 0.5s ease; */
366 /* transition: all 0.5s ease; */
367} 367}
368 368
369.entrie:before { 369.entrie:before {
@@ -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 {
@@ -540,7 +541,7 @@ footer a {
540 2.1 = "save a link" related styles 541 2.1 = "save a link" related styles
541 ========================================================================== */ 542 ========================================================================== */
542 543
543#bagit-form, #search-form { 544.popup-form {
544 background: rgba(0,0,0,0.5); 545 background: rgba(0,0,0,0.5);
545 position: absolute; 546 position: absolute;
546 top: 0; 547 top: 0;
@@ -549,37 +550,53 @@ footer a {
549 height: 100%; 550 height: 100%;
550 width: 100%; 551 width: 100%;
551 margin: 0; 552 margin: 0;
552 margin-top: -30%; 553 margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */
553 padding: 2em; 554 padding: 2em;
554 display: none; 555 display: none;
555 border-left: 1px #EEE solid; 556 border-left: 1px #EEE solid;
556} 557}
557 558
558#bagit-form form, #search-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;
563 z-index: 20; 564 z-index: 20;
564 border: 10px solid #000; 565 border: 10px solid #000;
565 width: 400px; 566 width: 400px;
566 height: 200px; 567 height: 200px;
567 /* margin: -150px 0 0 -300px; */ 568 padding: 2em;
568 padding: 2em; 569 }
570
571#bagit-form-form .addurl {
572 margin-left: 0;
569} 573}
570 574
571a#bagit-form-close, a#search-form-close { 575.closeMessage,
572 background: #000; 576.close-button {
577 background-color: #000;
573 color: #FFF; 578 color: #FFF;
574 padding: 0.2em 0.5em; 579 font-size: 1.2em;
580 line-height: 1.6;
581 width: 1.6em;
582 height: 1.6em;
583 text-align: center;
575 text-decoration: none; 584 text-decoration: none;
576 display: inline-block;
577 float: right;
578 font-size: 0.6em;
579} 585}
580a#bagit-form-close:hover, a#search-form-close:hover { 586 .closeMessage:hover,
581 background: #999; 587 .closeMessage:focus,
582 color: #000; 588 .close-button:hover,
589 .close-button:focus {
590 background-color: #999;
591 color: #000;
592 }
593
594.close-button--popup {
595 display: inline-block;
596 position: absolute;
597 top: 0;
598 right: 0;
599 font-size: 1.4em;
583} 600}
584 601
585.active-current { 602.active-current {
@@ -630,57 +647,7 @@ a.add-to-wallabag-link-after:after {
630 647
631#add-link-result { 648#add-link-result {
632 font-weight: bold; 649 font-weight: bold;
633 margin-top: 10px; 650 font-size: 0.9em;
634}
635
636/* ==========================================================================
637 2.2 = "search for articles" popup div related styles
638 ========================================================================== */
639#search-form {
640 background: rgba(0,0,0,0.5);
641 position: absolute;
642 top: 0;
643 left: 10em;
644 z-index: 20;
645 height: 100%;
646 width: 100%;
647 margin: 0;
648 margin-top: -30%;
649 padding: 2em;
650 display: none;
651 border-left: 1px #EEE solid;
652}
653
654#search-form form {
655 background: #FFF;
656 position: absolute;
657 top: 0;
658 left: 0;
659 z-index: 20;
660 border: 10px solid #000;
661 width: 400px;
662 height: 200px;
663 /* margin: -150px 0 0 -300px; */
664 padding: 2em;
665}
666
667a#search-form-close {
668 background: #000;
669 color: #FFF;
670 padding: 0.2em 0.5em;
671 text-decoration: none;
672 display: inline-block;
673 float: right;
674 font-size: 1.2em;
675}
676a#search-form-close:hover {
677 background: #999;
678 color: #000;
679}
680
681#submit-search{
682margin-left: 4em;
683margin-top:1em;
684} 651}
685 652
686/* ========================================================================== 653/* ==========================================================================
@@ -690,15 +657,16 @@ margin-top:1em;
690@font-face { 657@font-face {
691 font-family: 'icomoon'; 658 font-family: 'icomoon';
692 src:url('../fonts/icomoon.eot?-s0mcsx'); 659 src:url('../fonts/icomoon.eot?-s0mcsx');
693 src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), 660 src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
694 url('../fonts/icomoon.woff?-s0mcsx') format('woff'), 661 url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
695 url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'), 662 url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
696 url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg'); 663 url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
697 font-weight: normal; 664 font-weight: normal;
698 font-style: normal; 665 font-style: normal;
699} 666}
700 667
701.icon span { 668.icon span,
669.icon-image span {
702 position: absolute; 670 position: absolute;
703 top: -9999px; 671 top: -9999px;
704} 672}
@@ -769,6 +737,28 @@ margin-top:1em;
769 content: "\e80d"; 737 content: "\e80d";
770} 738}
771 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
772/* ========================================================================== 762/* ==========================================================================
773 Icon selected 763 Icon selected
774 ========================================================================== */ 764 ========================================================================== */
@@ -777,6 +767,10 @@ margin-top:1em;
777 color: #FFF; 767 color: #FFF;
778} 768}
779 769
770.icon-check.archive:before {
771 color: #FFF;
772}
773
780/* ========================================================================== 774/* ==========================================================================
781 4 = Messages 775 4 = Messages
782 ========================================================================== */ 776 ========================================================================== */
@@ -788,18 +782,6 @@ margin-top:1em;
788 782
789.messages > * { display: inline-block;} 783.messages > * { display: inline-block;}
790 784
791.closeMessage {
792 background: #000;
793 color: #FFF;
794 padding: 0.2em 0.5em;
795 text-decoration: none;
796}
797
798 .closeMessage:hover, .closeMessage:focus {
799 background: #FFF;
800 color: #000;
801 }
802
803.warning { 785.warning {
804 /* font-size: 3em; 786 /* font-size: 3em;
805 color: #999; 787 color: #999;
@@ -816,6 +798,16 @@ margin-top:1em;
816 width: 100%; 798 width: 100%;
817} 799}
818 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
819/* ========================================================================== 811/* ==========================================================================
820 5 = Article 812 5 = Article
821 ========================================================================== */ 813 ========================================================================== */
@@ -836,11 +828,15 @@ margin-top:1em;
836 828
837blockquote { 829blockquote {
838 border:1px solid #999; 830 border:1px solid #999;
839 background: #FFF; 831 background-color: #FFF;
840 padding: 1em; 832 padding: 1em;
841 margin: 0; 833 margin: 0;
842} 834}
843 835
836#article h1 {
837 text-align: left;
838}
839
844#article h2, #article h3, #article h4 { 840#article h2, #article h3, #article h4 {
845 text-transform: none; 841 text-transform: none;
846} 842}
@@ -865,14 +861,14 @@ blockquote {
865} 861}
866 862
867#article_toolbar a { 863#article_toolbar a {
868 background: #000; 864 background-color: #000;
869 padding: 0.3em 0.5em 0.2em; 865 padding: 0.3em 0.5em 0.2em;
870 color: #FFF; 866 color: #FFF;
871 text-decoration: none; 867 text-decoration: none;
872} 868}
873 869
874 #article_toolbar a:hover, #article_toolbar a:focus { 870 #article_toolbar a:hover, #article_toolbar a:focus {
875 background: #999; 871 background-color: #999;
876 } 872 }
877 873
878.shaarli:before { 874.shaarli:before {
@@ -895,7 +891,7 @@ blockquote {
895} 891}
896 892
897.icon-rss { 893.icon-rss {
898 background: #000; 894 background-color: #000;
899 color: #FFF; 895 color: #FFF;
900 padding: 0.2em 0.5em; 896 padding: 0.2em 0.5em;
901} 897}
@@ -910,7 +906,7 @@ blockquote {
910} 906}
911 907
912.list-tags .icon-rss:hover, .list-tags .icon-rss:focus { 908.list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
913 background: #FFF; 909 background-color: #FFF;
914 color: #000; 910 color: #000;
915 text-decoration: none; 911 text-decoration: none;
916} 912}
@@ -923,6 +919,13 @@ blockquote {
923 text-decoration: underline; 919 text-decoration: underline;
924} 920}
925 921
922pre code {
923 font-family: "Courier New", Courier, monospace;
924 border: 1px solid #ccc;
925 font-size: 0.96em;
926}
927
928
926/* ========================================================================== 929/* ==========================================================================
927 6 = Media Queries 930 6 = Media Queries
928 ========================================================================== */ 931 ========================================================================== */
@@ -964,7 +967,7 @@ blockquote {
964 margin-left: 0; 967 margin-left: 0;
965 } 968 }
966 body > header { 969 body > header {
967 background: #333; 970 background-color: #333;
968 position: fixed; 971 position: fixed;
969 top: 0; 972 top: 0;
970 width: 100%; 973 width: 100%;
@@ -1010,11 +1013,11 @@ blockquote {
1010 width: 2.5em; 1013 width: 2.5em;
1011 height: 2.5em; 1014 height: 2.5em;
1012 cursor: pointer; 1015 cursor: pointer;
1013 background: #999; 1016 background-color: #999;
1014 font-size: 1.2em; 1017 font-size: 1.2em;
1015 } 1018 }
1016 .desktopHide:hover, .desktopHide:focus { 1019 .desktopHide:hover, .desktopHide:focus {
1017 background: #FFF; 1020 background-color: #FFF;
1018 } 1021 }
1019 #links { 1022 #links {
1020 display: none; 1023 display: none;
@@ -1022,6 +1025,9 @@ blockquote {
1022 height: auto; 1025 height: auto;
1023 padding-top: 3em; 1026 padding-top: 3em;
1024 } 1027 }
1028 #links.menu--open {
1029 display: block;
1030 }
1025 footer { 1031 footer {
1026 position: static; 1032 position: static;
1027 margin-right: 3em; 1033 margin-right: 3em;
@@ -1051,7 +1057,15 @@ blockquote {
1051 display: none; 1057 display: none;
1052 } 1058 }
1053 1059
1054 #bagit-form, #search-form { 1060 .popup-form, #bagit-form, #search-form {
1055 left: 0; 1061 left: 0;
1062 width: 100%;
1063 border-left: none;
1064 }
1065
1066 .popup-form form,
1067 #bagit-form form,
1068 #search-form form {
1069 width: 100%;
1056 } 1070 }
1057} 1071}