diff --git a/src/App.scss b/src/App.scss index dd994a383e..1fabaaa948 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 00d6d2b7ac..f5d2e79a73 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)" > {{ reaction.emoji }} @@ -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); -} - diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 9de3a96c03..5a42bba768 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')" /> +

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

+ +

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

diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json index 8deab7b79e..7a4a29da34 100644 --- a/static/themes/redmond-xx-se.json +++ b/static/themes/redmond-xx-se.json @@ -2,6 +2,7 @@ "_pleroma_theme_version": 2, "name": "Redmond XX SE", "source": { + "themeEngineVersion": 3, "shadows": { "panel": [ { @@ -276,6 +277,7 @@ "topBar": "#000080", "topBarLink": "#ffffff", "btn": "#c0c0c0", + "btnToggled": "--btn", "faint": "#3f3f3f", "faintLink": "#404080", "border": "#808080", diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json index cdb89fe36d..ff95b1e06d 100644 --- a/static/themes/redmond-xx.json +++ b/static/themes/redmond-xx.json @@ -2,6 +2,7 @@ "_pleroma_theme_version": 2, "name": "Redmond XX", "source": { + "themeEngineVersion": 3, "shadows": { "panel": [ { @@ -267,6 +268,7 @@ "topBar": "#000080", "topBarLink": "#ffffff", "btn": "#c0c0c0", + "btnToggled": "--btn", "faint": "#3f3f3f", "faintLink": "#404080", "border": "#808080", diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json index 79a2cb2660..f788bdb830 100644 --- a/static/themes/redmond-xxi.json +++ b/static/themes/redmond-xxi.json @@ -2,6 +2,7 @@ "_pleroma_theme_version": 2, "name": "Redmond XXI", "source": { + "themeEngineVersion": 3, "shadows": { "panel": [ { @@ -249,6 +250,7 @@ "topBar": "#042967", "topBarLink": "#ffffff", "btn": "#d6d6ce", + "btnToggled": "--btn", "faint": "#3f3f3f", "faintLink": "#404080", "border": "#808080",