From e40a8bd88ed85e91b215a7d8353a5ee5b4406512 Mon Sep 17 00:00:00 2001 From: thzxx Date: Wed, 27 May 2026 23:41:09 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=BE=8E=E5=8C=96=20CodeMirror=206=20?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E9=9D=A2=E6=9D=BF=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 美化内容： - 搜索面板：白色背景、圆角输入框、蓝色焦点光环 - 按钮：圆角、hover 高亮、active 蓝色 - 选项按钮（正则/大小写）：圆形、激活时蓝色边框 - 搜索高亮：黄色半透明 + 边框轮廓 - 当前匹配：橙色高亮 + 加粗边框 - 关闭按钮：hover 背景变色 - 替换按钮：与搜索按钮风格统一 - 暗色主题：完整适配所有组件 CSS 类： - .cm-panel.cm-search — 面板容器 - .cm-textfield — 输入框 - .cm-button — 按钮 - .cm-toggle — 选项按钮 - .cm-active — 激活状态 - .cm-search-info — 结果计数 - .cm-close — 关闭按钮 - .cm-replace/.cm-replaceAll — 替换按钮 - .cm-searchMatch — 匹配高亮 --- src/renderer/styles/global.css | 174 ++++++++++++++++++++++++++++++++- 1 file changed, 170 insertions(+), 4 deletions(-) diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css index 194df4b..4b2ef40 100644 --- a/src/renderer/styles/global.css +++ b/src/renderer/styles/global.css @@ -206,14 +206,180 @@ html, body { outline: none; } -/* 搜索高亮 */ +/* ===== CodeMirror 搜索样式美化 ===== */ + +/* 搜索面板整体 */ +.cm-panel.cm-search { + background: var(--bg) !important; + border-bottom: 1px solid var(--border) !important; + padding: 8px 12px !important; + font-family: var(--font-ui) !important; + font-size: 13px !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +/* 搜索输入框 */ +.cm-panel .cm-textfield { + background: var(--bg-secondary) !important; + border: 1px solid var(--border) !important; + border-radius: 4px !important; + padding: 4px 8px !important; + font-size: 13px !important; + font-family: var(--font-ui) !important; + color: var(--text) !important; + outline: none !important; + transition: border-color 0.15s ease !important; + height: 28px !important; +} + +.cm-panel .cm-textfield:focus { + border-color: var(--primary) !important; + box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15) !important; +} + +/* 搜索按钮 */ +.cm-panel .cm-button { + background: var(--bg-secondary) !important; + border: 1px solid var(--border) !important; + border-radius: 4px !important; + color: var(--text-secondary) !important; + font-size: 12px !important; + font-family: var(--font-ui) !important; + padding: 4px 10px !important; + cursor: pointer !important; + transition: all 0.15s ease !important; + height: 28px !important; + line-height: 1 !important; +} + +.cm-panel .cm-button:hover { + background: var(--bg-tertiary) !important; + color: var(--text) !important; + border-color: var(--text-tertiary) !important; +} + +.cm-panel .cm-button:active { + background: var(--primary-light) !important; + color: var(--primary) !important; +} + +/* 搜索选项按钮（正则、大小写、全字匹配） */ +.cm-panel .cm-toggle { + background: transparent !important; + border: 1px solid var(--border) !important; + border-radius: 4px !important; + color: var(--text-tertiary) !important; + font-size: 11px !important; + font-weight: 600 !important; + font-family: var(--font-mono) !important; + padding: 4px 6px !important; + cursor: pointer !important; + transition: all 0.15s ease !important; + height: 28px !important; + min-width: 28px !important; +} + +.cm-panel .cm-toggle:hover { + background: var(--bg-tertiary) !important; + color: var(--text) !important; +} + +.cm-panel .cm-toggle.cm-active { + background: var(--primary-light) !important; + color: var(--primary) !important; + border-color: var(--primary) !important; +} + +/* 搜索结果计数 */ +.cm-panel .cm-search-info { + color: var(--text-tertiary) !important; + font-size: 11px !important; + font-family: var(--font-ui) !important; + padding: 0 8px !important; + white-space: nowrap !important; +} + +/* 关闭按钮 */ +.cm-panel .cm-close { + color: var(--text-tertiary) !important; + font-size: 16px !important; + cursor: pointer !important; + padding: 4px !important; + border-radius: 4px !important; + transition: all 0.15s ease !important; +} + +.cm-panel .cm-close:hover { + background: var(--bg-tertiary) !important; + color: var(--text) !important; +} + +/* 替换按钮组 */ +.cm-panel .cm-replace, +.cm-panel .cm-replaceAll { + background: var(--bg-secondary) !important; + border: 1px solid var(--border) !important; + border-radius: 4px !important; + color: var(--text-secondary) !important; + font-size: 12px !important; + padding: 4px 8px !important; + cursor: pointer !important; + transition: all 0.15s ease !important; +} + +.cm-panel .cm-replace:hover, +.cm-panel .cm-replaceAll:hover { + background: var(--bg-tertiary) !important; + color: var(--text) !important; +} + +/* 搜索高亮匹配 */ .cm-searchMatch { - background: rgba(255, 220, 0, 0.35); - border-radius: 2px; + background: rgba(255, 220, 0, 0.35) !important; + border-radius: 2px !important; + outline: 1px solid rgba(255, 220, 0, 0.5) !important; } .cm-searchMatch.cm-searchMatch-selected { - background: rgba(255, 150, 0, 0.55); + background: rgba(255, 150, 0, 0.55) !important; + outline: 2px solid rgba(255, 150, 0, 0.8) !important; +} + +/* 暗色主题适配 */ +:root.dark .cm-searchMatch { + background: rgba(255, 220, 0, 0.2) !important; + outline-color: rgba(255, 220, 0, 0.3) !important; +} + +:root.dark .cm-searchMatch.cm-searchMatch-selected { + background: rgba(255, 150, 0, 0.35) !important; + outline-color: rgba(255, 150, 0, 0.6) !important; +} + +:root.dark .cm-panel { + background: var(--bg-secondary) !important; + border-color: var(--border) !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; +} + +:root.dark .cm-panel .cm-textfield { + background: var(--bg-tertiary) !important; + border-color: var(--border) !important; +} + +:root.dark .cm-panel .cm-button, +:root.dark .cm-panel .cm-replace, +:root.dark .cm-panel .cm-replaceAll { + background: var(--bg-tertiary) !important; + border-color: var(--border) !important; + color: var(--text-secondary) !important; +} + +:root.dark .cm-panel .cm-button:hover, +:root.dark .cm-panel .cm-replace:hover, +:root.dark .cm-panel .cm-replaceAll:hover { + background: var(--border) !important; + color: var(--text) !important; } /* Fold gutter */