58e8fadafe
* feat: change horizontal scrollbar styles Change the horizontal scrollbar styles in Archives page following the dark and light themes styles. This horizontal scrollbar is at the top of the Archives page. When I visit this page, the scrollbar stole my attention. Unfortunately, it's the client (our browser) who decides its styles; this change is introduced to avoid that situation. Co-authored-by: Miguel Angel <man98@me.com> * remove scrollbar height and border-radius In order to match the theme presentation (https://i.imgur.com/cCiHOGS.jpg), the previous defined `height: 7px` and `border-radius: 10px` for the scrollbar have been deleted. * fix: set the horizontal scrollbar's height and width to `auto` In Firefox the horizontal scrollbar looks very small. With a width set to `auto`, it looks bigger and better. In Chromium, without an automatic height, the new color changes do not appear. Now the horizontal scrollbar looks consistent in both chromium and firefox. * style: format list.scss Co-authored-by: Miguel Angel <man98@me.com> Co-authored-by: Jimmy Cai <github@jimmycai.com> Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>
156 lines
4.2 KiB
SCSS
156 lines
4.2 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 {
|
|
@media (min-width: $on-phone + 1) {
|
|
--main-top-padding: 35px;
|
|
}
|
|
|
|
@media (min-width: $on-desktop-large) {
|
|
--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: 30px;
|
|
@media (max-width: $on-desktop-large) {
|
|
--card-padding: 25px;
|
|
}
|
|
@media (max-width: $on-tablet) {
|
|
--card-padding: 20px;
|
|
}
|
|
|
|
--small-card-padding: 25px;
|
|
@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
|
|
*/
|
|
:root {
|
|
--article-font-family: var(--base-font-family);
|
|
--article-font-size: 1.7rem;
|
|
@media (max-width: $on-tablet) {
|
|
--article-font-size: 1.6rem;
|
|
}
|
|
--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);
|
|
}
|