poll slot renamed, lightBg customization implemented
This commit is contained in:
parent
40ba3e2252
commit
8f63bbb64f
11 changed files with 94 additions and 13 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue