X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Farticle.scss;h=75658a580f75232fa43d54591212eb98a26e7651;hb=44043ebe82a22470e2514d05efac324035ee809a;hp=7d0bdac76b957b280fcc1b750b1ea31aa5feb0df;hpb=64f81bc31699ed239e4becec1cfa7ebc0bef2b5a;p=github%2Fwallabag%2Fwallabag.git

diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
index 7d0bdac7..75658a58 100644
--- a/app/Resources/static/themes/material/css/article.scss
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -11,6 +11,7 @@
     color: #424242;
     font-size: 18px;
     line-height: 1.7em;
+    overflow-wrap: break-word;
 
     h1,
     h2,
@@ -103,42 +104,59 @@
 
   aside {
     .tools {
-      font-size: 0.8em;
       display: flex;
       flex-flow: row wrap;
-      margin: 0 auto;
 
-      li {
-        display: inline-flex;
-        vertical-align: middle;
+      .stats {
+        font-size: 0.8em;
+        margin: 8px 5px 5px;
+
+        li {
+          display: inline-flex;
+          vertical-align: middle;
+          margin: 3px 5px;
+
+          i.material-icons {
+            color: #3e3e3e;
+            margin-right: 3px;
+          }
+        }
+
+        a {
+          color: #000;
+          text-decoration: none;
+        }
       }
 
-      a {
-        color: #000;
-        text-decoration: none;
+      .tags {
+        float: right;
+        margin: 5px 15px 10px;
       }
     }
 
-    #list {
-      float: right;
-      margin: 0 15px 10px;
-    }
-
     .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;
+      }
     }
   }
 }
 
 .reader-mode {
-  width: 95px !important;
+  width: 70px !important;
   transition: width 0.2s ease;
 
   .collapsible-body {
@@ -150,17 +168,21 @@
     opacity: 0;
     transition: opacity 0.2s ease;
   }
-}
 
-.reader-mode:hover {
-  width: 240px !important;
+  &:hover {
+    width: 260px !important;
 
-  .collapsible-body {
-    height: auto;
-  }
+    .collapsible-body {
+      height: auto;
 
-  span {
-    opacity: 1;
+      li a i.material-icons {
+        margin: auto 5px auto -8px;
+      }
+    }
+
+    span {
+      opacity: 1;
+    }
   }
 }