+ +
{{ localDescription }}
@@ -174,7 +175,6 @@ :is="videoTag" v-if="type === 'video' && !hidden" class="video-container" - :class="{ 'button-unstyled': 'isModal' }" :href="attachment.url" @click.stop.prevent="openModal" > @@ -252,7 +252,7 @@ v-if="edit" v-model="localDescription" type="text" - class="description-field" + class="input description-field" :placeholder="$t('post_status.media_description')" @keydown.enter.prevent="" > diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue index f283ab82a..04f418013 100644 --- a/src/components/autosuggest/autosuggest.vue +++ b/src/components/autosuggest/autosuggest.vue @@ -1,3 +1,4 @@ +- {{ charactersLeft }} -
+ + ++ {{ charactersLeft }} +
+{{ $t('admin_dash.frontend.wip_notice') }}
+{{ $t('admin_dash.frontend.default_frontend_tip') }}
+{{ adminDraft && adminDraft[':pleroma'][':frontends'][':primary'].ref }}
+
+ {{ ref }}
+ + {{ $t('admin_dash.instance.restrict.description') }} +
++ {{ backendDescriptionDescription + ' ' }} +
+ ++ {{ backendDescriptionDescription + ' ' }} +
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js index 4677d4c19..bdeece760 100644 --- a/src/components/settings_modal/helpers/choice_setting.js +++ b/src/components/settings_modal/helpers/choice_setting.js @@ -1,48 +1,41 @@ -import { get, set } from 'lodash' import Select from 'src/components/select/select.vue' -import ModifiedIndicator from './modified_indicator.vue' -import ServerSideIndicator from './server_side_indicator.vue' +import Setting from './setting.js' + export default { + ...Setting, components: { - Select, - ModifiedIndicator, - ServerSideIndicator + ...Setting.components, + Select + }, + props: { + ...Setting.props, + options: { + type: Array, + required: false + }, + optionLabelMap: { + type: Object, + required: false, + default: {} + } }, - props: [ - 'path', - 'disabled', - 'options', - 'expert' - ], computed: { - pathDefault () { - const [firstSegment, ...rest] = this.path.split('.') - return [firstSegment + 'DefaultValue', ...rest].join('.') - }, - state () { - const value = get(this.$parent, this.path) - if (value === undefined) { - return this.defaultState - } else { - return value + ...Setting.computed, + realOptions () { + if (this.realSource === 'admin') { + return this.backendDescriptionSuggestions.map(x => ({ + key: x, + value: x, + label: this.optionLabelMap[x] || x + })) } - }, - defaultState () { - return get(this.$parent, this.pathDefault) - }, - isServerSide () { - return this.path.startsWith('serverSide_') - }, - isChanged () { - return !this.path.startsWith('serverSide_') && this.state !== this.defaultState - }, - matchesExpertLevel () { - return (this.expert || 0) <= this.$parent.expertLevel + return this.options } }, methods: { - update (e) { - set(this.$parent, this.path, e) + ...Setting.methods, + getValue (e) { + return e } } } diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue index 258c74229..114e9b7dc 100644 --- a/src/components/settings_modal/helpers/choice_setting.vue +++ b/src/components/settings_modal/helpers/choice_setting.vue @@ -3,15 +3,20 @@ v-if="matchesExpertLevel" class="ChoiceSetting" > -+ {{ backendDescriptionDescription + ' ' }} +
- - diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue new file mode 100644 index 000000000..46a70e866 --- /dev/null +++ b/src/components/settings_modal/helpers/draft_buttons.vue @@ -0,0 +1,88 @@ + + + + ++ {{ backendDescriptionDescription + ' ' }} +
+ + + + diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/profile_setting_indicator.vue similarity index 69% rename from src/components/settings_modal/helpers/server_side_indicator.vue rename to src/components/settings_modal/helpers/profile_setting_indicator.vue index 143a86a16..d160781b1 100644 --- a/src/components/settings_modal/helpers/server_side_indicator.vue +++ b/src/components/settings_modal/helpers/profile_setting_indicator.vue @@ -1,20 +1,20 @@px
+ rem
+ 14px
+ + {{ $t('settings.notification_setting_filters_chrome_push') }} +
+{{ $t('settings.bio') }}
{{ $t('settings.birthday.label') }}
+ +{{ $t('settings.profile_fields.label') }}
-
foo@example.org
-
+
+
{{ $t('settings.style.preview.mono') }}
-
+
{{ $t('settings.style.preview.link') }}
@@ -41,25 +44,25 @@
+ {{ $t('settings.style.preview.checkbox') }}
+
@@ -113,6 +112,7 @@
+
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 7e1da7ab6..80768fe75 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -1,19 +1,9 @@
import {
rgb2hex,
hex2rgb,
- getContrastRatioLayers
+ getContrastRatioLayers,
+ relativeLuminance
} from 'src/services/color_convert/color_convert.js'
-import {
- DEFAULT_SHADOWS,
- generateColors,
- generateShadows,
- generateRadii,
- generateFonts,
- composePreset,
- getThemes,
- shadows2to3,
- colors2to3
-} from 'src/services/style_setter/style_setter.js'
import {
newImporter,
newExporter
@@ -25,8 +15,23 @@ import {
CURRENT_VERSION,
OPACITIES,
getLayers,
- getOpacitySlot
+ 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'
@@ -37,7 +42,7 @@ 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 './preview.vue'
+import Preview from './theme_preview.vue'
// List of color values used in v1
const v1OnlyNames = [
@@ -62,6 +67,7 @@ const colorConvert = (color) => {
export default {
data () {
return {
+ themeV3Preview: [],
themeImporter: newImporter({
validator: this.importValidator,
onImport: this.onImport,
@@ -78,10 +84,7 @@ export default {
tempImportFile: undefined,
engineVersion: 0,
- previewShadows: {},
- previewColors: {},
- previewRadii: {},
- previewFonts: {},
+ previewTheme: {},
shadowsInvalid: true,
colorsInvalid: true,
@@ -95,11 +98,11 @@ export default {
...Object.keys(SLOT_INHERITANCE)
.map(key => [key, ''])
- .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
+ .reduce((acc, [key, val]) => ({ ...acc, [key + 'ColorLocal']: val }), {}),
...Object.keys(OPACITIES)
.map(key => [key, ''])
- .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
+ .reduce((acc, [key, val]) => ({ ...acc, [key + 'OpacityLocal']: val }), {}),
shadowSelected: undefined,
shadowsLocal: {},
@@ -117,31 +120,24 @@ export default {
}
},
created () {
- const self = this
+ const currentIndex = this.$store.state.instance.themesIndex
- 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
- })
+ let promise
+ if (currentIndex) {
+ promise = Promise.resolve(currentIndex)
+ } else {
+ promise = this.$store.dispatch('fetchThemesIndex')
+ }
+
+ promise.then(themesIndex => {
+ Object
+ .values(themesIndex)
+ .forEach(themeFunc => {
+ themeFunc().then(themeData => themeData && this.availableStyles.push(themeData))
+ })
+ })
},
mounted () {
- this.loadThemeFromLocalStorage()
if (typeof this.shadowSelected === 'undefined') {
this.shadowSelected = this.shadowsAvailable[0]
}
@@ -212,12 +208,12 @@ export default {
currentColors () {
return Object.keys(SLOT_INHERITANCE)
.map(key => [key, this[key + 'ColorLocal']])
- .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+ .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 }), {})
+ .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
},
currentRadii () {
return {
@@ -232,13 +228,6 @@ export default {
chatMessage: this.chatMessageRadiusLocal
}
},
- preview () {
- return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
- },
- previewTheme () {
- if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
- return this.preview.theme
- },
// This needs optimization maybe
previewContrast () {
try {
@@ -279,6 +268,9 @@ export default {
opacity
)
+ // Temporary patch for null-y value errors
+ if (layers.flat().some(v => v == null)) return acc
+
return {
...acc,
...textColors.reduce((acc, textColorKey) => {
@@ -300,15 +292,11 @@ export default {
return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
} catch (e) {
console.warn('Failure computing contrasts', e)
+ return {}
}
},
- previewRules () {
- if (!this.preview.rules) return ''
- return [
- ...Object.values(this.preview.rules),
- 'color: var(--text)',
- 'font-family: var(--interfaceFont, sans-serif)'
- ].join(';')
+ themeDataUsed () {
+ return this.$store.state.interface.themeDataUsed
},
shadowsAvailable () {
return Object.keys(DEFAULT_SHADOWS).sort()
@@ -319,7 +307,18 @@ export default {
},
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]
}
@@ -406,9 +405,6 @@ export default {
forceUseSource = false
) {
this.dismissWarning()
- if (!source && !theme) {
- throw new Error('Can\'t load theme: empty')
- }
const version = (origin === 'localStorage' && !theme.colors)
? 'l1'
: fileVersion
@@ -484,22 +480,11 @@ export default {
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 {
+ const theme = this.themeDataUsed?.source
+ if (theme) {
this.loadTheme(
{
- theme,
- source: forceSnapshot ? theme : source
+ theme
},
'localStorage',
confirmLoadSource
@@ -507,16 +492,15 @@ export default {
}
},
setCustomTheme () {
- this.$store.dispatch('setOption', {
- name: 'customTheme',
- value: {
+ this.$store.dispatch('setThemeV2', {
+ customTheme: {
+ ignore: true,
+ themeFileVersion: this.selectedVersion,
themeEngineVersion: CURRENT_VERSION,
...this.previewTheme
- }
- })
- this.$store.dispatch('setOption', {
- name: 'customThemeSource',
- value: {
+ },
+ customThemeSource: {
+ themeFileVersion: this.selectedVersion,
themeEngineVersion: CURRENT_VERSION,
shadows: this.shadowsLocal,
fonts: this.fontsLocal,
@@ -526,16 +510,24 @@ export default {
}
})
},
- updatePreviewColorsAndShadows () {
- this.previewColors = generateColors({
+ updatePreviewColors () {
+ const result = generateColors({
opacity: this.currentOpacity,
colors: this.currentColors
})
- this.previewShadows = generateShadows(
- { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
- this.previewColors.theme.colors,
- this.previewColors.mod
- )
+ 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() },
@@ -604,7 +596,7 @@ export default {
normalizeLocalState (theme, version = 0, source, forceSource = false) {
let input
if (typeof source !== 'undefined') {
- if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+ if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) {
input = source
version = source.themeEngineVersion
} else {
@@ -686,6 +678,8 @@ export default {
} else {
this.shadowsLocal = shadows
}
+ this.updatePreviewColors()
+ this.updatePreviewShadows()
this.shadowSelected = this.shadowsAvailable[0]
}
@@ -693,12 +687,28 @@ export default {
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: {
+ themeDataUsed () {
+ this.loadThemeFromLocalStorage()
+ },
currentRadii () {
try {
- this.previewRadii = generateRadii({ radii: this.currentRadii })
+ this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
this.radiiInvalid = false
} catch (e) {
this.radiiInvalid = true
@@ -707,9 +717,8 @@ export default {
},
shadowsLocal: {
handler () {
- if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
try {
- this.updatePreviewColorsAndShadows()
+ this.updatePreviewShadows()
this.shadowsInvalid = false
} catch (e) {
this.shadowsInvalid = true
@@ -721,7 +730,7 @@ export default {
fontsLocal: {
handler () {
try {
- this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+ this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
this.fontsInvalid = false
} catch (e) {
this.fontsInvalid = true
@@ -732,18 +741,16 @@ export default {
},
currentColors () {
try {
- this.updatePreviewColorsAndShadows()
+ this.updatePreviewColors()
this.colorsInvalid = false
- this.shadowsInvalid = false
} catch (e) {
this.colorsInvalid = true
- this.shadowsInvalid = true
console.warn(e)
}
},
currentOpacity () {
try {
- this.updatePreviewColorsAndShadows()
+ this.updatePreviewColors()
} catch (e) {
console.warn(e)
}
@@ -751,7 +758,6 @@ export default {
selected () {
this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
if (Array.isArray(s)) {
- console.log(s[0] === this.selected, this.selected)
return s[0] === this.selected
} else {
return s.name === this.selected
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 bad6f51b1..c2e33e75e 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,56 +1,67 @@
-@import 'src/_variables.scss';
.theme-tab {
- padding-bottom: 2em;
- .theme-warning {
- display: flex;
- align-items: baseline;
- margin-bottom: .5em;
- .buttons {
- .btn {
- margin-bottom: .5em;
- }
- }
+ .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;
- }
-
- &.disabled {
- input, select {
- opacity: .5
- }
+ line-height: 2;
}
.opt {
- margin: .5em;
+ margin: 0.5em;
}
.color-input {
flex: 0 0 0;
}
- input, select {
+ input,
+ select {
min-width: 3em;
margin: 0;
flex: 0;
- &[type=number] {
- min-width: 5em;
+ &[type="number"] {
+ min-width: 9em;
+
+ &.-small {
+ min-width: 5em;
+ }
}
- &[type=range] {
+ &[type="range"] {
flex: 1;
- min-width: 3em;
- align-self: flex-start;
+ min-width: 9em;
+ align-self: center;
+ margin: 0 0.5em;
+ }
+
+ &[type="checkbox"] + i {
+ height: 1.1em;
+ align-self: center;
}
}
}
@@ -63,8 +74,7 @@
.reset-container,
.apply-container,
.radius-container,
- .color-container,
- {
+ .color-container, {
display: flex;
}
@@ -73,10 +83,11 @@
flex-direction: column;
}
- .color-container{
+ .color-container {
> h4 {
width: 99%;
}
+
flex-wrap: wrap;
justify-content: space-between;
}
@@ -100,7 +111,7 @@
p {
flex: 1;
margin: 0;
- margin-right: .5em;
+ margin-right: 0.5em;
}
}
@@ -112,15 +123,16 @@
min-width: 1px;
flex: 0 auto;
padding: 0 1em;
- margin-bottom: .5em;
+ margin-bottom: 0.5em;
}
}
.shadow-selector {
.override {
flex: 1;
- margin-left: .5em;
+ margin-left: 0.5em;
}
+
.select-container {
margin-top: -4px;
margin-bottom: -3px;
@@ -136,7 +148,7 @@
.presets,
.import-export {
- margin-bottom: .5em;
+ margin-bottom: 0.5em;
}
.import-export {
@@ -144,146 +156,54 @@
}
.override {
- margin-left: .5em;
+ margin-left: 0.5em;
}
}
.save-load-options {
flex-wrap: wrap;
- margin-top: .5em;
+ margin-top: 0.5em;
justify-content: center;
+
.keep-option {
- margin: 0 .5em .5em;
+ margin: 0 0.5em 0.5em;
min-width: 25%;
}
}
- .preview-container {
- border-top: 1px dashed;
- border-bottom: 1px dashed;
- border-color: $fallback--border;
- border-color: var(--border, $fallback--border);
- margin: 1em 0;
- padding: 1em;
- background-color: var(--wallpaper);
- background-image: var(--body-background-image);
- background-size: cover;
- background-position: 50% 50%;
-
- .dummy {
- .post {
- font-family: var(--postFont);
- display: flex;
-
- .content {
- flex: 1;
-
- h4 {
- margin-bottom: .25em;
- }
-
- .icons {
- margin-top: .5em;
- display: flex;
-
- i {
- margin-right: 1em;
- }
- }
- }
- }
-
- .after-post {
- margin-top: 1em;
- display: flex;
- align-items: center;
- }
-
- .avatar, .avatar-alt{
- background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
- color: black;
- font-family: sans-serif;
- text-align: center;
- margin-right: 1em;
- }
-
- .avatar-alt {
- flex: 0 auto;
- margin-left: 28px;
- font-size: 12px;
- min-width: 20px;
- min-height: 20px;
- line-height: 20px;
- border-radius: $fallback--avatarAltRadius;
- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
- }
-
- .avatar {
- flex: 0 auto;
- width: 48px;
- height: 48px;
- font-size: 14px;
- line-height: 48px;
- }
-
- .actions {
- display: flex;
- align-items: baseline;
-
- .checkbox {
- display: inline-flex;
- align-items: baseline;
- margin-right: 1em;
- flex: 1;
- }
- }
-
- .separator {
- margin: 1em;
- border-bottom: 1px solid;
- border-color: $fallback--border;
- border-color: var(--border, $fallback--border);
- }
-
- .btn {
- min-width: 3em;
- }
- }
- }
-
- .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;
- }
- }
-
.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(--faint, $fallback--faint);
+ color: var(--textFaint);
align-self: stretch;
}
@@ -295,24 +215,24 @@
.theme-radius-in {
min-width: 1em;
- }
-
- .theme-radius-in {
max-width: 7em;
flex: 1;
}
- .theme-radius-lb{
+ .theme-radius-lb {
max-width: 50em;
}
- .theme-preview-content {
- padding: 20px;
- }
+ .theme-warning {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 0.5em;
- .btn {
- margin-left: .25em;
- margin-right: .25em;
+ .buttons {
+ .btn {
+ margin-bottom: 0.5em;
+ }
+ }
}
}
@@ -323,6 +243,7 @@
justify-content: space-around;
flex-grow: 1;
+ /* stylelint-disable-next-line no-descending-specificity */
.btn {
flex-grow: 1;
min-height: 2em;
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 ff2fece9c..886d97764 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,5 +1,8 @@
+
+ {{ $t("settings.style.themes2_outdated") }}
+
-
@@ -156,7 +174,7 @@
@@ -190,13 +208,13 @@
v-model="fgTextColorLocal"
name="fgTextColor"
:label="$t('settings.text')"
- :fallback="previewTheme.colors.fgText"
+ :fallback="previewTheme.colors?.fgText"
/>
{{ $t('settings.style.common_colors.foreground_hint') }}
@@ -256,14 +274,14 @@
{{ $t('settings.style.advanced_colors.toggled') }}
--variable,mod
- filter: drop-shadow()
+ {{ $t('settings.style.shadows.filter_hint.avatar_inset') }}
+drop-shadow
+ spread-radius
+ inset
+ box-shadow
+ {{ $t('settings.style.shadows.filter_hint.spread_zero') }}
++ {{ $t('update.big_update_content') }} +
+
+