Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia
This commit is contained in:
Henry Jameson
commit
58e18d48df
489 changed files with 31167 additions and 9871 deletions
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="preview-container">
|
||||
<div class="theme-preview-container">
|
||||
<div class="underlay underlay-preview" />
|
||||
<div class="panel dummy">
|
||||
<div class="panel-heading">
|
||||
<div class="title">
|
||||
<h1 class="title">
|
||||
{{ $t('settings.style.preview.header') }}
|
||||
<span class="badge badge-notification">
|
||||
<span class="badge -notification">
|
||||
99
|
||||
</span>
|
||||
</div>
|
||||
</h1>
|
||||
<span class="faint">
|
||||
{{ $t('settings.style.preview.header_faint') }}
|
||||
</span>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
class="faint"
|
||||
scope="global"
|
||||
>
|
||||
<a style="color: var(--faintLink);">
|
||||
<a style="color: var(--linkFaint);">
|
||||
{{ $t('settings.style.preview.faint_link') }}
|
||||
</a>
|
||||
</i18n-t>
|
||||
|
|
@ -95,17 +95,13 @@
|
|||
<input
|
||||
:value="$t('settings.style.preview.input')"
|
||||
type="text"
|
||||
class="input"
|
||||
>
|
||||
|
||||
<div class="actions">
|
||||
<span class="checkbox">
|
||||
<input
|
||||
id="preview_checkbox"
|
||||
checked="very yes"
|
||||
type="checkbox"
|
||||
>
|
||||
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
|
||||
</span>
|
||||
<Checkbox>
|
||||
{{ $t('settings.style.preview.checkbox') }}
|
||||
</Checkbox>
|
||||
<button class="btn button-default">
|
||||
{{ $t('settings.style.preview.button') }}
|
||||
</button>
|
||||
|
|
@ -116,6 +112,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faTimes,
|
||||
|
|
@ -131,19 +128,123 @@ library.add(
|
|||
faReply
|
||||
)
|
||||
|
||||
export default {}
|
||||
export default {
|
||||
components: {
|
||||
Checkbox
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.preview-container {
|
||||
.theme-preview-container {
|
||||
position: relative;
|
||||
}
|
||||
border-top: 1px dashed;
|
||||
border-bottom: 1px dashed;
|
||||
border-color: var(--border);
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
background-color: var(--wallpaper);
|
||||
background-image: var(--body-background-image);
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
|
||||
.underlay-preview {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
.theme-preview-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dummy {
|
||||
.post {
|
||||
font-family: var(--postFont);
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 0.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;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
flex: 0 auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.checkbox {
|
||||
margin-right: 1em;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 1em;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-width: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
.underlay-preview {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -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'
|
||||
import { useInterfaceStore } from '../../../../stores/interface'
|
||||
|
||||
// List of color values used in v1
|
||||
|
|
@ -63,6 +68,7 @@ const colorConvert = (color) => {
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
themeV3Preview: [],
|
||||
themeImporter: newImporter({
|
||||
validator: this.importValidator,
|
||||
onImport: this.onImport,
|
||||
|
|
@ -79,10 +85,7 @@ export default {
|
|||
tempImportFile: undefined,
|
||||
engineVersion: 0,
|
||||
|
||||
previewShadows: {},
|
||||
previewColors: {},
|
||||
previewRadii: {},
|
||||
previewFonts: {},
|
||||
previewTheme: {},
|
||||
|
||||
shadowsInvalid: true,
|
||||
colorsInvalid: true,
|
||||
|
|
@ -118,31 +121,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]
|
||||
}
|
||||
|
|
@ -233,13 +229,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 {
|
||||
|
|
@ -307,13 +296,8 @@ export default {
|
|||
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()
|
||||
|
|
@ -324,7 +308,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]
|
||||
}
|
||||
|
|
@ -411,9 +406,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
|
||||
|
|
@ -489,22 +481,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
|
||||
|
|
@ -512,16 +493,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,
|
||||
|
|
@ -531,16 +511,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() },
|
||||
|
|
@ -609,7 +597,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 {
|
||||
|
|
@ -691,6 +679,8 @@ export default {
|
|||
} else {
|
||||
this.shadowsLocal = shadows
|
||||
}
|
||||
this.updatePreviewColors()
|
||||
this.updatePreviewShadows()
|
||||
this.shadowSelected = this.shadowsAvailable[0]
|
||||
}
|
||||
|
||||
|
|
@ -698,12 +688,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
|
||||
|
|
@ -712,9 +718,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
|
||||
|
|
@ -726,7 +731,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
|
||||
|
|
@ -737,18 +742,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)
|
||||
}
|
||||
|
|
@ -756,7 +759,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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
@import "src/variables";
|
||||
|
||||
.theme-tab {
|
||||
.deprecation-warning {
|
||||
padding: 0.5em;
|
||||
margin: 2em;
|
||||
}
|
||||
|
||||
padding-bottom: 2em;
|
||||
|
||||
.preset-switcher {
|
||||
|
|
@ -12,13 +15,19 @@
|
|||
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 {
|
||||
|
|
@ -36,20 +45,23 @@
|
|||
flex: 0;
|
||||
|
||||
&[type="number"] {
|
||||
min-width: 5em;
|
||||
min-width: 9em;
|
||||
|
||||
&.-small {
|
||||
min-width: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="range"] {
|
||||
flex: 1;
|
||||
min-width: 3em;
|
||||
align-self: flex-start;
|
||||
min-width: 9em;
|
||||
align-self: center;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
input,
|
||||
select {
|
||||
opacity: 0.5;
|
||||
&[type="checkbox"] + i {
|
||||
height: 1.1em;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -159,111 +171,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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: 0.25em;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin-top: 0.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 {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
|
@ -296,7 +203,7 @@
|
|||
border: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
color: var(--faint, $fallback--faint);
|
||||
color: var(--textFaint);
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
|
|
@ -316,10 +223,6 @@
|
|||
max-width: 50em;
|
||||
}
|
||||
|
||||
.theme-preview-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.theme-warning {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<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
|
||||
|
|
@ -120,7 +123,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<preview :style="previewRules" />
|
||||
<!-- 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">
|
||||
|
|
@ -156,7 +174,7 @@
|
|||
<OpacityInput
|
||||
v-model="bgOpacityLocal"
|
||||
name="bgOpacity"
|
||||
:fallback="previewTheme.opacity.bg"
|
||||
:fallback="previewTheme.opacity?.bg"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="textColorLocal"
|
||||
|
|
@ -167,16 +185,16 @@
|
|||
<ColorInput
|
||||
v-model="accentColorLocal"
|
||||
name="accentColor"
|
||||
:fallback="previewTheme.colors.link"
|
||||
:fallback="previewTheme.colors?.link"
|
||||
:label="$t('settings.accent')"
|
||||
:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
|
||||
:show-optional-checkbox="typeof linkColorLocal !== 'undefined'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="linkColorLocal"
|
||||
name="linkColor"
|
||||
:fallback="previewTheme.colors.accent"
|
||||
:fallback="previewTheme.colors?.accent"
|
||||
:label="$t('settings.links')"
|
||||
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
|
||||
:show-optional-checkbox="typeof accentColorLocal !== 'undefined'"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.bgLink" />
|
||||
</div>
|
||||
|
|
@ -190,13 +208,13 @@
|
|||
v-model="fgTextColorLocal"
|
||||
name="fgTextColor"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.fgText"
|
||||
:fallback="previewTheme.colors?.fgText"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="fgLinkColorLocal"
|
||||
name="fgLinkColor"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.fgLink"
|
||||
:fallback="previewTheme.colors?.fgLink"
|
||||
/>
|
||||
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
|
||||
</div>
|
||||
|
|
@ -256,14 +274,14 @@
|
|||
<ColorInput
|
||||
v-model="postLinkColorLocal"
|
||||
name="postLinkColor"
|
||||
:fallback="previewTheme.colors.accent"
|
||||
:fallback="previewTheme.colors?.accent"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.postLink" />
|
||||
<ColorInput
|
||||
v-model="postGreentextColorLocal"
|
||||
name="postGreentextColor"
|
||||
:fallback="previewTheme.colors.cGreen"
|
||||
:fallback="previewTheme.colors?.cGreen"
|
||||
:label="$t('settings.greentext')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.postGreentext" />
|
||||
|
|
@ -272,13 +290,13 @@
|
|||
v-model="alertErrorColorLocal"
|
||||
name="alertError"
|
||||
:label="$t('settings.style.advanced_colors.alert_error')"
|
||||
:fallback="previewTheme.colors.alertError"
|
||||
:fallback="previewTheme.colors?.alertError"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertErrorTextColorLocal"
|
||||
name="alertErrorText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertErrorText"
|
||||
:fallback="previewTheme.colors?.alertErrorText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.alertErrorText"
|
||||
|
|
@ -288,13 +306,13 @@
|
|||
v-model="alertWarningColorLocal"
|
||||
name="alertWarning"
|
||||
:label="$t('settings.style.advanced_colors.alert_warning')"
|
||||
:fallback="previewTheme.colors.alertWarning"
|
||||
:fallback="previewTheme.colors?.alertWarning"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertWarningTextColorLocal"
|
||||
name="alertWarningText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertWarningText"
|
||||
:fallback="previewTheme.colors?.alertWarningText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.alertWarningText"
|
||||
|
|
@ -304,13 +322,13 @@
|
|||
v-model="alertNeutralColorLocal"
|
||||
name="alertNeutral"
|
||||
:label="$t('settings.style.advanced_colors.alert_neutral')"
|
||||
:fallback="previewTheme.colors.alertNeutral"
|
||||
:fallback="previewTheme.colors?.alertNeutral"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertNeutralTextColorLocal"
|
||||
name="alertNeutralText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertNeutralText"
|
||||
:fallback="previewTheme.colors?.alertNeutralText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.alertNeutralText"
|
||||
|
|
@ -319,7 +337,7 @@
|
|||
<OpacityInput
|
||||
v-model="alertOpacityLocal"
|
||||
name="alertOpacity"
|
||||
:fallback="previewTheme.opacity.alert"
|
||||
:fallback="previewTheme.opacity?.alert"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -328,13 +346,13 @@
|
|||
v-model="badgeNotificationColorLocal"
|
||||
name="badgeNotification"
|
||||
:label="$t('settings.style.advanced_colors.badge_notification')"
|
||||
:fallback="previewTheme.colors.badgeNotification"
|
||||
:fallback="previewTheme.colors?.badgeNotification"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="badgeNotificationTextColorLocal"
|
||||
name="badgeNotificationText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.badgeNotificationText"
|
||||
:fallback="previewTheme.colors?.badgeNotificationText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.badgeNotificationText"
|
||||
|
|
@ -346,19 +364,19 @@
|
|||
<ColorInput
|
||||
v-model="panelColorLocal"
|
||||
name="panelColor"
|
||||
:fallback="previewTheme.colors.panel"
|
||||
:fallback="previewTheme.colors?.panel"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="panelOpacityLocal"
|
||||
name="panelOpacity"
|
||||
:fallback="previewTheme.opacity.panel"
|
||||
:fallback="previewTheme.opacity?.panel"
|
||||
:disabled="panelColorLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="panelTextColorLocal"
|
||||
name="panelTextColor"
|
||||
:fallback="previewTheme.colors.panelText"
|
||||
:fallback="previewTheme.colors?.panelText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio
|
||||
|
|
@ -368,7 +386,7 @@
|
|||
<ColorInput
|
||||
v-model="panelLinkColorLocal"
|
||||
name="panelLinkColor"
|
||||
:fallback="previewTheme.colors.panelLink"
|
||||
:fallback="previewTheme.colors?.panelLink"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ContrastRatio
|
||||
|
|
@ -381,20 +399,20 @@
|
|||
<ColorInput
|
||||
v-model="topBarColorLocal"
|
||||
name="topBarColor"
|
||||
:fallback="previewTheme.colors.topBar"
|
||||
:fallback="previewTheme.colors?.topBar"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="topBarTextColorLocal"
|
||||
name="topBarTextColor"
|
||||
:fallback="previewTheme.colors.topBarText"
|
||||
:fallback="previewTheme.colors?.topBarText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.topBarText" />
|
||||
<ColorInput
|
||||
v-model="topBarLinkColorLocal"
|
||||
name="topBarLinkColor"
|
||||
:fallback="previewTheme.colors.topBarLink"
|
||||
:fallback="previewTheme.colors?.topBarLink"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.topBarLink" />
|
||||
|
|
@ -404,19 +422,19 @@
|
|||
<ColorInput
|
||||
v-model="inputColorLocal"
|
||||
name="inputColor"
|
||||
:fallback="previewTheme.colors.input"
|
||||
:fallback="previewTheme.colors?.input"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="inputOpacityLocal"
|
||||
name="inputOpacity"
|
||||
:fallback="previewTheme.opacity.input"
|
||||
:fallback="previewTheme.opacity?.input"
|
||||
:disabled="inputColorLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="inputTextColorLocal"
|
||||
name="inputTextColor"
|
||||
:fallback="previewTheme.colors.inputText"
|
||||
:fallback="previewTheme.colors?.inputText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.inputText" />
|
||||
|
|
@ -426,33 +444,33 @@
|
|||
<ColorInput
|
||||
v-model="btnColorLocal"
|
||||
name="btnColor"
|
||||
:fallback="previewTheme.colors.btn"
|
||||
:fallback="previewTheme.colors?.btn"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="btnOpacityLocal"
|
||||
name="btnOpacity"
|
||||
:fallback="previewTheme.opacity.btn"
|
||||
:fallback="previewTheme.opacity?.btn"
|
||||
:disabled="btnColorLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnTextColorLocal"
|
||||
name="btnTextColor"
|
||||
:fallback="previewTheme.colors.btnText"
|
||||
:fallback="previewTheme.colors?.btnText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnText" />
|
||||
<ColorInput
|
||||
v-model="btnPanelTextColorLocal"
|
||||
name="btnPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnPanelText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnTopBarText"
|
||||
:label="$t('settings.style.advanced_colors.top_bar')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnTopBarText" />
|
||||
|
|
@ -460,27 +478,27 @@
|
|||
<ColorInput
|
||||
v-model="btnPressedColorLocal"
|
||||
name="btnPressedColor"
|
||||
:fallback="previewTheme.colors.btnPressed"
|
||||
:fallback="previewTheme.colors?.btnPressed"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnPressedTextColorLocal"
|
||||
name="btnPressedTextColor"
|
||||
:fallback="previewTheme.colors.btnPressedText"
|
||||
:fallback="previewTheme.colors?.btnPressedText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnPressedText" />
|
||||
<ColorInput
|
||||
v-model="btnPressedPanelTextColorLocal"
|
||||
name="btnPressedPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnPressedPanelText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnPressedTopBarText"
|
||||
:label="$t('settings.style.advanced_colors.top_bar')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
|
||||
|
|
@ -488,52 +506,52 @@
|
|||
<ColorInput
|
||||
v-model="btnDisabledColorLocal"
|
||||
name="btnDisabledColor"
|
||||
:fallback="previewTheme.colors.btnDisabled"
|
||||
:fallback="previewTheme.colors?.btnDisabled"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnDisabledTextColorLocal"
|
||||
name="btnDisabledTextColor"
|
||||
:fallback="previewTheme.colors.btnDisabledText"
|
||||
:fallback="previewTheme.colors?.btnDisabledText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnDisabledPanelTextColorLocal"
|
||||
name="btnDisabledPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnDisabledPanelText"
|
||||
:fallback="previewTheme.colors?.btnDisabledPanelText"
|
||||
:label="$t('settings.style.advanced_colors.panel_header')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnDisabledTopBarTextColorLocal"
|
||||
name="btnDisabledTopBarTextColor"
|
||||
:fallback="previewTheme.colors.btnDisabledTopBarText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnToggled"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnToggledTextColorLocal"
|
||||
name="btnToggledTextColor"
|
||||
:fallback="previewTheme.colors.btnToggledText"
|
||||
:fallback="previewTheme.colors?.btnToggledText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnToggledText" />
|
||||
<ColorInput
|
||||
v-model="btnToggledPanelTextColorLocal"
|
||||
name="btnToggledPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnToggledPanelText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnToggledTopBarText"
|
||||
:label="$t('settings.style.advanced_colors.top_bar')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
|
||||
|
|
@ -543,20 +561,20 @@
|
|||
<ColorInput
|
||||
v-model="tabColorLocal"
|
||||
name="tabColor"
|
||||
:fallback="previewTheme.colors.tab"
|
||||
:fallback="previewTheme.colors?.tab"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="tabTextColorLocal"
|
||||
name="tabTextColor"
|
||||
:fallback="previewTheme.colors.tabText"
|
||||
:fallback="previewTheme.colors?.tabText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.tabText" />
|
||||
<ColorInput
|
||||
v-model="tabActiveTextColorLocal"
|
||||
name="tabActiveTextColor"
|
||||
:fallback="previewTheme.colors.tabActiveText"
|
||||
:fallback="previewTheme.colors?.tabActiveText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.tabActiveText" />
|
||||
|
|
@ -566,13 +584,13 @@
|
|||
<ColorInput
|
||||
v-model="borderColorLocal"
|
||||
name="borderColor"
|
||||
:fallback="previewTheme.colors.border"
|
||||
:fallback="previewTheme.colors?.border"
|
||||
:label="$t('settings.style.common.color')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="borderOpacityLocal"
|
||||
name="borderOpacity"
|
||||
:fallback="previewTheme.opacity.border"
|
||||
:fallback="previewTheme.opacity?.border"
|
||||
:disabled="borderColorLocal === 'transparent'"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -581,25 +599,25 @@
|
|||
<ColorInput
|
||||
v-model="faintColorLocal"
|
||||
name="faintColor"
|
||||
:fallback="previewTheme.colors.faint"
|
||||
:fallback="previewTheme.colors?.faint"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="faintLinkColorLocal"
|
||||
name="faintLinkColor"
|
||||
:fallback="previewTheme.colors.faintLink"
|
||||
:fallback="previewTheme.colors?.faintLink"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="panelFaintColorLocal"
|
||||
name="panelFaintColor"
|
||||
:fallback="previewTheme.colors.panelFaint"
|
||||
:fallback="previewTheme.colors?.panelFaint"
|
||||
:label="$t('settings.style.advanced_colors.panel_header')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="faintOpacityLocal"
|
||||
name="faintOpacity"
|
||||
:fallback="previewTheme.opacity.faint"
|
||||
:fallback="previewTheme.opacity?.faint"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -608,12 +626,12 @@
|
|||
v-model="underlayColorLocal"
|
||||
name="underlay"
|
||||
:label="$t('settings.style.advanced_colors.underlay')"
|
||||
:fallback="previewTheme.colors.underlay"
|
||||
:fallback="previewTheme.colors?.underlay"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="underlayOpacityLocal"
|
||||
name="underlayOpacity"
|
||||
:fallback="previewTheme.opacity.underlay"
|
||||
:fallback="previewTheme.opacity?.underlay"
|
||||
:disabled="underlayOpacityLocal === 'transparent'"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -623,7 +641,7 @@
|
|||
v-model="wallpaperColorLocal"
|
||||
name="wallpaper"
|
||||
:label="$t('settings.style.advanced_colors.wallpaper')"
|
||||
:fallback="previewTheme.colors.wallpaper"
|
||||
:fallback="previewTheme.colors?.wallpaper"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -632,13 +650,13 @@
|
|||
v-model="pollColorLocal"
|
||||
name="poll"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.poll"
|
||||
:fallback="previewTheme.colors?.poll"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="pollTextColorLocal"
|
||||
name="pollText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.pollText"
|
||||
:fallback="previewTheme.colors?.pollText"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -647,7 +665,7 @@
|
|||
v-model="iconColorLocal"
|
||||
name="icon"
|
||||
:label="$t('settings.style.advanced_colors.icons')"
|
||||
:fallback="previewTheme.colors.icon"
|
||||
:fallback="previewTheme.colors?.icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -656,20 +674,20 @@
|
|||
v-model="highlightColorLocal"
|
||||
name="highlight"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.highlight"
|
||||
:fallback="previewTheme.colors?.highlight"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="highlightTextColorLocal"
|
||||
name="highlightText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.highlightText"
|
||||
:fallback="previewTheme.colors?.highlightText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.highlightText" />
|
||||
<ColorInput
|
||||
v-model="highlightLinkColorLocal"
|
||||
name="highlightLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.highlightLink"
|
||||
:fallback="previewTheme.colors?.highlightLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.highlightLink" />
|
||||
</div>
|
||||
|
|
@ -679,26 +697,26 @@
|
|||
v-model="popoverColorLocal"
|
||||
name="popover"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.popover"
|
||||
:fallback="previewTheme.colors?.popover"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="popoverOpacityLocal"
|
||||
name="popoverOpacity"
|
||||
:fallback="previewTheme.opacity.popover"
|
||||
:fallback="previewTheme.opacity?.popover"
|
||||
:disabled="popoverOpacityLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="popoverTextColorLocal"
|
||||
name="popoverText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.popoverText"
|
||||
:fallback="previewTheme.colors?.popoverText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.popoverText" />
|
||||
<ColorInput
|
||||
v-model="popoverLinkColorLocal"
|
||||
name="popoverLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.popoverLink"
|
||||
:fallback="previewTheme.colors?.popoverLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.popoverLink" />
|
||||
</div>
|
||||
|
|
@ -708,20 +726,20 @@
|
|||
v-model="selectedPostColorLocal"
|
||||
name="selectedPost"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.selectedPost"
|
||||
:fallback="previewTheme.colors?.selectedPost"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="selectedPostTextColorLocal"
|
||||
name="selectedPostText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.selectedPostText"
|
||||
:fallback="previewTheme.colors?.selectedPostText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedPostText" />
|
||||
<ColorInput
|
||||
v-model="selectedPostLinkColorLocal"
|
||||
name="selectedPostLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.selectedPostLink"
|
||||
:fallback="previewTheme.colors?.selectedPostLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedPostLink" />
|
||||
</div>
|
||||
|
|
@ -731,20 +749,20 @@
|
|||
v-model="selectedMenuColorLocal"
|
||||
name="selectedMenu"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.selectedMenu"
|
||||
:fallback="previewTheme.colors?.selectedMenu"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="selectedMenuTextColorLocal"
|
||||
name="selectedMenuText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.selectedMenuText"
|
||||
:fallback="previewTheme.colors?.selectedMenuText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedMenuText" />
|
||||
<ColorInput
|
||||
v-model="selectedMenuLinkColorLocal"
|
||||
name="selectedMenuLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.selectedMenuLink"
|
||||
:fallback="previewTheme.colors?.selectedMenuLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
|
||||
</div>
|
||||
|
|
@ -753,57 +771,57 @@
|
|||
<ColorInput
|
||||
v-model="chatBgColorLocal"
|
||||
name="chatBgColor"
|
||||
:fallback="previewTheme.colors.bg"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingTextColorLocal"
|
||||
name="chatMessageIncomingTextColor"
|
||||
:fallback="previewTheme.colors.text"
|
||||
:fallback="previewTheme.colors?.text"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingLinkColorLocal"
|
||||
name="chatMessageIncomingLinkColor"
|
||||
:fallback="previewTheme.colors.link"
|
||||
:fallback="previewTheme.colors?.link"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingBorderColorLocal"
|
||||
name="chatMessageIncomingBorderLinkColor"
|
||||
:fallback="previewTheme.colors.fg"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingTextColorLocal"
|
||||
name="chatMessageOutgoingTextColor"
|
||||
:fallback="previewTheme.colors.text"
|
||||
:fallback="previewTheme.colors?.text"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingLinkColorLocal"
|
||||
name="chatMessageOutgoingLinkColor"
|
||||
:fallback="previewTheme.colors.link"
|
||||
:fallback="previewTheme.colors?.link"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingBorderColorLocal"
|
||||
name="chatMessageOutgoingBorderLinkColor"
|
||||
:fallback="previewTheme.colors.bg"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.style.advanced_colors.chat.border')"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -826,7 +844,7 @@
|
|||
v-model="btnRadiusLocal"
|
||||
name="btnRadius"
|
||||
:label="$t('settings.btnRadius')"
|
||||
:fallback="previewTheme.radii.btn"
|
||||
:fallback="previewTheme.radii?.btn"
|
||||
max="16"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -834,7 +852,7 @@
|
|||
v-model="inputRadiusLocal"
|
||||
name="inputRadius"
|
||||
:label="$t('settings.inputRadius')"
|
||||
:fallback="previewTheme.radii.input"
|
||||
:fallback="previewTheme.radii?.input"
|
||||
max="9"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -842,7 +860,7 @@
|
|||
v-model="checkboxRadiusLocal"
|
||||
name="checkboxRadius"
|
||||
:label="$t('settings.checkboxRadius')"
|
||||
:fallback="previewTheme.radii.checkbox"
|
||||
:fallback="previewTheme.radii?.checkbox"
|
||||
max="16"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -850,7 +868,7 @@
|
|||
v-model="panelRadiusLocal"
|
||||
name="panelRadius"
|
||||
:label="$t('settings.panelRadius')"
|
||||
:fallback="previewTheme.radii.panel"
|
||||
:fallback="previewTheme.radii?.panel"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -858,7 +876,7 @@
|
|||
v-model="avatarRadiusLocal"
|
||||
name="avatarRadius"
|
||||
:label="$t('settings.avatarRadius')"
|
||||
:fallback="previewTheme.radii.avatar"
|
||||
:fallback="previewTheme.radii?.avatar"
|
||||
max="28"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -866,7 +884,7 @@
|
|||
v-model="avatarAltRadiusLocal"
|
||||
name="avatarAltRadius"
|
||||
:label="$t('settings.avatarAltRadius')"
|
||||
:fallback="previewTheme.radii.avatarAlt"
|
||||
:fallback="previewTheme.radii?.avatarAlt"
|
||||
max="28"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -874,7 +892,7 @@
|
|||
v-model="attachmentRadiusLocal"
|
||||
name="attachmentRadius"
|
||||
:label="$t('settings.attachmentRadius')"
|
||||
:fallback="previewTheme.radii.attachment"
|
||||
:fallback="previewTheme.radii?.attachment"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -882,7 +900,7 @@
|
|||
v-model="tooltipRadiusLocal"
|
||||
name="tooltipRadius"
|
||||
:label="$t('settings.tooltipRadius')"
|
||||
:fallback="previewTheme.radii.tooltip"
|
||||
:fallback="previewTheme.radii?.tooltip"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -890,7 +908,7 @@
|
|||
v-model="chatMessageRadiusLocal"
|
||||
name="chatMessageRadius"
|
||||
:label="$t('settings.chatMessageRadius')"
|
||||
:fallback="previewTheme.radii.chatMessage || 2"
|
||||
:fallback="previewTheme.radii?.chatMessage || 2"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -919,24 +937,14 @@
|
|||
</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"
|
||||
|
|
@ -947,38 +955,12 @@
|
|||
</div>
|
||||
<ShadowControl
|
||||
v-model="currentShadow"
|
||||
:ready="!!currentShadowFallback"
|
||||
:separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
|
||||
:fallback="currentShadowFallback"
|
||||
:static-vars="previewTheme.colors"
|
||||
:compact="true"
|
||||
/>
|
||||
<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"
|
||||
|
|
@ -996,26 +978,26 @@
|
|||
v-model="fontsLocal.interface"
|
||||
name="ui"
|
||||
:label="$t('settings.style.fonts.components.interface')"
|
||||
:fallback="previewTheme.fonts.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"
|
||||
:fallback="previewTheme.fonts?.input"
|
||||
/>
|
||||
<FontControl
|
||||
v-model="fontsLocal.post"
|
||||
name="post"
|
||||
:label="$t('settings.style.fonts.components.post')"
|
||||
:fallback="previewTheme.fonts.post"
|
||||
:fallback="previewTheme.fonts?.post"
|
||||
/>
|
||||
<FontControl
|
||||
v-model="fontsLocal.postCode"
|
||||
name="postCode"
|
||||
:label="$t('settings.style.fonts.components.postCode')"
|
||||
:fallback="previewTheme.fonts.postCode"
|
||||
:fallback="previewTheme.fonts?.postCode"
|
||||
/>
|
||||
</div>
|
||||
</tab-switcher>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue