improvement(theme): adds consistent color throughout theme & updates … (

#105)
vcync · May 17, 2020 · e02945c · e02945c
1 parent fd026d8
commit e02945c
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -36,7 +36,7 @@
 
 .lm_splitter:hover,
 .lm_splitter.lm_dragging {
-  background: #bbbbbb;
+  background: var(--focus-color);
   opacity: 1;
 }