mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-23 14:25:08 +01:00
Some themeing is working!!
This commit is contained in:
parent
5441766c3c
commit
96804d42f0
56
src/App.scss
56
src/App.scss
@ -36,8 +36,8 @@ body {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@ -50,10 +50,10 @@ a {
|
||||
|
||||
button {
|
||||
user-select: none;
|
||||
color: $fallback--fg;
|
||||
color: var(--btnText, $fallback--fg);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
color: $fallback--text;
|
||||
color: var(--btnText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
border: none;
|
||||
border-radius: $fallback--btnRadius;
|
||||
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||
@ -102,10 +102,10 @@ input, textarea, .select {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 0px 2px black inset;
|
||||
background-color: $fallback--input;
|
||||
background-color: var(--input, $fallback--input);
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--inputText, $fallback--lightText);
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 8px 7px;
|
||||
@ -122,8 +122,8 @@ input, textarea, .select {
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
height: 100%;
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
line-height: 29px;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
@ -136,8 +136,8 @@ input, textarea, .select {
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin: 0;
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
padding: 4px 2em 3px 3px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
@ -149,8 +149,8 @@ input, textarea, .select {
|
||||
&[type=checkbox] {
|
||||
display: none;
|
||||
&:checked + label::before {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
&:disabled,
|
||||
{
|
||||
@ -172,8 +172,8 @@ input, textarea, .select {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 0px 2px black inset;
|
||||
margin-right: .5em;
|
||||
background-color: $fallback--input;
|
||||
background-color: var(--input, $fallback--input);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: 1.1em;
|
||||
@ -187,8 +187,8 @@ input, textarea, .select {
|
||||
}
|
||||
|
||||
option {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
}
|
||||
@ -279,9 +279,9 @@ nav {
|
||||
margin: auto;
|
||||
height: 50px;
|
||||
|
||||
a i {
|
||||
a, a i {
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -331,8 +331,8 @@ main-router {
|
||||
text-align: left;
|
||||
line-height: 28px;
|
||||
color: var(--panelText);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--panel, $fallback--btn);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--panel, $fallback--fg);
|
||||
align-items: baseline;
|
||||
|
||||
.title {
|
||||
@ -389,8 +389,8 @@ main-router {
|
||||
nav {
|
||||
z-index: 1000;
|
||||
color: var(--topBarText);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--topBar, $fallback--btn);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--topBar, $fallback--fg);
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,.6);
|
||||
@ -518,8 +518,8 @@ nav {
|
||||
cursor: pointer;
|
||||
|
||||
.selected {
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
|
||||
.text-format {
|
||||
|
@ -3,14 +3,13 @@ $main-background: white;
|
||||
$darkened-background: whitesmoke;
|
||||
|
||||
$fallback--bg: #121a24;
|
||||
$fallback--btn: #182230;
|
||||
$fallback--input: #182230;
|
||||
$fallback--fg: #182230;
|
||||
$fallback--faint: rgba(185, 185, 186, .5);
|
||||
$fallback--fg: #b9b9ba;
|
||||
$fallback--text: #b9b9ba;
|
||||
$fallback--link: #d8a070;
|
||||
$fallback--icon: #666;
|
||||
$fallback--lightBg: rgb(21, 30, 42);
|
||||
$fallback--lightFg: #b9b9ba;
|
||||
$fallback--lightText: #b9b9ba;
|
||||
$fallback--border: #222;
|
||||
$fallback--cRed: #ff0000;
|
||||
$fallback--cBlue: #0095ff;
|
||||
|
@ -55,8 +55,8 @@
|
||||
.chat-heading {
|
||||
cursor: pointer;
|
||||
.icon-comment-empty {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
84
src/components/color_input/color_input.vue
Normal file
84
src/components/color_input/color_input.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="color-control" :class="{ disabled: !present }">
|
||||
<label :for="name" class="label">
|
||||
{{label}}
|
||||
</label>
|
||||
<input
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
class="opt"
|
||||
:id="name + '-o'"
|
||||
type="checkbox"
|
||||
:checked="present"
|
||||
@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
|
||||
>
|
||||
<label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
|
||||
<input
|
||||
:id="name"
|
||||
class="color-input"
|
||||
type="color"
|
||||
:value="value || fallback"
|
||||
:disabled="!present"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
>
|
||||
<input
|
||||
:id="name + '-t'"
|
||||
class="text-input"
|
||||
type="text"
|
||||
:value="value || fallback"
|
||||
:disabled="!present"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'name', 'label', 'value', 'fallback'
|
||||
],
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.value !== 'undefined'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.color-control {
|
||||
display: flex;
|
||||
|
||||
&.disabled *:not(.opt-l){
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 2;
|
||||
min-width: 7em;
|
||||
}
|
||||
|
||||
.opt-l {
|
||||
align-self: center;
|
||||
flex: 0;
|
||||
&::before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-input {
|
||||
max-width: 7em;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.color-input {
|
||||
flex: 0;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
max-height: 29px;
|
||||
min-width: 2em;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -22,8 +22,8 @@
|
||||
}
|
||||
|
||||
.loadmore-error {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.unseen {
|
||||
@ -90,6 +90,9 @@
|
||||
padding: 0.25em 0;
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
a {
|
||||
color: var(--faintLink);
|
||||
}
|
||||
}
|
||||
padding: 0;
|
||||
.media-body {
|
||||
|
75
src/components/opacity_input/opacity_input.vue
Normal file
75
src/components/opacity_input/opacity_input.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="opacity-control" :class="{ disabled: !present }">
|
||||
<label :for="name" class="label">
|
||||
{{$t('settings.opacity')}}
|
||||
</label>
|
||||
<input
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
class="opt"
|
||||
:id="name + '-o'"
|
||||
type="checkbox"
|
||||
:checked="present"
|
||||
@input="$emit('input', !present ? fallback : undefined)"
|
||||
>
|
||||
<label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
|
||||
<input
|
||||
:id="name"
|
||||
class="input-range"
|
||||
type="range"
|
||||
:value="value || fallback"
|
||||
:disabled="!present"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
max="1"
|
||||
min="0"
|
||||
step=".05">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'name', 'value', 'fallback'
|
||||
],
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.value !== 'undefined'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.opacity-control {
|
||||
display: flex;
|
||||
|
||||
&.disabled *:not(.opt-l) {
|
||||
opacity: .5
|
||||
}
|
||||
|
||||
.opt-l {
|
||||
align-self: center;
|
||||
line-height: 0;
|
||||
&::before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 2;
|
||||
min-width: 7em;
|
||||
}
|
||||
|
||||
.input-range {
|
||||
align-self: center;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
min-width: 9em;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -153,8 +153,8 @@
|
||||
padding-bottom: 0;
|
||||
margin-left: $fallback--attachmentRadius;
|
||||
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--fg, $fallback--fg);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@ -261,8 +261,8 @@
|
||||
min-width: 75%;
|
||||
background: $fallback--bg;
|
||||
background: var(--bg, $fallback--bg);
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
@ -291,8 +291,8 @@
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--fg, $fallback--fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -159,7 +159,7 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.setting-item {
|
||||
border-bottom: 2px solid var(--btn, $fallback--btn);
|
||||
border-bottom: 2px solid var(--fg, $fallback--fg);
|
||||
margin: 1em 1em 1.4em;
|
||||
padding-bottom: 1.4em;
|
||||
|
||||
|
@ -284,8 +284,8 @@
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
a:hover i {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -31,6 +31,7 @@ export default {
|
||||
|
||||
panelColorLocal: undefined,
|
||||
panelTextColorLocal: undefined,
|
||||
panelFaintColorLocal: undefined,
|
||||
panelOpacityLocal: undefined,
|
||||
|
||||
topBarColorLocal: undefined,
|
||||
@ -40,10 +41,17 @@ export default {
|
||||
|
||||
alertOpacityLocal: undefined,
|
||||
|
||||
redColorLocal: '',
|
||||
blueColorLocal: '',
|
||||
greenColorLocal: '',
|
||||
orangeColorLocal: '',
|
||||
borderColorLocal: undefined,
|
||||
borderOpacityLocal: undefined,
|
||||
|
||||
faintColorLocal: undefined,
|
||||
faintOpacityLocal: undefined,
|
||||
faintLinkColorLocal: undefined,
|
||||
|
||||
cRedColorLocal: '',
|
||||
cBlueColorLocal: '',
|
||||
cGreenColorLocal: '',
|
||||
cOrangeColorLocal: '',
|
||||
|
||||
btnRadiusLocal: '',
|
||||
inputRadiusLocal: '',
|
||||
@ -74,16 +82,35 @@ export default {
|
||||
return {
|
||||
colors: {
|
||||
bg: this.bgColorLocal,
|
||||
fg: this.fgColorLocal,
|
||||
text: this.textColorLocal,
|
||||
panel: this.panelColorLocal,
|
||||
topBar: this.topBarColorLocal,
|
||||
btn: this.btnColorLocal,
|
||||
link: this.linkColorLocal,
|
||||
cRed: this.redColorLocal,
|
||||
cBlue: this.blueColorLocal,
|
||||
cGreen: this.greenColorLocal,
|
||||
cOrange: this.orangeColorLocal
|
||||
|
||||
fg: this.fgColorLocal,
|
||||
fgText: this.fgTextColorLocal,
|
||||
fgLink: this.fgLinkColorLocal,
|
||||
|
||||
panel: this.panelColorLocal,
|
||||
panelText: this.panelTextColorLocal,
|
||||
panelFaint: this.panelFaintColorLocal,
|
||||
|
||||
input: this.inputColorLocal,
|
||||
inputText: this.inputTextColorLocal,
|
||||
|
||||
topBar: this.topBarColorLocal,
|
||||
topBarText: this.topBarTextColorLocal,
|
||||
topBarLink: this.topBarLinkColorLocal,
|
||||
|
||||
btn: this.btnColorLocal,
|
||||
btnText: this.btnTextColorLocal,
|
||||
|
||||
faint: this.faintColorLocal,
|
||||
faintLink: this.faintLinkColorLocal,
|
||||
border: this.borderColorLocal,
|
||||
|
||||
cRed: this.cRedColorLocal,
|
||||
cBlue: this.cBlueColorLocal,
|
||||
cGreen: this.cGreenColorLocal,
|
||||
cOrange: this.cOrangeColorLocal
|
||||
},
|
||||
radii: {
|
||||
btnRadius: this.btnRadiusLocal,
|
||||
@ -197,12 +224,12 @@ export default {
|
||||
},
|
||||
|
||||
clearV1 () {
|
||||
this.bgOpacityLocal = undefined
|
||||
this.fgOpacityLocal = undefined
|
||||
this.fgTextColorLocal = undefined
|
||||
this.fgLinkColorLocal = undefined
|
||||
|
||||
this.panelColorLocal = undefined
|
||||
this.topBarColorLocal = undefined
|
||||
this.btnColorLocal = undefined
|
||||
this.btnTextColorLocal = undefined
|
||||
this.btnOpacityLocal = undefined
|
||||
|
||||
@ -216,7 +243,17 @@ export default {
|
||||
|
||||
this.topBarColorLocal = undefined
|
||||
this.topBarTextColorLocal = undefined
|
||||
this.topBarLinkColorLocal = undefined
|
||||
this.topBarOpacityLocal = undefined
|
||||
|
||||
this.alertOpacityLocal = undefined
|
||||
|
||||
this.borderColorLocal = undefined
|
||||
this.borderOpacityLocal = undefined
|
||||
|
||||
this.faintColorLocal = undefined
|
||||
this.faintOpacityLocal = undefined
|
||||
this.faintLinkColorLocal = undefined
|
||||
},
|
||||
|
||||
/**
|
||||
@ -228,22 +265,42 @@ export default {
|
||||
const colors = input.colors || input
|
||||
const radii = input.radii || input
|
||||
|
||||
this.bgColorLocal = rgb2hex(colors.bg)
|
||||
this.fgColorLocal = rgb2hex(colors.fg)
|
||||
this.textColorLocal = rgb2hex(colors.text)
|
||||
this.linkColorLocal = rgb2hex(colors.link)
|
||||
|
||||
if (version === 1) {
|
||||
this.clearV1()
|
||||
if (version === 0) {
|
||||
if (input.version) version = input.version
|
||||
// Old v1 naming: fg is text, btn is foreground
|
||||
if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
|
||||
version = 1
|
||||
}
|
||||
// New v2 naming: text is text, fg is foreground
|
||||
if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
|
||||
version = 2
|
||||
}
|
||||
}
|
||||
|
||||
this.panelColorLocal = rgb2hex(colors.panel)
|
||||
this.topBarColorLocal = rgb2hex(colors.topBar)
|
||||
console.log('BENIS')
|
||||
console.log(version)
|
||||
// Stuff that differs between V1 and V2
|
||||
if (version === 1) {
|
||||
console.log(colors)
|
||||
this.fgColorLocal = rgb2hex(colors.btn)
|
||||
this.textColorLocal = rgb2hex(colors.fg)
|
||||
}
|
||||
|
||||
this.redColorLocal = rgb2hex(colors.cRed)
|
||||
this.blueColorLocal = rgb2hex(colors.cBlue)
|
||||
this.greenColorLocal = rgb2hex(colors.cGreen)
|
||||
this.orangeColorLocal = rgb2hex(colors.cOrange)
|
||||
const keys = new Set(version !== 1 ? Object.keys(colors) : [])
|
||||
if (version === 1) {
|
||||
// V1 ignores the rest
|
||||
this.clearV1()
|
||||
keys
|
||||
.add('bg')
|
||||
.add('link')
|
||||
.add('cRed')
|
||||
.add('cBlue')
|
||||
.add('cGreen')
|
||||
.add('cOrange')
|
||||
}
|
||||
keys.forEach(key => {
|
||||
this[key + 'ColorLocal'] = rgb2hex(colors[key])
|
||||
})
|
||||
|
||||
this.btnRadiusLocal = radii.btnRadius || 4
|
||||
this.inputRadiusLocal = radii.inputRadius || 4
|
||||
@ -259,7 +316,7 @@ export default {
|
||||
if (this.selectedVersion === 1) {
|
||||
this.clearV1()
|
||||
this.bgColorLocal = this.selected[1]
|
||||
this.btnColorLocal = this.selected[2]
|
||||
this.fgColorLocal = this.selected[2]
|
||||
this.textColorLocal = this.selected[3]
|
||||
this.linkColorLocal = this.selected[4]
|
||||
this.redColorLocal = this.selected[5]
|
||||
|
@ -58,16 +58,16 @@
|
||||
<div class="color-item">
|
||||
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
|
||||
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
|
||||
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
|
||||
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
|
||||
<ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
|
||||
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
|
||||
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
<ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
|
||||
<ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
<ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
|
||||
<ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
|
||||
</div>
|
||||
<div class="color-item wide">
|
||||
<h4>Alert opacity</h4>
|
||||
@ -79,38 +79,40 @@
|
||||
<div>
|
||||
<div class="color-item">
|
||||
<h4>Panel header</h4>
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
|
||||
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
|
||||
<ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
|
||||
<ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Top bar</h4>
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
|
||||
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
|
||||
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
|
||||
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Inputs</h4>
|
||||
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Buttons</h4>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
|
||||
<ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Borders</h4>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
|
||||
<OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>Faint text</h4>
|
||||
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
|
||||
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
|
||||
<OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
|
||||
<ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -17,8 +17,8 @@
|
||||
|
||||
.tab, &::after, &::before {
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: $fallback--btn;
|
||||
border-bottom-color: var(--btn, $fallback--btn);
|
||||
border-bottom-color: $fallback--fg;
|
||||
border-bottom-color: var(--fg, $fallback--fg);
|
||||
}
|
||||
|
||||
.tab {
|
||||
@ -28,8 +28,8 @@
|
||||
|
||||
&:not(.active) {
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: $fallback--btn;
|
||||
border-bottom-color: var(--btn, $fallback--btn);
|
||||
border-bottom-color: $fallback--fg;
|
||||
border-bottom-color: var(--fg, $fallback--fg);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
@ -61,12 +61,12 @@
|
||||
opacity: 0.8;
|
||||
background-color: transparent;
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
color: var(--panelFaint, $fallback--faint);
|
||||
}
|
||||
|
||||
.loadmore-error {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,7 +79,7 @@
|
||||
border-color: var(--border, $fallback--border);
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--fg, $fallback--fg);
|
||||
}
|
||||
</style>
|
||||
|
@ -138,8 +138,8 @@
|
||||
}
|
||||
|
||||
.user-info {
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
padding: 0 16px;
|
||||
|
||||
.container {
|
||||
@ -173,8 +173,8 @@
|
||||
}
|
||||
|
||||
.usersettings {
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
@ -193,8 +193,8 @@
|
||||
}
|
||||
|
||||
.user-screen-name {
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
display: inline-block;
|
||||
font-weight: light;
|
||||
font-size: 15px;
|
||||
@ -269,8 +269,8 @@
|
||||
padding: .5em 1.5em 0em 1.5em;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
|
||||
&.clickable {
|
||||
.user-count {
|
||||
|
@ -112,27 +112,33 @@ const generatePreset = (input) => {
|
||||
|
||||
colors.text = col.text
|
||||
colors.lightText = colors.text
|
||||
colors.link = col.link
|
||||
colors.border = col.border || col.fg
|
||||
colors.faint = col.faint || col.text
|
||||
|
||||
colors.bg = col.bg
|
||||
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
|
||||
|
||||
colors.fg = col.fg
|
||||
colors.fgText = getTextColor(colors.fg, colors.text)
|
||||
colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
|
||||
colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link)
|
||||
|
||||
colors.btn = col.btn || col.fg
|
||||
colors.btnText = getTextColor(colors.btn, colors.text)
|
||||
colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
|
||||
|
||||
colors.input = col.input || col.fg
|
||||
colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText)
|
||||
|
||||
colors.panel = col.panel || col.fg
|
||||
colors.panelText = getTextColor(colors.panel, colors.text)
|
||||
colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
|
||||
colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
|
||||
|
||||
colors.topBar = col.topBar || col.fg
|
||||
colors.topBarText = getTextColor(colors.topBar, colors.text)
|
||||
colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
|
||||
colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
|
||||
|
||||
colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
|
||||
colors.border = col.btn
|
||||
colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
|
||||
colors.faintLink = col.faintLink || col.link
|
||||
|
||||
colors.link = col.link
|
||||
colors.icon = mixrgb(colors.bg, colors.text)
|
||||
|
||||
colors.cBlue = col.cBlue
|
||||
@ -153,7 +159,7 @@ const generatePreset = (input) => {
|
||||
colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
|
||||
radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
|
||||
theme: {
|
||||
colors,
|
||||
colors: htmlColors,
|
||||
radii
|
||||
}
|
||||
}
|
||||
@ -165,7 +171,7 @@ const setPreset = (val, commit) => {
|
||||
.then((themes) => {
|
||||
const theme = themes[val] ? themes[val] : themes['pleroma-dark']
|
||||
const bgRgb = hex2rgb(theme[1])
|
||||
const btnRgb = hex2rgb(theme[2])
|
||||
const fgRgb = hex2rgb(theme[2])
|
||||
const textRgb = hex2rgb(theme[3])
|
||||
const linkRgb = hex2rgb(theme[4])
|
||||
|
||||
@ -176,7 +182,7 @@ const setPreset = (val, commit) => {
|
||||
|
||||
const colors = {
|
||||
bg: bgRgb,
|
||||
btn: btnRgb,
|
||||
fg: fgRgb,
|
||||
text: textRgb,
|
||||
link: linkRgb,
|
||||
cRed: cRedRgb,
|
||||
|
Loading…
Reference in New Issue
Block a user