No OneTemporary
Actions

Size

218 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/changelog.d/better-shadow-control.fix b/changelog.d/better-shadow-control.fix
	new file mode 100644
	index 0000000000..585ef6d26c
	--- /dev/null
	+++ b/changelog.d/better-shadow-control.fix
	@@ -0,0 +1 @@
	+Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.
	diff --git a/src/components/button.style.js b/src/components/button.style.js
	index 1bee8f8e71..1423d5c789 100644
	--- a/src/components/button.style.js
	+++ b/src/components/button.style.js
	@@ -1,101 +1,112 @@
	export default {
	name: 'Button', // Name of the component
	selector: '.button-default', // CSS selector/prefix
	// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
	// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
	states: {
	// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
	// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
	// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
	// normal: '' // normal state is implicitly added, it is always included
	toggled: '.toggled',
	pressed: ':active',
	hover: ':hover:not(:disabled)',
	focused: ':focus-within',
	disabled: ':disabled'
	},
	// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
	variants: {
	// Variants save on computation time since adding new variant just adds one more "set".
	// normal: '', // you can override normal variant, it will be appenended to the main class
	danger: '.danger'
	// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
	// This (currently) is further multipled by number of places where component can exist.
	},
	// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
	validInnerComponents: [
	'Text',
	'Icon'
	],
	// Default rules, used as "default theme", essentially.
	defaultRules: [
	{
	component: 'Root',
	directives: {
	'--defaultButtonHoverGlow': 'shadow \| 0 0 4 --text',
	'--defaultButtonShadow': 'shadow \| 0 0 2 #000000',
	'--defaultButtonBevel': 'shadow \| $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)',
	'--pressedButtonBevel': 'shadow \| $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
	}
	},
	{
	// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
	// like within it
	directives: {
	background: '--fg',
	shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
	roundness: 3
	}
	},
	{
	state: ['hover'],
	directives: {
	shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
	}
	},
	{
	state: ['pressed'],
	directives: {
	shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
	}
	},
	{
	state: ['hover', 'pressed'],
	directives: {
	shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
	}
	},
	{
	state: ['toggled'],
	directives: {
	background: '--inheritedBackground,-14.2',
	shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
	}
	},
	{
	state: ['toggled', 'hover'],
	directives: {
	background: '--inheritedBackground,-14.2',
	shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
	}
	},
	{
	state: ['disabled'],
	directives: {
	background: '$blend(--inheritedBackground, 0.25, --parent)',
	shadow: ['--defaultButtonBevel']
	}
	},
	{
	component: 'Text',
	parent: {
	component: 'Button',
	state: ['disabled']
	},
	directives: {
	textOpacity: 0.25,
	textOpacityMode: 'blend'
	}
	+ },
	+ {
	+ component: 'Icon',
	+ parent: {
	+ component: 'Button',
	+ state: ['disabled']
	+ },
	+ directives: {
	+ textOpacity: 0.25,
	+ textOpacityMode: 'blend'
	+ }
	}
	]
	}
	diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
	index 6261bf3a21..8ffcc63b42 100644
	--- a/src/components/checkbox/checkbox.vue
	+++ b/src/components/checkbox/checkbox.vue
	@@ -1,128 +1,138 @@
	<template>
	<label
	class="checkbox"
	:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
	>
	+ <span
	+ v-if="!!$slots.before"
	+ class="label -before"
	+ :class="{ faint: disabled }"
	+ >
	+ <slot name="before" />
	+ </span>
	<input
	type="checkbox"
	class="visible-for-screenreader-only"
	:disabled="disabled"
	:checked="modelValue"
	:indeterminate="indeterminate"
	@change="$emit('update:modelValue', $event.target.checked)"
	>
	<i
	class="input -checkbox checkbox-indicator"
	:aria-hidden="true"
	+ :class="{ disabled }"
	@transitionend.capture="onTransitionEnd"
	/>
	<span
	v-if="!!$slots.default"
	- class="label"
	+ class="label -after"
	+ :class="{ faint: disabled }"
	>
	<slot />
	</span>
	</label>
	</template>

	<script>
	export default {
	props: [
	'modelValue',
	'indeterminate',
	'disabled'
	],
	emits: ['update:modelValue'],
	data: (vm) => ({
	indeterminateTransitionFix: vm.indeterminate
	}),
	watch: {
	indeterminate (e) {
	if (e) {
	this.indeterminateTransitionFix = true
	}
	}
	},
	methods: {
	onTransitionEnd (e) {
	if (!this.indeterminate) {
	this.indeterminateTransitionFix = false
	}
	}
	}
	}
	</script>

	<style lang="scss">
	@import "../../mixins";

	.checkbox {
	position: relative;
	display: inline-block;
	min-height: 1.2em;

	& > &-indicator {
	/* Reset .input stuff */
	padding: 0;
	margin: 0;
	position: relative;
	line-height: inherit;
	display: inline;
	padding-left: 1.2em;
	box-shadow: none;
	}

	&-indicator::before {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	content: "✓";
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	background-color: var(--background);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}

	- &.disabled {
	- .checkbox-indicator::before,
	- .label {
	- opacity: 0.5;
	- }
	-
	- .label {
	- color: var(--text);
	+ .disabled {
	+ .checkbox-indicator::before {
	+ background-color: var(--background);
	}
	}

	input[type="checkbox"] {
	&:checked + .checkbox-indicator::before {
	color: var(--text);
	}

	&:indeterminate + .checkbox-indicator::before {
	content: "–";
	color: var(--text);
	}
	}

	&.indeterminate-fix {
	input[type="checkbox"] + .checkbox-indicator::before {
	content: "–";
	}
	}

	- & > span {
	- margin-left: 0.5em;
	+ & > .label {
	+ &.-after {
	+ margin-left: 0.5em;
	+ }
	+
	+ &.-before {
	+ margin-right: 0.5em;
	+ }
	}
	}
	</style>
	diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
	index b0fc879f73..19c88a690f 100644
	--- a/src/components/color_input/color_input.scss
	+++ b/src/components/color_input/color_input.scss
	@@ -1,89 +1,101 @@
	.color-input {
	display: inline-flex;

	+ .label {
	+ flex: 1 1 auto;
	+ }
	+
	&-field.input {
	display: inline-flex;
	flex: 0 0 0;
	max-width: 9em;
	align-items: stretch;
	- padding: 0.2em 8px;

	input {
	color: var(--text);
	background: none;
	border: none;
	padding: 0;
	margin: 0;

	&.textColor {
	flex: 1 0 3em;
	min-width: 3em;
	padding: 0;
	}
	}

	.nativeColor {
	cursor: pointer;
	flex: 0 0 auto;
	+ padding: 0;

	input {
	appearance: none;
	max-width: 0;
	min-width: 0;
	max-height: 0;
	/* stylelint-disable-next-line declaration-no-important */
	opacity: 0 !important;
	}
	}

	.computedIndicator,
	.validIndicator,
	.invalidIndicator,
	.transparentIndicator {
	flex: 0 0 2em;
	- margin: 0 0.5em;
	+ margin: 0.2em 0.5em;
	min-width: 2em;
	align-self: stretch;
	- min-height: 1.5em;
	+ min-height: 1.1em;
	border-radius: var(--roundness);
	}

	.invalidIndicator {
	background: transparent;
	box-sizing: border-box;
	border: 2px solid var(--cRed);
	}

	.transparentIndicator {
	// forgot to install counter-strike source, ooops
	background-color: #f0f;
	position: relative;

	&::before,
	&::after {
	display: block;
	content: "";
	background-color: #000;
	position: absolute;
	height: 50%;
	width: 50%;
	}

	&::after {
	top: 0;
	left: 0;
	border-top-left-radius: var(--roundness);
	}

	&::before {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: var(--roundness);
	}
	}
	- }

	- .label {
	- flex: 1 1 auto;
	+ &.disabled,
	+ &:disabled {
	+ .nativeColor input,
	+ .computedIndicator,
	+ .validIndicator,
	+ .invalidIndicator,
	+ .transparentIndicator {
	+ /* stylelint-disable-next-line declaration-no-important */
	+ opacity: 0.25 !important;
	+ }
	+ }
	}
	}
	diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
	index 66ee9d53aa..b6e84629fc 100644
	--- a/src/components/color_input/color_input.vue
	+++ b/src/components/color_input/color_input.vue
	@@ -1,131 +1,143 @@
	<template>
	<div
	class="color-input style-control"
	:class="{ disabled: !present \|\| disabled }"
	>
	<label
	:for="name"
	class="label"
	+ :class="{ faint: !present \|\| disabled }"
	>
	{{ label }}
	</label>
	<Checkbox
	v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
	:model-value="present"
	:disabled="disabled"
	class="opt"
	- @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
	+ @update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
	/>
	- <div class="input color-input-field">
	+ <div
	+ class="input color-input-field"
	+ :class="{ disabled: !present \|\| disabled }"
	+ >
	<input
	:id="name + '-t'"
	class="textColor unstyled"
	+ :class="{ disabled: !present \|\| disabled }"
	type="text"
	:value="modelValue \|\| fallback"
	:disabled="!present \|\| disabled"
	- @input="$emit('update:modelValue', $event.target.value)"
	+ @input="updateValue($event.target.value)"
	>
	<div
	v-if="validColor"
	class="validIndicator"
	:style="{backgroundColor: modelValue \|\| fallback}"
	/>
	<div
	v-else-if="transparentColor"
	class="transparentIndicator"
	/>
	<div
	v-else-if="computedColor"
	class="computedIndicator"
	:style="{backgroundColor: fallback}"
	/>
	<div
	v-else
	class="invalidIndicator"
	/>
	<label class="nativeColor">
	<FAIcon icon="eye-dropper" />
	<input
	:id="name"
	class="unstyled"
	type="color"
	:value="modelValue \|\| fallback"
	:disabled="!present \|\| disabled"
	- @input="$emit('update:modelValue', $event.target.value)"
	+ :class="{ disabled: !present \|\| disabled }"
	+ @input="updateValue($event.target.value)"
	>
	</label>
	</div>
	</div>
	</template>
	<script>
	import Checkbox from '../checkbox/checkbox.vue'
	import { hex2rgb } from '../../services/color_convert/color_convert.js'
	+import { throttle } from 'lodash'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEyeDropper
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faEyeDropper
	)

	export default {
	components: {
	Checkbox
	},
	props: {
	// Name of color, used for identifying
	name: {
	required: true,
	type: String
	},
	// Readable label
	label: {
	required: true,
	type: String
	},
	// Color value, should be required but vue cannot tell the difference
	// between "property missing" and "property set to undefined"
	modelValue: {
	required: false,
	type: String,
	default: undefined
	},
	// Color fallback to use when value is not defeind
	fallback: {
	required: false,
	type: String,
	default: undefined
	},
	// Disable the control
	disabled: {
	required: false,
	type: Boolean,
	default: false
	},
	// Show "optional" tickbox, for when value might become mandatory
	showOptionalTickbox: {
	required: false,
	type: Boolean,
	default: true
	}
	},
	emits: ['update:modelValue'],
	computed: {
	present () {
	return typeof this.modelValue !== 'undefined'
	},
	validColor () {
	return hex2rgb(this.modelValue \|\| this.fallback)
	},
	transparentColor () {
	return this.modelValue === 'transparent'
	},
	computedColor () {
	return this.modelValue && this.modelValue.startsWith('--')
	}
	+ },
	+ methods: {
	+ updateValue: throttle(function (value) {
	+ this.$emit('update:modelValue', value)
	+ }, 100)
	}
	}
	</script>
	<style lang="scss" src="./color_input.scss"></style>
	diff --git a/src/components/input.style.js b/src/components/input.style.js
	index 7302cd6db8..6ad6cf9039 100644
	--- a/src/components/input.style.js
	+++ b/src/components/input.style.js
	@@ -1,60 +1,89 @@
	const hoverGlow = {
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '--text',
	alpha: 1
	}

	export default {
	name: 'Input',
	selector: '.input',
	- variant: {
	+ states: {
	+ hover: ':hover:not(.disabled)',
	+ focused: ':focus-within',
	+ disabled: '.disabled'
	+ },
	+ variants: {
	checkbox: '.-checkbox',
	radio: '.-radio'
	},
	- states: {
	- disabled: ':disabled',
	- hover: ':hover:not(:disabled)',
	- focused: ':focus-within'
	- },
	validInnerComponents: [
	- 'Text'
	+ 'Text',
	+ 'Icon'
	],
	defaultRules: [
	{
	component: 'Root',
	directives: {
	'--defaultInputBevel': 'shadow \| $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
	}
	},
	{
	variant: 'checkbox',
	directives: {
	roundness: 1
	}
	},
	{
	directives: {
	'--font': 'generic \| inherit',
	background: '--fg, -5',
	roundness: 3,
	shadow: [{
	x: 0,
	y: 0,
	blur: 2,
	spread: 0,
	color: '#000000',
	alpha: 1
	}, '--defaultInputBevel']
	}
	},
	{
	state: ['hover'],
	directives: {
	shadow: [hoverGlow, '--defaultInputBevel']
	}
	+ },
	+ {
	+ state: ['disabled'],
	+ directives: {
	+ background: '--parent'
	+ }
	+ },
	+ {
	+ component: 'Text',
	+ parent: {
	+ component: 'Input',
	+ state: ['disabled']
	+ },
	+ directives: {
	+ textOpacity: 0.25,
	+ textOpacityMode: 'blend'
	+ }
	+ },
	+ {
	+ component: 'Icon',
	+ parent: {
	+ component: 'Input',
	+ state: ['disabled']
	+ },
	+ directives: {
	+ textOpacity: 0.25,
	+ textOpacityMode: 'blend'
	+ }
	}
	]
	}
	diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
	index a45bdd9201..5a80b100d8 100644
	--- a/src/components/opacity_input/opacity_input.vue
	+++ b/src/components/opacity_input/opacity_input.vue
	@@ -1,49 +1,51 @@
	<template>
	<div
	class="opacity-control style-control"
	:class="{ disabled: !present \|\| disabled }"
	>
	<label
	:for="name"
	class="label"
	+ :class="{ faint: !present \|\| disabled }"
	>
	{{ $t('settings.style.common.opacity') }}
	</label>
	<Checkbox
	v-if="typeof fallback !== 'undefined'"
	:model-value="present"
	:disabled="disabled"
	class="opt"
	@update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
	/>
	<input
	:id="name"
	class="input input-number"
	type="number"
	:value="modelValue \|\| fallback"
	:disabled="!present \|\| disabled"
	+ :class="{ disabled: !present \|\| disabled }"
	max="1"
	min="0"
	step=".05"
	@input="$emit('update:modelValue', $event.target.value)"
	>
	</div>
	</template>

	<script>
	import Checkbox from '../checkbox/checkbox.vue'
	export default {
	components: {
	Checkbox
	},
	props: [
	'name', 'modelValue', 'fallback', 'disabled'
	],
	emits: ['update:modelValue'],
	computed: {
	present () {
	return typeof this.modelValue !== 'undefined'
	}
	}
	}
	</script>
	diff --git a/src/components/select/select.vue b/src/components/select/select.vue
	index 3283212659..39d3ca6476 100644
	--- a/src/components/select/select.vue
	+++ b/src/components/select/select.vue
	@@ -1,57 +1,89 @@
	<template>
	<label
	class="Select input"
	:class="{ disabled, unstyled }"
	>
	<select
	:disabled="disabled"
	:value="modelValue"
	- v-bind="attrs"
	+ v-bind="$attrs"
	@change="$emit('update:modelValue', $event.target.value)"
	>
	<slot />
	</select>
	{{ ' ' }}
	<FAIcon
	+ v-if="!$attrs.size && !$attrs.multiple"
	class="select-down-icon"
	icon="chevron-down"
	/>
	</label>
	</template>

	<script src="./select.js"> </script>

	<style lang="scss">
	/* TODO fix order of styles */
	label.Select {
	padding: 0;

	select {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--text);
	margin: 0;
	padding: 0 2em 0 0.2em;
	font-family: var(--font);
	font-size: 1em;
	width: 100%;
	z-index: 1;
	height: 2em;
	line-height: 16px;
	+
	+ &[multiple],
	+ &[size] {
	+ height: 100%;
	+ padding: 0.2em;
	+
	+ option {
	+ background-color: transparent;
	+
	+ &.-active {
	+ color: var(--selectionText);
	+ background-color: var(--selectionBackground);
	+ }
	+ }
	+ }
	+ }
	+
	+ &.disabled,
	+ &:disabled {
	+ background-color: var(--background);
	+ opacity: 1; /* override browser */
	+
	+ select {
	+ &[multiple],
	+ &[size] {
	+ option.-active {
	+ color: var(--text);
	+ background: transparent;
	+ }
	+ }
	+ }
	}

	.select-down-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	width: 0.875em;
	font-family: var(--font);
	line-height: 2;
	z-index: 0;
	pointer-events: none;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	index 25836559f5..64de28bc38 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	@@ -1,806 +1,817 @@
	import {
	rgb2hex,
	hex2rgb,
	getContrastRatioLayers,
	relativeLuminance
	} from 'src/services/color_convert/color_convert.js'
	import {
	getThemes
	} from 'src/services/style_setter/style_setter.js'
	import {
	newImporter,
	newExporter
	} from 'src/services/export_import/export_import.js'
	import {
	SLOT_INHERITANCE
	} from 'src/services/theme_data/pleromafe.js'
	import {
	CURRENT_VERSION,
	OPACITIES,
	getLayers,
	getOpacitySlot,
	DEFAULT_SHADOWS,
	generateColors,
	generateShadows,
	generateRadii,
	generateFonts,
	shadows2to3,
	colors2to3
	} from 'src/services/theme_data/theme_data.service.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
	} from 'src/services/theme_data/css_utils.js'

	import ColorInput from 'src/components/color_input/color_input.vue'
	import RangeInput from 'src/components/range_input/range_input.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import FontControl from 'src/components/font_control/font_control.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import Select from 'src/components/select/select.vue'

	import Preview from './theme_preview.vue'

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	].map(_ => _ + 'ColorLocal')

	const colorConvert = (color) => {
	if (color.startsWith('--') \|\| color === 'transparent') {
	return color
	} else {
	return hex2rgb(color)
	}
	}

	export default {
	data () {
	return {
	themeV3Preview: [],
	themeImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure
	}),
	themeExporter: newExporter({
	filename: 'pleroma_theme',
	getExportedObject: () => this.exportedTheme
	}),
	availableStyles: [],
	selected: '',
	selectedTheme: this.$store.getters.mergedConfig.theme,
	themeWarning: undefined,
	tempImportFile: undefined,
	engineVersion: 0,

	previewTheme: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	...Object.keys(SLOT_INHERITANCE)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [key + 'ColorLocal']: val }), {}),

	...Object.keys(OPACITIES)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [key + 'OpacityLocal']: val }), {}),

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: '',
	chatMessageRadiusLocal: ''
	}
	},
	created () {
	const self = this

	getThemes()
	.then((promises) => {
	return Promise.all(
	Object.entries(promises)
	.map(([k, v]) => v.then(res => [k, res]))
	)
	})
	.then(themes => themes.reduce((acc, [k, v]) => {
	if (v) {
	return {
	...acc,
	[k]: v
	}
	} else {
	return acc
	}
	}, {}))
	.then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	this.loadThemeFromLocalStorage()
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	themeWarningHelp () {
	if (!this.themeWarning) return
	const t = this.$t
	const pre = 'settings.style.switcher.help.'
	const {
	origin,
	themeEngineVersion,
	type,
	noActionsPossible
	} = this.themeWarning
	if (origin === 'file') {
	// Loaded v2 theme from file
	if (themeEngineVersion === 2 && type === 'wrong_version') {
	return t(pre + 'v2_imported')
	}
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	} else if (origin === 'localStorage') {
	if (type === 'snapshot_source_mismatch') {
	return t(pre + 'snapshot_source_mismatch')
	}
	// FE upgraded from v2
	if (themeEngineVersion === 2) {
	return t(pre + 'upgraded_from_v2')
	}
	// Admin downgraded FE
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'fe_downgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	// Admin upgraded FE
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'fe_upgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	}
	},
	selectedVersion () {
	return Array.isArray(this.selectedTheme) ? 1 : 2
	},
	currentColors () {
	return Object.keys(SLOT_INHERITANCE)
	.map(key => [key, this[key + 'ColorLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
	},
	currentOpacity () {
	return Object.keys(OPACITIES)
	.map(key => [key, this[key + 'OpacityLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
	},
	currentRadii () {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal,
	chatMessage: this.chatMessageRadiusLocal
	}
	},
	// This needs optimization maybe
	previewContrast () {
	try {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	const hints = (ratio) => ({
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	})
	const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})

	const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
	const slotIsBaseText = key === 'text' \|\| key === 'link'
	const slotIsText = slotIsBaseText \|\| (
	typeof value === 'object' && value !== null && value.textColor
	)
	if (!slotIsText) return acc
	const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
	const background = variant \|\| layer
	const opacitySlot = getOpacitySlot(background)
	const textColors = [
	key,
	...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
	]

	const layers = getLayers(
	layer,
	variant \|\| layer,
	opacitySlot,
	colorsConverted,
	opacity
	)

	// Temporary patch for null-y value errors
	if (layers.flat().some(v => v == null)) return acc

	return {
	...acc,
	...textColors.reduce((acc, textColorKey) => {
	const newKey = slotIsBaseText
	? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
	: textColorKey
	return {
	...acc,
	[newKey]: getContrastRatioLayers(
	colorsConverted[textColorKey],
	layers,
	colorsConverted[textColorKey]
	)
	}
	}, {})
	}
	}, {})

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	} catch (e) {
	console.warn('Failure computing contrasts', e)
	return {}
	}
	},
	shadowsAvailable () {
	return Object.keys(DEFAULT_SHADOWS).sort()
	},
	currentShadowOverriden: {
	get () {
	return !!this.currentShadow
	},
	set (val) {
	if (val) {
	- this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
	+ this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback \|\| [])
	+ .map(s => ({
	+ name: null,
	+ x: 0,
	+ y: 0,
	+ blur: 0,
	+ spread: 0,
	+ inset: false,
	+ color: '#000000',
	+ alpha: 1,
	+ ...s
	+ }))
	} else {
	delete this.shadowsLocal[this.shadowSelected]
	}
	}
	},
	currentShadowFallback () {
	return (this.previewTheme.shadows \|\| {})[this.shadowSelected]
	},
	currentShadow: {
	get () {
	return this.shadowsLocal[this.shadowSelected]
	},
	set (v) {
	this.shadowsLocal[this.shadowSelected] = v
	}
	},
	themeValid () {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme () {
	const saveEverything = (
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor
	)

	const source = {
	themeEngineVersion: CURRENT_VERSION
	}

	if (this.keepFonts \|\| saveEverything) {
	source.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	source.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	source.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	source.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	source.radii = this.currentRadii
	}

	const theme = {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}

	return {
	// To separate from other random JSON files and possible future source formats
	_pleroma_theme_version: 2, theme, source
	}
	},
	isActive () {
	const tabSwitcher = this.$parent
	return tabSwitcher ? tabSwitcher.isActive('theme') : false
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	Checkbox,
	Select
	},
	methods: {
	loadTheme (
	{
	theme,
	source,
	_pleroma_theme_version: fileVersion
	},
	origin,
	forceUseSource = false
	) {
	this.dismissWarning()
	if (!source && !theme) {
	throw new Error('Can\'t load theme: empty')
	}
	const version = (origin === 'localStorage' && !theme.colors)
	? 'l1'
	: fileVersion
	const snapshotEngineVersion = (theme \|\| {}).themeEngineVersion
	const themeEngineVersion = (source \|\| {}).themeEngineVersion \|\| 2
	const versionsMatch = themeEngineVersion === CURRENT_VERSION
	const sourceSnapshotMismatch = (
	theme !== undefined &&
	source !== undefined &&
	themeEngineVersion !== snapshotEngineVersion
	)
	// Force loading of source if user requested it or if snapshot
	// is unavailable
	const forcedSourceLoad = (source && forceUseSource) \|\| !theme
	if (!(versionsMatch && !sourceSnapshotMismatch) &&
	!forcedSourceLoad &&
	version !== 'l1' &&
	origin !== 'defaults'
	) {
	if (sourceSnapshotMismatch && origin === 'localStorage') {
	this.themeWarning = {
	origin,
	themeEngineVersion,
	type: 'snapshot_source_mismatch'
	}
	} else if (!theme) {
	this.themeWarning = {
	origin,
	noActionsPossible: true,
	themeEngineVersion,
	type: 'no_snapshot_old_version'
	}
	} else if (!versionsMatch) {
	this.themeWarning = {
	origin,
	noActionsPossible: !source,
	themeEngineVersion,
	type: 'wrong_version'
	}
	}
	}
	this.normalizeLocalState(theme, version, source, forcedSourceLoad)
	},
	forceLoadLocalStorage () {
	this.loadThemeFromLocalStorage(true)
	},
	dismissWarning () {
	this.themeWarning = undefined
	this.tempImportFile = undefined
	},
	forceLoad () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(true)
	break
	case 'file':
	this.onImport(this.tempImportFile, true)
	break
	}
	this.dismissWarning()
	},
	forceSnapshot () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(false, true)
	break
	case 'file':
	console.error('Forcing snapshot from file is not supported yet')
	break
	}
	this.dismissWarning()
	},
	loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
	const {
	customTheme: theme,
	customThemeSource: source
	} = this.$store.getters.mergedConfig
	if (!theme && !source) {
	// Anon user or never touched themes
	this.loadTheme(
	this.$store.state.instance.themeData,
	'defaults',
	confirmLoadSource
	)
	} else {
	this.loadTheme(
	{
	theme,
	source: forceSnapshot ? theme : source
	},
	'localStorage',
	confirmLoadSource
	)
	}
	},
	setCustomTheme () {
	this.$store.dispatch('setThemeV2', {
	customTheme: {
	ignore: true,
	themeFileVersion: this.selectedVersion,
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	},
	customThemeSource: {
	themeFileVersion: this.selectedVersion,
	themeEngineVersion: CURRENT_VERSION,
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	updatePreviewColors () {
	const result = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.previewTheme.colors = result.theme.colors
	this.previewTheme.opacity = result.theme.opacity
	},
	updatePreviewShadows () {
	this.previewTheme.shadows = generateShadows(
	{
	shadows: this.shadowsLocal,
	opacity: this.previewTheme.opacity,
	themeEngineVersion: this.engineVersion
	},
	this.previewTheme.colors,
	relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
	).theme.shadows
	},
	importTheme () { this.themeImporter.importData() },
	exportTheme () { this.themeExporter.exportData() },
	onImport (parsed, forceSource = false) {
	this.tempImportFile = parsed
	this.loadTheme(parsed, 'file', forceSource)
	},
	onImportFailure (result) {
	this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	this.loadThemeFromLocalStorage()
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1 () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter(_ => !v1OnlyNames.includes(_))
	.forEach(key => {
	this.$data[key] = undefined
	})
	},

	clearRoundness () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('RadiusLocal'))
	.forEach(key => {
	this.$data[key] = undefined
	})
	},

	clearOpacity () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('OpacityLocal'))
	.forEach(key => {
	this.$data[key] = undefined
	})
	},

	clearShadows () {
	this.shadowsLocal = {}
	},

	clearFonts () {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} theme - theme data (snapshot)
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	* @param {Object} source - theme source - this will be used if compatible
	* @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
	* this allows importing source anyway
	*/
	normalizeLocalState (theme, version = 0, source, forceSource = false) {
	let input
	if (typeof source !== 'undefined') {
	if (forceSource \|\| source?.themeEngineVersion === CURRENT_VERSION) {
	input = source
	version = source.themeEngineVersion
	} else {
	input = theme
	}
	} else {
	input = theme
	}

	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = !input.themeEngineVersion
	? colors2to3(input.colors \|\| input)
	: input.colors \|\| input

	if (version === 0) {
	if (input.version) version = input.version
	// Old v1 naming: fg is text, btn is foreground
	if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
	version = 1
	}
	// New v2 naming: text is text, fg is foreground
	if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
	version = 2
	}
	}

	this.engineVersion = version

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	const color = colors[key]
	const hex = rgb2hex(colors[key])
	this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
	})
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	if (version === 2) {
	this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
	} else {
	this.shadowsLocal = shadows
	}
	this.updatePreviewColors()
	this.updatePreviewShadows()
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}
	},
	updateTheme3Preview () {
	const theme2 = convertTheme2To3(this.previewTheme)
	const theme3 = init({
	inputRuleset: theme2,
	ultimateBackgroundColor: '#000000',
	liteMode: true
	})

	this.themeV3Preview = getScopedVersion(
	getCssRules(theme3.eager),
	'#theme-preview'
	).join('\n')
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	try {
	this.updatePreviewShadows()
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	fontsLocal: {
	handler () {
	try {
	this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	currentColors () {
	try {
	this.updatePreviewColors()
	this.colorsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.updatePreviewColors()
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
	if (Array.isArray(s)) {
	return s[0] === this.selected
	} else {
	return s.name === this.selected
	}
	})[1]
	},
	selectedTheme () {
	this.dismissWarning()
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selectedTheme[1]
	this.fgColorLocal = this.selectedTheme[2]
	this.textColorLocal = this.selectedTheme[3]
	this.linkColorLocal = this.selectedTheme[4]
	this.cRedColorLocal = this.selectedTheme[5]
	this.cGreenColorLocal = this.selectedTheme[6]
	this.cBlueColorLocal = this.selectedTheme[7]
	this.cOrangeColorLocal = this.selectedTheme[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
	}
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	index 84933fb8ef..e86e61dabd 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	@@ -1,250 +1,251 @@
	.theme-tab {
	.deprecation-warning {
	padding: 0.5em;
	margin: 2em;
	}

	padding-bottom: 2em;

	.preset-switcher {
	margin-right: 1em;
	}

	.btn {
	margin-left: 0.25em;
	margin-right: 0.25em;
	}

	.btn-group .btn {
	margin: 0;
	}

	.style-control {
	display: flex;
	align-items: baseline;
	margin-bottom: 5px;

	.label {
	+ margin-right: 1em;
	flex: 1;
	+ line-height: 2;
	}

	.opt {
	margin: 0.5em;
	}

	.color-input {
	flex: 0 0 0;
	}

	input,
	select {
	min-width: 3em;
	margin: 0;
	flex: 0;

	&[type="number"] {
	min-width: 5em;
	}

	&[type="range"] {
	flex: 1;
	- min-width: 3em;
	- align-self: flex-start;
	+ min-width: 2em;
	+ align-self: center;
	+ margin: 0 0.5em;
	}
	- }

	- &.disabled {
	- input,
	- select {
	- opacity: 0.5;
	+ &[type="checkbox"] + i {
	+ height: 1.1em;
	+ align-self: center;
	}
	}
	}

	.reset-container {
	flex-wrap: wrap;
	}

	.fonts-container,
	.reset-container,
	.apply-container,
	.radius-container,
	.color-container, {
	display: flex;
	}

	.fonts-container,
	.radius-container {
	flex-direction: column;
	}

	.color-container {
	> h4 {
	width: 99%;
	}

	flex-wrap: wrap;
	justify-content: space-between;
	}

	.fonts-container,
	.color-container,
	.shadow-container,
	.radius-container,
	.presets-container {
	margin: 1em 1em 0;
	}

	.tab-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	min-height: 30px;
	margin-bottom: 1em;

	p {
	flex: 1;
	margin: 0;
	margin-right: 0.5em;
	}
	}

	.tab-header-buttons {
	display: flex;
	flex-direction: column;

	.btn {
	min-width: 1px;
	flex: 0 auto;
	padding: 0 1em;
	margin-bottom: 0.5em;
	}
	}

	.shadow-selector {
	.override {
	flex: 1;
	margin-left: 0.5em;
	}

	.select-container {
	margin-top: -4px;
	margin-bottom: -3px;
	}
	}

	.save-load,
	.save-load-options {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;

	.presets,
	.import-export {
	margin-bottom: 0.5em;
	}

	.import-export {
	display: flex;
	}

	.override {
	margin-left: 0.5em;
	}
	}

	.save-load-options {
	flex-wrap: wrap;
	margin-top: 0.5em;
	justify-content: center;

	.keep-option {
	margin: 0 0.5em 0.5em;
	min-width: 25%;
	}
	}

	.radius-item {
	flex-basis: auto;
	}

	.radius-item,
	.color-item {
	min-width: 20em;
	margin: 5px 6px 0 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;

	&.wide {
	min-width: 60%;
	}

	&:not(.wide):nth-child(2n+1) {
	margin-right: 7px;
	}

	.color,
	.opacity {
	display: flex;
	align-items: baseline;
	}
	}

	.theme-radius-rn,
	.theme-color-cl {
	border: 0;
	box-shadow: none;
	background: transparent;
	color: var(--textFaint);
	align-self: stretch;
	}

	.theme-color-cl,
	.theme-radius-in,
	.theme-color-in {
	margin-left: 4px;
	}

	.theme-radius-in {
	min-width: 1em;
	max-width: 7em;
	flex: 1;
	}

	.theme-radius-lb {
	max-width: 50em;
	}

	.theme-warning {
	display: flex;
	align-items: baseline;
	margin-bottom: 0.5em;

	.buttons {
	.btn {
	margin-bottom: 0.5em;
	}
	}
	}
	}

	.extra-content {
	.apply-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-grow: 1;

	/* stylelint-disable-next-line no-descending-specificity */
	.btn {
	flex-grow: 1;
	min-height: 2em;
	min-width: 0;
	max-width: 10em;
	padding: 0;
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	index 4498c1434e..00a55832f7 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	@@ -1,1064 +1,1029 @@
	<template>
	<div class="theme-tab">
	<div class="alert warning deprecation-warning">
	{{ $t("settings.style.themes2_outdated") }}
	</div>
	<div class="presets-container">
	<div class="save-load">
	<div
	v-if="themeWarning"
	class="theme-warning"
	>
	<div class="alert warning">
	{{ themeWarningHelp }}
	</div>
	<div class="buttons">
	<template v-if="themeWarning.type === 'snapshot_source_mismatch'">
	<button
	class="btn button-default"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.use_source') }}
	</button>
	<button
	class="btn button-default"
	@click="forceSnapshot"
	>
	{{ $t('settings.style.switcher.use_snapshot') }}
	</button>
	</template>
	<template v-else-if="themeWarning.noActionsPossible">
	<button
	class="btn button-default"
	@click="dismissWarning"
	>
	{{ $t('general.dismiss') }}
	</button>
	</template>
	<template v-else>
	<button
	class="btn button-default"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.load_theme') }}
	</button>
	<button
	class="btn button-default"
	@click="dismissWarning"
	>
	{{ $t('settings.style.switcher.keep_as_is') }}
	</button>
	</template>
	</div>
	</div>
	<div class="top">
	<div class="presets">
	{{ $t('settings.presets') }}
	<label
	for="preset-switcher"
	class="select"
	>
	<Select
	id="preset-switcher"
	v-model="selected"
	class="preset-switcher"
	>
	<option
	v-for="style in availableStyles"
	:key="style.name"
	:value="style.name \|\| style[0]"
	:style="{
	backgroundColor: style[1] \|\| (style.theme \|\| style.source).colors.bg,
	color: style[3] \|\| (style.theme \|\| style.source).colors.text
	}"
	>
	{{ style[0] \|\| style.name }}
	</option>
	</Select>
	</label>
	</div>
	<div class="export-import">
	<button
	class="btn button-default"
	@click="importTheme"
	>
	{{ $t("settings.import_theme") }}
	</button>
	<button
	class="btn button-default"
	@click="exportTheme"
	>
	{{ $t("settings.export_theme") }}
	</button>
	</div>
	</div>
	</div>
	<div class="save-load-options">
	<span class="keep-option">
	<Checkbox v-model="keepColor">
	{{ $t('settings.style.switcher.keep_color') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepShadows">
	{{ $t('settings.style.switcher.keep_shadows') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepOpacity">
	{{ $t('settings.style.switcher.keep_opacity') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepRoundness">
	{{ $t('settings.style.switcher.keep_roundness') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepFonts">
	{{ $t('settings.style.switcher.keep_fonts') }}
	</Checkbox>
	</span>
	<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
	</div>
	</div>

	- <!-- eslint-disable vue/no-v-text-v-html-on-component -->
	- <component :is="'style'" v-html="themeV3Preview"/>
	- <!-- eslint-enable vue/no-v-text-v-html-on-component -->
	- <preview id="theme-preview"/>
	+ <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
	+ <component
	+ :is="'style'"
	+ v-html="themeV3Preview"
	+ />
	+ <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
	+ <preview id="theme-preview" />

	<div>
	<button
	class="btn button-default"
	@click="updateTheme3Preview"
	>
	{{ $t("settings.style.update_preview") }}
	</button>
	</div>

	<keep-alive>
	<tab-switcher key="style-tweak">
	<div
	:label="$t('settings.style.common_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<div class="tab-header-buttons">
	<button
	class="btn button-default"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn button-default"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	</div>
	<p>{{ $t('settings.theme_help_v2_1') }}</p>
	<h4>{{ $t('settings.style.common_colors.main') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="bgColorLocal"
	name="bgColor"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="bgOpacityLocal"
	name="bgOpacity"
	:fallback="previewTheme.opacity?.bg"
	/>
	<ColorInput
	v-model="textColorLocal"
	name="textColor"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.bgText" />
	<ColorInput
	v-model="accentColorLocal"
	name="accentColor"
	:fallback="previewTheme.colors?.link"
	:label="$t('settings.accent')"
	:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
	/>
	<ColorInput
	v-model="linkColorLocal"
	name="linkColor"
	:fallback="previewTheme.colors?.accent"
	:label="$t('settings.links')"
	:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
	/>
	<ContrastRatio :contrast="previewContrast.bgLink" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="fgColorLocal"
	name="fgColor"
	:label="$t('settings.foreground')"
	/>
	<ColorInput
	v-model="fgTextColorLocal"
	name="fgTextColor"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.fgText"
	/>
	<ColorInput
	v-model="fgLinkColorLocal"
	name="fgLinkColor"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors?.fgLink"
	/>
	<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
	</div>
	<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="cRedColorLocal"
	name="cRedColor"
	:label="$t('settings.cRed')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCRed" />
	<ColorInput
	v-model="cBlueColorLocal"
	name="cBlueColor"
	:label="$t('settings.cBlue')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCBlue" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="cGreenColorLocal"
	name="cGreenColor"
	:label="$t('settings.cGreen')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCGreen" />
	<ColorInput
	v-model="cOrangeColorLocal"
	name="cOrangeColor"
	:label="$t('settings.cOrange')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCOrange" />
	</div>
	<p>{{ $t('settings.theme_help_v2_2') }}</p>
	</div>

	<div
	:label="$t('settings.style.advanced_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<button
	class="btn button-default"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn button-default"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
	<ColorInput
	v-model="postLinkColorLocal"
	name="postLinkColor"
	:fallback="previewTheme.colors?.accent"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.postLink" />
	<ColorInput
	v-model="postGreentextColorLocal"
	name="postGreentextColor"
	:fallback="previewTheme.colors?.cGreen"
	:label="$t('settings.greentext')"
	/>
	<ContrastRatio :contrast="previewContrast.postGreentext" />
	<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
	<ColorInput
	v-model="alertErrorColorLocal"
	name="alertError"
	:label="$t('settings.style.advanced_colors.alert_error')"
	:fallback="previewTheme.colors?.alertError"
	/>
	<ColorInput
	v-model="alertErrorTextColorLocal"
	name="alertErrorText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.alertErrorText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertErrorText"
	large
	/>
	<ColorInput
	v-model="alertWarningColorLocal"
	name="alertWarning"
	:label="$t('settings.style.advanced_colors.alert_warning')"
	:fallback="previewTheme.colors?.alertWarning"
	/>
	<ColorInput
	v-model="alertWarningTextColorLocal"
	name="alertWarningText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.alertWarningText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertWarningText"
	large
	/>
	<ColorInput
	v-model="alertNeutralColorLocal"
	name="alertNeutral"
	:label="$t('settings.style.advanced_colors.alert_neutral')"
	:fallback="previewTheme.colors?.alertNeutral"
	/>
	<ColorInput
	v-model="alertNeutralTextColorLocal"
	name="alertNeutralText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.alertNeutralText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertNeutralText"
	large
	/>
	<OpacityInput
	v-model="alertOpacityLocal"
	name="alertOpacity"
	:fallback="previewTheme.opacity?.alert"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
	<ColorInput
	v-model="badgeNotificationColorLocal"
	name="badgeNotification"
	:label="$t('settings.style.advanced_colors.badge_notification')"
	:fallback="previewTheme.colors?.badgeNotification"
	/>
	<ColorInput
	v-model="badgeNotificationTextColorLocal"
	name="badgeNotificationText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.badgeNotificationText"
	/>
	<ContrastRatio
	:contrast="previewContrast.badgeNotificationText"
	large
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
	<ColorInput
	v-model="panelColorLocal"
	name="panelColor"
	:fallback="previewTheme.colors?.panel"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="panelOpacityLocal"
	name="panelOpacity"
	:fallback="previewTheme.opacity?.panel"
	:disabled="panelColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="panelTextColorLocal"
	name="panelTextColor"
	:fallback="previewTheme.colors?.panelText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelText"
	large
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors?.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
	<ColorInput
	v-model="topBarColorLocal"
	name="topBarColor"
	:fallback="previewTheme.colors?.topBar"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="topBarTextColorLocal"
	name="topBarTextColor"
	:fallback="previewTheme.colors?.topBarText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarText" />
	<ColorInput
	v-model="topBarLinkColorLocal"
	name="topBarLinkColor"
	:fallback="previewTheme.colors?.topBarLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
	<ColorInput
	v-model="inputColorLocal"
	name="inputColor"
	:fallback="previewTheme.colors?.input"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="inputOpacityLocal"
	name="inputOpacity"
	:fallback="previewTheme.opacity?.input"
	:disabled="inputColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="inputTextColorLocal"
	name="inputTextColor"
	:fallback="previewTheme.colors?.inputText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.inputText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
	<ColorInput
	v-model="btnColorLocal"
	name="btnColor"
	:fallback="previewTheme.colors?.btn"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="btnOpacityLocal"
	name="btnOpacity"
	:fallback="previewTheme.opacity?.btn"
	:disabled="btnColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="btnTextColorLocal"
	name="btnTextColor"
	:fallback="previewTheme.colors?.btnText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnText" />
	<ColorInput
	v-model="btnPanelTextColorLocal"
	name="btnPanelTextColor"
	:fallback="previewTheme.colors?.btnPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPanelText" />
	<ColorInput
	v-model="btnTopBarTextColorLocal"
	name="btnTopBarTextColor"
	:fallback="previewTheme.colors?.btnTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnTopBarText" />
	<h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
	<ColorInput
	v-model="btnPressedColorLocal"
	name="btnPressedColor"
	:fallback="previewTheme.colors?.btnPressed"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnPressedTextColorLocal"
	name="btnPressedTextColor"
	:fallback="previewTheme.colors?.btnPressedText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedText" />
	<ColorInput
	v-model="btnPressedPanelTextColorLocal"
	name="btnPressedPanelTextColor"
	:fallback="previewTheme.colors?.btnPressedPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
	<ColorInput
	v-model="btnPressedTopBarTextColorLocal"
	name="btnPressedTopBarTextColor"
	:fallback="previewTheme.colors?.btnPressedTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
	<h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
	<ColorInput
	v-model="btnDisabledColorLocal"
	name="btnDisabledColor"
	:fallback="previewTheme.colors?.btnDisabled"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnDisabledTextColorLocal"
	name="btnDisabledTextColor"
	:fallback="previewTheme.colors?.btnDisabledText"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="btnDisabledPanelTextColorLocal"
	name="btnDisabledPanelTextColor"
	:fallback="previewTheme.colors?.btnDisabledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ColorInput
	v-model="btnDisabledTopBarTextColorLocal"
	name="btnDisabledTopBarTextColor"
	:fallback="previewTheme.colors?.btnDisabledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
	<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')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledText" />
	<ColorInput
	v-model="btnToggledPanelTextColorLocal"
	name="btnToggledPanelTextColor"
	:fallback="previewTheme.colors?.btnToggledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
	<ColorInput
	v-model="btnToggledTopBarTextColorLocal"
	name="btnToggledTopBarTextColor"
	:fallback="previewTheme.colors?.btnToggledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
	<ColorInput
	v-model="tabColorLocal"
	name="tabColor"
	:fallback="previewTheme.colors?.tab"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="tabTextColorLocal"
	name="tabTextColor"
	:fallback="previewTheme.colors?.tabText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.tabText" />
	<ColorInput
	v-model="tabActiveTextColorLocal"
	name="tabActiveTextColor"
	:fallback="previewTheme.colors?.tabActiveText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.tabActiveText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
	<ColorInput
	v-model="borderColorLocal"
	name="borderColor"
	:fallback="previewTheme.colors?.border"
	:label="$t('settings.style.common.color')"
	/>
	<OpacityInput
	v-model="borderOpacityLocal"
	name="borderOpacity"
	:fallback="previewTheme.opacity?.border"
	:disabled="borderColorLocal === 'transparent'"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
	<ColorInput
	v-model="faintColorLocal"
	name="faintColor"
	:fallback="previewTheme.colors?.faint"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="faintLinkColorLocal"
	name="faintLinkColor"
	:fallback="previewTheme.colors?.faintLink"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="panelFaintColorLocal"
	name="panelFaintColor"
	:fallback="previewTheme.colors?.panelFaint"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<OpacityInput
	v-model="faintOpacityLocal"
	name="faintOpacity"
	:fallback="previewTheme.opacity?.faint"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
	<ColorInput
	v-model="underlayColorLocal"
	name="underlay"
	:label="$t('settings.style.advanced_colors.underlay')"
	:fallback="previewTheme.colors?.underlay"
	/>
	<OpacityInput
	v-model="underlayOpacityLocal"
	name="underlayOpacity"
	:fallback="previewTheme.opacity?.underlay"
	:disabled="underlayOpacityLocal === 'transparent'"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
	<ColorInput
	v-model="wallpaperColorLocal"
	name="wallpaper"
	:label="$t('settings.style.advanced_colors.wallpaper')"
	:fallback="previewTheme.colors?.wallpaper"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
	<ColorInput
	v-model="pollColorLocal"
	name="poll"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors?.poll"
	/>
	<ColorInput
	v-model="pollTextColorLocal"
	name="pollText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.pollText"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
	<ColorInput
	v-model="iconColorLocal"
	name="icon"
	:label="$t('settings.style.advanced_colors.icons')"
	:fallback="previewTheme.colors?.icon"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
	<ColorInput
	v-model="highlightColorLocal"
	name="highlight"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors?.highlight"
	/>
	<ColorInput
	v-model="highlightTextColorLocal"
	name="highlightText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.highlightText"
	/>
	<ContrastRatio :contrast="previewContrast.highlightText" />
	<ColorInput
	v-model="highlightLinkColorLocal"
	name="highlightLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors?.highlightLink"
	/>
	<ContrastRatio :contrast="previewContrast.highlightLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
	<ColorInput
	v-model="popoverColorLocal"
	name="popover"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors?.popover"
	/>
	<OpacityInput
	v-model="popoverOpacityLocal"
	name="popoverOpacity"
	:fallback="previewTheme.opacity?.popover"
	:disabled="popoverOpacityLocal === 'transparent'"
	/>
	<ColorInput
	v-model="popoverTextColorLocal"
	name="popoverText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.popoverText"
	/>
	<ContrastRatio :contrast="previewContrast.popoverText" />
	<ColorInput
	v-model="popoverLinkColorLocal"
	name="popoverLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors?.popoverLink"
	/>
	<ContrastRatio :contrast="previewContrast.popoverLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
	<ColorInput
	v-model="selectedPostColorLocal"
	name="selectedPost"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors?.selectedPost"
	/>
	<ColorInput
	v-model="selectedPostTextColorLocal"
	name="selectedPostText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.selectedPostText"
	/>
	<ContrastRatio :contrast="previewContrast.selectedPostText" />
	<ColorInput
	v-model="selectedPostLinkColorLocal"
	name="selectedPostLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors?.selectedPostLink"
	/>
	<ContrastRatio :contrast="previewContrast.selectedPostLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
	<ColorInput
	v-model="selectedMenuColorLocal"
	name="selectedMenu"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors?.selectedMenu"
	/>
	<ColorInput
	v-model="selectedMenuTextColorLocal"
	name="selectedMenuText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors?.selectedMenuText"
	/>
	<ContrastRatio :contrast="previewContrast.selectedMenuText" />
	<ColorInput
	v-model="selectedMenuLinkColorLocal"
	name="selectedMenuLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors?.selectedMenuLink"
	/>
	<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('chats.chats') }}</h4>
	<ColorInput
	v-model="chatBgColorLocal"
	name="chatBgColor"
	:fallback="previewTheme.colors?.bg"
	:label="$t('settings.background')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
	<ColorInput
	v-model="chatMessageIncomingBgColorLocal"
	name="chatMessageIncomingBgColor"
	:fallback="previewTheme.colors?.bg"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="chatMessageIncomingTextColorLocal"
	name="chatMessageIncomingTextColor"
	:fallback="previewTheme.colors?.text"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="chatMessageIncomingLinkColorLocal"
	name="chatMessageIncomingLinkColor"
	:fallback="previewTheme.colors?.link"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="chatMessageIncomingBorderColorLocal"
	name="chatMessageIncomingBorderLinkColor"
	:fallback="previewTheme.colors?.fg"
	:label="$t('settings.style.advanced_colors.chat.border')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
	<ColorInput
	v-model="chatMessageOutgoingBgColorLocal"
	name="chatMessageOutgoingBgColor"
	:fallback="previewTheme.colors?.bg"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingTextColorLocal"
	name="chatMessageOutgoingTextColor"
	:fallback="previewTheme.colors?.text"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingLinkColorLocal"
	name="chatMessageOutgoingLinkColor"
	:fallback="previewTheme.colors?.link"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingBorderColorLocal"
	name="chatMessageOutgoingBorderLinkColor"
	:fallback="previewTheme.colors?.bg"
	:label="$t('settings.style.advanced_colors.chat.border')"
	/>
	</div>
	</div>

	<div
	:label="$t('settings.style.radii._tab_label')"
	class="radius-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.radii_help') }}</p>
	<button
	class="btn button-default"
	@click="clearRoundness"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<RangeInput
	v-model="btnRadiusLocal"
	name="btnRadius"
	:label="$t('settings.btnRadius')"
	:fallback="previewTheme.radii?.btn"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="inputRadiusLocal"
	name="inputRadius"
	:label="$t('settings.inputRadius')"
	:fallback="previewTheme.radii?.input"
	max="9"
	hard-min="0"
	/>
	<RangeInput
	v-model="checkboxRadiusLocal"
	name="checkboxRadius"
	:label="$t('settings.checkboxRadius')"
	:fallback="previewTheme.radii?.checkbox"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="panelRadiusLocal"
	name="panelRadius"
	:label="$t('settings.panelRadius')"
	:fallback="previewTheme.radii?.panel"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarRadiusLocal"
	name="avatarRadius"
	:label="$t('settings.avatarRadius')"
	:fallback="previewTheme.radii?.avatar"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarAltRadiusLocal"
	name="avatarAltRadius"
	:label="$t('settings.avatarAltRadius')"
	:fallback="previewTheme.radii?.avatarAlt"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="attachmentRadiusLocal"
	name="attachmentRadius"
	:label="$t('settings.attachmentRadius')"
	:fallback="previewTheme.radii?.attachment"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="tooltipRadiusLocal"
	name="tooltipRadius"
	:label="$t('settings.tooltipRadius')"
	:fallback="previewTheme.radii?.tooltip"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="chatMessageRadiusLocal"
	name="chatMessageRadius"
	:label="$t('settings.chatMessageRadius')"
	:fallback="previewTheme.radii?.chatMessage \|\| 2"
	max="50"
	hard-min="0"
	/>
	</div>

	<div
	:label="$t('settings.style.shadows._tab_label')"
	class="shadow-container"
	>
	<div class="tab-header shadow-selector">
	<div class="select-container">
	{{ $t('settings.style.shadows.component') }}
	{{ ' ' }}
	<Select
	id="shadow-switcher"
	v-model="shadowSelected"
	class="shadow-switcher"
	>
	<option
	v-for="shadow in shadowsAvailable"
	:key="shadow"
	:value="shadow"
	>
	{{ $t('settings.style.shadows.components.' + shadow) }}
	</option>
	</Select>
	</div>
	<div class="override">
	- <label
	- for="override"
	- class="label"
	- >
	- {{ $t('settings.style.shadows.override') }}
	- </label>
	- {{ ' ' }}
	- <input
	+ <Checkbox
	id="override"
	v-model="currentShadowOverriden"
	name="override"
	class="input-override"
	- type="checkbox"
	>
	- <label
	- class="checkbox-label"
	- for="override"
	- />
	+ {{ $t('settings.style.shadows.override') }}
	+ </Checkbox>
	</div>
	<button
	class="btn button-default"
	@click="clearShadows"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<ShadowControl
	v-model="currentShadow"
	- :ready="!!currentShadowFallback"
	+ :separate-inset="shadowSelected === 'avatar' \|\| shadowSelected === 'avatarStatus'"
	:fallback="currentShadowFallback"
	/>
	- <div v-if="shadowSelected === 'avatar' \|\| shadowSelected === 'avatarStatus'">
	- <i18n-t
	- scope="global"
	- keypath="settings.style.shadows.filter_hint.always_drop_shadow"
	- tag="p"
	- >
	- <code>filter: drop-shadow()</code>
	- </i18n-t>
	- <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
	- <i18n-t
	- scope="global"
	- keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
	- tag="p"
	- >
	- <code>drop-shadow</code>
	- <code>spread-radius</code>
	- <code>inset</code>
	- </i18n-t>
	- <i18n-t
	- scope="global"
	- keypath="settings.style.shadows.filter_hint.inset_classic"
	- tag="p"
	- >
	- <code>box-shadow</code>
	- </i18n-t>
	- <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
	- </div>
	</div>
	-
	<div
	:label="$t('settings.style.fonts._tab_label')"
	class="fonts-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.style.fonts.help') }}</p>
	<button
	class="btn button-default"
	@click="clearFonts"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<FontControl
	v-model="fontsLocal.interface"
	name="ui"
	:label="$t('settings.style.fonts.components.interface')"
	:fallback="previewTheme.fonts?.interface"
	no-inherit="1"
	/>
	<FontControl
	v-model="fontsLocal.input"
	name="input"
	:label="$t('settings.style.fonts.components.input')"
	:fallback="previewTheme.fonts?.input"
	/>
	<FontControl
	v-model="fontsLocal.post"
	name="post"
	:label="$t('settings.style.fonts.components.post')"
	:fallback="previewTheme.fonts?.post"
	/>
	<FontControl
	v-model="fontsLocal.postCode"
	name="postCode"
	:label="$t('settings.style.fonts.components.postCode')"
	:fallback="previewTheme.fonts?.postCode"
	/>
	</div>
	</tab-switcher>
	</keep-alive>

	<teleport
	v-if="isActive"
	to="#unscrolled-content"
	>
	<div class="apply-container">
	<button
	class="btn button-default submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn button-default"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</teleport>
	</div>
	</template>

	<script src="./theme_tab.js"></script>

	<style src="./theme_tab.scss" lang="scss"></style>
	diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
	index f8e12dbfcc..ab1df53c2c 100644
	--- a/src/components/shadow_control/shadow_control.js
	+++ b/src/components/shadow_control/shadow_control.js
	@@ -1,122 +1,128 @@
	-import ColorInput from '../color_input/color_input.vue'
	-import OpacityInput from '../opacity_input/opacity_input.vue'
	-import Select from '../select/select.vue'
	-import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
	-import { hex2rgb } from '../../services/color_convert/color_convert.js'
	+import ColorInput from 'src/components/color_input/color_input.vue'
	+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	+import Select from 'src/components/select/select.vue'
	+import Checkbox from 'src/components/checkbox/checkbox.vue'
	+import Popover from 'src/components/popover/popover.vue'
	+import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	+import { throttle } from 'lodash'
	import {
	faTimes,
	faChevronDown,
	faChevronUp,
	faPlus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faChevronDown,
	faChevronUp,
	faTimes,
	faPlus
	)

	const toModel = (object = {}) => ({
	x: 0,
	y: 0,
	blur: 0,
	spread: 0,
	inset: false,
	color: '#000000',
	alpha: 1,
	...object
	})

	export default {
	- // 'modelValue' and 'Fallback' can be undefined, but if they are
	- // initially vue won't detect it when they become something else
	- // therefore i'm using "ready" which should be passed as true when
	- // data becomes available
	props: [
	- 'modelValue', 'fallback', 'ready'
	+ 'modelValue', 'fallback', 'separateInset'
	],
	emits: ['update:modelValue'],
	data () {
	return {
	+ lightGrid: false,
	selectedId: 0,
	// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
	- cValue: (this.modelValue \|\| this.fallback \|\| []).map(toModel)
	+ cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	- Select
	+ Select,
	+ Checkbox,
	+ Popover
	+ },
	+ beforeUpdate () {
	+ this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
	+ },
	+ computed: {
	+ selected () {
	+ const selected = this.cValue[this.selectedId]
	+ if (selected) {
	+ return { ...selected }
	+ }
	+ return null
	+ },
	+ present () {
	+ return this.selected != null && !this.usingFallback
	+ },
	+ shadowsAreNull () {
	+ return this.modelValue == null
	+ },
	+ currentFallback () {
	+ return this.fallback?.[this.selectedId]
	+ },
	+ moveUpValid () {
	+ return this.selectedId > 0
	+ },
	+ moveDnValid () {
	+ return this.selectedId < this.cValue.length - 1
	+ },
	+ usingFallback () {
	+ return this.modelValue == null
	+ },
	+ style () {
	+ console.log(this.separateInset)
	+ if (this.separateInset) {
	+ return {
	+ filter: getCssShadowFilter(this.cValue),
	+ boxShadow: getCssShadow(this.cValue, true)
	+ }
	+ }
	+ return {
	+ boxShadow: getCssShadow(this.cValue)
	+ }
	+ }
	},
	methods: {
	+ updateProperty: throttle(function (prop, value) {
	+ console.log(prop, value)
	+ this.cValue[this.selectedId][prop] = value
	+ if (prop === 'inset' && value === false && this.separateInset) {
	+ this.cValue[this.selectedId].spread = 0
	+ }
	+ this.$emit('update:modelValue', this.cValue)
	+ }, 100),
	add () {
	this.cValue.push(toModel(this.selected))
	- this.selectedId = this.cValue.length - 1
	+ this.selectedId = Math.max(this.cValue.length - 1, 0)
	+ this.$emit('update:modelValue', this.cValue)
	},
	del () {
	this.cValue.splice(this.selectedId, 1)
	this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
	+ this.$emit('update:modelValue', this.cValue)
	},
	moveUp () {
	const movable = this.cValue.splice(this.selectedId, 1)[0]
	this.cValue.splice(this.selectedId - 1, 0, movable)
	this.selectedId -= 1
	+ this.$emit('update:modelValue', this.cValue)
	},
	moveDn () {
	const movable = this.cValue.splice(this.selectedId, 1)[0]
	this.cValue.splice(this.selectedId + 1, 0, movable)
	this.selectedId += 1
	- }
	- },
	- beforeUpdate () {
	- this.cValue = this.modelValue \|\| this.fallback
	- },
	- computed: {
	- anyShadows () {
	- return this.cValue.length > 0
	- },
	- anyShadowsFallback () {
	- return this.fallback.length > 0
	- },
	- selected () {
	- if (this.ready && this.anyShadows) {
	- return this.cValue[this.selectedId]
	- } else {
	- return toModel({})
	- }
	- },
	- currentFallback () {
	- if (this.ready && this.anyShadowsFallback) {
	- return this.fallback[this.selectedId]
	- } else {
	- return toModel({})
	- }
	- },
	- moveUpValid () {
	- return this.ready && this.selectedId > 0
	- },
	- moveDnValid () {
	- return this.ready && this.selectedId < this.cValue.length - 1
	- },
	- present () {
	- return this.ready &&
	- typeof this.cValue[this.selectedId] !== 'undefined' &&
	- !this.usingFallback
	- },
	- usingFallback () {
	- return typeof this.modelValue === 'undefined'
	- },
	- rgb () {
	- return hex2rgb(this.selected.color)
	- },
	- style () {
	- return this.ready
	- ? {
	- boxShadow: getCssShadow(this.fallback)
	- }
	- : {}
	+ this.$emit('update:modelValue', this.cValue)
	}
	}
	}
	diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
	new file mode 100644
	index 0000000000..19009a3d76
	--- /dev/null
	+++ b/src/components/shadow_control/shadow_control.scss
	@@ -0,0 +1,192 @@
	+.settings-modal .settings-modal-panel .shadow-control {
	+ display: flex;
	+ flex-wrap: wrap;
	+ justify-content: stretch;
	+ grid-gap: 0.25em;
	+ margin-bottom: 1em;
	+
	+ .shadow-switcher {
	+ order: 1;
	+ flex: 1 0 6em;
	+ min-width: 6em;
	+ margin-right: 0.125em;
	+ display: flex;
	+ flex-direction: column;
	+
	+ .shadow-list {
	+ flex: 1 0 auto;
	+ }
	+
	+ .arrange-buttons {
	+ flex: 0 0 auto;
	+ display: grid;
	+ grid-auto-columns: 1fr;
	+ grid-auto-flow: column;
	+ margin-top: 0.25em;
	+
	+ .button-default {
	+ margin: 0;
	+ padding: 0;
	+ }
	+ }
	+ }
	+
	+ .shadow-tweak {
	+ order: 3;
	+ flex: 2 0 10em;
	+ min-width: 10em;
	+ margin-left: 0.125em;
	+ margin-right: 0.125em;
	+
	+ /* hack */
	+ .input-boolean {
	+ flex: 1;
	+ display: flex;
	+
	+ .label {
	+ flex: 1;
	+ }
	+ }
	+
	+ .input-string {
	+ flex: 1 0 5em;
	+ }
	+
	+ .id-control {
	+ align-items: stretch;
	+
	+ .shadow-switcher,
	+ .btn {
	+ min-width: 1px;
	+ margin-right: 5px;
	+ }
	+
	+ .btn {
	+ padding: 0 0.4em;
	+ margin: 0 0.1em;
	+ }
	+ }
	+ }
	+
	+ .inset-alert {
	+ padding: 0.25em 0.5em;
	+ }
	+
	+ &.disabled {
	+ .inset-alert {
	+ opacity: 0.2;
	+ }
	+ }
	+
	+ .shadow-preview {
	+ order: 2;
	+ flex: 3 3 15em;
	+ min-width: 10em;
	+ display: grid;
	+ margin-left: 0.125em;
	+ align-self: start;
	+ grid-template-columns: 3em 1fr 3em;
	+ grid-template-rows: 2em 1fr 2em;
	+ grid-template-areas:
	+ ". header y-num "
	+ ". preview y-slide"
	+ "x-num x-slide . "
	+ "options options options";
	+ grid-gap: 0.5em;
	+
	+ .header {
	+ grid-area: header;
	+ justify-self: center;
	+ align-self: baseline;
	+ line-height: 2;
	+ }
	+
	+ .input-light-grid {
	+ grid-area: options;
	+ justify-self: center;
	+ }
	+
	+ .input-number {
	+ min-width: 2em;
	+ }
	+
	+ .x-shift-number {
	+ grid-area: x-num;
	+ }
	+
	+ .x-shift-slider {
	+ grid-area: x-slide;
	+ height: auto;
	+ align-self: start;
	+ min-width: 10em;
	+ }
	+
	+ .y-shift-number {
	+ grid-area: y-num;
	+ }
	+
	+ .y-shift-slider {
	+ grid-area: y-slide;
	+ writing-mode: vertical-lr;
	+ justify-self: left;
	+ min-height: 10em;
	+ }
	+
	+ .x-shift-slider,
	+ .y-shift-slider {
	+ padding: 0;
	+ }
	+
	+ .preview-window {
	+ --__grid-color1: rgb(102 102 102);
	+ --__grid-color2: rgb(153 153 153);
	+ --__grid-color1-disabled: rgba(102 102 102 / 20%);
	+ --__grid-color2-disabled: rgba(153 153 153 / 20%);
	+
	+ &.-light-grid {
	+ --__grid-color1: rgb(205 205 205);
	+ --__grid-color2: rgb(255 255 255);
	+ --__grid-color1-disabled: rgba(205 205 205 / 20%);
	+ --__grid-color2-disabled: rgba(255 255 255 / 20%);
	+ }
	+
	+ grid-area: preview;
	+ aspect-ratio: 1;
	+ display: flex;
	+ align-items: center;
	+ justify-content: center;
	+ min-width: 10em;
	+ min-height: 10em;
	+ background-color: var(--__grid-color2);
	+ background-image:
	+ linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
	+ linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
	+ linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
	+ linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
	+ background-size: 20px 20px;
	+ background-position: 0 0, 0 10px, 10px -10px, -10px 0;
	+ border-radius: var(--roundness);
	+
	+ &.disabled {
	+ background-color: var(--__grid-color2-disabled);
	+ background-image:
	+ linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
	+ linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
	+ linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
	+ linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
	+ }
	+
	+ .preview-block {
	+ width: 33%;
	+ height: 33%;
	+ border-radius: var(--roundness);
	+ background: var(--background);
	+ }
	+ }
	+ }
	+}
	+
	+.inset-tooltip {
	+ padding: 0.5em;
	+ max-width: 30em;
	+}
	diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
	index c3b956cda9..6a7829c5f3 100644
	--- a/src/components/shadow_control/shadow_control.vue
	+++ b/src/components/shadow_control/shadow_control.vue
	@@ -1,326 +1,309 @@
	<template>
	<div
	- class="shadow-control"
	+ class="label shadow-control"
	:class="{ disabled: !present }"
	>
	- <div class="shadow-preview-container">
	- <div
	+ <div class="shadow-preview">
	+ <label
	+ class="header"
	+ :class="{ faint: !present }"
	+ >
	+ {{ $t('settings.style.shadows.offset') }}
	+ </label>
	+ <input
	+ :value="selected?.y"
	:disabled="!present"
	- class="y-shift-control"
	+ :class="{ disabled: !present }"
	+ class="input input-number y-shift-number"
	+ type="number"
	+ @input="e => updateProperty('y', e.target.value)"
	+ >
	+ <input
	+ :value="selected?.y"
	+ :disabled="!present"
	+ :class="{ disabled: !present }"
	+ class="input input-range y-shift-slider"
	+ type="range"
	+ max="20"
	+ min="-20"
	+ @input="e => updateProperty('y', e.target.value)"
	+ >
	+ <div
	+ class="preview-window"
	+ :class="{ disabled: !present, '-light-grid': lightGrid }"
	>
	- <input
	- v-model="selected.y"
	- :disabled="!present"
	- class="input input-number"
	- type="number"
	- >
	- <div class="wrap">
	- <input
	- v-model="selected.y"
	- :disabled="!present"
	- class="input input-range"
	- type="range"
	- max="20"
	- min="-20"
	- >
	- </div>
	- </div>
	- <div class="preview-window">
	<div
	class="preview-block"
	:style="style"
	/>
	</div>
	- <div
	+ <input
	+ :value="selected?.x"
	:disabled="!present"
	- class="x-shift-control"
	+ :class="{ disabled: !present }"
	+ class="input input-number x-shift-number"
	+ type="number"
	+ @input="e => updateProperty('x', e.target.value)"
	>
	- <input
	- v-model="selected.x"
	- :disabled="!present"
	- class="input input-number"
	- type="number"
	- >
	- <div class="wrap">
	- <input
	- v-model="selected.x"
	- :disabled="!present"
	- class="input input-range"
	- type="range"
	- max="20"
	- min="-20"
	- >
	- </div>
	- </div>
	+ <input
	+ :value="selected?.x"
	+ :disabled="!present"
	+ :class="{ disabled: !present }"
	+ class="input input-range x-shift-slider"
	+ type="range"
	+ max="20"
	+ min="-20"
	+ @input="e => updateProperty('x', e.target.value)"
	+ >
	+ <Checkbox
	+ id="lightGrid"
	+ v-model="lightGrid"
	+ :disabled="!present"
	+ name="lightGrid"
	+ class="input-light-grid"
	+ >
	+ {{ $t('settings.style.shadows.light_grid') }}
	+ </Checkbox>
	</div>
	-
	- <div class="shadow-tweak">
	- <div
	- :disabled="usingFallback"
	- class="id-control style-control"
	+ <div class="shadow-switcher">
	+ <Select
	+ id="shadow-list"
	+ v-model="selectedId"
	+ class="shadow-list"
	+ size="10"
	+ :disabled="shadowsAreNull"
	>
	- <Select
	- id="shadow-switcher"
	- v-model="selectedId"
	- class="shadow-switcher"
	- :disabled="!ready \|\| usingFallback"
	+ <option
	+ v-for="(shadow, index) in cValue"
	+ :key="index"
	+ :value="index"
	+ :class="{ '-active': index === Number(selectedId) }"
	>
	- <option
	- v-for="(shadow, index) in cValue"
	- :key="index"
	- :value="index"
	- >
	- {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
	- </option>
	- </Select>
	+ {{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
	+ </option>
	+ </Select>
	+ <div
	+ class="id-control btn-group arrange-buttons"
	+ >
	<button
	class="btn button-default"
	- :disabled="!ready \|\| !present"
	- @click="del"
	+ :disabled="shadowsAreNull"
	+ @click="add"
	>
	<FAIcon
	fixed-width
	- icon="times"
	+ icon="plus"
	/>
	</button>
	<button
	class="btn button-default"
	:disabled="!moveUpValid"
	+ :class="{ disabled: !moveUpValid }"
	@click="moveUp"
	>
	<FAIcon
	fixed-width
	icon="chevron-up"
	/>
	</button>
	<button
	class="btn button-default"
	:disabled="!moveDnValid"
	+ :class="{ disabled: !moveDnValid }"
	@click="moveDn"
	>
	<FAIcon
	fixed-width
	icon="chevron-down"
	/>
	</button>
	<button
	class="btn button-default"
	- :disabled="usingFallback"
	- @click="add"
	+ :disabled="!present"
	+ :class="{ disabled: !present }"
	+ @click="del"
	>
	<FAIcon
	fixed-width
	- icon="plus"
	+ icon="times"
	/>
	</button>
	</div>
	+ </div>
	+ <div class="shadow-tweak">
	<div
	- :disabled="!present"
	- class="inset-control style-control"
	+ :class="{ disabled: !present }"
	+ class="name-control style-control"
	>
	<label
	- for="inset"
	+ for="name"
	class="label"
	+ :class="{ faint: !present }"
	>
	- {{ $t('settings.style.shadows.inset') }}
	+ {{ $t('settings.style.shadows.name') }}
	</label>
	<input
	+ id="name"
	+ :value="selected?.name"
	+ :disabled="!present"
	+ :class="{ disabled: !present }"
	+ name="name"
	+ class="input input-string"
	+ @input="e => updateProperty('name', e.target.value)"
	+ >
	+ </div>
	+ <div
	+ :disabled="!present"
	+ class="inset-control style-control"
	+ >
	+ <Checkbox
	id="inset"
	- v-model="selected.inset"
	+ :value="selected?.inset"
	:disabled="!present"
	name="inset"
	- class="input -checkbox input-inset visible-for-screenreader-only"
	- type="checkbox"
	+ class="input-inset input-boolean"
	+ @input="e => updateProperty('inset', e.target.checked)"
	>
	- <label
	- class="checkbox-label"
	- for="inset"
	- :aria-hidden="true"
	- />
	+ <template #before>
	+ {{ $t('settings.style.shadows.inset') }}
	+ </template>
	+ </Checkbox>
	</div>
	<div
	:disabled="!present"
	+ :class="{ disabled: !present }"
	class="blur-control style-control"
	>
	<label
	- for="spread"
	+ for="blur"
	class="label"
	+ :class="{ faint: !present }"
	>
	{{ $t('settings.style.shadows.blur') }}
	</label>
	<input
	id="blur"
	- v-model="selected.blur"
	+ :value="selected?.blur"
	:disabled="!present"
	+ :class="{ disabled: !present }"
	name="blur"
	class="input input-range"
	type="range"
	max="20"
	min="0"
	+ @input="e => updateProperty('blur', e.target.value)"
	>
	<input
	- v-model="selected.blur"
	+ :value="selected?.blur"
	:disabled="!present"
	+ :class="{ disabled: !present }"
	class="input input-number"
	type="number"
	min="0"
	+ @input="e => updateProperty('blur', e.target.value)"
	>
	</div>
	<div
	- :disabled="!present"
	class="spread-control style-control"
	+ :class="{ disabled: !present \|\| (separateInset && !selected?.inset) }"
	>
	<label
	for="spread"
	class="label"
	+ :class="{ faint: !present \|\| (separateInset && !selected?.inset) }"
	>
	{{ $t('settings.style.shadows.spread') }}
	</label>
	<input
	id="spread"
	- v-model="selected.spread"
	- :disabled="!present"
	+ :value="selected?.spread"
	+ :disabled="!present \|\| (separateInset && !selected?.inset)"
	+ :class="{ disabled: !present \|\| (separateInset && !selected?.inset) }"
	name="spread"
	class="input input-range"
	type="range"
	max="20"
	min="-20"
	+ @input="e => updateProperty('spread', e.target.value)"
	>
	<input
	- v-model="selected.spread"
	- :disabled="!present"
	+ :value="selected?.spread"
	+ :disabled="{ disabled: !present \|\| (separateInset && !selected?.inset) }"
	+ :class="{ disabled: !present \|\| (separateInset && !selected?.inset) }"
	class="input input-number"
	type="number"
	+ @input="e => updateProperty('spread', e.target.value)"
	>
	</div>
	<ColorInput
	- v-model="selected.color"
	+ :model-value="selected?.color"
	:disabled="!present"
	:label="$t('settings.style.common.color')"
	- :fallback="currentFallback.color"
	+ :fallback="currentFallback?.color"
	:show-optional-tickbox="false"
	name="shadow"
	+ @update:modelValue="e => updateProperty('color', e)"
	/>
	<OpacityInput
	- v-model="selected.alpha"
	+ :model-value="selected?.alpha"
	:disabled="!present"
	+ @update:modelValue="e => updateProperty('alpha', e)"
	/>
	<i18n-t
	scope="global"
	keypath="settings.style.shadows.hintV3"
	+ :class="{ faint: !present }"
	tag="p"
	>
	<code>--variable,mod</code>
	</i18n-t>
	+ <Popover
	+ v-if="separateInset"
	+ trigger="hover"
	+ >
	+ <template #trigger>
	+ <div
	+ class="inset-alert alert warning"
	+ >
	+ <FAIcon icon="exclamation-triangle" />
	+
	+ {{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
	+ </div>
	+ </template>
	+ <template #content>
	+ <div class="inset-tooltip">
	+ <i18n-t
	+ scope="global"
	+ keypath="settings.style.shadows.filter_hint.always_drop_shadow"
	+ tag="p"
	+ >
	+ <code>filter: drop-shadow()</code>
	+ </i18n-t>
	+ <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
	+ <i18n-t
	+ scope="global"
	+ keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
	+ tag="p"
	+ >
	+ <code>drop-shadow</code>
	+ <code>spread-radius</code>
	+ <code>inset</code>
	+ </i18n-t>
	+ <i18n-t
	+ scope="global"
	+ keypath="settings.style.shadows.filter_hint.inset_classic"
	+ tag="p"
	+ >
	+ <code>box-shadow</code>
	+ </i18n-t>
	+ <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
	+ </div>
	+ </template>
	+ </Popover>
	</div>
	</div>
	</template>

	<script src="./shadow_control.js"></script>

	-<style lang="scss">
	-.shadow-control {
	- display: flex;
	- flex-wrap: wrap;
	- justify-content: center;
	- margin-bottom: 1em;
	-
	- .shadow-preview-container,
	- .shadow-tweak {
	- margin: 5px 6px 0 0;
	- }
	-
	- .shadow-preview-container {
	- flex: 0;
	- display: flex;
	- flex-wrap: wrap;
	-
	- input[type="number"] {
	- width: 5em;
	- min-width: 2em;
	- }
	-
	- .x-shift-control,
	- .y-shift-control {
	- display: flex;
	- flex: 0;
	-
	- &[disabled="disabled"] * {
	- opacity: 0.5;
	- }
	- }
	-
	- .x-shift-control {
	- align-items: flex-start;
	- }
	-
	- .x-shift-control .wrap,
	- input[type="range"] {
	- margin: 0;
	- width: 15em;
	- height: 2em;
	- }
	-
	- .y-shift-control {
	- flex-direction: column;
	- align-items: flex-end;
	-
	- .wrap {
	- width: 2em;
	- height: 15em;
	- }
	-
	- input[type="range"] {
	- transform-origin: 1em 1em;
	- transform: rotate(90deg);
	- }
	- }
	-
	- .preview-window {
	- flex: 1;
	- background-color: #999;
	- display: flex;
	- align-items: center;
	- justify-content: center;
	- background-image:
	- linear-gradient(45deg, #666 25%, transparent 25%),
	- linear-gradient(-45deg, #666 25%, transparent 25%),
	- linear-gradient(45deg, transparent 75%, #666 75%),
	- linear-gradient(-45deg, transparent 75%, #666 75%);
	- background-size: 20px 20px;
	- background-position: 0 0, 0 10px, 10px -10px, -10px 0;
	- border-radius: var(--roundness);
	-
	- .preview-block {
	- width: 33%;
	- height: 33%;
	- border-radius: var(--roundness);
	- }
	- }
	- }
	-
	- .shadow-tweak {
	- flex: 1;
	- min-width: 280px;
	-
	- .id-control {
	- align-items: stretch;
	-
	- .shadow-switcher {
	- flex: 1;
	- }
	-
	- .shadow-switcher,
	- .btn {
	- min-width: 1px;
	- margin-right: 5px;
	- }
	-
	- .btn {
	- padding: 0 0.4em;
	- margin: 0 0.1em;
	- }
	- }
	- }
	-}
	-</style>
	+<style src="./shadow_control.scss" lang="scss"></style>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index 1321e55697..c5c66ebbed 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,1419 +1,1423 @@
	{
	"about": {
	"mrf": {
	"federation": "Federation",
	"keyword": {
	"keyword_policies": "Keyword policies",
	"ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
	"reject": "Reject",
	"replace": "Replace",
	"is_replaced_by": "→"
	},
	"mrf_policies": "Enabled MRF policies",
	"mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance. The following policies are enabled:",
	"simple": {
	"simple_policies": "Instance-specific policies",
	"instance": "Instance",
	"reason": "Reason",
	"not_applicable": "N/A",
	"accept": "Accept",
	"accept_desc": "This instance only accepts messages from the following instances:",
	"reject": "Reject",
	"reject_desc": "This instance will not accept messages from the following instances:",
	"quarantine": "Quarantine",
	"quarantine_desc": "This instance will send only public posts to the following instances:",
	"ftl_removal": "Removal from \"Known Network\" Timeline",
	"ftl_removal_desc": "This instance removes these instances from \"Known Network\" timeline:",
	"media_removal": "Media Removal",
	"media_removal_desc": "This instance removes media from posts on the following instances:",
	"media_nsfw": "Media force-set as sensitive",
	"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
	}
	},
	"staff": "Staff"
	},
	"announcements": {
	"page_header": "Announcements",
	"title": "Announcement",
	"mark_as_read_action": "Mark as read",
	"post_form_header": "Post announcement",
	"post_placeholder": "Type your announcement content here...",
	"post_action": "Post",
	"post_error": "Error: {error}",
	"close_error": "Close",
	"delete_action": "Delete",
	"start_time_prompt": "Start time: ",
	"end_time_prompt": "End time: ",
	"all_day_prompt": "This is an all-day event",
	"published_time_display": "Published at {time}",
	"start_time_display": "Starts at {time}",
	"end_time_display": "Ends at {time}",
	"edit_action": "Edit",
	"submit_edit_action": "Submit",
	"cancel_edit_action": "Cancel",
	"inactive_message": "This announcement is inactive"
	},
	"shoutbox": {
	"title": "Shoutbox"
	},
	"domain_mute_card": {
	"mute": "Mute",
	"mute_progress": "Muting…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…"
	},
	"exporter": {
	"export": "Export",
	"processing": "Processing, you'll soon be asked to download your file"
	},
	"features_panel": {
	"shout": "Shoutbox",
	"pleroma_chat_messages": "Pleroma Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow",
	"upload_limit": "Upload limit"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"loading": "Loading…",
	"generic_error": "An error occured",
	"generic_error_message": "An error occured: {0}",
	"error_retry": "Please try again",
	"retry": "Try again",
	"optional": "optional",
	"show_more": "Show more",
	"show_less": "Show less",
	"never_show_again": "Never show again",
	"dismiss": "Dismiss",
	"cancel": "Cancel",
	"disable": "Disable",
	"enable": "Enable",
	"confirm": "Confirm",
	"verify": "Verify",
	"close": "Close",
	"undo": "Undo",
	"yes": "Yes",
	"no": "No",
	"peek": "Peek",
	"scroll_to_top": "Scroll to top",
	"role": {
	"admin": "Admin",
	"moderator": "Moderator"
	},
	"unpin": "Unpin item",
	"pin": "Pin item",
	"flash_content": "Click to show Flash content using Ruffle (Experimental, may not work).",
	"flash_security": "Note that this can be potentially dangerous since Flash content is still arbitrary code.",
	"flash_fail": "Failed to load flash content, see console for details.",
	"scope_in_timeline": {
	"direct": "Direct",
	"private": "Followers-only",
	"public": "Public",
	"unlisted": "Unlisted"
	}
	},
	"image_cropper": {
	"crop_picture": "Crop picture",
	"save": "Save",
	"save_without_cropping": "Save without cropping",
	"cancel": "Cancel"
	},
	"importer": {
	"submit": "Submit",
	"success": "Imported successfully.",
	"error": "An error occured while importing this file."
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"logout_confirm_title": "Logout confirmation",
	"logout_confirm": "Do you really want to logout?",
	"logout_confirm_accept_button": "Logout",
	"logout_confirm_cancel_button": "Do not logout",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion",
	"authentication_code": "Authentication code",
	"enter_recovery_code": "Enter a recovery code",
	"enter_two_factor_code": "Enter a two-factor code",
	"recovery_code": "Recovery code",
	"heading": {
	"totp": "Two-factor authentication",
	"recovery": "Two-factor recovery"
	}
	},
	"media_modal": {
	"previous": "Previous",
	"next": "Next",
	"counter": "{current} / {total}",
	"hide": "Close media viewer"
	},
	"nav": {
	"about": "About",
	"administration": "Administration",
	"back": "Back",
	"friend_requests": "Follow requests",
	"mentions": "Mentions",
	"interactions": "Interactions",
	"dms": "Direct messages",
	"public_tl": "Public timeline",
	"timeline": "Timeline",
	"home_timeline": "Home timeline",
	"twkn": "Known Network",
	"bookmarks": "Bookmarks",
	"user_search": "User Search",
	"search": "Search",
	"search_close": "Close search bar",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences",
	"timelines": "Timelines",
	"chats": "Chats",
	"lists": "Lists",
	"edit_nav_mobile": "Customize navigation bar",
	"edit_pinned": "Edit pinned items",
	"edit_finish": "Done editing",
	"mobile_sidebar": "Toggle mobile sidebar",
	"mobile_notifications": "Open notifications (there are unread ones)",
	"mobile_notifications_close": "Close notifications",
	"mobile_notifications_mark_as_seen": "Mark all as seen",
	"announcements": "Announcements",
	"quotes": "Quotes"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it…",
	"error": "Error fetching notifications: {0}",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"follow_request": "wants to follow you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications",
	"migrated_to": "migrated to",
	"reacted_with": "reacted with {0}",
	"submitted_report": "submitted a report",
	"poll_ended": "poll has ended",
	"unread_announcements": "{num} unread announcement \| {num} unread announcements",
	"unread_chats": "{num} unread chat \| {num} unread chats",
	"unread_follow_requests": "{num} new follow request \| {num} new follow requests",
	"configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
	"configuration_tip_settings": "the settings",
	"configuration_tip_dismiss": "Do not show again",
	"subscribed_status": "posted"
	},
	"polls": {
	"add_poll": "Add poll",
	"add_option": "Add option",
	"option": "Option",
	"votes": "votes",
	"people_voted_count": "{count} person voted \| {count} people voted",
	"votes_count": "{count} vote \| {count} votes",
	"vote": "Vote",
	"type": "Poll type",
	"single_choice": "Single choice",
	"multiple_choices": "Multiple choices",
	"expiry": "Poll age",
	"expires_in": "Poll ends in {0}",
	"expired": "Poll ended {0} ago",
	"not_enough_options": "Too few unique options in poll",
	"non_anonymous": "Public poll",
	"non_anonymous_title": "Other instances may display the options you voted for"
	},
	"emoji": {
	"stickers": "Stickers",
	"emoji": "Emoji",
	"keep_open": "Keep picker open",
	"search_emoji": "Search for an emoji",
	"add_emoji": "Insert emoji",
	"custom": "Custom emoji",
	"hide_custom_emoji": "Hide custom emojis",
	"unpacked": "Unpacked emoji",
	"unicode": "Unicode emoji",
	"unicode_groups": {
	"activities": "Activities",
	"animals-and-nature": "Animals & Nature",
	"flags": "Flags",
	"food-and-drink": "Food & Drink",
	"objects": "Objects",
	"people-and-body": "People & Body",
	"smileys-and-emotion": "Smileys & Emotion",
	"symbols": "Symbols",
	"travel-and-places": "Travel & Places"
	},
	"load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
	"load_all": "Loading all {emojiAmount} emoji",
	"regional_indicator": "Regional indicator {letter}"
	},
	"errors": {
	"storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies."
	},
	"interactions": {
	"favs_repeats": "Repeats and favorites",
	"follows": "New follows",
	"emoji_reactions": "Emoji Reactions",
	"reports": "Reports",
	"moves": "User migrates",
	"load_older": "Load older interactions",
	"statuses": "Subscriptions"
	},
	"post_status": {
	"edit_status": "Edit status",
	"new_status": "Post new status",
	"reply_option": "Reply to this status",
	"quote_option": "Quote this status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"media_description": "Media description",
	"content_type": {
	"text/plain": "Plain text",
	"text/html": "HTML",
	"text/markdown": "Markdown",
	"text/bbcode": "BBCode"
	},
	"content_type_selection": "Post format",
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning_to_all": "This post will be visible to all the mentioned users.",
	"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
	"edit_remote_warning": "Other remote instances may not support editing and unable to receive the latest version of your post.",
	"edit_unsupported_warning": "Pleroma does not support editing mentions or polls.",
	"posting": "Posting",
	"post": "Post",
	"preview": "Preview",
	"preview_empty": "Empty",
	"empty_status_error": "Can't post an empty status with no files",
	"media_description_error": "Failed to update media, try again",
	"scope_notice": {
	"public": "This post will be visible to everyone",
	"private": "This post will be visible to your followers only",
	"unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
	},
	"scope_notice_dismiss": "Close this notice",
	"scope": {
	"direct": "Direct - post to mentioned users only",
	"private": "Followers-only - post to followers only",
	"public": "Public - post to public timelines",
	"unlisted": "Unlisted - do not post to public timelines"
	}
	},
	"registration": {
	"bio_optional": "Bio (optional)",
	"email": "Email",
	"email_optional": "Email (optional)",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"username_placeholder": "e.g. lain",
	"fullname_placeholder": "e.g. Lain Iwakura",
	"bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
	"reason": "Reason to register",
	"reason_placeholder": "This instance approves registrations manually.\nLet the administration know why you want to register.",
	"register": "Register",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password",
	"birthday_required": "cannot be left blank",
	"birthday_min_age": "must be on or before {date}"
	},
	"email_language": "In which language do you want to receive emails from the server?",
	"birthday": "Birthday:",
	"birthday_optional": "Birthday (optional):"
	},
	"remote_user_resolver": {
	"remote_user_resolver": "Remote user resolver",
	"searching_for": "Searching for",
	"error": "Not found."
	},
	"report": {
	"reporter": "Reporter:",
	"reported_user": "Reported user:",
	"reported_statuses": "Reported statuses:",
	"notes": "Notes:",
	"state": "State:",
	"state_open": "Open",
	"state_closed": "Closed",
	"state_resolved": "Resolved"
	},
	"selectable_list": {
	"select_all": "Select all"
	},
	"settings": {
	"add_language": "Add fallback language",
	"remove_language": "Remove",
	"primary_language": "Primary language:",
	"fallback_language": "Fallback language {index}:",
	"actor_type": "This account is:",
	"actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
	"actor_type_Person": "a normal user",
	"actor_type_Service": "a bot",
	"actor_type_Group": "a group",
	"app_name": "App name",
	"expert_mode": "Show advanced",
	"save": "Save changes",
	"security": "Security",
	"setting_changed": "Setting is different from default",
	"setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
	"enter_current_password_to_confirm": "Enter your current password to confirm your identity",
	"post_look_feel": "Posts Look & Feel",
	"mention_links": "Mention links",
	"appearance": "Appearance",
	"confirm_new_setting": "Confirm new setting?",
	"confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
	"revert": "Revert",
	"confirm": "Confirm",
	"text_size": "Text and interface size",
	"text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
	"text_size_tip2": "Values other than {0} might break some things and themes",
	"emoji_size": "Emoji size",
	"navbar_size": "Top bar size",
	"panel_header_size": "Panel header size",
	"visual_tweaks": "Minor visual tweaks",
	"theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
	"scale_and_layout": "Interface scale and layout",
	"mfa": {
	"otp": "OTP",
	"setup_otp": "Setup OTP",
	"wait_pre_setup_otp": "presetting OTP",
	"confirm_and_enable": "Confirm & enable OTP",
	"title": "Two-factor Authentication",
	"generate_new_recovery_codes": "Generate new recovery codes",
	"warning_of_generate_new_codes": "When you generate new recovery codes, your old codes won’t work anymore.",
	"recovery_codes": "Recovery codes.",
	"waiting_a_recovery_codes": "Receiving backup codes…",
	"recovery_codes_warning": "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
	"authentication_methods": "Authentication methods",
	"scan": {
	"title": "Scan",
	"desc": "Using your two-factor app, scan this QR code or enter text key:",
	"secret_code": "Key"
	},
	"verify": {
	"desc": "To enable two-factor authentication, enter the code from your two-factor app:"
	}
	},
	"units": {
	"time": {
	"m": "minutes",
	"s": "seconds",
	"h": "hours",
	"d": "days"
	}
	},
	"lists_navigation": "Show lists in navigation",
	"allow_following_move": "Allow auto-follow when following account moves",
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"email_language": "Language for receiving emails from the server",
	"block_export": "Block export",
	"block_export_button": "Export your blocks to a csv file",
	"block_import": "Block import",
	"block_import_error": "Error importing blocks",
	"blocks_imported": "Blocks imported! Processing them will take a while.",
	"mute_export": "Mute export",
	"mute_export_button": "Export your mutes to a csv file",
	"mute_import": "Mute import",
	"mute_import_error": "Error importing mutes",
	"mutes_imported": "Mutes imported! Processing them will take a while.",
	"import_mutes_from_a_csv_file": "Import mutes from a csv file",
	"account_backup": "Account backup",
	"account_backup_description": "This allows you to download an archive of your account information and your posts, but they cannot yet be imported into a Pleroma account.",
	"account_backup_table_head": "Backup",
	"download_backup": "Download",
	"backup_not_ready": "This backup is not ready yet.",
	"backup_running": "This backup is in progress, processed {number} record. \| This backup is in progress, processed {number} records.",
	"backup_failed": "This backup has failed.",
	"remove_backup": "Remove",
	"list_backups_error": "Error fetching backup list: {error}",
	"add_backup": "Create a new backup",
	"added_backup": "Added a new backup.",
	"add_backup_error": "Error adding a new backup: {error}",
	"blocks_tab": "Blocks",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_email": "Change email",
	"change_email_error": "There was an issue changing your email.",
	"changed_email": "Email changed successfully!",
	"change_password": "Change password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"chatMessageRadius": "Chat message",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_password": "Current password",
	"confirm_dialogs": "Ask for confirmation when",
	"confirm_dialogs_repeat": "repeating a status",
	"confirm_dialogs_unfollow": "unfollowing a user",
	"confirm_dialogs_block": "blocking a user",
	"confirm_dialogs_mute": "muting a user",
	"confirm_dialogs_delete": "deleting a status",
	"confirm_dialogs_logout": "logging out",
	"confirm_dialogs_approve_follow": "approving a follower",
	"confirm_dialogs_deny_follow": "denying a follower",
	"confirm_dialogs_remove_follower": "removing a follower",
	"mutes_and_blocks": "Mutes and Blocks",
	"data_import_export_tab": "Data import / export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete account",
	"delete_account_description": "Permanently delete your data and deactivate your account.",
	"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
	"delete_account_instructions": "Type your password in the input below to confirm account deletion.",
	"account_alias": "Account aliases",
	"account_alias_table_head": "Alias",
	"list_aliases_error": "Error fetching aliases: {error}",
	"hide_list_aliases_error_action": "Close",
	"remove_alias": "Remove this alias",
	"new_alias_target": "Add a new alias (e.g. {example})",
	"added_alias": "Alias is added.",
	"add_alias_error": "Error adding alias: {error}",
	"move_account": "Move account",
	"move_account_notes": "If you want to move the account somewhere else, you must go to your target account and add an alias pointing here.",
	"move_account_target": "Target account (e.g. {example})",
	"moved_account": "Account is moved.",
	"move_account_error": "Error moving account: {error}",
	"discoverable": "Allow discovery of this account in search results and other services",
	"domain_mutes": "Domains",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"pad_emoji": "Pad emoji with spaces when adding from picker",
	"autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
	"emoji_reactions_on_timeline": "Show emoji reactions on timeline",
	"emoji_reactions_scale": "Reactions scale factor",
	"absolute_time_format": "Use absolute time format",
	"absolute_time_format_min_age": "Only use for time older than this amount of time",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"wordfilter": "Wordfilter",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"word_filter_and_more": "Word filter and more...",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"accent": "Accent",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_media_previews": "Hide media previews",
	"hide_muted_posts": "Hide posts of muted users",
	"mute_bot_posts": "Mute bot posts",
	"hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
	"hide_scrobbles": "Hide scrobbles",
	"hide_scrobbles_after": "Hide scrobbles older than",
	"mute_sensitive_posts": "Mute sensitive posts",
	"hide_all_muted_posts": "Hide muted posts",
	"max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
	"hide_isp": "Hide instance-specific panel",
	"hide_shoutbox": "Hide instance shoutbox",
	"right_sidebar": "Reverse order of columns",
	"navbar_column_stretch": "Stretch navbar to columns width",
	"always_show_post_button": "Always show floating New Post button",
	"hide_wallpaper": "Hide instance wallpaper",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"hide_filtered_statuses": "Hide all filtered posts",
	"hide_wordfiltered_statuses": "Hide word-filtered statuses",
	"hide_muted_threads": "Hide muted threads",
	"import_blocks_from_a_csv_file": "Import blocks from a csv file",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"mutes_tab": "Mutes",
	"play_videos_in_modal": "Play videos in a popup frame",
	"url": "URL",
	"preview": "Preview",
	"file_export_import": {
	"backup_restore": "Settings backup",
	"backup_settings": "Backup settings to file",
	"backup_settings_theme": "Backup settings and theme to file",
	"restore_settings": "Restore settings from file",
	"errors": {
	"invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
	"file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
	"file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
	"file_slightly_new": "File minor version is different, some settings might not load"
	}
	},
	"profile_fields": {
	"label": "Profile metadata",
	"add_field": "Add field",
	"name": "Label",
	"value": "Content"
	},
	"birthday": {
	"label": "Birthday",
	"show_birthday": "Show my birthday"
	},
	"account_privacy": "Privacy",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & bio",
	"new_email": "New email",
	"new_password": "New password",
	"posts": "Posts",
	"user_profiles": "User Profiles",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_in_column": "Show in notifications column/drawer",
	"notification_visibility_native_notifications": "Show a native notification",
	"notification_visibility_follows": "Follows",
	"notification_visibility_follow_requests": "Follow requests",
	"notification_visibility_likes": "Favorites",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"notification_visibility_reports": "Reports",
	"notification_visibility_moves": "User Migrates",
	"notification_visibility_emoji_reactions": "Reactions",
	"notification_visibility_polls": "Ends of polls you voted in",
	"notification_visibility_statuses": "Subscriptions",
	"notification_show_extra": "Show extra notifications in the notifications column",
	"notification_extra_chats": "Show unread chats",
	"notification_extra_announcements": "Show unread announcements",
	"notification_extra_follow_requests": "Show new follow requests",
	"notification_extra_tip": "Show the customization tip for extra notifications",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"no_blocks": "No blocks",
	"no_mutes": "No mutes",
	"hide_favorites_description": "Don't show list of my favorites (people still get notified)",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"hide_follows_count_description": "Don't show follow count",
	"hide_followers_count_description": "Don't show follower count",
	"show_admin_badge": "Show \"Admin\" badge in my profile",
	"show_moderator_badge": "Show \"Moderator\" badge in my profile",
	"nsfw_clickthrough": "Hide sensitive/NSFW media",
	"oauth_tokens": "OAuth tokens",
	"token": "Token",
	"refresh_token": "Refresh token",
	"valid_until": "Valid until",
	"revoke_token": "Revoke",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile background",
	"profile_banner": "Profile banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"reply_visibility_following_short": "Show replies to my follows",
	"reply_visibility_self_short": "Show replies to self only",
	"autohide_floating_post_button": "Automatically hide New Post button (mobile)",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"search_user_to_block": "Search whom you want to block",
	"search_user_to_mute": "Search whom you want to mute",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"minimal_scopes_mode": "Minimize post scope selection options",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"reset_avatar": "Reset avatar",
	"reset_profile_background": "Reset profile background",
	"reset_profile_banner": "Reset profile banner",
	"reset_avatar_confirm": "Do you really want to reset the avatar?",
	"reset_banner_confirm": "Do you really want to reset the banner?",
	"reset_background_confirm": "Do you really want to reset the background?",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	"force_theme_recompilation_debug": "Disable theme cahe, force recompile on each boot (DEBUG)",
	"conversation_display": "Conversation display style",
	"conversation_display_tree": "Tree-style",
	"conversation_display_tree_quick": "Tree view",
	"disable_sticky_headers": "Don't stick column headers to top of the screen",
	"show_scrollbars": "Show side column's scrollbars",
	"third_column_mode": "When there's enough space, show third column containing",
	"third_column_mode_none": "Don't show third column at all",
	"third_column_mode_notifications": "Notifications column",
	"third_column_mode_postform": "Main post form and navigation",
	"columns": "Columns",
	"column_sizes": "Column sizes",
	"column_sizes_sidebar": "Sidebar",
	"column_sizes_content": "Content",
	"column_sizes_notifs": "Notifications",
	"tree_advanced": "Allow more flexible navigation in tree view",
	"tree_fade_ancestors": "Display ancestors of the current status in faint text",
	"conversation_display_linear": "Linear-style",
	"conversation_display_linear_quick": "Linear view",
	"conversation_other_replies_button": "Show the \"other replies\" button",
	"conversation_other_replies_button_below": "Below statuses",
	"conversation_other_replies_button_inside": "Inside statuses",
	"max_depth_in_thread": "Maximum number of levels in thread to display by default",
	"post_status_content_type": "Post status content type",
	"sensitive_by_default": "Mark posts as sensitive by default",
	"stop_gifs": "Pause animated images until you hover on them",
	"streaming": "Automatically show new posts when scrolled to the top",
	"auto_update": "Show new posts automatically",
	"user_mutes": "Users",
	"useStreamingApi": "Receive posts and notifications real-time",
	"use_websockets": "Use websockets (Realtime updates)",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"type_domains_to_mute": "Search domains to mute",
	"upload_a_photo": "Upload a photo",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"virtual_scrolling": "Optimize timeline rendering",
	"use_at_icon": "Display {'@'} symbol as an icon instead of text",
	"mention_link_display": "Display mention links",
	"mention_link_display_short": "always as short names (e.g. {'@'}foo)",
	"mention_link_display_full_for_remote": "as full names only for remote users (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_display_full": "always as full names (e.g. {'@'}foo{'@'}example.org)",
	"mention_link_use_tooltip": "Show user card when clicking mention links",
	"mention_link_show_avatar": "Show user avatar beside the link",
	"mention_link_show_avatar_quick": "Show user avatar next to mentions",
	"mention_link_fade_domain": "Fade domains (e.g. {'@'}example.org in {'@'}foo{'@'}example.org)",
	"mention_link_bolden_you": "Highlight mention of you when you are mentioned",
	"user_popover_avatar_action": "Popover avatar click action",
	"user_popover_avatar_action_zoom": "Zoom the avatar",
	"user_popover_avatar_action_close": "Close the popover",
	"user_popover_avatar_action_open": "Open profile",
	"user_popover_avatar_overlay": "Show user popover over user avatar",
	"fun": "Fun",
	"greentext": "Meme arrows",
	"show_yous": "Show (You)s",
	"notifications": "Notifications",
	"notification_setting_annoyance": "Annoyance",
	"notification_setting_drawer_marks_as_seen": "Closing drawer (mobile) marks all notifications as read",
	"notification_setting_ignore_inactionable_seen": "Ignore read state of inactionable notifications (likes, repeats etc)",
	"notification_setting_ignore_inactionable_seen_tip": "This will not actually mark those notifications as read, and you'll still get desktop notifications about them if you chose so",
	"notification_setting_unseen_at_top": "Show unread notifications above others",
	"notification_setting_filters": "Filters",
	"notification_setting_filters_chrome_push": "On some browsers (chrome) it might be impossible to completely filter out notifications by type when they arrive by Push",
	"notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
	"notification_setting_privacy": "Privacy",
	"notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
	"notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
	"notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
	"enable_web_push_notifications": "Enable web push notifications",
	"enable_web_push_always_show": "Always show web push notifications",
	"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
	"more_settings": "More settings",
	"style": {
	"custom_theme_used": "(Custom theme)",
	"themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
	"appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
	"update_preview": "Update preview",
	"themes3": {
	"define": "Override",
	"editor": {
	"title": "Style",
	"new_style": "New",
	"load_style": "Open",
	"save_style": "Save",
	"style_name": "Stylesheet name",
	"style_author": "Made by",
	"style_license": "License",
	"style_website": "Website"
	},
	"hacks": {
	"underlay_overrides": "Change underlay",
	"underlay_override_mode_none": "Theme default",
	"underlay_override_mode_opaque": "Replace with solid color",
	"underlay_override_mode_transparent": "Remove entirely (might break some themes)",
	"force_interface_roundness": "Override interface roundness/sharpness",
	"forced_roundness_mode_disabled": "Use theme defaults",
	"forced_roundness_mode_sharp": "Force sharp edges",
	"forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
	"forced_roundness_mode_round": "Force round edges"
	},
	"font": {
	"group-builtin": "Browser default fonts",
	"builtin" : {
	"serif": "Serif",
	"sans-serif": "Sans-serif",
	"monospace": "Monospace",
	"inherit": "Unchanged"
	},
	"group-local": "Locally installed fonts",
	"local-unavailable1": "List of locally installed fonts unavailalbe",
	"local-unavailable2": "Use manual entry to specify custom font",
	"font_list_unavailable": "Couldn't get locally installed fonts: {error}",
	"lookup_local_fonts": "Load list of fonts installed on this computer",
	"enter_manually": "Enter font name family manually",
	"entry": "Enter {fontFamily}",
	"select": "Select font"
	}
	},
	"interface_font_user_override": "Override theme/browser font used",
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity",
	"load_theme": "Load theme",
	"keep_as_is": "Keep as is",
	"use_snapshot": "Old version",
	"use_source": "New version",
	"help": {
	"upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
	"v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
	"future_version_imported": "File you imported was made in newer version of FE.",
	"older_version_imported": "File you imported was made in older version of FE.",
	"snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
	"snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
	"fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
	"fe_downgraded": "PleromaFE's version rolled back.",
	"migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
	"migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
	"snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
	}
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"alert_warning": "Warning",
	"alert_neutral": "Neutral",
	"post": "Posts/User bios",
	"badge": "Badge background",
	"popover": "Tooltips, menus, popovers",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text",
	"underlay": "Underlay",
	"wallpaper": "Wallpaper",
	"poll": "Poll graph",
	"icons": "Icons",
	"highlight": "Highlighted elements",
	"pressed": "Pressed",
	"selectedPost": "Selected post",
	"selectedMenu": "Selected menu item",
	"disabled": "Disabled",
	"toggled": "Toggled",
	"tabs": "Tabs",
	"chat": {
	"incoming": "Incoming",
	"outgoing": "Outgoing",
	"border": "Border"
	}
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	+ "offset": "Shadow offset",
	+ "light_grid": "Use light checkerboard",
	+ "name": "Name",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hintV3": "For shadows you can also use the {0} notation to use other color slot.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	+ "avatar_inset_short": "Separate inset shadow",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"monospace": "Monospaced text"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	},
	"version": {
	"title": "Version",
	"backend_version": "Backend version",
	"frontend_version": "Frontend version"
	},
	"commit_value": "Save",
	"commit_value_tooltip": "Value is not saved, press this button to commit your changes",
	"reset_value": "Reset",
	"reset_value_tooltip": "Reset draft",
	"hard_reset_value": "Hard reset",
	"hard_reset_value_tooltip": "Remove setting from storage, forcing use of default value"
	},
	"admin_dash": {
	"window_title": "Administration",
	"wip_notice": "This admin dashboard is experimental and WIP, {adminFeLink}.",
	"old_ui_link": "old admin UI available here",
	"reset_all": "Reset all",
	"commit_all": "Save all",
	"tabs": {
	"nodb": "No DB Config",
	"instance": "Instance",
	"limits": "Limits",
	"frontends": "Front-ends",
	"emoji": "Emoji"
	},
	"nodb": {
	"heading": "Database config is disabled",
	"text": "You need to change backend config files so that {property} is set to {value}, see more in {documentation}.",
	"documentation": "documentation",
	"text2": "Most configuration options will be unavailable."
	},
	"captcha": {
	"native": "Native",
	"kocaptcha": "KoCaptcha"
	},
	"instance": {
	"instance": "Instance information",
	"registrations": "User sign-ups",
	"captcha_header": "CAPTCHA",
	"kocaptcha": "KoCaptcha settings",
	"access": "Instance access",
	"restrict": {
	"header": "Restrict access for anonymous visitors",
	"description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
	"timelines": "Timelines access",
	"profiles": "User profiles access",
	"activities": "Statuses/activities access"
	}
	},
	"limits": {
	"arbitrary_limits": "Arbitrary limits",
	"posts": "Post limits",
	"uploads": "Attachments limits",
	"users": "User profile limits",
	"profile_fields": "Profile fields limits",
	"user_uploads": "Profile media limits"
	},
	"frontend": {
	"repository": "Repository link",
	"versions": "Available versions",
	"build_url": "Build URL",
	"reinstall": "Reinstall",
	"is_default": "(Default)",
	"is_default_custom": "(Default, version: {version})",
	"install": "Install",
	"install_version": "Install version {version}",
	"more_install_options": "More install options",
	"more_default_options": "More default setting options",
	"set_default": "Set default",
	"set_default_version": "Set version {version} as default",
	"wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
	"default_frontend": "Default frontend",
	"default_frontend_tip": "Default frontend will be shown to all users. Currently there's no way to for a user to select personal frontend. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
	"default_frontend_unavail": "Default frontend settings are not available, as this requires configuration in the database",
	"available_frontends": "Available for install",
	"failure_installing_frontend": "Failed to install frontend {version}: {reason}",
	"success_installing_frontend": "Frontend {version} successfully installed"
	},
	"emoji": {
	"global_actions": "Global actions",
	"reload": "Reload emoji",
	"importFS": "Import emoji from filesystem",
	"error": "Error: {0}",
	"create_pack": "Create pack",
	"delete_pack": "Delete pack",
	"new_pack_name": "New pack name",
	"create": "Create",
	"emoji_packs": "Emoji packs",
	"remote_packs": "Remote packs",
	"do_list": "List",
	"remote_pack_instance": "Remote pack instance",
	"emoji_pack": "Emoji pack",
	"edit_pack": "Edit pack",
	"description": "Description",
	"homepage": "Homepage",
	"fallback_src": "Fallback source",
	"fallback_sha256": "Fallback SHA256",
	"share": "Share",
	"save": "Save",
	"save_meta": "Save metadata",
	"revert_meta": "Revert metadata",
	"delete": "Delete",
	"revert": "Revert",
	"add_file": "Add file",
	"adding_new": "Adding new emoji",
	"shortcode": "Shortcode",
	"filename": "Filename",
	"new_shortcode": "Shortcode, leave blank to infer",
	"new_filename": "Filename, leave blank to infer",
	"delete_confirm": "Are you sure you want to delete {0}?",
	"download_pack": "Download pack",
	"downloading_pack": "Downloading {0}",
	"download": "Download",
	"download_as_name": "New name",
	"download_as_name_full": "New name, leave blank to reuse",
	"files": "Files",
	"editing": "Editing {0}",
	"delete_title": "Delete?",
	"metadata_changed": "Metadata different from saved",
	"emoji_changed": "Unsaved emoji file changes, check highlighted emoji",
	"replace_warning": "This will REPLACE the local pack of the same name"
	},
	"temp_overrides": {
	":pleroma": {
	":instance": {
	":public": {
	"label": "Instance is public",
	"description": "Disabling this will make all API accessible only for logged-in users, this will make Public and Federated timelines inaccessible to anonymous visitors."
	},
	":limit_to_local_content": {
	"label": "Limit search to local content",
	"description": "Disables global network search for unauthenticated (default), all users or none"
	},
	":description_limit": {
	"label": "Limit",
	"description": "Character limit for attachment descriptions"
	},
	":background_image": {
	"label": "Background image",
	"description": "Background image (primarily used by PleromaFE)"
	}
	}
	}
	}
	},
	"time": {
	"unit": {
	"days": "{0} day \| {0} days",
	"days_short": "{0}d",
	"hours": "{0} hour \| {0} hours",
	"hours_short": "{0}h",
	"minutes": "{0} minute \| {0} minutes",
	"minutes_short": "{0}min",
	"months": "{0} month \| {0} months",
	"months_short": "{0}mo",
	"seconds": "{0} second \| {0} seconds",
	"seconds_short": "{0}s",
	"weeks": "{0} week \| {0} weeks",
	"weeks_short": "{0}w",
	"years": "{0} year \| {0} years",
	"years_short": "{0}y"
	},
	"in_future": "in {0}",
	"in_past": "{0} ago",
	"now": "just now",
	"now_short": "now"
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error": "Error fetching timeline: {0}",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"reload": "Reload",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses",
	"no_statuses": "No statuses",
	"socket_reconnected": "Realtime connection established",
	"socket_broke": "Realtime connection lost: CloseEvent code {0}",
	"quick_view_settings": "Quick view settings",
	"quick_filter_settings": "Quick filter settings"
	},
	"status": {
	"favorites": "Favorites",
	"repeats": "Repeats",
	"quotes": "Quotes",
	"repeat_confirm": "Do you really want to repeat this status?",
	"repeat_confirm_title": "Repeat confirmation",
	"repeat_confirm_accept_button": "Repeat",
	"repeat_confirm_cancel_button": "Do not repeat",
	"delete": "Delete status",
	"delete_error": "Error deleting status: {0}",
	"edit": "Edit status",
	"edited_at": "(last edited {time})",
	"pin": "Pin on profile",
	"unpin": "Unpin from profile",
	"pinned": "Pinned",
	"bookmark": "Bookmark",
	"unbookmark": "Unbookmark",
	"delete_confirm": "Do you really want to delete this status?",
	"delete_confirm_title": "Delete confirmation",
	"delete_confirm_accept_button": "Delete",
	"delete_confirm_cancel_button": "Keep",
	"reply_to": "Reply to",
	"mentions": "Mentions",
	"replies_list": "Replies:",
	"replies_list_with_others": "Replies (+{numReplies} other): \| Replies (+{numReplies} others):",
	"mute_conversation": "Mute conversation",
	"unmute_conversation": "Unmute conversation",
	"status_unavailable": "Status unavailable",
	"copy_link": "Copy link to status",
	"external_source": "External source",
	"thread_muted": "Thread muted",
	"thread_muted_and_words": ", has words:",
	"sensitive_muted": "Muting sensitive content",
	"show_full_subject": "Show full subject",
	"hide_full_subject": "Hide full subject",
	"show_content": "Show content",
	"hide_content": "Hide content",
	"status_deleted": "This post was deleted",
	"nsfw": "NSFW",
	"expand": "Expand",
	"you": "(You)",
	"plus_more": "+{number} more",
	"many_attachments": "Post has {number} attachment(s)",
	"collapse_attachments": "Collapse attachments",
	"show_all_attachments": "Show all attachments",
	"show_attachment_in_modal": "Show in media modal",
	"show_attachment_description": "Preview description (open attachment for full description)",
	"hide_attachment": "Hide attachment",
	"remove_attachment": "Remove attachment",
	"attachment_stop_flash": "Stop Flash player",
	"move_up": "Shift attachment left",
	"move_down": "Shift attachment right",
	"open_gallery": "Open gallery",
	"thread_hide": "Hide this thread",
	"thread_show": "Show this thread",
	"thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) \| Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
	"thread_show_full_with_icon": "{icon} {text}",
	"thread_follow": "See the remaining part of this thread ({numStatus} status in total) \| See the remaining part of this thread ({numStatus} statuses in total)",
	"thread_follow_with_icon": "{icon} {text}",
	"ancestor_follow": "See {numReplies} other reply under this status \| See {numReplies} other replies under this status",
	"ancestor_follow_with_icon": "{icon} {text}",
	"show_all_conversation_with_icon": "{icon} {text}",
	"show_all_conversation": "Show full conversation ({numStatus} other status) \| Show full conversation ({numStatus} other statuses)",
	"show_only_conversation_under_this": "Only show replies to this status",
	"status_history": "Status history",
	"reaction_count_label": "{num} person reacted \| {num} people reacted",
	"hide_quote": "Hide the quoted status",
	"display_quote": "Display the quoted status",
	"invisible_quote": "Quoted status unavailable: {link}",
	"more_actions": "More actions on this status",
	"loading": "Loading...",
	"load_error": "Unable to load status: {error}"
	},
	"user_card": {
	"approve": "Approve",
	"approve_confirm_title": "Approve confirmation",
	"approve_confirm_accept_button": "Approve",
	"approve_confirm_cancel_button": "Do not approve",
	"approve_confirm": "Do you want to approve {user}'s follow request?",
	"block": "Block",
	"blocked": "Blocked!",
	"block_confirm_title": "Block confirmation",
	"block_confirm": "Do you really want to block {user}?",
	"block_confirm_accept_button": "Block",
	"block_confirm_cancel_button": "Do not block",
	"deactivated": "Deactivated",
	"deny": "Deny",
	"deny_confirm_title": "Deny confirmation",
	"deny_confirm_accept_button": "Deny",
	"deny_confirm_cancel_button": "Do not deny",
	"deny_confirm": "Do you want to deny {user}'s follow request?",
	"edit_profile": "Edit profile",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_cancel": "Cancel request",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_unfollow": "Unfollow",
	"unfollow_confirm_title": "Unfollow confirmation",
	"unfollow_confirm": "Do you really want to unfollow {user}?",
	"unfollow_confirm_accept_button": "Unfollow",
	"unfollow_confirm_cancel_button": "Do not unfollow",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"hidden": "Hidden",
	"its_you": "It's you!",
	"media": "Media",
	"mention": "Mention",
	"message": "Message",
	"mute": "Mute",
	"muted": "Muted",
	"mute_confirm_title": "Mute confirmation",
	"mute_confirm": "Do you really want to mute {user}?",
	"mute_confirm_accept_button": "Mute",
	"mute_confirm_cancel_button": "Do not mute",
	"mute_duration_prompt": "Mute this user for (0 for indefinite time):",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"remove_follower": "Remove follower",
	"remove_follower_confirm_title": "Remove follower confirmation",
	"remove_follower_confirm_accept_button": "Remove",
	"remove_follower_confirm_cancel_button": "Keep",
	"remove_follower_confirm": "Do you really want to remove {user} from your followers?",
	"report": "Report",
	"statuses": "Statuses",
	"subscribe": "Subscribe",
	"unsubscribe": "Unsubscribe",
	"unblock": "Unblock",
	"unblock_progress": "Unblocking…",
	"block_progress": "Blocking…",
	"unmute": "Unmute",
	"unmute_progress": "Unmuting…",
	"mute_progress": "Muting…",
	"hide_repeats": "Hide repeats",
	"show_repeats": "Show repeats",
	"bot": "Bot",
	"group": "Group",
	"birthday": "Born {birthday}",
	"admin_menu": {
	"moderation": "Moderation",
	"grant_admin": "Grant Admin",
	"revoke_admin": "Revoke Admin",
	"grant_moderator": "Grant Moderator",
	"revoke_moderator": "Revoke Moderator",
	"activate_account": "Activate account",
	"deactivate_account": "Deactivate account",
	"delete_account": "Delete account",
	"force_nsfw": "Mark all posts as NSFW",
	"strip_media": "Remove media from posts",
	"force_unlisted": "Force posts to be unlisted",
	"sandbox": "Force posts to be followers-only",
	"disable_remote_subscription": "Disallow following user from remote instances",
	"disable_any_subscription": "Disallow following user at all",
	"quarantine": "Disallow user posts from federating",
	"delete_user": "Delete user",
	"delete_user_data_and_deactivate_confirmation": "This will permanently delete the data from this account and deactivate it. Are you absolutely sure?"
	},
	"highlight": {
	"disabled": "No highlight",
	"solid": "Solid bg",
	"striped": "Striped bg",
	"side": "Side stripe"
	},
	"note": "Note",
	"note_blank": "(None)",
	"edit_note": "Edit note",
	"edit_note_apply": "Apply",
	"edit_note_cancel": "Cancel"
	},
	"user_profile": {
	"timeline_title": "User timeline",
	"profile_does_not_exist": "Sorry, this profile does not exist.",
	"profile_loading_error": "Sorry, there was an error loading this profile."
	},
	"user_reporting": {
	"title": "Reporting {0}",
	"add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
	"additional_comments": "Additional comments",
	"forward_description": "The account is from another server. Send a copy of the report there as well?",
	"forward_to": "Forward to {0}",
	"submit": "Submit",
	"generic_error": "An error occurred while processing your request."
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"add_reaction": "Add Reaction",
	"user_settings": "User Settings",
	"accept_follow_request": "Accept follow request",
	"reject_follow_request": "Reject follow request",
	"bookmark": "Bookmark",
	"toggle_expand": "Expand or collapse notification to show post in full",
	"toggle_mute": "Expand or collapse notification to reveal muted content",
	"autocomplete_available": "{number} result is available. Use up and down keys to navigate through them. \| {number} results are available. Use up and down keys to navigate through them."
	},
	"upload": {
	"error": {
	"base": "Upload failed.",
	"message": "Upload failed: {0}",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	},
	"search": {
	"people": "People",
	"hashtags": "Hashtags",
	"person_talking": "{count} person talking",
	"people_talking": "{count} people talking",
	"no_results": "No results",
	"no_more_results": "No more results",
	"load_more": "Load more results"
	},
	"password_reset": {
	"forgot_password": "Forgot password?",
	"password_reset": "Password reset",
	"instruction": "Enter your email address or username. We will send you a link to reset your password.",
	"placeholder": "Your email or username",
	"check_email": "Check your email for a link to reset your password.",
	"return_home": "Return to the home page",
	"too_many_requests": "You have reached the limit of attempts, try again later.",
	"password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
	"password_reset_required": "You must reset your password to log in.",
	"password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
	},
	"chats": {
	"you": "You:",
	"message_user": "Message {nickname}",
	"delete": "Delete",
	"chats": "Chats",
	"new": "New Chat",
	"empty_message_error": "Cannot post empty message",
	"more": "More",
	"delete_confirm": "Do you really want to delete this message?",
	"error_loading_chat": "Something went wrong when loading the chat.",
	"error_sending_message": "Something went wrong when sending the message.",
	"empty_chat_list_placeholder": "You don't have any chats yet. Start a new chat!"
	},
	"lists": {
	"lists": "Lists",
	"new": "New List",
	"title": "List title",
	"search": "Search users",
	"create": "Create",
	"save": "Save changes",
	"delete": "Delete list",
	"following_only": "Limit to Following",
	"manage_lists": "Manage lists",
	"manage_members": "Manage list members",
	"add_members": "Search for more users",
	"remove_from_list": "Remove from list",
	"add_to_list": "Add to list",
	"is_in_list": "Already in list",
	"editing_list": "Editing list {listTitle}",
	"creating_list": "Creating new list",
	"update_title": "Save Title",
	"really_delete": "Really delete list?",
	"error": "Error manipulating lists: {0}"
	},
	"file_type": {
	"audio": "Audio",
	"video": "Video",
	"image": "Image",
	"file": "File"
	},
	"display_date": {
	"today": "Today"
	},
	"update": {
	"big_update_title": "Please bear with us",
	"big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
	"update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
	"update_bugs_gitlab": "Pleroma GitLab",
	"update_changelog": "For more details on what's changed, see {theFullChangelog}.",
	"update_changelog_here": "the full changelog",
	"art_by": "Art by {linkToArtist}"
	},
	"unicode_domain_indicator": {
	"tooltip": "This domain contains non-ascii characters."
	}
	}
	diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
	index 2dddfa0460..ef7ec645e3 100644
	--- a/src/services/theme_data/theme_data.service.js
	+++ b/src/services/theme_data/theme_data.service.js
	@@ -1,752 +1,752 @@
	import { convert, brightness, contrastRatio } from 'chromatism'
	import { rgb2hex, rgba2css, alphaBlendLayers, getTextColor, relativeLuminance, getCssColor } from '../color_convert/color_convert.js'
	import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'

	/*
	* # What's all this?
	* Here be theme engine for pleromafe. All of this supposed to ease look
	* and feel customization, making widget styles and make developer's life
	* easier when it comes to supporting themes. Like many other theme systems
	* it operates on color definitions, or "slots" - for example you define
	* "button" color slot and then in UI component Button's CSS you refer to
	* it as a CSS3 Variable.
	*
	* Some applications allow you to customize colors for certain things.
	* Some UI toolkits allow you to define colors for each type of widget.
	* Most of them are pretty barebones and have no assistance for common
	* problems and cases, and in general themes themselves are very hard to
	* maintain in all aspects. This theme engine tries to solve all of the
	* common problems with themes.
	*
	* You don't have redefine several similar colors if you just want to
	* change one color - all color slots are derived from other ones, so you
	* can have at least one or two "basic" colors defined and have all other
	* components inherit and modify basic ones.
	*
	* You don't have to test contrast ratio for colors or pick text color for
	* each element even if you have light-on-dark elements in dark-on-light
	* theme.
	*
	* You don't have to maintain order of code for inheriting slots from othet
	* slots - dependency graph resolving does it for you.
	*/

	/* This indicates that this version of code outputs similar theme data and
	* should be incremented if output changes - for instance if getTextColor
	* function changes and older themes no longer render text colors as
	* author intended previously.
	*/
	export const CURRENT_VERSION = 3

	export const getLayersArray = (layer, data = LAYERS) => {
	const array = [layer]
	let parent = data[layer]
	while (parent) {
	array.unshift(parent)
	parent = data[parent]
	}
	return array
	}

	export const getLayers = (layer, variant = layer, opacitySlot, colors, opacity) => {
	return getLayersArray(layer).map((currentLayer) => ([
	currentLayer === layer
	? colors[variant]
	: colors[currentLayer],
	currentLayer === layer
	? opacity[opacitySlot] \|\| 1
	: opacity[currentLayer]
	]))
	}

	const getDependencies = (key, inheritance) => {
	const data = inheritance[key]
	if (typeof data === 'string' && data.startsWith('--')) {
	return [data.substring(2)]
	} else {
	if (data === null) return []
	const { depends, layer, variant } = data
	const layerDeps = layer
	? getLayersArray(layer).map(currentLayer => {
	return currentLayer === layer
	? variant \|\| layer
	: currentLayer
	})
	: []
	if (Array.isArray(depends)) {
	return [...depends, ...layerDeps]
	} else {
	return [...layerDeps]
	}
	}
	}

	/**
	* Sorts inheritance object topologically - dependant slots come after
	* dependencies
	*
	* @property {Object} inheritance - object defining the nodes
	* @property {Function} getDeps - function that returns dependencies for
	* given value and inheritance object.
	* @returns {String[]} keys of inheritance object, sorted in topological
	* order. Additionally, dependency-less nodes will always be first in line
	*/
	export const topoSort = (
	inheritance = SLOT_INHERITANCE,
	getDeps = getDependencies
	) => {
	// This is an implementation of https://en.wikipedia.org/wiki/Tarjan%27s_strongly_connected_components_algorithm

	const allKeys = Object.keys(inheritance)
	const whites = new Set(allKeys)
	const grays = new Set()
	const blacks = new Set()
	const unprocessed = [...allKeys]
	const output = []

	const step = (node) => {
	if (whites.has(node)) {
	// Make node "gray"
	whites.delete(node)
	grays.add(node)
	// Do step for each node connected to it (one way)
	getDeps(node, inheritance).forEach(step)
	// Make node "black"
	grays.delete(node)
	blacks.add(node)
	// Put it into the output list
	output.push(node)
	} else if (grays.has(node)) {
	output.push(node)
	} else if (blacks.has(node)) {
	// do nothing
	} else {
	throw new Error('Unintended condition in topoSort!')
	}
	}
	while (unprocessed.length > 0) {
	step(unprocessed.pop())
	}

	// The index thing is to make sorting stable on browsers
	// where Array.sort() isn't stable
	return output.map((data, index) => ({ data, index })).sort(({ data: a, index: ai }, { data: b, index: bi }) => {
	const depsA = getDeps(a, inheritance).length
	const depsB = getDeps(b, inheritance).length

	if (depsA === depsB \|\| (depsB !== 0 && depsA !== 0)) return ai - bi
	if (depsA === 0 && depsB !== 0) return -1
	if (depsB === 0 && depsA !== 0) return 1
	return 0 // failsafe, shouldn't happen?
	}).map(({ data }) => data)
	}

	const expandSlotValue = (value) => {
	if (typeof value === 'object') return value
	return {
	depends: value.startsWith('--') ? [value.substring(2)] : [],
	default: value.startsWith('#') ? value : undefined
	}
	}
	/**
	* retrieves opacity slot for given slot. This goes up the depenency graph
	* to find which parent has opacity slot defined for it.
	* TODO refactor this
	*/
	export const getOpacitySlot = (
	k,
	inheritance = SLOT_INHERITANCE,
	getDeps = getDependencies
	) => {
	const value = expandSlotValue(inheritance[k])
	if (value.opacity === null) return
	if (value.opacity) return value.opacity
	const findInheritedOpacity = (key, visited = [k]) => {
	const depSlot = getDeps(key, inheritance)[0]
	if (depSlot === undefined) return
	const dependency = inheritance[depSlot]
	if (dependency === undefined) return
	if (dependency.opacity \|\| dependency === null) {
	return dependency.opacity
	} else if (dependency.depends && visited.includes(depSlot)) {
	return findInheritedOpacity(depSlot, [...visited, depSlot])
	} else {
	return null
	}
	}
	if (value.depends) {
	return findInheritedOpacity(k)
	}
	}

	/**
	* retrieves layer slot for given slot. This goes up the depenency graph
	* to find which parent has opacity slot defined for it.
	* this is basically copypaste of getOpacitySlot except it checks if key is
	* in LAYERS
	* TODO refactor this
	*/
	export const getLayerSlot = (
	k,
	inheritance = SLOT_INHERITANCE,
	getDeps = getDependencies
	) => {
	const value = expandSlotValue(inheritance[k])
	if (LAYERS[k]) return k
	if (value.layer === null) return
	if (value.layer) return value.layer
	const findInheritedLayer = (key, visited = [k]) => {
	const depSlot = getDeps(key, inheritance)[0]
	if (depSlot === undefined) return
	const dependency = inheritance[depSlot]
	if (dependency === undefined) return
	if (dependency.layer \|\| dependency === null) {
	return dependency.layer
	} else if (dependency.depends) {
	return findInheritedLayer(dependency, [...visited, depSlot])
	} else {
	return null
	}
	}
	if (value.depends) {
	return findInheritedLayer(k)
	}
	}

	/**
	* topologically sorted SLOT_INHERITANCE
	*/
	export const SLOT_ORDERED = topoSort(
	Object.entries(SLOT_INHERITANCE)
	.sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) \|\| 0) - ((bV && bV.priority) \|\| 0))
	.reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
	)

	/**
	* All opacity slots used in color slots, their default values and affected
	* color slots.
	*/
	export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
	const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
	if (opacity) {
	return {
	...acc,
	[opacity]: {
	defaultValue: DEFAULT_OPACITY[opacity] \|\| 1,
	affectedSlots: [...((acc[opacity] && acc[opacity].affectedSlots) \|\| []), k]
	}
	}
	} else {
	return acc
	}
	}, {})

	/**
	* Handle dynamic color
	*/
	export const computeDynamicColor = (sourceColor, getColor, mod) => {
	if (typeof sourceColor !== 'string' \|\| !sourceColor.startsWith('--')) return sourceColor
	let targetColor = null
	// Color references other color
	const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
	const variableSlot = variable.substring(2)
	targetColor = getColor(variableSlot)
	if (modifier) {
	targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
	}
	return targetColor
	}

	/**
	* THE function you want to use. Takes provided colors and opacities
	* value and uses inheritance data to figure out color needed for the slot.
	*/
	export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
	const sourceColor = sourceColors[key]
	const value = expandSlotValue(SLOT_INHERITANCE[key])
	const deps = getDependencies(key, SLOT_INHERITANCE)
	const isTextColor = !!value.textColor
	const variant = value.variant \|\| value.layer

	let backgroundColor = null

	if (isTextColor) {
	backgroundColor = alphaBlendLayers(
	{ ...(colors[deps[0]] \|\| convert(sourceColors[key] \|\| '#FF00FF').rgb) },
	getLayers(
	getLayerSlot(key) \|\| 'bg',
	variant \|\| 'bg',
	getOpacitySlot(variant),
	colors,
	opacity
	)
	)
	} else if (variant && variant !== key) {
	backgroundColor = colors[variant] \|\| convert(sourceColors[variant]).rgb
	} else {
	backgroundColor = colors.bg \|\| convert(sourceColors.bg)
	}

	const isLightOnDark = relativeLuminance(backgroundColor) < 0.5
	const mod = isLightOnDark ? 1 : -1

	let outputColor = null
	if (sourceColor) {
	// Color is defined in source color
	let targetColor = sourceColor
	if (targetColor === 'transparent') {
	// We take only layers below current one
	const layers = getLayers(
	getLayerSlot(key),
	key,
	getOpacitySlot(key) \|\| key,
	colors,
	opacity
	).slice(0, -1)
	targetColor = {
	...alphaBlendLayers(
	convert('#FF00FF').rgb,
	layers
	),
	a: 0
	}
	} else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
	targetColor = computeDynamicColor(
	sourceColor,
	variableSlot => colors[variableSlot] \|\| sourceColors[variableSlot],
	mod
	)
	} else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) {
	targetColor = convert(targetColor).rgb
	}
	outputColor = { ...targetColor }
	} else if (value.default) {
	// same as above except in object form
	outputColor = convert(value.default).rgb
	} else {
	// calculate color
	const defaultColorFunc = (mod, dep) => ({ ...dep })
	const colorFunc = value.color \|\| defaultColorFunc

	if (value.textColor) {
	if (value.textColor === 'bw') {
	outputColor = contrastRatio(backgroundColor).rgb
	} else {
	let color = { ...colors[deps[0]] }
	if (value.color) {
	color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
	}
	outputColor = getTextColor(
	backgroundColor,
	{ ...color },
	value.textColor === 'preserve'
	)
	}
	} else {
	// background color case
	outputColor = colorFunc(
	mod,
	...deps.map((dep) => ({ ...colors[dep] }))
	)
	}
	}
	if (!outputColor) {
	throw new Error('Couldn\'t generate color for ' + key)
	}

	const opacitySlot = value.opacity \|\| getOpacitySlot(key)
	const ownOpacitySlot = value.opacity

	if (ownOpacitySlot === null) {
	outputColor.a = 1
	} else if (sourceColor === 'transparent') {
	outputColor.a = 0
	} else {
	const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined

	const dependencySlot = deps[0]
	const dependencyColor = dependencySlot && colors[dependencySlot]

	if (!ownOpacitySlot && dependencyColor && !value.textColor && ownOpacitySlot !== null) {
	// Inheriting color from dependency (weird, i know)
	// except if it's a text color or opacity slot is set to 'null'
	outputColor.a = dependencyColor.a
	} else if (!dependencyColor && !opacitySlot) {
	// Remove any alpha channel if no dependency and no opacitySlot found
	delete outputColor.a
	} else {
	// Otherwise try to assign opacity
	if (dependencyColor && dependencyColor.a === 0) {
	// transparent dependency shall make dependents transparent too
	outputColor.a = 0
	} else {
	// Otherwise check if opacity is overriden and use that or default value instead
	outputColor.a = Number(
	opacityOverriden
	? sourceOpacity[opacitySlot]
	: (OPACITIES[opacitySlot] \|\| {}).defaultValue
	)
	}
	}
	}

	if (Number.isNaN(outputColor.a) \|\| outputColor.a === undefined) {
	outputColor.a = 1
	}

	if (opacitySlot) {
	return {
	colors: { ...colors, [key]: outputColor },
	opacity: { ...opacity, [opacitySlot]: outputColor.a }
	}
	} else {
	return {
	colors: { ...colors, [key]: outputColor },
	opacity
	}
	}
	}, { colors: {}, opacity: {} })

	export const composePreset = (colors, radii, shadows, fonts) => {
	return {
	rules: {
	...shadows.rules,
	...colors.rules,
	...radii.rules,
	...fonts.rules
	},
	theme: {
	...shadows.theme,
	...colors.theme,
	...radii.theme,
	...fonts.theme
	}
	}
	}

	export const generatePreset = (input) => {
	const colors = generateColors(input)
	return composePreset(
	colors,
	generateRadii(input),
	generateShadows(input, colors.theme.colors, colors.mod),
	generateFonts(input)
	)
	}

	export const getCssShadow = (input, usesDropShadow) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	.filter(_ => usesDropShadow ? _.inset : _)
	.map((shad) => [
	shad.x,
	shad.y,
	shad.blur,
	shad.spread
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha),
	shad.inset ? 'inset' : ''
	]).join(' ')).join(', ')
	}

	-const getCssShadowFilter = (input) => {
	+export const getCssShadowFilter = (input) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	// drop-shadow doesn't support inset or spread
	.filter((shad) => !shad.inset && Number(shad.spread) === 0)
	.map((shad) => [
	shad.x,
	shad.y,
	// drop-shadow's blur is twice as strong compared to box-shadow
	shad.blur / 2
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha)
	]).join(' '))
	.map(_ => `drop-shadow(${_})`)
	.join(' ')
	}

	export const generateColors = (themeData) => {
	const sourceColors = !themeData.themeEngineVersion
	? colors2to3(themeData.colors \|\| themeData)
	: themeData.colors \|\| themeData

	const { colors, opacity } = getColors(sourceColors, themeData.opacity \|\| {})

	const htmlColors = Object.entries(colors)
	.reduce((acc, [k, v]) => {
	if (!v) return acc
	acc.solid[k] = rgb2hex(v)
	acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
	return acc
	}, { complete: {}, solid: {} })
	return {
	rules: {
	colors: Object.entries(htmlColors.complete)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';')
	},
	theme: {
	colors: htmlColors.solid,
	opacity
	}
	}
	}

	export const generateRadii = (input) => {
	let inputRadii = input.radii \|\| {}
	// v1 -> v2
	if (typeof input.btnRadius !== 'undefined') {
	inputRadii = Object
	.entries(input)
	.filter(([k, v]) => k.endsWith('Radius'))
	.reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
	}
	const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {
	btn: 4,
	input: 4,
	checkbox: 2,
	panel: 10,
	avatar: 5,
	avatarAlt: 50,
	tooltip: 2,
	attachment: 5,
	chatMessage: inputRadii.panel
	})

	return {
	rules: {
	radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
	},
	theme: {
	radii
	}
	}
	}

	export const generateFonts = (input) => {
	const fonts = Object.entries(input.fonts \|\| {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, acc[k])
	return acc
	}, {
	interface: {
	family: 'sans-serif'
	},
	input: {
	family: 'inherit'
	},
	post: {
	family: 'inherit'
	},
	postCode: {
	family: 'monospace'
	}
	})

	return {
	rules: {
	fonts: Object
	.entries(fonts)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
	},
	theme: {
	fonts
	}
	}
	}

	const border = (top, shadow) => ({
	x: 0,
	y: top ? 1 : -1,
	blur: 0,
	spread: 0,
	color: shadow ? '#000000' : '#FFFFFF',
	alpha: 0.2,
	inset: true
	})
	const buttonInsetFakeBorders = [border(true, false), border(false, true)]
	const inputInsetFakeBorders = [border(true, true), border(false, false)]
	const hoverGlow = {
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '--faint',
	alpha: 1
	}

	export const DEFAULT_SHADOWS = {
	panel: [{
	x: 1,
	y: 1,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	topBar: [{
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	popup: [{
	x: 2,
	y: 2,
	blur: 3,
	spread: 0,
	color: '#000000',
	alpha: 0.5
	}],
	avatar: [{
	x: 0,
	y: 1,
	blur: 8,
	spread: 0,
	color: '#000000',
	alpha: 0.7
	}],
	avatarStatus: [],
	panelHeader: [],
	button: [{
	x: 0,
	y: 0,
	blur: 2,
	spread: 0,
	color: '#000000',
	alpha: 1
	}, ...buttonInsetFakeBorders],
	buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
	buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
	input: [...inputInsetFakeBorders, {
	x: 0,
	y: 0,
	blur: 2,
	inset: true,
	spread: 0,
	color: '#000000',
	alpha: 1
	}]
	}
	export const generateShadows = (input, colors) => {
	// TODO this is a small hack for `mod` to work with shadows
	// this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
	const hackContextDict = {
	button: 'btn',
	panel: 'bg',
	top: 'topBar',
	popup: 'popover',
	avatar: 'bg',
	panelHeader: 'panel',
	input: 'input'
	}

	const cleanInputShadows = Object.fromEntries(
	Object.entries(input.shadows \|\| {})
	.map(([name, shadowSlot]) => [
	name,
	// defaulting color to black to avoid potential problems
	shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
	])
	)
	const inputShadows = cleanInputShadows && !input.themeEngineVersion
	? shadows2to3(cleanInputShadows, input.opacity)
	: cleanInputShadows \|\| {}
	const shadows = Object.entries({
	...DEFAULT_SHADOWS,
	...inputShadows
	}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
	const colorSlotName = hackContextDict[slotFirstWord]
	const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	const newShadow = shadowDefs.reduce((shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	color: rgb2hex(computeDynamicColor(
	def.color,
	(variableSlot) => convert(colors[variableSlot]).rgb,
	mod
	))
	}
	], [])
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})

	return {
	rules: {
	shadows: Object
	.entries(shadows)
	// TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
	// convert all non-inset shadows into filter: drop-shadow() to boost performance
	.map(([k, v]) => [
	`--${k}Shadow: ${getCssShadow(v)}`,
	`--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
	`--${k}ShadowInset: ${getCssShadow(v, true)}`
	].join(';'))
	.join(';')
	},
	theme: {
	shadows
	}
	}
	}

	/**
	* This handles compatibility issues when importing v2 theme's shadows to current format
	*
	* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
	*/
	export const shadows2to3 = (shadows, opacity) => {
	return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
	const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
	const newShadow = shadowDefs.reduce((shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	alpha: isDynamic(def) ? getOpacity(def) \|\| 1 : def.alpha
	}
	], [])
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})
	}

	export const colors2to3 = (colors) => {
	return Object.entries(colors).reduce((acc, [slotName, color]) => {
	const btnPositions = ['', 'Panel', 'TopBar']
	switch (slotName) {
	case 'lightBg':
	return { ...acc, highlight: color }
	case 'btnText':
	return {
	...acc,
	...btnPositions
	.reduce(
	(statePositionAcc, position) =>
	({ ...statePositionAcc, ['btn' + position + 'Text']: color })
	, {}
	)
	}
	default:
	return { ...acc, [slotName]: color }
	}
	}, {})
	}
	diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
	index 39c8b74fcf..3c2f8a6378 100644
	--- a/src/services/theme_data/theme_data_3.service.js
	+++ b/src/services/theme_data/theme_data_3.service.js
	@@ -1,525 +1,543 @@
	import { convert, brightness } from 'chromatism'
	import sum from 'hash-sum'
	import { flattenDeep, sortBy } from 'lodash'
	import {
	alphaBlend,
	getTextColor,
	rgba2css,
	mixrgb,
	relativeLuminance
	} from '../color_convert/color_convert.js'

	import {
	colorFunctions,
	shadowFunctions,
	process
	} from './theme3_slot_functions.js'

	import {
	unroll,
	getAllPossibleCombinations,
	genericRuleToSelector,
	normalizeCombination,
	findRules
	} from './iss_utils.js'
	import { parseCssShadow } from './css_utils.js'

	// Ensuring the order of components
	const components = {
	Root: null,
	Text: null,
	FunText: null,
	Link: null,
	Icon: null,
	Border: null,
	Panel: null,
	Chat: null,
	ChatMessage: null
	}

	const findShadow = (shadows, { dynamicVars, staticVars }) => {
	return (shadows \|\| []).map(shadow => {
	let targetShadow
	if (typeof shadow === 'string') {
	if (shadow.startsWith('$')) {
	targetShadow = process(shadow, shadowFunctions, { findColor, findShadow }, { dynamicVars, staticVars })
	} else if (shadow.startsWith('--')) {
	const [variable] = shadow.split(/,/g).map(str => str.trim()) // discarding modifier since it's not supported
	const variableSlot = variable.substring(2)
	return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
	} else {
	targetShadow = parseCssShadow(shadow)
	}
	} else {
	targetShadow = shadow
	}

	const shadowArray = Array.isArray(targetShadow) ? targetShadow : [targetShadow]
	return shadowArray.map(s => ({
	...s,
	color: findColor(s.color, { dynamicVars, staticVars })
	}))
	})
	}

	const findColor = (color, { dynamicVars, staticVars }) => {
	if (typeof color !== 'string' \|\| (!color.startsWith('--') && !color.startsWith('$'))) return color
	let targetColor = null
	if (color.startsWith('--')) {
	const [variable, modifier] = color.split(/,/g).map(str => str.trim())
	const variableSlot = variable.substring(2)
	if (variableSlot === 'stack') {
	const { r, g, b } = dynamicVars.stacked
	targetColor = { r, g, b }
	} else if (variableSlot.startsWith('parent')) {
	if (variableSlot === 'parent') {
	const { r, g, b } = dynamicVars.lowerLevelBackground
	targetColor = { r, g, b }
	} else {
	const virtualSlot = variableSlot.replace(/^parent/, '')
	targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
	}
	} else {
	switch (variableSlot) {
	case 'inheritedBackground':
	targetColor = convert(dynamicVars.inheritedBackground).rgb
	break
	case 'background':
	targetColor = convert(dynamicVars.background).rgb
	break
	default:
	targetColor = convert(staticVars[variableSlot]).rgb
	}
	}

	if (modifier) {
	const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
	const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
	}
	}

	if (color.startsWith('$')) {
	try {
	targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
	} catch (e) {
	console.error('Failure executing color function', e)
	targetColor = '#FF00FF'
	}
	}
	// Color references other color
	return targetColor
	}

	const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
	const opacity = directives.textOpacity
	const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
	const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
	if (opacity === null \|\| opacity === undefined \|\| opacity >= 1) {
	return convert(textColor).hex
	}
	if (opacity === 0) {
	return convert(backgroundColor).hex
	}
	const opacityMode = directives.textOpacityMode
	switch (opacityMode) {
	case 'fake':
	return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
	case 'mixrgb':
	return convert(mixrgb(backgroundColor, textColor)).hex
	default:
	return rgba2css({ a: opacity, ...textColor })
	}
	}

	// Loading all style.js[on] files dynamically
	const componentsContext = require.context('src', true, /\.style.js(on)?$/)
	componentsContext.keys().forEach(key => {
	const component = componentsContext(key).default
	if (components[component.name] != null) {
	console.warn(`Component in file ${key} is trying to override existing component ${component.name}! You have collisions/duplicates!`)
	}
	components[component.name] = component
	})

	const engineChecksum = sum(components)

	const ruleToSelector = genericRuleToSelector(components)

	export const getEngineChecksum = () => engineChecksum

	/**
	* Initializes and compiles the theme according to the ruleset
	*
	* @param {Object[]} inputRuleset - set of rules to compile theme against. Acts as an override to
	* component default rulesets
	* @param {string} ultimateBackgroundColor - Color that will be the "final" background for
	* calculating contrast ratios and making text automatically accessible. Really used for cases when
	* stuff is transparent.
	* @param {boolean} debug - print out debug information in console, mostly just performance stuff
	* @param {boolean} liteMode - use validInnerComponentsLite instead of validInnerComponents, meant to
	* generatate theme previews and such that need to be compiled faster and don't require a lot of other
	* components present in "normal" mode
	* @param {boolean} onlyNormalState - only use components 'normal' states, meant for generating theme
	* previews since states are the biggest factor for compilation time and are completely unnecessary
	* when previewing multiple themes at same time
	* @param {string} rootComponentName - [UNTESTED] which component to start from, meant for previewing a
	* part of the theme (i.e. just the button) for themes 3 editor.
	*/
	export const init = ({
	inputRuleset,
	ultimateBackgroundColor,
	debug = false,
	liteMode = false,
	onlyNormalState = false,
	rootComponentName = 'Root'
	}) => {
	if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
	const staticVars = {}
	const stacked = {}
	const computed = {}

	const rulesetUnsorted = [
	...Object.values(components)
	- .map(c => (c.defaultRules \|\| []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
	+ .map(c => (c.defaultRules \|\| []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
	.reduce((acc, arr) => [...acc, ...arr], []),
	...inputRuleset
	].map(rule => {
	normalizeCombination(rule)
	let currentParent = rule.parent
	while (currentParent) {
	normalizeCombination(currentParent)
	currentParent = currentParent.parent
	}

	return rule
	})

	const ruleset = rulesetUnsorted
	.map((data, index) => ({ data, index }))
	- .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
	+ .toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
	const parentsA = unroll(a).length
	const parentsB = unroll(b).length

	- if (parentsA === parentsB) {
	- if (a.component === 'Text') return -1
	- if (b.component === 'Text') return 1
	+ let aScore = 0
	+ let bScore = 0
	+
	+ aScore += parentsA * 1000
	+ bScore += parentsB * 1000
	+
	+ aScore += a.variant !== 'normal' ? 100 : 0
	+ bScore += b.variant !== 'normal' ? 100 : 0
	+
	+ aScore += a.state.filter(x => x !== 'normal').length * 1000
	+ bScore += b.state.filter(x => x !== 'normal').length * 1000
	+
	+ aScore += a.component === 'Text' ? 1 : 0
	+ bScore += b.component === 'Text' ? 1 : 0
	+
	+ // Debug
	+ a.specifityScore = aScore
	+ b.specifityScore = bScore
	+
	+ if (aScore === bScore) {
	return ai - bi
	}
	- if (parentsA === 0 && parentsB !== 0) return -1
	- if (parentsB === 0 && parentsA !== 0) return 1
	- return parentsA - parentsB
	+ return aScore - bScore
	})
	.map(({ data }) => data)

	const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))

	const processCombination = (combination) => {
	const selector = ruleToSelector(combination, true)
	const cssSelector = ruleToSelector(combination)

	const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
	const soloSelector = selector.split(/ /g).slice(-1)[0]

	const lowerLevelSelector = parentSelector
	const lowerLevelBackground = computed[lowerLevelSelector]?.background
	const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
	const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw

	const dynamicVars = computed[selector] \|\| {
	lowerLevelBackground,
	lowerLevelVirtualDirectives,
	lowerLevelVirtualDirectivesRaw
	}

	// Inheriting all of the applicable rules
	const existingRules = ruleset.filter(findRules(combination))
	- const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
	+ const computedDirectives =
	+ existingRules
	+ .map(r => r.directives)
	+ .reduce((acc, directives) => ({ ...acc, ...directives }), {})
	const computedRule = {
	...combination,
	directives: computedDirectives
	}

	computed[selector] = computed[selector] \|\| {}
	computed[selector].computedRule = computedRule
	computed[selector].dynamicVars = dynamicVars

	if (virtualComponents.has(combination.component)) {
	const virtualName = [
	'--',
	combination.component.toLowerCase(),
	combination.variant === 'normal'
	? ''
	: combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
	...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
	].join('')

	let inheritedTextColor = computedDirectives.textColor
	let inheritedTextAuto = computedDirectives.textAuto
	let inheritedTextOpacity = computedDirectives.textOpacity
	let inheritedTextOpacityMode = computedDirectives.textOpacityMode
	const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
	const lowerLevelTextRule = computed[lowerLevelTextSelector]

	if (inheritedTextColor == null \|\| inheritedTextOpacity == null \|\| inheritedTextOpacityMode == null) {
	inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
	inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
	inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
	inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
	}

	const newTextRule = {
	...computedRule,
	directives: {
	...computedRule.directives,
	textColor: inheritedTextColor,
	textAuto: inheritedTextAuto ?? 'preserve',
	textOpacity: inheritedTextOpacity,
	textOpacityMode: inheritedTextOpacityMode
	}
	}

	dynamicVars.inheritedBackground = lowerLevelBackground
	dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb

	const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
	const textColor = newTextRule.directives.textAuto === 'no-auto'
	? intendedTextColor
	: getTextColor(
	convert(stacked[lowerLevelSelector]).rgb,
	intendedTextColor,
	newTextRule.directives.textAuto === 'preserve'
	)
	const virtualDirectives = computed[lowerLevelSelector].virtualDirectives \|\| {}
	const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw \|\| {}

	// Storing color data in lower layer to use as custom css properties
	virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
	virtualDirectivesRaw[virtualName] = textColor

	computed[lowerLevelSelector].virtualDirectives = virtualDirectives
	computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw

	return {
	dynamicVars,
	selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
	...combination,
	directives: {},
	virtualDirectives: {
	[virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
	},
	virtualDirectivesRaw: {
	[virtualName]: textColor
	}
	}
	} else {
	computed[selector] = computed[selector] \|\| {}

	// TODO: DEFAULT TEXT COLOR
	const lowerLevelStackedBackground = stacked[lowerLevelSelector] \|\| convert(ultimateBackgroundColor).rgb

	if (computedDirectives.background) {
	let inheritRule = null
	const variantRules = ruleset.filter(
	findRules({
	component: combination.component,
	variant: combination.variant,
	parent: combination.parent
	})
	)
	const lastVariantRule = variantRules[variantRules.length - 1]
	if (lastVariantRule) {
	inheritRule = lastVariantRule
	} else {
	const normalRules = ruleset.filter(findRules({
	component: combination.component,
	parent: combination.parent
	}))
	const lastNormalRule = normalRules[normalRules.length - 1]
	inheritRule = lastNormalRule
	}

	const inheritSelector = ruleToSelector({ ...inheritRule, parent: combination.parent }, true)
	const inheritedBackground = computed[inheritSelector].background

	dynamicVars.inheritedBackground = inheritedBackground

	const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb

	if (!stacked[selector]) {
	let blend
	const alpha = computedDirectives.opacity ?? 1
	if (alpha >= 1) {
	blend = rgb
	} else if (alpha <= 0) {
	blend = lowerLevelStackedBackground
	} else {
	blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
	}
	stacked[selector] = blend
	computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
	}
	}

	if (computedDirectives.shadow) {
	dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
	}

	if (!stacked[selector]) {
	computedDirectives.background = 'transparent'
	computedDirectives.opacity = 0
	stacked[selector] = lowerLevelStackedBackground
	computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
	}

	dynamicVars.stacked = stacked[selector]
	dynamicVars.background = computed[selector].background

	const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))

	dynamicSlots.forEach(([k, v]) => {
	const [type, ...value] = v.split('\|').map(x => x.trim()) // woah, Extreme!
	switch (type) {
	case 'color': {
	const color = findColor(value[0], { dynamicVars, staticVars })
	dynamicVars[k] = color
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = color
	}
	break
	}
	case 'shadow': {
	const shadow = value
	dynamicVars[k] = shadow
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = shadow
	}
	break
	}
	case 'generic': {
	dynamicVars[k] = value
	if (combination.component === 'Root') {
	staticVars[k.substring(2)] = value
	}
	break
	}
	}
	})

	const rule = {
	dynamicVars,
	selector: cssSelector,
	...combination,
	directives: computedDirectives
	}

	return rule
	}
	}

	const processInnerComponent = (component, parent) => {
	const combinations = []
	const {
	states: originalStates = {},
	variants: originalVariants = {}
	} = component

	const validInnerComponents = (
	liteMode
	? (component.validInnerComponentsLite \|\| component.validInnerComponents)
	: component.validInnerComponents
	) \|\| []

	// Normalizing states and variants to always include "normal"
	const states = { normal: '', ...originalStates }
	const variants = { normal: '', ...originalVariants }
	const innerComponents = (validInnerComponents).map(name => {
	const result = components[name]
	if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
	return result
	})

	// Optimization: we only really need combinations without "normal" because all states implicitly have it
	const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
	const stateCombinations = onlyNormalState
	? [
	['normal']
	]
	: [
	['normal'],
	...getAllPossibleCombinations(permutationStateKeys)
	.map(combination => ['normal', ...combination])
	.filter(combo => {
	// Optimization: filter out some hard-coded combinations that don't make sense
	if (combo.indexOf('disabled') >= 0) {
	return !(
	combo.indexOf('hover') >= 0 \|\|
	combo.indexOf('focused') >= 0 \|\|
	combo.indexOf('pressed') >= 0
	)
	}
	return true
	})
	]

	const stateVariantCombination = Object.keys(variants).map(variant => {
	return stateCombinations.map(state => ({ variant, state }))
	}).reduce((acc, x) => [...acc, ...x], [])

	stateVariantCombination.forEach(combination => {
	combination.component = component.name
	combination.lazy = component.lazy \|\| parent?.lazy
	combination.parent = parent
	if (combination.state.indexOf('hover') >= 0) {
	combination.lazy = true
	}

	combinations.push(combination)

	innerComponents.forEach(innerComponent => {
	combinations.push(...processInnerComponent(innerComponent, combination))
	})
	})

	return combinations
	}

	const t0 = performance.now()
	const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
	const t1 = performance.now()
	if (debug) {
	console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
	}

	const result = combinations.map((combination) => {
	if (combination.lazy) {
	return async () => processCombination(combination)
	} else {
	return processCombination(combination)
	}
	}).filter(x => x)
	const t2 = performance.now()
	if (debug) {
	console.debug('Eager processing took ' + (t2 - t1) + ' ms')
	}

	// optimization to traverse big-ass array only once instead of twice
	const eager = []
	const lazy = []

	result.forEach(x => {
	if (typeof x === 'function') {
	lazy.push(x)
	} else {
	eager.push(x)
	}
	})

	return {
	lazy,
	eager,
	staticVars,
	engineChecksum
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Aug 9, 4:41 AM (1 d, 15 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724210
Default Alt Text: (218 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions