//@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 $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; // 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 : convert($theme_color_light); //$theme-color-dark : convert($theme_color_dark); $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 : hexo-config('font.' + $config + '.family'); @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-base : if($font_enable and (type-of($font_global_size) == number), $font_global_size * 1em, 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 : if($font_enable and (type-of($font_headings_size) == number), $font_headings_size * 1em, 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 : $highlight_light_background; $highlight-foreground : $highlight_light_foreground; $highlight-gutter-background : mix($highlight-background, $highlight-foreground, 90%); $highlight-gutter-foreground : mix($highlight-background, $highlight-foreground, 10%); $highlight-background-dark : $highlight_dark_background; $highlight-foreground-dark : $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); // 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-title : if($font_enable and (type-of($font_title_size) == number), $font_title_size * 1em, 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-padding : if(type-of($sidebar_padding) == number, $sidebar_padding * 1px, 18px); $sidebar-offset : if(type-of($sidebar_offset) == number, $sidebar_offset * 1px, 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 // -------------------------------------------------- // Tool buttons $tool-btn-bg : $black-deep; $tool-btn-color : white; $tool-btn-hover-fore-color : $orange; $tool-btn-opacity : .8; $tool-btn-opacity-hover : 1; // 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; $post-card-margin : 1em 0; // Note colors // -------------------------------------------------- // Read note light_bg_offset from NexT config and set in '$lbg%' to use it as string variable. $lbg : if(type-of($note_light_bg_offset) == number, $note_light_bg_offset * 1%, 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(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) );