fix: 修复暗色主题下下拉菜单白色背景闪烁问题
- 添加 dark-select-dropdown 自定义类 - 修复鼠标移出后下拉菜单出现白色背景的问题 - 强制覆盖所有可能的白色背景样式 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -19,6 +19,27 @@ body {
|
|||||||
@apply bg-dark-900 text-gray-100 font-sans;
|
@apply bg-dark-900 text-gray-100 font-sans;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 自定义下拉菜单类 */
|
||||||
|
.dark-select-dropdown {
|
||||||
|
background-color: #1a1c25 !important;
|
||||||
|
border: 1px solid #2a2c36 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-select-dropdown .el-select-dropdown__item {
|
||||||
|
color: #ffffff !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-select-dropdown .el-select-dropdown__item:hover,
|
||||||
|
.dark-select-dropdown .el-select-dropdown__item.hover {
|
||||||
|
background-color: #1a1c25 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-select-dropdown .el-select-dropdown__item.is-selected {
|
||||||
|
color: #ff9500 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Element Plus 暗色主题 */
|
/* Element Plus 暗色主题 */
|
||||||
html.dark {
|
html.dark {
|
||||||
--el-bg-color: #171922;
|
--el-bg-color: #171922;
|
||||||
@@ -129,6 +150,30 @@ html.dark .el-select-dropdown {
|
|||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 修复鼠标移出后出现白色背景的问题 */
|
||||||
|
html.dark .el-select-dropdown__list {
|
||||||
|
background-color: #1a1c25 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .el-popper.is-light .el-popper__arrow::before,
|
||||||
|
html.dark .el-select-dropdown__arrow {
|
||||||
|
background-color: #1a1c25 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 强制覆盖所有可能的白色背景 */
|
||||||
|
html.dark .el-select-dropdown__item.hover,
|
||||||
|
html.dark .el-select-dropdown__item:hover {
|
||||||
|
background-color: #1a1c25 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark .el-select-dropdown.el-popper[x-placement^="bottom"] .el-select-dropdown__item {
|
||||||
|
background-color: #1a1c25 !important;
|
||||||
|
}
|
||||||
|
|
||||||
html.dark .el-select-dropdown__item {
|
html.dark .el-select-dropdown__item {
|
||||||
color: #ffffff !important;
|
color: #ffffff !important;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
|||||||
@@ -807,7 +807,7 @@ const filteredDatabases = () => {
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
|
<label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
|
||||||
<el-select v-model="editForm.db_type" placeholder="Select" class="w-full" size="large">
|
<el-select v-model="editForm.db_type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
|
||||||
<el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
|
<el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
@@ -924,7 +924,7 @@ const filteredDatabases = () => {
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
|
<label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
|
||||||
<el-select v-model="newDbForm.db_type" placeholder="Select" class="w-full" size="large">
|
<el-select v-model="newDbForm.db_type" placeholder="Select" class="w-full" size="large" popper-class="dark-select-dropdown">
|
||||||
<el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
|
<el-option v-for="type in dbTypes" :key="type" :label="type" :value="type" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user