style: optimize global style
This commit is contained in:
parent
beebe44404
commit
a2d80bdd38
|
@ -24,11 +24,11 @@
|
|||
margin-bottom: $component-interspace;
|
||||
|
||||
+ils-tablet() {
|
||||
margin-bottom: $component-interspace-tablet;
|
||||
margin-bottom: $component-interspace * 0.9;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
margin-bottom: $component-interspace-mobile;
|
||||
margin-bottom: $component-interspace * 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -13,12 +13,11 @@
|
|||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
//background: rgba(0, 0, 0, 0.32);
|
||||
background: var(--scroll-bar-color);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: var(--scroll-bar-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -37,16 +36,12 @@ html, body {
|
|||
line-height: $default-font-line-height;
|
||||
|
||||
+ils-tablet() {
|
||||
//font-size: 0.99em;
|
||||
//line-height: $default-font-line-height - 2px;
|
||||
font-size: $default-font-size * 0.95;
|
||||
line-height: $default-font-line-height * 0.95;
|
||||
font-size: $default-font-size * 0.96;
|
||||
line-height: $default-font-line-height * 0.96;
|
||||
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
//font-size: 0.98em;
|
||||
//line-height: $default-font-line-height - 4px;
|
||||
font-size: $default-font-size * 0.9;
|
||||
line-height: $default-font-line-height * 0.9;
|
||||
}
|
||||
|
|
|
@ -12,15 +12,13 @@ $main-content-width-mobile = 88%; // 中间内容区域宽度(手机)
|
|||
$header-shrink-height = 56px; // 头部收缩高度
|
||||
$circle-button-width = 40px; // tools 圆形工具按钮宽度
|
||||
$tools-button-width = 32px; // tools 方形工具按钮宽度
|
||||
$component-interspace = 40px; // 组件/模块的间隔值(PC)
|
||||
$component-interspace-tablet = 30px; // 组件/模块的间隔值(平板)
|
||||
$component-interspace-mobile = 20px; // 组件/模块的间隔值(手机)
|
||||
$component-interspace = 30px; // 组件/模块的间隔值(PC)
|
||||
|
||||
// ========================================================================
|
||||
// 媒体查询
|
||||
// ========================================================================
|
||||
$media-max-width = 760px; // 媒体查询最大宽度 (平板)
|
||||
$media-max-width-mobile = 480px; // 媒体查询最大宽度(手机)
|
||||
$media-max-width = 780px; // 媒体查询最大宽度 (平板)
|
||||
$media-max-width-mobile = 500px; // 媒体查询最大宽度(手机)
|
||||
|
||||
ils-tablet()
|
||||
@media (max-width: $media-max-width)
|
||||
|
@ -50,34 +48,39 @@ $z-index-9 = 1009;
|
|||
// ========================================================================
|
||||
// primary color
|
||||
$temp-color = hexo-config('style.primary_color');
|
||||
$primary-color = $temp-color ? convert($temp-color):#0066CC;
|
||||
$background-color = #fff; // light background color
|
||||
$second-background-color = darken($background-color, 2%); // second light background color
|
||||
$normal-text-color = #3f3f3f; // 通用文本颜色(默认字体颜色)
|
||||
$first-text-color = darken($normal-text-color, 10%); // 第一文本颜色
|
||||
$second-text-color = darken($normal-text-color, 5%); // 第二文本颜色
|
||||
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
|
||||
$fourth-text-color = lighten($normal-text-color, 90%); // 第三文本颜色
|
||||
$border-color = darken($background-color, 30%); // 边框颜色
|
||||
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色
|
||||
$primary-color = $temp-color ? convert($temp-color) : #0066CC;
|
||||
|
||||
|
||||
// ====================== light mode color ======================
|
||||
$background-color = #fff;
|
||||
$second-background-color = darken($background-color, 2%);
|
||||
$default-text-color = #3f3f3f;
|
||||
$first-text-color = darken($default-text-color, 10%);
|
||||
$second-text-color = darken($default-text-color, 5%);
|
||||
$third-text-color = lighten($default-text-color, 40%);
|
||||
$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);
|
||||
$scroll-bar-color = #585858;
|
||||
$scroll-bar-color = lighten($default-text-color, 20%);
|
||||
$scroll-bar-bg-color = darken($background-color, 10%);
|
||||
|
||||
// dark mode color
|
||||
// ====================== dark mode color ======================
|
||||
$dark-primary-color = $primary-color;
|
||||
$dark-background-color = #2f2e31;
|
||||
$dark-second-background-color = darken($dark-background-color, 2%);
|
||||
$dark-normal-text-color = #b9b5c2;
|
||||
$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%);
|
||||
$dark-fourth-text-color = darken($dark-normal-text-color, 80%);
|
||||
$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%);
|
||||
$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-scroll-bar-color = #686868;
|
||||
$dark-scroll-bar-color = darken($dark-default-text-color, 30%);
|
||||
$dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
|
||||
|
||||
|
||||
// ========================================================================
|
||||
|
@ -100,12 +103,13 @@ root-color(mode) {
|
|||
--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;
|
||||
--normal-text-color: mode == 'light' ? $normal-text-color : $dark-normal-text-color;
|
||||
--normal-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;
|
||||
--scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
|
||||
--scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -74,11 +74,11 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
|
|||
padding: $component-interspace 0;
|
||||
|
||||
+ils-tablet() {
|
||||
padding: $component-interspace-tablet 0;
|
||||
padding: $component-interspace * 0.8 0;
|
||||
}
|
||||
|
||||
+ils-mobile() {
|
||||
padding: $component-interspace-mobile 0;
|
||||
padding: $component-interspace * 0.6 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
|
|
Loading…
Reference in New Issue