705 lines
21 KiB
CSS
705 lines
21 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-kind-import: #c586c0;
|
|
--cr-kind-function: #dcdcaa;
|
|
--cr-kind-type: #4ec9b0;
|
|
--cr-kind-enum: #b180d7;
|
|
--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;
|
|
|
|
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-kind-import: #af00db;
|
|
--cr-kind-function: #795e26;
|
|
--cr-kind-type: #267f99;
|
|
--cr-kind-enum: #652d90;
|
|
--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;
|
|
}
|
|
|
|
/* 种类颜色：同一类语义共用一个颜色，标签文字区分具体是哪种。卡片取自己的种类，子层取所属块的种类 */
|
|
[data-kind="import"] { --kind: var(--cr-kind-import); }
|
|
[data-kind="function"] { --kind: var(--cr-kind-function); }
|
|
:is([data-kind="class"], [data-kind="type"]) { --kind: var(--cr-kind-type); }
|
|
[data-kind="enum"] { --kind: var(--cr-kind-enum); }
|
|
:is([data-kind="field"], [data-kind="const"], [data-kind="variable"]) { --kind: var(--cr-kind-data); }
|
|
:is([data-kind="if"], [data-kind="else"]) { --kind: var(--cr-kind-branch); }
|
|
[data-kind="loop"] { --kind: var(--cr-kind-loop); }
|
|
:is([data-kind="try"], [data-kind="catch"], [data-kind="finally"]) { --kind: var(--cr-kind-error); }
|
|
[data-kind="return"] { --kind: var(--cr-kind-return); }
|
|
[data-kind="statement"] { --kind: var(--cr-kind-statement); }
|
|
[data-kind="comment"] { --kind: var(--cr-kind-comment); }
|
|
/* 库规则认领的块：颜色由规则给，暗色、亮色两个写在元素的 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-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 {
|
|
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-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-flash] {
|
|
animation: cr-flash-still 1500ms;
|
|
}
|
|
.cr-table-row[data-flash] {
|
|
animation: cr-flash-row-still 1500ms;
|
|
}
|
|
}
|
|
|
|
.cr-badge {
|
|
color: var(--kind);
|
|
background: color-mix(in srgb, var(--kind) 18%, transparent);
|
|
}
|
|
|
|
/* 译文和源码共用的文字排版；源码编辑时输入框和着色层都用它，两层逐字对齐 */
|
|
.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-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); }
|
|
|
|
/* 注释块、函数说明的 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;
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* 按住 ⌘ / Ctrl 停在查得到定义的名字上：和编辑器里的链接一样 */
|
|
.cr-code [data-link] {
|
|
color: var(--vscode-editorLink-activeForeground);
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
* 单击名字高亮它在文件里的各处出现：颜色取 VS Code 编辑器的单词高亮，写入（定义、赋值）用强高亮色，读取和按文字认出的用普通高亮色；
|
|
* 主题给了边框色（高对比主题）才描边。筛选栏上「名字 · N 处」的名字也按普通高亮画。描边画在字框里面，不挤动排版
|
|
*/
|
|
[data-occurrence] {
|
|
outline-offset: -1px;
|
|
}
|
|
[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);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
* 属性表里带列名的子行（输入参数、数据表的字段）排成的表格：外框圆角，格子之间、行之间一条主题的表格分隔线；
|
|
* 表头垫主题的表头底色（比编辑区深一档或浅一档）、列名用说明色。
|
|
* 整张表格一个网格、每行借用它的列（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);
|
|
}
|
|
.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);
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
/* 预览顶上：找不到原来位置的问答 */
|
|
.cr-qa-orphans {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
padding: 6px 10px;
|
|
border: 1px dashed color-mix(in srgb, var(--vscode-descriptionForeground) 40%, transparent);
|
|
border-radius: 6px;
|
|
}
|
|
.cr-qa-orphans .cr-qa {
|
|
--qa-accent: var(--vscode-descriptionForeground);
|
|
}
|
|
.cr-qa-where {
|
|
color: var(--vscode-descriptionForeground);
|
|
font-size: 11.5px;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.cr-qa-spin,
|
|
.cr-qa-answer[data-streaming] > :last-child::after {
|
|
animation: none;
|
|
}
|
|
}
|