style: 美化 CodeMirror 6 搜索面板样式
美化内容: - 搜索面板:白色背景、圆角输入框、蓝色焦点光环 - 按钮:圆角、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 — 匹配高亮
This commit is contained in:
@@ -206,14 +206,180 @@ html, body {
|
|||||||
outline: none;
|
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 {
|
.cm-searchMatch {
|
||||||
background: rgba(255, 220, 0, 0.35);
|
background: rgba(255, 220, 0, 0.35) !important;
|
||||||
border-radius: 2px;
|
border-radius: 2px !important;
|
||||||
|
outline: 1px solid rgba(255, 220, 0, 0.5) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cm-searchMatch.cm-searchMatch-selected {
|
.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 */
|
/* Fold gutter */
|
||||||
|
|||||||
Reference in New Issue
Block a user