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