421 lines
14 KiB
Stylus
421 lines
14 KiB
Stylus
//
|
|
// 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-duration = .2s;
|
|
$transition-ease = $transition-duration ease-in-out;
|
|
$transition-ease-in = $transition-duration ease-in;
|
|
$transition-ease-out = $transition-duration 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;
|
|
$selection-bg-dark = $grey;
|
|
$selection-color-dark = $black-dim;
|
|
|
|
// 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;
|
|
|
|
$theme-color = convert(hexo-config('theme_color.light'));
|
|
$theme-color-dark = convert(hexo-config('theme_color.dark'));
|
|
|
|
$scheme-text-align = center;
|
|
|
|
// Typography
|
|
// Font, line-height, and elements colors.
|
|
// --------------------------------------------------
|
|
get_font_family(config) {
|
|
$custom-family = hexo-config('font.' + config + '.family');
|
|
return $custom-family is a 'string' ? unquote($custom-family) : null;
|
|
}
|
|
|
|
// Font families.
|
|
$font-family-chinese = 'PingFang SC', 'Microsoft YaHei';
|
|
|
|
$font-family-base = $font-family-chinese, sans-serif;
|
|
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');
|
|
|
|
$font-family-logo = $font-family-base;
|
|
$font-family-logo = get_font_family('title'), $font-family-base if get_font_family('title');
|
|
|
|
$font-family-headings = $font-family-base;
|
|
$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings');
|
|
|
|
$font-family-posts = $font-family-base;
|
|
$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts');
|
|
|
|
$font-family-monospace = consolas, Menlo, monospace, $font-family-chinese;
|
|
$font-family-monospace = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');
|
|
|
|
|
|
// Font size
|
|
$font-size-base = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
|
|
$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;
|
|
$font-size-headings-base = (hexo-config('font.enable') and hexo-config('font.headings.size') is a 'unit') ? unit(hexo-config('font.headings.size'), em) : 1.625em;
|
|
|
|
|
|
// 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-background = convert(hexo-config('highlight.light.background'));
|
|
$highlight-foreground = convert(hexo-config('highlight.light.foreground'));
|
|
$highlight-gutter-background = mix($highlight-background, $highlight-foreground, 90%);
|
|
$highlight-gutter-foreground = mix($highlight-background, $highlight-foreground, 10%);
|
|
|
|
$highlight-background-dark = convert(hexo-config('highlight.dark.background'));
|
|
$highlight-foreground-dark = convert(hexo-config('highlight.dark.foreground'));
|
|
$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);
|
|
|
|
|
|
// Site Meta
|
|
// --------------------------------------------------
|
|
$brand-color = white;
|
|
$brand-hover-color = white;
|
|
$brand-color-dark = $grey-lighter;
|
|
$brand-hover-color-dark = $grey-lighter;
|
|
$brand-padding = 0 40px;
|
|
|
|
$site-subtitle-margin = 10px 0;
|
|
|
|
$font-size-title = (hexo-config('font.enable') and hexo-config('font.title.size') is a 'unit') ? unit(hexo-config('font.title.size'), em) : 1.375em;
|
|
$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-width = hexo-config('sidebar.width_expanded') is a 'unit' ? hexo-config('sidebar.width_expanded') : 320;
|
|
$sidebar-width-expanded = unit($sidebar-width, 'px');
|
|
$sidebar-padding = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px;
|
|
$sidebar-offset = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 12px;
|
|
$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 = 30px;
|
|
$b2t-position-right = 30px;
|
|
$b2t-position-right-mobile = 20px;
|
|
$b2t-font-size = 12px;
|
|
$b2t-color = white;
|
|
$b2t-bg-color = $black-deep;
|
|
|
|
$sidebar-toggle-inner-size = 16px;
|
|
$sidebar-toggle-padding = 5px;
|
|
$sidebar-toggle-size = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2;
|
|
$sidebar-toggle-alignment = hexo-config('sidebar.position') == 'left' ? 'left' : 'right';
|
|
|
|
// .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;
|
|
|
|
$post-card-margin = 1em 0 0;
|
|
$post-reward-img-width = 180px;
|
|
$post-followme-img-width = $post-reward-img-width;
|
|
|
|
|
|
// Note colors
|
|
// --------------------------------------------------
|
|
// Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable.
|
|
$lbg = hexo-config('note.light_bg_offset') is a 'unit' ? unit(hexo-config('note.light_bg_offset'), '%') : 0;
|
|
$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(spin($note-border.default, 0), 94% + $lbg),
|
|
primary : lighten(spin($note-border.primary, 10), 92% + $lbg),
|
|
info : lighten(spin($note-border.info, -10), 91% + $lbg),
|
|
success : lighten(spin($note-border.success, 10), 90% + $lbg),
|
|
warning : lighten(spin($note-border.warning, 10), 88% + $lbg),
|
|
danger : lighten(spin($note-border.danger, -10), 92% + $lbg)
|
|
};
|
|
|
|
$note-text = {
|
|
default : $note-border.default,
|
|
primary : $note-border.primary,
|
|
info : $note-border.info,
|
|
success : $note-border.success,
|
|
warning : $note-border.warning,
|
|
danger : $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(spin($note-modern-border.default, 10), 60% + ($lbg * 4)),
|
|
primary : lighten(spin($note-modern-border.primary, 10), 40% + ($lbg * 4)),
|
|
info : lighten(spin($note-modern-border.info, 10), 50% + ($lbg * 4)),
|
|
success : lighten(spin($note-modern-border.success, 10), 40% + ($lbg * 4)),
|
|
warning : lighten(spin($note-modern-border.warning, 10), 43% + ($lbg * 4)),
|
|
danger : lighten(spin($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(spin($note-modern-text.default, -10), 32%),
|
|
primary : darken(spin($note-modern-text.primary, -10), 22%),
|
|
info : darken(spin($note-modern-text.info, -10), 32%),
|
|
success : darken(spin($note-modern-text.success, -10), 27%),
|
|
warning : darken(spin($note-modern-text.warning, -10), 18%),
|
|
danger : darken(spin($note-modern-text.danger, -10), 22%)
|
|
};
|
|
|
|
transform-map(map, transform) {
|
|
new-map = {
|
|
}
|
|
for key, val in map {
|
|
new-map[key] = transform(val);
|
|
}
|
|
return new-map;
|
|
}
|
|
|
|
$note-modern-border-dark = transform-map($note-modern-hover, @(val) { lighten(val, 10%) });
|
|
$note-modern-bg-dark = transform-map($note-modern-text, @(val) { desaturate(darken(val, 20%), 20%) });
|
|
$note-modern-text-dark = transform-map($note-modern-bg, @(val) { darken(val, 10%) });
|
|
$note-modern-hover-dark = transform-map($note-modern-border, @(val) { lighten(val, 75%) });
|
|
|
|
// Tabs border radius
|
|
// --------------------------------------------------
|
|
$tbr = 0;
|
|
|
|
|
|
// Label colors
|
|
// --------------------------------------------------
|
|
$label = {
|
|
default : lighten(spin($note-border.default, 0), 89% + $lbg),
|
|
primary : lighten(spin($note-border.primary, 10), 87% + $lbg),
|
|
info : lighten(spin($note-border.info, -10), 86% + $lbg),
|
|
success : lighten(spin($note-border.success, 10), 85% + $lbg),
|
|
warning : lighten(spin($note-border.warning, 10), 83% + $lbg),
|
|
danger : lighten(spin($note-border.danger, -10), 87% + $lbg)
|
|
};
|
|
|
|
|
|
// Badge colors
|
|
// --------------------------------------------------
|
|
$badge-padding = 1px 4px;
|
|
$badge-border-radius = 0;
|
|
$badge-background = $gainsboro;
|
|
$badge-color = $black-light;
|
|
$badge-text-shadow = none;
|
|
|
|
|
|
$watermark-opacity = .1;
|