aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
authorThomas Citharel <tcit@tcit.fr>2016-10-16 11:51:38 +0200
committerJeremy Benoist <jeremy.benoist@gmail.com>2016-10-22 13:08:04 +0200
commit34aa06a9b9c9bc6cdfb61607b2def8e1fc861b76 (patch)
tree482d734a8e8c9a6717adee8743ca4fefb0c16af4 /app/Resources/static/themes/material
parentf99ddbc6f82b0e5619d51ec4415738bf34d350b6 (diff)
downloadwallabag-34aa06a9b9c9bc6cdfb61607b2def8e1fc861b76.tar.gz
wallabag-34aa06a9b9c9bc6cdfb61607b2def8e1fc861b76.tar.zst
wallabag-34aa06a9b9c9bc6cdfb61607b2def8e1fc861b76.zip
WIP
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
Diffstat (limited to 'app/Resources/static/themes/material')
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css102
1 files changed, 85 insertions, 17 deletions
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index 2cc2e8a0..f5687318 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;
@@ -397,13 +423,23 @@ main ul.row {
397} 423}
398 424
399.data .card .card-body { 425.data .card .card-body {
400 height: 22em; 426 height: 19em;
401 overflow: hidden; 427 overflow: hidden;
402} 428}
403 429
404.card .card-content .card-title { 430.card .card-content .card-title,
405 line-height: 32px; 431.card .card-reveal .card-title {
432 line-height: 22.8px;
406 max-height: 64px; 433 max-height: 64px;
434 font-size: 19px;
435 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
436 color: #313131;
437}
438
439.card .card-content .activator,
440.card .card-reveal .activator {
441 cursor: pointer;
442 font-family: "Material Icons";
407} 443}
408 444
409.card .card-content i.right, 445.card .card-content i.right,
@@ -411,6 +447,11 @@ main ul.row {
411 margin-left: 0; 447 margin-left: 0;
412} 448}
413 449
450.card .card-content .original {
451 line-height: 24px;
452 font-size: 15px;
453}
454
414.card .card-entry-labels { 455.card .card-entry-labels {
415 position: absolute; 456 position: absolute;
416 top: 10px; 457 top: 10px;
@@ -433,7 +474,7 @@ main ul.row {
433} 474}
434 475
435.card .card-entry-labels-hidden { 476.card .card-entry-labels-hidden {
436 margin-top: 5px; 477 margin: 2.5px auto;
437} 478}
438 479
439.card .card-entry-labels-hidden li { 480.card .card-entry-labels-hidden li {
@@ -464,8 +505,8 @@ main ul.row {
464 margin-bottom: 10px; 505 margin-bottom: 10px;
465} 506}
466 507
467.card .card-action .original { 508.card .card-action {
468 line-height: 24px; 509 padding: 10px 5px 10px 15px;
469} 510}
470 511
471.card .card-action ul.links { 512.card .card-action ul.links {
@@ -483,6 +524,11 @@ main ul.row {
483 color: #fff; 524 color: #fff;
484} 525}
485 526
527.card .card-action .reading-time {
528 display: inline-flex;
529 vertical-align: middle;
530}
531
486.quickstart .card .card-action a, 532.quickstart .card .card-action a,
487.quickstart .card .card-action a:hover { 533.quickstart .card .card-action a:hover {
488 color: #fff !important; 534 color: #fff !important;
@@ -499,7 +545,7 @@ main ul.row {
499} 545}
500 546
501.card .card-image { 547.card .card-image {
502 height: 14em; 548 height: 10em;
503} 549}
504 550
505.card .card-image .preview { 551.card .card-image .preview {
@@ -526,7 +572,8 @@ main ul.row {
526} 572}
527 573
528#article > header > h1 { 574#article > header > h1 {
529 font-size: 1.6em; 575 font-size: 2em;
576 margin: 2.1rem 0 0.68rem;
530} 577}
531 578
532.reader-mode { 579.reader-mode {
@@ -565,9 +612,21 @@ main ul.row {
565 z-index: 9999; 612 z-index: 9999;
566} 613}
567 614
568#article aside .link { 615#article aside .tools {
569 color: #000;
570 font-size: 0.8em; 616 font-size: 0.8em;
617 display: flex;
618 flex-flow: row wrap;
619 margin: 0 auto;
620}
621
622#article aside .tools li {
623 display: inline-flex;
624 vertical-align: middle;
625 margin: auto 10px;
626}
627
628#article aside .tools a {
629 color: #000;
571 text-decoration: none; 630 text-decoration: none;
572} 631}
573 632
@@ -578,10 +637,11 @@ main ul.row {
578 637
579#article aside .chip { 638#article aside .chip {
580 background-color: rgba(0, 151, 167, 0.85); 639 background-color: rgba(0, 151, 167, 0.85);
581 color: #fff;
582 padding: 0 15px 0 10px; 640 padding: 0 15px 0 10px;
641 margin: auto 2px;
583} 642}
584 643
644#article aside .chip a,
585#article aside .chip i { 645#article aside .chip i {
586 color: #fff; 646 color: #fff;
587} 647}
@@ -708,6 +768,14 @@ main ul.row {
708 .nb-results { 768 .nb-results {
709 display: none; 769 display: none;
710 } 770 }
771
772 main ul.row {
773 padding: 0;
774 }
775
776 .row .col {
777 padding: 0;
778 }
711} 779}
712 780
713/* ========================================================================== 781/* ==========================================================================