✨ feat(vscode): 代码阅读块悬停高亮

vscode/webview-ui/src/codeReader/codeReader.css

@@ -52,21 +52,27 @@ body.vscode-high-contrast-light {
   --cr-kind-comment: #008000;
 }
 
-/* 种类颜色：同一类语义共用一个颜色，标签文字区分具体是哪种 */
-.cr-block[data-kind="import"] { --kind: var(--cr-kind-import); }
-.cr-block[data-kind="function"] { --kind: var(--cr-kind-function); }
-.cr-block:is([data-kind="class"], [data-kind="type"]) { --kind: var(--cr-kind-type); }
-.cr-block:is([data-kind="field"], [data-kind="const"], [data-kind="variable"]) { --kind: var(--cr-kind-data); }
-.cr-block:is([data-kind="if"], [data-kind="else"]) { --kind: var(--cr-kind-branch); }
-.cr-block[data-kind="loop"] { --kind: var(--cr-kind-loop); }
-.cr-block:is([data-kind="try"], [data-kind="catch"], [data-kind="finally"]) { --kind: var(--cr-kind-error); }
-.cr-block[data-kind="return"] { --kind: var(--cr-kind-return); }
-.cr-block[data-kind="statement"] { --kind: var(--cr-kind-statement); }
-.cr-block[data-kind="comment"] { --kind: var(--cr-kind-comment); }
+/* 种类颜色：同一类语义共用一个颜色，标签文字区分具体是哪种。卡片取自己的种类，子层取所属块的种类 */
+[data-kind="import"] { --kind: var(--cr-kind-import); }
+[data-kind="function"] { --kind: var(--cr-kind-function); }
+:is([data-kind="class"], [data-kind="type"]) { --kind: var(--cr-kind-type); }
+:is([data-kind="field"], [data-kind="const"], [data-kind="variable"]) { --kind: var(--cr-kind-data); }
+:is([data-kind="if"], [data-kind="else"]) { --kind: var(--cr-kind-branch); }
+[data-kind="loop"] { --kind: var(--cr-kind-loop); }
+:is([data-kind="try"], [data-kind="catch"], [data-kind="finally"]) { --kind: var(--cr-kind-error); }
+[data-kind="return"] { --kind: var(--cr-kind-return); }
+[data-kind="statement"] { --kind: var(--cr-kind-statement); }
+[data-kind="comment"] { --kind: var(--cr-kind-comment); }
 
+/* 卡片和它的子层是相邻兄弟，:hover 只落在鼠标下最里面那张卡片上，父卡片不跟着亮 */
 .cr-block {
   background: color-mix(in srgb, var(--kind) 7%, transparent);
   border: 1px solid color-mix(in srgb, var(--kind) 35%, transparent);
+  transition: background-color 100ms ease-out, border-color 100ms ease-out;
+}
+.cr-block:hover {
+  background: color-mix(in srgb, var(--kind) 14%, transparent);
+  border-color: var(--kind);
 }
 .cr-block[data-kind="comment"] {
   border-style: dashed;
@@ -75,6 +81,26 @@ body.vscode-high-contrast-light {
   background: var(--vscode-editor-background);
   border-color: var(--vscode-focusBorder);
 }
+.cr-block[data-editing]:hover {
+  background: color-mix(in srgb, var(--kind) 7%, var(--vscode-editor-background));
+}
+
+/* 层级竖线：悬停一个块时，它子层的竖线换成它的种类色，标出这个块管到哪里为止 */
+.cr-guide {
+  background: var(--vscode-editorIndentGuide-background1);
+  transition: background-color 100ms ease-out;
+}
+.cr-block:hover + .cr-level > * > .cr-guide {
+  background: var(--kind);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cr-block,
+  .cr-guide {
+    transition: none;
+  }
+}
+
 .cr-badge {
   color: var(--kind);
   background: color-mix(in srgb, var(--kind) 18%, transparent);