style: optimize global style

source/css/layout/_partial/empty-page.styl

@@ -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;
     }
   }
 }

source/css/layout/common/basic.styl

@@ -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;
   }

source/css/layout/common/variables.styl

@@ -5,22 +5,20 @@
 // ========================================================================
 // layout
 // ========================================================================
-$header-height = 72px; // 头部默认高度
-$main-content-width = 62%; // 中间内容区域宽度（PC）
-$main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
-$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; // 组件/模块的间隔值（手机）
+$header-height = 72px;                          // 头部默认高度
+$main-content-width = 62%;                      // 中间内容区域宽度（PC）
+$main-content-width-tablet = 80%;               // 中间内容区域宽度（平板）
+$main-content-width-mobile = 88%;               // 中间内容区域宽度（手机）
+$header-shrink-height = 56px;                   // 头部收缩高度
+$circle-button-width = 40px;                    // tools 圆形工具按钮宽度
+$tools-button-width = 32px;                     // tools 方形工具按钮宽度
+$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;
 }
 
 

source/css/layout/page.styl

@@ -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 {