diff --git a/changelog.d/action-button-extra-counter.add b/changelog.d/action-button-extra-counter.add
new file mode 100644
index 000000000..7d5c77447
--- /dev/null
+++ b/changelog.d/action-button-extra-counter.add
@@ -0,0 +1 @@
+Display counter for status action buttons when they are on the menu
diff --git a/changelog.d/akkoma.skip b/changelog.d/akkoma.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/changelog.d/bookmark-button-align.fix b/changelog.d/bookmark-button-align.fix
new file mode 100644
index 000000000..64bc2c807
--- /dev/null
+++ b/changelog.d/bookmark-button-align.fix
@@ -0,0 +1 @@
+Fix bookmark button alignment in the extra actions menu
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index 828b81cd1..a166e2196 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -60,11 +60,14 @@
}
.extra-button {
- border-left: 1px solid var(--icon);
+ border-left: 1px solid;
+ border-image-source: linear-gradient(to bottom, transparent 0%, var(--icon) var(--__horizontal-gap) calc(100% - var(--__horizontal-gap)), transparent 100%);
+ border-image-slice: 1;
padding-left: calc(var(--__horizontal-gap) - 1px);
- border-right: var(--__horizontal-gap) solid transparent;
- border-top: var(--__horizontal-gap) solid transparent;
- border-bottom: var(--__horizontal-gap) solid transparent;
+ padding-right: var(--__horizontal-gap);
+ padding-top: var(--__horizontal-gap);
+ padding-bottom: var(--__horizontal-gap);
+ max-width: fit-content;
}
.main-button {
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index fd18b91e5..996f3a20c 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -12,8 +12,7 @@ import { newImporter } from 'src/services/export_import/export_import.js'
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { init } from 'src/services/theme_data/theme_data_3.service.js'
import {
- getCssRules,
- getScopedVersion
+ getCssRules
} from 'src/services/theme_data/css_utils.js'
import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
@@ -155,19 +154,23 @@ const AppearanceTab = {
}))
})
+ this.previewTheme('stock', 'v3')
+
if (window.IntersectionObserver) {
this.intersectionObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(({ target, isIntersecting }) => {
if (!isIntersecting) return
const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
this.$nextTick(() => {
- if (theme) theme.ready = true
+ if (theme) this.previewTheme(theme.key, theme.version, theme.data)
})
observer.unobserve(target)
})
}, {
root: this.$refs.themeList
})
+ } else {
+ this.availableStyles.forEach(theme => this.previewTheme(theme.key, theme.version, theme.data))
}
},
updated () {
@@ -391,7 +394,6 @@ const AppearanceTab = {
inputRuleset: [...input, paletteRule].filter(x => x),
ultimateBackgroundColor: '#000000',
liteMode: true,
- debug: true,
onlyNormalState: true
})
}
@@ -400,7 +402,6 @@ const AppearanceTab = {
inputRuleset: [],
ultimateBackgroundColor: '#000000',
liteMode: true,
- debug: true,
onlyNormalState: true
})
}
@@ -409,10 +410,16 @@ const AppearanceTab = {
this.compilationCache[key] = theme3
}
- return getScopedVersion(
- getCssRules(theme3.eager),
- '#theme-preview-' + key
- ).join('\n')
+ const styleEl = document.getElementById('theme-holder')
+ const styleSheet = styleEl.sheet
+ styleSheet.insertRule([
+ '#theme-preview-',
+ key,
+ ' {\n',
+ getCssRules(theme3.eager).join('\n'),
+ '\n}'
+ ].join(''), 'index-max')
+
}
}
}
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index d49a28651..cbbb8ff9c 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -16,14 +16,6 @@
:disabled="switchInProgress"
@click="resetTheming"
>
-
-
-