]> git.immae.eu Git - github/wallabag/wallabag.git/blob - themes/baggy/css/main.css
translation fix for #887 and tiny display fix
[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 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 a:hover, #links 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 -webkit-transition: all 0.5s ease;
364 -moz-transition: all 0.5s ease;
365 -ms-transition: all 0.5s ease;
366 -o-transition: all 0.5s ease;
367 transition: all 0.5s ease;
368 }
369
370 .entrie:before {
371 content: "";
372 width: 0;
373 height: 0;
374 border-style:solid;
375 border-color: transparent transparent #000 transparent;
376 border-width: 10px;
377 position: absolute;
378 bottom: 0.3em;
379 z-index: 10;
380 right: 1.5em;
381 -webkit-transition: all 0.5s ease;
382 -moz-transition: all 0.5s ease;
383 -ms-transition: all 0.5s ease;
384 -o-transition: all 0.5s ease;
385 transition: all 0.5s ease;
386 }
387
388 .entrie:after {
389 content: "";
390 position: absolute;
391 height: 7px;
392 width: 100%;
393 bottom: 0;
394 left: 0;
395 background: #000;
396 -webkit-transition: all 0.5s ease;
397 -moz-transition: all 0.5s ease;
398 -ms-transition: all 0.5s ease;
399 -o-transition: all 0.5s ease;
400 transition: all 0.5s ease;
401 }
402
403 .entrie:hover {
404 box-shadow: 0 3px 10px rgba(0,0,0,1);
405 }
406
407 .entrie:hover:after {
408 height: 40px;
409 }
410
411 .entrie:hover:before {
412 bottom: 2.4em;
413 }
414
415 .entrie:hover h2 a {
416 color: #666;
417 }
418
419 .entrie h2 {
420 text-transform: none;
421 margin-bottom: 0;
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 #bagit-form, #search-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%;
554 padding: 2em;
555 display: none;
556 border-left: 1px #EEE solid;
557 }
558
559 #bagit-form form, #search-form form {
560 background: #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 /* margin: -150px 0 0 -300px; */
569 padding: 2em;
570 }
571
572 a#bagit-form-close, a#search-form-close {
573 background: #000;
574 color: #FFF;
575 padding: 0.2em 0.5em;
576 text-decoration: none;
577 display: inline-block;
578 float: right;
579 font-size: 0.6em;
580 }
581 a#bagit-form-close:hover, a#search-form-close:hover {
582 background: #999;
583 color: #000;
584 }
585
586 .active-current {
587 background-color: #999;
588 }
589
590 .active-current:after {
591 content: "";
592 width: 0;
593 height: 0;
594 position: absolute;
595 border-style: solid;
596 border-width: 10px;
597 border-color: transparent #EEE transparent transparent;
598 right: 0;
599 top: 50%;
600 margin-top: -10px;
601 }
602
603 .opacity03 {
604 opacity: 0.3;
605 }
606
607 .add-to-wallabag-link-after {
608 background-color: #000;
609 color: #fff;
610 padding: 0 3px 2px 3px;
611 }
612
613 a.add-to-wallabag-link-after {
614 visibility: hidden;
615 position: absolute;
616 opacity: 0;
617 transition-duration: 2s;
618 transition-timing-function: ease-out;
619 }
620
621 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
622 opacity: 1;
623 visibility: visible;
624 transition-duration: .3s;
625 transition-timing-function: ease-in;
626 }
627
628 a.add-to-wallabag-link-after:after {
629 content: "w";
630 }
631
632 #add-link-result {
633 font-weight: bold;
634 font-size: 0.9em;
635 }
636
637 /* ==========================================================================
638 2.2 = "search for articles" popup div related styles
639 ========================================================================== */
640 #search-form {
641 background: rgba(0,0,0,0.5);
642 position: absolute;
643 top: 0;
644 left: 10em;
645 z-index: 20;
646 height: 100%;
647 width: 100%;
648 margin: 0;
649 margin-top: -30%;
650 padding: 2em;
651 display: none;
652 border-left: 1px #EEE solid;
653 }
654
655 #search-form form {
656 background: #FFF;
657 position: absolute;
658 top: 0;
659 left: 0;
660 z-index: 20;
661 border: 10px solid #000;
662 width: 400px;
663 height: 200px;
664 /* margin: -150px 0 0 -300px; */
665 padding: 2em;
666 }
667
668 a#search-form-close {
669 background: #000;
670 color: #FFF;
671 padding: 0.2em 0.5em;
672 text-decoration: none;
673 display: inline-block;
674 float: right;
675 font-size: 1.2em;
676 }
677 a#search-form-close:hover {
678 background: #999;
679 color: #000;
680 }
681
682 #submit-search{
683 margin-left: 4em;
684 margin-top:1em;
685 }
686
687 /* ==========================================================================
688 3 = Pictos
689 ========================================================================== */
690
691 @font-face {
692 font-family: 'icomoon';
693 src:url('../fonts/icomoon.eot?-s0mcsx');
694 src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
695 url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
696 url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
697 url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
698 font-weight: normal;
699 font-style: normal;
700 }
701
702 .icon span {
703 position: absolute;
704 top: -9999px;
705 }
706
707 [class^="icon-"]:before, [class*=" icon-"]:before {
708 font-family: 'icomoon';
709 speak: none;
710 font-style: normal;
711 font-weight: normal;
712 font-variant: normal;
713 text-transform: none;
714 line-height: 1;
715
716 /* Better Font Rendering =========== */
717 -webkit-font-smoothing: antialiased;
718 -moz-osx-font-smoothing: grayscale;
719 }
720
721 .icon-flattr:before {
722 content: "\e800";
723 }
724 .icon-mail:before {
725 content: "\e80a";
726 }
727 .icon-up-open:before {
728 content: "\e80b";
729 }
730 .icon-star:before {
731 content: "\e805";
732 }
733 .icon-check:before {
734 content: "\e804";
735 }
736 .icon-link:before {
737 content: "\e801";
738 }
739 .icon-reply:before {
740 content: "\e806";
741 }
742 .icon-menu:before {
743 content: "\e802";
744 }
745 .icon-clock:before {
746 content: "\e803";
747 }
748 .icon-twitter:before {
749 content: "\e807";
750 }
751 .icon-down-open:before {
752 content: "\e809";
753 }
754 .icon-trash:before {
755 content: "\e80c";
756 }
757 .icon-delete:before {
758 content: "\e600";
759 }
760 .icon-power:before {
761 content: "\e601";
762 }
763 .icon-arrow-up-thick:before {
764 content: "\e602";
765 }
766 .icon-rss:before {
767 content: "\e808";
768 }
769 .icon-print:before {
770 content: "\e80d";
771 }
772
773 /* ==========================================================================
774 Icon selected
775 ========================================================================== */
776
777 .icon-star.fav:before {
778 color: #FFF;
779 }
780
781 /* ==========================================================================
782 4 = Messages
783 ========================================================================== */
784
785 .messages {
786 text-align: left;
787 margin-top: 1em;
788 }
789
790 .messages > * { display: inline-block;}
791
792 .closeMessage {
793 background: #000;
794 color: #FFF;
795 padding: 0.2em 0.5em;
796 text-decoration: none;
797 }
798
799 .closeMessage:hover, .closeMessage:focus {
800 background: #FFF;
801 color: #000;
802 }
803
804 .warning {
805 /* font-size: 3em;
806 color: #999;
807 font-style: italic;
808 position: absolute;
809 top: 50%;
810 left: 0;
811 width: 100%;
812 text-align: center;
813 padding-right: 5%;
814 margin-top: -2em;*/
815 font-weight: bold;
816 display: block;
817 width: 100%;
818 }
819
820 /* ==========================================================================
821 5 = Article
822 ========================================================================== */
823
824 #article {
825 width: 70%;
826 margin-bottom: 3em;
827 text-align: justify;
828 }
829
830 #article .tags {
831 margin-bottom: 1em;
832 }
833
834 #article i {
835 font-style: normal;
836 }
837
838 blockquote {
839 border:1px solid #999;
840 background: #FFF;
841 padding: 1em;
842 margin: 0;
843 }
844
845 #article h2, #article h3, #article h4 {
846 text-transform: none;
847 }
848
849 #article h2:after {
850 content: none;
851 }
852
853 .topPosF {
854 position: fixed;
855 right: 20%;
856 bottom: 2em;
857 font-size: 1.5em;
858 }
859
860 #article_toolbar {
861 margin-bottom: 1em;
862 }
863
864 #article_toolbar li {
865 display: inline-block;
866 }
867
868 #article_toolbar a {
869 background: #000;
870 padding: 0.3em 0.5em 0.2em;
871 color: #FFF;
872 text-decoration: none;
873 }
874
875 #article_toolbar a:hover, #article_toolbar a:focus {
876 background: #999;
877 }
878
879 .shaarli:before {
880 content: "*";
881 }
882
883 .return {
884 text-decoration: none;
885 margin-top: 1em;
886 display: block;
887 }
888
889 .return:before {
890 margin-right: 0.5em;
891 }
892
893 .notags {
894 font-style: italic;
895 color: #999;
896 }
897
898 .icon-rss {
899 background: #000;
900 color: #FFF;
901 padding: 0.2em 0.5em;
902 }
903
904 .icon-rss:before {
905 position: relative;
906 top: 2px;
907 }
908
909 .list-tags li {
910 margin-bottom: 0.5em;
911 }
912
913 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
914 background: #FFF;
915 color: #000;
916 text-decoration: none;
917 }
918
919 .list-tags a {
920 text-decoration: none;
921 }
922
923 .list-tags a:hover, .list-tags a:focus {
924 text-decoration: underline;
925 }
926
927 pre code {
928 font-family: "Courier New", Courier, monospace;
929 border: 1px solid #ccc;
930 font-size: 0.96em;
931 }
932
933
934 /* ==========================================================================
935 6 = Media Queries
936 ========================================================================== */
937
938 @media screen and (max-width: 1050px) {
939 .entrie {
940 width: 49%;
941 }
942 .entrie:nth-child(3n+1) {
943 margin-left: 1.5%;
944 }
945 .entrie:nth-child(2n+1) {
946 margin-left: 0;
947 }
948 }
949
950 @media screen and (max-width: 900px) {
951 #article {
952 width: 80%;
953 }
954 .topPosF {
955 right: 2.5em;
956 }
957 }
958
959 @media screen and (max-width: 700px) {
960 .entrie {
961 width: 100%;
962 margin-left: 0;
963 }
964 #display-mode {
965 display: none;
966 }
967 }
968
969 @media screen and (max-width: 500px) {
970 .entrie {
971 width: 100%;
972 margin-left: 0;
973 }
974 body > header {
975 background: #333;
976 position: fixed;
977 top: 0;
978 width: 100%;
979 height: 3em;
980 z-index: 11;
981 }
982 #links li:last-child {
983 position: static;
984 width: auto;
985 }
986 #links li:last-child a:before {
987 content: none;
988 }
989 .logo {
990 width: 1.25em;
991 height: 1.25em;
992 left: 0;
993 top: 0;
994 }
995 .login > header {
996 position: static;
997 }
998 .login form {
999 width: 100%;
1000 position: static;
1001 margin-left: 0;
1002 }
1003 .login .logo {
1004 width: auto;
1005 height: auto;
1006 top: 0.5em;
1007 width: 75px;
1008 height: 75px;
1009 margin-left: -37.5px;
1010 }
1011 .desktopHide {
1012 display: block;
1013 position: fixed;
1014 z-index: 20;
1015 top: 0;
1016 right: 0;
1017 border:0;
1018 width: 2.5em;
1019 height: 2.5em;
1020 cursor: pointer;
1021 background: #999;
1022 font-size: 1.2em;
1023 }
1024 .desktopHide:hover, .desktopHide:focus {
1025 background: #FFF;
1026 }
1027 #links {
1028 display: none;
1029 width: 100%;
1030 height: auto;
1031 padding-top: 3em;
1032 }
1033 footer {
1034 position: static;
1035 margin-right: 3em;
1036 }
1037 #main {
1038 margin-left: 1.5em;
1039 padding-right: 1.5em;
1040 position: static;
1041 margin-top: 3em;
1042 }
1043 #article_toolbar .topPosF {
1044 display: none;
1045 }
1046
1047 #article {
1048 width: 100%;
1049 }
1050
1051 #article h1 {
1052 font-size: 1.5em;
1053 }
1054 #article_toolbar a {
1055 padding: 0.3em 0.4em 0.2em;
1056 }
1057
1058 #display-mode {
1059 display: none;
1060 }
1061
1062 #bagit-form, #search-form {
1063 left: 0;
1064 }
1065 }
1066