X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Fcards.scss;h=7b38a743e356ba975affc0466f92082580682618;hb=b9be1cf1ee771a34cbf496cc3b0290a01dbbe1c6;hp=40351475e2c281dcc483b83116d875d50d4b9b9f;hpb=4c6ee89c9c70f24209f2bb86de2b3137ab2d801c;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 40351475..7b38a743 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -27,7 +27,7 @@ main { color: #313131; } - .card-content .card-title { + .card-stacked .card-content .card-title { display: inline-block; } @@ -134,6 +134,7 @@ main { .card-fullimage .preview { height: 14em; background: no-repeat 50%/cover; + display: block; } &.sw { @@ -175,15 +176,66 @@ a.original:not(.waves-effect) { } .card-stacked { + display: flex; + flex-flow: row wrap; + &:hover ul.tools-list { - display: block; + display: inline; + text-align: right; + } + + .preview { + max-width: 100px; + height: auto; + margin-right: 10px; + flex: 1; + + img { + max-width: 100%; + max-height: 100%; + } + } + + div.metadata { + .chip { + background-color: $blueAccentColor; + padding: 0 15px 0 10px; + margin: auto 2px; + border-radius: 6px; + + a, + i { + color: #fff; + } + + i.material-icons { + float: right; + font-size: 20px; + line-height: 32px; + padding-left: 8px; + } + } + } + + div.card-content { + flex: 4; } ul.tools-list { + flex: 1; display: none; + flex-basis: 5em; + align-self: flex-end; + float: right; + max-width: 6em; } } +#content .collection .collection-item { + min-height: 65px; + height: auto; +} + .quickstart .card .card-action a, .quickstart .card .card-action a:hover { color: #fff !important;