]> git.immae.eu Git - github/wallabag/wallabag.git/blob - themes/baggy/css/main.css
78d56612420af02bdc1b5e2f2e60d466dfd9123a
[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-color: #EEE;
19 }
20
21 .login {
22 background-color: #333;
23 }
24
25 .login #main {
26 padding: 0;
27 margin: 0;
28 }
29
30 .login form {
31 background-color: #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-color: #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, label {
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 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 .inline .row {
108 display: inline-block;
109 margin-right: 0.5em;
110 }
111
112 .inline label {
113 min-width: 6em;
114 }
115
116 fieldset label {
117 display: inline-block;
118 min-width: 12.5em;
119 color: #666;
120 }
121
122 label {
123 margin-right: 0.5em;
124 }
125
126 form .row {
127 margin-bottom: 0.5em;
128 }
129
130 form button, input[type="submit"] {
131 cursor:pointer;
132 background-color: #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-color: #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-color: #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-color: #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: 15;
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 > li > 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 > li > a:hover, #links > li > a:focus {
211 background-color: #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 #listmode.tablemode {
285 background-image: url("../img/baggy/table.png");
286 background-repeat: no-repeat;
287 background-position: bottom;
288 }
289 #listmode.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 .list-entries + .results {
331 margin-bottom: 2em;
332 }
333
334 .estimatedTime .reading-time {
335 color: #999;
336 font-style: italic;
337 font-weight: normal;
338 font-size: 0.9em;
339 }
340
341 .estimatedTime small {
342 position: relative;
343 top: -1px;
344 }
345
346 .entrie {
347 background-color: #FFF;
348 letter-spacing:normal;
349 box-shadow: 0 3px 7px rgba(0,0,0,0.3);
350 display: inline-block;
351 width: 32%;
352 margin-bottom: 1.5em;
353 vertical-align: top;
354 margin-left: 1.5%;
355 position: relative;
356 overflow: hidden;
357 padding: 1.5em 1.5em 3em 1.5em;
358
359 /* Removing CSS transitions because they make the switch from list view to
360 * table view jerky
361 */
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-color: #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 line-height: 1.2;
422 }
423
424 .entrie h2:after {
425 content: none;
426 }
427
428
429 .entrie h2 a {
430 display: block;
431 text-decoration: none;
432 color: #000;
433 word-wrap: break-word;
434 -webkit-transition: all 0.5s ease;
435 -moz-transition: all 0.5s ease;
436 -ms-transition: all 0.5s ease;
437 -o-transition: all 0.5s ease;
438 transition: all 0.5s ease;
439 }
440 /*
441 .entrie h2 a:after {
442 content: "";
443 position: absolute;
444 top: 0;
445 width: 100%;
446 height: 100%;
447 left: 0;
448 }
449 */
450
451 .entrie p {
452 color: #666;
453 font-size: 0.9em;
454 line-height: 1.7;
455 }
456
457 .entrie h2 a:first-letter {
458 text-transform: uppercase;
459 }
460
461 .entrie:hover .tools {
462 bottom: 0;
463 }
464
465 .entrie .tools {
466 position: absolute;
467 bottom: -50px;
468 left: 0;
469 width: 100%;
470 z-index: 10;
471 padding-right: 0.5em;
472 text-align: right;
473 -webkit-transition: all 0.5s ease;
474 -moz-transition: all 0.5s ease;
475 -ms-transition: all 0.5s ease;
476 -o-transition: all 0.5s ease;
477 transition: all 0.5s ease;
478 }
479
480 .entrie .tools a {
481 color: #666;
482 text-decoration: none;
483 display: block;
484 padding: 0.4em;
485 }
486
487 .entrie .tools a:hover {
488 color: #FFF;
489 }
490
491 .entrie .tools li {
492 display: inline-block;
493 }
494
495 .entrie:nth-child(3n+1) {
496 margin-left: 0;
497 }
498
499 .results {
500 letter-spacing: -5px;
501 padding: 0 0 0.5em;
502 }
503
504 .results > * {
505 display: inline-block;
506 vertical-align: top;
507 letter-spacing: normal;
508 width: 50%;
509 }
510
511 .pagination {
512 text-align: right;
513 margin-bottom:50px;
514 }
515
516 .nb-results {
517 text-align: left;
518 font-style: italic;
519 color: #999;
520 }
521
522 .pagination > * {
523 display: inline-block;
524 margin-left: 0.5em;
525 }
526
527 .pagination a {
528 color: #999;
529 text-decoration: none;
530 }
531
532 .pagination a:hover, .pagination a:focus {
533 text-decoration: underline;
534 }
535
536 .pagination .disabled {
537 display: none;
538 }
539
540 /* ==========================================================================
541 2.1 = "save a link" related styles
542 ========================================================================== */
543
544 .popup-form {
545 background: rgba(0,0,0,0.5);
546 position: absolute;
547 top: 0;
548 left: 10em;
549 z-index: 20;
550 height: 100%;
551 width: 100%;
552 margin: 0;
553 margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */
554 padding: 2em;
555 display: none;
556 border-left: 1px #EEE solid;
557 }
558
559 .popup-form form {
560 background-color: #FFF;
561 position: absolute;
562 top: 0;
563 left: 0;
564 z-index: 20;
565 border: 10px solid #000;
566 width: 400px;
567 height: 200px;
568 padding: 2em;
569 }
570
571 #bagit-form-form .addurl {
572 margin-left: 0;
573 }
574
575 .closeMessage,
576 .close-button {
577 background-color: #000;
578 color: #FFF;
579 font-size: 1.2em;
580 line-height: 1.6;
581 width: 1.6em;
582 height: 1.6em;
583 text-align: center;
584 text-decoration: none;
585 }
586 .closeMessage:hover,
587 .closeMessage:focus,
588 .close-button:hover,
589 .close-button:focus {
590 background-color: #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;
600 }
601
602 .active-current {
603 background-color: #999;
604 }
605
606 .active-current:after {
607 content: "";
608 width: 0;
609 height: 0;
610 position: absolute;
611 border-style: solid;
612 border-width: 10px;
613 border-color: transparent #EEE transparent transparent;
614 right: 0;
615 top: 50%;
616 margin-top: -10px;
617 }
618
619 .opacity03 {
620 opacity: 0.3;
621 }
622
623 .add-to-wallabag-link-after {
624 background-color: #000;
625 color: #fff;
626 padding: 0 3px 2px 3px;
627 }
628
629 a.add-to-wallabag-link-after {
630 visibility: hidden;
631 position: absolute;
632 opacity: 0;
633 transition-duration: 2s;
634 transition-timing-function: ease-out;
635 }
636
637 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
638 opacity: 1;
639 visibility: visible;
640 transition-duration: .3s;
641 transition-timing-function: ease-in;
642 }
643
644 a.add-to-wallabag-link-after:after {
645 content: "w";
646 }
647
648 #add-link-result {
649 font-weight: bold;
650 font-size: 0.9em;
651 }
652
653 /* ==========================================================================
654 3 = Pictos
655 ========================================================================== */
656
657 @font-face {
658 font-family: 'icomoon';
659 src:url('../fonts/icomoon.eot?-s0mcsx');
660 src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
661 url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
662 url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
663 url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
664 font-weight: normal;
665 font-style: normal;
666 }
667
668 .icon span,
669 .icon-image span {
670 position: absolute;
671 top: -9999px;
672 }
673
674 [class^="icon-"]:before, [class*=" icon-"]:before {
675 font-family: 'icomoon';
676 speak: none;
677 font-style: normal;
678 font-weight: normal;
679 font-variant: normal;
680 text-transform: none;
681 line-height: 1;
682
683 /* Better Font Rendering =========== */
684 -webkit-font-smoothing: antialiased;
685 -moz-osx-font-smoothing: grayscale;
686 }
687
688 .icon-flattr:before {
689 content: "\e800";
690 }
691 .icon-mail:before {
692 content: "\e80a";
693 }
694 .icon-up-open:before {
695 content: "\e80b";
696 }
697 .icon-star:before {
698 content: "\e805";
699 }
700 .icon-check:before {
701 content: "\e804";
702 }
703 .icon-link:before {
704 content: "\e801";
705 }
706 .icon-reply:before {
707 content: "\e806";
708 }
709 .icon-menu:before {
710 content: "\e802";
711 }
712 .icon-clock:before {
713 content: "\e803";
714 }
715 .icon-twitter:before {
716 content: "\e807";
717 }
718 .icon-down-open:before {
719 content: "\e809";
720 }
721 .icon-trash:before {
722 content: "\e80c";
723 }
724 .icon-delete:before {
725 content: "\e600";
726 }
727 .icon-power:before {
728 content: "\e601";
729 }
730 .icon-arrow-up-thick:before {
731 content: "\e602";
732 }
733 .icon-rss:before {
734 content: "\e808";
735 }
736 .icon-print:before {
737 content: "\e80d";
738 }
739 .icon-random:before {
740 // RANDOM ICON TO ADD
741 }
742
743
744 /* .icon-image class, for image-based icons
745 ========================================================================== */
746
747 .icon-image {
748 background-size: 16px 16px;
749 background-repeat: no-repeat;
750 background-position: center;
751 padding-right: 1em !important;
752 padding-left: 1em !important;
753 }
754
755 /* Carrot (http://carrot.org) */
756 .icon-image--carrot {
757 background-image: url('../../_global/img/icons/carrot-icon--white.png');
758 }
759
760 /* Diaspora */
761 .icon-image--diaspora {
762 background-image: url('../../_global/img/icons/diaspora-icon--black.png');
763 }}
764
765 /* ==========================================================================
766 Icon selected
767 ========================================================================== */
768
769 .icon-star.fav:before {
770 color: #FFF;
771 }
772
773 .icon-check.archive:before {
774 color: #FFF;
775 }
776
777 /* ==========================================================================
778 4 = Messages
779 ========================================================================== */
780
781 .messages {
782 text-align: left;
783 margin-top: 1em;
784 }
785
786 .messages > * { display: inline-block;}
787
788 .warning {
789 /* font-size: 3em;
790 color: #999;
791 font-style: italic;
792 position: absolute;
793 top: 50%;
794 left: 0;
795 width: 100%;
796 text-align: center;
797 padding-right: 5%;
798 margin-top: -2em;*/
799 font-weight: bold;
800 display: block;
801 width: 100%;
802 }
803
804 .more-info {
805 font-size: 0.85em;
806 line-height: 1.5;
807 color: #aaa;
808 }
809
810 .more-info a {
811 color: #aaa;
812 }
813
814 /* ==========================================================================
815 5 = Article
816 ========================================================================== */
817
818 #article {
819 width: 70%;
820 margin-bottom: 3em;
821 text-align: justify;
822 }
823
824 #article .tags {
825 margin-bottom: 1em;
826 }
827
828 #article i {
829 font-style: normal;
830 }
831
832 blockquote {
833 border:1px solid #999;
834 background-color: #FFF;
835 padding: 1em;
836 margin: 0;
837 }
838
839 #article h1 {
840 text-align: left;
841 }
842
843 #article h2, #article h3, #article h4 {
844 text-transform: none;
845 }
846
847 #article h2:after {
848 content: none;
849 }
850
851 .topPosF {
852 position: fixed;
853 right: 20%;
854 bottom: 2em;
855 font-size: 1.5em;
856 }
857
858 #article_toolbar {
859 margin-bottom: 1em;
860 }
861
862 #article_toolbar li {
863 display: inline-block;
864 }
865
866 #article_toolbar a {
867 background-color: #000;
868 padding: 0.3em 0.5em 0.2em;
869 color: #FFF;
870 text-decoration: none;
871 }
872
873 #article_toolbar a:hover, #article_toolbar a:focus {
874 background-color: #999;
875 }
876
877 .shaarli:before {
878 content: "*";
879 }
880
881 .return {
882 text-decoration: none;
883 margin-top: 1em;
884 display: block;
885 }
886
887 .return:before {
888 margin-right: 0.5em;
889 }
890
891 .notags {
892 font-style: italic;
893 color: #999;
894 }
895
896 .icon-rss {
897 background-color: #000;
898 color: #FFF;
899 padding: 0.2em 0.5em;
900 }
901
902 .icon-rss:before {
903 position: relative;
904 top: 2px;
905 }
906
907 .list-tags li {
908 margin-bottom: 0.5em;
909 }
910
911 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
912 background-color: #FFF;
913 color: #000;
914 text-decoration: none;
915 }
916
917 .list-tags a {
918 text-decoration: none;
919 }
920
921 .list-tags a:hover, .list-tags a:focus {
922 text-decoration: underline;
923 }
924
925 pre code {
926 font-family: "Courier New", Courier, monospace;
927 border: 1px solid #ccc;
928 font-size: 0.96em;
929 }
930
931
932 /* ==========================================================================
933 6 = Media Queries
934 ========================================================================== */
935
936 @media screen and (max-width: 1050px) {
937 .entrie {
938 width: 49%;
939 }
940 .entrie:nth-child(3n+1) {
941 margin-left: 1.5%;
942 }
943 .entrie:nth-child(2n+1) {
944 margin-left: 0;
945 }
946 }
947
948 @media screen and (max-width: 900px) {
949 #article {
950 width: 80%;
951 }
952 .topPosF {
953 right: 2.5em;
954 }
955 }
956
957 @media screen and (max-width: 700px) {
958 .entrie {
959 width: 100%;
960 margin-left: 0;
961 }
962 #display-mode {
963 display: none;
964 }
965 }
966
967 @media screen and (max-width: 500px) {
968 .entrie {
969 width: 100%;
970 margin-left: 0;
971 }
972 body > header {
973 background-color: #333;
974 position: fixed;
975 top: 0;
976 width: 100%;
977 height: 3em;
978 z-index: 11;
979 }
980 #links li:last-child {
981 position: static;
982 width: auto;
983 }
984 #links li:last-child a:before {
985 content: none;
986 }
987 .logo {
988 width: 1.25em;
989 height: 1.25em;
990 left: 0;
991 top: 0;
992 }
993 .login > header {
994 position: static;
995 }
996 .login form {
997 width: 100%;
998 position: static;
999 margin-left: 0;
1000 }
1001 .login .logo {
1002 width: auto;
1003 height: auto;
1004 top: 0.5em;
1005 width: 75px;
1006 height: 75px;
1007 margin-left: -37.5px;
1008 }
1009 .desktopHide {
1010 display: block;
1011 position: fixed;
1012 z-index: 20;
1013 top: 0;
1014 right: 0;
1015 border:0;
1016 width: 2.5em;
1017 height: 2.5em;
1018 cursor: pointer;
1019 background-color: #999;
1020 font-size: 1.2em;
1021 }
1022 .desktopHide:hover, .desktopHide:focus {
1023 background-color: #FFF;
1024 }
1025 #links {
1026 display: none;
1027 width: 100%;
1028 height: auto;
1029 padding-top: 3em;
1030 }
1031 #links.menu--open {
1032 display: block;
1033 }
1034 footer {
1035 position: static;
1036 margin-right: 3em;
1037 }
1038 #main {
1039 margin-left: 1.5em;
1040 padding-right: 1.5em;
1041 position: static;
1042 margin-top: 3em;
1043 }
1044 #article_toolbar .topPosF {
1045 display: none;
1046 }
1047
1048 #article {
1049 width: 100%;
1050 }
1051
1052 #article h1 {
1053 font-size: 1.5em;
1054 }
1055 #article_toolbar a {
1056 padding: 0.3em 0.4em 0.2em;
1057 }
1058
1059 #display-mode {
1060 display: none;
1061 }
1062
1063 .popup-form, #bagit-form, #search-form {
1064 left: 0;
1065 width: 100%;
1066 border-left: none;
1067 }
1068
1069 .popup-form form,
1070 #bagit-form form,
1071 #search-form form {
1072 width: 100%;
1073 }
1074 }