hexo-theme-keep/source/css/layout/common/variables.styl

145 lines
6.4 KiB
Stylus
Raw Normal View History

// ========================================================================
// THEME VARIABLE //
// ========================================================================
2020-04-01 23:03:38 +08:00
// ========================================================================
// layout
// ========================================================================
2020-12-25 17:50:22 +08:00
$header-height = 76px; //
2021-01-05 16:01:26 +08:00
$header-shrink-height = $header-height * 0.72; //
2021-01-05 11:48:58 +08:00
$header-progress-height = 2.8px; //
2020-11-25 23:39:24 +08:00
$main-content-width = 80%; // PC
$main-content-width-tablet = 85%; //
$main-content-width-mobile = 90%; //
2020-11-18 11:15:03 +08:00
$circle-button-width = 40px; // tools
$tools-button-width = 32px; // tools
$component-interspace = 30px; // /PC
2020-11-25 23:39:24 +08:00
$temp-content-max-width = hexo-config('style.content_max_width');
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px;
2020-04-29 18:41:29 +08:00
// ========================================================================
2020-04-29 18:41:29 +08:00
//
// ========================================================================
2020-11-18 11:15:03 +08:00
$media-max-width = 780px; // ()
$media-max-width-mobile = 500px; //
2020-06-04 22:11:27 +08:00
2020-11-20 12:02:22 +08:00
keep-tablet()
2020-06-04 22:11:27 +08:00
@media (max-width: $media-max-width)
{block}
2020-11-20 12:02:22 +08:00
keep-mobile()
2020-06-04 22:11:27 +08:00
@media (max-width: $media-max-width-mobile)
{block}
2020-04-29 18:41:29 +08:00
// ========================================================================
2020-04-01 23:03:38 +08:00
// 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;
2020-04-01 22:42:24 +08:00
// ========================================================================
// color
// ========================================================================
2020-11-13 14:43:22 +08:00
// primary color
$temp-color = hexo-config('style.primary_color');
2020-11-18 11:15:03 +08:00
$primary-color = $temp-color ? convert($temp-color) : #0066CC;
// ====================== light mode color ======================
$background-color = #fff;
$second-background-color = darken($background-color, 3%);
$default-text-color = #505050;
2020-11-18 11:15:03 +08:00
$first-text-color = darken($default-text-color, 10%);
$second-text-color = darken($default-text-color, 5%);
2020-11-20 12:02:22 +08:00
$third-text-color = lighten($default-text-color, 30%);
2020-11-18 11:15:03 +08:00
$fourth-text-color = lighten($default-text-color, 90%);
$border-color = darken($background-color, 30%);
$selection-color = lighten($primary-color, 10%);
2020-11-15 22:06:32 +08:00
$shadow-color = rgba(0, 0, 0, 0.2);
$shadow-hover-color = rgba(0, 0, 0, 0.28);
2020-11-18 11:15:03 +08:00
$scroll-bar-color = lighten($default-text-color, 20%);
$scroll-bar-bg-color = darken($background-color, 10%);
$link-color = darken($default-text-color, 10%);
2020-11-19 15:14:53 +08:00
$copyright-info-color = #CC0033;
$avatar-background-color = #0066CC;
2020-11-18 11:15:03 +08:00
// ====================== dark mode color ======================
2020-04-03 18:18:42 +08:00
$dark-primary-color = $primary-color;
2020-11-19 15:14:53 +08:00
$dark-background-color = #363636;
$dark-second-background-color = darken($dark-background-color, 10%);
2020-11-18 11:15:03 +08:00
$dark-default-text-color = #b9b5c2;
$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%);
2020-04-03 18:18:42 +08:00
$dark-selection-color = $selection-color;
2020-11-15 22:06:32 +08:00
$dark-shadow-color = rgba(128, 128, 128, 0.2);
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
$dark-scroll-bar-color = darken($dark-background-color, 30%);
2020-11-18 11:15:03 +08:00
$dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
$dark-link-color = lighten($dark-default-text-color, 10%);
2020-11-19 15:14:53 +08:00
$dark-copyright-info-color = darken($copyright-info-color, 20%);
$dark-avatar-background-color = darken($avatar-background-color, 20%);
2020-04-01 22:42:24 +08:00
// ========================================================================
// font
// ========================================================================
2020-11-17 11:50:11 +08:00
$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;
2020-09-09 16:30:18 +08:00
$default-font-size = 15.2px;
2020-11-13 14:43:22 +08:00
$default-font-line-height = 22px;
$default-font-weight = 400;
// ========================================================================
2020-11-17 18:21:16 +08:00
// light/dark mode color
// ========================================================================
2020-11-17 18:21:16 +08:00
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;
2020-11-18 11:56:47 +08:00
--default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
2020-11-17 18:21:16 +08:00
--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;
--scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
2020-11-18 11:15:03 +08:00
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
--link-color: mode == 'light' ? $link-color : $dark-link-color;
2020-11-19 15:14:53 +08:00
--copyright-info-color: mode == 'light' ? $copyright-info-color : $dark-copyright-info-color;
--avatar-background-color: mode == 'light' ? $avatar-background-color : $dark-avatar-background-color;
2020-11-15 22:06:32 +08:00
}
:root {
2020-11-17 18:21:16 +08:00
root-color('light');
2020-11-15 22:06:32 +08:00
}
@media (prefers-color-scheme: dark) {
:root {
2020-11-17 18:21:16 +08:00
root-color('dark');
2020-11-15 22:06:32 +08:00
}
}
2020-11-17 18:21:16 +08:00
.light-mode {
root-color('light');
}
2020-11-17 18:21:16 +08:00
.dark-mode {
root-color('dark');
2020-07-09 18:24:13 +08:00
}