aboutsummaryrefslogtreecommitdiffhomepage
path: root/themes/baggy/public/css/main.css
diff options
context:
space:
mode:
Diffstat (limited to 'themes/baggy/public/css/main.css')
-rwxr-xr-xthemes/baggy/public/css/main.css1071
1 files changed, 1071 insertions, 0 deletions
diff --git a/themes/baggy/public/css/main.css b/themes/baggy/public/css/main.css
new file mode 100755
index 00000000..1df82910
--- /dev/null
+++ b/themes/baggy/public/css/main.css
@@ -0,0 +1,1071 @@
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
13html {
14 min-height: 100%;
15}
16
17body {
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
68h2, h3, h4 {
69 font-family: 'PT Sans', sans-serif;
70 text-transform: uppercase;
71}
72
73p, li, label {
74 color: #666;
75}
76
77a {
78 color: #000;
79 font-weight: bold;
80}
81
82a:hover, a:focus {
83 text-decoration: none;
84}
85
86form fieldset {
87 border:0;
88 padding: 0;
89 margin: 0;
90}
91
92form 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
116fieldset label {
117 display: inline-block;
118 min-width: 12.5em;
119 color: #666;
120}
121
122label {
123 margin-right: 0.5em;
124}
125
126form .row {
127 margin-bottom: 0.5em;
128}
129
130form 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
154h2: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
305footer {
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
316footer 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
629a.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
644a.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
740
741/* .icon-image class, for image-based icons
742 ========================================================================== */
743
744.icon-image {
745 background-size: 16px 16px;
746 background-repeat: no-repeat;
747 background-position: center;
748 padding-right: 1em !important;
749 padding-left: 1em !important;
750}
751
752/* Carrot (http://carrot.org) */
753.icon-image--carrot {
754 background-image: url('../../_global/img/icons/carrot-icon--white.png');
755}
756
757/* Diaspora */
758.icon-image--diaspora {
759 background-image: url('../../_global/img/icons/diaspora-icon--black.png');
760}}
761
762/* ==========================================================================
763 Icon selected
764 ========================================================================== */
765
766.icon-star.fav:before {
767 color: #FFF;
768}
769
770.icon-check.archive:before {
771 color: #FFF;
772}
773
774/* ==========================================================================
775 4 = Messages
776 ========================================================================== */
777
778.messages {
779 text-align: left;
780 margin-top: 1em;
781}
782
783.messages > * { display: inline-block;}
784
785.warning {
786 /* font-size: 3em;
787 color: #999;
788 font-style: italic;
789 position: absolute;
790 top: 50%;
791 left: 0;
792 width: 100%;
793 text-align: center;
794 padding-right: 5%;
795 margin-top: -2em;*/
796 font-weight: bold;
797 display: block;
798 width: 100%;
799}
800
801.more-info {
802 font-size: 0.85em;
803 line-height: 1.5;
804 color: #aaa;
805}
806
807 .more-info a {
808 color: #aaa;
809 }
810
811/* ==========================================================================
812 5 = Article
813 ========================================================================== */
814
815#article {
816 width: 70%;
817 margin-bottom: 3em;
818 text-align: justify;
819}
820
821#article .tags {
822 margin-bottom: 1em;
823}
824
825#article i {
826 font-style: normal;
827}
828
829blockquote {
830 border:1px solid #999;
831 background-color: #FFF;
832 padding: 1em;
833 margin: 0;
834}
835
836#article h1 {
837 text-align: left;
838}
839
840#article h2, #article h3, #article h4 {
841 text-transform: none;
842}
843
844#article h2:after {
845 content: none;
846}
847
848.topPosF {
849 position: fixed;
850 right: 20%;
851 bottom: 2em;
852 font-size: 1.5em;
853}
854
855#article_toolbar {
856 margin-bottom: 1em;
857}
858
859#article_toolbar li {
860 display: inline-block;
861}
862
863#article_toolbar a {
864 background-color: #000;
865 padding: 0.3em 0.5em 0.2em;
866 color: #FFF;
867 text-decoration: none;
868}
869
870 #article_toolbar a:hover, #article_toolbar a:focus {
871 background-color: #999;
872 }
873
874.shaarli:before {
875 content: "*";
876}
877
878.return {
879 text-decoration: none;
880 margin-top: 1em;
881 display: block;
882}
883
884.return:before {
885 margin-right: 0.5em;
886}
887
888.notags {
889 font-style: italic;
890 color: #999;
891}
892
893.icon-rss {
894 background-color: #000;
895 color: #FFF;
896 padding: 0.2em 0.5em;
897}
898
899.icon-rss:before {
900 position: relative;
901 top: 2px;
902}
903
904.list-tags li {
905 margin-bottom: 0.5em;
906}
907
908.list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
909 background-color: #FFF;
910 color: #000;
911 text-decoration: none;
912}
913
914.list-tags a {
915 text-decoration: none;
916}
917
918.list-tags a:hover, .list-tags a:focus {
919 text-decoration: underline;
920}
921
922pre code {
923 font-family: "Courier New", Courier, monospace;
924 border: 1px solid #ccc;
925 font-size: 0.96em;
926}
927
928
929/* ==========================================================================
930 6 = Media Queries
931 ========================================================================== */
932
933@media screen and (max-width: 1050px) {
934 .entrie {
935 width: 49%;
936 }
937 .entrie:nth-child(3n+1) {
938 margin-left: 1.5%;
939 }
940 .entrie:nth-child(2n+1) {
941 margin-left: 0;
942 }
943}
944
945@media screen and (max-width: 900px) {
946 #article {
947 width: 80%;
948 }
949 .topPosF {
950 right: 2.5em;
951 }
952}
953
954@media screen and (max-width: 700px) {
955 .entrie {
956 width: 100%;
957 margin-left: 0;
958 }
959 #display-mode {
960 display: none;
961 }
962}
963
964@media screen and (max-width: 500px) {
965 .entrie {
966 width: 100%;
967 margin-left: 0;
968 }
969 body > header {
970 background-color: #333;
971 position: fixed;
972 top: 0;
973 width: 100%;
974 height: 3em;
975 z-index: 11;
976 }
977 #links li:last-child {
978 position: static;
979 width: auto;
980 }
981 #links li:last-child a:before {
982 content: none;
983 }
984 .logo {
985 width: 1.25em;
986 height: 1.25em;
987 left: 0;
988 top: 0;
989 }
990 .login > header {
991 position: static;
992 }
993 .login form {
994 width: 100%;
995 position: static;
996 margin-left: 0;
997 }
998 .login .logo {
999 width: auto;
1000 height: auto;
1001 top: 0.5em;
1002 width: 75px;
1003 height: 75px;
1004 margin-left: -37.5px;
1005 }
1006 .desktopHide {
1007 display: block;
1008 position: fixed;
1009 z-index: 20;
1010 top: 0;
1011 right: 0;
1012 border:0;
1013 width: 2.5em;
1014 height: 2.5em;
1015 cursor: pointer;
1016 background-color: #999;
1017 font-size: 1.2em;
1018 }
1019 .desktopHide:hover, .desktopHide:focus {
1020 background-color: #FFF;
1021 }
1022 #links {
1023 display: none;
1024 width: 100%;
1025 height: auto;
1026 padding-top: 3em;
1027 }
1028 #links.menu--open {
1029 display: block;
1030 }
1031 footer {
1032 position: static;
1033 margin-right: 3em;
1034 }
1035 #main {
1036 margin-left: 1.5em;
1037 padding-right: 1.5em;
1038 position: static;
1039 margin-top: 3em;
1040 }
1041 #article_toolbar .topPosF {
1042 display: none;
1043 }
1044
1045 #article {
1046 width: 100%;
1047 }
1048
1049 #article h1 {
1050 font-size: 1.5em;
1051 }
1052 #article_toolbar a {
1053 padding: 0.3em 0.4em 0.2em;
1054 }
1055
1056 #display-mode {
1057 display: none;
1058 }
1059
1060 .popup-form, #bagit-form, #search-form {
1061 left: 0;
1062 width: 100%;
1063 border-left: none;
1064 }
1065
1066 .popup-form form,
1067 #bagit-form form,
1068 #search-form form {
1069 width: 100%;
1070 }
1071}