update 优化 黑暗模式下筛选框两个按钮的样式
This commit is contained in:
@@ -84,6 +84,18 @@
|
|||||||
border-radius: 10px !important;
|
border-radius: 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.dark .query-form .el-button--primary {
|
||||||
|
--el-button-bg-color: rgba(37, 99, 235, 0.28);
|
||||||
|
--el-button-border-color: rgba(96, 165, 250, 0.62);
|
||||||
|
--el-button-text-color: #dbeafe;
|
||||||
|
--el-button-hover-bg-color: rgba(59, 130, 246, 0.36);
|
||||||
|
--el-button-hover-border-color: rgba(147, 197, 253, 0.78);
|
||||||
|
--el-button-hover-text-color: #eff6ff;
|
||||||
|
--el-button-active-bg-color: rgba(29, 78, 216, 0.44);
|
||||||
|
--el-button-active-border-color: rgba(96, 165, 250, 0.86);
|
||||||
|
--el-button-active-text-color: #eff6ff;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.query-form {
|
.query-form {
|
||||||
gap: 10px 12px;
|
gap: 10px 12px;
|
||||||
|
|||||||
@@ -26,6 +26,20 @@ html.dark {
|
|||||||
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
|
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-text):not(
|
||||||
|
.is-link
|
||||||
|
) {
|
||||||
|
--el-button-bg-color: rgba(15, 23, 42, 0.44);
|
||||||
|
--el-button-border-color: rgba(96, 165, 250, 0.38);
|
||||||
|
--el-button-text-color: #dbeafe;
|
||||||
|
--el-button-hover-bg-color: rgba(96, 165, 250, 0.16);
|
||||||
|
--el-button-hover-border-color: rgba(96, 165, 250, 0.58);
|
||||||
|
--el-button-hover-text-color: #bfdbfe;
|
||||||
|
--el-button-active-bg-color: rgba(59, 130, 246, 0.22);
|
||||||
|
--el-button-active-border-color: rgba(96, 165, 250, 0.72);
|
||||||
|
--el-button-active-text-color: #dbeafe;
|
||||||
|
}
|
||||||
|
|
||||||
// --- 各类型按钮(含 plain)在暗色下的 EP CSS 变量 ---
|
// --- 各类型按钮(含 plain)在暗色下的 EP CSS 变量 ---
|
||||||
.el-button--primary {
|
.el-button--primary {
|
||||||
--el-button-bg-color: #2b6bd3;
|
--el-button-bg-color: #2b6bd3;
|
||||||
@@ -41,8 +55,10 @@ html.dark {
|
|||||||
--el-button-bg-color: rgba(43, 107, 211, 0.12);
|
--el-button-bg-color: rgba(43, 107, 211, 0.12);
|
||||||
--el-button-border-color: rgba(58, 123, 232, 0.5);
|
--el-button-border-color: rgba(58, 123, 232, 0.5);
|
||||||
--el-button-text-color: #dbe8ff;
|
--el-button-text-color: #dbe8ff;
|
||||||
|
--el-button-hover-text-color: #dbe8ff;
|
||||||
--el-button-hover-bg-color: rgba(58, 123, 232, 0.2);
|
--el-button-hover-bg-color: rgba(58, 123, 232, 0.2);
|
||||||
--el-button-hover-border-color: rgba(58, 123, 232, 0.7);
|
--el-button-hover-border-color: rgba(58, 123, 232, 0.7);
|
||||||
|
--el-button-active-text-color: #dbe8ff;
|
||||||
--el-button-active-bg-color: rgba(43, 107, 211, 0.28);
|
--el-button-active-bg-color: rgba(43, 107, 211, 0.28);
|
||||||
--el-button-active-border-color: rgba(43, 107, 211, 0.8);
|
--el-button-active-border-color: rgba(43, 107, 211, 0.8);
|
||||||
}
|
}
|
||||||
@@ -61,8 +77,10 @@ html.dark {
|
|||||||
--el-button-bg-color: rgba(31, 138, 90, 0.12);
|
--el-button-bg-color: rgba(31, 138, 90, 0.12);
|
||||||
--el-button-border-color: rgba(41, 164, 109, 0.5);
|
--el-button-border-color: rgba(41, 164, 109, 0.5);
|
||||||
--el-button-text-color: #dbf6e8;
|
--el-button-text-color: #dbf6e8;
|
||||||
|
--el-button-hover-text-color: #dbf6e8;
|
||||||
--el-button-hover-bg-color: rgba(41, 164, 109, 0.2);
|
--el-button-hover-bg-color: rgba(41, 164, 109, 0.2);
|
||||||
--el-button-hover-border-color: rgba(41, 164, 109, 0.7);
|
--el-button-hover-border-color: rgba(41, 164, 109, 0.7);
|
||||||
|
--el-button-active-text-color: #dbf6e8;
|
||||||
--el-button-active-bg-color: rgba(31, 138, 90, 0.28);
|
--el-button-active-bg-color: rgba(31, 138, 90, 0.28);
|
||||||
--el-button-active-border-color: rgba(31, 138, 90, 0.8);
|
--el-button-active-border-color: rgba(31, 138, 90, 0.8);
|
||||||
}
|
}
|
||||||
@@ -81,8 +99,10 @@ html.dark {
|
|||||||
--el-button-bg-color: rgba(184, 121, 34, 0.12);
|
--el-button-bg-color: rgba(184, 121, 34, 0.12);
|
||||||
--el-button-border-color: rgba(214, 149, 59, 0.5);
|
--el-button-border-color: rgba(214, 149, 59, 0.5);
|
||||||
--el-button-text-color: #ffecc8;
|
--el-button-text-color: #ffecc8;
|
||||||
|
--el-button-hover-text-color: #ffecc8;
|
||||||
--el-button-hover-bg-color: rgba(214, 149, 59, 0.2);
|
--el-button-hover-bg-color: rgba(214, 149, 59, 0.2);
|
||||||
--el-button-hover-border-color: rgba(214, 149, 59, 0.7);
|
--el-button-hover-border-color: rgba(214, 149, 59, 0.7);
|
||||||
|
--el-button-active-text-color: #ffecc8;
|
||||||
--el-button-active-bg-color: rgba(184, 121, 34, 0.28);
|
--el-button-active-bg-color: rgba(184, 121, 34, 0.28);
|
||||||
--el-button-active-border-color: rgba(184, 121, 34, 0.8);
|
--el-button-active-border-color: rgba(184, 121, 34, 0.8);
|
||||||
}
|
}
|
||||||
@@ -101,8 +121,10 @@ html.dark {
|
|||||||
--el-button-bg-color: rgba(178, 74, 74, 0.12);
|
--el-button-bg-color: rgba(178, 74, 74, 0.12);
|
||||||
--el-button-border-color: rgba(209, 96, 96, 0.5);
|
--el-button-border-color: rgba(209, 96, 96, 0.5);
|
||||||
--el-button-text-color: #ffd6d6;
|
--el-button-text-color: #ffd6d6;
|
||||||
|
--el-button-hover-text-color: #ffd6d6;
|
||||||
--el-button-hover-bg-color: rgba(209, 96, 96, 0.2);
|
--el-button-hover-bg-color: rgba(209, 96, 96, 0.2);
|
||||||
--el-button-hover-border-color: rgba(209, 96, 96, 0.7);
|
--el-button-hover-border-color: rgba(209, 96, 96, 0.7);
|
||||||
|
--el-button-active-text-color: #ffd6d6;
|
||||||
--el-button-active-bg-color: rgba(178, 74, 74, 0.28);
|
--el-button-active-bg-color: rgba(178, 74, 74, 0.28);
|
||||||
--el-button-active-border-color: rgba(178, 74, 74, 0.8);
|
--el-button-active-border-color: rgba(178, 74, 74, 0.8);
|
||||||
}
|
}
|
||||||
@@ -121,8 +143,10 @@ html.dark {
|
|||||||
--el-button-bg-color: rgba(75, 85, 99, 0.16);
|
--el-button-bg-color: rgba(75, 85, 99, 0.16);
|
||||||
--el-button-border-color: rgba(102, 112, 133, 0.55);
|
--el-button-border-color: rgba(102, 112, 133, 0.55);
|
||||||
--el-button-text-color: #e5e7eb;
|
--el-button-text-color: #e5e7eb;
|
||||||
|
--el-button-hover-text-color: #e5e7eb;
|
||||||
--el-button-hover-bg-color: rgba(102, 112, 133, 0.22);
|
--el-button-hover-bg-color: rgba(102, 112, 133, 0.22);
|
||||||
--el-button-hover-border-color: rgba(102, 112, 133, 0.75);
|
--el-button-hover-border-color: rgba(102, 112, 133, 0.75);
|
||||||
|
--el-button-active-text-color: #e5e7eb;
|
||||||
--el-button-active-bg-color: rgba(75, 85, 99, 0.3);
|
--el-button-active-bg-color: rgba(75, 85, 99, 0.3);
|
||||||
--el-button-active-border-color: rgba(75, 85, 99, 0.85);
|
--el-button-active-border-color: rgba(75, 85, 99, 0.85);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user