diff options
| -rw-r--r-- | src/components/emoji_input/emoji_input.vue | 11 | ||||
| -rw-r--r-- | src/components/popper/popper.scss | 7 | ||||
| -rw-r--r-- | src/components/side_drawer/side_drawer.vue | 7 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 29 | ||||
| -rw-r--r-- | src/services/theme_data/pleromafe.js | 44 |
5 files changed, 87 insertions, 11 deletions
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index 46ed6f25..9c2501a9 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/src/components/emoji_input/emoji_input.vue @@ -109,10 +109,13 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: var(--popupShadow); min-width: 75%; - background: $fallback--bg; - background: var(--bg, $fallback--bg); - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); + background-color: $fallback--bg; + background-color: var(--popover, $fallback--bg); + color: $fallback--link; + color: var(--popoverText, $fallback--link); + --faint: var(--popoverFaintText, $fallback--faint); + --faintLink: var(--popoverFaintLink, $fallback--faint); + --icon: var(--popoverIcon, $fallback--icon); } } diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss index 9c2ce25f..e70b277d 100644 --- a/src/components/popper/popper.scss +++ b/src/components/popper/popper.scss @@ -9,7 +9,12 @@ border-radius: $fallback--btnRadius; border-radius: var(--btnRadius, $fallback--btnRadius); background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); + background-color: var(--popover, $fallback--bg); + color: $fallback--text; + color: var(--popoverText, $fallback--text); + --faint: var(--popoverFaintText, $fallback--faint); + --faintLink: var(--popoverFaintLink, $fallback--faint); + --icon: var(--popoverIcon, $fallback--icon); } .popover-arrow { diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 3188fd59..a5b754d7 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -223,7 +223,12 @@ box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); box-shadow: var(--panelShadow); background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); + background-color: var(--popover, $fallback--bg); + color: $fallback--link; + color: var(--popoverText, $fallback--link); + --faint: var(--popoverFaintText, $fallback--faint); + --faintLink: var(--popoverFaintLink, $fallback--faint); + --icon: var(--popoverIcon, $fallback--icon); .button-icon:before { width: 1.1em; diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index ff7f4710..1c39a806 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -555,6 +555,35 @@ <ContrastRatio :contrast="previewContrast.highlightLink" /> </div> <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4> + <ColorInput + v-model="popoverColorLocal" + name="popover" + :label="$t('settings.background')" + :fallback="previewTheme.colors.popover" + /> + <OpacityInput + v-model="popoverOpacityLocal" + name="popoverOpacity" + :fallback="previewTheme.opacity.popover" + :disabled="popoverOpacityLocal === 'transparent'" + /> + <ColorInput + v-model="popoverTextColorLocal" + name="popoverText" + :label="$t('settings.text')" + :fallback="previewTheme.colors.popoverText" + /> + <ContrastRatio :contrast="previewContrast.popoverText" /> + <ColorInput + v-model="popoverLinkColorLocal" + name="popoverLink" + :label="$t('settings.links')" + :fallback="previewTheme.colors.popoverLink" + /> + <ContrastRatio :contrast="previewContrast.popoverLink" /> + </div> + <div class="color-item"> <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4> <ColorInput v-model="selectedPostColorLocal" diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 0deb829f..484874d7 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -12,6 +12,8 @@ export const LAYERS = { bg: 'underlay', highlight: 'bg', panel: 'bg', + popover: 'bg', + selectedMenu: 'popover', btn: 'bg', btnPanel: 'panel', btnTopBar: 'topBar', @@ -140,6 +142,35 @@ export const SLOT_INHERITANCE = { color: (mod, bg, text) => mixrgb(bg, text) }, + popover: { + depends: ['bg'], + opacity: 'popover' + }, + popoverFaintText: { + depends: ['faint'], + layer: 'popover', + textColor: true + }, + popoverFaintLink: { + depends: ['faintLink'], + layer: 'popover', + textColor: 'preserve' + }, + popoverText: { + depends: ['text'], + layer: 'popover', + textColor: true + }, + popoverLink: { + depends: ['link'], + layer: 'popover', + textColor: 'preserve' + }, + popoverIcon: { + depends: ['popover', 'popoverText'], + color: (mod, bg, text) => mixrgb(bg, text) + }, + selectedPost: '--highlight', selectedPostFaintText: { depends: ['highlightFaintText'], @@ -170,28 +201,31 @@ export const SLOT_INHERITANCE = { color: (mod, bg, text) => mixrgb(bg, text) }, - selectedMenu: '--highlight', + selectedMenu: { + depends: ['popover'], + color: (mod, bg) => brightness(5 * mod, bg).rgb + }, selectedMenuFaintText: { depends: ['highlightFaintText'], - layer: 'highlight', + layer: 'selectedMenu', variant: 'selectedMenu', textColor: true }, selectedMenuFaintLink: { depends: ['highlightFaintLink'], - layer: 'highlight', + layer: 'selectedMenu', variant: 'selectedMenu', textColor: 'preserve' }, selectedMenuText: { depends: ['highlightText'], - layer: 'highlight', + layer: 'selectedMenu', variant: 'selectedMenu', textColor: true }, selectedMenuLink: { depends: ['highlightLink'], - layer: 'highlight', + layer: 'selectedMenu', variant: 'selectedMenu', textColor: 'preserve' }, |