mirror of
https://github.com/CaiJimmy/hugo-theme-stack.git
synced 2025-04-29 03:53:30 +08:00
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 <html> tag. This is needed in order to make the dark styles accesible from the <html> elment, this will allow us to change the vertical scrollbar styles following the dark and light schemes.
This commit is contained in:
k
parent
58e8fadafe
commit
2366351c18
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user