No OneTemporary
Actions

Authored By

Unknown

Size

50 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
	index 705a60a254..205f325ccc 100644
	--- a/src/components/style_switcher/style_switcher.vue
	+++ b/src/components/style_switcher/style_switcher.vue
	@@ -1,960 +1,956 @@
	<template>
	<div class="style-switcher">
	<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"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.use_source') }}
	</button>
	<button
	class="btn"
	@click="forceSnapshot"
	>
	{{ $t('settings.style.switcher.use_snapshot') }}
	</button>
	</template>
	<template v-else-if="themeWarning.noActionsPossible">
	<button
	class="btn"
	@click="dismissWarning"
	>
	{{ $t('general.dismiss') }}
	</button>
	</template>
	<template v-else>
	<button
	class="btn"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.load_theme') }}
	</button>
	<button
	class="btn"
	@click="dismissWarning"
	>
	{{ $t('settings.style.switcher.keep_as_is') }}
	</button>
	</template>
	</div>
	</div>
	<ExportImport
	:export-object="exportedTheme"
	:export-label="$t("settings.export_theme")"
	:import-label="$t("settings.import_theme")"
	:import-failed-text="$t("settings.invalid_theme_imported")"
	:on-import="onImport"
	:validator="importValidator"
	>
	<template slot="before">
	<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"
	: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>
	<i class="icon-down-open" />
	</label>
	</div>
	</template>
	</ExportImport>
	</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>
	<button
	class="btn"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</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"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@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')"
	- :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
	/>
	- <ContrastRatio :contrast="previewContrast.bgPostLink" />
	+ <ContrastRatio :contrast="previewContrast.postLink" />
	<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="true"
	/>
	<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="true"
	/>
	<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="true"
	/>
	<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="true"
	/>
	</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="true"
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large="true"
	/>
	</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" />
	<h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
	<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" />
	<h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
	<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')"
	/>
	- <ContrastRatio :contrast="previewContrast.btnDisabledText" />
	<ColorInput
	v-model="btnDisabledPanelTextColorLocal"
	name="btnDisabledPanelTextColor"
	:fallback="previewTheme.colors.btnDisabledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	- <ContrastRatio :contrast="previewContrast.btnDisabledPanelText" />
	<ColorInput
	v-model="btnDisabledTopBarTextColorLocal"
	name="btnDisabledTopBarTextColor"
	:fallback="previewTheme.colors.btnDisabledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	- <ContrastRatio :contrast="previewContrast.btnDisabledTopBarText" />
	<h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
	<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.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"
	@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') }}
	<label
	for="shadow-switcher"
	class="select"
	>
	<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>
	<i class="icon-down-open" />
	</label>
	</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"
	@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
	path="settings.style.shadows.filter_hint.always_drop_shadow"
	tag="p"
	>
	<code>filter: drop-shadow()</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
	<i18n
	path="settings.style.shadows.filter_hint.drop_shadow_syntax"
	tag="p"
	>
	<code>drop-shadow</code>
	<code>spread-radius</code>
	<code>inset</code>
	</i18n>
	<i18n
	path="settings.style.shadows.filter_hint.inset_classic"
	tag="p"
	>
	<code>box-shadow</code>
	</i18n>
	<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"
	@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>

	<div class="apply-container">
	<button
	class="btn submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</div>
	</template>

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

	<style src="./style_switcher.scss" lang="scss"></style>
	diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
	index 98fba5ef1e..9b33e4a96e 100644
	--- a/src/services/theme_data/pleromafe.js
	+++ b/src/services/theme_data/pleromafe.js
	@@ -1,607 +1,611 @@
	import { invertLightness, brightness } from 'chromatism'
	import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
	/* This is a definition of all layer combinations
	* each key is a topmost layer, each value represents layer underneath
	* this is essentially a simplified tree
	*/
	export const LAYERS = {
	undelay: null, // root
	topBar: null, // no transparency support
	badge: null, // no transparency support
	fg: null,
	bg: 'underlay',
	highlight: 'bg',
	panel: 'bg',
	popover: 'bg',
	selectedMenu: 'popover',
	btn: 'bg',
	btnPanel: 'panel',
	btnTopBar: 'topBar',
	input: 'bg',
	inputPanel: 'panel',
	inputTopBar: 'topBar',
	alert: 'bg',
	alertPanel: 'panel',
	poll: 'bg'
	}

	/* By default opacity slots have 1 as default opacity
	* this allows redefining it to something else
	*/
	export const DEFAULT_OPACITY = {
	alert: 0.5,
	input: 0.5,
	faint: 0.5,
	underlay: 0.15
	}

	/** SUBJECT TO CHANGE IN THE FUTURE, this is all beta
	* Color and opacity slots definitions. Each key represents a slot.
	*
	* Short-hands:
	* String beginning with `--` - value after dashes treated as sole
	* dependency - i.e. `--value` equivalent to { depends: ['value']}
	* String beginning with `#` - value would be treated as solid color
	* defined in hexadecimal representation (i.e. #FFFFFF) and will be
	* used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}
	*
	* Full definition:
	* @property {String[]} depends - color slot names this color depends ones.
	* cyclic dependencies are supported to some extent but not recommended.
	* @property {String} [opacity] - opacity slot used by this color slot.
	* opacity is inherited from parents. To break inheritance graph use null
	* @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so
	* that slots with higher priority come earlier
	* @property {Function(mod, ...colors)} [color] - function that will be
	* used to determine the color. By default it just copies first color in
	* dependency list.
	* @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)
	* depending on background color (for textColor)/given color.
	* @argument {...Object} deps - each argument after mod represents each
	* color from `depends` array. All colors take user customizations into
	* account and represented by { r, g, b } objects.
	* @returns {Object} resulting color, should be in { r, g, b } form
	*
	* @property {Boolean\|String} [textColor] - true to mark color slot as text
	* color. This enables automatic text color generation for the slot. Use
	* 'preserve' string if you don't want text color to fall back to
	* black/white. Use 'bw' to only ever use black or white. This also makes
	* following properties required:
	* @property {String} [layer] - which layer the text sit on top on - used
	* to account for transparency in text color calculation
	* layer is inherited from parents. To break inheritance graph use null
	* @property {String} [variant] - which color slot is background (same as
	* above, used to account for transparency)
	*/
	export const SLOT_INHERITANCE = {
	bg: {
	depends: [],
	opacity: 'bg',
	priority: 1
	},
	fg: {
	depends: [],
	priority: 1
	},
	text: {
	depends: [],
	layer: 'bg',
	opacity: null,
	priority: 1
	},
	underlay: {
	default: '#000000',
	opacity: 'underlay'
	},
	link: {
	depends: ['accent'],
	priority: 1
	},
	accent: {
	depends: ['link'],
	priority: 1
	},
	faint: {
	depends: ['text'],
	opacity: 'faint'
	},
	faintLink: {
	depends: ['link'],
	opacity: 'faint'
	},
	postFaintLink: {
	depends: ['postLink'],
	opacity: 'faint'
	},

	cBlue: '#0000ff',
	cRed: '#FF0000',
	cGreen: '#00FF00',
	cOrange: '#E3FF00',

	highlight: {
	depends: ['bg'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	highlightLightText: {
	depends: ['lightText'],
	layer: 'highlight',
	textColor: true
	},
	highlightPostLink: {
	depends: ['postLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightFaintText: {
	depends: ['faint'],
	layer: 'highlight',
	textColor: true
	},
	highlightFaintLink: {
	depends: ['faintLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightPostFaintLink: {
	depends: ['postFaintLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightText: {
	depends: ['text'],
	layer: 'highlight',
	textColor: true
	},
	highlightLink: {
	depends: ['link'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightIcon: {
	depends: ['highlight', 'highlightText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	popover: {
	depends: ['bg'],
	opacity: 'popover'
	},
	popoverLightText: {
	depends: ['lightText'],
	layer: 'popover',
	textColor: true
	},
	popoverPostLink: {
	depends: ['postLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverFaintText: {
	depends: ['faint'],
	layer: 'popover',
	textColor: true
	},
	popoverFaintLink: {
	depends: ['faintLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverPostFaintLink: {
	depends: ['postFaintLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverText: {
	depends: ['text'],
	layer: 'popover',
	textColor: true
	},
	popoverLink: {
	depends: ['link'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverIcon: {
	depends: ['popover', 'popoverText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedPost: '--highlight',
	selectedPostFaintText: {
	depends: ['highlightFaintText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostLightText: {
	depends: ['highlightLightText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostPostLink: {
	depends: ['highlightPostLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostFaintLink: {
	depends: ['highlightFaintLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostText: {
	depends: ['highlightText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostLink: {
	depends: ['highlightLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostIcon: {
	depends: ['selectedPost', 'selectedPostText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedMenu: {
	depends: ['bg'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	selectedMenuLightText: {
	depends: ['highlightLightText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuFaintText: {
	depends: ['highlightFaintText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuFaintLink: {
	depends: ['highlightFaintLink'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: 'preserve'
	},
	selectedMenuText: {
	depends: ['highlightText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuLink: {
	depends: ['highlightLink'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: 'preserve'
	},
	selectedMenuIcon: {
	depends: ['selectedMenu', 'selectedMenuText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedMenuPopover: {
	depends: ['popover'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	selectedMenuPopoverLightText: {
	depends: ['selectedMenuLightText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverFaintText: {
	depends: ['selectedMenuFaintText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverFaintLink: {
	depends: ['selectedMenuFaintLink'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: 'preserve'
	},
	selectedMenuPopoverText: {
	depends: ['selectedMenuText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverLink: {
	depends: ['selectedMenuLink'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: 'preserve'
	},
	selectedMenuPopoverIcon: {
	depends: ['selectedMenuPopover', 'selectedMenuText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	lightText: {
	depends: ['text'],
	+ layer: 'bg',
	+ textColor: 'preserve',
	color: (mod, text) => brightness(20 * mod, text).rgb
	},

	postLink: {
	- depends: ['link']
	+ depends: ['link'],
	+ layer: 'bg',
	+ textColor: 'preserve'
	},

	border: {
	depends: ['fg'],
	opacity: 'border',
	color: (mod, fg) => brightness(2 * mod, fg).rgb
	},

	poll: {
	depends: ['accent', 'bg'],
	copacity: 'poll',
	color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
	},
	pollText: {
	depends: ['text'],
	layer: 'poll',
	textColor: true
	},

	icon: {
	depends: ['bg', 'text'],
	inheritsOpacity: false,
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	// Foreground
	fgText: {
	depends: ['text'],
	layer: 'fg',
	textColor: true
	},
	fgLink: {
	depends: ['link'],
	layer: 'fg',
	textColor: 'preserve'
	},

	// Panel header
	panel: {
	depends: ['fg'],
	opacity: 'panel'
	},
	panelText: {
	depends: ['text'],
	layer: 'panel',
	textColor: true
	},
	panelFaint: {
	depends: ['fgText'],
	layer: 'panel',
	opacity: 'faint',
	textColor: true
	},
	panelLink: {
	depends: ['fgLink'],
	layer: 'panel',
	textColor: 'preserve'
	},

	// Top bar
	topBar: '--fg',
	topBarText: {
	depends: ['fgText'],
	layer: 'topBar',
	textColor: true
	},
	topBarLink: {
	depends: ['fgLink'],
	layer: 'topBar',
	textColor: 'preserve'
	},

	// Tabs
	tab: {
	depends: ['btn']
	},
	tabText: {
	depends: ['btnText'],
	layer: 'btn',
	textColor: true
	},
	tabActiveText: {
	depends: ['text'],
	layer: 'bg',
	textColor: true
	},

	// Buttons
	btn: {
	depends: ['fg'],
	variant: 'btn',
	opacity: 'btn'
	},
	btnText: {
	depends: ['fgText'],
	layer: 'btn',
	textColor: true
	},
	btnPanelText: {
	depends: ['btnText'],
	layer: 'btnPanel',
	variant: 'btn',
	textColor: true
	},
	btnTopBarText: {
	depends: ['btnText'],
	layer: 'btnTopBar',
	variant: 'btn',
	textColor: true
	},

	// Buttons: pressed
	btnPressed: {
	depends: ['btn'],
	layer: 'btn'
	},
	btnPressedText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnPressed',
	textColor: true
	},
	btnPressedPanel: {
	depends: ['btnPressed'],
	layer: 'btn'
	},
	btnPressedPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnPressed',
	textColor: true
	},
	btnPressedTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnPressed',
	textColor: true
	},

	// Buttons: toggled
	btnToggled: {
	depends: ['btn'],
	layer: 'btn',
	color: (mod, btn) => brightness(mod * 20, btn).rgb
	},
	btnToggledText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnToggled',
	textColor: true
	},
	btnToggledPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnToggled',
	textColor: true
	},
	btnToggledTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnToggled',
	textColor: true
	},

	// Buttons: disabled
	btnDisabled: {
	depends: ['btn', 'bg'],
	color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
	},
	btnDisabledText: {
	depends: ['btnText', 'btnDisabled'],
	layer: 'btn',
	variant: 'btnDisabled',
	color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
	},
	btnDisabledPanelText: {
	depends: ['btnPanelText', 'btnDisabled'],
	layer: 'btnPanel',
	variant: 'btnDisabled',
	color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
	},
	btnDisabledTopBarText: {
	depends: ['btnTopBarText', 'btnDisabled'],
	layer: 'btnTopBar',
	variant: 'btnDisabled',
	color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
	},

	// Input fields
	input: {
	depends: ['fg'],
	opacity: 'input'
	},
	inputText: {
	depends: ['text'],
	layer: 'input',
	textColor: true
	},
	inputPanelText: {
	depends: ['panelText'],
	layer: 'inputPanel',
	variant: 'input',
	textColor: true
	},
	inputTopbarText: {
	depends: ['topBarText'],
	layer: 'inputTopBar',
	variant: 'input',
	textColor: true
	},

	alertError: {
	depends: ['cRed'],
	opacity: 'alert'
	},
	alertErrorText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertError',
	textColor: true
	},
	alertErrorPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertError',
	textColor: true
	},

	alertWarning: {
	depends: ['cOrange'],
	opacity: 'alert'
	},
	alertWarningText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertWarning',
	textColor: true
	},
	alertWarningPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertWarning',
	textColor: true
	},

	alertNeutral: {
	depends: ['text'],
	opacity: 'alert'
	},
	alertNeutralText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertNeutral',
	color: (mod, text) => invertLightness(text).rgb,
	textColor: true
	},
	alertNeutralPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertNeutral',
	textColor: true
	},

	badgeNotification: '--cRed',
	badgeNotificationText: {
	depends: ['text', 'badgeNotification'],
	layer: 'badge',
	variant: 'badgeNotification',
	textColor: 'bw'
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Thu, Oct 29, 11:40 AM (23 h, 11 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1798066
Default Alt Text: (50 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions