mirror of
https://github.com/raven-pensieve/obsidian-ace-code-editor.git
synced 2026-07-22 12:50:24 +00:00
cd78217476
* feat: 统一并改进代码片段文案 将代码片段相关的本地化文案从泛指“代码片段/程式碼片段/檔案” 改为更明确的“CSS 片段/CSS 代码片段/片段檔案”，并将“刷新”文案统一为 “重新加载/重新載入/Reload snippets”。这样做的目的是增强文本语义 清晰度，让用户明确这些片段与 CSS 相关，同时将刷新操作描述为 “重新加载”，更贴合实际行为（重新读取片段列表），提升用户体验。 * feat(styles): 重构 SnippetsFileModal 样式结构 将模态框样式拆分并重构为更语义化的类名和更一致的变量 使用，方便维护和复用。主要变更包括： - 添加 .snippets-modal-header、.snippets-modal-content 等语义化 容器，统一头部、内容区与操作区域的布局与间距。 - 提炼并规范化按钮、搜索、列表项等子组件样式，统一 hover、 交互过渡与尺寸，提升一致性与可访问性。 - 调整配色与边框使用 var() 变量（如 --text-normal、--background -modifier-border），以便主题定制。 - 简化并删除旧的嵌套样式与冗余阴影/边距，减少重复规则并改 善可读性。 这些改动为后续功能扩展、主题支持与样式维护奠定基础。 * fix(modal): 替换过时图标组件以消除命名差异 将引用的图标组件从 RefreshCcwDot 改为 RefreshCcw。 修复了导入和使用处的不一致，避免运行时或构建时因未找到组件 导致的错误。该改动保持行为不变，仅同步组件名称以配合图标库 的实际导出。
209 lines
3.8 KiB
CSS
209 lines
3.8 KiB
CSS
.ace-snippets-file-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.snippets-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.snippets-modal-header h2 {
|
|
margin: 0;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-normal);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.snippets-modal-header-icon {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.snippets-modal-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.snippets-new-file {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background-color: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
.snippets-new-file input {
|
|
width: 100%;
|
|
}
|
|
|
|
.snippets-new-file-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.snippets-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.snippets-search {
|
|
flex: 1;
|
|
}
|
|
|
|
.snippets-search input {
|
|
width: 100%;
|
|
}
|
|
|
|
.snippets-action-buttons {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.snippets-action-buttons button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 30px;
|
|
width: 30px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: color 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
|
|
.snippets-action-buttons button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.snippets-file-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: var(--radius-m);
|
|
background-color: var(--background-primary);
|
|
}
|
|
|
|
.snippets-file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.snippets-file-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.snippets-file-item:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.snippets-file-name {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-normal);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.snippets-file-badge {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
background-color: var(--background-secondary-alt);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.snippets-file-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.snippets-file-actions .snippets-toggle {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.snippets-file-actions button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 24px;
|
|
width: 24px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.snippets-file-actions button:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
color: var(--text-normal);
|
|
opacity: 1;
|
|
}
|
|
|
|
.snippets-file-actions .snippets-delete-btn:hover {
|
|
color: var(--text-error);
|
|
background-color: var(--background-modifier-error-hover);
|
|
}
|
|
|
|
.snippets-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
min-height: 150px;
|
|
color: var(--text-muted);
|
|
gap: 12px;
|
|
}
|
|
|
|
.snippets-empty-icon {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
button.mod-cta:hover {
|
|
background-color: var(--interactive-accent-hover);
|
|
}
|