From 2b64432f9af868edf347214964177bd424d56664 Mon Sep 17 00:00:00 2001 From: Henry Jameson 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