yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: clientarea 全面改为 VMRack 浅色风格
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 基础层: #0d1117 → #F5F7FA 浅灰背景
- 顶栏: 暗色毛玻璃 → 白色实底
- 侧边栏: 白色 + 蓝色胶囊选中
- 主内容区: 暗色 → #F5F7FA + 白色卡片 + 圆角阴影
- Element UI: 全部组件从暗色改为浅色
- 滚动条/弹窗/表格/按钮等全面适配浅色主题
This commit is contained in:
yiqiu
2026-03-20 08:02:38 +08:00
parent 6fbbda60d5
commit f9c0319b0c
1 changed files with 144 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
clientarea/hgcloud/css/dark-override.css
View File

@@ -9,16 +9,16 @@
/* ============ 基础层 ============ */ /* ============ 基础层 ============ */
html, body { html, body {
background-color: #0d1117 !important; background-color: #F5F7FA !important;
color: #E6E8EB !important; color: #1a1a1a !important;
} }
#mainLoading { #mainLoading {
background: #0d1117 !important; background: #FFFFFF !important;
} }
#mainLoading.pro-des::before { #mainLoading.pro-des::before {
background: #0d1117 !important; background: #FFFFFF !important;
} }
.template:first-child { .template:first-child {
@@ -107,10 +107,10 @@ html, body {
/* ============ 顶栏 ============ */ /* ============ 顶栏 ============ */
.el-header { .el-header {
background: rgba(13, 17, 23, 0.85) !important; background: #FFFFFF !important;
backdrop-filter: blur(12px) !important; backdrop-filter: none !important;
box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
border-bottom: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(0,0,0,0.06);
} }
.el-header .search-value, .el-header .search-value,
@@ -119,71 +119,82 @@ html, body {
} }
.header-right .header-right-item .el-dropdown-header .head-box { .header-right .header-right-item .el-dropdown-header .head-box {
background: #1c2028 !important; background: #F5F7FA !important;
} }
.header-right .header-right-item .un-login { .header-right .header-right-item .un-login {
color: #8B949E !important; color: #5f6368 !important;
} }
.header-right .header-right-item .cloum-line { .header-right .header-right-item .cloum-line {
border-color: rgba(255,255,255,0.08) !important; border-color: rgba(0,0,0,0.08) !important;
} }
.header-left .el-input input { .header-left .el-input input {
background: transparent !important; background: transparent !important;
color: #E6E8EB !important; color: #1a1a1a !important;
}
/* 顶栏图标颜色 */
.header-right .header-right-item i {
color: #5f6368 !important;
}
.header-right .header-right-item i:hover {
color: #165DFF !important;
} }
/* ============ 主内容区 ============ */ /* ============ 主内容区 ============ */
.el-main { .el-main {
background: #0d1117 !important; background: #F5F7FA !important;
} }
.main-card { .main-card {
background: #0d1117 !important; background: #FFFFFF !important;
color: #E6E8EB !important; color: #1a1a1a !important;
border-radius: 12px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
} }
.main-card-title { .main-card-title {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
/* ============ Element UI 输入框 ============ */ /* ============ Element UI 输入框 ============ */
.el-input__inner { .el-input__inner {
background-color: #1c2028 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.06) !important; border: 1px solid #DCDFE6 !important;
color: #E6E8EB !important; color: #1a1a1a !important;
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.el-input__inner:hover { .el-input__inner:hover {
border-color: rgba(22, 93, 255, 0.2) !important; border-color: #B0B3B8 !important;
} }
.el-input__inner:focus { .el-input__inner:focus {
border-color: #165DFF !important; border-color: #165DFF !important;
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15) !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important;
} }
.el-input__inner::placeholder { .el-input__inner::placeholder {
color: rgba(139, 148, 158, 0.5) !important; color: #C0C4CC !important;
} }
.el-input.is-disabled .el-input__inner { .el-input.is-disabled .el-input__inner {
background-color: rgba(28, 32, 40, 0.6) !important; background-color: #F5F7FA !important;
color: rgba(139, 148, 158, 0.5) !important; color: #C0C4CC !important;
} }
.el-input__prefix, .el-input__prefix,
.el-input__suffix { .el-input__suffix {
color: #8B949E !important; color: #909399 !important;
} }
.el-textarea__inner { .el-textarea__inner {
background-color: #1c2028 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.06) !important; border: 1px solid #DCDFE6 !important;
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-textarea__inner:focus { .el-textarea__inner:focus {
@@ -192,94 +203,74 @@ html, body {
/* ============ Element UI 选择器 ============ */ /* ============ Element UI 选择器 ============ */
.el-select-dropdown { .el-select-dropdown {
background-color: #1c2028 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #E4E7ED !important;
} }
.el-select-dropdown__item { .el-select-dropdown__item {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-select-dropdown__item:hover, .el-select-dropdown__item:hover,
.el-select-dropdown__item.hover { .el-select-dropdown__item.hover {
background-color: #21262d !important; background-color: #F5F7FA !important;
} }
.el-select-dropdown__item.selected { .el-select-dropdown__item.selected {
color: #165DFF !important; color: #165DFF !important;
} }
.el-select-dropdown__empty {
color: #8B949E !important;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: #1c2028 !important;
}
.el-popper[x-placement^=top] .popper__arrow::after {
border-top-color: #1c2028 !important;
}
/* ============ Element UI 表格 ============ */ /* ============ Element UI 表格 ============ */
.el-table { .el-table {
background-color: transparent !important; background-color: #FFFFFF !important;
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-table::before, .el-table::before,
.el-table::after { .el-table::after {
background-color: rgba(255,255,255,0.04) !important; background-color: #EBEEF5 !important;
} }
.el-table th, .el-table th,
.el-table th.el-table__cell { .el-table th.el-table__cell {
background-color: #161b22 !important; background-color: #FAFAFA !important;
color: #8B949E !important; color: #5f6368 !important;
border-bottom: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid #EBEEF5 !important;
} }
.el-table tr { .el-table tr {
background-color: #0d1117 !important; background-color: #FFFFFF !important;
} }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background-color: #161b22 !important; background-color: #FAFAFA !important;
} }
.el-table td, .el-table td,
.el-table td.el-table__cell { .el-table td.el-table__cell {
border-bottom: 1px solid rgba(255,255,255,0.04) !important; border-bottom: 1px solid #EBEEF5 !important;
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-table__body tr:hover > td.el-table__cell { .el-table__body tr:hover > td.el-table__cell {
background-color: #21262d !important; background-color: #F5F7FA !important;
} }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: #21262d !important; background-color: #F5F7FA !important;
}
.el-table__empty-block {
background-color: transparent !important;
}
.el-table__empty-text {
color: #8B949E !important;
} }
/* ============ Element UI Tabs ============ */ /* ============ Element UI Tabs ============ */
.el-tabs__header { .el-tabs__header {
border-bottom-color: rgba(255,255,255,0.06) !important; border-bottom-color: #E4E7ED !important;
} }
.el-tabs__item { .el-tabs__item {
color: #8B949E !important; color: #5f6368 !important;
} }
.el-tabs__item:hover { .el-tabs__item:hover {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
@@ -291,34 +282,46 @@ html, body {
} }
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
background-color: rgba(255,255,255,0.06) !important; background-color: #E4E7ED !important;
} }
/* ============ Element UI 弹窗 ============ */ /* ============ Element UI 弹窗 ============ */
.el-dialog { .el-dialog {
background-color: #161b22 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.06); border: none;
box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
} }
.el-dialog__header { .el-dialog__header {
border-bottom: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid #E4E7ED;
} }
.el-dialog__title { .el-dialog__title {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-dialog__headerbtn .el-dialog__close { .el-dialog__headerbtn .el-dialog__close {
color: #8B949E !important; color: #909399 !important;
} }
.el-dialog__body { .el-dialog__body {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.dialog-title { .dialog-title {
color: #E6E8EB !important; color: #1a1a1a !important;
}
.el-dialog__headerbtn .el-dialog__close {
color: #909399 !important;
}
.el-dialog__body {
color: #1a1a1a !important;
}
.dialog-title {
color: #1a1a1a !important;
} }
.dialog-footer .btn-ok { .dialog-footer .btn-ok {
@@ -332,23 +335,23 @@ html, body {
} }
.dialog-footer .btn-no { .dialog-footer .btn-no {
background: #21262d !important; background: #F5F7FA !important;
color: #E6E8EB !important; color: #5f6368 !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #DCDFE6 !important;
} }
/* ============ Element UI 按钮 ============ */ /* ============ Element UI 按钮 ============ */
.el-button { .el-button {
background-color: #21262d !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #DCDFE6 !important;
color: #E6E8EB !important; color: #5f6368 !important;
} }
.el-button:hover, .el-button:hover,
.el-button:focus { .el-button:focus {
background-color: #2a313a !important; background-color: #F5F7FA !important;
border-color: rgba(255,255,255,0.12) !important; border-color: #B0B3B8 !important;
color: #FFFFFF !important; color: #1a1a1a !important;
} }
.el-button--primary { .el-button--primary {
@@ -364,7 +367,7 @@ html, body {
} }
.el-button--primary.is-plain { .el-button--primary.is-plain {
background-color: rgba(22, 93, 255, 0.1) !important; background-color: rgba(22, 93, 255, 0.06) !important;
border-color: rgba(22, 93, 255, 0.3) !important; border-color: rgba(22, 93, 255, 0.3) !important;
color: #165DFF !important; color: #165DFF !important;
} }
@@ -377,9 +380,9 @@ html, body {
.el-button.is-disabled, .el-button.is-disabled,
.el-button.is-disabled:hover { .el-button.is-disabled:hover {
background-color: rgba(33, 38, 45, 0.5) !important; background-color: #F5F7FA !important;
color: rgba(139, 148, 158, 0.4) !important; color: #C0C4CC !important;
border-color: rgba(255,255,255,0.04) !important; border-color: #E4E7ED !important;
} }
/* ============ Element UI 分页 ============ */ /* ============ Element UI 分页 ============ */
@@ -397,9 +400,7 @@ html, body {
} }
.el-pager li { .el-pager li {
background-color: transparent !important; border-color: #E4E7ED !important;
color: #8B949E !important;
border-color: rgba(255,255,255,0.08) !important;
} }
.el-pager li:hover { .el-pager li:hover {
@@ -422,8 +423,8 @@ html, body {
/* ============ Element UI 复选框/单选框 ============ */ /* ============ Element UI 复选框/单选框 ============ */
.el-checkbox__inner { .el-checkbox__inner {
background-color: #1c2028 !important; background-color: #FFFFFF !important;
border-color: rgba(255,255,255,0.15) !important; border-color: #DCDFE6 !important;
} }
.el-checkbox__input.is-checked .el-checkbox__inner { .el-checkbox__input.is-checked .el-checkbox__inner {
@@ -432,12 +433,12 @@ html, body {
} }
.el-checkbox__label { .el-checkbox__label {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-radio__inner { .el-radio__inner {
background-color: #1c2028 !important; background-color: #FFFFFF !important;
border-color: rgba(255,255,255,0.15) !important; border-color: #DCDFE6 !important;
} }
.el-radio__input.is-checked .el-radio__inner { .el-radio__input.is-checked .el-radio__inner {
@@ -446,7 +447,7 @@ html, body {
} }
.el-radio__label { .el-radio__label {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
/* ============ Element UI 提示/警告 ============ */ /* ============ Element UI 提示/警告 ============ */
@@ -466,29 +467,28 @@ html, body {
} }
.el-alert--info { .el-alert--info {
background-color: rgba(22, 93, 255, 0.08) !important; background-color: rgba(22, 93, 255, 0.06) !important;
border: 1px solid rgba(22, 93, 255, 0.15); border: 1px solid rgba(22, 93, 255, 0.12);
color: #E6E8EB !important;
} }
/* ============ Element UI 加载 ============ */ /* ============ Element UI 加载 ============ */
.el-loading-mask { .el-loading-mask {
background-color: rgba(13, 17, 23, 0.8) !important; background-color: rgba(255, 255, 255, 0.8) !important;
} }
/* ============ Element UI 分割线 ============ */ /* ============ Element UI 分割线 ============ */
.el-divider { .el-divider {
background-color: rgba(255,255,255,0.06) !important; background-color: #E4E7ED !important;
} }
.el-divider--vertical { .el-divider--vertical {
background-color: rgba(255,255,255,0.06) !important; background-color: #E4E7ED !important;
} }
/* ============ Element UI Switch ============ */ /* ============ Element UI Switch ============ */
.el-switch__core { .el-switch__core {
border-color: rgba(255,255,255,0.1) !important; border-color: #DCDFE6 !important;
background-color: #21262d !important; background-color: #DCDFE6 !important;
} }
.el-switch.is-checked .el-switch__core { .el-switch.is-checked .el-switch__core {
@@ -498,9 +498,14 @@ html, body {
/* ============ Element UI Popover ============ */ /* ============ Element UI Popover ============ */
.el-popover { .el-popover {
background: #1c2028 !important; background: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #E4E7ED !important;
color: #E6E8EB !important; color: #1a1a1a !important;
}
/* ============ Element UI Form ============ */
.el-form-item__label {
color: #5f6368 !important;
} }
/* ============ Element UI Form ============ */ /* ============ Element UI Form ============ */
@@ -517,36 +522,36 @@ html, body {
/* ============ Element UI Dropdown ============ */ /* ============ Element UI Dropdown ============ */
.el-dropdown-menu { .el-dropdown-menu {
background-color: #1c2028 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #E4E7ED !important;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-dropdown-menu__item:hover, .el-dropdown-menu__item:hover,
.el-dropdown-menu__item--divided:hover { .el-dropdown-menu__item--divided:hover {
background-color: #21262d !important; background-color: #F5F7FA !important;
color: #FFFFFF !important; color: #165DFF !important;
} }
.el-dropdown-menu__item--divided::before { .el-dropdown-menu__item--divided::before {
background-color: rgba(255,255,255,0.06) !important; background-color: #E4E7ED !important;
} }
/* ============ Element UI Message Box ============ */ /* ============ Element UI Message Box ============ */
.el-message-box { .el-message-box {
background-color: #161b22 !important; background-color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #E4E7ED !important;
} }
.el-message-box__title { .el-message-box__title {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-message-box__message { .el-message-box__message {
color: #8B949E !important; color: #5f6368 !important;
} }
/* ============ Element UI Popconfirm ============ */ /* ============ Element UI Popconfirm ============ */
@@ -572,19 +577,19 @@ html, body {
/* 消息面板 */ /* 消息面板 */
.top-msg-box { .top-msg-box {
background: #1c2028 !important; background: #FFFFFF !important;
} }
.top-msg-box .msg-top .msg-top-left { .top-msg-box .msg-top .msg-top-left {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.top-msg-box .msg-list .msg-item:hover { .top-msg-box .msg-list .msg-item:hover {
background: #21262d !important; background: #F5F7FA !important;
} }
.top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-top { .top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-top {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-bottom { .top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-bottom {
@@ -593,8 +598,8 @@ html, body {
/* 支付弹窗 */ /* 支付弹窗 */
.pay-dialog .dia-title { .pay-dialog .dia-title {
background: #161b22 !important; background: #FAFAFA !important;
color: #E6E8EB !important; color: #1a1a1a !important;
} }
/* 蓝色文字链接 */ /* 蓝色文字链接 */
@@ -605,12 +610,12 @@ html, body {
/* 通用卡片标题 */ /* 通用卡片标题 */
.title-text { .title-text {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
/* 优惠码弹窗 */ /* 优惠码弹窗 */
.discount-content { .discount-content {
background: #1c2028 !important; background: #FFFFFF !important;
} }
/* 滚动条暗色 */ /* 滚动条暗色 */
@@ -624,42 +629,42 @@ html, body {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1); background: rgba(0,0,0,0.12);
border-radius: 3px; border-radius: 3px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2); background: rgba(0,0,0,0.2);
} }
/* ============ Element UI DatePicker ============ */ /* ============ Element UI DatePicker ============ */
.el-date-picker, .el-date-picker,
.el-picker-panel { .el-picker-panel {
background: #1c2028 !important; background: #FFFFFF !important;
border: 1px solid rgba(255,255,255,0.08) !important; border: 1px solid #E4E7ED !important;
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-date-picker .el-picker-panel__header, .el-date-picker .el-picker-panel__header,
.el-date-range-picker .el-picker-panel__header { .el-date-range-picker .el-picker-panel__header {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-date-table th { .el-date-table th {
color: #8B949E !important; color: #5f6368 !important;
border-bottom-color: rgba(255,255,255,0.06) !important; border-bottom-color: #EBEEF5 !important;
} }
.el-date-table td.normal span, .el-date-table td.normal span,
.el-date-table td span { .el-date-table td span {
color: #E6E8EB !important; color: #1a1a1a !important;
} }
.el-date-table td.disabled span { .el-date-table td.disabled span {
color: rgba(139,148,158,0.3) !important; color: #C0C4CC !important;
} }
.el-picker-panel__footer { .el-picker-panel__footer {
background: #161b22 !important; background: #FAFAFA !important;
border-top-color: rgba(255,255,255,0.06) !important; border-top-color: #E4E7ED !important;
} }