2020-04-01 23:03:38 +08:00
|
|
|
|
// ==================================
|
|
|
|
|
// ils-x variables
|
|
|
|
|
// ==================================
|
|
|
|
|
|
2020-04-02 11:01:24 +08:00
|
|
|
|
// ===============================
|
|
|
|
|
// layout
|
|
|
|
|
// ===============================
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$header-height = 100px; // 头部默认高度
|
|
|
|
|
$header-shrink-height = 60px; // 头部收缩高度
|
2020-04-08 17:30:05 +08:00
|
|
|
|
$main-content-width = 60%; // 中间内容区域宽度
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$media-max-width = 760px; // 媒体查询最大宽度
|
2020-04-01 23:03:38 +08:00
|
|
|
|
|
2020-04-02 11:01:24 +08:00
|
|
|
|
// ===============================
|
2020-04-01 23:03:38 +08:00
|
|
|
|
// z-index
|
2020-04-02 11:01:24 +08:00
|
|
|
|
// ===============================
|
|
|
|
|
$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
|
|
|
|
|
2020-03-21 23:04:01 +08:00
|
|
|
|
|
2020-04-02 11:01:24 +08:00
|
|
|
|
// ===============================
|
|
|
|
|
// color
|
|
|
|
|
// ===============================
|
2020-04-03 18:18:42 +08:00
|
|
|
|
// normal mode color
|
2020-04-08 17:30:05 +08:00
|
|
|
|
$primary-color = #1864bd; // 主题颜色
|
|
|
|
|
$background-color = #fdfdfd; // 背景颜色
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$normal-text-color = #515061; // 通用文本颜色(默认字体颜色)
|
|
|
|
|
$first-text-color = darken($normal-text-color, 20%); // 第一文本颜色
|
|
|
|
|
$second-text-color = darken($normal-text-color, 10%); // 第二文本颜色
|
2020-04-07 11:57:53 +08:00
|
|
|
|
$third-text-color = lighten($normal-text-color, 30%); // 第三文本颜色
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$border-color = darken($background-color, 15%); // 边框颜色
|
|
|
|
|
$selection-color = lighten($primary-color, 8%);
|
2020-03-21 23:04:01 +08:00
|
|
|
|
|
2020-04-02 20:37:34 +08:00
|
|
|
|
// dark mode color
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$dark-primary-color = $primary-color;
|
2020-04-07 11:57:53 +08:00
|
|
|
|
$dark-background-color = #3a3a3a;
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$dark-normal-text-color = #bbb;
|
|
|
|
|
$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-07 11:57:53 +08:00
|
|
|
|
$dark-border-color = lighten($dark-background-color, 20%);
|
2020-04-03 18:18:42 +08:00
|
|
|
|
$dark-selection-color = $selection-color;
|
2020-04-02 20:37:34 +08:00
|
|
|
|
|
2020-04-01 22:42:24 +08:00
|
|
|
|
|
2020-04-02 11:01: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;
|
2020-04-02 11:01:24 +08:00
|
|
|
|
$default-font-size = 14px;
|
|
|
|
|
$default-font-line-height = 20px;
|
|
|
|
|
$default-font-weight = 400;
|
2020-03-21 23:04:01 +08:00
|
|
|
|
|
|
|
|
|
|
2020-04-02 11:01:24 +08:00
|
|
|
|
:root {
|
2020-04-02 20:37:34 +08:00
|
|
|
|
--background-color: $background-color;
|
|
|
|
|
--primary-color: $primary-color;
|
|
|
|
|
--first-text-color: $first-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;
|
2020-04-02 11:01:24 +08:00
|
|
|
|
}
|
2020-03-21 23:04:01 +08:00
|
|
|
|
|
2020-04-02 11:01:24 +08:00
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
:root {
|
2020-04-02 20:37:34 +08:00
|
|
|
|
--background-color: $dark-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;
|
|
|
|
|
--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;
|
2020-04-02 11:01:24 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-21 23:04:01 +08:00
|
|
|
|
|
|
|
|
|
|
2020-04-02 11:01:24 +08:00
|
|
|
|
.dark-mode {
|
2020-04-02 20:37:34 +08:00
|
|
|
|
--background-color: $dark-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;
|
|
|
|
|
--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;
|
2020-04-02 20:37:34 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.light-mode {
|
|
|
|
|
--background-color: $background-color;
|
|
|
|
|
--primary-color: $primary-color;
|
|
|
|
|
--first-text-color: $first-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;
|
2020-04-02 11:01:24 +08:00
|
|
|
|
}
|