From 0267ad8d406d936112cfa44a809551c46864ef3f Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 14 Sep 2021 16:44:18 +0800 Subject: [PATCH] Move sass variables --- _sass/colors/dark-typography.scss | 30 +++++++++++++++--------------- _sass/colors/light-typography.scss | 20 +++++++++++--------- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 3c0a718..651ecbb 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -3,28 +3,23 @@ */ @mixin dark-scheme { - /* framework */ - --main-wrapper-bg: rgb(27, 27, 30); + /* Framework color */ --body-bg: var(--main-wrapper-bg); - --topbar-wrapper-bg: rgb(39, 40, 43); - --search-wrapper-bg: rgb(34, 34, 39); - --search-icon-color: rgb(100, 102, 105); - --input-focus-border-color: rgb(112, 114, 115); --mask-bg: rgb(68, 69, 70); - --footer-bg-color: var(--main-wrapper-bg); - --scrollbar-track-bg: rgba(0,0,0,0.3); + --main-wrapper-bg: rgb(27, 27, 30); + --main-border-color: rgb(44, 45, 45); + --scrollbar-track-bg: rgba(0, 0, 0, 0.3); --scrollbar-thumb-bg: rgb(173 171 171 / 50%); - /* common color */ + /* Common color */ --text-color: rgb(175, 176, 177); - --heading-color: #cccccc; --text-muted-color: rgb(107, 116, 124); - --link-color: rgb(138, 180, 248); - --link-underline-color: rgb(82, 108, 150); - --main-border-color: rgb(44, 45, 45); - --button-bg: rgb(39, 40, 43); + --heading-color: #cccccc; --blockquote-border-color: rgb(66, 66, 66); --blockquote-text-color: rgb(117, 117, 117); + --link-color: rgb(138, 180, 248); + --link-underline-color: rgb(82, 108, 150); + --button-bg: rgb(39, 40, 43); --btn-border-color: rgb(63, 65, 68); --btn-backtotop-color: var(--text-color); --btn-backtotop-border-color: var(--btn-border-color); @@ -38,8 +33,12 @@ --nav-cursor-color: rgb(183, 182, 182); --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); - /* Top Bar */ + /* Topbar */ --topbar-text-color: var(--text-color); + --topbar-wrapper-bg: rgb(39, 40, 43); + --search-wrapper-bg: rgb(34, 34, 39); + --search-icon-color: rgb(100, 102, 105); + --input-focus-border-color: rgb(112, 114, 115); /* Home page */ --post-list-text-color: rgb(175, 176, 177); @@ -84,6 +83,7 @@ --timeline-year-dot-color: var(--timeline-color); /* Footer */ + --footer-bg-color: var(--main-wrapper-bg); --footer-link: rgb(171, 171, 171); .post-content img { diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 3e0af5e..7234de5 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -3,37 +3,37 @@ */ @mixin light-scheme { - /* Common */ + /* Framework color */ --body-bg: #fafafa; --mask-bg: #c1c3c5; --main-wrapper-bg: white; --main-border-color: #f3f3f3; - --btn-border-color: #e9ecef; + --scrollbar-track-bg: rgba(0, 0, 0, 0.3); + --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3); + + /* Common color */ --text-color: #34343c; + --text-muted-color: gray; --heading-color: black; --blockquote-border-color: #eee; --blockquote-text-color: #9a9a9a; --link-color: #2a408e; --link-underline-color: #dee2e6; - --text-muted-color: gray; - --tb-odd-bg: #fbfcfd; - --tb-border-color: #eaeaea; --button-bg: #fff; + --btn-border-color: #e9ecef; --btn-backtotop-color: #686868; --btn-backtotop-border-color: #f1f1f1; --btn-box-shadow: #eaeaea; --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; - --scrollbar-track-bg: rgba(0,0,0,0.3); - --scrollbar-thumb-bg: rgba(0,0,0,0.3); /* Sidebar */ --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%); --nav-cursor-color: #fcfcfc; /* Topbar */ - --topbar-wrapper-bg: white; --topbar-text-color: rgb(78, 78, 78); + --topbar-wrapper-bg: white; --search-wrapper-bg: #f5f5f5; --search-tag-bg: #f8f9fa; --search-icon-color: #c2c6cc; @@ -57,10 +57,13 @@ --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922); --label-color: #616161; --relate-post-date: rgba(30, 55, 70, 0.4); + --footnote-target-bg: lightcyan; --tag-bg: rgba(0, 0, 0, 0.075); --tag-border: #dee2e6; --tag-shadow: var(--btn-border-color); --tag-hover: rgb(222, 226, 230); + --tb-odd-bg: #fbfcfd; + --tb-border-color: #eaeaea; --categories-hover-bg: var(--btn-border-color); --dash-color: silver; @@ -71,6 +74,5 @@ /* Footer */ --footer-bg-color: #ffffff; - --footnote-target-bg: lightcyan; --footer-link: #424242; } // light-scheme