diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 4 | ||||
| -rw-r--r-- | src/components/emoji_reactions/emoji_reactions.vue | 8 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 13 |
3 files changed, 17 insertions, 8 deletions
diff --git a/src/App.scss b/src/App.scss index dd994a38..1fabaaa9 100644 --- a/src/App.scss +++ b/src/App.scss @@ -117,7 +117,9 @@ button { color: $fallback--text; color: var(--btnToggledText, $fallback--text); background-color: $fallback--fg; - background-color: var(--btnToggled, $fallback--fg) + 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); } &.danger { diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index 00d6d2b7..f5d2e79a 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -4,7 +4,7 @@ v-for="(reaction) in emojiReactions" :key="reaction.emoji" class="emoji-reaction btn btn-default" - :class="{ 'picked-reaction': reactedWith(reaction.emoji) }" + :class="{ 'toggled': reactedWith(reaction.emoji) }" @click="emojiOnClick(reaction.emoji, $event)" > <span class="reaction-emoji">{{ reaction.emoji }}</span> @@ -40,10 +40,4 @@ } } -.picked-reaction { - border: 1px solid var(--link, $fallback--link); - margin-left: -1px; // offset the border, can't use inset shadows either - margin-right: calc(0.5em - 1px); -} - </style> diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 9de3a96c..5a42bba7 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -460,6 +460,19 @@ :label="$t('settings.text')" /> <ContrastRatio :contrast="previewContrast.btnDisabledText" /> + <h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4> + <ColorInput + v-model="btnToggledColorLocal" + name="btnToggledColor" + :fallback="previewTheme.colors.btnToggled" + :label="$t('settings.background')" + /> + <ColorInput + v-model="btnToggledTextColorLocal" + name="btnToggledTextColor" + :fallback="previewTheme.colors.btnToggledText" + :label="$t('settings.text')" + /> </div> <div class="color-item"> <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4> |