X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Fcards.scss;h=0819f0dcecba8f5175d084d89eb7bde7b353b26d;hb=aeab8b342e462a446c6be54896ac76c41d68b471;hp=f5b79193931248b0d9ede9cf8da6a21a8ab89706;hpb=ff5cdbdc95f3cc2bf28cde27e5e544a3efca3d38;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 f5b79193..0819f0dc 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -8,6 +8,7 @@ main {
   }
 
   ul.row {
+    margin: 0.4rem 0 0;
     padding: 0 0.75rem;
   }
 }
@@ -134,6 +135,7 @@ main {
   .card-fullimage .preview {
     height: 14em;
     background: no-repeat 50%/cover;
+    display: block;
   }
 
   &.sw {
@@ -175,15 +177,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;