From 2366351c18e7b5347aabaf924adace4f5bea1e68 Mon Sep 17 00:00:00 2001 From: k Date: Mon, 14 Jun 2021 15:57:20 -0500 Subject: [PATCH] fix: take out [data-scheme="dark"] from :root Taking out the [data-scheme="dark"] from :root allows us to fix the precedence of CSS when the [data-scheme="dark"] is placed in the tag. This is needed in order to make the dark styles accesible from the elment, this will allow us to change the vertical scrollbar styles following the dark and light schemes. --- assets/scss/variables.scss | 115 +++++++++++++++++++------------------ 1 file changed, 59 insertions(+), 56 deletions(-) diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index f261f41..62962cb 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -1,21 +1,9 @@ $defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6; $defaultTagColors: #fff, #fff, #fff, #fff, #fff; -[data-scheme="light"] { - --pre-text-color: #272822; - --pre-background-color: #fafafa; - @import "partials/highlight/light.scss"; -} - -[data-scheme="dark"] { - --pre-text-color: #f8f8f2; - --pre-background-color: #272822; - @import "partials/highlight/dark.scss"; -} - /* -* Global style -*/ + * Global style + */ :root { @media (min-width: $on-phone + 1) { --main-top-padding: 35px; @@ -38,21 +26,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --scrollbar-thumb: hsl(0, 0%, 85%); --scrollbar-track: var(--body-background); - - [data-scheme="dark"] { - --body-background: #303030; - --accent-color: #ecf0f1; - --accent-color-darker: #bdc3c7; - --accent-color-text: #000; - --body-text-color: rgba(255, 255, 255, 0.7); - --scrollbar-thumb: #424242; - --scrollbar-track: var(--body-background); - } } -/** -* Global font family -*/ +/* + * Global font family + */ :root { --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue"; --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei"; @@ -62,8 +40,8 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; } /* -* Card style -*/ + * Card style + */ :root { --card-background: #fff; --card-background-selected: #eaeaea; @@ -87,20 +65,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; @media (max-width: $on-tablet) { --small-card-padding: 25px 20px; } - - [data-scheme="dark"] { - --card-background: #424242; - --card-background-selected: rgba(255, 255, 255, 0.16); - --card-text-color-main: rgba(255, 255, 255, 0.9); - --card-text-color-secondary: rgba(255, 255, 255, 0.7); - --card-text-color-tertiary: rgba(255, 255, 255, 0.5); - --card-separator-color: rgba(255, 255, 255, 0.12); - } } -/** -* Article content font settings -*/ +/* + * Article content font settings + */ :root { --article-font-family: var(--base-font-family); --article-font-size: 1.7rem; @@ -111,8 +80,8 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; } /* -* Article content style -*/ + * Article content style + */ :root { --blockquote-border-size: 4px; --blockquote-background-color: rgb(248 248 248); @@ -131,22 +100,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --table-border-color: #dadada; --tr-even-background-color: #efefee; - - [data-scheme="dark"] { - --code-background-color: #272822; - --code-text-color: rgba(255, 255, 255, 0.9); - - --table-border-color: #717171; - --tr-even-background-color: #545454; - - --blockquote-background-color: rgb(75 75 75); - } } /* -* Shadow style -* Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker -*/ + * Shadow style + * Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker + */ :root { --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04); --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); @@ -154,3 +113,47 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; --shadow-l4: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); } + +[data-scheme="light"] { + --pre-text-color: #272822; + --pre-background-color: #fafafa; + @import "partials/highlight/light.scss"; +} + +[data-scheme="dark"] { + --pre-text-color: #f8f8f2; + --pre-background-color: #272822; + @import "partials/highlight/dark.scss"; + + /* + * Global style + */ + --body-background: #303030; + --accent-color: #ecf0f1; + --accent-color-darker: #bdc3c7; + --accent-color-text: #000; + --body-text-color: rgba(255, 255, 255, 0.7); + --scrollbar-thumb: hsl(0, 0%, 30%); + --scrollbar-track: var(--body-background); + + /* + * Card style + */ + --card-background: #424242; + --card-background-selected: rgba(255, 255, 255, 0.16); + --card-text-color-main: rgba(255, 255, 255, 0.9); + --card-text-color-secondary: rgba(255, 255, 255, 0.7); + --card-text-color-tertiary: rgba(255, 255, 255, 0.5); + --card-separator-color: rgba(255, 255, 255, 0.12); + + /* + * Article content style + */ + --code-background-color: #272822; + --code-text-color: rgba(255, 255, 255, 0.9); + + --table-border-color: #717171; + --tr-even-background-color: #545454; + + --blockquote-background-color: rgb(75 75 75); +}