X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app%2FResources%2Fstatic%2Fthemes%2Fmaterial%2Fcss%2Farticle.scss;h=edfd60071e4b543a49439d9bbd4f18678eefc444;hb=HEAD;hp=8b67f6bd3c7004b73c6d3cdb64df4d59d5b12c2a;hpb=4ab0d25f652bdfe184046be6d50afd594709e1a9;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 8b67f6bd..edfd6007 100644
--- a/app/Resources/static/themes/material/css/article.scss
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -6,11 +6,15 @@
   font-size: 20px;
   margin: 0 auto;
   max-width: 45em;
+  padding: 5px 20px;
+  background-color: #fff;
+  box-shadow: 0 0 10px #ccc;
 
   article {
     color: #424242;
     font-size: 18px;
     line-height: 1.7em;
+    overflow-wrap: break-word;
 
     h1,
     h2,
@@ -50,7 +54,7 @@
     }
 
     a {
-      border-bottom: 1px dotted #03a9f4;
+      border-bottom: 1px dotted $blueAccentColor;
       text-decoration: none;
     }
 
@@ -107,13 +111,19 @@
       flex-flow: row wrap;
 
       .stats {
-        font-size: 0.8em;
-        margin: 8px 15px 5px;
+        font-size: 0.7em;
+        margin: 8px 5px 5px;
 
         li {
           display: inline-flex;
           vertical-align: middle;
-          margin: 0 5px;
+          margin: 3px 5px;
+
+          i.material-icons {
+            color: #3e3e3e;
+            margin-right: 3px;
+            font-size: 18px;
+          }
         }
 
         a {
@@ -129,9 +139,12 @@
     }
 
     .chip {
-      background-color: $blueAccentColor;
+      background-color: #9e9e9e;
       padding: 0 15px 0 10px;
       margin: auto 2px;
+      border-radius: 6px;
+      height: 18px;
+      line-height: 18px;
 
       a,
       i {
@@ -140,8 +153,8 @@
 
       i.material-icons {
         float: right;
-        font-size: 20px;
-        line-height: 32px;
+        font-size: 16px;
+        line-height: 18px;
         padding-left: 8px;
       }
     }
@@ -165,18 +178,18 @@
   &:hover {
     width: 260px !important;
 
-    .collapsible-body {
-      height: auto;
-
-      li a i.material-icons {
-        margin: auto 5px auto -8px;
-      }
-    }
-
     span {
       opacity: 1;
     }
   }
+
+  .collapsible-body {
+    height: auto;
+
+    li a i.material-icons {
+      margin: auto 5px auto -8px;
+    }
+  }
 }
 
 .progress {