AkkomaGang
/
akkoma-fe
4
13
Fork 56
Code Issues 71 Pull Requests 16 Projects Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.scss
View File

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

4
src/components/autosuggest/autosuggest.vue
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;

12
src/components/dialog_modal/dialog_modal.vue
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;

4
src/components/emoji_input/emoji_input.vue
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);
}
}
}

10
src/components/nav_panel/nav_panel.vue
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;

4
src/components/selectable_list/selectable_list.vue
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 {

5
src/components/side_drawer/side_drawer.vue
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);
}
}
}

7
src/components/status/status.vue
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 {

27
src/components/style_switcher/style_switcher.vue
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

4
src/services/style_setter/style_setter.js
View File

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

26
src/services/theme_data/theme_data.service.js
View File

@ -12,6 +12,7 @@ export const LAYERS = {
badge: null, // no transparency support
fg: null,
bg: 'underlay',
lightBg: 'bg',
panel: 'bg',
btn: 'bg',
btnPanel: 'panel',
@ -57,6 +58,31 @@ export const SLOT_INHERITANCE = {
depends: ['bg'],
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: {
depends: ['text'],
color: (mod, text) => brightness(20 * mod, text).rgb