Merge pull request #4983 from Simounet/feat/dark-theme-updated

Dark theme updated

app/Resources/static/themes/material/css/dark_theme.scss

@@ -19,43 +19,31 @@
     background-color: #121212;
   }
 
-  .cyan,
-  .cyan.darken-1,
-  .cyan.darken-2 {
-    background-color: rgba(255, 255, 255, 0.05) !important;
-  }
-
   .dropdown-content li {
-    background-color: rgba(255, 255, 255, 0.07);
+    background-color: #232323;
   }
 
   .dropdown-content li:hover,
   .dropdown-content li.active,
   .dropdown-content li.selected {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: #2c2c2c;
   }
 
-  .dropdown-content li > a {
-    color: #dfdfdf;
-  }
-
-  .dropdown-content li.divider {
-    background-color: rgba(255, 255, 255, 0.16);
+  .dropdown-content .divider {
+    background-color: #383838;
   }
 
   .collection {
-    border: 0;
+    border-color: transparent;
   }
 
   .collection .collection-item {
-    background-color: rgba(255, 255, 255, 0.05);
-    margin-top: 4px;
-    margin-bottom: 4px;
-    border: 0;
+    border-color: #121212;
   }
 
-  .collection li.collection-item:hover {
-    background-color: rgba(255, 255, 255, 0.09);
+  .card:hover,
+  .collection .collection-item:hover {
+    background-color: #272727;
   }
 
   main #content,
@@ -66,41 +54,44 @@
   #article article h4,
   #article article h5,
   #article article h6,
+  .dropdown-content li > a,
   .results a,
   .side-nav li > a,
   .side-nav li > a > i.material-icons {
     color: #dfdfdf;
   }
 
+  .cyan,
+  .cyan.darken-1,
+  .cyan.darken-2 {
+    background-color: #1d1d1d !important;
+  }
+
   .grey-text.text-darken-4 {
     color: #dfdfdf !important;
   }
 
-  #article li.chip {
-    background-color: rgba(255, 255, 255, 0.11);
+  #article .chip {
+    background-color: #373737;
   }
 
   .side-nav li.active {
-    background-color: rgba(255, 255, 255, 0.12);
+    background-color: #2f2f2f;
   }
 
   .side-nav li:not(.logo) > a:hover,
   .side-nav .collapsible-header:hover,
   .side-nav.fixed .collapsible-header:hover {
-    background-color: rgba(255, 255, 255, 0.04);
+    background-color: #1d1d1d;
   }
 
   #article {
-    background-color: rgba(255, 255, 255, 0.05);
     box-shadow: 0 0 10px #1d1d1d;
   }
 
-  .card {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-
-  .card:hover {
-    background-color: rgba(255, 255, 255, 0.09);
+  .card,
+  .collection .collection-item {
+    background-color: #1d1d1d;
   }
 
   .card-action {
@@ -117,4 +108,10 @@
   .collapsible {
     border-color: #222;
   }
+
+  @media only screen and (min-width: 992px) {
+    #article {
+      background-color: #101010;
+    }
+  }
 }