From c46795c6922bdfc3f3669d71f0c5867cb2f1577a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Apr 2018 06:02:01 +0300 Subject: [PATCH 01/15] use semi-transparent faint color + fix --- src/_variables.scss | 2 +- src/components/notifications/notifications.scss | 2 +- src/services/style_setter/style_setter.js | 5 +---- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index d90a1d48..3cd55868 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -4,7 +4,7 @@ $darkened-background: whitesmoke; $fallback--bg: #121a24; $fallback--btn: #182230; -$fallback--faint: #999; +$fallback--faint: rgba(185, 185, 186, .5); $fallback--fg: #b9b9ba; $fallback--link: #d8a070; $fallback--icon: #666; diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9cbb1226..008530b4 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -98,7 +98,7 @@ .status { padding: 0.25em 0; color: $fallback--faint; - color: var($fallback--faint, --faint); + color: var(--faint, $fallback--faint); } padding: 0; .media-body { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 9dc4a3e1..3e96f54d 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -72,10 +72,7 @@ const setColors = (col, commit) => { 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.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders - colors.faint = rgb2hex( - col.text.r * 0.45 + col.fg.r * 0.55, - col.text.g * 0.45 + col.fg.g * 0.55, - col.text.b * 0.45 + col.fg.b * 0.55) // faint text + colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)` 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 From 2b64432f9af868edf347214964177bd424d56664 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Apr 2018 06:03:57 +0300 Subject: [PATCH 02/15] semi-transparent inputbox style --- src/App.scss | 8 ++++---- src/_variables.scss | 1 + src/services/style_setter/style_setter.js | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/App.scss b/src/App.scss index a8601220..fb7ef067 100644 --- a/src/App.scss +++ b/src/App.scss @@ -93,8 +93,8 @@ input, textarea, .select { 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; - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); + background-color: $fallback--input; + background-color: var(--input, $fallback--input); color: $fallback--lightFg; color: var(--lightFg, $fallback--lightFg); font-family: sans-serif; @@ -154,8 +154,8 @@ input, textarea, .select { 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); + background-color: $fallback--input; + background-color: var(--input $fallback--input); vertical-align: top; text-align: center; line-height: 1.1em; diff --git a/src/_variables.scss b/src/_variables.scss index 3cd55868..427cc36b 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -4,6 +4,7 @@ $darkened-background: whitesmoke; $fallback--bg: #121a24; $fallback--btn: #182230; +$fallback--input: #182230; $fallback--faint: rgba(185, 185, 186, .5); $fallback--fg: #b9b9ba; $fallback--link: #d8a070; diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 3e96f54d..4a6c4d8f 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -71,6 +71,7 @@ const setColors = (col, commit) => { 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.btn = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons + colors.input = `rgba(${col.fg.r}, ${col.fg.g}, ${col.fg.b}, .5)` colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod) // borders colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)` colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b) // text From e23986e239e66cea5bae6f26982463cb5d705774 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Apr 2018 06:04:17 +0300 Subject: [PATCH 03/15] unnecessary styles removed (fixes transparent color userstyle) --- src/components/nav_panel/nav_panel.vue | 2 -- src/components/status/status.vue | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 6f949afb..2e1a6c7a 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -45,8 +45,6 @@ border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); padding: 0; &:first-child a { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f1163fd9..4b198905 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -165,8 +165,6 @@ border-left-width: 0px; line-height: 18px; min-width: 0; - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); border-color: $fallback--border; border-color: var(--border, $fallback--border); From 008b36dc24942058034d545402c3e404fc62d76b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Apr 2018 06:04:48 +0300 Subject: [PATCH 04/15] gave text some shadow-outline to make it more readable on white backgrounds + fixed weird layout (WHY) --- .../user_card_content/user_card_content.vue | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index ca8428ca..a88c0712 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -112,17 +112,14 @@ } .profile-panel-body { - top: -0em; - padding-top: 4em; word-wrap: break-word; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%) + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80px); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80px) } .user-info { color: white; padding: 0 16px 16px 16px; - margin-bottom: -4em; .container { padding: 16px 10px 4px 10px; @@ -154,7 +151,11 @@ } } - text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0); + text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0), + 1px 1px 0px rgba(0, 0, 0, .2), + -1px 1px 0px rgba(0, 0, 0, .2), + 1px -1px 0px rgba(0, 0, 0, .2), + -1px -1px 0px rgba(0, 0, 0, .2); .usersettings { color: #fff; @@ -240,6 +241,12 @@ line-height:16px; padding: 1em 1.5em 0em 1em; text-align: center; + + text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0), + 1px 1px 0px rgba(0, 0, 0, .2), + -1px 1px 0px rgba(0, 0, 0, .2), + 1px -1px 0px rgba(0, 0, 0, .2), + -1px -1px 0px rgba(0, 0, 0, .2); } .user-count { From a6fa913f45e79734ff13fe85c7ed71cb7b2e5477 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Apr 2018 07:25:59 +0300 Subject: [PATCH 05/15] Input fields separate radii --- src/App.scss | 4 ++-- src/_variables.scss | 1 + src/components/style_switcher/style_switcher.js | 3 +++ src/components/style_switcher/style_switcher.vue | 6 ++++++ src/i18n/messages.js | 2 ++ src/services/style_setter/style_setter.js | 1 + 6 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/App.scss b/src/App.scss index fb7ef067..55b0de94 100644 --- a/src/App.scss +++ b/src/App.scss @@ -88,8 +88,8 @@ label.select { input, textarea, .select { border: none; - border-radius: $fallback--btnRadius; - border-radius: var(--btnRadius, $fallback--btnRadius); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); 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; diff --git a/src/_variables.scss b/src/_variables.scss index 427cc36b..b5222a6a 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -22,6 +22,7 @@ $fallback--cAlertRed: rgba(211,16,20,.5); $fallback--panelRadius: 10px; $fallback--checkBoxRadius: 2px; $fallback--btnRadius: 4px; +$fallback--inputRadius: 4px; $fallback--tooltipRadius: 5px; $fallback--avatarRadius: 4px; $fallback--avatarAltRadius: 10px; diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 08bc7113..6f4845c4 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -14,6 +14,7 @@ export default { greenColorLocal: '', orangeColorLocal: '', btnRadiusLocal: '', + inputRadiusLocal: '', panelRadiusLocal: '', avatarRadiusLocal: '', avatarAltRadiusLocal: '', @@ -42,6 +43,7 @@ export default { this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange) this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4 + this.inputRadiusLocal = this.$store.state.config.radii.inputRadius || 4 this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10 this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5 this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50 @@ -85,6 +87,7 @@ export default { cGreen: greenRgb, cOrange: orangeRgb, btnRadius: this.btnRadiusLocal, + inputRadius: this.inputRadiusLocal, panelRadius: this.panelRadiusLocal, avatarRadius: this.avatarRadiusLocal, avatarAltRadius: this.avatarAltRadiusLocal, diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 9c39b245..7acba1dc 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -58,6 +58,11 @@ +
+ + + +
@@ -86,6 +91,7 @@
{{user.name}}
- -
@{{user.screen_name}}
+ + @{{user.screen_name}} + {{dailyAvg}} {{ $t('user_card.per_day') }}
@@ -74,17 +75,17 @@
-
+
{{ $t('user_card.statuses') }}
{{ $t('user_card.statuses') }}
- {{user.statuses_count}}
{{dailyAvg}} {{ $t('user_card.per_day') }} + {{user.statuses_count}}
-
+
{{ $t('user_card.followees') }}
{{ $t('user_card.followees') }}
{{user.friends_count}}
-
+
{{ $t('user_card.followers') }}
{{ $t('user_card.followers') }}
{{user.followers_count}} @@ -113,16 +114,16 @@ .profile-panel-body { word-wrap: break-word; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80px); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80px) + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%) } .user-info { color: white; - padding: 0 16px 16px 16px; + padding: 0 16px; .container { - padding: 16px 10px 4px 10px; + padding: 16px 10px 6px 10px; display: flex; max-height: 56px; overflow: hidden; @@ -151,11 +152,7 @@ } } - text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0), - 1px 1px 0px rgba(0, 0, 0, .2), - -1px 1px 0px rgba(0, 0, 0, .2), - 1px -1px 0px rgba(0, 0, 0, .2), - -1px -1px 0px rgba(0, 0, 0, .2); + text-shadow: $usercard-text-shadow; .usersettings { color: #fff; @@ -179,7 +176,8 @@ .user-screen-name { color: white; - font-weight: lighter; + display: inline-block; + font-weight: light; font-size: 15px; padding-right: 0.1em; } @@ -192,14 +190,12 @@ 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; + margin: 0 0 .4em 0; padding-left: 16px; text-align: left; } @@ -239,18 +235,22 @@ .user-counts { display: flex; line-height:16px; - padding: 1em 1.5em 0em 1em; + padding: .5em 1.5em 0em 1.5em; text-align: center; - - text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0), - 1px 1px 0px rgba(0, 0, 0, .2), - -1px 1px 0px rgba(0, 0, 0, .2), - 1px -1px 0px rgba(0, 0, 0, .2), - -1px -1px 0px rgba(0, 0, 0, .2); + justify-content: space-between; + text-shadow: $usercard-text-shadow; } .user-count { flex: 1; + padding: .5em 0 .5em 0; + margin: 0 .5em; + + &.selected { + background-color: rgba(0,0,0,.35); + border-radius: $fallback--btnRadius; + border-radius: var(--btnRadius, $fallback--btnRadius); + } h5 { font-size:1em; @@ -263,7 +263,8 @@ } .dailyAvg { - font-size: 0.8em; - opacity: 0.5; + margin-left: 1em; + font-size: 0.7em; + color: #CCC; } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 838a43ab..f8502907 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -1,7 +1,7 @@