Rewrite sass variables to support themes

This commit is contained in:
Zed 2019-10-23 11:15:57 +02:00
parent d31ada9bad
commit 81160b1915
16 changed files with 173 additions and 94 deletions

View file

@ -7,15 +7,19 @@
}
.error-panel {
@include center-panel($error_red);
@include center-panel(var(--error_red));
}
.search-bar {
// background: var(--darkest_grey);
}
.search-bar > form {
@include center-panel($darkest-grey);
@include center-panel(var(--darkest_grey));
button {
background: #303030;
color: $fg_color;
background: var(--bg_elements);
color: var(--fg_color);
border: 0;
border-radius: 3px;
cursor: pointer;
@ -27,8 +31,8 @@
input {
font-size: 16px;
width: 100%;
background: $bg_elements;
color: $fg_color;
background: var(--bg_elements);
color: var(--fg_color);
border: 0;
border-radius: 4px;
padding: 4px;

View file

@ -19,11 +19,11 @@
&:hover {
.overlay-circle {
border-color: $accent;
border-color: var(--accent);
}
.overlay-triangle {
border-color: transparent transparent transparent $accent;
border-color: transparent transparent transparent var(--accent);
}
}
}
@ -51,11 +51,11 @@
@mixin input-colors {
&:hover {
border-color: $accent;
border-color: var(--accent);
}
&:active {
border-color: $accent_light;
border-color: var(--accent_light);
}
}

View file

@ -3,10 +3,12 @@ $bg_color: #0F0F0F;
$fg_color: #F8F8F2;
$fg_faded: #F8F8F2CF;
$fg_dark: #9d9da0;
$fg_nav: #000000;
$bg_panel: #161616;
$bg_elements: #121212;
$bg_overlays: #1F1F1F;
$bg_hover: #1A1A1A;
$grey: #888889;
$dark_grey: #404040;
@ -24,6 +26,7 @@ $more_replies_dots: #AD433B;
$error_red: #420A05;
$verified_blue: #1DA1F2;
$icon_text: #F8F8F2;
$shadow: rgba(0,0,0,.6);
$shadow_dark: rgba(0,0,0,.2);
@ -34,3 +37,41 @@ $font_1: Helvetica;
$font_2: Arial;
$font_3: sans-serif;
$font_4: fontello;
//theme
$variables: (
--bg_color: var(--bg_color),
--fg_color: var(--fg_color),
--fg_faded: var(--fg_faded),
--fg_dark: var(--fg_dark),
--fg_nav: var(--fg_nav),
--bg_panel: var(--bg_panel),
--bg_elements: var(--bg_elements),
--bg_overlays: var(--bg_overlays),
--bg_hover: var(--bg_hover),
--grey: var(--grey),
--dark_grey: var(--dark_grey),
--darker_grey: var(--darker_grey),
--darkest_grey: var(--darkest_grey),
--border_grey: var(--border_grey),
--accent: var(--accent),
--accent_light: var(--accent_light),
--accent_dark: var(--accent_dark),
--accent_border: var(--accent_border),
--play_button_red: var(--play_button_red),
--more_replies_dots: var(--more_replies_dots),
--error_red: var(--error_red),
--verified_blue: var(--verified_blue),
--icon_text: var(--icon_text)
);
/*** theme helper ***/
@function var($variable) {
@return map-get($variables, $variable);
}

View file

@ -9,8 +9,38 @@
@import 'search';
body {
background-color: $bg_color;
color: $fg_color;
// colors
--bg_color: #{$bg_color};
--fg_color: #{$fg_color};
--fg_faded: #{$fg_faded};
--fg_dark: #{$fg_dark};
--fg_nav: #{$fg_nav};
--bg_panel: #{$bg_panel};
--bg_elements: #{$bg_elements};
--bg_overlays: #{$bg_overlays};
--bg_hover: #{$bg_hover};
--grey: #{$grey};
--dark_grey: #{$dark_grey};
--darker_grey: #{$darker_grey};
--darkest_grey: #{$darkest_grey};
--border_grey: #{$border_grey};
--accent: #{$accent};
--accent_light: #{$accent_light};
--accent_dark: #{$accent_dark};
--accent_border: #{$accent_border};
--play_button_red: #{$play_button_red};
--more_replies_dots: #{$more_replies_dots};
--error_red: #{$error_red};
--verified_blue: #{$verified_blue};
--icon_text: #{$icon_text};
background-color: var(--bg_color);
color: var(--fg_color);
font-family: $font_0, $font_1, $font_2, $font_3;
font-size: 14px;
line-height: 1.3;
@ -36,7 +66,7 @@ p {
}
a {
color: $accent;
color: var(--accent);
&:hover {
text-decoration: underline;
@ -54,7 +84,7 @@ legend {
padding: .6em 0 .3em 0;
border: 0;
font-size: 16px;
border-bottom: 1px solid $border_grey;
border-bottom: 1px solid var(--border_grey);
margin-bottom: 8px;
}
@ -80,7 +110,7 @@ ul {
width: 100%;
margin: 0 auto;
margin-top: 10px;
background-color: $bg_overlays;
background-color: var(--bg_overlays);
padding: 10px 15px;
align-self: start;
@ -91,8 +121,8 @@ ul {
}
.verified-icon {
color: $fg_color;
background-color: $verified_blue;
color: var(--icon_text);
background-color: var(--verified_blue);
border-radius: 50%;
flex-shrink: 0;
margin: 2px 0 3px 3px;

View file

@ -3,9 +3,9 @@
button {
@include input-colors;
background-color: $bg_elements;
color: $fg_color;
border: 1px solid $accent_border;
background-color: var(--bg_elements);
color: var(--fg_color);
border: 1px solid var(--accent_border);
padding: 3px 6px;
font-size: 14px;
cursor: pointer;
@ -15,10 +15,10 @@ button {
input[type="text"],
input[type="date"] {
@include input-colors;
background-color: $bg_elements;
background-color: var(--bg_elements);
padding: 1px 4px;
color: $fg_color;
border: 1px solid $accent_border;
color: var(--fg_color);
border: 1px solid var(--accent_border);
border-radius: 0;
font-size: 14px;
}
@ -40,8 +40,8 @@ input::-webkit-calendar-picker-indicator {
input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
background-color: $accent;
color: $fg_color;
background-color: var(--accent);
color: var(--fg_color);
outline: none;
}
@ -64,7 +64,7 @@ input::-webkit-datetime-edit-year-field:focus {
}
.icon-button button {
color: $accent;
color: var(--accent);
text-decoration: none;
background: none;
border: none;
@ -73,7 +73,7 @@ input::-webkit-datetime-edit-year-field:focus {
padding-left: 4px;
&:hover {
color: $accent_light;
color: var(--accent_light);
}
}
@ -83,8 +83,8 @@ input::-webkit-datetime-edit-year-field:focus {
right: 0;
height: 17px;
width: 17px;
background-color: $bg_elements;
border: 1px solid $accent_border;
background-color: var(--bg_elements);
border: 1px solid var(--accent_border);
&:after {
content: "";
@ -114,11 +114,11 @@ input::-webkit-datetime-edit-year-field:focus {
}
&:hover input ~ .checkbox {
border-color: $accent;
border-color: var(--accent);
}
&:active input ~ .checkbox {
border-color: $accent_light;
border-color: var(--accent_light);
}
.checkbox:after {

View file

@ -4,12 +4,16 @@ nav {
display: flex;
align-items: center;
position: fixed;
background-color: $bg_overlays;
background-color: var(--bg_overlays);
box-shadow: 0 0 4px $shadow;
padding: 0;
width: 100%;
height: 50px;
z-index: 1000;
a, .icon-button button {
color: var(--fg_nav);
}
}
.inner-nav {
@ -26,7 +30,7 @@ nav {
font-weight: 600;
&:hover {
color: $accent_light;
color: var(--accent_light);
text-decoration: unset;
}
}
@ -54,7 +58,7 @@ nav {
padding-left: 4px;
&:hover {
color: $accent_light;
color: var(--accent_light);
text-decoration: unset;
}
}

View file

@ -3,7 +3,7 @@
.profile-card {
flex-wrap: wrap;
background: $bg_panel;
background: var(--bg_panel);
padding: 12px;
display: flex;
}
@ -20,14 +20,14 @@
.profile-card-username {
@include breakable;
color: $fg_color;
color: var(--fg_color);
font-size: 14px;
display: block;
}
.profile-card-fullname {
@include breakable;
color: $fg_color;
color: var(--fg_color);
font-size: 16px;
font-weight: bold;
text-shadow: none;
@ -45,8 +45,8 @@
width: calc(100% - 8px);
height: 100%;
margin: 0;
border: 4px solid $darker_grey;
background: $bg_color;
border: 4px solid var(--darker_grey);
background: var(--bg_color);
}
}
@ -67,7 +67,7 @@
}
.profile-joindate, .profile-location, profile-website {
color: $fg_faded;
color: var(--fg_faded);
margin: 2px 0;
width: 100%;
}

View file

@ -3,7 +3,7 @@
.photo-rail {
&-card {
float: left;
background: $bg_panel;
background: var(--bg_panel);
border-radius: 0 0 4px 4px;
width: 100%;
margin: 5px 0;
@ -18,7 +18,7 @@
display: none;
width: calc(100% - 24px);
float: unset;
color: $accent;
color: var(--accent);
justify-content: space-between;
}

View file

@ -29,9 +29,9 @@
> label {
display: inline;
background-color: #121212;
color: #F8F8F2;
border: 1px solid #FF6C6091;
background-color: var(--bg_elements);
color: var(--fg_color);
border: 1px solid var(--accent_border);
padding: 1px 6px 2px 6px;
font-size: 14px;
cursor: pointer;

View file

@ -5,15 +5,15 @@
}
.timeline {
background-color: $bg_panel;
background-color: var(--bg_panel);
> div:not(:first-child) {
border-top: 1px solid $border_grey;
border-top: 1px solid var(--border_grey);
}
}
.timeline-header {
background-color: $bg_panel;
background-color: var(--bg_panel);
text-align: center;
padding: 8px;
display: block;
@ -31,7 +31,7 @@
flex-wrap: wrap;
list-style: none;
margin: 0 0 5px 0;
background-color: $bg_panel;
background-color: var(--bg_panel);
padding: 0;
}
@ -53,14 +53,14 @@
}
&.active {
border-bottom-color: $accent;
color: $accent;
border-bottom-color: var(--accent);
color: var(--accent);
}
}
&.active a {
border-bottom-color: $accent;
color: $accent;
border-bottom-color: var(--accent);
color: var(--accent);
}
&.wide {
@ -69,7 +69,7 @@
}
.timeline-footer {
background-color: $bg_panel;
background-color: var(--bg_panel);
padding: 6px 0;
}
@ -81,48 +81,48 @@
}
h2 {
color: $accent;
color: var(--accent);
font-size: 20px;
font-weight: 600;
}
}
.timeline-none {
color: $accent;
color: var(--accent);
font-size: 20px;
font-weight: 600;
text-align: center;
}
.timeline-end {
background-color: $bg_panel;
color: $accent;
background-color: var(--bg_panel);
color: var(--accent);
font-size: 16px;
font-weight: 600;
text-align: center;
}
.show-more {
background-color: $bg_panel;
background-color: var(--bg_panel);
text-align: center;
padding: .75em 0;
display: block !important;
a {
background-color: $darkest_grey;
background-color: var(--darkest_grey);
display: inline-block;
height: 2em;
padding: 0 2em;
line-height: 2em;
&:hover {
background-color: $darker_grey;
background-color: var(--darker_grey);
}
}
}
.top-ref {
background-color: #0f0f0f;
background-color: var(--bg_color);
border-top: none !important;
.icon-down {
@ -132,7 +132,7 @@
text-decoration: none;
&:hover {
color: $accent_light;
color: var(--accent_light);
}
&::before {

View file

@ -52,7 +52,7 @@
max-width: 80%;
font-size: 14px;
font-weight: 700;
color: $fg_color;
color: var(--fg_color);
}
.username {
@ -71,7 +71,7 @@
.tweet-published {
margin: 0;
margin-top: 5px;
color: $grey;
color: var(--grey);
pointer-events: all;
}
@ -89,7 +89,7 @@
}
.replying-to {
color: $fg_dark;
color: var(--fg_dark);
margin: -2px 0 4px;
a {
@ -99,7 +99,7 @@
.retweet-header, .pinned, .tweet-stats {
align-content: center;
color: $grey;
color: var(--grey);
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
@ -134,9 +134,9 @@
width: 100%;
height: 100%;
padding: 12px;
border: solid 1px $dark_grey;
border: solid 1px var(--dark_grey);
border-radius: 10px;
background-color: $bg_color;
background-color: var(--bg_color);
}
.tweet-link {
@ -147,6 +147,6 @@
position: absolute;
&:hover {
background-color: #1a1a1a;
background-color: var(--bg_hover);
}
}

View file

@ -10,15 +10,15 @@
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: $dark_grey;
background-color: $bg_elements;
border-color: var(--dark_grey);
background-color: var(--bg_elements);
overflow: hidden;
color: inherit;
display: flex;
text-decoration: none !important;
&:hover {
border-color: $grey;
border-color: var(--grey);
}
.attachments {
@ -43,7 +43,7 @@
.card-destination {
@include ellipsis;
color: $grey;
color: var(--grey);
display: block;
}
@ -73,7 +73,7 @@
left: 0;
bottom: 0;
right: 0;
background-color: $fg_color;
background-color: var(--fg_color);
img {
width: 100%;
@ -107,7 +107,7 @@
.card-image {
position: unset;
border-style: solid;
border-color: $dark_grey;
border-color: var(--dark_grey);
border-width: 0;
border-bottom-width: 1px;
}

View file

@ -26,7 +26,7 @@
border-radius: 7px;
overflow: hidden;
flex-flow: column;
background-color: $bg_color;
background-color: var(--bg_color);
align-items: center;
pointer-events: all;
@ -81,13 +81,13 @@
.overlay-circle {
border-radius: 50%;
background-color: $dark_grey;
background-color: var(--dark_grey);
width: 40px;
height: 40px;
align-items: center;
display: flex;
border-width: 5px;
border-color: $play_button_red;
border-color: var(--play_button_red);
border-style: solid;
}
@ -96,7 +96,7 @@
height: 0;
border-style: solid;
border-width: 12px 0 12px 17px;
border-color: transparent transparent transparent $play_button_red;
border-color: transparent transparent transparent var(--play_button_red);
margin-left: 14px;
}

View file

@ -5,7 +5,7 @@
position: relative;
margin: 6px 0;
height: 26px;
background: $bg_color;
background: var(--bg_color);
border-radius: 5px;
display: flex;
align-items: center;
@ -14,7 +14,7 @@
.poll-choice-bar {
height: 100%;
position: absolute;
background: $dark_grey;
background: var(--dark_grey);
}
.poll-choice-value {
@ -33,10 +33,10 @@
}
.poll-info {
color: $grey;
color: var(--grey);
pointer-events: all;
}
.leader .poll-choice-bar {
background: $accent_dark;
background: var(--accent_dark);
}

View file

@ -2,20 +2,20 @@
.quote {
margin-top: 10px;
border: solid 1px $dark_grey;
border: solid 1px var(--dark_grey);
border-radius: 10px;
background-color: $bg_elements;
background-color: var(--bg_elements);
overflow: auto;
padding: 6px;
position: relative;
pointer-events: all;
&:hover {
border-color: $grey;
border-color: var(--grey);
}
&.unavailable:hover {
border-color: $dark_grey;
border-color: var(--dark_grey);
}
}
@ -85,7 +85,7 @@
}
.quote-sensitive {
background: $darker_grey;
background: var(--darker_grey);
width: 102px;
height: 102px;
border-radius: 12px;
@ -96,7 +96,7 @@
.quote-sensitive-icon {
font-size: 40px;
color: $grey;
color: var(--grey);
}
@media(max-width: 600px) {

View file

@ -11,7 +11,7 @@
.main-thread {
margin-bottom: 20px;
background-color: $bg_panel;
background-color: var(--bg_panel);
}
.main-tweet, .replies {
@ -24,14 +24,14 @@
}
.reply {
background-color: $bg_panel;
background-color: var(--bg_panel);
margin-bottom: 10px;
}
.thread-line {
.timeline-item::before,
&.timeline-item::before {
background: $accent_dark;
background: var(--accent_dark);
content: '';
position: relative;
min-width: 3px;
@ -53,7 +53,7 @@
.more-replies::before {
content: '...';
background: unset;
color: $more_replies_dots;
color: var(--more_replies_dots);
font-weight: bold;
font-size: 20px;
line-height: 0.25em;