border-radii moved to variables, made rgbo colors use theme data, customizable
from settings screen.
This commit is contained in:
Henry Jameson
parent
acdb5e5c7a
commit
33b1d85921
36
src/App.scss
36
src/App.scss
|
|
@ -51,7 +51,8 @@ button{
|
|||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--btnRadius;
|
||||
border-radius: var(--btnRadius, $fallback--btnRadius);
|
||||
cursor: pointer;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -79,7 +80,8 @@ button{
|
|||
|
||||
input, textarea, select {
|
||||
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-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 0px 2px black inset;
|
||||
|
|
@ -90,6 +92,7 @@ input, textarea, select {
|
|||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 8px 7px 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
// TODO: Restyle <select> in a decent way. Needs different markup
|
||||
// -webkit-appearance:none;
|
||||
|
|
@ -109,32 +112,27 @@ input, textarea, select {
|
|||
transition: color 200ms;
|
||||
width: 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-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 0px 2px black inset;
|
||||
margin-right: .5em;
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
vertical-align: baseline;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: 1.1em;
|
||||
font-size: 1.1em;
|
||||
box-sizing: border-box;
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-cancel,
|
||||
.icon-reply,
|
||||
.icon-retweet,
|
||||
.icon-star-empty,
|
||||
.icon-eye-off,
|
||||
.icon-binoculars,
|
||||
.icon-plus-squared,
|
||||
.icon-spin4 {
|
||||
i[class^=icon-] {
|
||||
color: $fallback--icon;
|
||||
color: var(--icon, $fallback--icon)
|
||||
}
|
||||
|
|
@ -188,6 +186,11 @@ nav {
|
|||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
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: var(--bg, $fallback--bg);
|
||||
|
||||
border-radius: 10px;
|
||||
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);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -230,7 +232,8 @@ main-router {
|
|||
}
|
||||
|
||||
.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;
|
||||
padding: 0.6em 1.0em;
|
||||
text-align: left;
|
||||
|
|
@ -241,7 +244,8 @@ main-router {
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,11 @@ $fallback--cRed: #ff0000;
|
|||
$fallback--cBlue: #0095ff;
|
||||
$fallback--cGreen: #0fa00f;
|
||||
$fallback--cOrange: orange;
|
||||
$fallback--cYellow: yellow;
|
||||
|
||||
$fallback--panelRadius: 10px;
|
||||
$fallback--checkBoxRadius: 2px;
|
||||
$fallback--btnRadius: 4px;
|
||||
$fallback--tooltipRadius: 5px;
|
||||
$fallback--avatarRadius: 4px;
|
||||
$fallback--avatarAltRadius: 10px;
|
||||
$fallback--attachmentRadius: 10px;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@
|
|||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
overflow: hidden;
|
||||
|
||||
// fixes small gap below video
|
||||
|
|
@ -109,7 +110,8 @@
|
|||
flex: 1;
|
||||
img {
|
||||
border: 0px;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,22 +29,28 @@
|
|||
<script src="./chat_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.chat-window {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
padding: 0.2em 0.5em
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
form {
|
||||
|
|
|
|||
|
|
@ -34,18 +34,14 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.login-form {
|
||||
input {
|
||||
border-radius: 5px;
|
||||
padding: 0.1em 0.2em 0.2em 0.2em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-height: 28px;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
text-align: center;
|
||||
background-color: rgba(255, 48, 16, 0.65);
|
||||
background-color: $fallback--cRed;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
|
||||
<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>
|
||||
<input type=file style="position: fixed; top: -100em"></input>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@
|
|||
margin-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
|
|
@ -141,7 +142,6 @@
|
|||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,7 +64,8 @@
|
|||
padding: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,7 +87,8 @@
|
|||
}
|
||||
|
||||
.error {
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
text-align: center;
|
||||
background-color: rgba(255, 48, 16, 0.65);
|
||||
background-color: $fallback--cRed;
|
||||
|
|
@ -111,7 +113,8 @@
|
|||
margin: 10px;
|
||||
padding: 5px;
|
||||
background: rgba(230,230,230,0.6);
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -148,6 +151,7 @@
|
|||
overflow: hidden;
|
||||
transition: min-height 200ms;
|
||||
min-height: 1px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
form textarea:focus {
|
||||
|
|
@ -169,7 +173,8 @@
|
|||
|
||||
.autocomplete-panel {
|
||||
margin: 0 0.5em 0 0.5em;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
|
|
@ -189,7 +194,8 @@
|
|||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,15 +88,10 @@
|
|||
}
|
||||
|
||||
form textarea {
|
||||
border-radius: 5px;
|
||||
line-height:16px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.captcha {
|
||||
max-width: 350px;
|
||||
margin-bottom: 0.4em;
|
||||
|
|
@ -110,7 +105,8 @@
|
|||
}
|
||||
|
||||
.error {
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
text-align: center;
|
||||
margin: 0.5em 0.6em 0;
|
||||
background-color: $fallback--cRed;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,8 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.setting-item {
|
||||
margin: 1em 1em 1.4em;
|
||||
|
||||
|
|
@ -64,14 +66,16 @@
|
|||
|
||||
.old-avatar {
|
||||
width: 128px;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
}
|
||||
|
||||
.new-avatar {
|
||||
object-fit: cover;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -82,5 +86,8 @@
|
|||
}
|
||||
.setting-list {
|
||||
list-style-type: none;
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,8 @@ status-text-container {
|
|||
border-color: var(--border, $fallback--border);
|
||||
border-style: solid;
|
||||
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);
|
||||
margin-top: 0.5em;
|
||||
margin-left: 1em;
|
||||
|
|
@ -155,7 +156,8 @@ status-text-container {
|
|||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
@ -287,7 +289,8 @@ status-text-container {
|
|||
margin: 0.2em 0.3em 0 0;
|
||||
.avatar {
|
||||
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 {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@ export default {
|
|||
bgColorLocal: '',
|
||||
fgColorLocal: '',
|
||||
textColorLocal: '',
|
||||
linkColorLocal: ''
|
||||
linkColorLocal: '',
|
||||
redColorLocal: '#ff0000',
|
||||
blueColorLocal: '#0095ff',
|
||||
greenColorLocal: '#0fa00f',
|
||||
orangeColorLocal: '#E3FF00'
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
|
@ -25,6 +29,11 @@ export default {
|
|||
this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors.lightBg)
|
||||
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
|
||||
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: {
|
||||
setCustomTheme () {
|
||||
|
|
@ -43,6 +52,12 @@ export default {
|
|||
const fgRgb = rgb(this.fgColorLocal)
|
||||
const textRgb = rgb(this.textColorLocal)
|
||||
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) {
|
||||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
|
|
@ -50,7 +65,11 @@ export default {
|
|||
fg: fgRgb,
|
||||
bg: bgRgb,
|
||||
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.textColorLocal = this.selected[3]
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,28 @@
|
|||
<input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
|
||||
</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 class="panel">
|
||||
<div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
|
||||
|
|
@ -79,7 +101,6 @@
|
|||
.theme-color-cl,
|
||||
.theme-color-in {
|
||||
margin-left: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.theme-color-in {
|
||||
|
|
|
|||
|
|
@ -82,7 +82,6 @@
|
|||
right: 0.6em;
|
||||
font-size: 14px;
|
||||
min-width: 6em;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
|
|
@ -106,8 +105,6 @@
|
|||
font-size: 1.1em;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-radius: 0 0 10px 10px;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -52,16 +52,19 @@
|
|||
margin-top: 0.2em;
|
||||
width:32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
}
|
||||
|
||||
.usercard {
|
||||
width: fill-available;
|
||||
margin: 0.2em 0 0.7em 0;
|
||||
border-radius: 10px;
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-width: 1px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,8 @@
|
|||
|
||||
.profile-panel-background {
|
||||
background-size: cover;
|
||||
border-radius: 10px;
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
|
||||
.panel-heading {
|
||||
padding: 0.6em 0em;
|
||||
|
|
@ -121,11 +122,6 @@
|
|||
padding: 0 16px 16px 16px;
|
||||
margin-bottom: -4em;
|
||||
|
||||
.usersettings {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 16px 10px 4px 10px;
|
||||
display: flex;
|
||||
|
|
@ -181,6 +177,59 @@
|
|||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.user-interactions {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.usersettings {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 16px 10px 4px 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
align-content: flex-start;
|
||||
justify-content: center;
|
||||
max-height: 56px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: $fallback--avatarRadius;
|
||||
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;
|
||||
}
|
||||
|
||||
text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
|
||||
|
||||
.name-and-screen-name {
|
||||
display: block;
|
||||
margin-left: 0.6em;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-name{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-screen-name {
|
||||
color: white;
|
||||
font-weight: lighter;
|
||||
font-size: 15px;
|
||||
padding-right: 0.1em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.user-interactions {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
|
@ -244,6 +293,7 @@
|
|||
flex: 1;
|
||||
|
||||
h5 {
|
||||
color: white;
|
||||
font-size:1em;
|
||||
font-weight: bolder;
|
||||
margin: 0 0 0.25em;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
}
|
||||
|
||||
.user-finder-input {
|
||||
border-radius: 5px;
|
||||
max-width: 80%;
|
||||
padding: 0.1em 0.2em 0.2em 0.2em;
|
||||
}
|
||||
|
|
@ -32,7 +31,8 @@
|
|||
.finder-error {
|
||||
background-color: rgba(255, 48, 16, 0.65);
|
||||
margin: 0.35em;
|
||||
border-radius: 5px;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
padding: 0.25em;
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<style lang="scss">
|
||||
.user-panel {
|
||||
.panel-heading {
|
||||
.profile-panel-background .panel-heading {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
flex: 2;
|
||||
flex-basis: 500px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
.panel-heading {
|
||||
background: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,26 +75,16 @@
|
|||
|
||||
<style lang="scss">
|
||||
.profile-edit {
|
||||
.name-changer {
|
||||
border-radius: 5px;
|
||||
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] {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
max-width: 400px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.uploading {
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ const setColors = (col, commit) => {
|
|||
if (isDark) {
|
||||
mod = mod * -1
|
||||
}
|
||||
console.log(JSON.stringify(col, null, ' '))
|
||||
|
||||
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
|
||||
|
|
@ -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.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['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.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.cGreen = '#0fa00f'
|
||||
colors.cYellow = 'yellow'
|
||||
colors.cOrange = 'orange'
|
||||
|
||||
colors.cBlue = col.cBlue && rgb2hex(col.cBlue.r, col.cBlue.g, col.cBlue.b)
|
||||
colors.cRed = col.cRed && rgb2hex(col.cRed.r, col.cRed.g, col.cRed.b)
|
||||
colors.cGreen = col.cGreen && rgb2hex(col.cGreen.r, col.cGreen.g, col.cGreen.b)
|
||||
colors.cOrange = col.cOrange && rgb2hex(col.cOrange.r, col.cOrange.g, col.cOrange.b)
|
||||
|
||||
styleSheet.toString()
|
||||
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 textRgb = hex2rgb(theme[3])
|
||||
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 = {
|
||||
bg: bgRgb,
|
||||
fg: fgRgb,
|
||||
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.
|
||||
// We want to cancel loading the theme from config.json if we're already
|
||||
// loading a theme from the persisted state.
|
||||
|
|
|
|||
Loading…
Reference in New Issue