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/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/changelog.d/csp.add b/changelog.d/csp.add
new file mode 100644
index 000000000..260337b97
--- /dev/null
+++ b/changelog.d/csp.add
@@ -0,0 +1 @@
+Compatibility with stricter CSP (Akkoma backend)
diff --git a/index.html b/index.html
index 86d15971b..96c20c4b7 100644
--- a/index.html
+++ b/index.html
@@ -10,135 +10,13 @@
-
-
-
-
+
+
+
+
-
+
diff --git a/package.json b/package.json
index 3d6b08d73..5e71a3996 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"@fortawesome/free-regular-svg-icons": "6.7.2",
"@fortawesome/free-solid-svg-icons": "6.7.2",
"@fortawesome/vue-fontawesome": "3.0.8",
- "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
+ "@floatingghost/pinch-zoom-element": "1.3.1",
"@kazvmoe-infra/unicode-emoji-json": "0.4.0",
"@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13",
"@vuelidate/core": "2.0.3",
diff --git a/public/static/empty.css b/public/static/empty.css
new file mode 100644
index 000000000..3dfa88151
--- /dev/null
+++ b/public/static/empty.css
@@ -0,0 +1 @@
+// nothing here //
diff --git a/public/static/splash.css b/public/static/splash.css
new file mode 100644
index 000000000..abdc19fc2
--- /dev/null
+++ b/public/static/splash.css
@@ -0,0 +1,126 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+#splash {
+ --scale: 1;
+ width: 100vw;
+ height: 100vh;
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: auto;
+ align-content: center;
+ align-items: center;
+ justify-content: center;
+ justify-items: center;
+ flex-direction: column;
+ background: #0f161e;
+ font-family: sans-serif;
+ color: #b9b9ba;
+ position: absolute;
+ z-index: 9999;
+ font-size: calc(1vw + 1vh + 1vmin);
+}
+
+#splash-credit {
+ position: absolute;
+ font-size: 14px;
+ bottom: 16px;
+ right: 16px;
+}
+
+#splash-container {
+ align-items: center;
+}
+
+#mascot-container {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ perspective: 60em;
+ perspective-origin: 0 -15em;
+ transform-style: preserve-3d;
+}
+
+#mascot {
+ width: calc(10em * var(--scale));
+ height: calc(10em * var(--scale));
+ object-fit: contain;
+ object-position: bottom;
+ transform: translateZ(-2em);
+}
+
+#throbber {
+ display: grid;
+ width: calc(5em * 0.5 * var(--scale));
+ height: calc(8em * 0.5 * var(--scale));
+ margin-left: 4.1em;
+ z-index: 2;
+ grid-template-rows: repeat(8, 1fr);
+ grid-template-columns: repeat(5, 1fr);
+ grid-template-areas: "P P . L L"
+ "P P . L L"
+ "P P . L L"
+ "P P . L L"
+ "P P . . ."
+ "P P . . ."
+ "P P . E E"
+ "P P . E E";
+
+ --logoChunkSize: calc(2em * 0.5 * var(--scale))
+}
+
+.chunk {
+ background-color: #e2b188;
+ box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+}
+
+#chunk-P {
+ grid-area: P;
+ border-top-left-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#chunk-L {
+ grid-area: L;
+ border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#chunk-E {
+ grid-area: E;
+ border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#status {
+ margin-top: 1em;
+ line-height: 2;
+ width: 100%;
+ text-align: center;
+}
+
+#statusError {
+ display: none;
+ margin-top: 1em;
+ font-size: calc(1vw + 1vh + 1vmin);
+ line-height: 2;
+ width: 100%;
+ text-align: center;
+}
+
+#statusStack {
+ display: none;
+ margin-top: 1em;
+ font-size: calc((1vw + 1vh + 1vmin) / 2.5);
+ width: calc(100vw - 5em);
+ padding: 1em;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ text-align: left;
+ line-height: 2;
+}
+
+@media (prefers-reduced-motion) {
+ #throbber {
+ animation: none !important;
+ }
+}
diff --git a/src/App.scss b/src/App.scss
index 704d51cea..6e837a0e7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,6 +2,9 @@
/* stylelint-disable no-descending-specificity */
@use "panel";
+@import '@fortawesome/fontawesome-svg-core/styles.css';
+@import '@floatingghost/pinch-zoom-element/dist/pinch-zoom.css';
+
:root {
--status-margin: 0.75em;
--post-line-height: 1.4;
@@ -30,6 +33,7 @@ body {
font-family: sans-serif;
font-family: var(--font);
margin: 0;
+ padding: 0;
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 05ddda982..c5be7781f 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -6,6 +6,8 @@ import VueVirtualScroller from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false
import App from '../App.vue'
import routes from './routes'
diff --git a/src/components/pinch_zoom/pinch_zoom.js b/src/components/pinch_zoom/pinch_zoom.js
index 82670ddfa..b7e8f673e 100644
--- a/src/components/pinch_zoom/pinch_zoom.js
+++ b/src/components/pinch_zoom/pinch_zoom.js
@@ -1,4 +1,4 @@
-import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
+import PinchZoom from '@floatingghost/pinch-zoom-element'
export default {
methods: {
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/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
index c0a9824df..8c6924871 100644
--- a/src/components/status_action_buttons/action_button.scss
+++ b/src/components/status_action_buttons/action_button.scss
@@ -102,4 +102,20 @@
}
}
}
+
+ &.-extra {
+ .action-counter {
+ justify-self: end;
+ margin-right: 1em;
+ }
+
+ .chevron-icon {
+ justify-self: end;
+ }
+
+ .extra-button {
+ justify-self: end;
+ justify-content: end;
+ }
+ }
}
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index ad2d349c6..a9aedb9e3 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -60,7 +60,7 @@
/>
{{ button.counter?.(funcArg) }}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ef4a6f5c4..3d85db3aa 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -234,20 +234,14 @@ export const applyConfig = (input) => {
return
}
- const head = document.head
-
const rules = Object
.entries(config)
.filter(([, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';')
- document.getElementById('style-config')?.remove()
const styleEl = document.getElementById('theme-holder')
- styleEl.id = 'style-config'
- head.appendChild(styleEl)
const styleSheet = styleEl.sheet
- styleSheet.toString()
styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
// TODO find a way to make this not apply to theme previews
diff --git a/vite.config.js b/vite.config.js
index 0b4d0db90..d25dfa3aa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -136,7 +136,7 @@ export default defineConfig(async ({ mode, command }) => {
'@ungap/event-target',
'lodash.merge',
'body-scroll-lock',
- '@kazvmoe-infra/pinch-zoom-element'
+ '@floatingghost/pinch-zoom-element'
]
},
css: {
diff --git a/yarn.lock b/yarn.lock
index ac78d4d08..216dac8ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1446,6 +1446,13 @@
"@eslint/core" "^0.13.0"
levn "^0.4.1"
+"@floatingghost/pinch-zoom-element@1.3.1":
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/@floatingghost/pinch-zoom-element/-/pinch-zoom-element-1.3.1.tgz#5f327ad17ddf1f56777098aca088fdbf99cbd049"
+ integrity sha512-KnE7aBQdd/Fj1TzU5uzgwD9YAQ58DTMUks/PoTEBFW4zi0lBM9cN/j45wzcnzsT2VXG1S6qM7NMmq7NGm2//Fg==
+ dependencies:
+ pointer-tracker "^2.0.3"
+
"@fortawesome/fontawesome-common-types@6.7.2":
version "6.7.2"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz#7123d74b0c1e726794aed1184795dbce12186470"
@@ -1602,13 +1609,6 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"
-"@kazvmoe-infra/pinch-zoom-element@1.2.0":
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/@kazvmoe-infra/pinch-zoom-element/-/pinch-zoom-element-1.2.0.tgz#eb3ca34c53b4410c689d60aca02f4a497ce84aba"
- integrity sha512-HBrhH5O/Fsp2bB7EGTXzCsBAVcMjknSagKC5pBdGpKsF8meHISR0kjDIdw4YoE0S+0oNMwJ6ZUZyIBrdywxPPw==
- dependencies:
- pointer-tracker "^2.0.3"
-
"@kazvmoe-infra/unicode-emoji-json@0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@kazvmoe-infra/unicode-emoji-json/-/unicode-emoji-json-0.4.0.tgz#555bab2f8d11db74820ef0a2fbe2805b17c22587"