diff options
author | Nicolas LÅ“uillet <nicolas@loeuillet.org> | 2014-04-03 14:42:03 +0200 |
---|---|---|
committer | Nicolas LÅ“uillet <nicolas@loeuillet.org> | 2014-04-03 14:42:03 +0200 |
commit | 0d67b00d5d3b7ce1b76b639dcc65c415a5f13439 (patch) | |
tree | 7c4d113bb1c3d90ef53e08138a2850576395780f /themes/baggy/css/main.css | |
parent | 99679d06884120c57f43b44e55e03595f1f87bed (diff) | |
parent | 7d2f1aa2793595aa6cdc58a58260184234cfa809 (diff) | |
download | wallabag-0d67b00d5d3b7ce1b76b639dcc65c415a5f13439.tar.gz wallabag-0d67b00d5d3b7ce1b76b639dcc65c415a5f13439.tar.zst wallabag-0d67b00d5d3b7ce1b76b639dcc65c415a5f13439.zip |
wallabag 1.6.0
Diffstat (limited to 'themes/baggy/css/main.css')
-rwxr-xr-x | themes/baggy/css/main.css | 233 |
1 files changed, 222 insertions, 11 deletions
diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css index 3e128b08..0dd552de 100755 --- a/themes/baggy/css/main.css +++ b/themes/baggy/css/main.css | |||
@@ -173,21 +173,22 @@ h2:after { | |||
173 | #links { | 173 | #links { |
174 | position: fixed; | 174 | position: fixed; |
175 | top: 0; | 175 | top: 0; |
176 | width: 9em; | 176 | width: 10em; |
177 | left: 0; | 177 | left: 0; |
178 | text-align: right; | 178 | text-align: right; |
179 | background: #333; | 179 | background: #333; |
180 | padding-top: 9em; | 180 | padding-top: 9.5em; |
181 | height: 100%; | 181 | height: 100%; |
182 | box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); | 182 | box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); |
183 | z-index: 10; | 183 | z-index: 10; |
184 | } | 184 | } |
185 | 185 | ||
186 | #main { | 186 | #main { |
187 | margin-left: 12em; | 187 | margin-left: 13em; |
188 | position: relative; | 188 | position: relative; |
189 | z-index: 10; | 189 | z-index: 10; |
190 | padding-right: 5%; | 190 | padding-right: 5%; |
191 | padding-bottom: 1em; | ||
191 | } | 192 | } |
192 | 193 | ||
193 | #links a { | 194 | #links a { |
@@ -227,7 +228,7 @@ h2:after { | |||
227 | #links li:last-child { | 228 | #links li:last-child { |
228 | position: fixed; | 229 | position: fixed; |
229 | bottom: 1em; | 230 | bottom: 1em; |
230 | width: 10%; | 231 | width: 10em; |
231 | } | 232 | } |
232 | 233 | ||
233 | #links li:last-child a:before { | 234 | #links li:last-child a:before { |
@@ -237,6 +238,61 @@ h2:after { | |||
237 | } | 238 | } |
238 | 239 | ||
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 | .tablemode { | ||
285 | background-image: url("../img/baggy/table.png"); | ||
286 | background-repeat: no-repeat; | ||
287 | background-position: bottom; | ||
288 | } | ||
289 | .listmode { | ||
290 | background-image: url("../img/baggy/list.png"); | ||
291 | background-repeat: no-repeat; | ||
292 | background-position: bottom; | ||
293 | } | ||
294 | |||
295 | |||
240 | /* ========================================================================== | 296 | /* ========================================================================== |
241 | 2 = Layout | 297 | 2 = Layout |
242 | ========================================================================== */ | 298 | ========================================================================== */ |
@@ -248,7 +304,7 @@ h2:after { | |||
248 | 304 | ||
249 | footer { | 305 | footer { |
250 | text-align: right; | 306 | text-align: right; |
251 | position: fixed; | 307 | position: relative; |
252 | bottom: 0; | 308 | bottom: 0; |
253 | right: 5em; | 309 | right: 5em; |
254 | color: #999; | 310 | color: #999; |
@@ -266,6 +322,15 @@ footer a { | |||
266 | letter-spacing:-5px; | 322 | letter-spacing:-5px; |
267 | } | 323 | } |
268 | 324 | ||
325 | .listmode .entrie { | ||
326 | width: 100%!important; | ||
327 | margin-left: 0!important; | ||
328 | } | ||
329 | |||
330 | .listmode .entrie p { | ||
331 | display: none; | ||
332 | } | ||
333 | |||
269 | .list-entries + .results { | 334 | .list-entries + .results { |
270 | margin-bottom: 2em; | 335 | margin-bottom: 2em; |
271 | } | 336 | } |
@@ -287,10 +352,10 @@ footer a { | |||
287 | letter-spacing:normal; | 352 | letter-spacing:normal; |
288 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); | 353 | box-shadow: 0 3px 7px rgba(0,0,0,0.3); |
289 | display: inline-block; | 354 | display: inline-block; |
290 | width: 32%; | 355 | width: 32%!important; |
291 | margin-bottom: 1.5em; | 356 | margin-bottom: 1.5em; |
292 | vertical-align: top; | 357 | vertical-align: top; |
293 | margin-left: 1.5%; | 358 | margin-left: 1.5%!important; |
294 | position: relative; | 359 | position: relative; |
295 | overflow: hidden; | 360 | overflow: hidden; |
296 | padding: 1.5em 1.5em 3em 1.5em; | 361 | padding: 1.5em 1.5em 3em 1.5em; |
@@ -359,6 +424,7 @@ footer a { | |||
359 | content: none; | 424 | content: none; |
360 | } | 425 | } |
361 | 426 | ||
427 | |||
362 | .entrie h2 a { | 428 | .entrie h2 a { |
363 | display: block; | 429 | display: block; |
364 | text-decoration: none; | 430 | text-decoration: none; |
@@ -370,7 +436,7 @@ footer a { | |||
370 | -o-transition: all 0.5s ease; | 436 | -o-transition: all 0.5s ease; |
371 | transition: all 0.5s ease; | 437 | transition: all 0.5s ease; |
372 | } | 438 | } |
373 | 439 | /* | |
374 | .entrie h2 a:after { | 440 | .entrie h2 a:after { |
375 | content: ""; | 441 | content: ""; |
376 | position: absolute; | 442 | position: absolute; |
@@ -379,6 +445,7 @@ footer a { | |||
379 | height: 100%; | 445 | height: 100%; |
380 | left: 0; | 446 | left: 0; |
381 | } | 447 | } |
448 | */ | ||
382 | 449 | ||
383 | .entrie p { | 450 | .entrie p { |
384 | color: #666; | 451 | color: #666; |
@@ -425,7 +492,7 @@ footer a { | |||
425 | } | 492 | } |
426 | 493 | ||
427 | .entrie:nth-child(3n+1) { | 494 | .entrie:nth-child(3n+1) { |
428 | margin-left: 0; | 495 | margin-left: 0!important; |
429 | } | 496 | } |
430 | 497 | ||
431 | .results { | 498 | .results { |
@@ -442,6 +509,7 @@ footer a { | |||
442 | 509 | ||
443 | .pagination { | 510 | .pagination { |
444 | text-align: right; | 511 | text-align: right; |
512 | margin-bottom:50px; | ||
445 | } | 513 | } |
446 | 514 | ||
447 | .nb-results { | 515 | .nb-results { |
@@ -469,6 +537,134 @@ footer a { | |||
469 | } | 537 | } |
470 | 538 | ||
471 | /* ========================================================================== | 539 | /* ========================================================================== |
540 | 2.1 = "save a link" popup div related styles | ||
541 | ========================================================================== */ | ||
542 | |||
543 | #bagit-form { | ||
544 | background: rgba(0,0,0,0.5); | ||
545 | position: absolute; | ||
546 | top: 0; | ||
547 | left: 10em; | ||
548 | z-index: 20; | ||
549 | height: 100%; | ||
550 | width: 100%; | ||
551 | margin: 0; | ||
552 | margin-top: -30%; | ||
553 | padding: 2em; | ||
554 | display: none; | ||
555 | border-left: 1px #EEE solid; | ||
556 | } | ||
557 | |||
558 | #bagit-form form { | ||
559 | background: #FFF; | ||
560 | position: absolute; | ||
561 | top: 0; | ||
562 | left: 0; | ||
563 | z-index: 20; | ||
564 | border: 10px solid #000; | ||
565 | width: 400px; | ||
566 | height: 200px; | ||
567 | /* margin: -150px 0 0 -300px; */ | ||
568 | padding: 2em; | ||
569 | } | ||
570 | |||
571 | a#bagit-form-close { | ||
572 | background: #000; | ||
573 | color: #FFF; | ||
574 | padding: 0.2em 0.5em; | ||
575 | text-decoration: none; | ||
576 | display: inline-block; | ||
577 | float: right; | ||
578 | font-size: 0.6em; | ||
579 | } | ||
580 | a#bagit-form-close:hover { | ||
581 | background: #999; | ||
582 | color: #000; | ||
583 | } | ||
584 | |||
585 | .active-current { | ||
586 | background-color: #999; | ||
587 | } | ||
588 | |||
589 | .active-current:after { | ||
590 | content: ""; | ||
591 | width: 0; | ||
592 | height: 0; | ||
593 | position: absolute; | ||
594 | border-style: solid; | ||
595 | border-width: 10px; | ||
596 | border-color: transparent #EEE transparent transparent; | ||
597 | right: 0; | ||
598 | top: 50%; | ||
599 | margin-top: -10px; | ||
600 | } | ||
601 | |||
602 | .opacity03 { | ||
603 | opacity: 0.3; | ||
604 | } | ||
605 | |||
606 | .add-to-wallabag-link-after { | ||
607 | background-color: #000; | ||
608 | color: #fff; | ||
609 | padding: 0 3px 2px 3px; | ||
610 | } | ||
611 | |||
612 | #add-link-result { | ||
613 | font-weight: bold; | ||
614 | margin-top: 10px; | ||
615 | } | ||
616 | |||
617 | /* ========================================================================== | ||
618 | 2.2 = "search for articles" popup div related styles | ||
619 | ========================================================================== */ | ||
620 | #search-form { | ||
621 | background: rgba(0,0,0,0.5); | ||
622 | position: absolute; | ||
623 | top: 0; | ||
624 | left: 10em; | ||
625 | z-index: 20; | ||
626 | height: 100%; | ||
627 | width: 100%; | ||
628 | margin: 0; | ||
629 | margin-top: -30%; | ||
630 | padding: 2em; | ||
631 | display: none; | ||
632 | border-left: 1px #EEE solid; | ||
633 | } | ||
634 | |||
635 | #search-form form { | ||
636 | background: #FFF; | ||
637 | position: absolute; | ||
638 | top: 0; | ||
639 | left: 0; | ||
640 | z-index: 20; | ||
641 | border: 10px solid #000; | ||
642 | width: 400px; | ||
643 | height: 200px; | ||
644 | /* margin: -150px 0 0 -300px; */ | ||
645 | padding: 2em; | ||
646 | } | ||
647 | |||
648 | a#search-form-close { | ||
649 | background: #000; | ||
650 | color: #FFF; | ||
651 | padding: 0.2em 0.5em; | ||
652 | text-decoration: none; | ||
653 | display: inline-block; | ||
654 | float: right; | ||
655 | font-size: 1.2em; | ||
656 | } | ||
657 | a#search-form-close:hover { | ||
658 | background: #999; | ||
659 | color: #000; | ||
660 | } | ||
661 | |||
662 | #submit-search{ | ||
663 | margin-left: 4em; | ||
664 | margin-top:1em; | ||
665 | } | ||
666 | |||
667 | /* ========================================================================== | ||
472 | 3 = Pictos | 668 | 3 = Pictos |
473 | ========================================================================== */ | 669 | ========================================================================== */ |
474 | 670 | ||
@@ -583,7 +779,7 @@ footer a { | |||
583 | } | 779 | } |
584 | 780 | ||
585 | .warning { | 781 | .warning { |
586 | font-size: 3em; | 782 | /* font-size: 3em; |
587 | color: #999; | 783 | color: #999; |
588 | font-style: italic; | 784 | font-style: italic; |
589 | position: absolute; | 785 | position: absolute; |
@@ -592,7 +788,10 @@ footer a { | |||
592 | width: 100%; | 788 | width: 100%; |
593 | text-align: center; | 789 | text-align: center; |
594 | padding-right: 5%; | 790 | padding-right: 5%; |
595 | margin-top: -2em; | 791 | margin-top: -2em;*/ |
792 | font-weight: bold; | ||
793 | display: block; | ||
794 | width: 100%; | ||
596 | } | 795 | } |
597 | 796 | ||
598 | /* ========================================================================== | 797 | /* ========================================================================== |
@@ -602,6 +801,7 @@ footer a { | |||
602 | #article { | 801 | #article { |
603 | width: 70%; | 802 | width: 70%; |
604 | margin-bottom: 3em; | 803 | margin-bottom: 3em; |
804 | text-align: justify; | ||
605 | } | 805 | } |
606 | 806 | ||
607 | #article .tags { | 807 | #article .tags { |
@@ -731,6 +931,9 @@ blockquote { | |||
731 | width: 100%; | 931 | width: 100%; |
732 | margin-left: 0; | 932 | margin-left: 0; |
733 | } | 933 | } |
934 | #display-mode { | ||
935 | display: none; | ||
936 | } | ||
734 | } | 937 | } |
735 | 938 | ||
736 | @media screen and (max-width: 500px) { | 939 | @media screen and (max-width: 500px) { |
@@ -820,4 +1023,12 @@ blockquote { | |||
820 | #article_toolbar a { | 1023 | #article_toolbar a { |
821 | padding: 0.3em 0.4em 0.2em; | 1024 | padding: 0.3em 0.4em 0.2em; |
822 | } | 1025 | } |
1026 | |||
1027 | #display-mode { | ||
1028 | display: none; | ||
1029 | } | ||
1030 | |||
1031 | #bagit-form { | ||
1032 | left: 0; | ||
1033 | } | ||
823 | } | 1034 | } |