@ -1,5 +1,8 @@
< template >
< template >
< div class = "theme-tab" >
< div class = "theme-tab" >
< div class = "alert warning" >
{ { $t ( "settings.style.themes2_outdated" ) } }
< / div >
< div class = "presets-container" >
< div class = "presets-container" >
< div class = "save-load" >
< div class = "save-load" >
< div
< div
@ -120,7 +123,19 @@
< / div >
< / div >
< / div >
< / div >
< preview :style ="previewRules" / >
<!-- 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" / >
< div >
< button
class = "btn button-default"
@ click = "updateTheme3Preview"
>
{ { $t ( "settings.style.update_preview" ) } }
< / button >
< / div >
< keep -alive >
< keep -alive >
< tab -switcher key = "style-tweak" >
< tab -switcher key = "style-tweak" >
@ -156,7 +171,7 @@
< OpacityInput
< OpacityInput
v - model = "bgOpacityLocal"
v - model = "bgOpacityLocal"
name = "bgOpacity"
name = "bgOpacity"
: fallback = "previewTheme.opacity .bg"
: fallback = "previewTheme.opacity ? .bg"
/ >
/ >
< ColorInput
< ColorInput
v - model = "textColorLocal"
v - model = "textColorLocal"
@ -167,14 +182,14 @@
< ColorInput
< ColorInput
v - model = "accentColorLocal"
v - model = "accentColorLocal"
name = "accentColor"
name = "accentColor"
: fallback = "previewTheme.colors .link"
: fallback = "previewTheme.colors ? .link"
: label = "$t('settings.accent')"
: label = "$t('settings.accent')"
: show - optional - tickbox = "typeof linkColorLocal !== 'undefined'"
: show - optional - tickbox = "typeof linkColorLocal !== 'undefined'"
/ >
/ >
< ColorInput
< ColorInput
v - model = "linkColorLocal"
v - model = "linkColorLocal"
name = "linkColor"
name = "linkColor"
: fallback = "previewTheme.colors .accent"
: fallback = "previewTheme.colors ? .accent"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
: show - optional - tickbox = "typeof accentColorLocal !== 'undefined'"
: show - optional - tickbox = "typeof accentColorLocal !== 'undefined'"
/ >
/ >
@ -190,13 +205,13 @@
v - model = "fgTextColorLocal"
v - model = "fgTextColorLocal"
name = "fgTextColor"
name = "fgTextColor"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .fgText"
: fallback = "previewTheme.colors ? .fgText"
/ >
/ >
< ColorInput
< ColorInput
v - model = "fgLinkColorLocal"
v - model = "fgLinkColorLocal"
name = "fgLinkColor"
name = "fgLinkColor"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
: fallback = "previewTheme.colors .fgLink"
: fallback = "previewTheme.colors ? .fgLink"
/ >
/ >
< p > { { $t ( 'settings.style.common_colors.foreground_hint' ) } } < / p >
< p > { { $t ( 'settings.style.common_colors.foreground_hint' ) } } < / p >
< / div >
< / div >
@ -256,14 +271,14 @@
< ColorInput
< ColorInput
v - model = "postLinkColorLocal"
v - model = "postLinkColorLocal"
name = "postLinkColor"
name = "postLinkColor"
: fallback = "previewTheme.colors .accent"
: fallback = "previewTheme.colors ? .accent"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.postLink" / >
< ContrastRatio :contrast ="previewContrast.postLink" / >
< ColorInput
< ColorInput
v - model = "postGreentextColorLocal"
v - model = "postGreentextColorLocal"
name = "postGreentextColor"
name = "postGreentextColor"
: fallback = "previewTheme.colors .cGreen"
: fallback = "previewTheme.colors ? .cGreen"
: label = "$t('settings.greentext')"
: label = "$t('settings.greentext')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.postGreentext" / >
< ContrastRatio :contrast ="previewContrast.postGreentext" / >
@ -272,13 +287,13 @@
v - model = "alertErrorColorLocal"
v - model = "alertErrorColorLocal"
name = "alertError"
name = "alertError"
: label = "$t('settings.style.advanced_colors.alert_error')"
: label = "$t('settings.style.advanced_colors.alert_error')"
: fallback = "previewTheme.colors .alertError"
: fallback = "previewTheme.colors ? .alertError"
/ >
/ >
< ColorInput
< ColorInput
v - model = "alertErrorTextColorLocal"
v - model = "alertErrorTextColorLocal"
name = "alertErrorText"
name = "alertErrorText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .alertErrorText"
: fallback = "previewTheme.colors ? .alertErrorText"
/ >
/ >
< ContrastRatio
< ContrastRatio
: contrast = "previewContrast.alertErrorText"
: contrast = "previewContrast.alertErrorText"
@ -288,13 +303,13 @@
v - model = "alertWarningColorLocal"
v - model = "alertWarningColorLocal"
name = "alertWarning"
name = "alertWarning"
: label = "$t('settings.style.advanced_colors.alert_warning')"
: label = "$t('settings.style.advanced_colors.alert_warning')"
: fallback = "previewTheme.colors .alertWarning"
: fallback = "previewTheme.colors ? .alertWarning"
/ >
/ >
< ColorInput
< ColorInput
v - model = "alertWarningTextColorLocal"
v - model = "alertWarningTextColorLocal"
name = "alertWarningText"
name = "alertWarningText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .alertWarningText"
: fallback = "previewTheme.colors ? .alertWarningText"
/ >
/ >
< ContrastRatio
< ContrastRatio
: contrast = "previewContrast.alertWarningText"
: contrast = "previewContrast.alertWarningText"
@ -304,13 +319,13 @@
v - model = "alertNeutralColorLocal"
v - model = "alertNeutralColorLocal"
name = "alertNeutral"
name = "alertNeutral"
: label = "$t('settings.style.advanced_colors.alert_neutral')"
: label = "$t('settings.style.advanced_colors.alert_neutral')"
: fallback = "previewTheme.colors .alertNeutral"
: fallback = "previewTheme.colors ? .alertNeutral"
/ >
/ >
< ColorInput
< ColorInput
v - model = "alertNeutralTextColorLocal"
v - model = "alertNeutralTextColorLocal"
name = "alertNeutralText"
name = "alertNeutralText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .alertNeutralText"
: fallback = "previewTheme.colors ? .alertNeutralText"
/ >
/ >
< ContrastRatio
< ContrastRatio
: contrast = "previewContrast.alertNeutralText"
: contrast = "previewContrast.alertNeutralText"
@ -319,7 +334,7 @@
< OpacityInput
< OpacityInput
v - model = "alertOpacityLocal"
v - model = "alertOpacityLocal"
name = "alertOpacity"
name = "alertOpacity"
: fallback = "previewTheme.opacity .alert"
: fallback = "previewTheme.opacity ? .alert"
/ >
/ >
< / div >
< / div >
< div class = "color-item" >
< div class = "color-item" >
@ -328,13 +343,13 @@
v - model = "badgeNotificationColorLocal"
v - model = "badgeNotificationColorLocal"
name = "badgeNotification"
name = "badgeNotification"
: label = "$t('settings.style.advanced_colors.badge_notification')"
: label = "$t('settings.style.advanced_colors.badge_notification')"
: fallback = "previewTheme.colors .badgeNotification"
: fallback = "previewTheme.colors ? .badgeNotification"
/ >
/ >
< ColorInput
< ColorInput
v - model = "badgeNotificationTextColorLocal"
v - model = "badgeNotificationTextColorLocal"
name = "badgeNotificationText"
name = "badgeNotificationText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .badgeNotificationText"
: fallback = "previewTheme.colors ? .badgeNotificationText"
/ >
/ >
< ContrastRatio
< ContrastRatio
: contrast = "previewContrast.badgeNotificationText"
: contrast = "previewContrast.badgeNotificationText"
@ -346,19 +361,19 @@
< ColorInput
< ColorInput
v - model = "panelColorLocal"
v - model = "panelColorLocal"
name = "panelColor"
name = "panelColor"
: fallback = "previewTheme.colors .panel"
: fallback = "previewTheme.colors ? .panel"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "panelOpacityLocal"
v - model = "panelOpacityLocal"
name = "panelOpacity"
name = "panelOpacity"
: fallback = "previewTheme.opacity .panel"
: fallback = "previewTheme.opacity ? .panel"
: disabled = "panelColorLocal === 'transparent'"
: disabled = "panelColorLocal === 'transparent'"
/ >
/ >
< ColorInput
< ColorInput
v - model = "panelTextColorLocal"
v - model = "panelTextColorLocal"
name = "panelTextColor"
name = "panelTextColor"
: fallback = "previewTheme.colors .panelText"
: fallback = "previewTheme.colors ? .panelText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio
< ContrastRatio
@ -368,7 +383,7 @@
< ColorInput
< ColorInput
v - model = "panelLinkColorLocal"
v - model = "panelLinkColorLocal"
name = "panelLinkColor"
name = "panelLinkColor"
: fallback = "previewTheme.colors .panelLink"
: fallback = "previewTheme.colors ? .panelLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
/ >
/ >
< ContrastRatio
< ContrastRatio
@ -381,20 +396,20 @@
< ColorInput
< ColorInput
v - model = "topBarColorLocal"
v - model = "topBarColorLocal"
name = "topBarColor"
name = "topBarColor"
: fallback = "previewTheme.colors .topBar"
: fallback = "previewTheme.colors ? .topBar"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "topBarTextColorLocal"
v - model = "topBarTextColorLocal"
name = "topBarTextColor"
name = "topBarTextColor"
: fallback = "previewTheme.colors .topBarText"
: fallback = "previewTheme.colors ? .topBarText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.topBarText" / >
< ContrastRatio :contrast ="previewContrast.topBarText" / >
< ColorInput
< ColorInput
v - model = "topBarLinkColorLocal"
v - model = "topBarLinkColorLocal"
name = "topBarLinkColor"
name = "topBarLinkColor"
: fallback = "previewTheme.colors .topBarLink"
: fallback = "previewTheme.colors ? .topBarLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.topBarLink" / >
< ContrastRatio :contrast ="previewContrast.topBarLink" / >
@ -404,19 +419,19 @@
< ColorInput
< ColorInput
v - model = "inputColorLocal"
v - model = "inputColorLocal"
name = "inputColor"
name = "inputColor"
: fallback = "previewTheme.colors .input"
: fallback = "previewTheme.colors ? .input"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "inputOpacityLocal"
v - model = "inputOpacityLocal"
name = "inputOpacity"
name = "inputOpacity"
: fallback = "previewTheme.opacity .input"
: fallback = "previewTheme.opacity ? .input"
: disabled = "inputColorLocal === 'transparent'"
: disabled = "inputColorLocal === 'transparent'"
/ >
/ >
< ColorInput
< ColorInput
v - model = "inputTextColorLocal"
v - model = "inputTextColorLocal"
name = "inputTextColor"
name = "inputTextColor"
: fallback = "previewTheme.colors .inputText"
: fallback = "previewTheme.colors ? .inputText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.inputText" / >
< ContrastRatio :contrast ="previewContrast.inputText" / >
@ -426,33 +441,33 @@
< ColorInput
< ColorInput
v - model = "btnColorLocal"
v - model = "btnColorLocal"
name = "btnColor"
name = "btnColor"
: fallback = "previewTheme.colors .btn"
: fallback = "previewTheme.colors ? .btn"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "btnOpacityLocal"
v - model = "btnOpacityLocal"
name = "btnOpacity"
name = "btnOpacity"
: fallback = "previewTheme.opacity .btn"
: fallback = "previewTheme.opacity ? .btn"
: disabled = "btnColorLocal === 'transparent'"
: disabled = "btnColorLocal === 'transparent'"
/ >
/ >
< ColorInput
< ColorInput
v - model = "btnTextColorLocal"
v - model = "btnTextColorLocal"
name = "btnTextColor"
name = "btnTextColor"
: fallback = "previewTheme.colors .btnText"
: fallback = "previewTheme.colors ? .btnText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnText" / >
< ContrastRatio :contrast ="previewContrast.btnText" / >
< ColorInput
< ColorInput
v - model = "btnPanelTextColorLocal"
v - model = "btnPanelTextColorLocal"
name = "btnPanelTextColor"
name = "btnPanelTextColor"
: fallback = "previewTheme.colors .btnPanelText"
: fallback = "previewTheme.colors ? .btnPanelText"
: label = "$t('settings.style.advanced_colors.panel_header')"
: label = "$t('settings.style.advanced_colors.panel_header')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnPanelText" / >
< ContrastRatio :contrast ="previewContrast.btnPanelText" / >
< ColorInput
< ColorInput
v - model = "btnTopBarTextColorLocal"
v - model = "btnTopBarTextColorLocal"
name = "btnTopBarTextColor"
name = "btnTopBarTextColor"
: fallback = "previewTheme.colors .btnTopBarText"
: fallback = "previewTheme.colors ? .btnTopBarText"
: label = "$t('settings.style.advanced_colors.top_bar')"
: label = "$t('settings.style.advanced_colors.top_bar')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnTopBarText" / >
< ContrastRatio :contrast ="previewContrast.btnTopBarText" / >
@ -460,27 +475,27 @@
< ColorInput
< ColorInput
v - model = "btnPressedColorLocal"
v - model = "btnPressedColorLocal"
name = "btnPressedColor"
name = "btnPressedColor"
: fallback = "previewTheme.colors .btnPressed"
: fallback = "previewTheme.colors ? .btnPressed"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "btnPressedTextColorLocal"
v - model = "btnPressedTextColorLocal"
name = "btnPressedTextColor"
name = "btnPressedTextColor"
: fallback = "previewTheme.colors .btnPressedText"
: fallback = "previewTheme.colors ? .btnPressedText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnPressedText" / >
< ContrastRatio :contrast ="previewContrast.btnPressedText" / >
< ColorInput
< ColorInput
v - model = "btnPressedPanelTextColorLocal"
v - model = "btnPressedPanelTextColorLocal"
name = "btnPressedPanelTextColor"
name = "btnPressedPanelTextColor"
: fallback = "previewTheme.colors .btnPressedPanelText"
: fallback = "previewTheme.colors ? .btnPressedPanelText"
: label = "$t('settings.style.advanced_colors.panel_header')"
: label = "$t('settings.style.advanced_colors.panel_header')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnPressedPanelText" / >
< ContrastRatio :contrast ="previewContrast.btnPressedPanelText" / >
< ColorInput
< ColorInput
v - model = "btnPressedTopBarTextColorLocal"
v - model = "btnPressedTopBarTextColorLocal"
name = "btnPressedTopBarTextColor"
name = "btnPressedTopBarTextColor"
: fallback = "previewTheme.colors .btnPressedTopBarText"
: fallback = "previewTheme.colors ? .btnPressedTopBarText"
: label = "$t('settings.style.advanced_colors.top_bar')"
: label = "$t('settings.style.advanced_colors.top_bar')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnPressedTopBarText" / >
< ContrastRatio :contrast ="previewContrast.btnPressedTopBarText" / >
@ -488,52 +503,52 @@
< ColorInput
< ColorInput
v - model = "btnDisabledColorLocal"
v - model = "btnDisabledColorLocal"
name = "btnDisabledColor"
name = "btnDisabledColor"
: fallback = "previewTheme.colors .btnDisabled"
: fallback = "previewTheme.colors ? .btnDisabled"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "btnDisabledTextColorLocal"
v - model = "btnDisabledTextColorLocal"
name = "btnDisabledTextColor"
name = "btnDisabledTextColor"
: fallback = "previewTheme.colors .btnDisabledText"
: fallback = "previewTheme.colors ? .btnDisabledText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "btnDisabledPanelTextColorLocal"
v - model = "btnDisabledPanelTextColorLocal"
name = "btnDisabledPanelTextColor"
name = "btnDisabledPanelTextColor"
: fallback = "previewTheme.colors .btnDisabledPanelText"
: fallback = "previewTheme.colors ? .btnDisabledPanelText"
: label = "$t('settings.style.advanced_colors.panel_header')"
: label = "$t('settings.style.advanced_colors.panel_header')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "btnDisabledTopBarTextColorLocal"
v - model = "btnDisabledTopBarTextColorLocal"
name = "btnDisabledTopBarTextColor"
name = "btnDisabledTopBarTextColor"
: fallback = "previewTheme.colors .btnDisabledTopBarText"
: fallback = "previewTheme.colors ? .btnDisabledTopBarText"
: label = "$t('settings.style.advanced_colors.top_bar')"
: label = "$t('settings.style.advanced_colors.top_bar')"
/ >
/ >
< h5 > { { $t ( 'settings.style.advanced_colors.toggled' ) } } < / h5 >
< h5 > { { $t ( 'settings.style.advanced_colors.toggled' ) } } < / h5 >
< ColorInput
< ColorInput
v - model = "btnToggledColorLocal"
v - model = "btnToggledColorLocal"
name = "btnToggledColor"
name = "btnToggledColor"
: fallback = "previewTheme.colors .btnToggled"
: fallback = "previewTheme.colors ? .btnToggled"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "btnToggledTextColorLocal"
v - model = "btnToggledTextColorLocal"
name = "btnToggledTextColor"
name = "btnToggledTextColor"
: fallback = "previewTheme.colors .btnToggledText"
: fallback = "previewTheme.colors ? .btnToggledText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnToggledText" / >
< ContrastRatio :contrast ="previewContrast.btnToggledText" / >
< ColorInput
< ColorInput
v - model = "btnToggledPanelTextColorLocal"
v - model = "btnToggledPanelTextColorLocal"
name = "btnToggledPanelTextColor"
name = "btnToggledPanelTextColor"
: fallback = "previewTheme.colors .btnToggledPanelText"
: fallback = "previewTheme.colors ? .btnToggledPanelText"
: label = "$t('settings.style.advanced_colors.panel_header')"
: label = "$t('settings.style.advanced_colors.panel_header')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnToggledPanelText" / >
< ContrastRatio :contrast ="previewContrast.btnToggledPanelText" / >
< ColorInput
< ColorInput
v - model = "btnToggledTopBarTextColorLocal"
v - model = "btnToggledTopBarTextColorLocal"
name = "btnToggledTopBarTextColor"
name = "btnToggledTopBarTextColor"
: fallback = "previewTheme.colors .btnToggledTopBarText"
: fallback = "previewTheme.colors ? .btnToggledTopBarText"
: label = "$t('settings.style.advanced_colors.top_bar')"
: label = "$t('settings.style.advanced_colors.top_bar')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.btnToggledTopBarText" / >
< ContrastRatio :contrast ="previewContrast.btnToggledTopBarText" / >
@ -543,20 +558,20 @@
< ColorInput
< ColorInput
v - model = "tabColorLocal"
v - model = "tabColorLocal"
name = "tabColor"
name = "tabColor"
: fallback = "previewTheme.colors .tab"
: fallback = "previewTheme.colors ? .tab"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "tabTextColorLocal"
v - model = "tabTextColorLocal"
name = "tabTextColor"
name = "tabTextColor"
: fallback = "previewTheme.colors .tabText"
: fallback = "previewTheme.colors ? .tabText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.tabText" / >
< ContrastRatio :contrast ="previewContrast.tabText" / >
< ColorInput
< ColorInput
v - model = "tabActiveTextColorLocal"
v - model = "tabActiveTextColorLocal"
name = "tabActiveTextColor"
name = "tabActiveTextColor"
: fallback = "previewTheme.colors .tabActiveText"
: fallback = "previewTheme.colors ? .tabActiveText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.tabActiveText" / >
< ContrastRatio :contrast ="previewContrast.tabActiveText" / >
@ -566,13 +581,13 @@
< ColorInput
< ColorInput
v - model = "borderColorLocal"
v - model = "borderColorLocal"
name = "borderColor"
name = "borderColor"
: fallback = "previewTheme.colors .border"
: fallback = "previewTheme.colors ? .border"
: label = "$t('settings.style.common.color')"
: label = "$t('settings.style.common.color')"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "borderOpacityLocal"
v - model = "borderOpacityLocal"
name = "borderOpacity"
name = "borderOpacity"
: fallback = "previewTheme.opacity .border"
: fallback = "previewTheme.opacity ? .border"
: disabled = "borderColorLocal === 'transparent'"
: disabled = "borderColorLocal === 'transparent'"
/ >
/ >
< / div >
< / div >
@ -581,25 +596,25 @@
< ColorInput
< ColorInput
v - model = "faintColorLocal"
v - model = "faintColorLocal"
name = "faintColor"
name = "faintColor"
: fallback = "previewTheme.colors .faint"
: fallback = "previewTheme.colors ? .faint"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "faintLinkColorLocal"
v - model = "faintLinkColorLocal"
name = "faintLinkColor"
name = "faintLinkColor"
: fallback = "previewTheme.colors .faintLink"
: fallback = "previewTheme.colors ? .faintLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "panelFaintColorLocal"
v - model = "panelFaintColorLocal"
name = "panelFaintColor"
name = "panelFaintColor"
: fallback = "previewTheme.colors .panelFaint"
: fallback = "previewTheme.colors ? .panelFaint"
: label = "$t('settings.style.advanced_colors.panel_header')"
: label = "$t('settings.style.advanced_colors.panel_header')"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "faintOpacityLocal"
v - model = "faintOpacityLocal"
name = "faintOpacity"
name = "faintOpacity"
: fallback = "previewTheme.opacity .faint"
: fallback = "previewTheme.opacity ? .faint"
/ >
/ >
< / div >
< / div >
< div class = "color-item" >
< div class = "color-item" >
@ -608,12 +623,12 @@
v - model = "underlayColorLocal"
v - model = "underlayColorLocal"
name = "underlay"
name = "underlay"
: label = "$t('settings.style.advanced_colors.underlay')"
: label = "$t('settings.style.advanced_colors.underlay')"
: fallback = "previewTheme.colors .underlay"
: fallback = "previewTheme.colors ? .underlay"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "underlayOpacityLocal"
v - model = "underlayOpacityLocal"
name = "underlayOpacity"
name = "underlayOpacity"
: fallback = "previewTheme.opacity .underlay"
: fallback = "previewTheme.opacity ? .underlay"
: disabled = "underlayOpacityLocal === 'transparent'"
: disabled = "underlayOpacityLocal === 'transparent'"
/ >
/ >
< / div >
< / div >
@ -623,7 +638,7 @@
v - model = "wallpaperColorLocal"
v - model = "wallpaperColorLocal"
name = "wallpaper"
name = "wallpaper"
: label = "$t('settings.style.advanced_colors.wallpaper')"
: label = "$t('settings.style.advanced_colors.wallpaper')"
: fallback = "previewTheme.colors .wallpaper"
: fallback = "previewTheme.colors ? .wallpaper"
/ >
/ >
< / div >
< / div >
< div class = "color-item" >
< div class = "color-item" >
@ -632,13 +647,13 @@
v - model = "pollColorLocal"
v - model = "pollColorLocal"
name = "poll"
name = "poll"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
: fallback = "previewTheme.colors .poll"
: fallback = "previewTheme.colors ? .poll"
/ >
/ >
< ColorInput
< ColorInput
v - model = "pollTextColorLocal"
v - model = "pollTextColorLocal"
name = "pollText"
name = "pollText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .pollText"
: fallback = "previewTheme.colors ? .pollText"
/ >
/ >
< / div >
< / div >
< div class = "color-item" >
< div class = "color-item" >
@ -647,7 +662,7 @@
v - model = "iconColorLocal"
v - model = "iconColorLocal"
name = "icon"
name = "icon"
: label = "$t('settings.style.advanced_colors.icons')"
: label = "$t('settings.style.advanced_colors.icons')"
: fallback = "previewTheme.colors .icon"
: fallback = "previewTheme.colors ? .icon"
/ >
/ >
< / div >
< / div >
< div class = "color-item" >
< div class = "color-item" >
@ -656,20 +671,20 @@
v - model = "highlightColorLocal"
v - model = "highlightColorLocal"
name = "highlight"
name = "highlight"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
: fallback = "previewTheme.colors .highlight"
: fallback = "previewTheme.colors ? .highlight"
/ >
/ >
< ColorInput
< ColorInput
v - model = "highlightTextColorLocal"
v - model = "highlightTextColorLocal"
name = "highlightText"
name = "highlightText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .highlightText"
: fallback = "previewTheme.colors ? .highlightText"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.highlightText" / >
< ContrastRatio :contrast ="previewContrast.highlightText" / >
< ColorInput
< ColorInput
v - model = "highlightLinkColorLocal"
v - model = "highlightLinkColorLocal"
name = "highlightLink"
name = "highlightLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
: fallback = "previewTheme.colors .highlightLink"
: fallback = "previewTheme.colors ? .highlightLink"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.highlightLink" / >
< ContrastRatio :contrast ="previewContrast.highlightLink" / >
< / div >
< / div >
@ -679,26 +694,26 @@
v - model = "popoverColorLocal"
v - model = "popoverColorLocal"
name = "popover"
name = "popover"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
: fallback = "previewTheme.colors .popover"
: fallback = "previewTheme.colors ? .popover"
/ >
/ >
< OpacityInput
< OpacityInput
v - model = "popoverOpacityLocal"
v - model = "popoverOpacityLocal"
name = "popoverOpacity"
name = "popoverOpacity"
: fallback = "previewTheme.opacity .popover"
: fallback = "previewTheme.opacity ? .popover"
: disabled = "popoverOpacityLocal === 'transparent'"
: disabled = "popoverOpacityLocal === 'transparent'"
/ >
/ >
< ColorInput
< ColorInput
v - model = "popoverTextColorLocal"
v - model = "popoverTextColorLocal"
name = "popoverText"
name = "popoverText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .popoverText"
: fallback = "previewTheme.colors ? .popoverText"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.popoverText" / >
< ContrastRatio :contrast ="previewContrast.popoverText" / >
< ColorInput
< ColorInput
v - model = "popoverLinkColorLocal"
v - model = "popoverLinkColorLocal"
name = "popoverLink"
name = "popoverLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
: fallback = "previewTheme.colors .popoverLink"
: fallback = "previewTheme.colors ? .popoverLink"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.popoverLink" / >
< ContrastRatio :contrast ="previewContrast.popoverLink" / >
< / div >
< / div >
@ -708,20 +723,20 @@
v - model = "selectedPostColorLocal"
v - model = "selectedPostColorLocal"
name = "selectedPost"
name = "selectedPost"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
: fallback = "previewTheme.colors .selectedPost"
: fallback = "previewTheme.colors ? .selectedPost"
/ >
/ >
< ColorInput
< ColorInput
v - model = "selectedPostTextColorLocal"
v - model = "selectedPostTextColorLocal"
name = "selectedPostText"
name = "selectedPostText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .selectedPostText"
: fallback = "previewTheme.colors ? .selectedPostText"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.selectedPostText" / >
< ContrastRatio :contrast ="previewContrast.selectedPostText" / >
< ColorInput
< ColorInput
v - model = "selectedPostLinkColorLocal"
v - model = "selectedPostLinkColorLocal"
name = "selectedPostLink"
name = "selectedPostLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
: fallback = "previewTheme.colors .selectedPostLink"
: fallback = "previewTheme.colors ? .selectedPostLink"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.selectedPostLink" / >
< ContrastRatio :contrast ="previewContrast.selectedPostLink" / >
< / div >
< / div >
@ -731,20 +746,20 @@
v - model = "selectedMenuColorLocal"
v - model = "selectedMenuColorLocal"
name = "selectedMenu"
name = "selectedMenu"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
: fallback = "previewTheme.colors .selectedMenu"
: fallback = "previewTheme.colors ? .selectedMenu"
/ >
/ >
< ColorInput
< ColorInput
v - model = "selectedMenuTextColorLocal"
v - model = "selectedMenuTextColorLocal"
name = "selectedMenuText"
name = "selectedMenuText"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
: fallback = "previewTheme.colors .selectedMenuText"
: fallback = "previewTheme.colors ? .selectedMenuText"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.selectedMenuText" / >
< ContrastRatio :contrast ="previewContrast.selectedMenuText" / >
< ColorInput
< ColorInput
v - model = "selectedMenuLinkColorLocal"
v - model = "selectedMenuLinkColorLocal"
name = "selectedMenuLink"
name = "selectedMenuLink"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
: fallback = "previewTheme.colors .selectedMenuLink"
: fallback = "previewTheme.colors ? .selectedMenuLink"
/ >
/ >
< ContrastRatio :contrast ="previewContrast.selectedMenuLink" / >
< ContrastRatio :contrast ="previewContrast.selectedMenuLink" / >
< / div >
< / div >
@ -753,57 +768,57 @@
< ColorInput
< ColorInput
v - model = "chatBgColorLocal"
v - model = "chatBgColorLocal"
name = "chatBgColor"
name = "chatBgColor"
: fallback = "previewTheme.colors .bg"
: fallback = "previewTheme.colors ? .bg"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< h5 > { { $t ( 'settings.style.advanced_colors.chat.incoming' ) } } < / h5 >
< h5 > { { $t ( 'settings.style.advanced_colors.chat.incoming' ) } } < / h5 >
< ColorInput
< ColorInput
v - model = "chatMessageIncomingBgColorLocal"
v - model = "chatMessageIncomingBgColorLocal"
name = "chatMessageIncomingBgColor"
name = "chatMessageIncomingBgColor"
: fallback = "previewTheme.colors .bg"
: fallback = "previewTheme.colors ? .bg"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "chatMessageIncomingTextColorLocal"
v - model = "chatMessageIncomingTextColorLocal"
name = "chatMessageIncomingTextColor"
name = "chatMessageIncomingTextColor"
: fallback = "previewTheme.colors .text"
: fallback = "previewTheme.colors ? .text"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "chatMessageIncomingLinkColorLocal"
v - model = "chatMessageIncomingLinkColorLocal"
name = "chatMessageIncomingLinkColor"
name = "chatMessageIncomingLinkColor"
: fallback = "previewTheme.colors .link"
: fallback = "previewTheme.colors ? .link"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "chatMessageIncomingBorderColorLocal"
v - model = "chatMessageIncomingBorderColorLocal"
name = "chatMessageIncomingBorderLinkColor"
name = "chatMessageIncomingBorderLinkColor"
: fallback = "previewTheme.colors .fg"
: fallback = "previewTheme.colors ? .fg"
: label = "$t('settings.style.advanced_colors.chat.border')"
: label = "$t('settings.style.advanced_colors.chat.border')"
/ >
/ >
< h5 > { { $t ( 'settings.style.advanced_colors.chat.outgoing' ) } } < / h5 >
< h5 > { { $t ( 'settings.style.advanced_colors.chat.outgoing' ) } } < / h5 >
< ColorInput
< ColorInput
v - model = "chatMessageOutgoingBgColorLocal"
v - model = "chatMessageOutgoingBgColorLocal"
name = "chatMessageOutgoingBgColor"
name = "chatMessageOutgoingBgColor"
: fallback = "previewTheme.colors .bg"
: fallback = "previewTheme.colors ? .bg"
: label = "$t('settings.background')"
: label = "$t('settings.background')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "chatMessageOutgoingTextColorLocal"
v - model = "chatMessageOutgoingTextColorLocal"
name = "chatMessageOutgoingTextColor"
name = "chatMessageOutgoingTextColor"
: fallback = "previewTheme.colors .text"
: fallback = "previewTheme.colors ? .text"
: label = "$t('settings.text')"
: label = "$t('settings.text')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "chatMessageOutgoingLinkColorLocal"
v - model = "chatMessageOutgoingLinkColorLocal"
name = "chatMessageOutgoingLinkColor"
name = "chatMessageOutgoingLinkColor"
: fallback = "previewTheme.colors .link"
: fallback = "previewTheme.colors ? .link"
: label = "$t('settings.links')"
: label = "$t('settings.links')"
/ >
/ >
< ColorInput
< ColorInput
v - model = "chatMessageOutgoingBorderColorLocal"
v - model = "chatMessageOutgoingBorderColorLocal"
name = "chatMessageOutgoingBorderLinkColor"
name = "chatMessageOutgoingBorderLinkColor"
: fallback = "previewTheme.colors .bg"
: fallback = "previewTheme.colors ? .bg"
: label = "$t('settings.style.advanced_colors.chat.border')"
: label = "$t('settings.style.advanced_colors.chat.border')"
/ >
/ >
< / div >
< / div >
@ -826,7 +841,7 @@
v - model = "btnRadiusLocal"
v - model = "btnRadiusLocal"
name = "btnRadius"
name = "btnRadius"
: label = "$t('settings.btnRadius')"
: label = "$t('settings.btnRadius')"
: fallback = "previewTheme.radii .btn"
: fallback = "previewTheme.radii ? .btn"
max = "16"
max = "16"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -834,7 +849,7 @@
v - model = "inputRadiusLocal"
v - model = "inputRadiusLocal"
name = "inputRadius"
name = "inputRadius"
: label = "$t('settings.inputRadius')"
: label = "$t('settings.inputRadius')"
: fallback = "previewTheme.radii .input"
: fallback = "previewTheme.radii ? .input"
max = "9"
max = "9"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -842,7 +857,7 @@
v - model = "checkboxRadiusLocal"
v - model = "checkboxRadiusLocal"
name = "checkboxRadius"
name = "checkboxRadius"
: label = "$t('settings.checkboxRadius')"
: label = "$t('settings.checkboxRadius')"
: fallback = "previewTheme.radii .checkbox"
: fallback = "previewTheme.radii ? .checkbox"
max = "16"
max = "16"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -850,7 +865,7 @@
v - model = "panelRadiusLocal"
v - model = "panelRadiusLocal"
name = "panelRadius"
name = "panelRadius"
: label = "$t('settings.panelRadius')"
: label = "$t('settings.panelRadius')"
: fallback = "previewTheme.radii .panel"
: fallback = "previewTheme.radii ? .panel"
max = "50"
max = "50"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -858,7 +873,7 @@
v - model = "avatarRadiusLocal"
v - model = "avatarRadiusLocal"
name = "avatarRadius"
name = "avatarRadius"
: label = "$t('settings.avatarRadius')"
: label = "$t('settings.avatarRadius')"
: fallback = "previewTheme.radii .avatar"
: fallback = "previewTheme.radii ? .avatar"
max = "28"
max = "28"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -866,7 +881,7 @@
v - model = "avatarAltRadiusLocal"
v - model = "avatarAltRadiusLocal"
name = "avatarAltRadius"
name = "avatarAltRadius"
: label = "$t('settings.avatarAltRadius')"
: label = "$t('settings.avatarAltRadius')"
: fallback = "previewTheme.radii .avatarAlt"
: fallback = "previewTheme.radii ? .avatarAlt"
max = "28"
max = "28"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -874,7 +889,7 @@
v - model = "attachmentRadiusLocal"
v - model = "attachmentRadiusLocal"
name = "attachmentRadius"
name = "attachmentRadius"
: label = "$t('settings.attachmentRadius')"
: label = "$t('settings.attachmentRadius')"
: fallback = "previewTheme.radii .attachment"
: fallback = "previewTheme.radii ? .attachment"
max = "50"
max = "50"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -882,7 +897,7 @@
v - model = "tooltipRadiusLocal"
v - model = "tooltipRadiusLocal"
name = "tooltipRadius"
name = "tooltipRadius"
: label = "$t('settings.tooltipRadius')"
: label = "$t('settings.tooltipRadius')"
: fallback = "previewTheme.radii .tooltip"
: fallback = "previewTheme.radii ? .tooltip"
max = "50"
max = "50"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -890,7 +905,7 @@
v - model = "chatMessageRadiusLocal"
v - model = "chatMessageRadiusLocal"
name = "chatMessageRadius"
name = "chatMessageRadius"
: label = "$t('settings.chatMessageRadius')"
: label = "$t('settings.chatMessageRadius')"
: fallback = "previewTheme.radii .chatMessage || 2"
: fallback = "previewTheme.radii ? .chatMessage || 2"
max = "50"
max = "50"
hard - min = "0"
hard - min = "0"
/ >
/ >
@ -996,26 +1011,26 @@
v - model = "fontsLocal.interface"
v - model = "fontsLocal.interface"
name = "ui"
name = "ui"
: label = "$t('settings.style.fonts.components.interface')"
: label = "$t('settings.style.fonts.components.interface')"
: fallback = "previewTheme.fonts .interface"
: fallback = "previewTheme.fonts ? .interface"
no - inherit = "1"
no - inherit = "1"
/ >
/ >
< FontControl
< FontControl
v - model = "fontsLocal.input"
v - model = "fontsLocal.input"
name = "input"
name = "input"
: label = "$t('settings.style.fonts.components.input')"
: label = "$t('settings.style.fonts.components.input')"
: fallback = "previewTheme.fonts .input"
: fallback = "previewTheme.fonts ? .input"
/ >
/ >
< FontControl
< FontControl
v - model = "fontsLocal.post"
v - model = "fontsLocal.post"
name = "post"
name = "post"
: label = "$t('settings.style.fonts.components.post')"
: label = "$t('settings.style.fonts.components.post')"
: fallback = "previewTheme.fonts .post"
: fallback = "previewTheme.fonts ? .post"
/ >
/ >
< FontControl
< FontControl
v - model = "fontsLocal.postCode"
v - model = "fontsLocal.postCode"
name = "postCode"
name = "postCode"
: label = "$t('settings.style.fonts.components.postCode')"
: label = "$t('settings.style.fonts.components.postCode')"
: fallback = "previewTheme.fonts .postCode"
: fallback = "previewTheme.fonts ? .postCode"
/ >
/ >
< / div >
< / div >
< / t a b - s w i t c h e r >
< / t a b - s w i t c h e r >