poll slot renamed, lightBg customization implemented

This commit is contained in:
Henry Jameson 2020-01-13 00:33:04 +02:00
parent 40ba3e2252
commit 8f63bbb64f
11 changed files with 94 additions and 13 deletions

View file

@ -495,6 +495,10 @@ main-router {
color: $fallback--faint; color: $fallback--faint;
color: var(--panelFaint, $fallback--faint); color: var(--panelFaint, $fallback--faint);
} }
.faint-link {
color: $fallback--faint;
color: var(--faintLink, $fallback--faint);
}
.alert { .alert {
white-space: nowrap; white-space: nowrap;

View file

@ -40,8 +40,8 @@
top: 100%; top: 100%;
right: 0; right: 0;
max-height: 400px; max-height: 400px;
background-color: $fallback--lightBg; background-color: $fallback--bg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--bg, $fallback--bg);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-color: $fallback--border; border-color: $fallback--border;

View file

@ -75,18 +75,18 @@
.dialog-modal-content { .dialog-modal-content {
margin: 0; margin: 0;
padding: 1rem 1rem; padding: 1rem 1rem;
background-color: $fallback--lightBg; background-color: $fallback--bg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--bg, $fallback--bg);
white-space: normal; white-space: normal;
} }
.dialog-modal-footer { .dialog-modal-footer {
margin: 0; margin: 0;
padding: .5em .5em; padding: .5em .5em;
background-color: $fallback--lightBg; background-color: $fallback--bg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--bg, $fallback--bg);
border-top: 1px solid $fallback--bg; border-top: 1px solid $fallback--border;
border-top: 1px solid var(--bg, $fallback--bg); border-top: 1px solid var(--border, $fallback--border);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View file

@ -158,6 +158,10 @@
&.highlighted { &.highlighted {
background-color: $fallback--fg; background-color: $fallback--fg;
background-color: var(--lightBg, $fallback--fg); background-color: var(--lightBg, $fallback--fg);
color: var(--lightBgText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
} }
} }
} }

View file

@ -101,12 +101,22 @@
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
color: $fallback--link;
color: var(--lightBgText, $fallback--link);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
} }
&.router-link-active { &.router-link-active {
font-weight: bolder; font-weight: bolder;
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
color: $fallback--text;
color: var(--lightBgText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;

View file

@ -69,6 +69,10 @@
&-item-selected-inner { &-item-selected-inner {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
color: var(--lightBgText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
} }
&-header { &-header {

View file

@ -290,6 +290,11 @@
&:hover { &:hover {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
color: $fallback--text;
color: var(--lightBgText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
} }
} }
} }

View file

@ -446,6 +446,11 @@ $status-margin: 0.75em;
&_focused { &_focused {
background-color: $fallback--lightBg; background-color: $fallback--lightBg;
background-color: var(--lightBg, $fallback--lightBg); background-color: var(--lightBg, $fallback--lightBg);
color: $fallback--text;
color: var(--lightBgText, $fallback--text);
--faint: var(--lightBgFaintText, $fallback--faint);
--faintLink: var(--lightBgFaintLink, $fallback--faint);
--icon: var(--lightBgIcon, $fallback--icon);
} }
.timeline & { .timeline & {
@ -573,8 +578,6 @@ $status-margin: 0.75em;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0 0.4em 0 0.2em; margin: 0 0.4em 0 0.2em;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
} }
.replies-separator { .replies-separator {

View file

@ -414,7 +414,7 @@
/> />
<ColorInput <ColorInput
v-model="pollTextColorLocal" v-model="pollTextColorLocal"
name="poll" name="pollText"
:label="$t('settings.text')" :label="$t('settings.text')"
:fallback="previewTheme.colors.pollText" :fallback="previewTheme.colors.pollText"
/> />
@ -423,11 +423,34 @@
<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4> <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
<ColorInput <ColorInput
v-model="iconColorLocal" v-model="iconColorLocal"
name="poll" 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">
<h4>{{ $t('settings.style.advanced_colors.lightBg') }}</h4>
<ColorInput
v-model="lightBgColorLocal"
name="lightBg"
:label="$t('settings.style.advanced_colors.lightBg')"
:fallback="previewTheme.colors.lightBg"
/>
<ColorInput
v-model="lightBgTextColorLocal"
name="lightBgText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.lightBgText"
/>
<ContrastRatio :contrast="previewContrast.lightBgText" />
<ColorInput
v-model="lightBgLinkColorLocal"
name="lightBgLink"
:label="$t('settings.links')"
:fallback="previewTheme.colors.lightBgLink"
/>
<ContrastRatio :contrast="previewContrast.lightBgLink" />
</div>
</div> </div>
<div <div

View file

@ -163,8 +163,10 @@ export const generateColors = (themeData) => {
return return
} }
if (k === 'faint') { if (k === 'faint') {
colors[k + 'Link'].a = v colors['faintLink'].a = v
colors['panelFaint'].a = v colors['panelFaint'].a = v
colors['lightBgFaintText'].a = v
colors['lightBgFaintLink'].a = v
} }
if (k === 'bg') { if (k === 'bg') {
colors['lightBg'].a = v colors['lightBg'].a = v

View file

@ -12,6 +12,7 @@ export const LAYERS = {
badge: null, // no transparency support badge: null, // no transparency support
fg: null, fg: null,
bg: 'underlay', bg: 'underlay',
lightBg: 'bg',
panel: 'bg', panel: 'bg',
btn: 'bg', btn: 'bg',
btnPanel: 'panel', btnPanel: 'panel',
@ -57,6 +58,31 @@ export const SLOT_INHERITANCE = {
depends: ['bg'], depends: ['bg'],
color: (mod, bg) => brightness(5 * mod, bg).rgb color: (mod, bg) => brightness(5 * mod, bg).rgb
}, },
lightBgFaintText: {
depends: ['faint'],
layer: 'lightBg',
textColor: true
},
lightBgFaintLink: {
depends: ['faintLink'],
layer: 'lightBg',
textColor: 'preserve'
},
lightBgText: {
depends: ['text'],
layer: 'lightBg',
textColor: true
},
lightBgLink: {
depends: ['link'],
layer: 'lightBg',
textColor: 'preserve'
},
lightBgIcon: {
depends: ['lightBg', 'lightBgText'],
color: (mod, bg, text) => mixrgb(bg, text)
},
lightText: { lightText: {
depends: ['text'], depends: ['text'],
color: (mod, text) => brightness(20 * mod, text).rgb color: (mod, text) => brightness(20 * mod, text).rgb