🐛 fix: 修复代码块悬浮行和活动行样式丢失问题

Author: caolib

onelight-dark.css

@@ -51,8 +51,7 @@
     --main-yellow: color-mix(in srgb, var(--main-yellow-original) var(--darken-ratio), black);
     --light-color: #6e6e6e;
     --theme-light-color: #353a45;
-    --code--bg-color: #282c34;
-    --code--bg-color-light: #3d404e;
+    --code-bg-color-light: #3d404e;
     --border-color: var(--theme-color);
     --border: solid 0.5px var(--theme-color)94;
     /* ---------------->> 字体 <<---------------- */
@@ -83,7 +82,7 @@
 
 /* 目录 */
 p.md-toc-content {
-    background: var(--code--bg-color-light);
+    background: var(--code-bg-color-light);
 }
 
 /* 代码块文本 */
@@ -105,15 +104,6 @@ pre.CodeMirror-line>span {
     box-shadow: var(--box-shadow-large);
 }
 
-
-
-
-
-/* 代码块 */
-.md-fences {
-    box-shadow: unset;
-}
-
 /* 行内代码 */
 #write code {
     background-color: var(--code-bg-color);

onelight.css

@@ -45,8 +45,9 @@
     --main-yellow: #f9b03d;
     --light-color: #b2b2b2;
     --theme-light-color: white;
-    --code--bg-color: #282c34;
-    --code--bg-color-light: #3d404e;
+    --code-bg-color: #282c34;
+    --code-bg-color-light: #3d404e;
+    --code-bg-color-active: #414855;
     --border-color: var(--theme-color);
     --border: solid 0.5px var(--theme-color)94;
     /* ---------------->> 字体 <<---------------- */
@@ -284,8 +285,8 @@ span#filesearch-case-option-btn:active {
     font-weight: 700;
 }
 
-.md-fences:not(.md-focus) .CodeMirror-code>:hover {
-    background-color: var(--code--bg-color-light)
+.md-fences .CodeMirror-code>:hover {
+    background-color: var(--code-bg-color-light)
 }
 
 hr {

onelight/style/code.css

@@ -41,12 +41,20 @@ pre.CodeMirror-line>span {
     background: var(--select-text-bg-color) !important;
 }
 
-/* ---------------->> 代码块 <<---------------- */
-#write pre {
-    background: var(--code-bg-color) !important;
-    font-family: var(--main-font-family)
+/* 代码块活动行高亮 */
+.CodeMirror-focused .CodeMirror-activeline-background {
+    background-color: var(--code-bg-color-active);
+}
+
+/* 活动行行号 */
+.CodeMirror-activeline .CodeMirror-activeline-gutter {
+    .CodeMirror-linenumber {
+        color: white;
+    }
 }
 
+
+
 /* ---------------->> 代码语言类型 <<---------------- */
 span.ty-input.ty-input-after.ty-cm-lang-input {
     color: white;
@@ -70,7 +78,7 @@ code {
 
 .md-fences {
     background-color: var(--code-bg-color);
-    box-shadow: 0 4px 10px gray;
+    box-shadow: var(--box-shadow);
     color: var(--bg-color);
     margin: 0 0 20px;
     padding: .4em 1em .3em;
@@ -80,10 +88,10 @@ code {
 /* ---------------->> 代码块光标 <<---------------- */
 .CodeMirror div.CodeMirror-cursor {
     border-left: 1.5px solid var(--main-green);
-    /* z-index: 5; */
 }
 
 
+
 /* 代码配色 */
 .cm-s-inner .cm-keyword {
     color: var(--main-purple)

onelight/style/editor.css

@@ -96,11 +96,9 @@ li.outline-item-wrapper.outline-h5.outline-item-open:has(> ul.outline-children >
 /* ---------------->> 滚动条 <<---------------- */
 ::-webkit-scrollbar {
     width: 10px;
-    height: 5px;
 }
 
 ::-webkit-scrollbar:hover {
-    height: 10px;
     width: 10px;
 }
 

onelight/style/font.css

@@ -20,6 +20,12 @@ text,
 code,
 pre,
 samp,
-tt {
+tt,
+.md-fences-adv-panel,
+.md-math-container,
+.md-mathjax-preview,
+text.actor>tspan,
+text.messageText,
+span.nodeLabel.markdown-node-label {
     font-family: var(--main-font-family);
 }

onelight/style/mermaid.css

@@ -12,15 +12,11 @@
     fill: var(--text-color) !important;
 }
 
-pre.md-fences.md-end-block.md-fences-with-lineno.md-diagram.md-fences-advanced.ty-contain-cm {
+pre.md-fences.md-end-block.md-fences-with-lineno.md-diagram.md-fences-advanced.ty-contain-cm[lang='mermaid'] {
     background: transparent !important;
 }
 
-.md-fences-adv-panel,
-.md-math-container,
-.md-mathjax-preview,
-text.actor>tspan,
-text.messageText,
-span.nodeLabel.markdown-node-label {
-    font-family: var(--main-font-family) !important;
+/* 代码区 */
+pre.md-fences.md-end-block.md-fences-with-lineno.md-diagram.md-fences-advanced.ty-contain-cm.modeLoaded.md-focus[lang='mermaid'] {
+    background: var(--code-bg-color) !important;
 }