X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Fcards.scss;h=9ae1be826d75d7f32838e3099f31f6036ebab86b;hb=9f0957b831622ee577fa7d8f92ec0df6f3a8e274;hp=c893b3761a80a047a0b3b6086cfaad600b03e178;hpb=9e2194e9cb55acf0a715e36c33f9f9d8689e0761;p=github%2Fwallabag%2Fwallabag.git diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index c893b376..9ae1be82 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -18,6 +18,24 @@ main { overflow: hidden; } +@mixin mixin-reading-time { + .reading-time { + display: inline-flex; + vertical-align: middle; + + .card-reading-time, + .card-created-at { + display: inline-flex; + } + + span { + margin-right: 5px; + } + + @content; + } +} + .card { .card-content .card-title, .card-reveal .card-title { @@ -98,19 +116,7 @@ main { margin-right: 5px !important; } - .reading-time { - display: inline-flex; - vertical-align: middle; - - .card-reading-time, - .card-created-at { - display: inline-flex; - } - - span { - margin-right: 5px; - } - } + @include mixin-reading-time; } .card-image { @@ -235,10 +241,18 @@ a.original:not(.waves-effect) { } div.metadata { + overflow: hidden; + height: 1.5em; + display: flex; + + ul.tags { + margin-left: 4px; + } + .chip { background-color: $blueAccentColor; padding: 0 7px; - margin: auto 2px; + margin: auto 1px; border-radius: 6px; line-height: 22px; height: 22px; @@ -255,6 +269,16 @@ a.original:not(.waves-effect) { padding-left: 8px; } } + + @include mixin-reading-time { + padding: 0 5px; + flex-wrap: wrap; + margin-left: auto; + + i.material-icons { + font-size: 20px; + } + } } div.card-content {