diff options
Diffstat (limited to 'src')
21 files changed, 308 insertions, 187 deletions
diff --git a/src/App.scss b/src/App.scss index ec80626b..a7b56523 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 eccc0aab..1f5d4b3e 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 e3b1e4d4..1fdee5d3 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 69996f76..fd997aa8 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 82000d6b..ac492262 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 8e83e7f1..8b931d2d 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 5af2454e..7ef4f07d 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 d57418fb..abf3b5b7 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 0966645d..b9093082 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 98f70f7b..9f195687 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 80f6a315..14ffd922 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 6e414338..5e5ba266 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 e6a00275..e2853d01 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 c3cc939a..aa3a8bff 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 6487d2a6..660689d2 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 ca3da632..3f4689fd 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 e4453fe7..f9362a7d 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 7da767b7..05af7bc3 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 14d8cfe9..e6060451 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 fecc67b8..39bb498c 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 bedadb12..503a0d72 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. |