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