From 2b64432f9af868edf347214964177bd424d56664 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 06:03:57 +0300
Subject: [PATCH] semi-transparent inputbox style

---
 src/App.scss                              | 8 ++++----
 src/_variables.scss                       | 1 +
 src/services/style_setter/style_setter.js | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index a8601220..fb7ef067 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -93,8 +93,8 @@ input, textarea, .select {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0px 2px black inset;
-  background-color: $fallback--lightBg;
-  background-color: var(--lightBg, $fallback--lightBg);
+  background-color: $fallback--input;
+  background-color: var(--input, $fallback--input);
   color: $fallback--lightFg;
   color: var(--lightFg, $fallback--lightFg);
   font-family: sans-serif;
@@ -154,8 +154,8 @@ input, textarea, .select {
       border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
       margin-right: .5em;
-      background-color: $fallback--btn;
-      background-color: var(--btn, $fallback--btn);
+      background-color: $fallback--input;
+      background-color: var(--input $fallback--input);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
diff --git a/src/_variables.scss b/src/_variables.scss
index 3cd55868..427cc36b 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -4,6 +4,7 @@ $darkened-background: whitesmoke;
 
 $fallback--bg: #121a24;
 $fallback--btn: #182230;
+$fallback--input: #182230;
 $fallback--faint: rgba(185, 185, 186, .5);
 $fallback--fg: #b9b9ba;
 $fallback--link: #d8a070;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3e96f54d..4a6c4d8f 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -71,6 +71,7 @@ const setColors = (col, commit) => {
   colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
   colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
   colors.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
+  colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)`
   colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
   colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text