From 64d2d39424ee4e7fc018d2bfe450d637e355bdf7 Mon Sep 17 00:00:00 2001 From: Zed Date: Wed, 23 Oct 2019 13:58:10 +0200 Subject: [PATCH] Tweak light theme to resemble Twitter more --- public/css/themes/light.css | 29 ++++++++++++++++++----------- src/sass/general.scss | 4 ---- src/sass/include/_mixins.css | 4 ++-- src/sass/include/_variables.scss | 11 ++++++++--- src/sass/index.scss | 9 ++++++++- src/sass/profile/card.scss | 2 ++ src/sass/timeline.scss | 10 +++++----- src/sass/tweet/_base.scss | 6 +++++- src/sass/tweet/media.scss | 4 ++-- 9 files changed, 50 insertions(+), 29 deletions(-) diff --git a/public/css/themes/light.css b/public/css/themes/light.css index ea144bb..1f22516 100644 --- a/public/css/themes/light.css +++ b/public/css/themes/light.css @@ -1,30 +1,37 @@ body { --bg_color: #E6ECF0; --fg_color: #0F0F0F; - --fg_faded: #161616; - --fg_dark: #191919; - --fg_nav: #1DA1F2; + --fg_faded: #657786; + --fg_dark: var(--fg_faded); + --fg_nav: var(--accent); --bg_panel: #FFFFFF; --bg_elements: #FDFDFD; --bg_overlays: #FFFFFF; --bg_hover: #F5F8FA; - --grey: #657786; + --grey: var(--fg_faded); --dark_grey: #D6D6D6; --darker_grey: #CECECE; - --darkest_grey: #E8E8E8; + --darkest_grey: #ECECEC; --border_grey: #E6ECF0; - --accent: #4E4E4E; + --accent: #1DA1F2; --accent_light: #A0EDFF; - --accent_dark: #1DA1F2; + --accent_dark: var(--accent); --accent_border: #1DA1F296; - --play_button_red: #d84d4d; - --more_replies_dots: #0199f7; + --play_button: #D84D4D; + --play_button_hover: #FF6C60; + + --more_replies_dots: #0199F7; --error_red: #FF7266; - --verified_blue: #1DA1F2; - --icon_text: #FFFFFF; + --verified_blue: var(--accent); + --icon_text: ##F8F8F2; + + --tab: var(--accent); + --tab_selected: #000000; + + --profile_stat: var(--fg_dark); } diff --git a/src/sass/general.scss b/src/sass/general.scss index 5098b43..c4759b0 100644 --- a/src/sass/general.scss +++ b/src/sass/general.scss @@ -10,10 +10,6 @@ @include center-panel(var(--error_red)); } -.search-bar { - // background: var(--darkest_grey); -} - .search-bar > form { @include center-panel(var(--darkest_grey)); diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css index ab01f05..94e11ee 100644 --- a/src/sass/include/_mixins.css +++ b/src/sass/include/_mixins.css @@ -19,11 +19,11 @@ &:hover { .overlay-circle { - border-color: var(--accent); + border-color: var(--play_button_hover); } .overlay-triangle { - border-color: transparent transparent transparent var(--accent); + border-color: transparent transparent transparent var(--play_button_hover); } } } diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss index 0b73223..b0a6993 100644 --- a/src/sass/include/_variables.scss +++ b/src/sass/include/_variables.scss @@ -2,7 +2,7 @@ $bg_color: #0F0F0F; $fg_color: #F8F8F2; $fg_faded: #F8F8F2CF; -$fg_dark: #9d9da0; +$fg_dark: #FF6C60; $fg_nav: #FF6C60; $bg_panel: #161616; @@ -21,12 +21,17 @@ $accent_light: #FFACA0; $accent_dark: #8A3731; $accent_border: #FF6C6091; -$play_button_red: #D8574D; +$play_button: #D8574D; +$play_button_hover: #FF6C60; + $more_replies_dots: #AD433B; $error_red: #420A05; $verified_blue: #1DA1F2; -$icon_text: #F8F8F2; +$icon_text: $fg_color; + +$tab: $fg_color; +$tab_selected: $accent; $shadow: rgba(0,0,0,.6); $shadow_dark: rgba(0,0,0,.2); diff --git a/src/sass/index.scss b/src/sass/index.scss index 44501f4..ba675a7 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -32,13 +32,20 @@ body { --accent_dark: #{$accent_dark}; --accent_border: #{$accent_border}; - --play_button_red: #{$play_button_red}; + --play_button: #{$play_button}; + --play_button_hover: #{$play_button_hover}; + --more_replies_dots: #{$more_replies_dots}; --error_red: #{$error_red}; --verified_blue: #{$verified_blue}; --icon_text: #{$icon_text}; + --tab: #{$fg_color}; + --tab_selected: #{$accent}; + + --profile_stat: #{$fg_color}; + background-color: var(--bg_color); color: var(--fg_color); font-family: $font_0, $font_1, $font_2, $font_3; diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss index fc89362..f775a0b 100644 --- a/src/sass/profile/card.scss +++ b/src/sass/profile/card.scss @@ -94,10 +94,12 @@ .profile-stat-header { font-weight: bold; + color: var(--profile_stat); } .profile-stat-num { display: block; + color: var(--profile_stat); } @media(max-width: 600px) { diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss index 9d0fd78..02e4423 100644 --- a/src/sass/timeline.scss +++ b/src/sass/timeline.scss @@ -42,7 +42,7 @@ a { border-bottom: .1rem solid transparent; - color: inherit; + color: var(--tab); display: block; padding: 8px 0; text-decoration: none; @@ -53,14 +53,14 @@ } &.active { - border-bottom-color: var(--accent); - color: var(--accent); + border-bottom-color: var(--tab_selected); + color: var(--tab_selected); } } &.active a { - border-bottom-color: var(--accent); - color: var(--accent); + border-bottom-color: var(--tab_selected); + color: var(--tab_selected); } &.wide { diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss index 2a5ea17..add0d5b 100644 --- a/src/sass/tweet/_base.scss +++ b/src/sass/tweet/_base.scss @@ -68,6 +68,10 @@ margin-left: 4px; } +.tweet-date a, .username, .show-more a { + color: var(--fg_dark); +} + .tweet-published { margin: 0; margin-top: 5px; @@ -89,7 +93,7 @@ } .replying-to { - color: var(--fg_dark); + color: var(--fg_faded); margin: -2px 0 4px; a { diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss index 61ca4b0..f29c717 100644 --- a/src/sass/tweet/media.scss +++ b/src/sass/tweet/media.scss @@ -87,7 +87,7 @@ align-items: center; display: flex; border-width: 5px; - border-color: var(--play_button_red); + border-color: var(--play_button); border-style: solid; } @@ -96,7 +96,7 @@ height: 0; border-style: solid; border-width: 12px 0 12px 17px; - border-color: transparent transparent transparent var(--play_button_red); + border-color: transparent transparent transparent var(--play_button); margin-left: 14px; }