aboutsummaryrefslogtreecommitdiffhomepage
path: root/themes/baggy/css
diff options
context:
space:
mode:
authorNicolas LÅ“uillet <nicolas.loeuillet@gmail.com>2014-02-12 21:58:40 +0100
committerNicolas LÅ“uillet <nicolas.loeuillet@gmail.com>2014-02-12 21:58:40 +0100
commit943ac3c77ec1dd93d14a780b25fa147d0f882760 (patch)
tree2c22e26e4066a97f0548d97531aabccbd3fe7abd /themes/baggy/css
parent83b47311ba0b8383da7955723a694b0fb3819062 (diff)
downloadwallabag-943ac3c77ec1dd93d14a780b25fa147d0f882760.tar.gz
wallabag-943ac3c77ec1dd93d14a780b25fa147d0f882760.tar.zst
wallabag-943ac3c77ec1dd93d14a780b25fa147d0f882760.zip
new theme, baggy one cf #448
Diffstat (limited to 'themes/baggy/css')
-rwxr-xr-xthemes/baggy/css/font.css0
-rwxr-xr-xthemes/baggy/css/main.css821
-rwxr-xr-xthemes/baggy/css/messages.css0
-rwxr-xr-xthemes/baggy/css/print.css48
-rw-r--r--themes/baggy/css/ratatouille.css211
5 files changed, 1080 insertions, 0 deletions
diff --git a/themes/baggy/css/font.css b/themes/baggy/css/font.css
new file mode 100755
index 00000000..e69de29b
--- /dev/null
+++ b/themes/baggy/css/font.css
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css
new file mode 100755
index 00000000..45211a87
--- /dev/null
+++ b/themes/baggy/css/main.css
@@ -0,0 +1,821 @@
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: #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
68h2, h3, h4 {
69 font-family: 'PT Sans', sans-serif;
70 text-transform: uppercase;
71}
72
73p, li {
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"] {
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
107fieldset 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
120fieldset label {
121 display: inline-block;
122 margin-right: 0.5em;
123 color: #666;
124}
125
126form .row {
127 margin-bottom: 0.5em;
128}
129
130form 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
154h2: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: 9em;
177 left: 0;
178 text-align: right;
179 background: #333;
180 padding-top: 9em;
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: 12em;
188 position: relative;
189 z-index: 10;
190 padding-right: 5%;
191}
192
193 #links a {
194 display: block;
195 padding: 0.5em 2em 0.5em 1em;
196 color: #FFF;
197 position: relative;
198 text-transform: uppercase;
199 text-decoration: none;
200 font-weight: normal;
201 font-family: 'PT Sans', sans-serif;
202 -webkit-transition: all 0.5s ease;
203 -moz-transition: all 0.5s ease;
204 -ms-transition: all 0.5s ease;
205 -o-transition: all 0.5s ease;
206 transition: all 0.5s ease;
207 }
208
209 #links a:hover, #links a:focus {
210 background: #999;
211 color: #000;
212 }
213
214 #links .current:after {
215 content: "";
216 width: 0;
217 height: 0;
218 position: absolute;
219 border-style: solid;
220 border-width: 10px;
221 border-color: transparent #EEE transparent transparent;
222 right: 0;
223 top: 50%;
224 margin-top: -10px;
225 }
226
227 #links li:last-child {
228 position: fixed;
229 bottom: 1em;
230 width: 10%;
231 }
232
233 #links li:last-child a:before {
234 font-size: 1.2em;
235 position: relative;
236 top: 2px;
237 }
238
239
240/* ==========================================================================
241 2 = Layout
242 ========================================================================== */
243
244#content {
245 margin-top: 5em;
246 min-height: 30em;
247}
248
249footer {
250 text-align: right;
251 position: fixed;
252 bottom: 0;
253 right: 5em;
254 color: #999;
255 font-size: 0.8em;
256 font-style: italic;
257}
258
259footer a {
260 color: #999;
261 font-weight: normal;
262}
263
264.list-entries {
265 letter-spacing:-5px;
266}
267
268.list-entries + .results {
269 margin-bottom: 2em;
270}
271
272.estimatedTime a {
273 color: #999;
274 font-style: italic;
275 font-weight: normal;
276 font-size: 0.9em;
277}
278
279.estimatedTime small {
280 position: relative;
281 top: -1px;
282}
283
284.entrie {
285 background: #FFF;
286 letter-spacing:normal;
287 box-shadow: 0 3px 7px rgba(0,0,0,0.3);
288 display: inline-block;
289 width: 32%;
290 margin-bottom: 1.5em;
291 vertical-align: top;
292 margin-left: 1.5%;
293 position: relative;
294 overflow: hidden;
295 padding: 1.5em 1.5em 3em 1.5em;
296 -webkit-transition: all 0.5s ease;
297 -moz-transition: all 0.5s ease;
298 -ms-transition: all 0.5s ease;
299 -o-transition: all 0.5s ease;
300 transition: all 0.5s ease;
301}
302
303.entrie:before {
304 content: "";
305 width: 0;
306 height: 0;
307 border-style:solid;
308 border-color: transparent transparent #000 transparent;
309 border-width: 10px;
310 position: absolute;
311 bottom: 0.3em;
312 z-index: 10;
313 right: 1.5em;
314 -webkit-transition: all 0.5s ease;
315 -moz-transition: all 0.5s ease;
316 -ms-transition: all 0.5s ease;
317 -o-transition: all 0.5s ease;
318 transition: all 0.5s ease;
319}
320
321.entrie:after {
322 content: "";
323 position: absolute;
324 height: 7px;
325 width: 100%;
326 bottom: 0;
327 left: 0;
328 background: #000;
329 -webkit-transition: all 0.5s ease;
330 -moz-transition: all 0.5s ease;
331 -ms-transition: all 0.5s ease;
332 -o-transition: all 0.5s ease;
333 transition: all 0.5s ease;
334}
335
336.entrie:hover {
337 box-shadow: 0 3px 10px rgba(0,0,0,1);
338}
339
340.entrie:hover:after {
341 height: 40px;
342}
343
344.entrie:hover:before {
345 bottom: 2.4em;
346}
347
348.entrie:hover h2 a {
349 color: #666;
350}
351
352.entrie h2 {
353 text-transform: none;
354 margin-bottom: 0;
355}
356
357 .entrie h2:after {
358 content: none;
359 }
360
361.entrie h2 a {
362 display: block;
363 text-decoration: none;
364 color: #000;
365 word-wrap: break-word;
366 -webkit-transition: all 0.5s ease;
367 -moz-transition: all 0.5s ease;
368 -ms-transition: all 0.5s ease;
369 -o-transition: all 0.5s ease;
370 transition: all 0.5s ease;
371}
372
373.entrie h2 a:after {
374 content: "";
375 position: absolute;
376 top: 0;
377 width: 100%;
378 height: 100%;
379 left: 0;
380}
381
382.entrie p {
383 color: #666;
384 font-size: 0.9em;
385 line-height: 1.7;
386}
387
388 .entrie h2 a:first-letter {
389 text-transform: uppercase;
390 }
391
392.entrie:hover .tools {
393 bottom: 0;
394}
395
396.entrie .tools {
397 position: absolute;
398 bottom: -50px;
399 left: 0;
400 width: 100%;
401 z-index: 10;
402 padding-right: 0.5em;
403 text-align: right;
404 -webkit-transition: all 0.5s ease;
405 -moz-transition: all 0.5s ease;
406 -ms-transition: all 0.5s ease;
407 -o-transition: all 0.5s ease;
408 transition: all 0.5s ease;
409}
410
411 .entrie .tools a {
412 color: #666;
413 text-decoration: none;
414 display: block;
415 padding: 0.4em;
416 }
417
418 .entrie .tools a:hover {
419 color: #FFF;
420 }
421
422 .entrie .tools li {
423 display: inline-block;
424 }
425
426.entrie:nth-child(3n+1) {
427 margin-left: 0;
428}
429
430.results {
431 letter-spacing: -5px;
432 padding: 0 0 0.5em;
433}
434
435.results > * {
436 display: inline-block;
437 vertical-align: top;
438 letter-spacing: normal;
439 width: 50%;
440}
441
442.pagination {
443 text-align: right;
444}
445
446.nb-results {
447 text-align: left;
448 font-style: italic;
449 color: #999;
450}
451
452.pagination > * {
453 display: inline-block;
454 margin-left: 0.5em;
455}
456
457.pagination a {
458 color: #999;
459 text-decoration: none;
460}
461
462 .pagination a:hover, .pagination a:focus {
463 text-decoration: underline;
464 }
465
466.pagination .disabled {
467 display: none;
468}
469
470/* ==========================================================================
471 3 = Pictos
472 ========================================================================== */
473
474@font-face {
475 font-family: 'icomoon';
476 src:url('../font/icomoon.eot?-s0mcsx');
477 src:url('../font/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
478 url('../font/icomoon.woff?-s0mcsx') format('woff'),
479 url('../font/icomoon.ttf?-s0mcsx') format('truetype'),
480 url('../font/icomoon.svg?-s0mcsx#icomoon') format('svg');
481 font-weight: normal;
482 font-style: normal;
483}
484
485.icon span {
486 position: absolute;
487 top: -9999px;
488}
489
490[class^="icon-"]:before, [class*=" icon-"]:before {
491 font-family: 'icomoon';
492 speak: none;
493 font-style: normal;
494 font-weight: normal;
495 font-variant: normal;
496 text-transform: none;
497 line-height: 1;
498
499 /* Better Font Rendering =========== */
500 -webkit-font-smoothing: antialiased;
501 -moz-osx-font-smoothing: grayscale;
502}
503
504.icon-flattr:before {
505 content: "\e800";
506}
507.icon-mail:before {
508 content: "\e80a";
509}
510.icon-up-open:before {
511 content: "\e80b";
512}
513.icon-star:before {
514 content: "\e805";
515}
516.icon-check:before {
517 content: "\e804";
518}
519.icon-link:before {
520 content: "\e801";
521}
522.icon-reply:before {
523 content: "\e806";
524}
525.icon-menu:before {
526 content: "\e802";
527}
528.icon-clock:before {
529 content: "\e803";
530}
531.icon-twitter:before {
532 content: "\e807";
533}
534.icon-down-open:before {
535 content: "\e809";
536}
537.icon-trash:before {
538 content: "\e80c";
539}
540.icon-delete:before {
541 content: "\e600";
542}
543.icon-power:before {
544 content: "\e601";
545}
546.icon-arrow-up-thick:before {
547 content: "\e602";
548}
549.icon-rss:before {
550 content: "\e808";
551}
552
553/* ==========================================================================
554 Icon selected
555 ========================================================================== */
556
557.icon-star.fav:before {
558 color: #FFF;
559}
560
561/* ==========================================================================
562 4 = Messages
563 ========================================================================== */
564
565.messages {
566 text-align: center;
567}
568
569.messages > * { display: inline-block;}
570
571.closeMessage {
572 background: #000;
573 color: #FFF;
574 padding: 0.2em 0.5em;
575 text-decoration: none;
576}
577
578 .closeMessage:hover, .closeMessage:focus {
579 background: #FFF;
580 color: #000;
581 }
582
583.warning {
584 font-size: 3em;
585 color: #999;
586 font-style: italic;
587 position: absolute;
588 top: 50%;
589 left: 0;
590 width: 100%;
591 text-align: center;
592 padding-right: 5%;
593 margin-top: -2em;
594}
595
596/* ==========================================================================
597 5 = Article
598 ========================================================================== */
599
600#article {
601 width: 70%;
602 margin-bottom: 3em;
603}
604
605#article .tags {
606 margin-bottom: 1em;
607}
608
609#article i {
610 font-style: normal;
611}
612
613blockquote {
614 border:1px solid #999;
615 background: #FFF;
616 padding: 1em;
617 margin: 0;
618}
619
620#article h2, #article h3, #article h4 {
621 text-transform: none;
622}
623
624#article h2:after {
625 content: none;
626}
627
628.topPosF {
629 position: fixed;
630 right: 20%;
631 bottom: 2em;
632 font-size: 1.5em;
633}
634
635#article_toolbar {
636 margin-bottom: 1em;
637}
638
639#article_toolbar li {
640 display: inline-block;
641}
642
643#article_toolbar a {
644 background: #000;
645 padding: 0.3em 0.5em 0.2em;
646 color: #FFF;
647 text-decoration: none;
648}
649
650 #article_toolbar a:hover, #article_toolbar a:focus {
651 background: #999;
652 }
653
654.shaarli:before {
655 content: "*";
656}
657
658.return {
659 text-decoration: none;
660 margin-top: 1em;
661 display: block;
662}
663
664.return:before {
665 margin-right: 0.5em;
666}
667
668.notags {
669 font-style: italic;
670 color: #999;
671}
672
673.icon-rss {
674 background: #000;
675 color: #FFF;
676 padding: 0.2em 0.5em;
677}
678
679.icon-rss:before {
680 position: relative;
681 top: 2px;
682}
683
684.list-tags li {
685 margin-bottom: 0.5em;
686}
687
688.list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
689 background: #FFF;
690 color: #000;
691 text-decoration: none;
692}
693
694.list-tags a {
695 text-decoration: none;
696}
697
698.list-tags a:hover, .list-tags a:focus {
699 text-decoration: underline;
700}
701
702/* ==========================================================================
703 6 = Media Queries
704 ========================================================================== */
705
706@media screen and (max-width: 1050px) {
707 .entrie {
708 width: 49%;
709 }
710 .entrie:nth-child(3n+1) {
711 margin-left: 1.5%;
712 }
713 .entrie:nth-child(2n+1) {
714 margin-left: 0;
715 }
716}
717
718@media screen and (max-width: 900px) {
719 #article {
720 width: 80%;
721 }
722 .topPosF {
723 right: 2.5em;
724 }
725}
726
727@media screen and (max-width: 700px) {
728 .entrie {
729 width: 100%;
730 margin-left: 0;
731 }
732}
733
734@media screen and (max-width: 500px) {
735 .entrie {
736 width: 100%;
737 margin-left: 0;
738 }
739 body > header {
740 background: #333;
741 position: fixed;
742 top: 0;
743 width: 100%;
744 height: 3em;
745 z-index: 11;
746 }
747 #links li:last-child {
748 position: static;
749 width: auto;
750 }
751 #links li:last-child a:before {
752 content: none;
753 }
754 .logo {
755 width: 1.5em;
756 height: 1.5em;
757 left: 0;
758 top: 0;
759 }
760 .login > header {
761 position: static;
762 }
763 .login form {
764 width: 100%;
765 position: static;
766 margin-left: 0;
767 }
768 .login .logo {
769 width: auto;
770 height: auto;
771 top: 0.5em;
772 width: 75px;
773 height: 75px;
774 margin-left: -37.5px;
775 }
776 .desktopHide {
777 display: block;
778 position: fixed;
779 z-index: 20;
780 top: 0;
781 right: 0;
782 border:0;
783 width: 2.5em;
784 height: 2.5em;
785 cursor: pointer;
786 background: #999;
787 font-size: 1.2em;
788 }
789 .desktopHide:hover, .desktopHide:focus {
790 background: #FFF;
791 }
792 #links {
793 display: none;
794 width: 100%;
795 height: auto;
796 padding-top: 3em;
797 }
798 footer {
799 position: static;
800 margin-right: 3em;
801 }
802 #main {
803 margin-left: 1.5em;
804 padding-right: 1.5em;
805 position: static;
806 }
807 #article_toolbar .topPosF {
808 display: none;
809 }
810
811 #article {
812 width: 100%;
813 }
814
815 #article h1 {
816 font-size: 1.5em;
817 }
818 #article_toolbar a {
819 padding: 0.3em 0.4em 0.2em;
820 }
821} \ No newline at end of file
diff --git a/themes/baggy/css/messages.css b/themes/baggy/css/messages.css
new file mode 100755
index 00000000..e69de29b
--- /dev/null
+++ b/themes/baggy/css/messages.css
diff --git a/themes/baggy/css/print.css b/themes/baggy/css/print.css
new file mode 100755
index 00000000..9aefa779
--- /dev/null
+++ b/themes/baggy/css/print.css
@@ -0,0 +1,48 @@
1/* ### Layout ### */
2
3body {
4 font-family: Serif;
5 background-color: #fff;
6}
7
8@page {
9 margin: 1cm;
10}
11
12img {
13 max-width: 100% !important;
14}
15
16/* ### Content ### */
17
18/* Hide useless blocks */
19body > header,
20#links,
21#sort,
22body > footer,
23.top_link,
24div.tools,
25header div,
26.messages,
27.entrie + .results {
28 display: none !important;
29}
30
31article {
32 border: none !important;
33}
34
35/* Add URL after links */
36.vieworiginal a:after {
37 content: " (" attr(href) ")";
38}
39
40/* Add explanation after abbr */
41abbr[title]:after {
42 content: " (" attr(title) ")";
43}
44
45/* Change border on current pager item */
46.pagination span.current {
47 border-style: dashed;
48}
diff --git a/themes/baggy/css/ratatouille.css b/themes/baggy/css/ratatouille.css
new file mode 100644
index 00000000..b203cbb8
--- /dev/null
+++ b/themes/baggy/css/ratatouille.css
@@ -0,0 +1,211 @@
1/*
2 Ratatouille mini Framework css by Thomas LEBEAU
3 Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations
4 and normalize.css
5*/
6
7* {
8 -webkit-box-sizing: border-box;
9 -moz-box-sizing: border-box;
10 box-sizing: border-box;
11}
12
13html {
14 font-family: sans-serif; /* 1 */
15 -ms-text-size-adjust: 100%; /* 2 */
16 -webkit-text-size-adjust: 100%; /* 2 */
17}
18
19body {
20 font-size: 1em;
21 line-height:1.5;
22 margin: 0;
23}
24
25/* ==========================================================================
26 Mise en forme
27 ========================================================================== */
28
29h1:first-child,
30h2:first-child,
31h3:first-child,
32h4:first-child,
33h5:first-child,
34h6:first-child,
35p:first-child,
36ul:first-child,
37ol:first-child,
38dl:first-child{
39 margin-top: 0;
40}
41
42code,
43kbd,
44pre,
45samp {
46 font-family: monospace, serif;
47}
48
49pre {
50 white-space: pre-wrap;
51}
52
53
54.upper {
55 text-transform: uppercase;
56}
57
58.bold {
59 font-weight: bold;
60}
61
62.inner {
63 margin: 0 auto;
64 max-width: 61.25em;/*980px*/
65}
66
67table, img {
68 max-width: 100%;
69 height :auto;
70}
71
72iframe {
73 max-width: 100%;
74}
75
76.fl {
77 float: left;
78}
79
80.fr {
81 float: right;
82}
83
84table {
85 border-collapse: collapse;
86}
87
88figure {
89 margin: 0;
90}
91
92button,
93input,
94select,
95textarea {
96 font-family: inherit;
97 font-size: 100%;
98 margin: 0;
99}
100
101input[type="search"] {
102 -webkit-appearance: textfield;
103}
104
105/* ==========================================================================
106 Mise en page
107 ========================================================================== */
108
109.dib {
110 display: inline-block;
111 vertical-align: middle;
112}
113
114.dnone {
115 display: none;
116}
117
118.dtable { display:table }
119
120 .dtable > * { display:table-row; }
121
122 .dtable > * > * { display:table-cell; }
123
124.element-invisible {
125 border: 0;
126 clip: rect(0 0 0 0);
127 height: 1px;
128 margin: -1px;
129 overflow: hidden;
130 padding: 0;
131 position: absolute;
132 width: 1px;
133}
134
135.small {
136 font-size:0.8em;
137}
138
139.big {
140 font-size: 1.2em;
141}
142
143/*Width*/
144
145.w100 { width:100%; }
146.w90 { width:90%; }
147.w80 { width:80%; }
148.w70 { width:70%; }
149.w60 { width:60%; }
150.w50 { width:50%; }
151.w40 { width:40%; }
152.w30 { width:30%; }
153.w20 { width:20%; }
154.w10 { width:10%; }
155
156
157/* ==========================================================================
158 Internet Explorer
159 ========================================================================== */
160
161/*IE8 and IE9*/
162
163article,
164aside,
165details,
166figcaption,
167figure,
168footer,
169header,
170hgroup,
171main,
172nav,
173section,
174summary {
175 display: block;
176}
177
178/*IE8 and IE9*/
179
180audio,
181canvas,
182video {
183 display: inline-block;
184}
185
186@media screen and (-webkit-min-device-pixel-ratio:0){
187 select{
188 -webkit-appearance: none;
189 border-radius: 0;
190 }
191}
192
193/* ==========================================================================
194 Medias Queries
195 ========================================================================== */
196
197/*Desktop 1080px*/
198
199@media screen and (max-width: 67.50em) {
200}
201
202/*Tablet 800px*/
203
204@media screen and (max-width: 50em) {
205}
206
207/*Mobile 640px*/
208
209@media screen and (max-width: 40em) {
210}
211