From 81160b1915b19cd663352a6b6034b65d6d79b094 Mon Sep 17 00:00:00 2001 From: Zed Date: Wed, 23 Oct 2019 11:15:57 +0200 Subject: [PATCH] Rewrite sass variables to support themes --- src/sass/general.scss | 16 +++++++----- src/sass/include/_mixins.css | 8 +++--- src/sass/include/_variables.scss | 41 +++++++++++++++++++++++++++++ src/sass/index.scss | 44 +++++++++++++++++++++++++++----- src/sass/inputs.scss | 28 ++++++++++---------- src/sass/navbar.scss | 10 +++++--- src/sass/profile/card.scss | 12 ++++----- src/sass/profile/photo-rail.scss | 4 +-- src/sass/search.scss | 6 ++--- src/sass/timeline.scss | 36 +++++++++++++------------- src/sass/tweet/_base.scss | 14 +++++----- src/sass/tweet/card.scss | 12 ++++----- src/sass/tweet/media.scss | 8 +++--- src/sass/tweet/poll.scss | 8 +++--- src/sass/tweet/quote.scss | 12 ++++----- src/sass/tweet/thread.scss | 8 +++--- 16 files changed, 173 insertions(+), 94 deletions(-) diff --git a/src/sass/general.scss b/src/sass/general.scss index a92c6e3..5098b43 100644 --- a/src/sass/general.scss +++ b/src/sass/general.scss @@ -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; diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css index 01e42b7..ab01f05 100644 --- a/src/sass/include/_mixins.css +++ b/src/sass/include/_mixins.css @@ -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); } } diff --git a/src/sass/include/_variables.scss b/src/sass/include/_variables.scss index a0f7f0c..d5c71f7 100644 --- a/src/sass/include/_variables.scss +++ b/src/sass/include/_variables.scss @@ -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); +} diff --git a/src/sass/index.scss b/src/sass/index.scss index ad157d9..44501f4 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -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; diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss index 0cea64b..0cf372d 100644 --- a/src/sass/inputs.scss +++ b/src/sass/inputs.scss @@ -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 { diff --git a/src/sass/navbar.scss b/src/sass/navbar.scss index 45b2fa2..b8c1e17 100644 --- a/src/sass/navbar.scss +++ b/src/sass/navbar.scss @@ -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; } } diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss index 2281911..fc89362 100644 --- a/src/sass/profile/card.scss +++ b/src/sass/profile/card.scss @@ -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%; } diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss index 503125c..1cc78d7 100644 --- a/src/sass/profile/photo-rail.scss +++ b/src/sass/profile/photo-rail.scss @@ -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; } diff --git a/src/sass/search.scss b/src/sass/search.scss index 40e70f3..0311fb0 100644 --- a/src/sass/search.scss +++ b/src/sass/search.scss @@ -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; diff --git a/src/sass/timeline.scss b/src/sass/timeline.scss index dcbbb92..9d0fd78 100644 --- a/src/sass/timeline.scss +++ b/src/sass/timeline.scss @@ -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 { diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss index 46319e2..2a5ea17 100644 --- a/src/sass/tweet/_base.scss +++ b/src/sass/tweet/_base.scss @@ -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); } } diff --git a/src/sass/tweet/card.scss b/src/sass/tweet/card.scss index 11039f7..7ebd37e 100644 --- a/src/sass/tweet/card.scss +++ b/src/sass/tweet/card.scss @@ -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; } diff --git a/src/sass/tweet/media.scss b/src/sass/tweet/media.scss index 921f85d..61ca4b0 100644 --- a/src/sass/tweet/media.scss +++ b/src/sass/tweet/media.scss @@ -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; } diff --git a/src/sass/tweet/poll.scss b/src/sass/tweet/poll.scss index 2709ba5..57590c8 100644 --- a/src/sass/tweet/poll.scss +++ b/src/sass/tweet/poll.scss @@ -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); } diff --git a/src/sass/tweet/quote.scss b/src/sass/tweet/quote.scss index 7c435bc..02e9b56 100644 --- a/src/sass/tweet/quote.scss +++ b/src/sass/tweet/quote.scss @@ -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) { diff --git a/src/sass/tweet/thread.scss b/src/sass/tweet/thread.scss index 5557684..5dd3cc2 100644 --- a/src/sass/tweet/thread.scss +++ b/src/sass/tweet/thread.scss @@ -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;