style: 暗黑主题优化 (#837)

* style: 暗黑主题优化 * feat: 暗黑风格侧边目录栏样式微调
Tencent · Aug 9, 2024 · 9425441 · 9425441
1 parent 9ae7cb2
commit 9425441
Showing 1 changed file with 109 additions and 3 deletions.
diff --git a/src/sass/themes/dark.scss b/src/sass/themes/dark.scss
@@ -13,7 +13,7 @@ $sidebarShadow: $shadow;
 $editorBg: rgb(37, 37, 38);
 $editorColor: rgb(200, 200, 200);
 $editorSelectedBg: $toolbarBtnBgHover;
-$editorUrlBg: rgb(0,0,0);
+$editorUrlBg: rgba(81,56,56,1);
 $editorCursorColor: rgb(255,255,255);
 $editorImportantColor: rgb(247, 133, 83);
 $editorCodeColor: rgb(255, 203, 107);
@@ -135,6 +135,112 @@ $mdSvgTextColor: rgb(250, 160, 0);
       }
     }
   }
+  /* 目录区域样式 */
+  .cherry-flex-toc {
+    &:hover {
+      background-color: #d0cece;
+      width: 260px;
+    }
+    .cherry-toc-head {
+      i {
+        &:hover {
+          color: $toolbarColorItemHoverBorderColor;
+        }
+      }
+    }
+    .cherry-toc-list {
+      .cherry-toc-one-a {
+        &.current {
+          border-left-color: rgb(255, 100, 33);
+          color: rgb(255, 100, 33);
+        }
+        &:hover {
+          border-left-color: rgb(247, 162, 14);
+          color: rgb(247, 162, 14) ;
+        }
+      }
+    }
+
+    &.cherry-flex-toc__pure {
+      width: 30px;
+      height: calc(100% - 200px);
+      max-height: 600px;
+      background: #ffffff00;
+      box-shadow: none;
+      border-radius: 0;
+      .cherry-toc-head {
+        height: 25px;
+        border-bottom: 1px dashed #33333300;
+        .cherry-toc-title {
+          display: none;
+        }
+        .ch-icon-chevronsRight {
+          display: none;
+        }
+        .ch-icon-chevronsLeft {
+          display: inline;
+        }
+      }
+      .cherry-toc-list {
+        padding-left: 7px;
+        .cherry-toc-one-a {
+          overflow: hidden;
+          width: 0;
+          margin-bottom: 3px;
+          height: 5px;
+          border-left-width: 18px;
+        }
+      }
+    }
+
+    &.auto-num {
+      .cherry-toc-list {
+        counter-reset: toclevel1;
+
+        .cherry-toc-one-a__1 {
+          counter-reset: toclevel2;
+        }
+        .cherry-toc-one-a__2 {
+          counter-reset: toclevel3;
+        }
+        .cherry-toc-one-a__3 {
+          counter-reset: toclevel4;
+        }
+        .cherry-toc-one-a__4 {
+          counter-reset: toclevel5;
+        }
+        .cherry-toc-one-a__5 {
+          counter-reset: toclevel6;
+        }
+        .cherry-toc-one-a__1:before {
+          counter-increment: toclevel1;
+          content: counter(toclevel1) '. ';
+        }
+        .cherry-toc-one-a__2:before {
+          counter-increment: toclevel2;
+          content: counter(toclevel1) '.' counter(toclevel2) '. ';
+        }
+        .cherry-toc-one-a__3:before {
+          counter-increment: toclevel3;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '. ';
+        }
+        .cherry-toc-one-a__4:before {
+          counter-increment: toclevel4;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '. ';
+        }
+        .cherry-toc-one-a__5:before {
+          counter-increment: toclevel5;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '.'
+            counter(toclevel5) '. ';
+        }
+        .cherry-toc-one-a__6:before {
+          counter-increment: toclevel5;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '.'
+            counter(toclevel5) '.' counter(toclevel6) '. ';
+        }
+      }
+    }
+  }
 
 }
 /** 预览区域样式 */
@@ -199,7 +305,7 @@ $mdSvgTextColor: rgb(250, 160, 0);
     }
 
     &.cherry-list__default {
-
+      background-color: $previewBg;
     }
 
     /** checklist 模式，未勾选时 */
@@ -382,7 +488,7 @@ $mdSvgTextColor: rgb(250, 160, 0);
   }
 
   .cherry-highlight-line {
-    background-color: #151422;
+    background-color: $previewBg;
   }
 
 }