From e02945c1e3295f799b09f5e5a1c773de823b42af Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Sun, 17 May 2020 14:02:27 +0100
Subject: [PATCH] =?UTF-8?q?improvement(theme):=20adds=20consistent=20color?=
 =?UTF-8?q?=20throughout=20theme=20&=20updates=20=E2=80=A6=20(#105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     | 14 ++++++++------
 src/components/ActiveModule.vue | 32 +++++++++++++++++++++++++-------
 src/components/Control.vue      |  4 ++--
 src/components/Gallery.vue      |  2 +-
 src/components/Group.vue        | 12 +++++++-----
 src/css/golden-layout_theme.css |  2 +-
 6 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 758766b..4ac9db1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -247,16 +247,20 @@ export default {
   --fontSize: 14px;
   --foreground-color-rgb: 255, 255, 255;
   --foreground-color-a: 1;
-  --background-color: #141416;
-  --foreground-color-2: rgba(var(--foreground-color-rgb), 0.2);
-  --foreground-color-3: rgba(var(--foreground-color-rgb), 0.1);
+  --background-color: #000;
+  --foreground-color-2: rgba(var(--foreground-color-rgb), 0.4);
+  --foreground-color-3: rgba(var(--foreground-color-rgb), 0.2);
   --columnGap: calc(var(--lineHeight));
+
+  --focus-color-rgb: 241, 196, 16;
+  --focus-color-a: 1;
+  --focus-color: rgba(var(--focus-color-rgb), var(--focus-color-a));
 }
 
 *::-webkit-scrollbar {
   width: 14px;
   height: 14px;
-  background-color: var(--foreground-color-3); /* or add it to the track */
+  background-color: var(--foreground-color-3);
 }
 
 *::-webkit-scrollbar-thumb {
@@ -294,8 +298,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", "微軟雅黑", "Microsoft YaHei", "微軟正黑體",
     "Microsoft JhengHei", Verdana, Arial, sans-serif !important;
-
-  /* font-family: "IBM Plex Mono"; */
 }
 
 .hscreen {
diff --git a/src/components/ActiveModule.vue b/src/components/ActiveModule.vue
index 0a2a283..97a1e70 100644
--- a/src/components/ActiveModule.vue
+++ b/src/components/ActiveModule.vue
@@ -225,11 +225,12 @@ export default {
 
 <style scoped>
 .has-link {
-  border: 1px solid rgba(255, 217, 0, 0.3);
+  border: 1px solid var(--focus-color);
 }
 
 .focused {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--foreground-color-3);
+  color: var(--background-color);
 }
 
 .padded-grid {
@@ -258,12 +259,29 @@ input[type="checkbox"] {
 }
 
 .handle {
-  vertical-align: middle;
-  width: 16px;
-  height: 16px;
-  border: 1px solid;
-  border-radius: 50%;
+  position: relative;
   cursor: -webkit-grab;
+  height: 100%;
+}
+
+.handle::before,
+.handle::after {
+  content: "";
+  right: 15%;
+  height: 11%;
+  left: 15%;
+
+  position: absolute;
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+}
+
+.handle::before {
+  top: 16%;
+}
+
+.handle::after {
+  bottom: 21%;
 }
 </style>
 
diff --git a/src/components/Control.vue b/src/components/Control.vue
index 7707c3a..eb14ac3 100644
--- a/src/components/Control.vue
+++ b/src/components/Control.vue
@@ -175,11 +175,11 @@ export default {
 
 <style scoped>
 .has-link {
-  border: 1px solid rgba(255, 217, 0, 0.3);
+  border: 1px solid var(--focus-color);
 }
 
 .focused {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--foreground-color-2);
 }
 
 label {
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index ee000a8..f605ebd 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -205,7 +205,7 @@ grid.fluid {
 }
 
 div.gallery {
-  color: #fff;
+  color: var(--foreground-color);
 
   display: flex;
   flex-direction: column;
diff --git a/src/components/Group.vue b/src/components/Group.vue
index 6f9c413..6678f6f 100644
--- a/src/components/Group.vue
+++ b/src/components/Group.vue
@@ -289,25 +289,27 @@ section.group-controls {
 }
 
 .focused div.group-title {
-  background-color: rgba(255, 138, 101, 0.6);
+  background-color: var(--foreground-color-3);
+  color: var(--foreground-color);
 }
 
 div.group-title {
   padding: var(--baseline);
   width: 100%;
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: var(--foreground-color-3);
+  color: var(--foreground-color-2);
   box-sizing: border-box;
 }
 
 .focused div.group-modules {
-  background-color: rgba(191, 54, 12, 0.6);
+  background-color: var(--foreground-color-2);
 }
 
 div.group-modules {
   display: flex;
   overflow-x: auto;
   min-height: 174px;
-  background-color: rgba(90, 90, 90, 0.6);
+  background-color: var(--foreground-color-3);
 }
 
 div.group-module {
@@ -330,7 +332,7 @@ div.group-module:not(:last-child)::after {
 }
 
 div.group-module-container {
-  background-color: rgba(90, 90, 90, 0.6);
+  background-color: var(--foreground-color-3);
   width: 300px;
 }
 
diff --git a/src/css/golden-layout_theme.css b/src/css/golden-layout_theme.css
index 1bed357..213bd2c 100644
--- a/src/css/golden-layout_theme.css
+++ b/src/css/golden-layout_theme.css
@@ -36,7 +36,7 @@
 
 .lm_splitter:hover,
 .lm_splitter.lm_dragging {
-  background: #bbbbbb;
+  background: var(--focus-color);
   opacity: 1;
 }