Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Some themeing is working!!

Browse source
This commit is contained in:
Henry Jameson 2018-10-07 19:59:22 +03:00
parent 5441766c3c
commit 96804d42f0
15 changed files with 346 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/App.scss
View file

@ -36,8 +36,8 @@ body {
font-family: sans-serif; font-family: sans-serif;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
max-width: 100vw; max-width: 100vw;
overflow-x: hidden; overflow-x: hidden;
} }
@ -50,10 +50,10 @@ a {
button { button {
user-select: none; user-select: none;
color: $fallback--fg; color: $fallback--text;
color: var(--btnText, $fallback--fg); color: var(--btnText, $fallback--text);
background-color: $fallback--btn; background-color: $fallback--fg;
background-color: var(--btn, $fallback--btn); background-color: var(--btn, $fallback--fg);
border: none; border: none;
border-radius: $fallback--btnRadius; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $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-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;
background-color: $fallback--input; background-color: $fallback--fg;
background-color: var(--input, $fallback--input); background-color: var(--input, $fallback--fg);
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--inputText, $fallback--lightText);
font-family: sans-serif; font-family: sans-serif;
font-size: 14px; font-size: 14px;
padding: 8px 7px; padding: 8px 7px;
@ -122,8 +122,8 @@ input, textarea, .select {
bottom: 0; bottom: 0;
right: 5px; right: 5px;
height: 100%; height: 100%;
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
line-height: 29px; line-height: 29px;
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
@ -136,8 +136,8 @@ input, textarea, .select {
background: transparent; background: transparent;
border: none; border: none;
margin: 0; margin: 0;
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
padding: 4px 2em 3px 3px; padding: 4px 2em 3px 3px;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
@ -149,8 +149,8 @@ input, textarea, .select {
&[type=checkbox] { &[type=checkbox] {
display: none; display: none;
&:checked + label::before { &:checked + label::before {
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
} }
&:disabled, &:disabled,
{ {
@ -172,8 +172,8 @@ input, textarea, .select {
border-top: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;
margin-right: .5em; margin-right: .5em;
background-color: $fallback--input; background-color: $fallback--fg;
background-color: var(--input, $fallback--input); background-color: var(--input, $fallback--fg);
vertical-align: top; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1em; line-height: 1.1em;
@ -187,8 +187,8 @@ input, textarea, .select {
} }
option { option {
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
} }
@ -279,9 +279,9 @@ nav {
margin: auto; margin: auto;
height: 50px; height: 50px;
a i { a, a i {
color: $fallback--link; color: $fallback--link;
color: var(--link, $fallback--link); color: var(--topBarLink, $fallback--link);
} }
} }
} }
@ -331,8 +331,8 @@ main-router {
text-align: left; text-align: left;
line-height: 28px; line-height: 28px;
color: var(--panelText); color: var(--panelText);
background-color: $fallback--btn; background-color: $fallback--fg;
background-color: var(--panel, $fallback--btn); background-color: var(--panel, $fallback--fg);
align-items: baseline; align-items: baseline;
.title { .title {
@ -389,8 +389,8 @@ main-router {
nav { nav {
z-index: 1000; z-index: 1000;
color: var(--topBarText); color: var(--topBarText);
background-color: $fallback--btn; background-color: $fallback--fg;
background-color: var(--topBar, $fallback--btn); background-color: var(--topBar, $fallback--fg);
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: 0px 0px 4px rgba(0,0,0,.6);
@ -518,8 +518,8 @@ nav {
cursor: pointer; cursor: pointer;
.selected { .selected {
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--lightText, $fallback--lightText);
} }
.text-format { .text-format {

7
src/_variables.scss
View file

@ -3,14 +3,13 @@ $main-background: white;
$darkened-background: whitesmoke; $darkened-background: whitesmoke;
$fallback--bg: #121a24; $fallback--bg: #121a24;
$fallback--btn: #182230; $fallback--fg: #182230;
$fallback--input: #182230;
$fallback--faint: rgba(185, 185, 186, .5); $fallback--faint: rgba(185, 185, 186, .5);
$fallback--fg: #b9b9ba; $fallback--text: #b9b9ba;
$fallback--link: #d8a070; $fallback--link: #d8a070;
$fallback--icon: #666; $fallback--icon: #666;
$fallback--lightBg: rgb(21, 30, 42); $fallback--lightBg: rgb(21, 30, 42);
$fallback--lightFg: #b9b9ba; $fallback--lightText: #b9b9ba;
$fallback--border: #222; $fallback--border: #222;
$fallback--cRed: #ff0000; $fallback--cRed: #ff0000;
$fallback--cBlue: #0095ff; $fallback--cBlue: #0095ff;

4
src/components/chat_panel/chat_panel.vue
View file

@ -55,8 +55,8 @@
.chat-heading { .chat-heading {
cursor: pointer; cursor: pointer;
.icon-comment-empty { .icon-comment-empty {
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
} }
} }

84
src/components/color_input/color_input.vue Normal file
View 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>

7
src/components/notifications/notifications.scss
View file

@ -22,8 +22,8 @@
} }
.loadmore-error { .loadmore-error {
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
} }
.unseen { .unseen {
@ -90,6 +90,9 @@
padding: 0.25em 0; padding: 0.25em 0;
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
a {
color: var(--faintLink);
}
} }
padding: 0; padding: 0;
.media-body { .media-body {

75
src/components/opacity_input/opacity_input.vue Normal file
View 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>

12
src/components/post_status_form/post_status_form.vue
View file

@ -153,8 +153,8 @@
padding-bottom: 0; padding-bottom: 0;
margin-left: $fallback--attachmentRadius; margin-left: $fallback--attachmentRadius;
margin-left: var(--attachmentRadius, $fallback--attachmentRadius); margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
background-color: $fallback--btn; background-color: $fallback--fg;
background-color: var(--btn, $fallback--btn); background-color: var(--fg, $fallback--fg);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
@ -261,8 +261,8 @@
min-width: 75%; min-width: 75%;
background: $fallback--bg; background: $fallback--bg;
background: var(--bg, $fallback--bg); background: var(--bg, $fallback--bg);
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--lightText, $fallback--lightText);
} }
.autocomplete { .autocomplete {
@ -291,8 +291,8 @@
} }
&.highlighted { &.highlighted {
background-color: $fallback--btn; background-color: $fallback--fg;
background-color: var(--btn, $fallback--btn); background-color: var(--fg, $fallback--fg);
} }
} }
} }

2
src/components/settings/settings.vue
View file

@ -159,7 +159,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.setting-item { .setting-item {
border-bottom: 2px solid var(--btn, $fallback--btn); border-bottom: 2px solid var(--fg, $fallback--fg);
margin: 1em 1em 1.4em; margin: 1em 1em 1.4em;
padding-bottom: 1.4em; padding-bottom: 1.4em;

4
src/components/status/status.vue
View file

@ -284,8 +284,8 @@
margin-left: 0.2em; margin-left: 0.2em;
} }
a:hover i { a:hover i {
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
} }
} }

113
src/components/style_switcher/style_switcher.js
View file

@ -31,6 +31,7 @@ export default {
panelColorLocal: undefined, panelColorLocal: undefined,
panelTextColorLocal: undefined, panelTextColorLocal: undefined,
panelFaintColorLocal: undefined,
panelOpacityLocal: undefined, panelOpacityLocal: undefined,
topBarColorLocal: undefined, topBarColorLocal: undefined,
@ -40,10 +41,17 @@ export default {
alertOpacityLocal: undefined, alertOpacityLocal: undefined,
redColorLocal: '', borderColorLocal: undefined,
blueColorLocal: '', borderOpacityLocal: undefined,
greenColorLocal: '',
orangeColorLocal: '', faintColorLocal: undefined,
faintOpacityLocal: undefined,
faintLinkColorLocal: undefined,
cRedColorLocal: '',
cBlueColorLocal: '',
cGreenColorLocal: '',
cOrangeColorLocal: '',
btnRadiusLocal: '', btnRadiusLocal: '',
inputRadiusLocal: '', inputRadiusLocal: '',
@ -74,16 +82,35 @@ export default {
return { return {
colors: { colors: {
bg: this.bgColorLocal, bg: this.bgColorLocal,
fg: this.fgColorLocal,
text: this.textColorLocal, text: this.textColorLocal,
panel: this.panelColorLocal,
topBar: this.topBarColorLocal,
btn: this.btnColorLocal,
link: this.linkColorLocal, link: this.linkColorLocal,
cRed: this.redColorLocal,
cBlue: this.blueColorLocal, fg: this.fgColorLocal,
cGreen: this.greenColorLocal, fgText: this.fgTextColorLocal,
cOrange: this.orangeColorLocal 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: { radii: {
btnRadius: this.btnRadiusLocal, btnRadius: this.btnRadiusLocal,
@ -197,12 +224,12 @@ export default {
}, },
clearV1 () { clearV1 () {
this.bgOpacityLocal = undefined
this.fgOpacityLocal = undefined this.fgOpacityLocal = undefined
this.fgTextColorLocal = undefined this.fgTextColorLocal = undefined
this.fgLinkColorLocal = undefined this.fgLinkColorLocal = undefined
this.panelColorLocal = undefined this.btnColorLocal = undefined
this.topBarColorLocal = undefined
this.btnTextColorLocal = undefined this.btnTextColorLocal = undefined
this.btnOpacityLocal = undefined this.btnOpacityLocal = undefined
@ -216,7 +243,17 @@ export default {
this.topBarColorLocal = undefined this.topBarColorLocal = undefined
this.topBarTextColorLocal = undefined this.topBarTextColorLocal = undefined
this.topBarLinkColorLocal = undefined
this.topBarOpacityLocal = 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 colors = input.colors || input
const radii = input.radii || input const radii = input.radii || input
this.bgColorLocal = rgb2hex(colors.bg) if (version === 0) {
this.fgColorLocal = rgb2hex(colors.fg) if (input.version) version = input.version
this.textColorLocal = rgb2hex(colors.text) // Old v1 naming: fg is text, btn is foreground
this.linkColorLocal = rgb2hex(colors.link) if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
version = 1
if (version === 1) { }
this.clearV1() // 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) console.log('BENIS')
this.topBarColorLocal = rgb2hex(colors.topBar) 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) const keys = new Set(version !== 1 ? Object.keys(colors) : [])
this.blueColorLocal = rgb2hex(colors.cBlue) if (version === 1) {
this.greenColorLocal = rgb2hex(colors.cGreen) // V1 ignores the rest
this.orangeColorLocal = rgb2hex(colors.cOrange) 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.btnRadiusLocal = radii.btnRadius || 4
this.inputRadiusLocal = radii.inputRadius || 4 this.inputRadiusLocal = radii.inputRadius || 4
@ -259,7 +316,7 @@ export default {
if (this.selectedVersion === 1) { if (this.selectedVersion === 1) {
this.clearV1() this.clearV1()
this.bgColorLocal = this.selected[1] this.bgColorLocal = this.selected[1]
this.btnColorLocal = this.selected[2] this.fgColorLocal = this.selected[2]
this.textColorLocal = this.selected[3] this.textColorLocal = this.selected[3]
this.linkColorLocal = this.selected[4] this.linkColorLocal = this.selected[4]
this.redColorLocal = this.selected[5] this.redColorLocal = this.selected[5]

40
src/components/style_switcher/style_switcher.vue
View file

@ -58,16 +58,16 @@
<div class="color-item"> <div class="color-item">
<ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/> <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
<OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/> <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="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
<ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/> <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/> <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
<ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/> <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/> <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
<ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/> <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
</div> </div>
<div class="color-item wide"> <div class="color-item wide">
<h4>Alert opacity</h4> <h4>Alert opacity</h4>
@ -79,38 +79,40 @@
<div> <div>
<div class="color-item"> <div class="color-item">
<h4>Panel header</h4> <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"/> <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>
<div class="color-item"> <div class="color-item">
<h4>Top bar</h4> <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"/> <OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
<ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/> <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
<ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/> <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>Inputs</h4> <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"/> <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>
<div class="color-item"> <div class="color-item">
<h4>Buttons</h4> <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"/> <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>
<div class="color-item"> <div class="color-item">
<h4>Borders</h4> <h4>Borders</h4>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/> <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/> <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
</div> </div>
<div class="color-item"> <div class="color-item">
<h4>Faint text</h4> <h4>Faint text</h4>
<ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/> <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
<OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/> <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> </div>
</div> </div>

8
src/components/tab_switcher/tab_switcher.scss
View file

@ -17,8 +17,8 @@
.tab, &::after, &::before { .tab, &::after, &::before {
border-bottom: 1px solid; border-bottom: 1px solid;
border-bottom-color: $fallback--btn; border-bottom-color: $fallback--fg;
border-bottom-color: var(--btn, $fallback--btn); border-bottom-color: var(--fg, $fallback--fg);
} }
.tab { .tab {
@ -28,8 +28,8 @@
&:not(.active) { &:not(.active) {
border-bottom: 1px solid; border-bottom: 1px solid;
border-bottom-color: $fallback--btn; border-bottom-color: $fallback--fg;
border-bottom-color: var(--btn, $fallback--btn); border-bottom-color: var(--fg, $fallback--fg);
z-index: 4; z-index: 4;
} }

10
src/components/timeline/timeline.vue
View file

@ -61,12 +61,12 @@
opacity: 0.8; opacity: 0.8;
background-color: transparent; background-color: transparent;
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--panelFaint, $fallback--faint);
} }
.loadmore-error { .loadmore-error {
color: $fallback--fg; color: $fallback--text;
color: var(--fg, $fallback--fg); color: var(--text, $fallback--text);
} }
} }
@ -79,7 +79,7 @@
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
padding: 10px; padding: 10px;
z-index: 1; z-index: 1;
background-color: $fallback--btn; background-color: $fallback--fg;
background-color: var(--btn, $fallback--btn); background-color: var(--fg, $fallback--fg);
} }
</style> </style>

16
src/components/user_card_content/user_card_content.vue
View file

@ -138,8 +138,8 @@
} }
.user-info { .user-info {
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--lightText, $fallback--lightText);
padding: 0 16px; padding: 0 16px;
.container { .container {
@ -173,8 +173,8 @@
} }
.usersettings { .usersettings {
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--lightText, $fallback--lightText);
opacity: .8; opacity: .8;
} }
@ -193,8 +193,8 @@
} }
.user-screen-name { .user-screen-name {
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--lightText, $fallback--lightText);
display: inline-block; display: inline-block;
font-weight: light; font-weight: light;
font-size: 15px; font-size: 15px;
@ -269,8 +269,8 @@
padding: .5em 1.5em 0em 1.5em; padding: .5em 1.5em 0em 1.5em;
text-align: center; text-align: center;
justify-content: space-between; justify-content: space-between;
color: $fallback--lightFg; color: $fallback--lightText;
color: var(--lightFg, $fallback--lightFg); color: var(--lightText, $fallback--lightText);
&.clickable { &.clickable {
.user-count { .user-count {

28
src/services/style_setter/style_setter.js
View file

@ -112,27 +112,33 @@ const generatePreset = (input) => {
colors.text = col.text colors.text = col.text
colors.lightText = colors.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.bg = col.bg
colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
colors.fg = col.fg 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.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.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.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.faintLink = col.faintLink || col.link
colors.border = col.btn
colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
colors.link = col.link
colors.icon = mixrgb(colors.bg, colors.text) colors.icon = mixrgb(colors.bg, colors.text)
colors.cBlue = col.cBlue 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(';'), 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(';'), radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
theme: { theme: {
colors, colors: htmlColors,
radii radii
} }
} }
@ -165,7 +171,7 @@ const setPreset = (val, commit) => {
.then((themes) => { .then((themes) => {
const theme = themes[val] ? themes[val] : themes['pleroma-dark'] const theme = themes[val] ? themes[val] : themes['pleroma-dark']
const bgRgb = hex2rgb(theme[1]) const bgRgb = hex2rgb(theme[1])
const btnRgb = hex2rgb(theme[2]) const fgRgb = hex2rgb(theme[2])
const textRgb = hex2rgb(theme[3]) const textRgb = hex2rgb(theme[3])
const linkRgb = hex2rgb(theme[4]) const linkRgb = hex2rgb(theme[4])
@ -176,7 +182,7 @@ const setPreset = (val, commit) => {
const colors = { const colors = {
bg: bgRgb, bg: bgRgb,
btn: btnRgb, fg: fgRgb,
text: textRgb, text: textRgb,
link: linkRgb, link: linkRgb,
cRed: cRedRgb, cRed: cRedRgb,