Tweak light theme to resemble Twitter more
This commit is contained in:
parent
a3ca693dbe
commit
64d2d39424
9 changed files with 50 additions and 29 deletions
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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));
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue