983 lines
35 KiB
Vue
983 lines
35 KiB
Vue
<template>
|
|
<div class="theme-tab">
|
|
<div class="presets-container">
|
|
<div class="save-load">
|
|
<div
|
|
v-if="themeWarning"
|
|
class="theme-warning"
|
|
>
|
|
<div class="alert warning">
|
|
{{ themeWarningHelp }}
|
|
</div>
|
|
<div class="buttons">
|
|
<template v-if="themeWarning.type === 'snapshot_source_mismatch'">
|
|
<button
|
|
class="btn button-default"
|
|
@click="forceLoad"
|
|
>
|
|
{{ $t('settings.style.switcher.use_source') }}
|
|
</button>
|
|
<button
|
|
class="btn button-default"
|
|
@click="forceSnapshot"
|
|
>
|
|
{{ $t('settings.style.switcher.use_snapshot') }}
|
|
</button>
|
|
</template>
|
|
<template v-else-if="themeWarning.noActionsPossible">
|
|
<button
|
|
class="btn button-default"
|
|
@click="dismissWarning"
|
|
>
|
|
{{ $t('general.dismiss') }}
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
class="btn button-default"
|
|
@click="forceLoad"
|
|
>
|
|
{{ $t('settings.style.switcher.load_theme') }}
|
|
</button>
|
|
<button
|
|
class="btn button-default"
|
|
@click="dismissWarning"
|
|
>
|
|
{{ $t('settings.style.switcher.keep_as_is') }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="top">
|
|
<div class="presets">
|
|
{{ $t('settings.presets') }}
|
|
<label
|
|
for="preset-switcher"
|
|
class="select"
|
|
>
|
|
<Select
|
|
id="preset-switcher"
|
|
v-model="selected"
|
|
class="preset-switcher"
|
|
>
|
|
<option
|
|
v-for="style in availableStyles"
|
|
:key="style.name"
|
|
:value="style.name || style[0]"
|
|
:style="{
|
|
backgroundColor: style[1] || (style.theme || style.source).colors.bg,
|
|
color: style[3] || (style.theme || style.source).colors.text
|
|
}"
|
|
>
|
|
{{ style[0] || style.name }}
|
|
</option>
|
|
</Select>
|
|
</label>
|
|
</div>
|
|
<div class="export-import">
|
|
<button
|
|
class="btn button-default"
|
|
@click="importTheme"
|
|
>
|
|
{{ $t("settings.import_theme") }}
|
|
</button>
|
|
<button
|
|
class="btn button-default"
|
|
@click="exportTheme"
|
|
>
|
|
{{ $t("settings.export_theme") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="save-load-options">
|
|
<span class="keep-option">
|
|
<Checkbox v-model="keepColor">
|
|
{{ $t('settings.style.switcher.keep_color') }}
|
|
</Checkbox>
|
|
</span>
|
|
<span class="keep-option">
|
|
<Checkbox v-model="keepShadows">
|
|
{{ $t('settings.style.switcher.keep_shadows') }}
|
|
</Checkbox>
|
|
</span>
|
|
<span class="keep-option">
|
|
<Checkbox v-model="keepOpacity">
|
|
{{ $t('settings.style.switcher.keep_opacity') }}
|
|
</Checkbox>
|
|
</span>
|
|
<span class="keep-option">
|
|
<Checkbox v-model="keepRoundness">
|
|
{{ $t('settings.style.switcher.keep_roundness') }}
|
|
</Checkbox>
|
|
</span>
|
|
<span class="keep-option">
|
|
<Checkbox v-model="keepFonts">
|
|
{{ $t('settings.style.switcher.keep_fonts') }}
|
|
</Checkbox>
|
|
</span>
|
|
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<preview :style="previewRules" />
|
|
|
|
<keep-alive>
|
|
<tab-switcher key="style-tweak">
|
|
<div
|
|
:label="$t('settings.style.common_colors._tab_label')"
|
|
class="color-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.theme_help') }}</p>
|
|
<div class="tab-header-buttons">
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearOpacity"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_opacity') }}
|
|
</button>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearV1"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p>{{ $t('settings.theme_help_v2_1') }}</p>
|
|
<h4>{{ $t('settings.style.common_colors.main') }}</h4>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="bgColorLocal"
|
|
name="bgColor"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="bgOpacityLocal"
|
|
name="bgOpacity"
|
|
:fallback="previewTheme.opacity.bg"
|
|
/>
|
|
<ColorInput
|
|
v-model="textColorLocal"
|
|
name="textColor"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgText" />
|
|
<ColorInput
|
|
v-model="accentColorLocal"
|
|
name="accentColor"
|
|
:fallback="previewTheme.colors.link"
|
|
:label="$t('settings.accent')"
|
|
:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
|
|
/>
|
|
<ColorInput
|
|
v-model="linkColorLocal"
|
|
name="linkColor"
|
|
:fallback="previewTheme.colors.accent"
|
|
:label="$t('settings.links')"
|
|
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="fgColorLocal"
|
|
name="fgColor"
|
|
:label="$t('settings.foreground')"
|
|
/>
|
|
<ColorInput
|
|
v-model="fgTextColorLocal"
|
|
name="fgTextColor"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.fgText"
|
|
/>
|
|
<ColorInput
|
|
v-model="fgLinkColorLocal"
|
|
name="fgLinkColor"
|
|
:label="$t('settings.links')"
|
|
:fallback="previewTheme.colors.fgLink"
|
|
/>
|
|
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
|
|
</div>
|
|
<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="cRedColorLocal"
|
|
name="cRedColor"
|
|
:label="$t('settings.cRed')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgCRed" />
|
|
<ColorInput
|
|
v-model="cBlueColorLocal"
|
|
name="cBlueColor"
|
|
:label="$t('settings.cBlue')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgCBlue" />
|
|
</div>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="cGreenColorLocal"
|
|
name="cGreenColor"
|
|
:label="$t('settings.cGreen')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgCGreen" />
|
|
<ColorInput
|
|
v-model="cOrangeColorLocal"
|
|
name="cOrangeColor"
|
|
:label="$t('settings.cOrange')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgCOrange" />
|
|
</div>
|
|
<p>{{ $t('settings.theme_help_v2_2') }}</p>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.advanced_colors._tab_label')"
|
|
class="color-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.theme_help') }}</p>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearOpacity"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_opacity') }}
|
|
</button>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearV1"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
|
|
<ColorInput
|
|
v-model="postLinkColorLocal"
|
|
name="postLinkColor"
|
|
:fallback="previewTheme.colors.accent"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.postLink" />
|
|
<ColorInput
|
|
v-model="postGreentextColorLocal"
|
|
name="postGreentextColor"
|
|
:fallback="previewTheme.colors.cGreen"
|
|
:label="$t('settings.greentext')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.postGreentext" />
|
|
<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
|
|
<ColorInput
|
|
v-model="alertErrorColorLocal"
|
|
name="alertError"
|
|
:label="$t('settings.style.advanced_colors.alert_error')"
|
|
:fallback="previewTheme.colors.alertError"
|
|
/>
|
|
<ColorInput
|
|
v-model="alertErrorTextColorLocal"
|
|
name="alertErrorText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.alertErrorText"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.alertErrorText"
|
|
large
|
|
/>
|
|
<ColorInput
|
|
v-model="alertWarningColorLocal"
|
|
name="alertWarning"
|
|
:label="$t('settings.style.advanced_colors.alert_warning')"
|
|
:fallback="previewTheme.colors.alertWarning"
|
|
/>
|
|
<ColorInput
|
|
v-model="alertWarningTextColorLocal"
|
|
name="alertWarningText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.alertWarningText"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.alertWarningText"
|
|
large
|
|
/>
|
|
<ColorInput
|
|
v-model="alertNeutralColorLocal"
|
|
name="alertNeutral"
|
|
:label="$t('settings.style.advanced_colors.alert_neutral')"
|
|
:fallback="previewTheme.colors.alertNeutral"
|
|
/>
|
|
<ColorInput
|
|
v-model="alertNeutralTextColorLocal"
|
|
name="alertNeutralText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.alertNeutralText"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.alertNeutralText"
|
|
large
|
|
/>
|
|
<OpacityInput
|
|
v-model="alertOpacityLocal"
|
|
name="alertOpacity"
|
|
:fallback="previewTheme.opacity.alert"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
|
|
<ColorInput
|
|
v-model="badgeNotificationColorLocal"
|
|
name="badgeNotification"
|
|
:label="$t('settings.style.advanced_colors.badge_notification')"
|
|
:fallback="previewTheme.colors.badgeNotification"
|
|
/>
|
|
<ColorInput
|
|
v-model="badgeNotificationTextColorLocal"
|
|
name="badgeNotificationText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.badgeNotificationText"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.badgeNotificationText"
|
|
large
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
|
|
<ColorInput
|
|
v-model="panelColorLocal"
|
|
name="panelColor"
|
|
:fallback="previewTheme.colors.panel"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="panelOpacityLocal"
|
|
name="panelOpacity"
|
|
:fallback="previewTheme.opacity.panel"
|
|
:disabled="panelColorLocal === 'transparent'"
|
|
/>
|
|
<ColorInput
|
|
v-model="panelTextColorLocal"
|
|
name="panelTextColor"
|
|
:fallback="previewTheme.colors.panelText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.panelText"
|
|
large
|
|
/>
|
|
<ColorInput
|
|
v-model="panelLinkColorLocal"
|
|
name="panelLinkColor"
|
|
:fallback="previewTheme.colors.panelLink"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.panelLink"
|
|
large
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
|
|
<ColorInput
|
|
v-model="topBarColorLocal"
|
|
name="topBarColor"
|
|
:fallback="previewTheme.colors.topBar"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<ColorInput
|
|
v-model="topBarTextColorLocal"
|
|
name="topBarTextColor"
|
|
:fallback="previewTheme.colors.topBarText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.topBarText" />
|
|
<ColorInput
|
|
v-model="topBarLinkColorLocal"
|
|
name="topBarLinkColor"
|
|
:fallback="previewTheme.colors.topBarLink"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.topBarLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
|
|
<ColorInput
|
|
v-model="inputColorLocal"
|
|
name="inputColor"
|
|
:fallback="previewTheme.colors.input"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="inputOpacityLocal"
|
|
name="inputOpacity"
|
|
:fallback="previewTheme.opacity.input"
|
|
:disabled="inputColorLocal === 'transparent'"
|
|
/>
|
|
<ColorInput
|
|
v-model="inputTextColorLocal"
|
|
name="inputTextColor"
|
|
:fallback="previewTheme.colors.inputText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.inputText" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
|
|
<ColorInput
|
|
v-model="btnColorLocal"
|
|
name="btnColor"
|
|
:fallback="previewTheme.colors.btn"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="btnOpacityLocal"
|
|
name="btnOpacity"
|
|
:fallback="previewTheme.opacity.btn"
|
|
:disabled="btnColorLocal === 'transparent'"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnTextColorLocal"
|
|
name="btnTextColor"
|
|
:fallback="previewTheme.colors.btnText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnText" />
|
|
<ColorInput
|
|
v-model="btnPanelTextColorLocal"
|
|
name="btnPanelTextColor"
|
|
:fallback="previewTheme.colors.btnPanelText"
|
|
:label="$t('settings.style.advanced_colors.panel_header')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnPanelText" />
|
|
<ColorInput
|
|
v-model="btnTopBarTextColorLocal"
|
|
name="btnTopBarTextColor"
|
|
:fallback="previewTheme.colors.btnTopBarText"
|
|
:label="$t('settings.style.advanced_colors.top_bar')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnTopBarText" />
|
|
<h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
|
|
<ColorInput
|
|
v-model="btnPressedColorLocal"
|
|
name="btnPressedColor"
|
|
:fallback="previewTheme.colors.btnPressed"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnPressedTextColorLocal"
|
|
name="btnPressedTextColor"
|
|
:fallback="previewTheme.colors.btnPressedText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnPressedText" />
|
|
<ColorInput
|
|
v-model="btnPressedPanelTextColorLocal"
|
|
name="btnPressedPanelTextColor"
|
|
:fallback="previewTheme.colors.btnPressedPanelText"
|
|
:label="$t('settings.style.advanced_colors.panel_header')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
|
|
<ColorInput
|
|
v-model="btnPressedTopBarTextColorLocal"
|
|
name="btnPressedTopBarTextColor"
|
|
:fallback="previewTheme.colors.btnPressedTopBarText"
|
|
:label="$t('settings.style.advanced_colors.top_bar')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
|
|
<h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
|
|
<ColorInput
|
|
v-model="btnDisabledColorLocal"
|
|
name="btnDisabledColor"
|
|
:fallback="previewTheme.colors.btnDisabled"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnDisabledTextColorLocal"
|
|
name="btnDisabledTextColor"
|
|
:fallback="previewTheme.colors.btnDisabledText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnDisabledPanelTextColorLocal"
|
|
name="btnDisabledPanelTextColor"
|
|
:fallback="previewTheme.colors.btnDisabledPanelText"
|
|
:label="$t('settings.style.advanced_colors.panel_header')"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnDisabledTopBarTextColorLocal"
|
|
name="btnDisabledTopBarTextColor"
|
|
:fallback="previewTheme.colors.btnDisabledTopBarText"
|
|
:label="$t('settings.style.advanced_colors.top_bar')"
|
|
/>
|
|
<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
|
|
<ColorInput
|
|
v-model="btnToggledColorLocal"
|
|
name="btnToggledColor"
|
|
:fallback="previewTheme.colors.btnToggled"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnToggledTextColorLocal"
|
|
name="btnToggledTextColor"
|
|
:fallback="previewTheme.colors.btnToggledText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnToggledText" />
|
|
<ColorInput
|
|
v-model="btnToggledPanelTextColorLocal"
|
|
name="btnToggledPanelTextColor"
|
|
:fallback="previewTheme.colors.btnToggledPanelText"
|
|
:label="$t('settings.style.advanced_colors.panel_header')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
|
|
<ColorInput
|
|
v-model="btnToggledTopBarTextColorLocal"
|
|
name="btnToggledTopBarTextColor"
|
|
:fallback="previewTheme.colors.btnToggledTopBarText"
|
|
:label="$t('settings.style.advanced_colors.top_bar')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
|
|
<ColorInput
|
|
v-model="tabColorLocal"
|
|
name="tabColor"
|
|
:fallback="previewTheme.colors.tab"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<ColorInput
|
|
v-model="tabTextColorLocal"
|
|
name="tabTextColor"
|
|
:fallback="previewTheme.colors.tabText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.tabText" />
|
|
<ColorInput
|
|
v-model="tabActiveTextColorLocal"
|
|
name="tabActiveTextColor"
|
|
:fallback="previewTheme.colors.tabActiveText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.tabActiveText" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
|
|
<ColorInput
|
|
v-model="borderColorLocal"
|
|
name="borderColor"
|
|
:fallback="previewTheme.colors.border"
|
|
:label="$t('settings.style.common.color')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="borderOpacityLocal"
|
|
name="borderOpacity"
|
|
:fallback="previewTheme.opacity.border"
|
|
:disabled="borderColorLocal === 'transparent'"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
|
|
<ColorInput
|
|
v-model="faintColorLocal"
|
|
name="faintColor"
|
|
:fallback="previewTheme.colors.faint"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ColorInput
|
|
v-model="faintLinkColorLocal"
|
|
name="faintLinkColor"
|
|
:fallback="previewTheme.colors.faintLink"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ColorInput
|
|
v-model="panelFaintColorLocal"
|
|
name="panelFaintColor"
|
|
:fallback="previewTheme.colors.panelFaint"
|
|
:label="$t('settings.style.advanced_colors.panel_header')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="faintOpacityLocal"
|
|
name="faintOpacity"
|
|
:fallback="previewTheme.opacity.faint"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
|
|
<ColorInput
|
|
v-model="underlayColorLocal"
|
|
name="underlay"
|
|
:label="$t('settings.style.advanced_colors.underlay')"
|
|
:fallback="previewTheme.colors.underlay"
|
|
/>
|
|
<OpacityInput
|
|
v-model="underlayOpacityLocal"
|
|
name="underlayOpacity"
|
|
:fallback="previewTheme.opacity.underlay"
|
|
:disabled="underlayOpacityLocal === 'transparent'"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
|
|
<ColorInput
|
|
v-model="wallpaperColorLocal"
|
|
name="wallpaper"
|
|
:label="$t('settings.style.advanced_colors.wallpaper')"
|
|
:fallback="previewTheme.colors.wallpaper"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
|
|
<ColorInput
|
|
v-model="pollColorLocal"
|
|
name="poll"
|
|
:label="$t('settings.background')"
|
|
:fallback="previewTheme.colors.poll"
|
|
/>
|
|
<ColorInput
|
|
v-model="pollTextColorLocal"
|
|
name="pollText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.pollText"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
|
|
<ColorInput
|
|
v-model="iconColorLocal"
|
|
name="icon"
|
|
:label="$t('settings.style.advanced_colors.icons')"
|
|
:fallback="previewTheme.colors.icon"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
|
|
<ColorInput
|
|
v-model="highlightColorLocal"
|
|
name="highlight"
|
|
:label="$t('settings.background')"
|
|
:fallback="previewTheme.colors.highlight"
|
|
/>
|
|
<ColorInput
|
|
v-model="highlightTextColorLocal"
|
|
name="highlightText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.highlightText"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.highlightText" />
|
|
<ColorInput
|
|
v-model="highlightLinkColorLocal"
|
|
name="highlightLink"
|
|
:label="$t('settings.links')"
|
|
:fallback="previewTheme.colors.highlightLink"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.highlightLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
|
|
<ColorInput
|
|
v-model="popoverColorLocal"
|
|
name="popover"
|
|
:label="$t('settings.background')"
|
|
:fallback="previewTheme.colors.popover"
|
|
/>
|
|
<OpacityInput
|
|
v-model="popoverOpacityLocal"
|
|
name="popoverOpacity"
|
|
:fallback="previewTheme.opacity.popover"
|
|
:disabled="popoverOpacityLocal === 'transparent'"
|
|
/>
|
|
<ColorInput
|
|
v-model="popoverTextColorLocal"
|
|
name="popoverText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.popoverText"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.popoverText" />
|
|
<ColorInput
|
|
v-model="popoverLinkColorLocal"
|
|
name="popoverLink"
|
|
:label="$t('settings.links')"
|
|
:fallback="previewTheme.colors.popoverLink"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.popoverLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
|
|
<ColorInput
|
|
v-model="selectedPostColorLocal"
|
|
name="selectedPost"
|
|
:label="$t('settings.background')"
|
|
:fallback="previewTheme.colors.selectedPost"
|
|
/>
|
|
<ColorInput
|
|
v-model="selectedPostTextColorLocal"
|
|
name="selectedPostText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.selectedPostText"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.selectedPostText" />
|
|
<ColorInput
|
|
v-model="selectedPostLinkColorLocal"
|
|
name="selectedPostLink"
|
|
:label="$t('settings.links')"
|
|
:fallback="previewTheme.colors.selectedPostLink"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.selectedPostLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
|
|
<ColorInput
|
|
v-model="selectedMenuColorLocal"
|
|
name="selectedMenu"
|
|
:label="$t('settings.background')"
|
|
:fallback="previewTheme.colors.selectedMenu"
|
|
/>
|
|
<ColorInput
|
|
v-model="selectedMenuTextColorLocal"
|
|
name="selectedMenuText"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.selectedMenuText"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.selectedMenuText" />
|
|
<ColorInput
|
|
v-model="selectedMenuLinkColorLocal"
|
|
name="selectedMenuLink"
|
|
:label="$t('settings.links')"
|
|
:fallback="previewTheme.colors.selectedMenuLink"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.radii._tab_label')"
|
|
class="radius-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.radii_help') }}</p>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearRoundness"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<RangeInput
|
|
v-model="btnRadiusLocal"
|
|
name="btnRadius"
|
|
:label="$t('settings.btnRadius')"
|
|
:fallback="previewTheme.radii.btn"
|
|
max="16"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="inputRadiusLocal"
|
|
name="inputRadius"
|
|
:label="$t('settings.inputRadius')"
|
|
:fallback="previewTheme.radii.input"
|
|
max="9"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="checkboxRadiusLocal"
|
|
name="checkboxRadius"
|
|
:label="$t('settings.checkboxRadius')"
|
|
:fallback="previewTheme.radii.checkbox"
|
|
max="16"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="panelRadiusLocal"
|
|
name="panelRadius"
|
|
:label="$t('settings.panelRadius')"
|
|
:fallback="previewTheme.radii.panel"
|
|
max="50"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="avatarRadiusLocal"
|
|
name="avatarRadius"
|
|
:label="$t('settings.avatarRadius')"
|
|
:fallback="previewTheme.radii.avatar"
|
|
max="28"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="avatarAltRadiusLocal"
|
|
name="avatarAltRadius"
|
|
:label="$t('settings.avatarAltRadius')"
|
|
:fallback="previewTheme.radii.avatarAlt"
|
|
max="28"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="attachmentRadiusLocal"
|
|
name="attachmentRadius"
|
|
:label="$t('settings.attachmentRadius')"
|
|
:fallback="previewTheme.radii.attachment"
|
|
max="50"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="tooltipRadiusLocal"
|
|
name="tooltipRadius"
|
|
:label="$t('settings.tooltipRadius')"
|
|
:fallback="previewTheme.radii.tooltip"
|
|
max="50"
|
|
hard-min="0"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.shadows._tab_label')"
|
|
class="shadow-container"
|
|
>
|
|
<div class="tab-header shadow-selector">
|
|
<div class="select-container">
|
|
{{ $t('settings.style.shadows.component') }}
|
|
{{ ' ' }}
|
|
<Select
|
|
id="shadow-switcher"
|
|
v-model="shadowSelected"
|
|
class="shadow-switcher"
|
|
>
|
|
<option
|
|
v-for="shadow in shadowsAvailable"
|
|
:key="shadow"
|
|
:value="shadow"
|
|
>
|
|
{{ $t('settings.style.shadows.components.' + shadow) }}
|
|
</option>
|
|
</Select>
|
|
</div>
|
|
<div class="override">
|
|
<label
|
|
for="override"
|
|
class="label"
|
|
>
|
|
{{ $t('settings.style.shadows.override') }}
|
|
</label>
|
|
{{ ' ' }}
|
|
<input
|
|
id="override"
|
|
v-model="currentShadowOverriden"
|
|
name="override"
|
|
class="input-override"
|
|
type="checkbox"
|
|
>
|
|
<label
|
|
class="checkbox-label"
|
|
for="override"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearShadows"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<ShadowControl
|
|
v-model="currentShadow"
|
|
:ready="!!currentShadowFallback"
|
|
:fallback="currentShadowFallback"
|
|
/>
|
|
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
|
|
<i18n-t
|
|
scope="global"
|
|
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
|
|
tag="p"
|
|
>
|
|
<code>filter: drop-shadow()</code>
|
|
</i18n-t>
|
|
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
|
|
<i18n-t
|
|
scope="global"
|
|
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
|
|
tag="p"
|
|
>
|
|
<code>drop-shadow</code>
|
|
<code>spread-radius</code>
|
|
<code>inset</code>
|
|
</i18n-t>
|
|
<i18n-t
|
|
scope="global"
|
|
keypath="settings.style.shadows.filter_hint.inset_classic"
|
|
tag="p"
|
|
>
|
|
<code>box-shadow</code>
|
|
</i18n-t>
|
|
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.fonts._tab_label')"
|
|
class="fonts-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.style.fonts.help') }}</p>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearFonts"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<FontControl
|
|
v-model="fontsLocal.interface"
|
|
name="ui"
|
|
:label="$t('settings.style.fonts.components.interface')"
|
|
:fallback="previewTheme.fonts.interface"
|
|
no-inherit="1"
|
|
/>
|
|
<FontControl
|
|
v-model="fontsLocal.input"
|
|
name="input"
|
|
:label="$t('settings.style.fonts.components.input')"
|
|
:fallback="previewTheme.fonts.input"
|
|
/>
|
|
<FontControl
|
|
v-model="fontsLocal.post"
|
|
name="post"
|
|
:label="$t('settings.style.fonts.components.post')"
|
|
:fallback="previewTheme.fonts.post"
|
|
/>
|
|
<FontControl
|
|
v-model="fontsLocal.postCode"
|
|
name="postCode"
|
|
:label="$t('settings.style.fonts.components.postCode')"
|
|
:fallback="previewTheme.fonts.postCode"
|
|
/>
|
|
</div>
|
|
</tab-switcher>
|
|
</keep-alive>
|
|
|
|
<teleport
|
|
v-if="isActive"
|
|
to="#unscrolled-content"
|
|
>
|
|
<div class="apply-container">
|
|
<button
|
|
class="btn button-default submit"
|
|
:disabled="!themeValid"
|
|
@click="setCustomTheme"
|
|
>
|
|
{{ $t('general.apply') }}
|
|
</button>
|
|
<button
|
|
class="btn button-default"
|
|
@click="clearAll"
|
|
>
|
|
{{ $t('settings.style.switcher.reset') }}
|
|
</button>
|
|
</div>
|
|
</teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./theme_tab.js"></script>
|
|
|
|
<style src="./theme_tab.scss" lang="scss"></style>
|