aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
authorJeremy Benoist <jeremy.benoist@gmail.com>2016-11-19 15:30:49 +0100
committerJeremy Benoist <jeremy.benoist@gmail.com>2016-11-19 15:30:49 +0100
commit68003139e133835805b143b62c4407f19b495dab (patch)
tree9a71a15d021330fb6d55cc338f125161ddfc61dd /app/Resources/static/themes/material
parentbbd4ae7b56d9db744482a5630abad350f2d819af (diff)
parentcb1a6590c0e58c56d0612066501b3a586b103ed5 (diff)
downloadwallabag-68003139e133835805b143b62c4407f19b495dab.tar.gz
wallabag-68003139e133835805b143b62c4407f19b495dab.tar.zst
wallabag-68003139e133835805b143b62c4407f19b495dab.zip
Merge remote-tracking branch 'origin/master' into 2.2
# Conflicts: # .editorconfig # docs/de/index.rst # docs/de/user/import.rst # docs/en/index.rst # docs/en/user/configuration.rst # docs/en/user/import.rst # docs/fr/index.rst # docs/fr/user/import.rst # src/Wallabag/CoreBundle/Command/InstallCommand.php # src/Wallabag/CoreBundle/Resources/translations/messages.da.yml # src/Wallabag/CoreBundle/Resources/translations/messages.de.yml # src/Wallabag/CoreBundle/Resources/translations/messages.en.yml # src/Wallabag/CoreBundle/Resources/translations/messages.es.yml # src/Wallabag/CoreBundle/Resources/translations/messages.fa.yml # src/Wallabag/CoreBundle/Resources/translations/messages.fr.yml # src/Wallabag/CoreBundle/Resources/translations/messages.it.yml # src/Wallabag/CoreBundle/Resources/translations/messages.oc.yml # src/Wallabag/CoreBundle/Resources/translations/messages.pl.yml # src/Wallabag/CoreBundle/Resources/translations/messages.pt.yml # src/Wallabag/CoreBundle/Resources/translations/messages.ro.yml # src/Wallabag/CoreBundle/Resources/translations/messages.tr.yml # src/Wallabag/CoreBundle/Resources/views/themes/baggy/Config/index.html.twig # web/bundles/wallabagcore/themes/baggy/css/style.min.css # web/bundles/wallabagcore/themes/baggy/js/baggy.min.js # web/bundles/wallabagcore/themes/material/css/style.min.css # web/bundles/wallabagcore/themes/material/js/material.min.js
Diffstat (limited to 'app/Resources/static/themes/material')
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css142
1 files changed, 120 insertions, 22 deletions
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index b165d45e..df126fb4 100755
--- a/app/Resources/static/themes/material/css/main.css
+++ b/app/Resources/static/themes/material/css/main.css
@@ -17,12 +17,11 @@
17 0 = Common 17 0 = Common
18 ========================================================================== */ 18 ========================================================================== */
19 19
20@font-face { 20/**
21 font-family: icomoon; 21 *
22 src: url("../fonts/IcoMoon-Free.ttf"); 22 * Material icons
23 font-weight: normal; 23 *
24 font-style: normal; 24 */
25}
26 25
27@font-face { 26@font-face {
28 font-family: 'Material Icons'; 27 font-family: 'Material Icons';
@@ -62,6 +61,33 @@
62 font-feature-settings: 'liga'; 61 font-feature-settings: 'liga';
63} 62}
64 63
64/* Rules for sizing the icon. */
65.material-icons.md-18 { font-size: 18px; }
66.material-icons.md-24 { font-size: 24px; }
67.material-icons.md-36 { font-size: 36px; }
68.material-icons.md-48 { font-size: 48px; }
69
70/* Rules for using icons as black on a light background. */
71.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
72.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
73
74/* Rules for using icons as white on a dark background. */
75.material-icons.md-light { color: rgba(255, 255, 255, 1); }
76.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
77
78/**
79 *
80 * Icomoon icons
81 *
82 */
83
84@font-face {
85 font-family: icomoon;
86 src: url("../fonts/IcoMoon-Free.ttf");
87 font-weight: normal;
88 font-style: normal;
89}
90
65[class^="icon-"]::before, 91[class^="icon-"]::before,
66[class*=" icon-"]::before { 92[class*=" icon-"]::before {
67 font-family: icomoon; 93 font-family: icomoon;
@@ -212,8 +238,17 @@ div.pagination ul .next.disabled {
212 color: #fff; 238 color: #fff;
213} 239}
214 240
241.page-footer .footer-copyright {
242 min-width: 50px;
243 height: auto !important;
244 line-height: 1em !important;
245}
246
215.page-footer .footer-copyright p { 247.page-footer .footer-copyright p {
216 display: inline; 248 text-overflow: ellipsis;
249 white-space: nowrap;
250 overflow: hidden;
251 display: block;
217} 252}
218 253
219.hidden { 254.hidden {
@@ -402,13 +437,23 @@ main ul.row {
402} 437}
403 438
404.data .card .card-body { 439.data .card .card-body {
405 height: 22em; 440 height: 19em;
406 overflow: hidden; 441 overflow: hidden;
407} 442}
408 443
409.card .card-content .card-title { 444.card .card-content .card-title,
410 line-height: 32px; 445.card .card-reveal .card-title {
411 max-height: 64px; 446 line-height: 22.8px;
447 max-height: 80px;
448 font-size: 19px;
449 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
450 color: #313131;
451}
452
453.card .card-content .activator,
454.card .card-reveal .activator {
455 cursor: pointer;
456 font-family: "Material Icons";
412} 457}
413 458
414.card .card-content i.right, 459.card .card-content i.right,
@@ -416,6 +461,18 @@ main ul.row {
416 margin-left: 0; 461 margin-left: 0;
417} 462}
418 463
464.card .card-content .original {
465 line-height: 24px;
466 font-size: 15px;
467}
468
469a.original {
470 text-overflow: ellipsis;
471 white-space: nowrap;
472 overflow: hidden;
473 display: block;
474}
475
419.card .card-entry-labels { 476.card .card-entry-labels {
420 position: absolute; 477 position: absolute;
421 top: 10px; 478 top: 10px;
@@ -438,7 +495,7 @@ main ul.row {
438} 495}
439 496
440.card .card-entry-labels-hidden { 497.card .card-entry-labels-hidden {
441 margin-top: 5px; 498 margin: 2.5px auto;
442} 499}
443 500
444.card .card-entry-labels-hidden li { 501.card .card-entry-labels-hidden li {
@@ -455,6 +512,10 @@ main ul.row {
455 white-space: nowrap; 512 white-space: nowrap;
456} 513}
457 514
515.card .card-entry-labels-hidden li:first-child {
516 margin-left: 0;
517}
518
458.card-entry-tags a, 519.card-entry-tags a,
459.card-entry-labels a, 520.card-entry-labels a,
460.card-tag-labels a, 521.card-tag-labels a,
@@ -469,8 +530,8 @@ main ul.row {
469 margin-bottom: 10px; 530 margin-bottom: 10px;
470} 531}
471 532
472.card .card-action .original { 533.card .card-action {
473 line-height: 24px; 534 padding: 10px 5px 10px 15px;
474} 535}
475 536
476.card .card-action ul.links { 537.card .card-action ul.links {
@@ -488,6 +549,11 @@ main ul.row {
488 color: #fff; 549 color: #fff;
489} 550}
490 551
552.card .card-action .reading-time {
553 display: inline-flex;
554 vertical-align: middle;
555}
556
491.quickstart .card .card-action a, 557.quickstart .card .card-action a,
492.quickstart .card .card-action a:hover { 558.quickstart .card .card-action a:hover {
493 color: #fff !important; 559 color: #fff !important;
@@ -504,10 +570,15 @@ main ul.row {
504} 570}
505 571
506.card .card-image { 572.card .card-image {
507 height: 14em; 573 height: 10em;
574}
575
576.card .card-fullimage {
577 height: 13.5em;
508} 578}
509 579
510.card .card-image .preview { 580.card .card-image .preview,
581.card .card-fullimage .preview {
511 height: 14em; 582 height: 14em;
512 background-size: cover; 583 background-size: cover;
513 background-repeat: no-repeat; 584 background-repeat: no-repeat;
@@ -531,7 +602,8 @@ main ul.row {
531} 602}
532 603
533#article > header > h1 { 604#article > header > h1 {
534 font-size: 1.6em; 605 font-size: 2em;
606 margin: 2.1rem 0 0.68rem;
535} 607}
536 608
537.reader-mode { 609.reader-mode {
@@ -570,9 +642,20 @@ main ul.row {
570 z-index: 9999; 642 z-index: 9999;
571} 643}
572 644
573#article aside .link { 645#article aside .tools {
574 color: #000;
575 font-size: 0.8em; 646 font-size: 0.8em;
647 display: flex;
648 flex-flow: row wrap;
649 margin: 0 auto;
650}
651
652article aside .tools li {
653 display: inline-flex;
654 vertical-align: middle;
655}
656
657#article aside .tools a {
658 color: #000;
576 text-decoration: none; 659 text-decoration: none;
577} 660}
578 661
@@ -583,10 +666,11 @@ main ul.row {
583 666
584#article aside .chip { 667#article aside .chip {
585 background-color: rgba(0, 151, 167, 0.85); 668 background-color: rgba(0, 151, 167, 0.85);
586 color: #fff;
587 padding: 0 15px 0 10px; 669 padding: 0 15px 0 10px;
670 margin: auto 2px;
588} 671}
589 672
673#article aside .chip a,
590#article aside .chip i { 674#article aside .chip i {
591 color: #fff; 675 color: #fff;
592} 676}
@@ -613,7 +697,6 @@ main ul.row {
613 } 697 }
614 698
615 #article { 699 #article {
616 padding: 15px;
617 max-width: 35em; 700 max-width: 35em;
618 margin-left: auto; 701 margin-left: auto;
619 margin-right: auto; 702 margin-right: auto;
@@ -657,7 +740,14 @@ main ul.row {
657 } 740 }
658} 741}
659 742
660@media only screen and (min-width: 993px) and (max-width: 1180px) { 743@media only screen and (min-width: 1200px) and (max-width: 1650px) {
744 .row .col.l3 {
745 width: 33.33333%;
746 margin-left: 0;
747 }
748}
749
750@media only screen and (min-width: 993px) and (max-width: 1200px) {
661 .row .col.l1 { 751 .row .col.l1 {
662 width: 25%; 752 width: 25%;
663 margin-left: 0; 753 margin-left: 0;
@@ -713,6 +803,14 @@ main ul.row {
713 .nb-results { 803 .nb-results {
714 display: none; 804 display: none;
715 } 805 }
806
807 main ul.row {
808 padding: 0;
809 }
810
811 .row .col {
812 padding: 0;
813 }
716} 814}
717 815
718/* ========================================================================== 816/* ==========================================================================