Tweak light theme to resemble Twitter more

This commit is contained in:
Zed 2019-10-23 13:58:10 +02:00
parent a3ca693dbe
commit 64d2d39424
9 changed files with 50 additions and 29 deletions

View file

@ -1,30 +1,37 @@
body { body {
--bg_color: #E6ECF0; --bg_color: #E6ECF0;
--fg_color: #0F0F0F; --fg_color: #0F0F0F;
--fg_faded: #161616; --fg_faded: #657786;
--fg_dark: #191919; --fg_dark: var(--fg_faded);
--fg_nav: #1DA1F2; --fg_nav: var(--accent);
--bg_panel: #FFFFFF; --bg_panel: #FFFFFF;
--bg_elements: #FDFDFD; --bg_elements: #FDFDFD;
--bg_overlays: #FFFFFF; --bg_overlays: #FFFFFF;
--bg_hover: #F5F8FA; --bg_hover: #F5F8FA;
--grey: #657786; --grey: var(--fg_faded);
--dark_grey: #D6D6D6; --dark_grey: #D6D6D6;
--darker_grey: #CECECE; --darker_grey: #CECECE;
--darkest_grey: #E8E8E8; --darkest_grey: #ECECEC;
--border_grey: #E6ECF0; --border_grey: #E6ECF0;
--accent: #4E4E4E; --accent: #1DA1F2;
--accent_light: #A0EDFF; --accent_light: #A0EDFF;
--accent_dark: #1DA1F2; --accent_dark: var(--accent);
--accent_border: #1DA1F296; --accent_border: #1DA1F296;
--play_button_red: #d84d4d; --play_button: #D84D4D;
--more_replies_dots: #0199f7; --play_button_hover: #FF6C60;
--more_replies_dots: #0199F7;
--error_red: #FF7266; --error_red: #FF7266;
--verified_blue: #1DA1F2; --verified_blue: var(--accent);
--icon_text: #FFFFFF; --icon_text: ##F8F8F2;
--tab: var(--accent);
--tab_selected: #000000;
--profile_stat: var(--fg_dark);
} }

View file

@ -10,10 +10,6 @@
@include center-panel(var(--error_red)); @include center-panel(var(--error_red));
} }
.search-bar {
// background: var(--darkest_grey);
}
.search-bar > form { .search-bar > form {
@include center-panel(var(--darkest_grey)); @include center-panel(var(--darkest_grey));

View file

@ -19,11 +19,11 @@
&:hover { &:hover {
.overlay-circle { .overlay-circle {
border-color: var(--accent); border-color: var(--play_button_hover);
} }
.overlay-triangle { .overlay-triangle {
border-color: transparent transparent transparent var(--accent); border-color: transparent transparent transparent var(--play_button_hover);
} }
} }
} }

View file

@ -2,7 +2,7 @@
$bg_color: #0F0F0F; $bg_color: #0F0F0F;
$fg_color: #F8F8F2; $fg_color: #F8F8F2;
$fg_faded: #F8F8F2CF; $fg_faded: #F8F8F2CF;
$fg_dark: #9d9da0; $fg_dark: #FF6C60;
$fg_nav: #FF6C60; $fg_nav: #FF6C60;
$bg_panel: #161616; $bg_panel: #161616;
@ -21,12 +21,17 @@ $accent_light: #FFACA0;
$accent_dark: #8A3731; $accent_dark: #8A3731;
$accent_border: #FF6C6091; $accent_border: #FF6C6091;
$play_button_red: #D8574D; $play_button: #D8574D;
$play_button_hover: #FF6C60;
$more_replies_dots: #AD433B; $more_replies_dots: #AD433B;
$error_red: #420A05; $error_red: #420A05;
$verified_blue: #1DA1F2; $verified_blue: #1DA1F2;
$icon_text: #F8F8F2; $icon_text: $fg_color;
$tab: $fg_color;
$tab_selected: $accent;
$shadow: rgba(0,0,0,.6); $shadow: rgba(0,0,0,.6);
$shadow_dark: rgba(0,0,0,.2); $shadow_dark: rgba(0,0,0,.2);

View file

@ -32,13 +32,20 @@ body {
--accent_dark: #{$accent_dark}; --accent_dark: #{$accent_dark};
--accent_border: #{$accent_border}; --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}; --more_replies_dots: #{$more_replies_dots};
--error_red: #{$error_red}; --error_red: #{$error_red};
--verified_blue: #{$verified_blue}; --verified_blue: #{$verified_blue};
--icon_text: #{$icon_text}; --icon_text: #{$icon_text};
--tab: #{$fg_color};
--tab_selected: #{$accent};
--profile_stat: #{$fg_color};
background-color: var(--bg_color); background-color: var(--bg_color);
color: var(--fg_color); color: var(--fg_color);
font-family: $font_0, $font_1, $font_2, $font_3; font-family: $font_0, $font_1, $font_2, $font_3;

View file

@ -94,10 +94,12 @@
.profile-stat-header { .profile-stat-header {
font-weight: bold; font-weight: bold;
color: var(--profile_stat);
} }
.profile-stat-num { .profile-stat-num {
display: block; display: block;
color: var(--profile_stat);
} }
@media(max-width: 600px) { @media(max-width: 600px) {

View file

@ -42,7 +42,7 @@
a { a {
border-bottom: .1rem solid transparent; border-bottom: .1rem solid transparent;
color: inherit; color: var(--tab);
display: block; display: block;
padding: 8px 0; padding: 8px 0;
text-decoration: none; text-decoration: none;
@ -53,14 +53,14 @@
} }
&.active { &.active {
border-bottom-color: var(--accent); border-bottom-color: var(--tab_selected);
color: var(--accent); color: var(--tab_selected);
} }
} }
&.active a { &.active a {
border-bottom-color: var(--accent); border-bottom-color: var(--tab_selected);
color: var(--accent); color: var(--tab_selected);
} }
&.wide { &.wide {

View file

@ -68,6 +68,10 @@
margin-left: 4px; margin-left: 4px;
} }
.tweet-date a, .username, .show-more a {
color: var(--fg_dark);
}
.tweet-published { .tweet-published {
margin: 0; margin: 0;
margin-top: 5px; margin-top: 5px;
@ -89,7 +93,7 @@
} }
.replying-to { .replying-to {
color: var(--fg_dark); color: var(--fg_faded);
margin: -2px 0 4px; margin: -2px 0 4px;
a { a {

View file

@ -87,7 +87,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
border-width: 5px; border-width: 5px;
border-color: var(--play_button_red); border-color: var(--play_button);
border-style: solid; border-style: solid;
} }
@ -96,7 +96,7 @@
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 12px 0 12px 17px; 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; margin-left: 14px;
} }