X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Fcards.scss;h=9e3599d5ea020efbf1bbc9eea6abb5f2f21e3e52;hb=e5de9917fdd78d4cd3b46b376e3b2a4175efa36a;hp=0819f0dcecba8f5175d084d89eb7bde7b353b26d;hpb=613a8ec3123de83013837bf97b59c3bd1af02548;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 0819f0dc..9e3599d5 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -25,7 +25,6 @@ main {
     max-height: 80px;
     font-size: 19px;
     font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #313131;
   }
 
   .card-stacked .card-content .card-title {
@@ -73,20 +72,6 @@ main {
     white-space: nowrap;
   }
 
-  .card-entry-labels-hidden li {
-    display: inline-block;
-    background-color: $blueAccentColor;
-    margin: 0 5px;
-    padding: 5px 12px;
-    border-radius: 3px;
-    color: #fff;
-    max-height: 2em;
-    max-width: calc(100% - 15px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .card-content .estimatedTime {
     margin-bottom: 10px;
   }
@@ -131,13 +116,6 @@ main {
     height: 13.5em;
   }
 
-  .card-image .preview,
-  .card-fullimage .preview {
-    height: 14em;
-    background: no-repeat 50%/cover;
-    display: block;
-  }
-
   &.sw {
     max-width: 370px;
     margin-left: auto;
@@ -152,18 +130,39 @@ 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;
   padding: 5px 12px 5px 16px !important;
   background-color: $blueAccentColor;
-  border-radius: 0 3px 3px 0;
+  border-radius: 3px;
   color: #fff;
   cursor: default;
-  max-height: 2em;
-  overflow: hidden;
+}
+
+.card-entry-labels li {
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 0 3px 3px 0;
+  overflow: hidden;
+}
+
+.card-tag-labels li {
+  display: flex;
+  justify-content: space-between;
 }
 
 .card-entry-tags a,
@@ -176,6 +175,33 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
+.card-tag-labels a {
+  height: 100%;
+  align-items: center;
+}
+
+.card-tag-link {
+  display: flex;
+  min-width: 100px;
+  flex-grow: 1;
+}
+
+.card-tag-rss {
+  display: flex;
+}
+
+.card-tag-labels {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card-tag-labels li {
+  margin: 10px;
+  flex-basis: 19%;
+  flex-grow: 1;
+  align-items: center;
+}
+
 .card-stacked {
   display: flex;
   flex-flow: row wrap;
@@ -185,16 +211,11 @@ 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 {
@@ -230,6 +251,10 @@ a.original:not(.waves-effect) {
     float: right;
     max-width: 6em;
   }
+
+  .tags {
+    display: inline-block;
+  }
 }
 
 #content .collection .collection-item {
@@ -245,3 +270,9 @@ 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%;
+  }
+}