]> git.immae.eu Git - github/wallabag/wallabag.git/blame - themes/baggy/css/main.css
import w/o cron: fix of "click to finish import" in baggy theme
[github/wallabag/wallabag.git] / themes / baggy / css / main.css
CommitLineData
943ac3c7
NL
1/* ==========================================================================
2 Sommaire
3
4 1 = Style Guide
5 2 = Layout
6 3 = Pictos
7 4 = Messages
8 5 = Article
9 6 = Media queries
10
11 ========================================================================== */
12
13html {
14 min-height: 100%;
15}
16
17body {
18 background: #EEE;
19}
20
21.login {
22 background: #333;
23}
24
25.login #main {
26 padding: 0;
27 margin: 0;
28}
29
30.login form {
31 background: #FFF;
32 padding: 1.5em;
33 box-shadow: 0 1px 8px rgba(0,0,0,0.9);
34 width: 20em;
35 position: absolute;
36 top: 8em;
37 left: 50%;
38 margin-left: -10em;
39}
40
41.login .logo {
42 position: absolute;
43 top: 2em;
44 left: 50%;
45 margin-left: -55px;
46}
47
48/* ==========================================================================
49 1 = Style Guide
50 ========================================================================== */
51
52::selection {
53 color: #FFF;
54 background: #000;
55}
56
57.desktopHide {
58 display: none;
59}
60
61.logo {
62 position: fixed;
63 z-index: 20;
64 top: 0.4em;
65 left: 0.6em;
66}
67
68h2, h3, h4 {
69 font-family: 'PT Sans', sans-serif;
70 text-transform: uppercase;
71}
72
73p, li {
74 color: #666;
75}
76
77a {
78 color: #000;
79 font-weight: bold;
80}
81
82a:hover, a:focus {
83 text-decoration: none;
84}
85
86form fieldset {
87 border:0;
88 padding: 0;
89 margin: 0;
90}
91
92form input[type="text"], select, form input[type="password"], form input[type="url"] {
93 border: 1px solid #999;
94 padding: 0.5em 1em;
95 min-width: 12em;
96 color: #666;
97}
98
99@media screen and (-webkit-min-device-pixel-ratio:0){
100 select{
101 -webkit-appearance: none;
102 border-radius: 0;
103 background: #FFF url(../img/bg-select.png) no-repeat right center;
104 }
105}
106
107fieldset label {
108 min-width: 12.5em;
109}
110
111.inline .row {
112 display: inline-block;
113 margin-right: 0.5em;
114}
115
116.inline label {
117 min-width: 6em;
118}
119
120fieldset label {
121 display: inline-block;
122 margin-right: 0.5em;
123 color: #666;
124}
125
126form .row {
127 margin-bottom: 0.5em;
128}
129
130form button, input[type="submit"] {
131 cursor:pointer;
132 background: #000;
133 color: #FFF;
134 border:0;
135 padding: 0.5em 1em;
136 display: inline-block;
137 border:1px solid #000;
138}
139
140 form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
141 background: #FFF;
142 color: #000;
143 -webkit-transition: all 0.5s ease;
144 -moz-transition: all 0.5s ease;
145 -ms-transition: all 0.5s ease;
146 -o-transition: all 0.5s ease;
147 transition: all 0.5s ease;
148 }
149
150#bookmarklet {
151 cursor: move;
152}
153
154h2:after {
155 content: "";
156 height: 4px;
157 width: 70px;
158 background: #000;
159 display: block;
160}
161
162.links {
163 padding: 0;
164 margin: 0;
165}
166 .links li {
167 list-style: none;
168 margin: 0;
169 padding: 0;
170 }
171
172
173#links {
174 position: fixed;
175 top: 0;
4744cb0e 176 width: 10em;
943ac3c7
NL
177 left: 0;
178 text-align: right;
179 background: #333;
36a733af 180 padding-top: 9.5em;
943ac3c7
NL
181 height: 100%;
182 box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
183 z-index: 10;
184}
185
186#main {
4744cb0e 187 margin-left: 13em;
943ac3c7
NL
188 position: relative;
189 z-index: 10;
190 padding-right: 5%;
36a733af 191 padding-bottom: 1em;
943ac3c7
NL
192}
193
194 #links a {
195 display: block;
196 padding: 0.5em 2em 0.5em 1em;
197 color: #FFF;
198 position: relative;
199 text-transform: uppercase;
200 text-decoration: none;
201 font-weight: normal;
202 font-family: 'PT Sans', sans-serif;
203 -webkit-transition: all 0.5s ease;
204 -moz-transition: all 0.5s ease;
205 -ms-transition: all 0.5s ease;
206 -o-transition: all 0.5s ease;
207 transition: all 0.5s ease;
208 }
209
210 #links a:hover, #links a:focus {
211 background: #999;
212 color: #000;
213 }
214
215 #links .current:after {
216 content: "";
217 width: 0;
218 height: 0;
219 position: absolute;
220 border-style: solid;
221 border-width: 10px;
222 border-color: transparent #EEE transparent transparent;
223 right: 0;
224 top: 50%;
225 margin-top: -10px;
226 }
227
228 #links li:last-child {
229 position: fixed;
230 bottom: 1em;
4744cb0e 231 width: 10em;
943ac3c7
NL
232 }
233
234 #links li:last-child a:before {
235 font-size: 1.2em;
236 position: relative;
237 top: 2px;
238 }
239
240
36a733af
MR
241#sort {
242 padding: 0;
243 list-style-type: none;
244 opacity: 0.5;
245 display: inline-block;
246}
247
248#sort li {
249 display: inline;
250 font-size: 0.9em;
251}
252
253#sort li + li {
254 margin-left: 10px;
255}
256
257#sort a {
258 padding: 2px 2px 0;
259 vertical-align: middle;
260}
261
262#sort img {
263 vertical-align: baseline;
264}
265#sort img:hover {
266 cursor: pointer;
267}
268
269#display-mode {
270 float: right;
271 vertical-align: middle;
272 margin-top: 10px;
273 margin-bottom: 10px;
274 opacity: 0.5;
275}
276#listmode {
277 width: 16px;
278 display: inline-block;
279 text-decoration: none;
280}
281#listmode a:hover {
282 opacity: 1;
283}
284.tablemode {
285 background-image: url("../img/baggy/table.png");
286 background-repeat: no-repeat;
287 background-position: bottom;
288}
289.listmode {
290 background-image: url("../img/baggy/list.png");
291 background-repeat: no-repeat;
292 background-position: bottom;
293}
294
295
943ac3c7
NL
296/* ==========================================================================
297 2 = Layout
298 ========================================================================== */
299
300#content {
301 margin-top: 5em;
302 min-height: 30em;
303}
304
305footer {
306 text-align: right;
36a733af 307 position: relative;
943ac3c7
NL
308 bottom: 0;
309 right: 5em;
310 color: #999;
311 font-size: 0.8em;
312 font-style: italic;
565bb72d 313 z-index: 20;
943ac3c7
NL
314}
315
316footer a {
317 color: #999;
318 font-weight: normal;
319}
320
321.list-entries {
322 letter-spacing:-5px;
323}
324
4744cb0e
TL
325.listmode .entrie {
326 width: 100%!important;
327 margin-left: 0!important;
328}
329
330.listmode .entrie p {
331 display: none;
332}
333
943ac3c7
NL
334.list-entries + .results {
335 margin-bottom: 2em;
336}
337
338.estimatedTime a {
339 color: #999;
340 font-style: italic;
341 font-weight: normal;
342 font-size: 0.9em;
343}
344
345.estimatedTime small {
346 position: relative;
347 top: -1px;
348}
349
350.entrie {
351 background: #FFF;
352 letter-spacing:normal;
353 box-shadow: 0 3px 7px rgba(0,0,0,0.3);
354 display: inline-block;
4744cb0e 355 width: 32%!important;
943ac3c7
NL
356 margin-bottom: 1.5em;
357 vertical-align: top;
4744cb0e 358 margin-left: 1.5%!important;
943ac3c7
NL
359 position: relative;
360 overflow: hidden;
361 padding: 1.5em 1.5em 3em 1.5em;
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}
368
369.entrie:before {
370 content: "";
371 width: 0;
372 height: 0;
373 border-style:solid;
374 border-color: transparent transparent #000 transparent;
375 border-width: 10px;
376 position: absolute;
377 bottom: 0.3em;
378 z-index: 10;
379 right: 1.5em;
380 -webkit-transition: all 0.5s ease;
381 -moz-transition: all 0.5s ease;
382 -ms-transition: all 0.5s ease;
383 -o-transition: all 0.5s ease;
384 transition: all 0.5s ease;
385}
386
387.entrie:after {
388 content: "";
389 position: absolute;
390 height: 7px;
391 width: 100%;
392 bottom: 0;
393 left: 0;
394 background: #000;
395 -webkit-transition: all 0.5s ease;
396 -moz-transition: all 0.5s ease;
397 -ms-transition: all 0.5s ease;
398 -o-transition: all 0.5s ease;
399 transition: all 0.5s ease;
400}
401
402.entrie:hover {
403 box-shadow: 0 3px 10px rgba(0,0,0,1);
404}
405
406.entrie:hover:after {
407 height: 40px;
408}
409
410.entrie:hover:before {
411 bottom: 2.4em;
412}
413
414.entrie:hover h2 a {
415 color: #666;
416}
417
418.entrie h2 {
419 text-transform: none;
420 margin-bottom: 0;
421}
422
423 .entrie h2:after {
424 content: none;
425 }
426
06e1a9a9 427
943ac3c7
NL
428.entrie h2 a {
429 display: block;
430 text-decoration: none;
431 color: #000;
432 word-wrap: break-word;
433 -webkit-transition: all 0.5s ease;
434 -moz-transition: all 0.5s ease;
435 -ms-transition: all 0.5s ease;
436 -o-transition: all 0.5s ease;
437 transition: all 0.5s ease;
438}
06e1a9a9 439/*
943ac3c7
NL
440.entrie h2 a:after {
441 content: "";
442 position: absolute;
443 top: 0;
444 width: 100%;
445 height: 100%;
446 left: 0;
447}
06e1a9a9 448*/
943ac3c7
NL
449
450.entrie p {
451 color: #666;
452 font-size: 0.9em;
453 line-height: 1.7;
454}
455
456 .entrie h2 a:first-letter {
457 text-transform: uppercase;
458 }
459
460.entrie:hover .tools {
461 bottom: 0;
462}
463
464.entrie .tools {
465 position: absolute;
466 bottom: -50px;
467 left: 0;
468 width: 100%;
469 z-index: 10;
470 padding-right: 0.5em;
471 text-align: right;
472 -webkit-transition: all 0.5s ease;
473 -moz-transition: all 0.5s ease;
474 -ms-transition: all 0.5s ease;
475 -o-transition: all 0.5s ease;
476 transition: all 0.5s ease;
477}
478
479 .entrie .tools a {
480 color: #666;
481 text-decoration: none;
482 display: block;
483 padding: 0.4em;
484 }
485
486 .entrie .tools a:hover {
487 color: #FFF;
488 }
489
490 .entrie .tools li {
491 display: inline-block;
492 }
493
494.entrie:nth-child(3n+1) {
4744cb0e 495 margin-left: 0!important;
943ac3c7
NL
496}
497
498.results {
499 letter-spacing: -5px;
500 padding: 0 0 0.5em;
501}
502
503.results > * {
504 display: inline-block;
505 vertical-align: top;
506 letter-spacing: normal;
507 width: 50%;
508}
509
510.pagination {
511 text-align: right;
fa37042b 512 margin-bottom:50px;
943ac3c7
NL
513}
514
515.nb-results {
516 text-align: left;
517 font-style: italic;
518 color: #999;
519}
520
521.pagination > * {
522 display: inline-block;
523 margin-left: 0.5em;
524}
525
526.pagination a {
527 color: #999;
528 text-decoration: none;
529}
530
531 .pagination a:hover, .pagination a:focus {
532 text-decoration: underline;
533 }
534
535.pagination .disabled {
536 display: none;
537}
538
6775da70
MR
539/* ==========================================================================
540 2.1 = "save a link" popup div related styles
541 ========================================================================== */
542
4744cb0e 543#bagit-form {
6775da70
MR
544 background: rgba(0,0,0,0.5);
545 position: absolute;
4744cb0e
TL
546 top: 0;
547 left: 10em;
548 z-index: 20;
549 height: 100%;
550 width: 100%;
551 margin: 0;
6775da70 552 margin-top: -30%;
4744cb0e
TL
553 padding: 2em;
554 display: none;
6775da70 555 border-left: 1px #EEE solid;
4744cb0e
TL
556}
557
558#bagit-form form {
559 background: #FFF;
560 position: absolute;
6775da70
MR
561 top: 0;
562 left: 0;
4744cb0e
TL
563 z-index: 20;
564 border: 10px solid #000;
6775da70
MR
565 width: 400px;
566 height: 200px;
567 /* margin: -150px 0 0 -300px; */
4744cb0e
TL
568 padding: 2em;
569}
570
6775da70
MR
571a#bagit-form-close {
572 background: #000;
573 color: #FFF;
574 padding: 0.2em 0.5em;
575 text-decoration: none;
576 display: inline-block;
577 float: right;
578 font-size: 0.6em;
579}
580a#bagit-form-close:hover {
581 background: #999;
582 color: #000;
583}
584
585.active-current {
586 background-color: #999;
587}
588
589.active-current:after {
590 content: "";
591 width: 0;
592 height: 0;
593 position: absolute;
594 border-style: solid;
595 border-width: 10px;
596 border-color: transparent #EEE transparent transparent;
597 right: 0;
598 top: 50%;
599 margin-top: -10px;
600}
601
602.opacity03 {
603 opacity: 0.3;
604}
605
606.add-to-wallabag-link-after {
607 background-color: #000;
608 color: #fff;
609 padding: 0 3px 2px 3px;
610}
4744cb0e 611
3ee27ee6
MR
612#add-link-result {
613 font-weight: bold;
614 margin-top: 10px;
615}
616
2c4e7a1c 617/* ==========================================================================
618 2.2 = "search for articles" popup div related styles
619 ========================================================================== */
620#search-form {
621 background: rgba(0,0,0,0.5);
622 position: absolute;
623 top: 0;
624 left: 10em;
625 z-index: 20;
626 height: 100%;
627 width: 100%;
628 margin: 0;
629 margin-top: -30%;
630 padding: 2em;
631 display: none;
632 border-left: 1px #EEE solid;
633}
634
635#search-form form {
636 background: #FFF;
637 position: absolute;
638 top: 0;
639 left: 0;
640 z-index: 20;
641 border: 10px solid #000;
642 width: 400px;
643 height: 200px;
644 /* margin: -150px 0 0 -300px; */
645 padding: 2em;
646}
647
648a#search-form-close {
649 background: #000;
650 color: #FFF;
651 padding: 0.2em 0.5em;
652 text-decoration: none;
653 display: inline-block;
654 float: right;
655 font-size: 1.2em;
656}
657a#search-form-close:hover {
658 background: #999;
659 color: #000;
660}
661
662#submit-search{
663margin-left: 4em;
664margin-top:1em;
665}
666
943ac3c7
NL
667/* ==========================================================================
668 3 = Pictos
669 ========================================================================== */
670
671@font-face {
672 font-family: 'icomoon';
cd425599
NL
673 src:url('../fonts/icomoon.eot?-s0mcsx');
674 src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
675 url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
676 url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
677 url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
943ac3c7
NL
678 font-weight: normal;
679 font-style: normal;
680}
681
682.icon span {
683 position: absolute;
684 top: -9999px;
685}
686
687[class^="icon-"]:before, [class*=" icon-"]:before {
688 font-family: 'icomoon';
689 speak: none;
690 font-style: normal;
691 font-weight: normal;
692 font-variant: normal;
693 text-transform: none;
694 line-height: 1;
695
696 /* Better Font Rendering =========== */
697 -webkit-font-smoothing: antialiased;
698 -moz-osx-font-smoothing: grayscale;
699}
700
701.icon-flattr:before {
702 content: "\e800";
703}
704.icon-mail:before {
705 content: "\e80a";
706}
707.icon-up-open:before {
708 content: "\e80b";
709}
710.icon-star:before {
711 content: "\e805";
712}
713.icon-check:before {
714 content: "\e804";
715}
716.icon-link:before {
717 content: "\e801";
718}
719.icon-reply:before {
720 content: "\e806";
721}
722.icon-menu:before {
723 content: "\e802";
724}
725.icon-clock:before {
726 content: "\e803";
727}
728.icon-twitter:before {
729 content: "\e807";
730}
731.icon-down-open:before {
732 content: "\e809";
733}
734.icon-trash:before {
735 content: "\e80c";
736}
737.icon-delete:before {
738 content: "\e600";
739}
740.icon-power:before {
741 content: "\e601";
742}
743.icon-arrow-up-thick:before {
744 content: "\e602";
745}
746.icon-rss:before {
747 content: "\e808";
748}
749
750/* ==========================================================================
751 Icon selected
752 ========================================================================== */
753
754.icon-star.fav:before {
755 color: #FFF;
756}
757
758/* ==========================================================================
759 4 = Messages
760 ========================================================================== */
761
762.messages {
032e0ca1
MR
763 text-align: left;
764 margin-top: 1em;
943ac3c7
NL
765}
766
767.messages > * { display: inline-block;}
768
769.closeMessage {
770 background: #000;
771 color: #FFF;
772 padding: 0.2em 0.5em;
773 text-decoration: none;
774}
775
776 .closeMessage:hover, .closeMessage:focus {
777 background: #FFF;
778 color: #000;
779 }
780
781.warning {
a4585f7e 782 /* font-size: 3em;
943ac3c7
NL
783 color: #999;
784 font-style: italic;
785 position: absolute;
786 top: 50%;
787 left: 0;
788 width: 100%;
789 text-align: center;
790 padding-right: 5%;
a4585f7e
MR
791 margin-top: -2em;*/
792 font-weight: bold;
793 display: block;
794 width: 100%;
943ac3c7
NL
795}
796
797/* ==========================================================================
798 5 = Article
799 ========================================================================== */
800
801#article {
802 width: 70%;
803 margin-bottom: 3em;
3ee27ee6 804 text-align: justify;
943ac3c7
NL
805}
806
807#article .tags {
808 margin-bottom: 1em;
809}
810
811#article i {
812 font-style: normal;
813}
814
815blockquote {
816 border:1px solid #999;
817 background: #FFF;
818 padding: 1em;
819 margin: 0;
820}
821
822#article h2, #article h3, #article h4 {
823 text-transform: none;
824}
825
826#article h2:after {
827 content: none;
828}
829
830.topPosF {
831 position: fixed;
832 right: 20%;
833 bottom: 2em;
834 font-size: 1.5em;
835}
836
837#article_toolbar {
838 margin-bottom: 1em;
839}
840
841#article_toolbar li {
842 display: inline-block;
843}
844
845#article_toolbar a {
846 background: #000;
847 padding: 0.3em 0.5em 0.2em;
848 color: #FFF;
849 text-decoration: none;
850}
851
852 #article_toolbar a:hover, #article_toolbar a:focus {
853 background: #999;
854 }
855
856.shaarli:before {
857 content: "*";
858}
859
860.return {
861 text-decoration: none;
862 margin-top: 1em;
863 display: block;
864}
865
866.return:before {
867 margin-right: 0.5em;
868}
869
870.notags {
871 font-style: italic;
872 color: #999;
873}
874
875.icon-rss {
876 background: #000;
877 color: #FFF;
878 padding: 0.2em 0.5em;
879}
880
881.icon-rss:before {
882 position: relative;
883 top: 2px;
884}
885
886.list-tags li {
887 margin-bottom: 0.5em;
888}
889
890.list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
891 background: #FFF;
892 color: #000;
893 text-decoration: none;
894}
895
896.list-tags a {
897 text-decoration: none;
898}
899
900.list-tags a:hover, .list-tags a:focus {
901 text-decoration: underline;
902}
903
904/* ==========================================================================
905 6 = Media Queries
906 ========================================================================== */
907
908@media screen and (max-width: 1050px) {
909 .entrie {
910 width: 49%;
911 }
912 .entrie:nth-child(3n+1) {
913 margin-left: 1.5%;
914 }
915 .entrie:nth-child(2n+1) {
916 margin-left: 0;
917 }
918}
919
920@media screen and (max-width: 900px) {
921 #article {
922 width: 80%;
923 }
924 .topPosF {
925 right: 2.5em;
926 }
927}
928
929@media screen and (max-width: 700px) {
930 .entrie {
931 width: 100%;
932 margin-left: 0;
933 }
36a733af
MR
934 #display-mode {
935 display: none;
936 }
943ac3c7
NL
937}
938
939@media screen and (max-width: 500px) {
940 .entrie {
941 width: 100%;
942 margin-left: 0;
943 }
944 body > header {
945 background: #333;
946 position: fixed;
947 top: 0;
948 width: 100%;
949 height: 3em;
950 z-index: 11;
951 }
952 #links li:last-child {
953 position: static;
954 width: auto;
955 }
956 #links li:last-child a:before {
957 content: none;
958 }
959 .logo {
960 width: 1.5em;
961 height: 1.5em;
962 left: 0;
963 top: 0;
964 }
965 .login > header {
966 position: static;
967 }
968 .login form {
969 width: 100%;
970 position: static;
971 margin-left: 0;
972 }
973 .login .logo {
974 width: auto;
975 height: auto;
976 top: 0.5em;
977 width: 75px;
978 height: 75px;
979 margin-left: -37.5px;
980 }
981 .desktopHide {
982 display: block;
983 position: fixed;
984 z-index: 20;
985 top: 0;
986 right: 0;
987 border:0;
988 width: 2.5em;
989 height: 2.5em;
990 cursor: pointer;
991 background: #999;
992 font-size: 1.2em;
993 }
994 .desktopHide:hover, .desktopHide:focus {
995 background: #FFF;
996 }
997 #links {
998 display: none;
999 width: 100%;
1000 height: auto;
1001 padding-top: 3em;
1002 }
1003 footer {
1004 position: static;
1005 margin-right: 3em;
1006 }
1007 #main {
1008 margin-left: 1.5em;
1009 padding-right: 1.5em;
1010 position: static;
1011 }
1012 #article_toolbar .topPosF {
1013 display: none;
1014 }
1015
1016 #article {
1017 width: 100%;
1018 }
1019
1020 #article h1 {
1021 font-size: 1.5em;
1022 }
1023 #article_toolbar a {
1024 padding: 0.3em 0.4em 0.2em;
1025 }
36a733af
MR
1026
1027 #display-mode {
1028 display: none;
1029 }
6775da70
MR
1030
1031 #bagit-form {
1032 left: 0;
1033 }
032e0ca1 1034}