dda55f87e2
* 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. * change document.body.dataset.scheme to document.documentElement.dataset.scheme When the dark mode is on or when the light mode is on, the [data-scheme="light"] or [data-scheme="dark"], respectively, will be placed in the <html> tag. Allowing us to access the dark and light color schemes from the <html> to change the vertical scrollbar styles according to the current color scheme. * feat: change the page vertical scrollbar styles This change will make the vertical scrollbar styles to follow the dark and light color scheme modes. Also, this change will make the vertical scrollbar to look consistent in both, Chromium and Firefox. * make the scrollbar-track background-color transparent The body has this transition: 'transition: background-color 0.3s ease 0s'. Making the scrollbar-track background-color transparent allow us to appreciate that transition in the scrollbar-track when switching the background-color. * Move [data-scheme=dark] back to :root block * fix(comment/waline): detect dark mode from html tag * feat: apply custom scrollbar style to all elements Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>
162 lines
4.1 KiB
SCSS
162 lines
4.1 KiB
SCSS
$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
|
|
*/
|
|
:root {
|
|
@include respond(md) {
|
|
--main-top-padding: 35px;
|
|
}
|
|
|
|
@include respond(xl) {
|
|
--main-top-padding: 50px;
|
|
}
|
|
|
|
--body-background: #f5f5fa;
|
|
|
|
--accent-color: #34495e;
|
|
--accent-color-darker: #2c3e50;
|
|
--accent-color-text: #fff;
|
|
--body-text-color: #bababa;
|
|
|
|
--tag-border-radius: 4px;
|
|
|
|
--section-separation: 40px;
|
|
|
|
--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
|
|
*/
|
|
: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";
|
|
|
|
--base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
|
|
--code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
}
|
|
|
|
/*
|
|
* Card style
|
|
*/
|
|
:root {
|
|
--card-background: #fff;
|
|
--card-background-selected: #eaeaea;
|
|
|
|
--card-text-color-main: #000;
|
|
--card-text-color-secondary: #747474;
|
|
--card-text-color-tertiary: #bababa;
|
|
--card-separator-color: rgba(218, 218, 218, 0.5);
|
|
|
|
--card-border-radius: 10px;
|
|
|
|
--card-padding: 20px;
|
|
|
|
@include respond(md) {
|
|
--card-padding: 25px;
|
|
}
|
|
|
|
@include respond(xl) {
|
|
--card-padding: 30px;
|
|
}
|
|
|
|
--small-card-padding: 25px 20px;
|
|
|
|
@include respond(md) {
|
|
--small-card-padding: 25px;
|
|
}
|
|
|
|
&[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
|
|
*/
|
|
:root {
|
|
--article-font-family: var(--base-font-family);
|
|
--article-font-size: 1.6rem;
|
|
|
|
@include respond(md) {
|
|
--article-font-size: 1.7rem;
|
|
}
|
|
|
|
--article-line-height: 1.85;
|
|
}
|
|
|
|
/*
|
|
* Article content style
|
|
*/
|
|
:root {
|
|
--blockquote-border-size: 4px;
|
|
--blockquote-background-color: rgb(248 248 248);
|
|
|
|
--heading-border-size: 4px;
|
|
|
|
--link-background-color: 189, 195, 199;
|
|
--link-background-opacity: 0.5;
|
|
--link-background-opacity-hover: 0.7;
|
|
|
|
--pre-background-color: #272822;
|
|
--pre-text-color: #f8f8f2;
|
|
|
|
--code-background-color: rgba(0, 0, 0, 0.12);
|
|
--code-text-color: #808080;
|
|
|
|
--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
|
|
*/
|
|
: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);
|
|
--shadow-l3: 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);
|
|
--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);
|
|
}
|