forked from AkkomaGang/akkoma-fe
lightBg -> highlight because it causes issues with v2
This commit is contained in:
parent
803edcb53a
commit
644ce497a0
8 changed files with 48 additions and 48 deletions
|
@ -518,27 +518,27 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>{{ $t('settings.style.advanced_colors.lightBg') }}</h4>
|
||||
<h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
|
||||
<ColorInput
|
||||
v-model="lightBgColorLocal"
|
||||
name="lightBg"
|
||||
v-model="highlightColorLocal"
|
||||
name="highlight"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.lightBg"
|
||||
:fallback="previewTheme.colors.highlight"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="lightBgTextColorLocal"
|
||||
name="lightBgText"
|
||||
v-model="highlightTextColorLocal"
|
||||
name="highlightText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.lightBgText"
|
||||
:fallback="previewTheme.colors.highlightText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.lightBgText" />
|
||||
<ContrastRatio :contrast="previewContrast.highlightText" />
|
||||
<ColorInput
|
||||
v-model="lightBgLinkColorLocal"
|
||||
name="lightBgLink"
|
||||
v-model="highlightLinkColorLocal"
|
||||
name="highlightLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.lightBgLink"
|
||||
:fallback="previewTheme.colors.highlightLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.lightBgLink" />
|
||||
<ContrastRatio :contrast="previewContrast.highlightLink" />
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
|
||||
|
|
|
@ -449,7 +449,7 @@
|
|||
"underlay": "Underlay",
|
||||
"poll": "Poll graph",
|
||||
"icons": "Icons",
|
||||
"lightBg": "Highlighted elements",
|
||||
"highlight": "Highlighted elements",
|
||||
"pressed": "Pressed",
|
||||
"selectedPost": "Selected post",
|
||||
"selectedMenu": "Selected menu item",
|
||||
|
|
|
@ -47,7 +47,7 @@ export const LAYERS = {
|
|||
badge: null, // no transparency support
|
||||
fg: null,
|
||||
bg: 'underlay',
|
||||
lightBg: 'bg',
|
||||
highlight: 'bg',
|
||||
panel: 'bg',
|
||||
btn: 'bg',
|
||||
btnPanel: 'panel',
|
||||
|
@ -148,57 +148,57 @@ export const SLOT_INHERITANCE = {
|
|||
cGreen: '#00FF00',
|
||||
cOrange: '#E3FF00',
|
||||
|
||||
lightBg: {
|
||||
highlight: {
|
||||
depends: ['bg'],
|
||||
color: (mod, bg) => brightness(5 * mod, bg).rgb
|
||||
},
|
||||
lightBgFaintText: {
|
||||
highlightFaintText: {
|
||||
depends: ['faint'],
|
||||
layer: 'lightBg',
|
||||
layer: 'highlight',
|
||||
textColor: true
|
||||
},
|
||||
lightBgFaintLink: {
|
||||
highlightFaintLink: {
|
||||
depends: ['faintLink'],
|
||||
layer: 'lightBg',
|
||||
layer: 'highlight',
|
||||
textColor: 'preserve'
|
||||
},
|
||||
lightBgText: {
|
||||
highlightText: {
|
||||
depends: ['text'],
|
||||
layer: 'lightBg',
|
||||
layer: 'highlight',
|
||||
textColor: true
|
||||
},
|
||||
lightBgLink: {
|
||||
highlightLink: {
|
||||
depends: ['link'],
|
||||
layer: 'lightBg',
|
||||
layer: 'highlight',
|
||||
textColor: 'preserve'
|
||||
},
|
||||
lightBgIcon: {
|
||||
depends: ['lightBg', 'lightBgText'],
|
||||
highlightIcon: {
|
||||
depends: ['highlight', 'highlightText'],
|
||||
color: (mod, bg, text) => mixrgb(bg, text)
|
||||
},
|
||||
|
||||
selectedPost: '--lightBg',
|
||||
selectedPost: '--highlight',
|
||||
selectedPostFaintText: {
|
||||
depends: ['lightBgFaintText'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightFaintText'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedPost',
|
||||
textColor: true
|
||||
},
|
||||
selectedPostFaintLink: {
|
||||
depends: ['lightBgFaintLink'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightFaintLink'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedPost',
|
||||
textColor: 'preserve'
|
||||
},
|
||||
selectedPostText: {
|
||||
depends: ['lightBgText'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightText'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedPost',
|
||||
textColor: true
|
||||
},
|
||||
selectedPostLink: {
|
||||
depends: ['lightBgLink'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightLink'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedPost',
|
||||
textColor: 'preserve'
|
||||
},
|
||||
|
@ -207,28 +207,28 @@ export const SLOT_INHERITANCE = {
|
|||
color: (mod, bg, text) => mixrgb(bg, text)
|
||||
},
|
||||
|
||||
selectedMenu: '--lightBg',
|
||||
selectedMenu: '--highlight',
|
||||
selectedMenuFaintText: {
|
||||
depends: ['lightBgFaintText'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightFaintText'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedMenu',
|
||||
textColor: true
|
||||
},
|
||||
selectedMenuFaintLink: {
|
||||
depends: ['lightBgFaintLink'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightFaintLink'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedMenu',
|
||||
textColor: 'preserve'
|
||||
},
|
||||
selectedMenuText: {
|
||||
depends: ['lightBgText'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightText'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedMenu',
|
||||
textColor: true
|
||||
},
|
||||
selectedMenuLink: {
|
||||
depends: ['lightBgLink'],
|
||||
layer: 'lightBg',
|
||||
depends: ['highlightLink'],
|
||||
layer: 'highlight',
|
||||
variant: 'selectedMenu',
|
||||
textColor: 'preserve'
|
||||
},
|
||||
|
|
|
@ -114,7 +114,7 @@
|
|||
"cGreen": "#27ae60",
|
||||
"cOrange": "#f67400",
|
||||
"btnPressed": "--accent",
|
||||
"lightBg": "--accent",
|
||||
"highlight": "--accent",
|
||||
"selectedPost": "--bg,10"
|
||||
},
|
||||
"radii": {
|
||||
|
|
|
@ -117,7 +117,7 @@
|
|||
"cGreen": "#27ae60",
|
||||
"cOrange": "#f67400",
|
||||
"btnPressed": "--accent",
|
||||
"lightBg": "--accent",
|
||||
"highlight": "--accent",
|
||||
"selectedPost": "--bg,10"
|
||||
},
|
||||
"radii": {
|
||||
|
|
|
@ -283,7 +283,7 @@
|
|||
"cBlue": "#008080",
|
||||
"cGreen": "#008000",
|
||||
"cOrange": "#808000",
|
||||
"lightBg": "--accent",
|
||||
"highlight": "--accent",
|
||||
"selectedPost": "--bg,-10"
|
||||
},
|
||||
"radii": {
|
||||
|
|
|
@ -274,7 +274,7 @@
|
|||
"cBlue": "#008080",
|
||||
"cGreen": "#008000",
|
||||
"cOrange": "#808000",
|
||||
"lightBg": "--accent",
|
||||
"highlight": "--accent",
|
||||
"selectedPost": "--bg,-10"
|
||||
},
|
||||
"radii": {
|
||||
|
|
|
@ -256,7 +256,7 @@
|
|||
"cBlue": "#6699cc",
|
||||
"cGreen": "#669966",
|
||||
"cOrange": "#cc6633",
|
||||
"lightBg": "--accent",
|
||||
"highlight": "--accent",
|
||||
"selectedPost": "--bg,-10"
|
||||
},
|
||||
"radii": {
|
||||
|
|
Loading…
Reference in a new issue