aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static
diff options
context:
space:
mode:
authorNicolas LÅ“uillet <nicolas@loeuillet.org>2016-11-04 08:49:52 +0100
committerGitHub <noreply@github.com>2016-11-04 08:49:52 +0100
commit2db9142bfc3e34c1f79f3aabf5b302c3a487b3e1 (patch)
treea840ae833b85d2b4a80e96c1426ab63f001d06cf /app/Resources/static
parentf53f542fa51075e742fc2295bfff2681b0375ea1 (diff)
parentd56d416d9bf18722a54a1b262e742767a41fb165 (diff)
downloadwallabag-2db9142bfc3e34c1f79f3aabf5b302c3a487b3e1.tar.gz
wallabag-2db9142bfc3e34c1f79f3aabf5b302c3a487b3e1.tar.zst
wallabag-2db9142bfc3e34c1f79f3aabf5b302c3a487b3e1.zip
Merge pull request #2460 from wallabag/ui-changes
UI Changes
Diffstat (limited to 'app/Resources/static')
-rwxr-xr-xapp/Resources/static/themes/baggy/css/main.css1
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css132
2 files changed, 111 insertions, 22 deletions
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css
index 44db2070..4c3e4ce3 100755
--- a/app/Resources/static/themes/baggy/css/main.css
+++ b/app/Resources/static/themes/baggy/css/main.css
@@ -581,7 +581,6 @@ img.preview {
581 581
582div.pagination ul { 582div.pagination ul {
583 text-align: right; 583 text-align: right;
584 margin-bottom: 50px;
585} 584}
586 585
587.nb-results { 586.nb-results {
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index 2cc2e8a0..446fe879 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;
@@ -207,8 +233,17 @@ div.pagination ul .next.disabled {
207 color: #fff; 233 color: #fff;
208} 234}
209 235
236.page-footer .footer-copyright {
237 min-width: 50px;
238 height: auto !important;
239 line-height: 1em !important;
240}
241
210.page-footer .footer-copyright p { 242.page-footer .footer-copyright p {
211 display: inline; 243 text-overflow: ellipsis;
244 white-space: nowrap;
245 overflow: hidden;
246 display: block;
212} 247}
213 248
214.hidden { 249.hidden {
@@ -397,13 +432,23 @@ main ul.row {
397} 432}
398 433
399.data .card .card-body { 434.data .card .card-body {
400 height: 22em; 435 height: 19em;
401 overflow: hidden; 436 overflow: hidden;
402} 437}
403 438
404.card .card-content .card-title { 439.card .card-content .card-title,
405 line-height: 32px; 440.card .card-reveal .card-title {
406 max-height: 64px; 441 line-height: 22.8px;
442 max-height: 80px;
443 font-size: 19px;
444 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
445 color: #313131;
446}
447
448.card .card-content .activator,
449.card .card-reveal .activator {
450 cursor: pointer;
451 font-family: "Material Icons";
407} 452}
408 453
409.card .card-content i.right, 454.card .card-content i.right,
@@ -411,6 +456,18 @@ main ul.row {
411 margin-left: 0; 456 margin-left: 0;
412} 457}
413 458
459.card .card-content .original {
460 line-height: 24px;
461 font-size: 15px;
462}
463
464a.original {
465 text-overflow: ellipsis;
466 white-space: nowrap;
467 overflow: hidden;
468 display: block;
469}
470
414.card .card-entry-labels { 471.card .card-entry-labels {
415 position: absolute; 472 position: absolute;
416 top: 10px; 473 top: 10px;
@@ -433,7 +490,7 @@ main ul.row {
433} 490}
434 491
435.card .card-entry-labels-hidden { 492.card .card-entry-labels-hidden {
436 margin-top: 5px; 493 margin: 2.5px auto;
437} 494}
438 495
439.card .card-entry-labels-hidden li { 496.card .card-entry-labels-hidden li {
@@ -464,8 +521,8 @@ main ul.row {
464 margin-bottom: 10px; 521 margin-bottom: 10px;
465} 522}
466 523
467.card .card-action .original { 524.card .card-action {
468 line-height: 24px; 525 padding: 10px 5px 10px 15px;
469} 526}
470 527
471.card .card-action ul.links { 528.card .card-action ul.links {
@@ -483,6 +540,11 @@ main ul.row {
483 color: #fff; 540 color: #fff;
484} 541}
485 542
543.card .card-action .reading-time {
544 display: inline-flex;
545 vertical-align: middle;
546}
547
486.quickstart .card .card-action a, 548.quickstart .card .card-action a,
487.quickstart .card .card-action a:hover { 549.quickstart .card .card-action a:hover {
488 color: #fff !important; 550 color: #fff !important;
@@ -499,7 +561,7 @@ main ul.row {
499} 561}
500 562
501.card .card-image { 563.card .card-image {
502 height: 14em; 564 height: 10em;
503} 565}
504 566
505.card .card-image .preview { 567.card .card-image .preview {
@@ -526,7 +588,8 @@ main ul.row {
526} 588}
527 589
528#article > header > h1 { 590#article > header > h1 {
529 font-size: 1.6em; 591 font-size: 2em;
592 margin: 2.1rem 0 0.68rem;
530} 593}
531 594
532.reader-mode { 595.reader-mode {
@@ -565,9 +628,21 @@ main ul.row {
565 z-index: 9999; 628 z-index: 9999;
566} 629}
567 630
568#article aside .link { 631#article aside .tools {
569 color: #000;
570 font-size: 0.8em; 632 font-size: 0.8em;
633 display: flex;
634 flex-flow: row wrap;
635 margin: 0 auto;
636}
637
638#article aside .tools li {
639 display: inline-flex;
640 vertical-align: middle;
641 margin: auto 10px;
642}
643
644#article aside .tools a {
645 color: #000;
571 text-decoration: none; 646 text-decoration: none;
572} 647}
573 648
@@ -578,10 +653,11 @@ main ul.row {
578 653
579#article aside .chip { 654#article aside .chip {
580 background-color: rgba(0, 151, 167, 0.85); 655 background-color: rgba(0, 151, 167, 0.85);
581 color: #fff;
582 padding: 0 15px 0 10px; 656 padding: 0 15px 0 10px;
657 margin: auto 2px;
583} 658}
584 659
660#article aside .chip a,
585#article aside .chip i { 661#article aside .chip i {
586 color: #fff; 662 color: #fff;
587} 663}
@@ -608,7 +684,6 @@ main ul.row {
608 } 684 }
609 685
610 #article { 686 #article {
611 padding: 15px;
612 max-width: 35em; 687 max-width: 35em;
613 margin-left: auto; 688 margin-left: auto;
614 margin-right: auto; 689 margin-right: auto;
@@ -652,7 +727,14 @@ main ul.row {
652 } 727 }
653} 728}
654 729
655@media only screen and (min-width: 993px) and (max-width: 1180px) { 730@media only screen and (min-width: 1200px) and (max-width: 1650px) {
731 .row .col.l3 {
732 width: 33.33333%;
733 margin-left: 0;
734 }
735}
736
737@media only screen and (min-width: 993px) and (max-width: 1200px) {
656 .row .col.l1 { 738 .row .col.l1 {
657 width: 25%; 739 width: 25%;
658 margin-left: 0; 740 margin-left: 0;
@@ -708,6 +790,14 @@ main ul.row {
708 .nb-results { 790 .nb-results {
709 display: none; 791 display: none;
710 } 792 }
793
794 main ul.row {
795 padding: 0;
796 }
797
798 .row .col {
799 padding: 0;
800 }
711} 801}
712 802
713/* ========================================================================== 803/* ==========================================================================