Improvement/ui/theme (#107)

vcync · May 18, 2020 · c355f51 · c355f51
1 parent e02945c
commit c355f51
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -247,9 +247,11 @@ export default {
   --fontSize: 14px;
   --foreground-color-rgb: 255, 255, 255;
   --foreground-color-a: 1;
-  --background-color: #000;
+  --background-color: #111;
+  --foreground-color-1: rgba(var(--foreground-color-rgb), 0.5);
   --foreground-color-2: rgba(var(--foreground-color-rgb), 0.4);
   --foreground-color-3: rgba(var(--foreground-color-rgb), 0.2);
+  --foreground-color-4: rgba(var(--foreground-color-rgb), 0.1);
   --columnGap: calc(var(--lineHeight));
 
   --focus-color-rgb: 241, 196, 16;
@@ -271,6 +273,21 @@ export default {
   box-sizing: border-box;
 }
 
+select {
+  box-sizing: border-box;
+  border: none;
+  position: relative;
+  display: inline-block;
+  background-color: var(--foreground-color);
+}
+
+input[type="text"],
+input[type="number"],
+textarea,
+select {
+  padding: 0.3em 0.5em;
+}
+
 .lm_header .lm_tab {
   padding: 0 1em 5px;
   font-size: 1rem;

diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
@@ -211,7 +211,6 @@ div.gallery {
   flex-direction: column;
   box-sizing: border-box;
 
-  overflow-y: auto;
   height: 100%;
 }
 

diff --git a/src/css/golden-layout_theme.css b/src/css/golden-layout_theme.css
@@ -1,10 +1,10 @@
 .lm_goldenlayout {
-  background: var(--background-color);
+  background: var(--foreground-color-4);
 }
 
 .lm_content {
   background: var(--background-color);
-  border: 1px solid var(--foreground-color-2);
+  border: 0;
 }
 
 .lm_content .glComponent {
@@ -42,8 +42,10 @@
 
 .lm_header {
   height: 20px;
+  border-bottom: 1px solid var(--foreground-color-4);
 }
 
+
 .lm_header.lm_selectable {
   cursor: pointer;
 }
@@ -53,12 +55,12 @@
   font-size: 12px;
   background: var(--foreground-color-3);
   color: var(--foreground-color-2);
-  margin-right: 2px;
   padding-bottom: 4px;
-  border: 1px solid var(--foreground-color-2);
-  border-bottom: none;
   box-shadow: none;
   line-height: initial;
+  border: none;
+  height: 15px;
+  margin: 0;
 }
 
 .lm_header .lm_tab .lm_title {
@@ -101,8 +103,8 @@
 }
 
 .lm_tab:hover,.lm_tab.lm_active {
-  background: var(--foreground-color-2);
-  color: var(--foreground-color);
+  background: var(--foreground-color-4);
+  color: var(--foreground-color-1);
 }
 
 .lm_header .lm_controls .lm_tabdropdown:before {