diff --git a/src/App.scss b/src/App.scss
index ec80626bc3f9ea65539a2e0c905082e7b06f3c81..a7b565237fb139e2f178902e79eb298310e25b67 100644
--- a/src/App.scss
+++ b/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 {
diff --git a/src/_variables.scss b/src/_variables.scss
index eccc0aabf0ff3518f1ae785de914777798e636ac..1f5d4b3e47b203243a70d97c547eae95484e89a6 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -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;
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index e3b1e4d41ba3bd0f306b31184d59587bbfb8c1ac..1fdee5d3f25804a63607e46c7d4b34d0674d245e 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -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;
}
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 69996f76dc197b8c87aa60384bc254c17ff43a3d..fd997aa8280a4f9ac79edcfdcdaae5fb416c1048 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -29,30 +29,36 @@
<script src="./chat_panel.js"></script>
<style lang="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;
- margin-right: 0.5em;
- }
- }
- .chat-input {
- display: flex;
- form {
- flex: auto;
- input {
- margin: 0.5em;
- width: fill-available;
- }
- }
- }
+@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: $fallback--avatarRadius;
+ border-radius: var(--avatarRadius, $fallback--avatarRadius);
+ margin-right: 0.5em;
+ }
+}
+
+.chat-input {
+ display: flex;
+ form {
+ flex: auto;
+ input {
+ margin: 0.5em;
+ width: fill-available;
+ }
+ }
+}
</style>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 82000d6b06d4d318702fe45ec0c39180d667bb76..ac492262f3dabb3998675a5720d6fa5c443f80bd 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -34,21 +34,17 @@
@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;
+ background-color: $fallback--cRed;
min-height: 28px;
line-height: 28px;
}
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 8e83e7f1aaa4848b1f48207ed427d3465b006462..8b931d2df37f71331b5a73f8bcf372d2b88054ae 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -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>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5af2454e295764d07ebad6c670a2d9e3f5b3882f..7ef4f07d3d8907e85e435d6fd76ac899d8dee6d8 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -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;
}
}
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d57418fbf35e3596a42b492989f3bf70ba769e6f..abf3b5b7df84b041ad062409f86a429fd896e283 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -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;
}
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 0966645dedd9a731422061d528dcfec9ebc08754..b90930825d4b8987fd0b92254bf88a1849625ffa 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -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;
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 98f70f7b57d499539c23127ff0b928efb77e0411..9f1956873de74225677d6c2fdfb906ac7e1a91e5 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -54,33 +54,40 @@
</script>
<style lang="scss">
- .setting-item {
- margin: 1em 1em 1.4em;
+@import '../../_variables.scss';
- textarea {
- width: 100%;
- height: 100px;
- }
+.setting-item {
+ margin: 1em 1em 1.4em;
- .old-avatar {
- width: 128px;
- border-radius: 5px;
- }
+ textarea {
+ width: 100%;
+ height: 100px;
+ }
- .new-avatar {
- object-fit: cover;
- width: 128px;
- height: 128px;
- border-radius: 5px;
- }
+ .old-avatar {
+ width: 128px;
+ border-radius: $fallback--avatarRadius;
+ border-radius: var(--avatarRadius, $fallback--avatarRadius);
+ }
- .btn {
- margin-top: 1em;
- min-height: 28px;
- width: 10em;
- }
- }
- .setting-list {
- list-style-type: none;
- }
+ .new-avatar {
+ object-fit: cover;
+ width: 128px;
+ height: 128px;
+ border-radius: $fallback--avatarRadius;
+ border-radius: var(--avatarRadius, $fallback--avatarRadius);
+ }
+
+ .btn {
+ margin-top: 1em;
+ min-height: 28px;
+ width: 10em;
+ }
+}
+.setting-list {
+ list-style-type: none;
+ li {
+ margin-bottom: 0.5em;
+ }
+}
</style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 80f6a3157e6cdc22149ce61cdb110ae21944c8b3..14ffd922871d9a4329d3e82e541af4c5dd5cd287 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -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;
}
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 6e4143387045fb92a460b575993fb1005a072a8c..5e5ba266e2b499f784fdc9fe4417f621fcdcc13c 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -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]
}
}
}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index e6a00275ff71ab9e9aad7444bd9c70d9e7985d1a..e2853d01c6763ae7cb0f272cf7e572dc736c2364 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -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 {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c3cc939a182ea20e6b8118282c3539a4985f626c..aa3a8bff8672c825c2b2699cb22dc7de09f94a03 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -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;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6487d2a6ccf9d0abacc287fac34fbdb64e0f6a05..660689d29fb36311467243de8ac6ce9bf696ee45 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -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;
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ca3da632c1b1f97c9d6b5010c9c8fefabaf4c358..3f4689fd05b578ad7d8a8b59227f4c3b85b5e933 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -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;
@@ -117,14 +118,9 @@
}
.user-info {
- color: white;
- padding: 0 16px 16px 16px;
- margin-bottom: -4em;
-
- .usersettings {
color: white;
- opacity: 0.8;
- }
+ padding: 0 16px 16px 16px;
+ margin-bottom: -4em;
.container{
padding: 16px 10px 4px 10px;
@@ -186,51 +182,104 @@
flex-flow: row wrap;
justify-content: space-between;
- div {
- flex: 1;
+ .usersettings {
+ 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;
+ .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;
}
- .mute {
- max-width: 220px;
- min-height: 28px;
+ 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;
}
- .remote-follow {
- max-width: 220px;
- min-height: 28px;
- }
+ text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
- .follow {
- 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 {
- width: 92%;
- height: 100%;
+ .user-name{
+ color: white;
}
- .remote-button {
- height: 28px !important;
- width: 92%;
+ .user-screen-name {
+ color: white;
+ font-weight: lighter;
+ font-size: 15px;
+ padding-right: 0.1em;
+ flex: 0 0 auto;
}
- .pressed {
- border-bottom-color: rgba(255, 255, 255, 0.2);
- border-top-color: rgba(0, 0, 0, 0.2);
+ .user-interactions {
+ display: flex;
+ 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 {
@@ -244,7 +293,8 @@
flex: 1;
h5 {
- font-size:1em;
+ color: white;
+ font-size:1em;
font-weight: bolder;
margin: 0 0 0.25em;
}
@@ -254,7 +304,7 @@
}
.dailyAvg {
- font-size: 0.8em;
- opacity: 0.5;
+ font-size: 0.8em;
+ opacity: 0.5;
}
</style>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index e4453fe73db0188c880d2335bced65a55598cbf8..f9362a7d54039caa4bc1b3c6526779576e42d284 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -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);
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 7da767b788a6f91bc6d986544966671fad5a8038..05af7bc3662d6bd4544bb14beae589dcc7fe6ed7 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -13,9 +13,9 @@
<script src="./user_panel.js"></script>
<style lang="scss">
- .user-panel {
- .panel-heading {
- background: transparent;
+.user-panel {
+ .profile-panel-background .panel-heading {
+ background: transparent;
}
- }
+}
</style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 14d8cfe911004d20718472e0a28b8d2a3451896a..e6060451cbbe13deb9ebfdb43e36254fd2b97360 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -12,13 +12,12 @@
<style lang="scss">
.user-profile {
- flex: 2;
- flex-basis: 500px;
- padding-bottom: 10px;
- border-radius: 10px;
- .panel-heading {
- background: transparent;
- }
+ flex: 2;
+ flex-basis: 500px;
+ padding-bottom: 10px;
+ .panel-heading {
+ background: transparent;
+ }
}
</style>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index fecc67b8354215f40dc2acf86313d50e16b17579..39bb498cf28025c1f4130496fefc1e93191991c2 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -75,31 +75,21 @@
<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;
- }
+ .bio {
+ margin: 0;
+ }
- input[type=file] {
- padding: 5px;
- border-radius: 5px;
- }
+ input[type=file] {
+ padding: 5px;
+ }
- .banner {
- max-width: 400px;
- border-radius: 5px;
- }
+ .banner {
+ max-width: 400px;
+ }
- .uploading {
- font-size: 1.5em;
- margin: 0.25em;
- }
+ .uploading {
+ font-size: 1.5em;
+ margin: 0.25em;
+ }
}
</style>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index bedadb126ccafc67c59f314be0166430f202a135..503a0d72cf2760993baeb11ef3773df00d56ffb4 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -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.