// // 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 $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-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;