diff --git a/index.html b/index.html
index be9c0e886..899a0efd3 100644
--- a/index.html
+++ b/index.html
@@ -11,17 +11,26 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
index 5e25ded23..cf098c0a3 100644
--- a/src/components/component_preview/component_preview.js
+++ b/src/components/component_preview/component_preview.js
@@ -2,6 +2,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
import ColorInput from 'src/components/color_input/color_input.vue'
import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
+import { createStyleSheet } from 'src/services/style_setter/style_setter.js'
export default {
components: {
@@ -27,6 +28,9 @@ export default {
randomSeed: genRandomSeed()
}
},
+ mounted () {
+ this.update()
+ },
computed: {
hideControls () {
return typeof this.shadow === 'string'
@@ -48,18 +52,9 @@ export default {
this.$emit('update:shadow', { axis, value: Number(value) })
},
update () {
- let styleEl = document.getElementById('component-style-holder')
- if (!styleEl.sheet) {
- styleEl = document.getElementById('component-style-holder')
- }
- const styleSheet = styleEl.sheet
-
- for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
- styleSheet.deleteRule(i)
- }
+ const styleSheet = createStyleSheet('component-style-holder').sheet
const result = []
-
if (this.colorOverride) result.push(`--background: ${this.colorOverride}`)
const styleRule = [
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 9067ac300..a2ebb44a7 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -410,7 +410,10 @@ const AppearanceTab = {
this.compilationCache[key] = theme3
}
- const styleEl = document.getElementById('theme-preview-holder')
+ let styleEl = document.getElementById('theme-previews-holder')
+ if (!styleEl.sheet) {
+ styleEl = document.getElementById('theme-previews-holder-link')
+ }
const styleSheet = styleEl.sheet
styleSheet.insertRule([
'#theme-preview-',
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 20406ba4b..bdab78a5a 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -1,6 +1,6 @@
-import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
+import { ref, reactive, computed, watch, provide, getCurrentInstance } from 'vue'
import { useInterfaceStore } from 'src/stores/interface'
-import { get, set, unset, throttle } from 'lodash'
+import { get, set, unset } from 'lodash'
import Select from 'src/components/select/select.vue'
import SelectMotion from 'src/components/select/select_motion.vue'
@@ -23,6 +23,7 @@ import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js
import { getCssRules } from 'src/services/theme_data/css_utils.js'
import { serialize } from 'src/services/theme_data/iss_serializer.js'
import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { createStyleSheet } from 'src/services/style_setter/style_setter.js'
import {
rgb2hex,
hex2rgb,
@@ -667,7 +668,7 @@ export default {
})
exports.clearStyle = () => {
- onImport(interfaceStore().styleDataUsed)
+ onImport(interfaceStore.styleDataUsed)
}
exports.exportStyle = () => {
@@ -694,15 +695,7 @@ export default {
return
}
- let styleEl = document.getElementById('editor-overall-holder')
- if (!styleEl.sheet) {
- styleEl = document.getElementById('editor-overall-holder-link')
- }
- const styleSheet = styleEl.sheet
-
- for (let i = styleSheet.cssRules.length - 1; i >= 0; --i) {
- styleSheet.deleteRule(i)
- }
+ const styleSheet = createStyleSheet('editor-overall-holder')
styleSheet.insertRule([
'#edited-style-preview {\n',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3d85db3aa..a68978a9d 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,9 +6,11 @@ import localforage from 'localforage'
// On platforms where this is not supported, it will return undefined
// Otherwise it will return an array
-const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
+const supportsAdoptedStyleSheets = false //!!document.adoptedStyleSheets
-const createStyleSheet = (id) => {
+const adoptedStyleSheets = {}
+
+export const createStyleSheet = (id) => {
if (supportsAdoptedStyleSheets) {
return {
el: null,
@@ -17,7 +19,10 @@ const createStyleSheet = (id) => {
}
}
- const el = document.getElementById(id)
+ let el = document.getElementById(id)
+ if (!el?.sheet) {
+ el = document.getElementById(id + '-link')
+ }
// Clear all rules in it
for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
el.sheet.deleteRule(i)
@@ -32,6 +37,7 @@ const createStyleSheet = (id) => {
const EAGER_STYLE_ID = 'pleroma-eager-styles'
const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+const THEME_HOLDER_ID = 'theme-holder'
const adoptStyleSheets = (styles) => {
if (supportsAdoptedStyleSheets) {
@@ -239,8 +245,7 @@ export const applyConfig = (input) => {
.filter(([, v]) => v)
.map(([k, v]) => `--${k}: ${v}`).join(';')
- const styleEl = document.getElementById('theme-holder')
- const styleSheet = styleEl.sheet
+ const styleSheet = createStyleSheet(THEME_HOLDER_ID).sheet
styleSheet.insertRule(`:root { ${rules} }`, 'index-max')