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

136 lines
4.7 KiB
Stylus
Raw Normal View History

2020-04-01 23:03:38 +08:00
// ==================================
// THEME VARIABLE
2020-04-01 23:03:38 +08:00
// ==================================
// ===============================
// layout
// ===============================
2020-04-29 18:41:29 +08:00
if (hexo-config('magic.enable')) {
$header-height = 80px; //
} else {
$header-height = 100px; //
}
2020-04-29 18:41:29 +08:00
if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
$main-content-width = 80%;
$sidebar-width = 280px; //
} else {
2020-04-28 23:20:17 +08:00
$main-content-width = 60%;
}
2020-04-03 18:18:42 +08:00
$header-shrink-height = 60px; //
2020-04-26 15:16:53 +08:00
$tool-button-width = 36px; //
2020-04-29 18:41:29 +08:00
$component-interspace = 30px; // /px
// ===============================
//
// ===============================
$media-max-width = 760px; //
// ===============================
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;
2020-04-01 22:42:24 +08:00
// ===============================
// color
// ===============================
2020-04-03 18:18:42 +08:00
// normal mode color
2020-04-26 18:34:51 +08:00
$primary-color = #1b65ea; //
$background-color = #fff; //
$magic-background-color = #f5f5f5; // MAGIC
2020-04-29 18:41:29 +08:00
$normal-text-color = #3c3944; //
$first-text-color = darken($normal-text-color, 10%); //
2020-04-26 18:34:51 +08:00
$second-text-color = darken($normal-text-color, 5%); //
2020-04-29 18:41:29 +08:00
$third-text-color = lighten($normal-text-color, 40%); //
$fourth-text-color = #eee; //
2020-04-26 18:34:51 +08:00
$border-color = darken($background-color, 30%); //
$selection-color = lighten($primary-color, 20%); //
// dark mode color
2020-04-03 18:18:42 +08:00
$dark-primary-color = $primary-color;
2020-04-29 18:41:29 +08:00
$dark-background-color = #38373a;
$dark-magic-background-color = #2f2e31;
$dark-normal-text-color = #b9b5c2;
2020-04-03 18:18:42 +08:00
$dark-first-text-color = lighten($dark-normal-text-color, 30%);
$dark-second-text-color = lighten($dark-normal-text-color, 20%);
$dark-third-text-color = darken($dark-normal-text-color, 20%);
2020-04-29 18:41:29 +08:00
$dark-fourth-text-color = #2f2e31;
$dark-border-color = lighten($dark-background-color, 20%);
2020-04-03 18:18:42 +08:00
$dark-selection-color = $selection-color;
2020-04-01 22:42:24 +08:00
// ===============================
// font
// ===============================
//$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei';
//$default-font-family = 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
//$default-font-family = 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
2020-04-03 18:18:42 +08:00
//$default-font-family = "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
$default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
$default-font-size = 15px;
$default-font-line-height = 20px;
$default-font-weight = 400;
:root {
--background-color: $background-color;
--magic-background-color: $magic-background-color;
--primary-color: $primary-color;
--first-text-color: $first-text-color;
2020-04-26 18:34:51 +08:00
--fourth-text-color: $fourth-text-color;
--second-text-color: $second-text-color;
--third-text-color: $third-text-color;
--normal-text-color: $normal-text-color;
--border-color: $border-color;
2020-04-03 18:18:42 +08:00
--selection-color: $selection-color;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: $dark-background-color;
--magic-background-color: $dark-magic-background-color;
--primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color;
2020-04-26 18:34:51 +08:00
--fourth-text-color: $dark-fourth-text-color;
--normal-text-color: $dark-normal-text-color;
2020-04-03 18:18:42 +08:00
--border-color: $dark-border-color;
--selection-color: $dark-selection-color;
}
}
.dark-mode {
--background-color: $dark-background-color;
--magic-background-color: $dark-magic-background-color;
--primary-color: $dark-primary-color;
--first-text-color: $dark-first-text-color;
--second-text-color: $dark-second-text-color;
--third-text-color: $dark-third-text-color;
2020-04-26 18:34:51 +08:00
--fourth-text-color: $dark-fourth-text-color;
--normal-text-color: $dark-normal-text-color;
2020-04-03 18:18:42 +08:00
--border-color: $dark-border-color;
--selection-color: $dark-selection-color;
}
.light-mode {
--background-color: $background-color;
--magic-background-color: $magic-background-color;
--primary-color: $primary-color;
--first-text-color: $first-text-color;
--second-text-color: $second-text-color;
--third-text-color: $third-text-color;
2020-04-26 18:34:51 +08:00
--fourth-text-color: $fourth-text-color;
--normal-text-color: $normal-text-color;
--border-color: $border-color;
2020-04-03 18:18:42 +08:00
--selection-color: $selection-color;
}