]> git.immae.eu Git - github/wallabag/wallabag.git/blob - themes/baggy/css/main.css
Merge remote-tracking branches 'upstream/dev' and 'origin/master' into 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 .entrie h2 a {
428 display: block;
429 text-decoration: none;
430 color: #000;
431 word-wrap: break-word;
432 -webkit-transition: all 0.5s ease;
433 -moz-transition: all 0.5s ease;
434 -ms-transition: all 0.5s ease;
435 -o-transition: all 0.5s ease;
436 transition: all 0.5s ease;
437 }
438
439 .entrie h2 a:after {
440 content: "";
441 position: absolute;
442 top: 0;
443 width: 100%;
444 height: 100%;
445 left: 0;
446 }
447
448 .entrie p {
449 color: #666;
450 font-size: 0.9em;
451 line-height: 1.7;
452 }
453
454 .entrie h2 a:first-letter {
455 text-transform: uppercase;
456 }
457
458 .entrie:hover .tools {
459 bottom: 0;
460 }
461
462 .entrie .tools {
463 position: absolute;
464 bottom: -50px;
465 left: 0;
466 width: 100%;
467 z-index: 10;
468 padding-right: 0.5em;
469 text-align: right;
470 -webkit-transition: all 0.5s ease;
471 -moz-transition: all 0.5s ease;
472 -ms-transition: all 0.5s ease;
473 -o-transition: all 0.5s ease;
474 transition: all 0.5s ease;
475 }
476
477 .entrie .tools a {
478 color: #666;
479 text-decoration: none;
480 display: block;
481 padding: 0.4em;
482 }
483
484 .entrie .tools a:hover {
485 color: #FFF;
486 }
487
488 .entrie .tools li {
489 display: inline-block;
490 }
491
492 .entrie:nth-child(3n+1) {
493 margin-left: 0!important;
494 }
495
496 .results {
497 letter-spacing: -5px;
498 padding: 0 0 0.5em;
499 }
500
501 .results > * {
502 display: inline-block;
503 vertical-align: top;
504 letter-spacing: normal;
505 width: 50%;
506 }
507
508 .pagination {
509 text-align: right;
510 margin-bottom:50px;
511 }
512
513 .nb-results {
514 text-align: left;
515 font-style: italic;
516 color: #999;
517 }
518
519 .pagination > * {
520 display: inline-block;
521 margin-left: 0.5em;
522 }
523
524 .pagination a {
525 color: #999;
526 text-decoration: none;
527 }
528
529 .pagination a:hover, .pagination a:focus {
530 text-decoration: underline;
531 }
532
533 .pagination .disabled {
534 display: none;
535 }
536
537 /* ==========================================================================
538 2.1 = "save a link" popup div related styles
539 ========================================================================== */
540
541 #bagit-form {
542 background: rgba(0,0,0,0.5);
543 position: absolute;
544 top: 0;
545 left: 10em;
546 z-index: 20;
547 height: 100%;
548 width: 100%;
549 margin: 0;
550 margin-top: -30%;
551 padding: 2em;
552 display: none;
553 border-left: 1px #EEE solid;
554 }
555
556 #bagit-form form {
557 background: #FFF;
558 position: absolute;
559 top: 0;
560 left: 0;
561 z-index: 20;
562 border: 10px solid #000;
563 width: 400px;
564 height: 200px;
565 /* margin: -150px 0 0 -300px; */
566 padding: 2em;
567 }
568
569 a#bagit-form-close {
570 background: #000;
571 color: #FFF;
572 padding: 0.2em 0.5em;
573 text-decoration: none;
574 display: inline-block;
575 float: right;
576 font-size: 0.6em;
577 }
578 a#bagit-form-close:hover {
579 background: #999;
580 color: #000;
581 }
582
583 .active-current {
584 background-color: #999;
585 }
586
587 .active-current:after {
588 content: "";
589 width: 0;
590 height: 0;
591 position: absolute;
592 border-style: solid;
593 border-width: 10px;
594 border-color: transparent #EEE transparent transparent;
595 right: 0;
596 top: 50%;
597 margin-top: -10px;
598 }
599
600 .opacity03 {
601 opacity: 0.3;
602 }
603
604 .add-to-wallabag-link-after {
605 background-color: #000;
606 color: #fff;
607 padding: 0 3px 2px 3px;
608 }
609
610 #add-link-result {
611 font-weight: bold;
612 margin-top: 10px;
613 }
614
615 /* ==========================================================================
616 3 = Pictos
617 ========================================================================== */
618
619 @font-face {
620 font-family: 'icomoon';
621 src:url('../fonts/icomoon.eot?-s0mcsx');
622 src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
623 url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
624 url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
625 url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
626 font-weight: normal;
627 font-style: normal;
628 }
629
630 .icon span {
631 position: absolute;
632 top: -9999px;
633 }
634
635 [class^="icon-"]:before, [class*=" icon-"]:before {
636 font-family: 'icomoon';
637 speak: none;
638 font-style: normal;
639 font-weight: normal;
640 font-variant: normal;
641 text-transform: none;
642 line-height: 1;
643
644 /* Better Font Rendering =========== */
645 -webkit-font-smoothing: antialiased;
646 -moz-osx-font-smoothing: grayscale;
647 }
648
649 .icon-flattr:before {
650 content: "\e800";
651 }
652 .icon-mail:before {
653 content: "\e80a";
654 }
655 .icon-up-open:before {
656 content: "\e80b";
657 }
658 .icon-star:before {
659 content: "\e805";
660 }
661 .icon-check:before {
662 content: "\e804";
663 }
664 .icon-link:before {
665 content: "\e801";
666 }
667 .icon-reply:before {
668 content: "\e806";
669 }
670 .icon-menu:before {
671 content: "\e802";
672 }
673 .icon-clock:before {
674 content: "\e803";
675 }
676 .icon-twitter:before {
677 content: "\e807";
678 }
679 .icon-down-open:before {
680 content: "\e809";
681 }
682 .icon-trash:before {
683 content: "\e80c";
684 }
685 .icon-delete:before {
686 content: "\e600";
687 }
688 .icon-power:before {
689 content: "\e601";
690 }
691 .icon-arrow-up-thick:before {
692 content: "\e602";
693 }
694 .icon-rss:before {
695 content: "\e808";
696 }
697
698 /* ==========================================================================
699 Icon selected
700 ========================================================================== */
701
702 .icon-star.fav:before {
703 color: #FFF;
704 }
705
706 /* ==========================================================================
707 4 = Messages
708 ========================================================================== */
709
710 .messages {
711 text-align: left;
712 margin-top: 1em;
713 }
714
715 .messages > * { display: inline-block;}
716
717 .closeMessage {
718 background: #000;
719 color: #FFF;
720 padding: 0.2em 0.5em;
721 text-decoration: none;
722 }
723
724 .closeMessage:hover, .closeMessage:focus {
725 background: #FFF;
726 color: #000;
727 }
728
729 .warning {
730 font-size: 3em;
731 color: #999;
732 font-style: italic;
733 position: absolute;
734 top: 50%;
735 left: 0;
736 width: 100%;
737 text-align: center;
738 padding-right: 5%;
739 margin-top: -2em;
740 }
741
742 /* ==========================================================================
743 5 = Article
744 ========================================================================== */
745
746 #article {
747 width: 70%;
748 margin-bottom: 3em;
749 text-align: justify;
750 }
751
752 #article .tags {
753 margin-bottom: 1em;
754 }
755
756 #article i {
757 font-style: normal;
758 }
759
760 blockquote {
761 border:1px solid #999;
762 background: #FFF;
763 padding: 1em;
764 margin: 0;
765 }
766
767 #article h2, #article h3, #article h4 {
768 text-transform: none;
769 }
770
771 #article h2:after {
772 content: none;
773 }
774
775 .topPosF {
776 position: fixed;
777 right: 20%;
778 bottom: 2em;
779 font-size: 1.5em;
780 }
781
782 #article_toolbar {
783 margin-bottom: 1em;
784 }
785
786 #article_toolbar li {
787 display: inline-block;
788 }
789
790 #article_toolbar a {
791 background: #000;
792 padding: 0.3em 0.5em 0.2em;
793 color: #FFF;
794 text-decoration: none;
795 }
796
797 #article_toolbar a:hover, #article_toolbar a:focus {
798 background: #999;
799 }
800
801 .shaarli:before {
802 content: "*";
803 }
804
805 .return {
806 text-decoration: none;
807 margin-top: 1em;
808 display: block;
809 }
810
811 .return:before {
812 margin-right: 0.5em;
813 }
814
815 .notags {
816 font-style: italic;
817 color: #999;
818 }
819
820 .icon-rss {
821 background: #000;
822 color: #FFF;
823 padding: 0.2em 0.5em;
824 }
825
826 .icon-rss:before {
827 position: relative;
828 top: 2px;
829 }
830
831 .list-tags li {
832 margin-bottom: 0.5em;
833 }
834
835 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
836 background: #FFF;
837 color: #000;
838 text-decoration: none;
839 }
840
841 .list-tags a {
842 text-decoration: none;
843 }
844
845 .list-tags a:hover, .list-tags a:focus {
846 text-decoration: underline;
847 }
848
849 /* ==========================================================================
850 6 = Media Queries
851 ========================================================================== */
852
853 @media screen and (max-width: 1050px) {
854 .entrie {
855 width: 49%;
856 }
857 .entrie:nth-child(3n+1) {
858 margin-left: 1.5%;
859 }
860 .entrie:nth-child(2n+1) {
861 margin-left: 0;
862 }
863 }
864
865 @media screen and (max-width: 900px) {
866 #article {
867 width: 80%;
868 }
869 .topPosF {
870 right: 2.5em;
871 }
872 }
873
874 @media screen and (max-width: 700px) {
875 .entrie {
876 width: 100%;
877 margin-left: 0;
878 }
879 #display-mode {
880 display: none;
881 }
882 }
883
884 @media screen and (max-width: 500px) {
885 .entrie {
886 width: 100%;
887 margin-left: 0;
888 }
889 body > header {
890 background: #333;
891 position: fixed;
892 top: 0;
893 width: 100%;
894 height: 3em;
895 z-index: 11;
896 }
897 #links li:last-child {
898 position: static;
899 width: auto;
900 }
901 #links li:last-child a:before {
902 content: none;
903 }
904 .logo {
905 width: 1.5em;
906 height: 1.5em;
907 left: 0;
908 top: 0;
909 }
910 .login > header {
911 position: static;
912 }
913 .login form {
914 width: 100%;
915 position: static;
916 margin-left: 0;
917 }
918 .login .logo {
919 width: auto;
920 height: auto;
921 top: 0.5em;
922 width: 75px;
923 height: 75px;
924 margin-left: -37.5px;
925 }
926 .desktopHide {
927 display: block;
928 position: fixed;
929 z-index: 20;
930 top: 0;
931 right: 0;
932 border:0;
933 width: 2.5em;
934 height: 2.5em;
935 cursor: pointer;
936 background: #999;
937 font-size: 1.2em;
938 }
939 .desktopHide:hover, .desktopHide:focus {
940 background: #FFF;
941 }
942 #links {
943 display: none;
944 width: 100%;
945 height: auto;
946 padding-top: 3em;
947 }
948 footer {
949 position: static;
950 margin-right: 3em;
951 }
952 #main {
953 margin-left: 1.5em;
954 padding-right: 1.5em;
955 position: static;
956 }
957 #article_toolbar .topPosF {
958 display: none;
959 }
960
961 #article {
962 width: 100%;
963 }
964
965 #article h1 {
966 font-size: 1.5em;
967 }
968 #article_toolbar a {
969 padding: 0.3em 0.4em 0.2em;
970 }
971
972 #display-mode {
973 display: none;
974 }
975
976 #bagit-form {
977 left: 0;
978 }
979 }