cruldra
86beaac371
- 钩子调用讲成状态、引用、记忆值、记忆函数、上下文值、过渡、副作用、钩子返回值、钩子调用几种卡片，行照签名表 reactHooks.ts 排，去掉 react.hook - 解构接住时名称一行写出解构，展开是「第几项 | 名称 | 说明」表，每项一个调用树操作；单个名字的按钮在名称一行最右边 - 属性表的行、子行可以带操作（RowAction），表格多一列「操作」，宿主按块记号加序号起键 - 调用树服务按键数次数，新增查所有引用（references）：按所在函数分组，去掉定义处和依赖数组里的 - 钩子收的函数参数都收成小框，函数体是卡片子块，直接返回的表达式由 functionBody 排成「返回 …」卡片；小框和卡片折叠箭头同一个开关 - 规则卡片可指定语言种类图标（languageKind）、种类图标悬停字和颜色（KindBadge.tooltip / iconColor）
1698 lines
53 KiB
CSS
1698 lines
53 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* 关掉浏览器的滚动锚定：页面长高变矮时由[滚动所有者](vscode/webview-ui/src/codeReader/scrollOwner.ts#ScrollOwner)照跳转、恢复位置时定下的意图滚回去，两边一起补会补两遍 */
|
||
html {
|
||
overflow-anchor: none;
|
||
}
|
||
|
||
/* 词性与块种类的配色（--cr-keyword 这些、--cr-kind-*）由扩展端按当前颜色主题算好发来，设在 body 上（codeColors.ts）。其余界面颜色一律用 --vscode-* 变量。 */
|
||
body {
|
||
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);
|
||
}
|
||
|
||
/* 种类颜色：同一类语义共用一个颜色（每类查主题的哪个范围见扩展端 theme/codeColors.ts，主题给几类配了同一个色就同色），
|
||
图标区分具体是哪种（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="interface"], [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); }
|
||
/* 库规则给了淡底颜色的卡片（React 钩子卡片按来源分底色）：淡底用它，边框仍是种类色；同样按主题挑一个 */
|
||
[data-tint] { --tint: var(--tint-dark); }
|
||
body:is(.vscode-light, .vscode-high-contrast-light) [data-tint] { --tint: var(--tint-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-tint] {
|
||
background: color-mix(in srgb, var(--tint) 7%, transparent);
|
||
}
|
||
.cr-block[data-tint]:hover {
|
||
background: color-mix(in srgb, var(--tint) 14%, transparent);
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/*
|
||
* 页面上顶层的一块（卡片连同问答区、子块，BlockTree 的 items）：离视口远时浏览器跳过它里面的样式、排版和绘制，大文件全展开时重画、滚动不用每次算整页；
|
||
* 没画过时按估的高度占位（行内的 contain-intrinsic-block-size，auto 是画过一次就记住真实高度）。跳过的内容照样能页内查找、Tab 到、选中。
|
||
* 它把里面的绘制关在自己的框里：往上伸出卡片的「新增」小标，靠上面多留的 8px（再用负的外边距抵掉，位置不变）照样画得出来；
|
||
* 类名弹层打开时这一块照常画（不关在框里），弹层才盖得住后面的块
|
||
*/
|
||
.cr-item {
|
||
content-visibility: auto;
|
||
padding-top: 8px;
|
||
margin-top: -8px;
|
||
}
|
||
/* 要滚过去的那一带（见 pageLayout.settle）、类名弹层打开着的那一块照常排版、绘制 */
|
||
.cr-item:is([data-settle], :has(.cr-classes-popup)) {
|
||
content-visibility: visible;
|
||
}
|
||
|
||
/* 层级竖线：悬停一个块时，它子层的竖线换成它的种类色，标出这个块管到哪里为止（块和子层中间隔着问答区也算） */
|
||
.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;
|
||
}
|
||
/* 不带路径的引用是语言自带的名字（Python 的 ValueError、str），跳不过去：和旁边的字一样，不像链接 */
|
||
.cr-markdown a.cr-link-plain,
|
||
.cr-markdown a.cr-link-plain:hover {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
cursor: text;
|
||
}
|
||
/* 仓库图片：按原图比例，宽不超过注释区。点了是仓库链接，打开原图 */
|
||
.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;
|
||
}
|
||
/* ```mermaid 代码块画成的图：居中，宽不超过注释区，真放不下就横着滚；画不出来时留着代码块，下面一行原因用警告色 */
|
||
.cr-markdown .cr-mermaid {
|
||
margin: 0 0 6px;
|
||
overflow-x: auto;
|
||
}
|
||
.cr-markdown > .cr-mermaid:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.cr-markdown .cr-mermaid > :is(pre, p) {
|
||
margin: 0;
|
||
}
|
||
.cr-markdown .cr-mermaid > svg {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
margin: 0 auto;
|
||
}
|
||
.cr-markdown .cr-mermaid > .cr-mermaid-error {
|
||
margin-top: 2px;
|
||
color: var(--vscode-editorWarning-foreground, var(--vscode-descriptionForeground));
|
||
font-size: 11.5px;
|
||
}
|
||
.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;
|
||
}
|
||
/* 卡片底下那块问过 AI 的：同块下面的问答区（左边一条竖线、灰字），离卡片空一点，左边不贴着浮窗边 */
|
||
.cr-peek-body > .cr-qa {
|
||
margin: 6px 0 0 8px;
|
||
}
|
||
|
||
/* 按住 ⌘ / 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);
|
||
}
|
||
|
||
/*
|
||
* 查找栏（FindBar.tsx）的输入框：配色同 VS Code 的输入框，聚焦时描焦点色。
|
||
* 命中画成自定义高亮（findHighlights.ts，不动页面元素），颜色同 VS Code 编辑器的查找：各处命中垫 findMatchHighlightBackground，
|
||
* 当前那处垫 findMatchBackground；自定义高亮画不了边框，当前那处的 findMatchBorder（主题给了才有，多是高对比主题）由 .cr-find-outline 盖上去。
|
||
* 和单击名字的高亮（[data-occurrence]）各画各的，叠在一起时都看得见
|
||
*/
|
||
.cr-find-input {
|
||
color: var(--vscode-input-foreground);
|
||
font: inherit;
|
||
background: var(--vscode-input-background);
|
||
border: 1px solid var(--vscode-input-border, color-mix(in srgb, var(--vscode-foreground) 20%, transparent));
|
||
outline: none;
|
||
}
|
||
.cr-find-input:focus {
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-find-input::placeholder {
|
||
color: var(--vscode-input-placeholderForeground);
|
||
}
|
||
::highlight(cr-find) {
|
||
background-color: var(--vscode-editor-findMatchHighlightBackground);
|
||
}
|
||
::highlight(cr-find-current) {
|
||
background-color: var(--vscode-editor-findMatchBackground);
|
||
}
|
||
/* 当前那处外面的框：按文档坐标摆，跟着页面滚；层级在页面内容之上，低于钉住的卡片（4）和筛选栏（10），滚到它们下面时被盖住 */
|
||
.cr-find-outline {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
.cr-find-outline > div {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
border: 1px solid var(--vscode-editor-findMatchBorder, transparent);
|
||
}
|
||
|
||
/* 属性表的属性名：界面字体，和值一样的行高，两边逐行对齐 */
|
||
.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 个类」）、链式调用里收起来的闭包（「闭包 |app| · 37 句」）：中性色的小框，是个按钮；
|
||
* 点开时换成焦点色的边，类名在下面弹出全部类名（弹层盖住后面的字，不挤开它们），闭包在这一步下面展开子块。
|
||
* 闭包框不在链的某一步里时（删掉的块的旧内容）不能点
|
||
*/
|
||
.cr-group:is([data-style="classes"], [data-style="fold"]) {
|
||
margin: 0;
|
||
font: inherit;
|
||
color: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
background: var(--vscode-input-background);
|
||
border-color: var(--vscode-editorWidget-border, var(--vscode-contrastBorder, transparent));
|
||
}
|
||
.cr-group:is([data-style="classes"], [data-style="fold"]) .cr-group-head {
|
||
font-weight: 400;
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-group:is([data-style="classes"], [data-style="fold"]):not(:disabled):hover,
|
||
.cr-group:is([data-style="classes"], [data-style="fold"])[data-open] {
|
||
border-color: var(--vscode-focusBorder);
|
||
}
|
||
.cr-group:is([data-style="classes"], [data-style="fold"])[data-open] .cr-group-head {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-group[data-style="fold"]:disabled {
|
||
cursor: default;
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/*
|
||
* 链式调用的竖轨道（见 ChainRail）：一步一行，左边一列是点和上下两截线（函数色淡到 35%，第一步上面、最后一步下面不画），
|
||
* 方法那一列按最长的那个定宽（--cr-chain-name）、各步对齐；步与步之间的空隙在每一步的下边距里，线才连得上。
|
||
* 小链用空心的小点、细一点的说明色线，一节一行
|
||
*/
|
||
.cr-chain {
|
||
--cr-chain-line: color-mix(in srgb, var(--cr-function) 35%, transparent);
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 3px;
|
||
}
|
||
.cr-chain-step {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.cr-chain-rail {
|
||
display: flex;
|
||
flex: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 14px;
|
||
}
|
||
.cr-chain-up {
|
||
flex: none;
|
||
width: 2px;
|
||
height: 6px;
|
||
background: var(--cr-chain-line);
|
||
}
|
||
.cr-chain-down {
|
||
flex: 1;
|
||
width: 2px;
|
||
background: var(--cr-chain-line);
|
||
}
|
||
.cr-chain-rail[data-first] > .cr-chain-up,
|
||
.cr-chain-rail[data-last] > .cr-chain-down {
|
||
visibility: hidden;
|
||
}
|
||
.cr-chain-dot {
|
||
flex: none;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--cr-function);
|
||
}
|
||
.cr-chain-body {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
min-width: 0;
|
||
padding-bottom: 6px;
|
||
}
|
||
.cr-chain-step:last-child > .cr-chain-body {
|
||
padding-bottom: 0;
|
||
}
|
||
.cr-chain-line {
|
||
display: grid;
|
||
grid-template-columns: var(--cr-chain-name) minmax(0, 1fr);
|
||
column-gap: 12px;
|
||
}
|
||
.cr-chain-name {
|
||
white-space: nowrap;
|
||
}
|
||
.cr-chain-label {
|
||
font-size: 12.5px;
|
||
line-height: 20px;
|
||
color: var(--vscode-descriptionForeground);
|
||
white-space: nowrap;
|
||
}
|
||
.cr-chain-mini {
|
||
--cr-chain-line: color-mix(in srgb, var(--vscode-descriptionForeground) 45%, transparent);
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
.cr-chain-mini .cr-chain-up {
|
||
width: 1px;
|
||
height: 7px;
|
||
}
|
||
.cr-chain-mini .cr-chain-down {
|
||
width: 1px;
|
||
}
|
||
.cr-chain-dot[data-hollow] {
|
||
box-sizing: border-box;
|
||
width: 6px;
|
||
height: 6px;
|
||
border: 1px solid var(--vscode-descriptionForeground);
|
||
background: transparent;
|
||
}
|
||
.cr-chain-blocks {
|
||
padding-top: 2px;
|
||
}
|
||
.cr-table .cr-table-cell {
|
||
padding: 2px 8px;
|
||
}
|
||
.cr-table .cr-table-cell + .cr-table-cell {
|
||
border-left: 1px solid var(--cr-table-border);
|
||
}
|
||
/* 「操作」一列：这一行能做的操作按钮横排，垂直居中（见 PropertyGrid 的 RowActionButtons） */
|
||
.cr-table .cr-table-ops {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.cr-row-actions {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.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-action {
|
||
display: flex;
|
||
width: 22px;
|
||
height: 18px;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
color: var(--qa-dim);
|
||
}
|
||
.cr-qa-action:hover {
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-qa-action[data-failed] {
|
||
color: var(--vscode-errorForeground);
|
||
}
|
||
/* 回答的前两行，和回答正文一样往右缩到问题下面 */
|
||
.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-status[data-warning] {
|
||
color: var(--vscode-editorWarning-foreground, var(--vscode-descriptionForeground));
|
||
}
|
||
.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;
|
||
}
|
||
/* 「问过 N 次」那一行能点着收起 / 摊开；只读列表的标题「问过 AI（N）」同样子，不能点 */
|
||
.cr-qa-summary,
|
||
.cr-qa-title {
|
||
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 宽、和卡片等高，空 5px 再是卡片；没变的卡片留一条透明的，同一层的卡片照样对齐。
|
||
* 色条画在卡片里（标不标差异卡片都是同一个元素），标差异的那一层（data-diff）卡片、折起来的一段、问答区都往右让出 8px，色条挪进这 8px 里
|
||
*/
|
||
.cr-level[data-diff] > div > :is(.cr-block, .cr-unchanged, .cr-qa),
|
||
.cr-level[data-diff] > div > .cr-item > :is(.cr-block, .cr-qa) {
|
||
margin-left: 8px;
|
||
}
|
||
.cr-change-bar {
|
||
position: absolute;
|
||
top: -1px;
|
||
bottom: -1px;
|
||
left: -9px;
|
||
width: 3px;
|
||
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-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) 48%, transparent);
|
||
background: color-mix(in srgb, var(--cr-diff-del) 3.6%, transparent);
|
||
}
|
||
.cr-removed > :not(.cr-change-bar) {
|
||
opacity: 0.6;
|
||
}
|
||
.cr-block.cr-removed:hover {
|
||
border-color: color-mix(in srgb, var(--cr-diff-del) 80%, transparent);
|
||
background: color-mix(in srgb, var(--cr-diff-del) 8%, transparent);
|
||
}
|
||
.cr-block.cr-removed:hover > :not(.cr-change-bar) {
|
||
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;
|
||
}
|
||
|
||
/* 调用树：盖住编辑区（文件树在预览外面，不会被压暗）。路径用当前块的种类色 */
|
||
.cr-call-count {
|
||
min-width: 14px;
|
||
height: 14px;
|
||
padding: 0 3px;
|
||
border-radius: 7px;
|
||
background: var(--vscode-badge-background);
|
||
color: var(--vscode-badge-foreground);
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
}
|
||
.cr-call-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding: 32px 24px;
|
||
background: rgb(0 0 0 / 55%);
|
||
}
|
||
.cr-call-dialog {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: min(880px, 100%);
|
||
max-height: 100%;
|
||
overflow: hidden;
|
||
border: 1px solid var(--vscode-editorWidget-border, var(--vscode-widget-border, transparent));
|
||
border-radius: 8px;
|
||
background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
|
||
color: var(--vscode-editorWidget-foreground, var(--vscode-foreground));
|
||
box-shadow: 0 8px 28px var(--vscode-widget-shadow);
|
||
}
|
||
/* 标题一行：「调用树」和符号名整个留着，位置占剩下的宽度 */
|
||
.cr-call-title {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-height: 44px;
|
||
padding: 8px 14px;
|
||
border-bottom: 1px solid var(--vscode-widget-border, var(--vscode-panel-border, transparent));
|
||
}
|
||
.cr-call-heading {
|
||
flex-shrink: 0;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
.cr-call-symbol,
|
||
.cr-call-name {
|
||
color: var(--kind);
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
.cr-call-symbol {
|
||
flex-shrink: 0;
|
||
}
|
||
/* 位置：文件名先放全，目录拿剩下的宽度、放不下末尾省略；文件名自己也放不下时才省略 */
|
||
.cr-call-where {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
font-size: 11px;
|
||
}
|
||
.cr-call-file,
|
||
.cr-call-dir {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.cr-call-file {
|
||
flex: 0 1 auto;
|
||
min-width: 0;
|
||
color: var(--vscode-foreground);
|
||
}
|
||
.cr-call-dir {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
color: var(--vscode-disabledForeground, var(--vscode-descriptionForeground));
|
||
}
|
||
.cr-call-loc {
|
||
color: var(--vscode-disabledForeground, var(--vscode-descriptionForeground));
|
||
font-family: var(--vscode-editor-font-family, monospace);
|
||
font-size: 11px;
|
||
}
|
||
.cr-call-close {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 24px;
|
||
flex-shrink: 0;
|
||
height: 24px;
|
||
margin-left: auto;
|
||
border: 0;
|
||
border-radius: 4px;
|
||
background: transparent;
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-call-entries {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 12px 16px 4px;
|
||
}
|
||
.cr-call-entry {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
height: 28px;
|
||
padding: 0 10px;
|
||
border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border, transparent));
|
||
border-radius: 6px;
|
||
background: var(--vscode-input-background, transparent);
|
||
color: var(--vscode-foreground);
|
||
font-size: 12px;
|
||
}
|
||
.cr-call-entry[aria-selected="true"] {
|
||
border-color: var(--vscode-focusBorder);
|
||
background: var(--vscode-list-activeSelectionBackground);
|
||
color: var(--vscode-list-activeSelectionForeground);
|
||
font-weight: 600;
|
||
}
|
||
.cr-call-hits {
|
||
color: var(--vscode-disabledForeground, var(--vscode-descriptionForeground));
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
}
|
||
.cr-call-entry[aria-selected="true"] .cr-call-hits {
|
||
color: var(--vscode-list-activeSelectionForeground);
|
||
}
|
||
.cr-call-body {
|
||
min-height: 0;
|
||
padding: 12px 16px 16px;
|
||
overflow: auto;
|
||
}
|
||
.cr-call-note {
|
||
margin: 8px 0;
|
||
color: var(--vscode-descriptionForeground);
|
||
}
|
||
.cr-call-note p {
|
||
margin: 0;
|
||
}
|
||
.cr-call-files {
|
||
margin: 6px 0 0;
|
||
padding-left: 16px;
|
||
}
|
||
.cr-call-row {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 8px;
|
||
}
|
||
.cr-call-row + .cr-call-row {
|
||
margin-top: 8px;
|
||
}
|
||
.cr-call-guide {
|
||
flex-shrink: 0;
|
||
width: 2px;
|
||
border-radius: 1px;
|
||
background: var(--kind);
|
||
}
|
||
.cr-call-guide[data-folded] {
|
||
align-self: center;
|
||
height: 16px;
|
||
background: var(--vscode-editorIndentGuide-background1, var(--vscode-tree-inactiveIndentGuidesStroke));
|
||
}
|
||
.cr-call-card {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 7px 10px;
|
||
border: 1px solid color-mix(in srgb, var(--kind) 35%, transparent);
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--kind) 7%, transparent);
|
||
color: inherit;
|
||
font: inherit;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
.cr-call-card:hover {
|
||
background: color-mix(in srgb, var(--kind) 12%, transparent);
|
||
}
|
||
.cr-call-card:focus-visible {
|
||
outline: 1px solid var(--vscode-focusBorder);
|
||
outline-offset: 1px;
|
||
}
|
||
.cr-call-card[data-current] {
|
||
border-color: var(--kind);
|
||
background: color-mix(in srgb, var(--kind) 14%, transparent);
|
||
}
|
||
/* 卡片第一行：图标、名字、detail 占名字后面剩下的宽度，「当前」靠右；第二行只放位置 */
|
||
.cr-call-line {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--kind);
|
||
}
|
||
.cr-call-line > svg {
|
||
flex-shrink: 0;
|
||
}
|
||
.cr-call-name {
|
||
overflow: hidden;
|
||
flex: 0 1 auto;
|
||
min-width: 0;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.cr-call-detail {
|
||
overflow: hidden;
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
color: var(--vscode-descriptionForeground);
|
||
font-size: 11px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.cr-call-card .cr-call-where {
|
||
margin-top: 2px;
|
||
}
|
||
.cr-call-pill {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
align-items: center;
|
||
height: 18px;
|
||
margin-left: auto;
|
||
padding: 0 6px;
|
||
border-radius: 9px;
|
||
background: var(--kind);
|
||
color: var(--vscode-editor-background);
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
.cr-call-folded {
|
||
align-self: center;
|
||
color: var(--vscode-disabledForeground, var(--vscode-descriptionForeground));
|
||
font-size: 12px;
|
||
}
|