388 lines
12 KiB
SCSS
388 lines
12 KiB
SCSS
//@use 'sass:map';
|
|
|
|
//
|
|
// Variables
|
|
// ==================================================
|
|
|
|
|
|
// Color system
|
|
// --------------------------------------------------
|
|
$whitesmoke : #f5f5f5;
|
|
$gainsboro : #eee;
|
|
$grey-lighter : #ddd;
|
|
$grey-light : #ccc;
|
|
$grey : #bbb;
|
|
$grey-dark : #999;
|
|
$grey-dim : #666;
|
|
$black-light : #555;
|
|
$black-dim : #333;
|
|
$black-deep : #222;
|
|
$red : #ff2a2a;
|
|
$blue-bright : #87daff;
|
|
$blue : #0684bd;
|
|
$blue-deep : #262a30;
|
|
$orange : #fc6423;
|
|
|
|
|
|
// Transition
|
|
// --------------------------------------------------
|
|
$transition-ease : .2s ease-in-out;
|
|
$transition-ease-in : .2s ease-in;
|
|
$transition-ease-out : .2s ease-out;
|
|
|
|
|
|
// Scaffolding
|
|
// Settings for some of the most global styles.
|
|
// --------------------------------------------------
|
|
// Global text color on <body>
|
|
$text-color : $black-light;
|
|
$text-color-dark : $grey-light;
|
|
|
|
// Global link color.
|
|
$link-color : $black-light;
|
|
$link-color-dark : $grey-light;
|
|
$link-hover-color : $black-deep;
|
|
$link-hover-color-dark : $gainsboro;
|
|
$link-decoration-color : $grey-dark;
|
|
|
|
$blockquote-color : $grey-dim;
|
|
$blockquote-color-dark : $grey;
|
|
|
|
// Global border color.
|
|
$border-color : $grey-light;
|
|
|
|
// Background color for <body>
|
|
$body-bg-color : white;
|
|
$body-bg-color-dark : #282828;
|
|
$content-bg-color : white;
|
|
$content-bg-color-dark : $black-dim;
|
|
|
|
// Selection
|
|
$selection-bg : $blue-deep;
|
|
$selection-color : $gainsboro;
|
|
|
|
// Dark mode color
|
|
$card-bg-color : $whitesmoke;
|
|
$card-bg-color-dark : $black-light;
|
|
|
|
$menu-item-bg-color : $whitesmoke;
|
|
$menu-item-bg-color-dark : $black-light;
|
|
|
|
// TODO why there need convert
|
|
|
|
$theme-color : $theme_color_light;
|
|
$theme-color-dark : $theme_color_dark;
|
|
|
|
// Typography
|
|
// Font, line-height, and elements colors.
|
|
// --------------------------------------------------
|
|
@function get-font-family($config) {
|
|
//TODO find the way daymatic variable
|
|
$custom-family: $config;
|
|
$custom-family: 'Microsoft YaHei';
|
|
@return if(type-of($custom-family) == string, unquote($custom-family), null);
|
|
}
|
|
|
|
// Font families.
|
|
$font-family-chinese : 'PingFang SC', 'Microsoft YaHei';
|
|
|
|
$font-family-base : $font-family-chinese, sans-serif;
|
|
@if get-font-family('global') {
|
|
$font-family-base : join(get-font-family('global'), $font-family-base);
|
|
}
|
|
|
|
$font-family-logo : $font-family-base;
|
|
@if get-font-family('title') {
|
|
$font-family-logo : join(get-font-family('title'), $font-family-logo);
|
|
}
|
|
|
|
$font-family-headings : $font-family-base;
|
|
@if get-font-family('headings') {
|
|
$font-family-headings : join(get-font-family('headings'), $font-family-headings);
|
|
}
|
|
|
|
$font-family-posts : $font-family-base;
|
|
@if get-font-family('posts') {
|
|
$font-family-posts : join(get-font-family('posts'), $font-family-posts);
|
|
}
|
|
|
|
$font-family-monospace : consolas, Menlo, monospace, $font-family-chinese;
|
|
@if get-font-family('codes') {
|
|
$font-family-monospace : join(get-font-family('codes'), $font-family-monospace);
|
|
}
|
|
|
|
|
|
// Font size
|
|
$font-size-smallest : .75em;
|
|
$font-size-smaller : .8125em;
|
|
$font-size-small : .875em;
|
|
$font-size-medium : 1em;
|
|
$font-size-large : 1.125em;
|
|
$font-size-larger : 1.25em;
|
|
$font-size-largest : 1.5em;
|
|
|
|
|
|
// Headings font size
|
|
$font-size-headings-step : .125em;
|
|
|
|
|
|
// Global line height
|
|
$line-height-base : 2;
|
|
$line-height-code-block : 1.6; // Can't be less than 1.3;
|
|
|
|
|
|
// Z-index master list
|
|
// --------------------------------------------------
|
|
// Fix issue https://github.com/next-theme/theme-next-docs/issues/54
|
|
$zindex-0 : 5;
|
|
$zindex-1 : 10;
|
|
$zindex-2 : 20;
|
|
$zindex-3 : 30;
|
|
$zindex-4 : 40;
|
|
$zindex-5 : 50;
|
|
|
|
|
|
// Table
|
|
// --------------------------------------------------
|
|
$table-border-color : $grey-lighter;
|
|
$table-font-size : $font-size-small;
|
|
$table-cell-border-bottom-color : $grey-lighter;
|
|
$table-row-odd-bg-color : #f9f9f9;
|
|
$table-row-odd-bg-color-dark : #282828;
|
|
$table-row-hover-bg-color : $whitesmoke;
|
|
$table-row-hover-bg-color-dark : #363636;
|
|
|
|
|
|
// Code & Code Blocks
|
|
// --------------------------------------------------
|
|
$code-font-family : $font-family-monospace;
|
|
|
|
$highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%);
|
|
$highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%);
|
|
|
|
$highlight-gutter-background-dark : mix($highlight-background-dark, $highlight-foreground-dark, 90%);
|
|
$highlight-gutter-foreground-dark : mix($highlight-background-dark, $highlight-foreground-dark, 10%);
|
|
|
|
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
$btn-default-radius : 0;
|
|
$btn-default-bg : $black-deep;
|
|
$btn-default-bg-dark : $black-deep;
|
|
$btn-default-color : white;
|
|
$btn-default-color-dark : $text-color-dark;
|
|
$btn-default-border-color : $black-deep;
|
|
$btn-default-border-color-dark : $black-light;
|
|
$btn-default-hover-bg : white;
|
|
$btn-default-hover-bg-dark : $grey-dim;
|
|
$btn-default-hover-color : $black-deep;
|
|
$btn-default-hover-color-dark : $text-color-dark;
|
|
$btn-default-hover-border-color : $black-deep;
|
|
$btn-default-hover-border-color-dark : $grey-dim;
|
|
|
|
|
|
// Pagination
|
|
// --------------------------------------------------
|
|
$pagination-border : $gainsboro;
|
|
|
|
$pagination-link-bg : transparent;
|
|
$pagination-link-color : $link-color;
|
|
$pagination-link-border : $gainsboro;
|
|
|
|
$pagination-link-hover-bg : transparent;
|
|
$pagination-link-hover-color : $link-color;
|
|
$pagination-link-hover-border : var(--link-hover-color);
|
|
|
|
$pagination-active-bg : $grey-light;
|
|
$pagination-active-color : var(--content-bg-color);
|
|
$pagination-active-border : $grey-light;
|
|
|
|
|
|
// Layout sizes
|
|
// --------------------------------------------------
|
|
$content-desktop : 700px;
|
|
$content-desktop-large : 800px;
|
|
$content-desktop-largest : 900px;
|
|
|
|
$content-desktop-padding : 40px;
|
|
$content-tablet-padding : 10px;
|
|
$content-mobile-padding : 8px;
|
|
|
|
|
|
// Headband
|
|
// --------------------------------------------------
|
|
$headband-height : 3px;
|
|
$headband-bg : var(--theme-color);
|
|
|
|
|
|
// Section Header
|
|
// Variables for header section elements.
|
|
// --------------------------------------------------
|
|
$head-bg : transparent;
|
|
|
|
// Site Meta
|
|
$brand-color : white;
|
|
$brand-hover-color : white;
|
|
$brand-color-dark : $grey-lighter;
|
|
$brand-hover-color-dark : $grey-lighter;
|
|
|
|
$font-size-subtitle : $font-size-smaller;
|
|
$subtitle-color : $grey-dark;
|
|
$site-subtitle-color : $grey-dark;
|
|
|
|
|
|
// Posts Collpase
|
|
// --------------------------------------------------
|
|
$posts-collapse-margin : 35px;
|
|
$posts-collapse-margin-mobile : 0;
|
|
|
|
|
|
// Tag Cloud
|
|
// --------------------------------------------------
|
|
$tag-cloud-start : #aaa;
|
|
$tag-cloud-end : #111;
|
|
$tag-cloud-start-dark : #555;
|
|
$tag-cloud-end-dark : #eee;
|
|
|
|
|
|
// Sidebar
|
|
// Variables for sidebar section elements.
|
|
// --------------------------------------------------
|
|
|
|
$sidebar-nav-color : $grey-dim;
|
|
$sidebar-nav-hover-color : $whitesmoke;
|
|
$sidebar-highlight : $blue-bright;
|
|
|
|
$site-author-image-width : 96px;
|
|
$site-author-image-border-width : 2px;
|
|
$site-author-image-border-color : $black-dim;
|
|
|
|
$site-author-name-margin : 5px 0 0;
|
|
$site-author-name-color : $whitesmoke;
|
|
$site-author-name-weight : normal;
|
|
|
|
$site-description-font-size : $font-size-medium;
|
|
$site-description-color : $grey-dark;
|
|
$site-description-margin-top : 5px;
|
|
|
|
$site-state-item-count-font-size : $font-size-larger;
|
|
$site-state-item-name-font-size : $font-size-small;
|
|
$site-state-item-name-color : inherit;
|
|
|
|
|
|
// Components
|
|
// --------------------------------------------------
|
|
// Back to top
|
|
$b2t-opacity : .8;
|
|
$b2t-opacity-hover : 1;
|
|
$b2t-position-bottom : -100px;
|
|
$b2t-position-bottom-on : 19px;
|
|
$b2t-position-right : 30px;
|
|
$b2t-position-right-mobile : 20px;
|
|
$b2t-font-size : 12px;
|
|
$b2t-color : white;
|
|
$b2t-bg-color : $black-deep;
|
|
|
|
// .post-expand .post-eof
|
|
// In Muse scheme, margin above and below the post separator
|
|
$post-eof-margin-top : 80px; // or 160px for more white space;
|
|
$post-eof-margin-bottom : 60px; // or 120px for less white space;
|
|
|
|
|
|
|
|
// Note colors
|
|
// --------------------------------------------------
|
|
// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
|
|
$note-types : 'default' 'primary' 'info' 'success' 'warning' 'danger';
|
|
|
|
$note-border-radius : 3px;
|
|
|
|
$note-border : (
|
|
'default' : #777,
|
|
'primary' : #6f42c1,
|
|
'info' : #428bca,
|
|
'success' : #5cb85c,
|
|
'warning' : #f0ad4e,
|
|
'danger' : #d9534f
|
|
);
|
|
|
|
$note-bg : (
|
|
'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 94% + $lbg),
|
|
'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 92% + $lbg),
|
|
'info' : lighten(adjust-hue(map-get($note-border, 'info'), -10), 91% + $lbg),
|
|
'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 90% + $lbg),
|
|
'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 88% + $lbg),
|
|
'danger' : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 92% + $lbg)
|
|
);
|
|
|
|
$note-text : (
|
|
'default' : map-get($note-border, 'default'),
|
|
'primary' : map-get($note-border, 'primary'),
|
|
'info' : map-get($note-border, 'info'),
|
|
'success' : map-get($note-border, 'success'),
|
|
'warning' : map-get($note-border, 'warning'),
|
|
'danger' : map-get($note-border, 'danger')
|
|
);
|
|
|
|
$note-icon : (
|
|
'default' : '\f0a9',
|
|
'primary' : '\f055',
|
|
'info' : '\f05a',
|
|
'success' : '\f058',
|
|
'warning' : '\f06a',
|
|
'danger' : '\f056'
|
|
);
|
|
|
|
$note-modern-border : (
|
|
'default' : #e1e1e1,
|
|
'primary' : #e1c2ff,
|
|
'info' : #b3e5ef,
|
|
'success' : #d0e6be,
|
|
'warning' : #fae4cd,
|
|
'danger' : #ebcdd2
|
|
);
|
|
|
|
$note-modern-bg : (
|
|
'default' : lighten(adjust-hue(map-get($note-modern-border, 'default'), 10), 60% + ($lbg * 4)),
|
|
'primary' : lighten(adjust-hue(map-get($note-modern-border, 'primary'), 10), 40% + ($lbg * 4)),
|
|
'info' : lighten(adjust-hue(map-get($note-modern-border, 'info'), 10), 50% + ($lbg * 4)),
|
|
'success' : lighten(adjust-hue(map-get($note-modern-border, 'success'), 10), 40% + ($lbg * 4)),
|
|
'warning' : lighten(adjust-hue(map-get($note-modern-border, 'warning'), 10), 43% + ($lbg * 4)),
|
|
'danger' : lighten(adjust-hue(map-get($note-modern-border, 'danger'), 10), 35% + ($lbg * 4))
|
|
);
|
|
|
|
$note-modern-text : (
|
|
'default' : $grey-dim,
|
|
'primary' : #6f42c1,
|
|
'info' : #31708f,
|
|
'success' : #3c763d,
|
|
'warning' : #8a6d3b,
|
|
'danger' : #a94442
|
|
);
|
|
|
|
$note-modern-hover : (
|
|
'default' : darken(adjust-hue(map-get($note-modern-text, 'default'), -10), 32%),
|
|
'primary' : darken(adjust-hue(map-get($note-modern-text, 'primary'), -10), 22%),
|
|
'info' : darken(adjust-hue(map-get($note-modern-text, 'info'), -10), 32%),
|
|
'success' : darken(adjust-hue(map-get($note-modern-text, 'success'), -10), 27%),
|
|
'warning' : darken(adjust-hue(map-get($note-modern-text, 'warning'), -10), 18%),
|
|
'danger' : darken(adjust-hue(map-get($note-modern-text, 'danger'), -10), 22%)
|
|
);
|
|
|
|
|
|
// Tabs border radius
|
|
// --------------------------------------------------
|
|
$tbr : 0;
|
|
|
|
|
|
// Label colors
|
|
// --------------------------------------------------
|
|
$label : (
|
|
'default' : lighten(adjust-hue(map-get($note-border, 'default'), 0), 89% + $lbg),
|
|
'primary' : lighten(adjust-hue(map-get($note-border, 'primary'), 10), 87% + $lbg),
|
|
'info' : lighten(adjust-hue(map-get($note-border, 'info'), -10), 86% + $lbg),
|
|
'success' : lighten(adjust-hue(map-get($note-border, 'success'), 10), 85% + $lbg),
|
|
'warning' : lighten(adjust-hue(map-get($note-border, 'warning'), 10), 83% + $lbg),
|
|
'danger' : lighten(adjust-hue(map-get($note-border, 'danger'), -10), 87% + $lbg)
|
|
);
|