aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/autosuggest/autosuggest.vue4
-rw-r--r--src/components/dialog_modal/dialog_modal.vue12
-rw-r--r--src/components/emoji_input/emoji_input.vue4
-rw-r--r--src/components/nav_panel/nav_panel.vue10
-rw-r--r--src/components/selectable_list/selectable_list.vue4
-rw-r--r--src/components/side_drawer/side_drawer.vue5
-rw-r--r--src/components/status/status.vue7
-rw-r--r--src/components/style_switcher/style_switcher.vue27
8 files changed, 61 insertions, 12 deletions
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 1f86e996..f283ab82 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -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;
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 55d7a7d2..3241ce3e 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -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;
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index a7215670..dcf51ff9 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -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);
}
}
}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 034259d9..0886bf8c 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -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;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index d9ec7ece..416c9b6a 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -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 {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 3fba9058..6d75221f 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -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);
}
}
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d291e762..72e9b25a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -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 {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index e0894b6d..1381f1fb 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -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
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 15:15:59 +0000