diff options
| author | Henry Jameson <me@hjkos.com> | 2018-04-15 06:03:57 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-05-12 15:19:53 +0300 |
| commit | 2b64432f9af868edf347214964177bd424d56664 (patch) | |
| tree | 5d5f066c9d78bea18a0d4757eb4c3e0d129a79c4 | |
| parent | c46795c6922bdfc3f3669d71f0c5867cb2f1577a (diff) | |
semi-transparent inputbox style
| -rw-r--r-- | src/App.scss | 8 | ||||
| -rw-r--r-- | src/_variables.scss | 1 | ||||
| -rw-r--r-- | 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 |