1284 lines
40 KiB
CSS
1284 lines
40 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* 词性与块种类的配色：暗色（含高对比）取 VS Code Dark+，亮色取 Light+。其余界面颜色一律用 --vscode-* 变量。 */
|
||
body {
|
||
--cr-keyword: #c586c0;
|
||
--cr-storage: #569cd6;
|
||
--cr-variable: #9cdcfe;
|
||
--cr-function: #dcdcaa;
|
||
--cr-type: #4ec9b0;
|
||
--cr-string: #ce9178;
|
||
--cr-number: #b5cea8;
|
||
--cr-comment: #6a9955;
|
||
--cr-constant: #4fc1ff;
|
||
|
||
--cr-kind-import: #c586c0;
|
||
--cr-kind-function: #dcdcaa;
|
||
--cr-kind-type: #4ec9b0;
|
||
--cr-kind-enum: #b180d7;
|
||
--cr-kind-exception: #f14c4c;
|
||
--cr-kind-data: #9cdcfe;
|
||
--cr-kind-branch: #ce9178;
|
||
--cr-kind-loop: #8f9cff;
|
||
--cr-kind-error: #f48771;
|
||
--cr-kind-return: #89d185;
|
||
--cr-kind-statement: #9d9d9d;
|
||
--cr-kind-comment: #6a9955;
|
||
--cr-kind-options: #e5c07b;
|
||
--cr-kind-command: #d7ba7d;
|
||
--cr-kind-stage: #56b6c2;
|
||
|
||
margin: 0;
|
||
font-family: var(--vscode-font-family, system-ui, sans-serif);
|
||
font-size: var(--vscode-font-size, 13px);
|
||
color: var(--vscode-foreground);
|
||
background: var(--vscode-editor-background);
|
||
}
|
||
|
||
body.vscode-light,
|
||
body.vscode-high-contrast-light {
|
||
--cr-keyword: #af00db;
|
||
--cr-storage: #0000ff;
|
||
--cr-variable: #001080;
|
||
--cr-function: #795e26;
|
||
--cr-type: #267f99;
|
||
--cr-string: #a31515;
|
||
--cr-number: #098658;
|
||
--cr-comment: #008000;
|
||
--cr-constant: #0070c1;
|
||
|
||
--cr-kind-import: #af00db;
|
||
--cr-kind-function: #795e26;
|
||
--cr-kind-type: #267f99;
|
||
--cr-kind-enum: #652d90;
|
||
--cr-kind-exception: #cd3131;
|
||
--cr-kind-data: #001080;
|
||
--cr-kind-branch: #a31515;
|
||
--cr-kind-loop: #4f56d6;
|
||
--cr-kind-error: #b5452f;
|
||
--cr-kind-return: #388a34;
|
||
--cr-kind-statement: #6f6f6f;
|
||
--cr-kind-comment: #008000;
|
||
--cr-kind-options: #9a6a00;
|
||
--cr-kind-command: #7c5f12;
|
||
--cr-kind-stage: #127f8c;
|
||
}
|
||
|
||
/* 种类颜色：同一类语义共用一个颜色，图标区分具体是哪种（kindIcons.tsx）。卡片取自己的种类，子层取所属块的种类 */
|
||
:is([data-kind="import"], [data-kind="copy"]) { --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); }
|
||
[data-kind="trait"] { --kind: var(--cr-storage); }
|
||
[data-kind="attribute"] { --kind: var(--cr-constant); }
|
||
[data-kind="impl"] { --kind: var(--cr-kind-function); }
|
||
[data-kind="enum"] { --kind: var(--cr-kind-enum); }
|
||
[data-kind="exception"] { --kind: var(--cr-kind-exception); }
|
||
:is([data-kind="field"], [data-kind="const"], [data-kind="variable"], [data-kind="label"]) { --kind: var(--cr-kind-data); }
|
||
:is([data-kind="if"], [data-kind="else"], [data-kind="case"]) { --kind: var(--cr-kind-branch); }
|
||
:is([data-kind="stage"], [data-kind="module"]) { --kind: var(--cr-kind-stage); }
|
||
[data-kind="loop"] { --kind: var(--cr-kind-loop); }
|
||
:is([data-kind="try"], [data-kind="catch"], [data-kind="finally"], [data-kind="health"]) { --kind: var(--cr-kind-error); }
|
||
:is([data-kind="return"], [data-kind="start"]) { --kind: var(--cr-kind-return); }
|
||
:is([data-kind="statement"], [data-kind="interpreter"], [data-kind="directive"]) { --kind: var(--cr-kind-statement); }
|
||
[data-kind="comment"] { --kind: var(--cr-kind-comment); }
|
||
:is([data-kind="options"], [data-kind="setting"]) { --kind: var(--cr-kind-options); }
|
||
:is([data-kind="command"], [data-kind="pipeline"], [data-kind="run"]) { --kind: var(--cr-kind-command); }
|
||
/* 库规则认领的块：颜色由规则给，暗色、亮色两个写在元素的 style 上（--kind-dark / --kind-light），这里按主题挑 */
|
||
[data-badge] { --kind: var(--kind-dark); }
|
||
body:is(.vscode-light, .vscode-high-contrast-light) [data-badge] { --kind: var(--kind-light); }
|
||
|
||
/* 卡片和它的子层是相邻兄弟，: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;
|
||
}
|
||
.cr-block[data-editing] {
|
||
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-tool {
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-tool:hover {
|
||
background: var(--vscode-toolbar-hoverBackground);
|
||
}
|
||
.cr-tool[data-active] {
|
||
background: var(--vscode-toolbar-activeBackground);
|
||
}
|
||
.cr-tool:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: -1px;
|
||
}
|
||
.cr-tool:disabled {
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* 层级竖线：悬停一个块时，它子层的竖线换成它的种类色，标出这个块管到哪里为止（块和子层中间隔着问答区也算） */
|
||
.cr-guide {
|
||
background: var(--vscode-editorIndentGuide-background1);
|
||
transition: background-color 100ms ease-out;
|
||
}
|
||
.cr-block:hover + .cr-level > * > .cr-guide,
|
||
.cr-block:hover + .cr-qa + .cr-level > * > .cr-guide,
|
||
.cr-block:hover + .cr-qa + .cr-qa + .cr-level > * > .cr-guide {
|
||
background: var(--kind);
|
||
}
|
||
|
||
/* 属性行、子行平时看不出边框；往外扩出一圈，跳到定义只闪它时亮起来不贴着字，排版不动 */
|
||
.cr-prop-row,
|
||
.cr-prop-item {
|
||
margin: -1px -4px;
|
||
padding: 0 3px;
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 跳到定义的目标（整块、属性表里的一行 / 子行，或定义处那个名字）：边框和底色往聚焦色闪三下（共 1.5 秒）再复原；减少动态效果时改成静止高亮同样长的时间 */
|
||
@keyframes cr-flash {
|
||
50% {
|
||
background: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
}
|
||
@keyframes cr-flash-still {
|
||
from, to {
|
||
background: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
}
|
||
:is(.cr-block, .cr-prop-row, .cr-prop-item, [data-offset])[data-flash] {
|
||
animation: cr-flash 500ms ease-in-out 3;
|
||
}
|
||
/* 表格里的一行（参数）：边框是和相邻行共用的分隔线，改用画在行里面的一圈聚焦色 */
|
||
@keyframes cr-flash-row {
|
||
50% {
|
||
background: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
|
||
box-shadow: inset 0 0 0 1px var(--vscode-focusBorder);
|
||
}
|
||
}
|
||
@keyframes cr-flash-row-still {
|
||
from, to {
|
||
background: color-mix(in srgb, var(--vscode-focusBorder) 25%, transparent);
|
||
box-shadow: inset 0 0 0 1px var(--vscode-focusBorder);
|
||
}
|
||
}
|
||
.cr-table-row[data-flash] {
|
||
animation: cr-flash-row 500ms ease-in-out 3;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.cr-block,
|
||
.cr-guide {
|
||
transition: none;
|
||
}
|
||
:is(.cr-block, .cr-prop-row, .cr-prop-item, [data-offset])[data-flash] {
|
||
animation: cr-flash-still 1500ms;
|
||
}
|
||
.cr-table-row[data-flash] {
|
||
animation: cr-flash-row-still 1500ms;
|
||
}
|
||
}
|
||
|
||
.cr-kind {
|
||
color: var(--kind);
|
||
}
|
||
|
||
/* 译文和源码共用的文字排版；源码编辑时输入框和着色层都用它，两层逐字对齐 */
|
||
.cr-code {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
font-family: var(--vscode-editor-font-family, monospace), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||
font-size: var(--vscode-editor-font-size, 12.5px);
|
||
font-weight: var(--vscode-editor-font-weight, normal);
|
||
line-height: 20px;
|
||
letter-spacing: 0;
|
||
tab-size: 4;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: break-word;
|
||
color: var(--vscode-editor-foreground);
|
||
}
|
||
|
||
.cr-role-keyword { color: var(--cr-keyword); }
|
||
.cr-role-storage,
|
||
.cr-role-operator { color: var(--cr-storage); }
|
||
.cr-role-variable { color: var(--cr-variable); }
|
||
.cr-role-constant { color: var(--cr-constant); }
|
||
.cr-role-function { color: var(--cr-function); }
|
||
.cr-role-type { color: var(--cr-type); }
|
||
.cr-role-string { color: var(--cr-string); }
|
||
.cr-role-number,
|
||
.cr-role-literal { color: var(--cr-number); }
|
||
.cr-role-comment { color: var(--cr-comment); }
|
||
.cr-role-hint { color: var(--vscode-descriptionForeground); }
|
||
/* 带自己颜色的词（Segment.color，库规则按库的配色给）：暗色、亮色两个写在元素的 style 上，这里按主题挑，盖过词性的颜色 */
|
||
.cr-colored { color: var(--color-dark); }
|
||
body:is(.vscode-light, .vscode-high-contrast-light) .cr-colored { color: var(--color-light); }
|
||
|
||
/* 注释块、函数说明的 Markdown：正文界面字体、注释色，和属性名一样的行高；代码用编辑器字体、垫代码块底色。
|
||
间距压紧：一行注释和一行译文一样高，标题只比正文稍大 */
|
||
.cr-markdown {
|
||
font-family: var(--vscode-font-family, system-ui, sans-serif), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||
font-size: var(--vscode-font-size, 13px);
|
||
line-height: 20px;
|
||
color: var(--cr-comment);
|
||
overflow-wrap: break-word;
|
||
}
|
||
.cr-markdown :is(p, ul, ol, pre, blockquote, table, h1, h2, h3, h4, h5, h6, hr) {
|
||
margin: 0 0 6px;
|
||
}
|
||
.cr-markdown :is(li, blockquote) > :last-child,
|
||
.cr-markdown > :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.cr-markdown :is(ul, ol) {
|
||
padding-left: 20px;
|
||
}
|
||
.cr-markdown ul { list-style: disc; }
|
||
.cr-markdown ol { list-style: decimal; }
|
||
.cr-markdown :is(ul, ol) ul { list-style: circle; }
|
||
.cr-markdown :is(h1, h2, h3, h4, h5, h6) {
|
||
font-size: 1em;
|
||
font-weight: 600;
|
||
}
|
||
.cr-markdown h1 { font-size: 1.15em; }
|
||
.cr-markdown h2 { font-size: 1.08em; }
|
||
/* 行内代码换了字体，行高压成 1 才不把这一行撑高 */
|
||
.cr-markdown code {
|
||
padding: 1px 4px;
|
||
border-radius: 3px;
|
||
font-family: var(--vscode-editor-font-family, monospace), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
|
||
font-size: 1em;
|
||
line-height: 1;
|
||
background: var(--vscode-textCodeBlock-background);
|
||
}
|
||
.cr-markdown pre {
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
background: var(--vscode-textCodeBlock-background);
|
||
white-space: pre-wrap;
|
||
tab-size: 4;
|
||
}
|
||
.cr-markdown pre code {
|
||
padding: 0;
|
||
font-size: var(--vscode-editor-font-size, 12.5px);
|
||
line-height: inherit;
|
||
background: none;
|
||
}
|
||
.cr-markdown a {
|
||
color: var(--vscode-textLink-foreground);
|
||
text-decoration: none;
|
||
}
|
||
.cr-markdown a:hover {
|
||
color: var(--vscode-textLink-activeForeground);
|
||
text-decoration: underline;
|
||
}
|
||
/* 仓库链接指的文件或符号不在：红色波浪线，悬停「找不到」（data-tooltip） */
|
||
.cr-markdown a.cr-link-broken,
|
||
.cr-markdown a.cr-link-broken:hover {
|
||
color: var(--vscode-errorForeground);
|
||
text-decoration: underline wavy;
|
||
text-underline-offset: 2px;
|
||
}
|
||
/* 仓库图片：按原图比例，宽不超过注释区。点了是仓库链接，打开原图 */
|
||
.cr-markdown .cr-repo-image img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
.cr-markdown .cr-repo-image a,
|
||
.cr-markdown .cr-repo-image a:hover {
|
||
text-decoration: none;
|
||
}
|
||
.cr-markdown blockquote {
|
||
padding: 0 8px;
|
||
border-left: 3px solid var(--vscode-textBlockQuote-border);
|
||
background: var(--vscode-textBlockQuote-background);
|
||
}
|
||
.cr-markdown table {
|
||
border-collapse: collapse;
|
||
}
|
||
.cr-markdown :is(th, td) {
|
||
padding: 0 8px;
|
||
border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||
}
|
||
.cr-markdown th {
|
||
font-weight: 600;
|
||
text-align: left;
|
||
}
|
||
.cr-markdown hr {
|
||
border: 0;
|
||
border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
|
||
}
|
||
|
||
/* 起了中文名的定义处：中文名后面淡淡写原名，字小一号，悬停看完整的「原名 x」 */
|
||
.cr-original {
|
||
margin-left: 0.4em;
|
||
font-size: 0.86em;
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
|
||
/*
|
||
* 悬停名字、链接时的定义卡片浮窗：外框同 VS Code 编辑器的悬停框（边框、底色、阴影），标题一行垫悬停框状态栏的底色。
|
||
* 落位时按剩下的空间限宽高（行内样式），卡片再大就在下面那块里滚；那块自己也有个上限，大文件的类不至于占满半屏。
|
||
* 层级低于悬停提示（z-50），浮窗里名字的提示照样盖在它上面
|
||
*/
|
||
.cr-peek {
|
||
position: fixed;
|
||
z-index: 40;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border));
|
||
border-radius: 6px;
|
||
background: var(--vscode-editorHoverWidget-background, var(--vscode-editorWidget-background));
|
||
color: var(--vscode-editorHoverWidget-foreground, var(--vscode-foreground));
|
||
box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgb(0 0 0 / 36%));
|
||
}
|
||
.cr-peek-head {
|
||
flex-shrink: 0;
|
||
padding: 2px 8px;
|
||
border-bottom: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border));
|
||
background: var(--vscode-editorHoverWidget-statusBarBackground, transparent);
|
||
color: var(--vscode-textLink-foreground);
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
cursor: pointer;
|
||
}
|
||
.cr-peek-head:hover {
|
||
color: var(--vscode-textLink-activeForeground);
|
||
text-decoration: underline;
|
||
}
|
||
.cr-peek-head:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: -1px;
|
||
}
|
||
.cr-peek-body {
|
||
min-height: 0;
|
||
max-width: 640px;
|
||
max-height: 420px;
|
||
overflow: auto;
|
||
padding: 6px 8px 6px 0;
|
||
}
|
||
|
||
/* 按住 ⌘ / Ctrl 停在查得到定义的名字上：和编辑器里的链接一样 */
|
||
.cr-code [data-link] {
|
||
color: var(--vscode-editorLink-activeForeground);
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/*
|
||
* 单击名字高亮它在文件里的各处出现：颜色取 VS Code 编辑器的单词高亮，写入（定义、赋值）用强高亮色，读取和按文字认出的用普通高亮色；
|
||
* 主题给了边框色（高对比主题）才描边。很多主题没配单词高亮色，默认的灰底很淡，所以再用 focusBorder 色补一笔：
|
||
* 各处底下一条细线，当前那一处（点中的、用键盘跳到的）描一圈框。筛选栏上「名字 · 2/5」的名字也按普通高亮画。
|
||
* 线和框都画在字框里面，不挤动排版；细线用内阴影画，不占 text-decoration（⌘ 指着名字时的链接下划线用它）
|
||
*/
|
||
[data-occurrence] {
|
||
outline-offset: -1px;
|
||
box-shadow: inset 0 -1px 0 var(--vscode-focusBorder);
|
||
}
|
||
[data-occurrence="normal"] {
|
||
background: var(--vscode-editor-wordHighlightBackground);
|
||
outline: 1px solid var(--vscode-editor-wordHighlightBorder, transparent);
|
||
}
|
||
[data-occurrence="strong"] {
|
||
background: var(--vscode-editor-wordHighlightStrongBackground);
|
||
outline: 1px solid var(--vscode-editor-wordHighlightStrongBorder, transparent);
|
||
}
|
||
[data-occurrence][data-current] {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
box-shadow: none;
|
||
}
|
||
.cr-occurrence-name {
|
||
padding: 0 3px;
|
||
color: var(--vscode-editor-foreground);
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
}
|
||
|
||
/* 属性表的属性名：界面字体，和值一样的行高，两边逐行对齐 */
|
||
.cr-prop-label {
|
||
font-size: 12.5px;
|
||
line-height: 20px;
|
||
color: var(--vscode-descriptionForeground);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/*
|
||
* 框起来的一组词（写在表达式里的遍历）：嵌在译文里的小框，框头是图标和 label，边框、底色、框头取框的样式色（遍历同「循环」块）。
|
||
* 整个框放不下时挪到下一行，比一行还长时占满一行、在框里换行。上下边框算在行高里：框和前后文字顶部对齐、基线对齐，不把这一行撑高；
|
||
* 框里再套的框行高再减 2px，同样不撑高外面那个框的行
|
||
*/
|
||
.cr-group[data-style="iteration"] { --group: var(--cr-kind-loop); }
|
||
.cr-group {
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
padding: 0 5px;
|
||
line-height: 18px;
|
||
vertical-align: top;
|
||
border: 1px solid color-mix(in srgb, var(--group) 45%, transparent);
|
||
border-radius: 4px;
|
||
background: color-mix(in srgb, var(--group) 14%, transparent);
|
||
}
|
||
.cr-group .cr-group {
|
||
line-height: 16px;
|
||
}
|
||
.cr-group-head {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
margin-right: 6px;
|
||
vertical-align: top;
|
||
font-family: var(--vscode-font-family, system-ui, sans-serif), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--group);
|
||
white-space: nowrap;
|
||
}
|
||
/* 只有图标的框头（渲染大纲一行前面的「当 … 时」）：图标和后面的字贴近一点；框里没有词时（小标签、类名）框头后面不留空 */
|
||
.cr-group-head[data-bare] {
|
||
margin-right: 4px;
|
||
}
|
||
.cr-group-head:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
/*
|
||
* 渲染大纲一行前面的小框（React 渲染输出卡片）：按条件、条件的一支同「条件」块的颜色；
|
||
* 小标签（名称后面的「具名导出」、属性名后面的「回调」）用规则给的颜色（暗色、亮色各一个，按主题挑）
|
||
*/
|
||
.cr-group:is([data-style="condition"], [data-style="branch"]) { --group: var(--cr-kind-branch); }
|
||
.cr-group[data-colored] { --group: var(--group-dark); }
|
||
body:is(.vscode-light, .vscode-high-contrast-light) .cr-group[data-colored] { --group: var(--group-light); }
|
||
.cr-group[data-style="tag"] {
|
||
line-height: 16px;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
/*
|
||
* 收起来的一串类名（「样式 N 个类」）：中性色的小框，是个按钮；点开时换成焦点色的边、在下面弹出全部类名，
|
||
* 弹层盖住后面的字，不挤开它们
|
||
*/
|
||
.cr-group[data-style="classes"] {
|
||
margin: 0;
|
||
font: inherit;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
background: var(--vscode-input-background);
|
||
border-color: var(--vscode-editorWidget-border, var(--vscode-contrastBorder, transparent));
|
||
}
|
||
.cr-group[data-style="classes"] .cr-group-head {
|
||
font-weight: 400;
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-group[data-style="classes"]:hover,
|
||
.cr-group[data-style="classes"][data-open] {
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-group[data-style="classes"][data-open] .cr-group-head {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-classes {
|
||
position: relative;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
.cr-classes-popup {
|
||
position: absolute;
|
||
top: calc(100% + 2px);
|
||
left: 0;
|
||
z-index: 20;
|
||
width: max-content;
|
||
max-width: min(460px, 70vw);
|
||
padding: 6px 8px;
|
||
border: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border));
|
||
border-radius: 6px;
|
||
background: var(--vscode-editorHoverWidget-background, var(--vscode-editorWidget-background));
|
||
box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgb(0 0 0 / 36%));
|
||
color: var(--vscode-editorHoverWidget-foreground, var(--vscode-foreground));
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/*
|
||
* 属性表里带列名的子行（输入参数、数据表的字段）排成的表格：外框圆角，格子之间、行之间一条主题的表格分隔线；
|
||
* 表头垫主题的表头底色（比编辑区深一档或浅一档）、列名用说明色。
|
||
* 整张表格一个网格、每行借用它的列（subgrid），列宽按整列的内容定，见 tableTemplate
|
||
*/
|
||
.cr-table {
|
||
--cr-table-border: var(--vscode-tree-tableColumnsBorder, var(--vscode-editorWidget-border, var(--vscode-contrastBorder)));
|
||
display: grid;
|
||
border: 1px solid var(--cr-table-border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.cr-table-head,
|
||
.cr-table-row {
|
||
display: grid;
|
||
grid-column: 1 / -1;
|
||
grid-template-columns: subgrid;
|
||
}
|
||
.cr-table-head {
|
||
background: var(--vscode-keybindingTable-headerBackground, color-mix(in srgb, var(--vscode-foreground) 5%, transparent));
|
||
}
|
||
.cr-table-row {
|
||
border-top: 1px solid var(--cr-table-border);
|
||
}
|
||
/* 讲某个子块的行（Rust 实现块的方法表）：第一格是按钮，悬停划下划线；展开时这一行淡淡垫上那一块的种类色 */
|
||
.cr-table-row[data-open] {
|
||
background: color-mix(in srgb, var(--kind) 10%, transparent);
|
||
}
|
||
.cr-item-toggle {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
background: none;
|
||
font: inherit;
|
||
color: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
.cr-item-toggle:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 在卡片属性表某一行下面展开的子块（Rust 实现块展开的方法）：和表格一样往里缩一点 */
|
||
.cr-slot {
|
||
padding-left: 5px;
|
||
}
|
||
.cr-table .cr-table-cell {
|
||
padding: 2px 8px;
|
||
}
|
||
.cr-table .cr-table-cell + .cr-table-cell {
|
||
border-left: 1px solid var(--cr-table-border);
|
||
}
|
||
.cr-table-head .cr-table-cell {
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
color: var(--vscode-descriptionForeground);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 编辑：透明输入框垫在底下接收输入和选区，着色层盖在上面只负责显示，高度由着色层撑开 */
|
||
.cr-editor {
|
||
position: relative;
|
||
}
|
||
.cr-editor > textarea {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
resize: none;
|
||
overflow: hidden;
|
||
outline: none;
|
||
background: transparent;
|
||
color: transparent;
|
||
caret-color: var(--vscode-editorCursor-foreground);
|
||
}
|
||
.cr-editor > textarea::selection {
|
||
color: transparent;
|
||
background: var(--vscode-editor-selectionBackground);
|
||
}
|
||
.cr-editor > pre {
|
||
position: relative;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 筛选栏：钉在预览顶部、横贯整个编辑区，里面的内容和代码块同宽对齐；打开的下拉菜单盖在代码块上面 */
|
||
.cr-filter-bar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
background: var(--vscode-editor-background);
|
||
border-bottom: 1px solid var(--vscode-panel-border, transparent);
|
||
}
|
||
.cr-chip {
|
||
color: var(--vscode-dropdown-foreground, var(--vscode-foreground));
|
||
background: var(--vscode-dropdown-background);
|
||
border: 1px solid var(--vscode-dropdown-border, var(--vscode-dropdown-background));
|
||
}
|
||
.cr-chip[data-active] {
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-chip:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: -1px;
|
||
}
|
||
.cr-menu {
|
||
color: var(--vscode-editorWidget-foreground, var(--vscode-foreground));
|
||
background: var(--vscode-editorWidget-background);
|
||
border: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border, transparent));
|
||
box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgb(0 0 0 / 36%));
|
||
}
|
||
.cr-menu-divider {
|
||
background: var(--vscode-menu-separatorBackground, var(--vscode-editorWidget-border, var(--vscode-panel-border)));
|
||
}
|
||
.cr-menu-list {
|
||
outline: none;
|
||
}
|
||
.cr-option[data-active] {
|
||
background: var(--vscode-list-hoverBackground);
|
||
}
|
||
/* 键盘在列表里走时，高亮项再描一圈聚焦色 */
|
||
.cr-menu-list:focus-visible .cr-option[data-active] {
|
||
outline: 1px solid var(--vscode-list-focusOutline, var(--vscode-focusBorder));
|
||
outline-offset: -1px;
|
||
}
|
||
.cr-check {
|
||
border: 1px solid var(--vscode-checkbox-border, var(--vscode-editorLineNumber-foreground));
|
||
border-radius: 3px;
|
||
background: var(--vscode-checkbox-background, transparent);
|
||
}
|
||
.cr-check[data-checked] {
|
||
color: var(--vscode-button-foreground, #fff);
|
||
background: var(--vscode-focusBorder);
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-option-count {
|
||
color: var(--vscode-editorLineNumber-foreground);
|
||
}
|
||
.cr-link {
|
||
color: var(--vscode-textLink-foreground);
|
||
}
|
||
.cr-link:hover {
|
||
color: var(--vscode-textLink-activeForeground);
|
||
text-decoration: underline;
|
||
}
|
||
.cr-link:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: 1px;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 跳到定义临时露出来的、本来被筛掉的块：右边一个小提示 */
|
||
.cr-temporary {
|
||
color: var(--vscode-descriptionForeground);
|
||
background: color-mix(in srgb, var(--vscode-focusBorder) 15%, transparent);
|
||
}
|
||
|
||
/* 问 AI：块下面的问答区，左边一条链接色竖线；问过的灰字，当前这一轮照常颜色 */
|
||
.cr-qa {
|
||
--qa-accent: var(--vscode-textLink-foreground);
|
||
--qa-dim: color-mix(in srgb, var(--vscode-descriptionForeground) 75%, transparent);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 6px 10px 6px 12px;
|
||
border-left: 2px solid color-mix(in srgb, var(--qa-accent) 50%, transparent);
|
||
font-family: var(--vscode-font-family, system-ui, sans-serif), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||
font-size: 12.5px;
|
||
line-height: 18px;
|
||
}
|
||
.cr-qa[data-collapsed] {
|
||
gap: 6px;
|
||
padding-top: 2px;
|
||
padding-bottom: 2px;
|
||
}
|
||
.cr-qa-entry {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
.cr-qa-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
.cr-qa-icon {
|
||
flex-shrink: 0;
|
||
color: var(--qa-dim);
|
||
}
|
||
.cr-qa-entry[data-current] .cr-qa-icon {
|
||
color: var(--qa-accent);
|
||
}
|
||
.cr-qa-question {
|
||
min-width: 0;
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
.cr-qa-entry[data-history] .cr-qa-question {
|
||
overflow: hidden;
|
||
color: var(--vscode-descriptionForeground);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.cr-qa-entry[data-current] .cr-qa-question {
|
||
color: var(--vscode-foreground);
|
||
font-weight: 500;
|
||
}
|
||
.cr-qa-when {
|
||
flex-shrink: 0;
|
||
color: var(--qa-dim);
|
||
font-size: 11px;
|
||
line-height: 16px;
|
||
}
|
||
.cr-qa-delete {
|
||
display: flex;
|
||
width: 22px;
|
||
height: 18px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
color: var(--qa-dim);
|
||
}
|
||
.cr-qa-delete:hover {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
/* 回答的前两行，和回答正文一样往右缩到问题下面 */
|
||
.cr-qa-preview {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
padding-left: 18px;
|
||
color: var(--qa-dim);
|
||
font-size: 12px;
|
||
line-height: 18px;
|
||
text-align: left;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.cr-qa-answer {
|
||
padding-left: 18px;
|
||
font-size: 12.5px;
|
||
}
|
||
.cr-qa .cr-markdown.cr-qa-answer {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa .cr-qa-entry[data-history] .cr-markdown.cr-qa-answer {
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
/* 回答还在长：最后一段末尾一个闪的光标 */
|
||
.cr-qa-answer[data-streaming] > :last-child::after {
|
||
content: "▍";
|
||
margin-left: 1px;
|
||
color: var(--qa-accent);
|
||
animation: cr-qa-blink 1s steps(1) infinite;
|
||
}
|
||
@keyframes cr-qa-blink {
|
||
50% { opacity: 0; }
|
||
}
|
||
.cr-qa-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding-left: 18px;
|
||
color: var(--vscode-descriptionForeground);
|
||
font-size: 11.5px;
|
||
}
|
||
.cr-qa-spin {
|
||
animation: cr-qa-spin 900ms linear infinite;
|
||
}
|
||
@keyframes cr-qa-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
.cr-qa-error {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-left: 18px;
|
||
padding: 4px 8px;
|
||
border: 1px solid var(--vscode-inputValidation-errorBorder);
|
||
border-radius: 4px;
|
||
background: var(--vscode-inputValidation-errorBackground);
|
||
color: var(--vscode-foreground);
|
||
font-size: 12px;
|
||
}
|
||
.cr-qa-error > svg {
|
||
color: var(--vscode-errorForeground);
|
||
}
|
||
.cr-qa-divider {
|
||
border: 0;
|
||
border-top: 1px solid color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
|
||
}
|
||
/* 问题带的图片：一排 40px 的缩略图，和回答一样往右缩到问题下面；贴了还没发的在输入框上面，右上角有「去掉」 */
|
||
.cr-qa-thumbs {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
padding: 2px 0 2px 18px;
|
||
}
|
||
.cr-qa-thumbs[data-pending] {
|
||
padding: 6px 0 0;
|
||
}
|
||
.cr-qa-thumb {
|
||
position: relative;
|
||
display: flex;
|
||
}
|
||
.cr-qa-thumb-open {
|
||
display: flex;
|
||
overflow: hidden;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid color-mix(in srgb, var(--vscode-foreground) 18%, transparent);
|
||
border-radius: 4px;
|
||
background: var(--vscode-editor-background);
|
||
cursor: zoom-in;
|
||
}
|
||
.cr-qa-thumb-open img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.cr-qa-thumb-open:hover {
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-qa-entry[data-history] .cr-qa-thumb-open img {
|
||
opacity: 0.7;
|
||
}
|
||
.cr-qa-entry[data-history] .cr-qa-thumb-open:hover img {
|
||
opacity: 1;
|
||
}
|
||
.cr-qa-thumb-remove {
|
||
position: absolute;
|
||
top: -6px;
|
||
right: -6px;
|
||
display: flex;
|
||
width: 16px;
|
||
height: 16px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--vscode-widget-border, color-mix(in srgb, var(--vscode-foreground) 25%, transparent));
|
||
border-radius: 50%;
|
||
background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-qa-thumb-remove:hover {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa-thumb-open:focus-visible,
|
||
.cr-qa-thumb-remove:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: 1px;
|
||
}
|
||
.cr-qa-notice {
|
||
color: var(--vscode-editorWarning-foreground, var(--vscode-descriptionForeground));
|
||
font-size: 11.5px;
|
||
}
|
||
/* 看大图：盖住整个预览，图片按比例放到最大，右上角「关闭」 */
|
||
.cr-qa-lightbox {
|
||
position: fixed;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32px;
|
||
background: rgb(0 0 0 / 65%);
|
||
cursor: zoom-out;
|
||
inset: 0;
|
||
}
|
||
.cr-qa-lightbox img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
border-radius: 4px;
|
||
box-shadow: 0 6px 28px rgb(0 0 0 / 45%);
|
||
object-fit: contain;
|
||
}
|
||
.cr-qa-lightbox-close {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
display: flex;
|
||
width: 28px;
|
||
height: 28px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--vscode-widget-border, transparent);
|
||
border-radius: 4px;
|
||
background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa-lightbox-close:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: 1px;
|
||
}
|
||
.cr-qa-input {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 6px;
|
||
padding: 4px 4px 4px 8px;
|
||
border: 1px solid var(--vscode-input-border, color-mix(in srgb, var(--vscode-foreground) 20%, transparent));
|
||
border-radius: 4px;
|
||
background: var(--vscode-input-background);
|
||
}
|
||
.cr-qa-input:focus-within {
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-qa-input textarea {
|
||
min-width: 0;
|
||
max-height: 160px;
|
||
flex: 1;
|
||
padding: 1px 0;
|
||
border: 0;
|
||
outline: none;
|
||
background: transparent;
|
||
color: var(--vscode-input-foreground);
|
||
font: inherit;
|
||
resize: none;
|
||
field-sizing: content;
|
||
}
|
||
.cr-qa-input textarea::placeholder {
|
||
color: var(--vscode-input-placeholderForeground);
|
||
}
|
||
.cr-qa-input .cr-tool {
|
||
display: flex;
|
||
width: 24px;
|
||
height: 20px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
}
|
||
.cr-qa-input .cr-tool:disabled {
|
||
opacity: 0.4;
|
||
}
|
||
/* 发送按钮前面的 profile 下拉：只占名字那么宽，长名字截断，输入框还是主角；字号同弹出的选项（弹层按它量宽） */
|
||
.cr-qa-input .cr-qa-profile {
|
||
height: 20px;
|
||
max-width: 140px;
|
||
flex-shrink: 0;
|
||
padding: 0 4px 0 6px;
|
||
border-radius: 4px;
|
||
color: var(--vscode-descriptionForeground);
|
||
font-size: 12px;
|
||
}
|
||
.cr-qa-input .cr-qa-profile:hover {
|
||
background: var(--vscode-toolbar-hoverBackground);
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa-input .cr-qa-profile[aria-expanded="true"] {
|
||
background: var(--vscode-toolbar-activeBackground);
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa-input .cr-qa-profile:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: -1px;
|
||
}
|
||
.cr-qa-summary {
|
||
display: inline-flex;
|
||
width: fit-content;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: var(--vscode-descriptionForeground);
|
||
font-size: 12px;
|
||
}
|
||
.cr-qa-summary:hover {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa-summary:focus-visible,
|
||
.cr-qa-question:focus-visible,
|
||
.cr-qa-preview:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: 1px;
|
||
border-radius: 2px;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.cr-qa-spin,
|
||
.cr-qa-answer[data-streaming] > :last-child::after {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/*
|
||
* 代码差异：配色取 VS Code 编辑器行号旁的改动色带（新增绿、修改蓝、删除红），主题没给时用 Dark Modern 的默认值；
|
||
* 行内的字增删用 diff 编辑器的插入 / 删除文字底色
|
||
*/
|
||
body {
|
||
--cr-diff-add: var(--vscode-editorGutter-addedBackground, #2ea043);
|
||
--cr-diff-mod: var(--vscode-editorGutter-modifiedBackground, #0078d4);
|
||
--cr-diff-del: var(--vscode-editorGutter-deletedBackground, #f85149);
|
||
}
|
||
|
||
/* 卡片左边外侧的改动色条：3px 宽、和卡片等高；没变的卡片留一条透明的，同一层的卡片照样对齐 */
|
||
.cr-change-bar {
|
||
width: 3px;
|
||
flex-shrink: 0;
|
||
border-radius: 1.5px;
|
||
}
|
||
.cr-change-bar[data-change="add"] { background: var(--cr-diff-add); }
|
||
.cr-change-bar[data-change="mod"] { background: var(--cr-diff-mod); }
|
||
.cr-change-bar[data-change="del"] { background: var(--cr-diff-del); }
|
||
/* 卡片包了一层色条以后不再和子层相邻：悬停卡片时子层竖线换色改按外层认；问答区往右缩到和卡片对齐 */
|
||
.cr-change-row:has(> div > .cr-block:hover) + .cr-level > * > .cr-guide,
|
||
.cr-change-row:has(> div > .cr-block:hover) + .cr-qa + .cr-level > * > .cr-guide,
|
||
.cr-change-row:has(> div > .cr-block:hover) + .cr-qa + .cr-qa + .cr-level > * > .cr-guide {
|
||
background: var(--kind);
|
||
}
|
||
.cr-change-row + .cr-qa,
|
||
.cr-change-row + .cr-qa + .cr-qa {
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* 新增的卡片（连同它的子卡片）：底色淡绿；最外面那张左上角压着「新增」小标 */
|
||
.cr-block[data-change="add"] {
|
||
background: color-mix(in srgb, var(--cr-diff-add) 10%, transparent);
|
||
}
|
||
.cr-block[data-change="add"]:hover {
|
||
background: color-mix(in srgb, var(--cr-diff-add) 16%, transparent);
|
||
}
|
||
.cr-added-badge {
|
||
position: absolute;
|
||
top: -8px;
|
||
left: 6px;
|
||
padding: 0 5px;
|
||
border-radius: 3px;
|
||
background: var(--cr-diff-add);
|
||
color: #fff;
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
line-height: 14px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 删掉的块：红色虚线边、淡红底、半透明，没有编辑、问 AI 按钮；展开后下面是旧内容，整张划掉 */
|
||
.cr-removed {
|
||
border: 1px dashed color-mix(in srgb, var(--cr-diff-del) 80%, transparent);
|
||
background: color-mix(in srgb, var(--cr-diff-del) 6%, transparent);
|
||
opacity: 0.6;
|
||
}
|
||
.cr-block.cr-removed:hover {
|
||
border-color: var(--cr-diff-del);
|
||
background: color-mix(in srgb, var(--cr-diff-del) 10%, transparent);
|
||
opacity: 0.8;
|
||
}
|
||
.cr-removed-head {
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-removed-head:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: 1px;
|
||
border-radius: 2px;
|
||
}
|
||
.cr-removed-label {
|
||
color: var(--cr-diff-del);
|
||
}
|
||
.cr-removed-title {
|
||
color: var(--cr-function);
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
}
|
||
.cr-removed-old,
|
||
.cr-removed-old * {
|
||
text-decoration-line: line-through;
|
||
}
|
||
|
||
/* 筛选栏第二行：对比基准、改动统计、「只看改动」、上一处 / 下一处 */
|
||
.cr-diff-stat[data-change="add"] { color: var(--cr-diff-add); }
|
||
.cr-diff-stat[data-change="mod"] { color: var(--cr-diff-mod); }
|
||
.cr-diff-stat[data-change="del"] { color: var(--cr-diff-del); }
|
||
|
||
/* 基准里没有这个文件：顶部一条横幅，卡片不再逐张标绿 */
|
||
.cr-new-file {
|
||
border: 1px solid color-mix(in srgb, var(--cr-diff-add) 50%, transparent);
|
||
background: color-mix(in srgb, var(--cr-diff-add) 14%, transparent);
|
||
}
|
||
.cr-new-file > svg {
|
||
color: var(--cr-diff-add);
|
||
}
|
||
|
||
/*
|
||
* 卡片里的标记：改了的值旧值红底划掉、紧跟新值绿底（.cr-diff-part），说明里增删的字同样（.cr-diff-word，<ins> / <del>）；
|
||
* 新加的行、子行整行淡绿底、左边 +，删掉的整行淡红底、划掉、左边 −；表格的行记号写在第一格前（.cr-diff-sign）
|
||
*/
|
||
body {
|
||
--cr-diff-add-text: var(--vscode-diffEditor-insertedTextBackground, color-mix(in srgb, var(--cr-diff-add) 32%, transparent));
|
||
--cr-diff-del-text: var(--vscode-diffEditor-removedTextBackground, color-mix(in srgb, var(--cr-diff-del) 32%, transparent));
|
||
}
|
||
.cr-diff-part,
|
||
.cr-diff-word {
|
||
border-radius: 2px;
|
||
-webkit-box-decoration-break: clone;
|
||
box-decoration-break: clone;
|
||
}
|
||
:is(.cr-diff-part, .cr-diff-word)[data-change="add"],
|
||
ins.cr-diff-word {
|
||
background: var(--cr-diff-add-text);
|
||
text-decoration: none;
|
||
}
|
||
:is(.cr-diff-part, .cr-diff-word)[data-change="del"],
|
||
del.cr-diff-word {
|
||
background: var(--cr-diff-del-text);
|
||
text-decoration-line: line-through;
|
||
}
|
||
.cr-diff-part[data-change="del"] * {
|
||
text-decoration-line: line-through;
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item, .cr-table-row)[data-diff="add"] {
|
||
background: color-mix(in srgb, var(--cr-diff-add) 14%, transparent);
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item, .cr-table-row)[data-diff="del"] {
|
||
background: color-mix(in srgb, var(--cr-diff-del) 14%, transparent);
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item, .cr-table-row)[data-diff="del"] :not(.cr-diff-sign),
|
||
.cr-diff-gone,
|
||
.cr-diff-gone * {
|
||
text-decoration-line: line-through;
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item)[data-diff] {
|
||
position: relative;
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item)[data-diff]::before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: -9px;
|
||
width: 8px;
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
line-height: 20px;
|
||
text-align: center;
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item)[data-diff="add"]::before {
|
||
content: "+";
|
||
color: var(--cr-diff-add);
|
||
}
|
||
:is(.cr-prop-row, .cr-prop-item)[data-diff="del"]::before {
|
||
content: "−";
|
||
color: var(--cr-diff-del);
|
||
}
|
||
.cr-diff-sign {
|
||
display: inline-block;
|
||
width: 1.4ch;
|
||
white-space: pre;
|
||
}
|
||
.cr-diff-sign[data-change="add"] { color: var(--cr-diff-add); }
|
||
.cr-diff-sign[data-change="del"] { color: var(--cr-diff-del); }
|
||
|
||
/* 「只看改动」开关：一个小拨动开关加字，开着时底色同按下的工具按钮、开关换聚焦色 */
|
||
.cr-only-changes {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-only-changes:hover {
|
||
background: var(--vscode-toolbar-hoverBackground);
|
||
}
|
||
.cr-only-changes[aria-pressed="true"] {
|
||
background: var(--vscode-toolbar-activeBackground);
|
||
}
|
||
.cr-only-changes:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: -1px;
|
||
}
|
||
.cr-switch {
|
||
display: flex;
|
||
width: 26px;
|
||
height: 14px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
padding: 0 2px;
|
||
border: 1px solid var(--vscode-checkbox-border, var(--vscode-editorWidget-border, var(--vscode-panel-border)));
|
||
border-radius: 7px;
|
||
background: var(--vscode-input-background, transparent);
|
||
}
|
||
.cr-switch-knob {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-switch[data-on] {
|
||
justify-content: flex-end;
|
||
border-color: var(--vscode-focusBorder);
|
||
background: var(--vscode-focusBorder);
|
||
}
|
||
.cr-switch[data-on] .cr-switch-knob {
|
||
background: #fff;
|
||
}
|
||
|
||
/* 「只看改动」时连着没变的块折成的一条：虚线框，点开恢复 */
|
||
.cr-unchanged {
|
||
border: 1px dashed var(--vscode-editorWidget-border, var(--vscode-panel-border));
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-unchanged:hover {
|
||
background: var(--vscode-toolbar-hoverBackground);
|
||
}
|
||
.cr-unchanged:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: -1px;
|
||
}
|
||
|
||
/* 预览右边缘的总览条：从筛选栏下面贴到底，每处改动按它在文件里的行画一段刻度（删掉的块一条细线），点刻度跳过去 */
|
||
.cr-ruler {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 5;
|
||
width: 14px;
|
||
border-left: 1px solid var(--vscode-editorOverviewRuler-border, var(--vscode-panel-border, transparent));
|
||
background: var(--vscode-editor-background);
|
||
}
|
||
.cr-ruler-track {
|
||
position: absolute;
|
||
inset: 2px 0;
|
||
}
|
||
.cr-ruler-tick {
|
||
position: absolute;
|
||
left: 3px;
|
||
width: 8px;
|
||
min-height: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.cr-ruler-tick[data-change="add"] { background: var(--cr-diff-add); }
|
||
.cr-ruler-tick[data-change="mod"] { background: var(--cr-diff-mod); }
|
||
.cr-ruler-tick[data-change="del"] {
|
||
min-height: 2px;
|
||
height: 2px;
|
||
background: var(--cr-diff-del);
|
||
}
|
||
.cr-ruler-tick:hover,
|
||
.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;
|
||
}
|