Card no preview replaced by wallabag logo

[github/wallabag/wallabag.git] / app / Resources / static / themes / material / css / cards.scss

diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
index 18ef6e602f37c8f450465f437a86b4b6c840b362..6691adc6e4a7ec247db63612307701cdb3cff822 100644 (file)
--- 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;
   }
 }
@@ -24,7 +25,10 @@ main {
     max-height: 80px;
     font-size: 19px;
     font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #313131;
+  }
+
+  .card-stacked .card-content .card-title {
+    display: inline-block;
   }
 
   .card-content .activator,
@@ -68,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;
   }
@@ -111,21 +101,11 @@ main {
     .reading-time {
       display: inline-flex;
       vertical-align: middle;
-    }
-  }
 
-  .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;
-    color: #fff;
-    cursor: default;
-    max-height: 2em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+      span {
+        margin-right: 5px;
+      }
+    }
   }
 
   .card-image {
@@ -138,8 +118,14 @@ main {
 
   .card-image .preview,
   .card-fullimage .preview {
-    height: 14em;
+    height: 100%;
     background: no-repeat 50%/cover;
+    background-color: #efefef;
+    display: block;
+
+    &--default {
+      background-size: contain;
+    }
   }
 
   &.sw {
@@ -149,13 +135,35 @@ main {
   }
 }
 
-a.original {
+a.original:not(.waves-effect) {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   display: block;
 }
 
+.card-entry-labels li,
+.card-tag-labels li {
+  margin: 10px 10px 10px auto;
+  padding: 5px 12px 5px 16px !important;
+  background-color: $blueAccentColor;
+  border-radius: 3px;
+  color: #fff;
+  cursor: default;
+}
+
+.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,
 .card-entry-labels a,
 .card-tag-labels a,
@@ -166,16 +174,98 @@ a.original {
   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;
+
   &: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;
+  }
+
+  .tags {
+    display: inline-block;
   }
 }
 
+#content .collection .collection-item {
+  min-height: 65px;
+  height: auto;
+}
+
 .quickstart .card .card-action a,
 .quickstart .card .card-action a:hover {
   color: #fff !important;
@@ -184,3 +274,9 @@ a.original {
 .settings .div_tabs {
   padding-bottom: 15px;
 }
+
+@media only screen and (min-width: 992px) {
+  .card-tag-labels li {
+    max-width: 50%;
+  }
+}