Update layout.

src/_h5ai/client/css/inc/general.less

@@ -1,16 +1,32 @@
+// @col-blue: #2196F3;
+@col-blue: #42a5f5;
+@col-green: #4caf50;
+@col-red: #f44336;
 
-@col: #333;
-@col-back: #eee;
-@col-hover: #42a5f5;
+@col-light: #ffffff;
+@col-lightgray: #fafafa;
+@col-darkgray: #eeeeee;
+// @col-dark: #333;
+@col-dark: #212121;
+
+@col-font-light: @col-light;
+@col-font-dark: @col-dark;
+
+@col-back-light: @col-lightgray;
+@col-back-dark: @col-darkgray;
+
+@col: @col-dark;
+@col-back: @col-back-dark;
+@col-hover: @col-blue;
 @col-border: rgba(0,0,0,0.05);
 @col-border-strong: rgba(0,0,0,0.15);
 @col-border-stronger: rgba(0,0,0,0.3);
 
-@col-okay: #689f38;
-@col-error: #d32f2f;
+@col-okay: @col-green;
+@col-error: @col-red;
 
-@col-link: #42a5f5;
-@col-link-hover: #42a5f5;
+@col-link: @col-blue;
+@col-link-hover: @col-blue;
 
 @col-widget-back: rgb(245,245,245);
 @col-widget-back-highlight: rgba(255,255,255,0.8);
@@ -34,8 +50,8 @@
 @font-family-mono: monospace;
 
 
-::-moz-selection { background: #42a5f5; color: #fff; text-shadow: none; }
-::selection { background: #42a5f5; color: #fff; text-shadow: none; }
+::-moz-selection { background: @col-blue; color: @col-font-light; text-shadow: none; }
+::selection { background: @col-blue; color: @col-font-light; text-shadow: none; }
 
 .transition (@transition) {
     -webkit-transition: @transition;
@@ -49,6 +65,49 @@
     zoom: 1;
 }
 
+.card() {
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+}
+
+.raised() {
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+}
+
+.rounded() {
+    overflow: hidden;
+    border-radius: 2px;
+}
+
+.el-button() {
+    .card();
+    .rounded();
+    .transition(all 0.2s ease-in-out);
+    color: @col-light;
+    background: @col-blue;
+    border-radius: 2px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        .raised();
+    }
+}
+
+.el-input() {
+    .card();
+    .rounded();
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+    font-family: @font-family;
+    font-weight: @font-weight;
+    color: @col-dark;
+    background: @col-light;
+    border: none;
+    outline: none;
+}
+
+
 html {
     min-height: 100%;
     overflow: auto;
@@ -97,6 +156,6 @@ body {
     height: 0;
 }
 
-*:focus {
-    outline: 1px solid #42a5f5;
-}
+// *:focus {
+//     outline: 1px solid #42a5f5;
+// }

src/_h5ai/client/css/inc/h5ai-info.less

@@ -46,42 +46,20 @@ body#h5ai-info {
     }
 
     #pass {
-        -moz-appearance: none;
-        -ms-appearance: none;
-        -webkit-appearance: none;
-        font-family: @font-family;
-        font-weight: @font-weight;
-        color: @col;
-        background: #fff;
-        border: none;
-        outline: none;
+        .el-input();
         display: inline-block;
-        width: 200px;
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
-        border-radius: 2px;
         margin: 8px;
         padding: 0 12px;
         line-height: 28px;
+        width: 200px;
     }
 
     #login, #logout {
+        .el-button();
         display: inline-block;
         margin: 8px;
         padding: 0 12px;
-        background: #42a5f5;
-        color: #fff;
         line-height: 28px;
-        cursor: pointer;
-        border-radius: 2px;
-        cursor: pointer;
-        text-decoration: none;
-        .transition(all 0.2s ease-in-out);
-
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
-
-        &:hover {
-            box-shadow: 0 1px 8px 0px rgba(0,0,0,0.5);
-        }
     }
 
     #hint {
@@ -98,11 +76,10 @@ body#h5ai-info {
         padding: 0;
 
         .test {
+            .card();
+            .rounded();
             margin: 12px 0 0 0;
             padding: 8px;
-            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
-            background: #fff;
-            border-radius: 2px;
         }
         .label {
             display: inline-block;

src/_h5ai/client/css/inc/view-details.less

@@ -27,6 +27,7 @@
     margin: 16px;
 
     #items {
+        .rounded();
         box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
     }
 
@@ -65,10 +66,11 @@
     }
 
     .item {
+        overflow: hidden;
         border-bottom: 1px solid rgba(0,0,0,0.07);
 
         &:hover {
-            box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5);
+            .raised();
             z-index: 1;
         }
     }
@@ -81,6 +83,7 @@
         padding: 8px;
 
         .thumb {
+            .rounded();
             box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
         }
     }
@@ -102,7 +105,8 @@
     }
 
     .selector {
-        margin-top: -1px;
+        left: -2px;
+        top: -2px;
     }
 
     .view-details-sized(16px)

src/_h5ai/client/css/inc/view-grid.less

@@ -21,12 +21,13 @@
     margin: 8px;
 
     .item {
+        .card();
+        .rounded();
         float: left;
         margin: 8px;
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
 
-        &:hover, &.hover {
-            box-shadow: 0 1px 10px 0px rgba(0,0,0,0.5);
+        &:hover {
+            .raised();
         }
     }
 

src/_h5ai/client/css/inc/view-icons.less

@@ -24,12 +24,13 @@
     margin: 8px;
 
     .item {
+        .card();
+        .rounded();
         float: left;
         margin: 8px;
-        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
 
-        &:hover, &.hover {
-            box-shadow: 0 1px 12px 0px rgba(0,0,0,0.5);
+        &:hover {
+            .raised();
         }
     }
 

src/_h5ai/client/css/inc/view.less

@@ -112,16 +112,16 @@
     .selector {
         display: none;
         position: absolute;
-        left: -4px;
-        top: 4px;
+        left: 0;
+        top: 0;
         width: 22px;
         height: 22px;
         background-color: #fff;
         cursor: pointer;
-        box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
-        border-radius: 0 20px 20px 0;
+        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
+        border-radius: 0 0 12px 0;
         opacity: 0.6;
-        padding: 2px;
+        padding: 0px;
 
         &:hover {
             opacity: 0.8;