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

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

View file

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

View file

@ -158,6 +158,10 @@
&.highlighted {
background-color: $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 {
background-color: $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 {
font-weight: bolder;
background-color: $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 {
text-decoration: underline;

View file

@ -69,6 +69,10 @@
&-item-selected-inner {
background-color: $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 {

View file

@ -290,6 +290,11 @@
&:hover {
background-color: $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 {
background-color: $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 & {
@ -573,8 +578,6 @@ $status-margin: 0.75em;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 0.4em 0 0.2em;
color: $fallback--faint;
color: var(--faint, $fallback--faint);
}
.replies-separator {

View file

@ -414,7 +414,7 @@
/>
<ColorInput
v-model="pollTextColorLocal"
name="poll"
name="pollText"
:label="$t('settings.text')"
:fallback="previewTheme.colors.pollText"
/>
@ -423,11 +423,34 @@
<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
<ColorInput
v-model="iconColorLocal"
name="poll"
name="icon"
:label="$t('settings.style.advanced_colors.icons')"
:fallback="previewTheme.colors.icon"
/>
</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