fix(editor): Ace 输入框玻璃质感与圆角内边距对齐

- 玻璃主题下让 .ace_editor 与普通输入框一致的染色玻璃、描边、聚焦态
- 重命名格式编辑器改用全局圆角 token,并通过 renderer 补齐内边距

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jxxghp
2026-07-28 20:07:05 +08:00
parent e7bfc4ec1c
commit e218508c2d
3 changed files with 62 additions and 3 deletions

View File

@@ -680,6 +680,55 @@ html[data-theme='glass'] {
opacity: 1;
}
// Ace 编辑器自带主题会绘制不透明底色,这里让它与普通输入框一样呈现玻璃质感。
.ace_editor {
border-radius: var(--app-field-radius);
-webkit-backdrop-filter: var(--glass-control-backdrop-filter);
backdrop-filter: var(--glass-control-backdrop-filter);
background-color: var(--glass-control) !important;
box-shadow:
inset 0 0 0 1px var(--glass-border),
inset 0 1px 0 rgba(255, 255, 255, 8%);
transition:
background-color var(--glass-motion),
box-shadow var(--glass-motion);
}
.ace_editor .ace_gutter,
.ace_editor .ace_scroller,
.ace_editor .ace_content,
.ace_editor .ace_gutter-active-line {
background: transparent !important;
}
.ace_editor,
.ace_editor .ace_gutter,
.ace_editor .ace_scroller,
.ace_editor .ace_content {
color: rgb(var(--v-theme-on-surface)) !important;
}
.ace_editor .ace_gutter {
color: rgba(242, 245, 250, 44%) !important;
}
.ace_editor .ace_marker-layer .ace_active-line,
.ace_editor .ace_marker-layer .ace_selection {
background: rgba(255, 255, 255, 8%) !important;
}
.ace_editor .ace_cursor {
color: rgb(var(--v-theme-primary)) !important;
}
.ace_editor.ace_focus {
background-color: color-mix(in srgb, var(--glass-control) 84%, rgba(var(--v-theme-primary), 32%)) !important;
box-shadow:
0 0 0 3px rgba(var(--v-theme-primary), 14%),
inset 0 0 0 1px rgba(var(--v-theme-primary), 32%),
inset 0 1px 0 rgba(255, 255, 255, 10%);
}
.v-btn {
letter-spacing: 0;
transition: