]> git.immae.eu Git - github/wallabag/wallabag.git/blob - themes/baggy/css/main.css
Merge pull request #595 from wallabag/dev
[github/wallabag/wallabag.git] / themes / baggy / css / main.css
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
13 html {
14 min-height: 100%;
15 }
16
17 body {
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
68 h2, h3, h4 {
69 font-family: 'PT Sans', sans-serif;
70 text-transform: uppercase;
71 }
72
73 p, li {
74 color: #666;
75 }
76
77 a {
78 color: #000;
79 font-weight: bold;
80 }
81
82 a:hover, a:focus {
83 text-decoration: none;
84 }
85
86 form fieldset {
87 border:0;
88 padding: 0;
89 margin: 0;
90 }
91
92 form 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
107 fieldset 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
120 fieldset label {
121 display: inline-block;
122 margin-right: 0.5em;
123 color: #666;
124 }
125
126 form .row {
127 margin-bottom: 0.5em;
128 }
129
130 form 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
154 h2: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;
176 width: 10em;
177 left: 0;
178 text-align: right;
179 background: #333;
180 padding-top: 9.5em;
181 height: 100%;
182 box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
183 z-index: 10;
184 }
185
186 #main {
187 margin-left: 13em;
188 position: relative;
189 z-index: 10;
190 padding-right: 5%;
191 padding-bottom: 1em;
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;
231 width: 10em;
232 }
233
234 #links li:last-child a:before {
235 font-size: 1.2em;
236 position: relative;
237 top: 2px;
238 }
239
240
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
296 /* ==========================================================================
297 2 = Layout
298 ========================================================================== */
299
300 #content {
301 margin-top: 5em;
302 min-height: 30em;
303 }
304
305 footer {
306 text-align: right;
307 position: relative;
308 bottom: 0;
309 right: 5em;
310 color: #999;
311 font-size: 0.8em;
312 font-style: italic;
313 z-index: 20;
314 }
315
316 footer a {
317 color: #999;
318 font-weight: normal;
319 }
320
321 .list-entries {
322 letter-spacing:-5px;
323 }
324
325 .listmode .entrie {
326 width: 100%!important;
327 margin-left: 0!important;
328 }
329
330 .listmode .entrie p {
331 display: none;
332 }
333
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;
355 width: 32%!important;
356 margin-bottom: 1.5em;
357 vertical-align: top;
358 margin-left: 1.5%!important;
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
427
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 }
439 /*
440 .entrie h2 a:after {
441 content: "";
442 position: absolute;
443 top: 0;
444 width: 100%;
445 height: 100%;
446 left: 0;
447 }
448 */
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) {
495 margin-left: 0!important;
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;
512 margin-bottom:50px;
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
539 /* ==========================================================================
540 2.1 = "save a link" popup div related styles
541 ========================================================================== */
542
543 #bagit-form {
544 background: rgba(0,0,0,0.5);
545 position: absolute;
546 top: 0;
547 left: 10em;
548 z-index: 20;
549 height: 100%;
550 width: 100%;
551 margin: 0;
552 margin-top: -30%;
553 padding: 2em;
554 display: none;
555 border-left: 1px #EEE solid;
556 }
557
558 #bagit-form form {
559 background: #FFF;
560 position: absolute;
561 top: 0;
562 left: 0;
563 z-index: 20;
564 border: 10px solid #000;
565 width: 400px;
566 height: 200px;
567 /* margin: -150px 0 0 -300px; */
568 padding: 2em;
569 }
570
571 a#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 }
580 a#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 }
611
612 #add-link-result {
613 font-weight: bold;
614 margin-top: 10px;
615 }
616
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
648 a#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 }
657 a#search-form-close:hover {
658 background: #999;
659 color: #000;
660 }
661
662 #submit-search{
663 margin-left: 4em;
664 margin-top:1em;
665 }
666
667 /* ==========================================================================
668 3 = Pictos
669 ========================================================================== */
670
671 @font-face {
672 font-family: 'icomoon';
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');
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 {
763 text-align: left;
764 margin-top: 1em;
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 {
782 /* font-size: 3em;
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%;
791 margin-top: -2em;*/
792 font-weight: bold;
793 display: block;
794 width: 100%;
795 }
796
797 /* ==========================================================================
798 5 = Article
799 ========================================================================== */
800
801 #article {
802 width: 70%;
803 margin-bottom: 3em;
804 text-align: justify;
805 }
806
807 #article .tags {
808 margin-bottom: 1em;
809 }
810
811 #article i {
812 font-style: normal;
813 }
814
815 blockquote {
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 }
934 #display-mode {
935 display: none;
936 }
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 }
1026
1027 #display-mode {
1028 display: none;
1029 }
1030
1031 #bagit-form {
1032 left: 0;
1033 }
1034 }