269 lines
11 KiB
Stylus
269 lines
11 KiB
Stylus
// ==============================================================================================
|
|
// KEEP THEME VARIABLE //
|
|
// ==============================================================================================
|
|
|
|
|
|
// ==============================================================================================
|
|
// layout
|
|
// ==============================================================================================
|
|
$header-height = 70px // header height
|
|
$header-shrink-height = $header-height * 0.72 // header shrink height
|
|
$scroll-progress-bar-height = 2px // scroll progress bar height
|
|
$main-content-width = 80% // main content width (PC)
|
|
$main-content-width-tablet = 86% // main content width (tablet)
|
|
$main-content-width-mobile = 90% // main content width (mobile)
|
|
$post-tool-button-width = 38px // post tool button width
|
|
$component-spacing-value = 38px // component-spacing-value (PC)
|
|
$content-max-width = 928px // main content max width
|
|
|
|
// main content max width of has TOC
|
|
$has-toc-content-max-width = $content-max-width * 1.2
|
|
|
|
// main content max width of has first screen
|
|
$has-fs-content-max-width = $content-max-width * 1.2
|
|
|
|
|
|
// ==============================================================================================
|
|
// media query
|
|
// ==============================================================================================
|
|
$media-max-width = 800px // media query max width (tablet)
|
|
$media-max-width-mobile = 500px // media query max width (mobile)
|
|
|
|
keep-tablet() {
|
|
@media (max-width $media-max-width) {
|
|
{ block }
|
|
}
|
|
}
|
|
|
|
keep-mobile() {
|
|
@media (max-width $media-max-width-mobile) {
|
|
{ block }
|
|
}
|
|
}
|
|
|
|
|
|
// ==============================================================================================
|
|
// z-index
|
|
// ==============================================================================================
|
|
$z-index-1 = 1001
|
|
$z-index-2 = 1002
|
|
$z-index-3 = 1003
|
|
$z-index-4 = 1004
|
|
$z-index-5 = 1005
|
|
$z-index-6 = 1006
|
|
$z-index-7 = 1007
|
|
$z-index-8 = 1008
|
|
$z-index-9 = 1009
|
|
$z-index-10 = 1010
|
|
|
|
|
|
// ==============================================================================================
|
|
// theme primary color
|
|
// ==============================================================================================
|
|
$temp-color = hexo-config('style.primary_color')
|
|
$primary-color = $temp-color ? convert($temp-color) : #0066cc
|
|
|
|
// light
|
|
$primary-color-light-1 = lighten($primary-color, 10%)
|
|
$primary-color-light-2 = lighten($primary-color, 20%)
|
|
|
|
// dark
|
|
$primary-color-dark-1 = darken($primary-color, 10%)
|
|
$primary-color-dark-2 = darken($primary-color, 20%)
|
|
|
|
|
|
// ==============================================================================================
|
|
// theme light mode color set
|
|
// ==============================================================================================
|
|
$background-color-1 = #fff
|
|
$background-color-2= darken($background-color-1, 3%)
|
|
$background-color-3= darken($background-color-1, 6%)
|
|
$content-background-color = #fff
|
|
|
|
$text-color-3 = #50505c
|
|
$text-color-1 = darken($text-color-3, 10%)
|
|
$text-color-2 = darken($text-color-3, 5%)
|
|
$text-color-4 = lighten($text-color-3, 30%)
|
|
$text-color-5 = lighten($text-color-3, 60%)
|
|
$text-color-6 = lighten($text-color-3, 90%)
|
|
|
|
$toc-text-color = lighten($text-color-3, 20%)
|
|
|
|
$badge-color = darken($background-color-1, 6%)
|
|
$badge-background-color = lighten($text-color-3, 40%)
|
|
|
|
$border-color = darken($background-color-1, 30%)
|
|
$selection-color = lighten($primary-color, 10%)
|
|
|
|
$shadow-color = rgba(0, 0, 0, 0.2)
|
|
$shadow-hover-color = rgba(0, 0, 0, 0.3)
|
|
|
|
$scrollbar-color = lighten($text-color-3, 10%)
|
|
$scrollbar-background-color = darken($background-color-1, 10%)
|
|
$toc-scrollbar-color = alpha($text-color-3, 0.1)
|
|
|
|
$copyright-info-color = #cc0033
|
|
|
|
$avatar-background-color = $primary-color-dark-1
|
|
|
|
$header-transparent-background-1 = alpha($background-color-1, 0.28)
|
|
$header-transparent-background-2 = alpha($background-color-1, 0.4)
|
|
|
|
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
|
|
|
|
$article-aging-tips-color = #b78d0f
|
|
$article-aging-tips-background-color = alpha($article-aging-tips-color, 0.1)
|
|
$article-aging-tips-border-color = alpha($article-aging-tips-color, 0.6)
|
|
|
|
|
|
// ==============================================================================================
|
|
// theme dark mode color set
|
|
// ==============================================================================================
|
|
$dark-background-color-1 = #383940
|
|
$dark-background-color-2= lighten($dark-background-color-1, 3%)
|
|
$dark-background-color-3= lighten($dark-background-color-1, 6%)
|
|
$dark-content-background-color = darken($dark-background-color-1, 2%)
|
|
|
|
$dark-text-color-3 = #bebec6
|
|
$dark-text-color-1 = lighten($dark-text-color-3, 10%)
|
|
$dark-text-color-2 = lighten($dark-text-color-3, 5%)
|
|
$dark-text-color-4 = darken($dark-text-color-3, 20%)
|
|
$dark-text-color-5 = darken($dark-text-color-3, 50%)
|
|
$dark-text-color-6 = darken($dark-text-color-3, 70%)
|
|
|
|
$dark-toc-text-color = darken($dark-text-color-3, 15%)
|
|
|
|
$dark-badge-color = lighten($dark-background-color-1, 10%)
|
|
$dark-badge-background-color = lighten($dark-text-color-3, 40%)
|
|
|
|
$dark-border-color = lighten($dark-background-color-1, 30%)
|
|
$dark-selection-color = darken($selection-color, 20%)
|
|
|
|
$dark-shadow-color = rgba(128, 128, 128, 0.2)
|
|
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
|
|
|
|
$dark-scrollbar-color = darken($dark-background-color-1, 10%)
|
|
$dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
|
|
$dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
|
|
|
|
$dark-copyright-info-color = darken($copyright-info-color, 20%)
|
|
|
|
$dark-avatar-background-color = darken($avatar-background-color, 20%)
|
|
|
|
$dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
|
|
$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4)
|
|
|
|
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
|
|
|
|
$dark-article-aging-tips-color = #ecc34d
|
|
$dark-article-aging-tips-background-color = alpha($dark-article-aging-tips-color, 0.1)
|
|
$dark-article-aging-tips-border-color = alpha($dark-article-aging-tips-color, 0.6)
|
|
|
|
|
|
// ==============================================================================================
|
|
// font settings
|
|
// ==============================================================================================
|
|
$preset-font-family = Optima-Regular, Optima, PingFang SC, Microsoft YaHei, sans-serif
|
|
$custom-font-family = hexo-config('style.font_family')
|
|
$default-font-family = $custom-font-family ? convert($custom-font-family) : $preset-font-family
|
|
$custom-font-size = hexo-config('style.font_size')
|
|
$default-font-size = $custom-font-size ? convert($custom-font-size) : 15.2px
|
|
$default-font-line-height = 22px
|
|
$default-font-weight = 400
|
|
|
|
|
|
// ==============================================================================================
|
|
// light/dark mode color
|
|
// ==============================================================================================
|
|
root-color(mode) {
|
|
// primary color
|
|
--primary-color $primary-color
|
|
--primary-color-light-1 $primary-color-light-1
|
|
--primary-color-light-2 $primary-color-light-2
|
|
--primary-color-dark-1 $primary-color-dark-1
|
|
--primary-color-dark-2 $primary-color-dark-2
|
|
|
|
// background color
|
|
--background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
|
|
--background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
|
|
--background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
|
|
|
|
// content background color
|
|
--content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
|
|
|
|
// text color
|
|
--text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
|
|
--text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
|
|
--text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
|
|
--text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
|
|
--text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
|
|
--text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
|
|
|
|
// toc text color
|
|
--toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
|
|
|
|
// badge color
|
|
--badge-color mode == 'light' ? $badge-color : $dark-badge-color
|
|
--badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color
|
|
|
|
// border color
|
|
--border-color mode == 'light' ? $border-color : $dark-border-color
|
|
|
|
// selection color
|
|
--selection-color mode == 'light' ? $selection-color : $dark-selection-color
|
|
|
|
// shadow color
|
|
--shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
|
|
--shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
|
|
|
|
// scrollbar color
|
|
--scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
|
|
--scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
|
|
--toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
|
|
|
|
// copyright info left side color
|
|
--copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
|
|
|
|
// avatar background color
|
|
--avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
|
|
|
|
// header transparent background color
|
|
--header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
|
|
--header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
|
|
|
|
// pjax progress bar color
|
|
--pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
|
|
|
|
// article aging tips primary color
|
|
--article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color
|
|
--article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color
|
|
--article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color
|
|
}
|
|
|
|
|
|
:root {
|
|
root-color('light')
|
|
}
|
|
|
|
@media (prefers-color-scheme light) {
|
|
:root {
|
|
root-color('light')
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme dark) {
|
|
:root {
|
|
root-color('dark')
|
|
}
|
|
}
|
|
|
|
|
|
.light-mode {
|
|
root-color('light')
|
|
}
|
|
|
|
|
|
.dark-mode {
|
|
root-color('dark')
|
|
}
|