From c7c080d029a177331b0dcae629db50923f083c3a Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Thu, 11 Dec 2014 01:35:21 +0100
Subject: [PATCH] Update layout.

---
 .editorconfig                           |  4 ++++
 src/_h5ai/client/css/inc/general.less   | 25 ++++++++++++++++++------
 src/_h5ai/client/css/inc/h5ai-info.less |  4 ++--
 src/_h5ai/client/css/inc/view.less      | 26 ++++++++-----------------
 4 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 77b93480..874a73b4 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -28,3 +28,7 @@ trim_trailing_whitespace = false
 
 [*.jade]
 trim_trailing_whitespace = false
+
+
+[*.svg]
+insert_final_newline = false
diff --git a/src/_h5ai/client/css/inc/general.less b/src/_h5ai/client/css/inc/general.less
index 067686a0..b2117d6a 100644
--- a/src/_h5ai/client/css/inc/general.less
+++ b/src/_h5ai/client/css/inc/general.less
@@ -9,13 +9,26 @@
 // @col-dark: #333;
 @col-dark: #212121;
 
+@col-text-primary-black: rgba(0,0,0,0.87);
+@col-text-secondary-black: rgba(0,0,0,0.54);
+@col-text-disabled-black: rgba(0,0,0,0.26);
+@col-divider-black: rgba(0,0,0,0.12);
+
+@col-text-primary-white: rgba(255,255,255,1.0);
+@col-text-secondary-white: rgba(255,255,255,0.7);
+@col-text-disabled-white: rgba(255,255,255,0.3);
+@col-divider-white: rgba(255,255,255,0.12);
+
+@col-text-selected: @col-text-primary-white;
+@col-back-selected: @col-blue;
+
 @col-font-light: @col-light;
 @col-font-dark: @col-dark;
 
 @col-back-light: @col-lightgray;
 @col-back-dark: @col-darkgray;
 
-@col: @col-dark;
+@col: @col-text-primary-black;
 @col-back: @col-back-dark;
 @col-hover: @col-blue;
 @col-border: rgba(0,0,0,0.05);
@@ -50,8 +63,8 @@
 @font-family-mono: monospace;
 
 
-::-moz-selection { background: @col-blue; color: @col-font-light; text-shadow: none; }
-::selection { background: @col-blue; color: @col-font-light; text-shadow: none; }
+::-moz-selection { background: @col-blue; color: @col-text-primary-white; text-shadow: none; }
+::selection { background: @col-blue; color: @col-text-primary-white; text-shadow: none; }
 
 .transition (@transition) {
     -webkit-transition: @transition;
@@ -82,7 +95,7 @@
     .card();
     .rounded();
     .transition(all 0.2s ease-in-out);
-    color: @col-light;
+    color: @col-text-primary-white;
     background: @col-blue;
     border-radius: 2px;
     cursor: pointer;
@@ -101,7 +114,7 @@
     -webkit-appearance: none;
     font-family: @font-family;
     font-weight: @font-weight;
-    color: @col-dark;
+    color: @col-text-primary-black;
     background: @col-light;
     border: none;
     outline: none;
@@ -130,7 +143,7 @@ body {
     font-family: @font-family;
     font-size: @font-size;
     font-weight: @font-weight;
-    color: @col;
+    color: @col-text-primary-black;
     background: @col-back;
 
     display: flex;
diff --git a/src/_h5ai/client/css/inc/h5ai-info.less b/src/_h5ai/client/css/inc/h5ai-info.less
index 8ca249da..f3f0bed8 100644
--- a/src/_h5ai/client/css/inc/h5ai-info.less
+++ b/src/_h5ai/client/css/inc/h5ai-info.less
@@ -4,7 +4,7 @@ body#h5ai-info {
     #content {
         flex: 1 1 auto;
         order: 50;
-        color: @col;
+        color: @col-text-primary-black;
         text-align: center;
         overflow-y: scroll;
     }
@@ -24,7 +24,7 @@ body#h5ai-info {
         font-size: 4em;
         font-weight: 300;
         margin: 0.8em 0 0 0;
-        color: @col;
+        color: @col-text-primary-black;
         text-decoration: none;
         .transition(all 0.2s ease-in-out);
 
diff --git a/src/_h5ai/client/css/inc/view.less b/src/_h5ai/client/css/inc/view.less
index fa43e4b4..d11a47f8 100644
--- a/src/_h5ai/client/css/inc/view.less
+++ b/src/_h5ai/client/css/inc/view.less
@@ -1,12 +1,4 @@
 
-@item-col-hover: @col-hover;
-@item-background-col-hover: #fafafa;
-@item-border-col-hover: @col-border;
-
-@item-col-sel: #fff;
-@item-background-col-sel: #42a5f5;
-
-
 #selection-rect {
     display: none;
     position: absolute;
@@ -44,24 +36,22 @@
         background: #fff;
 
         &:hover {
-            color: @item-col-hover;
-            background: @item-background-col-hover;
-            border-color: @item-border-col-hover;
-        }
+            color: @col-hover;
+            background: @col-lightgray;
+            border-color: @col-border;
 
-        &:hover {
             .selector {
                 display: block;
             }
         }
 
         &.selected:not(.selecting), &.selecting:not(.selected) {
-            color: @item-col-sel;
-            background: @item-background-col-sel;
+            color: @col-text-selected;
+            background: @col-back-selected;
 
             &:hover {
-                color: @item-col-sel;
-                background: @item-background-col-sel;
+                color: @col-text-selected;
+                background: @col-back-selected;
             }
 
             .selector {
@@ -137,7 +127,7 @@
         display: none;
         margin-top: 36px;
         text-align: center;
-        color: #ddd;
+        color: @col-border;
         font-size: 5em;
         font-weight: bold;
     }