✨ feat(vscode): 代码阅读滚进卡片的子块时把外层卡片钉在顶上,同 VS Code 的 Sticky Scroll

This commit is contained in:
cruldra committed 2026-10-08 07:17:26 +08:00
1 parent 5ce2e904f4
commit eb3d1b90cd
17 files changed
+548 -31

No files matched your search

@@ -1246,3 +1246,38 @@ del.cr-diff-word {
.cr-ruler-tick:focus-visible {
outline: 1px solid var(--vscode-focusBorder);
}
/*
* 钉在顶上的外层卡片(StickyLines.tsx,同 VS Code 编辑器的 Sticky Scroll):从筛选栏下沿往下摞,底色、悬停色、下沿的阴影同编辑器的
* (--vscode-editorStickyScroll*,主题没给时用编辑器底色、控件阴影)。最里那行被顶上去时从上一行下面滑走(层级低一级),整块跟着变矮。
* 层级在页面内容之上,低于总览条(5)、筛选栏(10)和它的下拉菜单、定义卡片浮窗(40)、下拉列表和悬停提示(50)
*/
.cr-sticky {
position: fixed;
right: 0;
left: 0;
z-index: 4;
overflow: hidden;
background: var(--vscode-editorStickyScroll-background, var(--vscode-editor-background));
box-shadow: 0 4px 2px -2px var(--vscode-editorStickyScroll-shadow, var(--vscode-widget-shadow, rgb(0 0 0 / 36%)));
}
.cr-sticky-line {
position: absolute;
right: 0;
left: 0;
z-index: 1;
background: var(--vscode-editorStickyScroll-background, var(--vscode-editor-background));
cursor: pointer;
}
.cr-sticky-line[data-last] {
z-index: 0;
}
.cr-sticky-line:hover {
background: var(--vscode-editorStickyScrollHover-background, var(--vscode-list-hoverBackground));
}
/* 标题一行放不下省略;空格照源码留着 */
.cr-sticky-title {
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
}