169 lines
8.0 KiB
Stylus
169 lines
8.0 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)
|
|
|
|
// main content max width
|
|
$temp-content-max-width = hexo-config('style.content_max_width');
|
|
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px;
|
|
|
|
|
|
// ==============================================================================================
|
|
// media query
|
|
// ==============================================================================================
|
|
$media-max-width = 780px; // 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;
|
|
|
|
|
|
// ==============================================================================================
|
|
// theme primary color
|
|
// ==============================================================================================
|
|
$temp-color = hexo-config('style.primary_color');
|
|
$primary-color = $temp-color ? convert($temp-color) : #0066CC;
|
|
|
|
|
|
// ==============================================================================================
|
|
// theme light mode color set
|
|
// ==============================================================================================
|
|
$background-color = #fff;
|
|
$second-background-color = darken($background-color, 3%);
|
|
$default-text-color = #50505c;
|
|
$first-text-color = darken($default-text-color, 10%);
|
|
$second-text-color = darken($default-text-color, 5%);
|
|
$third-text-color = lighten($default-text-color, 30%);
|
|
$fourth-text-color = lighten($default-text-color, 90%);
|
|
$border-color = darken($background-color, 30%);
|
|
$selection-color = lighten($primary-color, 10%);
|
|
$shadow-color = rgba(0, 0, 0, 0.2);
|
|
$shadow-hover-color = rgba(0, 0, 0, 0.28);
|
|
$scrollbar-color = lighten($default-text-color, 6%);
|
|
$scroll-bar-bg-color = darken($background-color, 10%);
|
|
$link-color = darken($default-text-color, 10%);
|
|
$copyright-info-color = #CC0033;
|
|
$avatar-background-color = #0066CC;
|
|
$header-transparent-background-1 = alpha($background-color, 0.3);
|
|
$header-transparent-background-2 = alpha($background-color, 0.6);
|
|
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3);
|
|
|
|
|
|
// ==============================================================================================
|
|
// theme dark mode color set
|
|
// ==============================================================================================
|
|
$dark-primary-color = $primary-color;
|
|
$dark-background-color = #383940;
|
|
$dark-second-background-color = darken($dark-background-color, 10%);
|
|
$dark-default-text-color = #bebec6;
|
|
$dark-first-text-color = lighten($dark-default-text-color, 30%);
|
|
$dark-second-text-color = lighten($dark-default-text-color, 20%);
|
|
$dark-third-text-color = darken($dark-default-text-color, 20%);
|
|
$dark-fourth-text-color = darken($dark-default-text-color, 80%);
|
|
$dark-border-color = lighten($dark-background-color, 20%);
|
|
$dark-selection-color = $selection-color;
|
|
$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, 10%);
|
|
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%);
|
|
$dark-link-color = lighten($dark-default-text-color, 10%);
|
|
$dark-copyright-info-color = darken($copyright-info-color, 20%);
|
|
$dark-avatar-background-color = darken($avatar-background-color, 10%);
|
|
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.3);
|
|
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.6);
|
|
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
|
|
|
|
|
|
// ==============================================================================================
|
|
// font
|
|
// ==============================================================================================
|
|
$default-font-family = Optima-Regular, Optima, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
|
|
$default-font-size = 15.2px;
|
|
$default-font-line-height = 22px;
|
|
$default-font-weight = 400;
|
|
|
|
|
|
// ==============================================================================================
|
|
// light/dark mode color
|
|
// ==============================================================================================
|
|
root-color(mode) {
|
|
--background-color: mode == 'light' ? $background-color : $dark-background-color;
|
|
--second-background-color: mode == 'light' ? $second-background-color : $dark-second-background-color;
|
|
--primary-color: mode == 'light' ? $primary-color : $dark-primary-color;
|
|
--first-text-color: mode == 'light' ? $first-text-color : $dark-first-text-color;
|
|
--second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
|
|
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
|
|
--fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
|
|
--default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
|
|
--border-color: mode == 'light' ? $border-color : $dark-border-color;
|
|
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
|
|
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;
|
|
--shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
|
|
--scrollbar-color: mode == 'light' ? $scrollbar-color : $dark-scrollbar-color;
|
|
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
|
|
--link-color: mode == 'light' ? $link-color : $dark-link-color;
|
|
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
|
|
--avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-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 : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-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');
|
|
}
|