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 */