style updates

Former-commit-id: 23115e50db17bed8592b6e472046fdd640403dc0

_embed/public/css/styles.css

@@ -604,7 +604,7 @@ pre {
 header {
     z-index: 999;
     padding: 1.7em 0;
-    background-color: #2196f3;
+    background-color: #fff;
     border-bottom: 1px solid rgba(0, 0, 0, 0.075);
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
@@ -632,7 +632,7 @@ header p i {
 }
 
 header #logout {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.05);
     border-radius: 0;
     margin: -0.5em -0.5em -0.5em 0;
     padding: .5em;
@@ -648,9 +648,8 @@ header p i {
     height: 100%;
     padding: 0.75em;
     vertical-align: middle;
-    color: #fff;
     border-radius: 0.3em;
-    background-color: #1e88e5;
+    background-color: #f5f5f5;
     transition: .1s ease all;
 }
 
@@ -673,7 +672,7 @@ header p i {
 
 #search i {
     margin-right: 0.3em;
-    color: rgba(255, 255, 255, .5);
+    /* color: rgba(255, 255, 255, .5); */
     user-select: none;
 }
 
@@ -681,7 +680,7 @@ header p i {
     min-width: 20em;
     border: 0;
     outline: 0;
-    color: rgba(255, 255, 255, 0.72);
+    /* color: rgba(255, 255, 255, 0.72); */
     background-color: transparent;
 }
 
@@ -782,7 +781,6 @@ header {
     display: flex;
     width: 100%;
     padding: 0.5em;
-    color: #fff;
     max-height: 4em;
 }
 
@@ -820,7 +818,7 @@ header p a:hover {
     transition: 0.2s ease-in-out all;
     opacity: 0;
     color: #fff;
-    background-color: #6f6f6f;
+    background-color: #2196f3;
 }
 
 #toolbar.enabled {
@@ -982,7 +980,7 @@ header .action span {
     display: flex;
     padding: 0;
     flex-wrap: wrap;
-    justify-content: flex-start;;
+    justify-content: flex-start;
     max-width: calc(100% - 2.2em);
     width: 100%;
     opacity: 0;
@@ -990,15 +988,20 @@ header .action span {
 }
 
 #listing.list {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
     flex-direction: column;
+    margin-top: -1em;
+    width: 100%;
+    max-width: 100%;
 }
 
 #listing.list .item {
     width: 100%;
-    margin: 0 0 1em;
+    margin: 0;
+    border: 0;
+    box-shadow: none;
+    border-radius: 0;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    padding: 1em;
 }
 
 #listing .item {
@@ -1051,6 +1054,18 @@ header .action span {
 }
 
 
+#listing.list .item div:first-of-type {
+    width: 3em;
+}
+
+#listing.list .item div:first-of-type i {
+    font-size: 2em;
+}
+
+#listing.list .item div:last-of-type {
+    width: calc(100% - 3em);
+}
+
 /* ANIMATIONS */
 
 i.spin {