root/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

border-radii moved to variables, made rgbo colors use theme data, customizable

Browse source 
from settings screen.
This commit is contained in:
Henry Jameson 2018-04-01 22:07:25 +03:00
parent acdb5e5c7a
commit 33b1d85921
21 changed files with 309 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/App.scss
View file

@ -51,7 +51,8 @@ button{
background-color: $fallback--btn; background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn); background-color: var(--btn, $fallback--btn);
border: none; border: none;
border-radius: 5px; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
cursor: pointer; cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
@ -79,7 +80,8 @@ button{
input, textarea, select { input, textarea, select {
border: none; border: none;
border-radius: 5px; border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
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;
@ -90,6 +92,7 @@ input, textarea, select {
font-family: sans-serif; font-family: sans-serif;
font-size: 14px; font-size: 14px;
padding: 8px 7px 4px; padding: 8px 7px 4px;
box-sizing: border-box;
// TODO: Restyle <select> in a decent way. Needs different markup // TODO: Restyle <select> in a decent way. Needs different markup
// -webkit-appearance:none; // -webkit-appearance:none;
@ -109,32 +112,27 @@ input, textarea, select {
transition: color 200ms; transition: color 200ms;
width: 1.1em; width: 1.1em;
height: 1.1em; height: 1.1em;
border-radius: 2px; border-radius: $fallback--checkBoxRadius;
border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
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;
margin-right: .5em; margin-right: .5em;
background-color: $fallback--btn; background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn); background-color: var(--btn, $fallback--btn);
vertical-align: baseline; vertical-align: top;
text-align: center; text-align: center;
line-height: 1.1em; line-height: 1.1em;
font-size: 1.1em; font-size: 1.1em;
box-sizing: border-box; box-sizing: border-box;
color: transparent; color: transparent;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
} }
} }
} }
.icon-cancel, i[class^=icon-] {
.icon-reply,
.icon-retweet,
.icon-star-empty,
.icon-eye-off,
.icon-binoculars,
.icon-plus-squared,
.icon-spin4 {
color: $fallback--icon; color: $fallback--icon;
color: var(--icon, $fallback--icon) color: var(--icon, $fallback--icon)
} }
@ -188,6 +186,11 @@ nav {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: contain; background-size: contain;
a i {
color: $fallback--link;
color: var(--link, $fallback--link);
}
} }
} }
@ -215,9 +218,8 @@ main-router {
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-radius: 10px;
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, 10px); border-radius: var(--panelRadius, $fallback--panelRadius);
box-shadow: 1px 1px 4px rgba(0,0,0,.6); box-shadow: 1px 1px 4px rgba(0,0,0,.6);
overflow: hidden; overflow: hidden;
} }
@ -230,7 +232,8 @@ main-router {
} }
.panel-heading { .panel-heading {
border-radius: 10px 10px 0 0; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
background-size: cover; background-size: cover;
padding: 0.6em 1.0em; padding: 0.6em 1.0em;
text-align: left; text-align: left;
@ -241,7 +244,8 @@ main-router {
} }
.panel-footer { .panel-footer {
border-radius: 0 0 10px 10px; border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
} }
.panel-body > p { .panel-body > p {

7
src/_variables.scss
View file

@ -15,6 +15,11 @@ $fallback--cRed: #ff0000;
$fallback--cBlue: #0095ff; $fallback--cBlue: #0095ff;
$fallback--cGreen: #0fa00f; $fallback--cGreen: #0fa00f;
$fallback--cOrange: orange; $fallback--cOrange: orange;
$fallback--cYellow: yellow;
$fallback--panelRadius: 10px; $fallback--panelRadius: 10px;
$fallback--checkBoxRadius: 2px;
$fallback--btnRadius: 4px;
$fallback--tooltipRadius: 5px;
$fallback--avatarRadius: 4px;
$fallback--avatarAltRadius: 10px;
$fallback--attachmentRadius: 10px;

6
src/components/attachment/attachment.vue
View file

@ -52,7 +52,8 @@
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 5px; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
overflow: hidden; overflow: hidden;
// fixes small gap below video // fixes small gap below video
@ -109,7 +110,8 @@
flex: 1; flex: 1;
img { img {
border: 0px; border: 0px;
border-radius: 5px; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }

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

@ -29,30 +29,36 @@
<script src="./chat_panel.js"></script> <script src="./chat_panel.js"></script>
<style lang="scss"> <style lang="scss">
.chat-window { @import '../../_variables.scss';
max-height: 200px;
overflow-y: auto; .chat-window {
overflow-x: hidden; max-height: 200px;
} overflow-y: auto;
.chat-message { overflow-x: hidden;
padding: 0.2em 0.5em }
}
.chat-avatar { .chat-message {
img { padding: 0.2em 0.5em
height: 32px; }
width: 32px;
border-radius: 5px; .chat-avatar {
margin-right: 0.5em; img {
} height: 32px;
} width: 32px;
.chat-input { border-radius: $fallback--avatarRadius;
display: flex; border-radius: var(--avatarRadius, $fallback--avatarRadius);
form { margin-right: 0.5em;
flex: auto; }
input { }
margin: 0.5em;
width: fill-available; .chat-input {
} display: flex;
} form {
} flex: auto;
input {
margin: 0.5em;
width: fill-available;
}
}
}
</style> </style>

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

@ -34,21 +34,17 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.login-form { .login-form {
input {
border-radius: 5px;
padding: 0.1em 0.2em 0.2em 0.2em;
}
.btn { .btn {
min-height: 28px; min-height: 28px;
width: 10em; width: 10em;
} }
.error { .error {
border-radius: 5px; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);
background-color: $fallback--cRed; background-color: $fallback--cRed;
min-height: 28px; min-height: 28px;
line-height: 28px; line-height: 28px;
} }

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

@ -1,7 +1,7 @@
<template> <template>
<div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop"> <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
<label class="btn btn-default"> <label class="btn btn-default">
<i class="animate-spin" v-if="uploading"></i> <i class="icon-spin4 animate-spin" v-if="uploading"></i>
<i class="icon-upload" v-if="!uploading"></i> <i class="icon-upload" v-if="!uploading"></i>
<input type=file style="position: fixed; top: -100em"></input> <input type=file style="position: fixed; top: -100em"></input>
</label> </label>

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

@ -120,6 +120,7 @@
margin-top: 0.3em; margin-top: 0.3em;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
line-height: 0; line-height: 0;
@ -141,7 +142,6 @@
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
border-radius: 0 0 10px 10px;
} }
} }

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

@ -64,7 +64,8 @@
padding: 3px; padding: 3px;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
} }
@ -86,7 +87,8 @@
} }
.error { .error {
border-radius: 5px; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);
background-color: $fallback--cRed; background-color: $fallback--cRed;
@ -111,7 +113,8 @@
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
background: rgba(230,230,230,0.6); background: rgba(230,230,230,0.6);
border-radius: 5px; border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
font-weight: bold; font-weight: bold;
} }
} }
@ -148,6 +151,7 @@
overflow: hidden; overflow: hidden;
transition: min-height 200ms; transition: min-height 200ms;
min-height: 1px; min-height: 1px;
box-sizing: content-box;
} }
form textarea:focus { form textarea:focus {
@ -169,7 +173,8 @@
.autocomplete-panel { .autocomplete-panel {
margin: 0 0.5em 0 0.5em; margin: 0 0.5em 0 0.5em;
border-radius: 5px; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
position: absolute; position: absolute;
z-index: 1; z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
@ -189,7 +194,8 @@
img { img {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 2px; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
object-fit: contain; object-fit: contain;
} }

8
src/components/registration/registration.vue
View file

@ -88,15 +88,10 @@
} }
form textarea { form textarea {
border-radius: 5px;
line-height:16px; line-height:16px;
resize: vertical; resize: vertical;
} }
input {
border-radius: 5px;
}
.captcha { .captcha {
max-width: 350px; max-width: 350px;
margin-bottom: 0.4em; margin-bottom: 0.4em;
@ -110,7 +105,8 @@
} }
.error { .error {
border-radius: 5px; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
text-align: center; text-align: center;
margin: 0.5em 0.6em 0; margin: 0.5em 0.6em 0;
background-color: $fallback--cRed; background-color: $fallback--cRed;

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

@ -54,33 +54,40 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.setting-item { @import '../../_variables.scss';
margin: 1em 1em 1.4em;
textarea { .setting-item {
width: 100%; margin: 1em 1em 1.4em;
height: 100px;
}
.old-avatar { textarea {
width: 128px; width: 100%;
border-radius: 5px; height: 100px;
} }
.new-avatar { .old-avatar {
object-fit: cover; width: 128px;
width: 128px; border-radius: $fallback--avatarRadius;
height: 128px; border-radius: var(--avatarRadius, $fallback--avatarRadius);
border-radius: 5px; }
}
.btn { .new-avatar {
margin-top: 1em; object-fit: cover;
min-height: 28px; width: 128px;
width: 10em; height: 128px;
} border-radius: $fallback--avatarRadius;
} border-radius: var(--avatarRadius, $fallback--avatarRadius);
.setting-list { }
list-style-type: none;
} .btn {
margin-top: 1em;
min-height: 28px;
width: 10em;
}
}
.setting-list {
list-style-type: none;
li {
margin-bottom: 0.5em;
}
}
</style> </style>

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

@ -145,7 +145,8 @@ status-text-container {
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 4px; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
margin-top: 0.5em; margin-top: 0.5em;
margin-left: 1em; margin-left: 1em;
@ -155,7 +156,8 @@ status-text-container {
flex-shrink: 0; flex-shrink: 0;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
.text { .text {
@ -287,7 +289,8 @@ status-text-container {
margin: 0.2em 0.3em 0 0; margin: 0.2em 0.3em 0 0;
.avatar { .avatar {
float: right; float: right;
border-radius: 5px; border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
} }
} }
@ -409,7 +412,6 @@ status-text-container {
} }
.timeline .panel.timeline { .timeline .panel.timeline {
border-radius: 10px;
overflow: hidden; overflow: hidden;
} }

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

@ -8,7 +8,11 @@ export default {
bgColorLocal: '', bgColorLocal: '',
fgColorLocal: '', fgColorLocal: '',
textColorLocal: '', textColorLocal: '',
linkColorLocal: '' linkColorLocal: '',
redColorLocal: '#ff0000',
blueColorLocal: '#0095ff',
greenColorLocal: '#0fa00f',
orangeColorLocal: '#E3FF00'
} }
}, },
created () { created () {
@ -25,6 +29,11 @@ export default {
this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg) this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg) this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link) this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed || this.redColorLocal)
this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue || this.blueColorLocal)
this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen || this.greenColorLocal)
this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange || this.orangeColorLocal)
}, },
methods: { methods: {
setCustomTheme () { setCustomTheme () {
@ -43,6 +52,12 @@ export default {
const fgRgb = rgb(this.fgColorLocal) const fgRgb = rgb(this.fgColorLocal)
const textRgb = rgb(this.textColorLocal) const textRgb = rgb(this.textColorLocal)
const linkRgb = rgb(this.linkColorLocal) const linkRgb = rgb(this.linkColorLocal)
const redRgb = rgb(this.redColorLocal)
const blueRgb = rgb(this.blueColorLocal)
const greenRgb = rgb(this.greenColorLocal)
const orangeRgb = rgb(this.orangeColorLocal)
if (bgRgb && fgRgb && linkRgb) { if (bgRgb && fgRgb && linkRgb) {
this.$store.dispatch('setOption', { this.$store.dispatch('setOption', {
name: 'customTheme', name: 'customTheme',
@ -50,7 +65,11 @@ export default {
fg: fgRgb, fg: fgRgb,
bg: bgRgb, bg: bgRgb,
text: textRgb, text: textRgb,
link: linkRgb link: linkRgb,
cRed: redRgb,
cBlue: blueRgb,
cGreen: greenRgb,
cOrange: orangeRgb
}}) }})
} }
} }
@ -61,6 +80,10 @@ export default {
this.fgColorLocal = 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.blueColorLocal = this.selected[6]
this.greenColorLocal = this.selected[7]
this.orangeColorLocal = this.selected[8]
} }
} }
} }

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

@ -27,6 +27,28 @@
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal"> <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
</div> </div>
</div> </div>
<div class="color-container additional colors">
<div class="color-item">
<label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
<input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
<input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
</div>
<div class="color-item">
<label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
<input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
<input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
</div>
<div class="color-item">
<label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
<input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
<input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
</div>
<div class="color-item">
<label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
<input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
<input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
</div>
</div>
<div> <div>
<div class="panel"> <div class="panel">
<div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div> <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
@ -79,7 +101,6 @@
.theme-color-cl, .theme-color-cl,
.theme-color-in { .theme-color-in {
margin-left: 4px; margin-left: 4px;
border-radius: 2px;
} }
.theme-color-in { .theme-color-in {

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

@ -82,7 +82,6 @@
right: 0.6em; right: 0.6em;
font-size: 14px; font-size: 14px;
min-width: 6em; min-width: 6em;
border-radius: 5px;
background-color: transparent; background-color: transparent;
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
@ -106,8 +105,6 @@
font-size: 1.1em; font-size: 1.1em;
border-width: 1px 0 0 0; border-width: 1px 0 0 0;
border-style: solid; border-style: solid;
border-radius: 0 0 10px 10px;
border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
padding: 10px; padding: 10px;
z-index: 1; z-index: 1;

9
src/components/user_card/user_card.vue
View file

@ -52,16 +52,19 @@
margin-top: 0.2em; margin-top: 0.2em;
width:32px; width:32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
} }
} }
.usercard { .usercard {
width: fill-available; width: fill-available;
margin: 0.2em 0 0.7em 0; margin: 0.2em 0 0.7em 0;
border-radius: 10px; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid; border-style: solid;
border-color: inherit; border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px; border-width: 1px;
overflow: hidden; overflow: hidden;

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

@ -100,7 +100,8 @@
.profile-panel-background { .profile-panel-background {
background-size: cover; background-size: cover;
border-radius: 10px; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
.panel-heading { .panel-heading {
padding: 0.6em 0em; padding: 0.6em 0em;
@ -117,14 +118,9 @@
} }
.user-info { .user-info {
color: white;
padding: 0 16px 16px 16px;
margin-bottom: -4em;
.usersettings {
color: white; color: white;
opacity: 0.8; padding: 0 16px 16px 16px;
} margin-bottom: -4em;
.container{ .container{
padding: 16px 10px 4px 10px; padding: 16px 10px 4px 10px;
@ -186,51 +182,104 @@
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
div { .usersettings {
flex: 1; color: white;
} opacity: 0.8;
margin-top: 0.7em;
margin-bottom: -1.0em;
.following {
color: white;
font-size: 14px;
flex: 0 0 100%;
margin: -0.7em 0.0em 0.3em 0.0em;
padding-left: 16px;
text-align: left;
} }
.mute { .container{
max-width: 220px; padding: 16px 10px 4px 10px;
min-height: 28px; display: flex;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
justify-content: center;
max-height: 56px;
overflow: hidden;
} }
.remote-follow { img {
max-width: 220px; border-radius: $fallback--avatarRadius;
min-height: 28px; border-radius: var(--avatarRadius, $fallback--avatarRadius);
flex: 1 0 100%;
width: 56px;
height: 56px;
box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
object-fit: cover;
} }
.follow { text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
max-width: 220px;
min-height: 28px; .name-and-screen-name {
display: block;
margin-left: 0.6em;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
} }
button { .user-name{
width: 92%; color: white;
height: 100%;
} }
.remote-button { .user-screen-name {
height: 28px !important; color: white;
width: 92%; font-weight: lighter;
font-size: 15px;
padding-right: 0.1em;
flex: 0 0 auto;
} }
.pressed { .user-interactions {
border-bottom-color: rgba(255, 255, 255, 0.2); display: flex;
border-top-color: rgba(0, 0, 0, 0.2); flex-flow: row wrap;
justify-content: space-between;
div {
flex: 1;
}
margin-top: 0.7em;
margin-bottom: -1.0em;
.following {
color: white;
font-size: 14px;
flex: 0 0 100%;
margin: -0.7em 0.0em 0.3em 0.0em;
padding-left: 16px;
text-align: left;
}
.mute {
max-width: 220px;
min-height: 28px;
}
.remote-follow {
max-width: 220px;
min-height: 28px;
}
.follow {
max-width: 220px;
min-height: 28px;
}
button {
width: 92%;
height: 100%;
}
.remote-button {
height: 28px !important;
width: 92%;
}
.pressed {
border-bottom-color: rgba(255, 255, 255, 0.2);
border-top-color: rgba(0, 0, 0, 0.2);
}
} }
}
} }
.user-counts { .user-counts {
@ -244,7 +293,8 @@
flex: 1; flex: 1;
h5 { h5 {
font-size:1em; color: white;
font-size:1em;
font-weight: bolder; font-weight: bolder;
margin: 0 0 0.25em; margin: 0 0 0.25em;
} }
@ -254,7 +304,7 @@
} }
.dailyAvg { .dailyAvg {
font-size: 0.8em; font-size: 0.8em;
opacity: 0.5; opacity: 0.5;
} }
</style> </style>

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

@ -24,7 +24,6 @@
} }
.user-finder-input { .user-finder-input {
border-radius: 5px;
max-width: 80%; max-width: 80%;
padding: 0.1em 0.2em 0.2em 0.2em; padding: 0.1em 0.2em 0.2em 0.2em;
} }
@ -32,7 +31,8 @@
.finder-error { .finder-error {
background-color: rgba(255, 48, 16, 0.65); background-color: rgba(255, 48, 16, 0.65);
margin: 0.35em; margin: 0.35em;
border-radius: 5px; border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
padding: 0.25em; padding: 0.25em;
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);

8
src/components/user_panel/user_panel.vue
View file

@ -13,9 +13,9 @@
<script src="./user_panel.js"></script> <script src="./user_panel.js"></script>
<style lang="scss"> <style lang="scss">
.user-panel { .user-panel {
.panel-heading { .profile-panel-background .panel-heading {
background: transparent; background: transparent;
} }
} }
</style> </style>

13
src/components/user_profile/user_profile.vue
View file

@ -12,13 +12,12 @@
<style lang="scss"> <style lang="scss">
.user-profile { .user-profile {
flex: 2; flex: 2;
flex-basis: 500px; flex-basis: 500px;
padding-bottom: 10px; padding-bottom: 10px;
border-radius: 10px; .panel-heading {
.panel-heading { background: transparent;
background: transparent; }
}
} }
</style> </style>

36
src/components/user_settings/user_settings.vue
View file

@ -75,31 +75,21 @@
<style lang="scss"> <style lang="scss">
.profile-edit { .profile-edit {
.name-changer { .bio {
border-radius: 5px; margin: 0;
padding: 0.2em 0.2em 0.2em 0.2em; }
}
.name-submit {
padding: 0.2em 0.5em 0.2em 0.5em;
}
.bio {
border-radius: 5px;
margin: 0;
}
input[type=file] { input[type=file] {
padding: 5px; padding: 5px;
border-radius: 5px; }
}
.banner { .banner {
max-width: 400px; max-width: 400px;
border-radius: 5px; }
}
.uploading { .uploading {
font-size: 1.5em; font-size: 1.5em;
margin: 0.25em; margin: 0.25em;
} }
} }
</style> </style>

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

@ -69,6 +69,7 @@ const setColors = (col, commit) => {
if (isDark) { if (isDark) {
mod = mod * -1 mod = mod * -1
} }
console.log(JSON.stringify(col, null, ' '))
colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background colors.bg = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg colors.lightBg = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
@ -77,14 +78,16 @@ const setColors = (col, commit) => {
colors.faint = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text colors.faint = rgb2hex(col.text.r + mod * 2, col.text.g + mod * 2, col.text.b + mod * 2) // faint text
colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text
colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2) colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
colors.link = rgb2hex(col.link.r, col.link.g, col.link.b) // links colors.link = rgb2hex(col.link.r, col.link.g, col.link.b) // links
colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons colors.icon = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
colors.cBlue = '#0095ff'
colors.cRed = 'red' colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
colors.cGreen = '#0fa00f' colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
colors.cYellow = 'yellow' colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
colors.cOrange = 'orange' colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
styleSheet.toString() styleSheet.toString()
styleSheet.insertRule(`body { ${Object.entries(colors).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max') styleSheet.insertRule(`body { ${Object.entries(colors).map(([k, v]) => `--${k}: ${v}`).join(';')} }`, 'index-max')
@ -103,12 +106,23 @@ const setPreset = (val, commit) => {
const fgRgb = 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])
const cRedRgb = hex2rgb(theme[5] || '#FF0000')
const cBlueRgb = hex2rgb(theme[6] || '#0000FF')
const cGreenRgb = hex2rgb(theme[7] || '#00FF00')
const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
const col = { const col = {
bg: bgRgb, bg: bgRgb,
fg: fgRgb, fg: fgRgb,
text: textRgb, text: textRgb,
link: linkRgb link: linkRgb,
cRed: cRedRgb,
cBlue: cBlueRgb,
cGreen: cGreenRgb,
cOrange: cOrangeRgb
} }
// This is a hack, this function is only called during initial load. // This is a hack, this function is only called during initial load.
// We want to cancel loading the theme from config.json if we're already // We want to cancel loading the theme from config.json if we're already
// loading a theme from the persisted state. // loading a theme from the persisted state.