diff options
Diffstat (limited to 'src/components')
| -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 |
4 files changed, 48 insertions, 6 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" |