diff options
| author | Henry Jameson <me@hjkos.com> | 2020-02-17 23:43:56 +0200 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2020-02-17 23:43:56 +0200 |
| commit | 3b3a31b461b9c543697e9b8cb45c39430e9c8555 (patch) | |
| tree | 9c7eb75fa7e3827811521a763908325be98835e8 /src | |
| parent | 5c6046ea0aaa13c492ff1f5b7b05ab497b614570 (diff) | |
improve the display of disabled buttons
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 16 | ||||
| -rw-r--r-- | src/services/theme_data/pleromafe.js | 8 |
2 files changed, 18 insertions, 6 deletions
diff --git a/src/App.scss b/src/App.scss index 7dfbdb7d..89aa3215 100644 --- a/src/App.scss +++ b/src/App.scss @@ -104,7 +104,11 @@ button { color: $fallback--text; color: var(--btnPressedText, $fallback--text); background-color: $fallback--fg; - background-color: var(--btnPressed, $fallback--fg) + background-color: var(--btnPressed, $fallback--fg); + i { + color: $fallback--text; + color: var(--btnPressedText, $fallback--text); + } } &:disabled { @@ -112,7 +116,11 @@ button { color: $fallback--text; color: var(--btnDisabledText, $fallback--text); background-color: $fallback--fg; - background-color: var(--btnDisabled, $fallback--fg) + background-color: var(--btnDisabled, $fallback--fg); + i { + color: $fallback--text; + color: var(--btnDisabledText, $fallback--text); + } } &.toggled { @@ -122,6 +130,10 @@ button { background-color: var(--btnToggled, $fallback--fg); box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); + i { + color: $fallback--text; + color: var(--btnToggledText, $fallback--text); + } } &.danger { diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 6d4f583b..33a2ed57 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -509,25 +509,25 @@ export const SLOT_INHERITANCE = { // Buttons: disabled btnDisabled: { depends: ['btn', 'bg'], - color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg) + color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg) }, btnDisabledText: { depends: ['btnText', 'btnDisabled'], layer: 'btn', variant: 'btnDisabled', - color: (mod, text, btn) => alphaBlend(text, 0.5, btn) + color: (mod, text, btn) => alphaBlend(text, 0.25, btn) }, btnDisabledPanelText: { depends: ['btnPanelText', 'btnDisabled'], layer: 'btnPanel', variant: 'btnDisabled', - color: (mod, text, btn) => alphaBlend(text, 0.5, btn) + color: (mod, text, btn) => alphaBlend(text, 0.25, btn) }, btnDisabledTopBarText: { depends: ['btnTopBarText', 'btnDisabled'], layer: 'btnTopBar', variant: 'btnDisabled', - color: (mod, text, btn) => alphaBlend(text, 0.5, btn) + color: (mod, text, btn) => alphaBlend(text, 0.25, btn) }, // Input fields |