X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Fcards.scss;h=c893b3761a80a047a0b3b6086cfaad600b03e178;hb=3620dae1e6b3fab5a4ba4001b4581ce7ed795996;hp=528722208fb745ef087473e19681e3bd5a35d049;hpb=b878be4cc99fd4927c70b59386cf7a57b33bb381;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 52872220..c893b376 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -102,6 +102,11 @@ main { display: inline-flex; vertical-align: middle; + .card-reading-time, + .card-created-at { + display: inline-flex; + } + span { margin-right: 5px; } @@ -116,18 +121,6 @@ main { height: 13.5em; } - .card-image .preview, - .card-fullimage .preview { - height: 100%; - background: no-repeat 50%/cover; - background-color: #efefef; - display: block; - - &--default { - background-size: contain; - } - } - &.sw { max-width: 370px; margin-left: auto; @@ -142,6 +135,19 @@ a.original:not(.waves-effect) { display: block; } +.card .card-image .preview, +.card .card-fullimage .preview, +.card-stacked .preview { + height: 100%; + background: no-repeat 50%/cover; + background-color: #efefef; + display: block; + + &--default { + background-size: contain; + } +} + .card-entry-labels li, .card-tag-labels li { margin: 10px 10px 10px auto; @@ -221,24 +227,21 @@ a.original:not(.waves-effect) { text-align: right; } - .preview { + .card-preview { max-width: 100px; - height: auto; + max-height: 50px; margin-right: 10px; flex: 1; - - img { - max-width: 100%; - max-height: 100%; - } } div.metadata { .chip { background-color: $blueAccentColor; - padding: 0 15px 0 10px; + padding: 0 7px; margin: auto 2px; border-radius: 6px; + line-height: 22px; + height: 22px; a, i { @@ -285,9 +288,3 @@ a.original:not(.waves-effect) { .settings .div_tabs { padding-bottom: 15px; } - -@media only screen and (min-width: 992px) { - .card-tag-labels li { - max-width: 50%; - } -}