aboutsummaryrefslogtreecommitdiffhomepage
path: root/themes/baggy/css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'themes/baggy/css/main.css')
-rwxr-xr-xthemes/baggy/css/main.css194
1 files changed, 89 insertions, 105 deletions
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
index b775a291..028c8b4e 100755
--- a/themes/baggy/css/main.css
+++ b/themes/baggy/css/main.css
@@ -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
@@ -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,10 +115,14 @@ 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}
@@ -180,7 +180,7 @@ h2:after {
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,7 +207,7 @@ 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: #999;
212 color: #000; 212 color: #000;
213 } 213 }
@@ -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;
@@ -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 {
@@ -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: #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,
576.close-button {
572 background: #000; 577 background: #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: #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 {
@@ -634,56 +651,6 @@ a.add-to-wallabag-link-after:after {
634} 651}
635 652
636/* ========================================================================== 653/* ==========================================================================
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}
685
686/* ==========================================================================
687 3 = Pictos 654 3 = Pictos
688 ========================================================================== */ 655 ========================================================================== */
689 656
@@ -777,6 +744,10 @@ margin-top:1em;
777 color: #FFF; 744 color: #FFF;
778} 745}
779 746
747.icon-check.archive:before {
748 color: #FFF;
749}
750
780/* ========================================================================== 751/* ==========================================================================
781 4 = Messages 752 4 = Messages
782 ========================================================================== */ 753 ========================================================================== */
@@ -788,18 +759,6 @@ margin-top:1em;
788 759
789.messages > * { display: inline-block;} 760.messages > * { display: inline-block;}
790 761
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 { 762.warning {
804 /* font-size: 3em; 763 /* font-size: 3em;
805 color: #999; 764 color: #999;
@@ -816,6 +775,16 @@ margin-top:1em;
816 width: 100%; 775 width: 100%;
817} 776}
818 777
778.more-info {
779 font-size: 0.85em;
780 line-height: 1.5;
781 color: #aaa;
782}
783
784 .more-info a {
785 color: #aaa;
786 }
787
819/* ========================================================================== 788/* ==========================================================================
820 5 = Article 789 5 = Article
821 ========================================================================== */ 790 ========================================================================== */
@@ -841,6 +810,10 @@ blockquote {
841 margin: 0; 810 margin: 0;
842} 811}
843 812
813#article h1 {
814 text-align: left;
815}
816
844#article h2, #article h3, #article h4 { 817#article h2, #article h3, #article h4 {
845 text-transform: none; 818 text-transform: none;
846} 819}
@@ -1029,6 +1002,9 @@ pre code {
1029 height: auto; 1002 height: auto;
1030 padding-top: 3em; 1003 padding-top: 3em;
1031 } 1004 }
1005 #links.menu--open {
1006 display: block;
1007 }
1032 footer { 1008 footer {
1033 position: static; 1009 position: static;
1034 margin-right: 3em; 1010 margin-right: 3em;
@@ -1058,8 +1034,16 @@ pre code {
1058 display: none; 1034 display: none;
1059 } 1035 }
1060 1036
1061 #bagit-form, #search-form { 1037 .popup-form, #bagit-form, #search-form {
1062 left: 0; 1038 left: 0;
1039 width: 100%;
1040 border-left: none;
1041 }
1042
1043 .popup-form form,
1044 #bagit-form form,
1045 #search-form form {
1046 width: 100%;
1063 } 1047 }
1064} 1048}
1065 1049