From 8f63bbb64fa2860e73d8562de9d6c62629a8668f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Jan 2020 00:33:04 +0200 Subject: [PATCH] poll slot renamed, lightBg customization implemented --- src/App.scss | 4 +++ src/components/autosuggest/autosuggest.vue | 4 +-- src/components/dialog_modal/dialog_modal.vue | 12 ++++----- src/components/emoji_input/emoji_input.vue | 4 +++ src/components/nav_panel/nav_panel.vue | 10 +++++++ .../selectable_list/selectable_list.vue | 4 +++ src/components/side_drawer/side_drawer.vue | 5 ++++ src/components/status/status.vue | 7 +++-- .../style_switcher/style_switcher.vue | 27 +++++++++++++++++-- src/services/style_setter/style_setter.js | 4 ++- src/services/theme_data/theme_data.service.js | 26 ++++++++++++++++++ 11 files changed, 94 insertions(+), 13 deletions(-) diff --git a/src/App.scss b/src/App.scss index 7c9c91af..7da3688a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -495,6 +495,10 @@ main-router { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } + .faint-link { + color: $fallback--faint; + color: var(--faintLink, $fallback--faint); + } .alert { white-space: nowrap; diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue index 1f86e996..f283ab82 100644 --- a/src/components/autosuggest/autosuggest.vue +++ b/src/components/autosuggest/autosuggest.vue @@ -40,8 +40,8 @@ top: 100%; right: 0; max-height: 400px; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); border-style: solid; border-width: 1px; border-color: $fallback--border; diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue index 55d7a7d2..3241ce3e 100644 --- a/src/components/dialog_modal/dialog_modal.vue +++ b/src/components/dialog_modal/dialog_modal.vue @@ -75,18 +75,18 @@ .dialog-modal-content { margin: 0; padding: 1rem 1rem; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); white-space: normal; } .dialog-modal-footer { margin: 0; padding: .5em .5em; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); - border-top: 1px solid $fallback--bg; - border-top: 1px solid var(--bg, $fallback--bg); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + border-top: 1px solid $fallback--border; + border-top: 1px solid var(--border, $fallback--border); display: flex; justify-content: flex-end; diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index a7215670..dcf51ff9 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -158,6 +158,10 @@ &.highlighted { background-color: $fallback--fg; background-color: var(--lightBg, $fallback--fg); + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 034259d9..0886bf8c 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -101,12 +101,22 @@ &:hover { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--link; + color: var(--lightBgText, $fallback--link); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } &.router-link-active { font-weight: bolder; background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--text; + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); &:hover { text-decoration: underline; diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue index d9ec7ece..416c9b6a 100644 --- a/src/components/selectable_list/selectable_list.vue +++ b/src/components/selectable_list/selectable_list.vue @@ -69,6 +69,10 @@ &-item-selected-inner { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } &-header { diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 3fba9058..6d75221f 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -290,6 +290,11 @@ &:hover { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--text; + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index d291e762..72e9b25a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -446,6 +446,11 @@ $status-margin: 0.75em; &_focused { background-color: $fallback--lightBg; background-color: var(--lightBg, $fallback--lightBg); + color: $fallback--text; + color: var(--lightBgText, $fallback--text); + --faint: var(--lightBgFaintText, $fallback--faint); + --faintLink: var(--lightBgFaintLink, $fallback--faint); + --icon: var(--lightBgIcon, $fallback--icon); } .timeline & { @@ -573,8 +578,6 @@ $status-margin: 0.75em; overflow: hidden; text-overflow: ellipsis; margin: 0 0.4em 0 0.2em; - color: $fallback--faint; - color: var(--faint, $fallback--faint); } .replies-separator { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index e0894b6d..1381f1fb 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -414,7 +414,7 @@ /> @@ -423,11 +423,34 @@

{{ $t('settings.style.advanced_colors.icons') }}

+
+

{{ $t('settings.style.advanced_colors.lightBg') }}

+ + + + + +
{ return } if (k === 'faint') { - colors[k + 'Link'].a = v + colors['faintLink'].a = v colors['panelFaint'].a = v + colors['lightBgFaintText'].a = v + colors['lightBgFaintLink'].a = v } if (k === 'bg') { colors['lightBg'].a = v diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js index 21bab1a2..808f67d5 100644 --- a/src/services/theme_data/theme_data.service.js +++ b/src/services/theme_data/theme_data.service.js @@ -12,6 +12,7 @@ export const LAYERS = { badge: null, // no transparency support fg: null, bg: 'underlay', + lightBg: 'bg', panel: 'bg', btn: 'bg', btnPanel: 'panel', @@ -57,6 +58,31 @@ export const SLOT_INHERITANCE = { depends: ['bg'], color: (mod, bg) => brightness(5 * mod, bg).rgb }, + lightBgFaintText: { + depends: ['faint'], + layer: 'lightBg', + textColor: true + }, + lightBgFaintLink: { + depends: ['faintLink'], + layer: 'lightBg', + textColor: 'preserve' + }, + lightBgText: { + depends: ['text'], + layer: 'lightBg', + textColor: true + }, + lightBgLink: { + depends: ['link'], + layer: 'lightBg', + textColor: 'preserve' + }, + lightBgIcon: { + depends: ['lightBg', 'lightBgText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + lightText: { depends: ['text'], color: (mod, text) => brightness(20 * mod, text).rgb