Files
BlackFruit-UI/clientarea/hgcloud/css/dark-override.css
yiqiu 0d5b39fec6
All checks were successful
continuous-integration/drone/push Build is passing
fix: 修复刷新时背景乱码
#mainLoading 背景从半透明 rgba(255,255,255,0.6) 改为
与页面一致的不透明渐变背景,覆盖住 Vue 未编译的模板
语法(花括号等),避免刷新时透出乱码
2026-03-20 09:09:44 +08:00

790 lines
17 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/*
* ========================================
* 会员中心全局暗色主题覆盖
* dark-override.css
* ========================================
* 覆盖 common.css 和 Element UI 默认的浅色样式
* 在 header.php 中引入,影响所有登录后页面
*/
/* ============ 基础层 — 渐变背景 ============ */
html, body {
background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 30%, #dbeafe 60%, #e0f2fe 100%) !important;
background-attachment: fixed !important;
color: #1D2129 !important;
min-height: 100vh;
}
#mainLoading {
background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 30%, #dbeafe 60%, #e0f2fe 100%) !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 9999 !important;
}
#mainLoading.pro-des::before {
background: linear-gradient(135deg, #e8f0fe 0%, #f0e6ff 30%, #dbeafe 60%, #e0f2fe 100%) !important;
}
.template:first-child {
display: none;
}
/* ============ 布局CSS Grid 全宽顶栏 + 浮岛间距 ============ */
.template > .el-container {
display: grid !important;
grid-template-columns: 228px 1fr !important;
grid-template-rows: 64px 1fr !important;
min-height: 100vh !important;
width: 100% !important;
gap: 0 !important;
background: transparent !important;
}
/* 内层 el-container: display:contents */
.template > .el-container > .el-container {
display: contents !important;
}
/* top-menu 组件的 <div> 包裹层 display:contents */
.template > .el-container > .el-container > div {
display: contents !important;
}
/* ============ 顶栏 — 透明 ============ */
.el-header {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100% !important;
height: 64px !important;
position: relative !important;
top: auto !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border-bottom: none !important;
border-radius: 0 !important;
z-index: 100 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 24px !important;
}
/* ============ 侧边栏 — 磨砂玻璃浮岛 ============ */
.template > .el-container > .el-aside {
grid-column: 1 !important;
grid-row: 2 !important;
width: 228px !important;
height: auto !important;
position: relative !important;
top: auto !important;
margin: 0 0 20px 20px !important;
padding: 0 !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
min-height: 0 !important;
}
/* 隐藏侧边栏原有 logo (已移到顶栏) */
.el-aside > a:first-child {
display: none !important;
}
/* 侧边栏菜单上边距和内边距 */
.el-aside .menu-top {
margin-top: 8px !important;
padding: 0 12px !important;
}
/* ============ 主内容区 — 磨砂玻璃浮岛 ============ */
.el-main {
grid-column: 2 !important;
grid-row: 2 !important;
margin: 0 20px 20px 20px !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04) !important;
padding: 24px !important;
min-height: 0 !important;
}
/* ============ 顶栏 Logo ============ */
.header-logo-link {
display: flex;
align-items: center;
margin-right: 20px;
cursor: pointer;
text-decoration: none;
}
.header-logo {
height: 36px;
width: auto;
}
/* ============ 顶栏右侧按钮 — 圆形磨砂 ============ */
.header-right .header-right-item .right-item,
.header-right .header-right-item .el-dropdown-header {
background: rgba(255, 255, 255, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 50% !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
transition: all 0.2s ease !important;
}
.header-right .header-right-item .right-item:hover,
.header-right .header-right-item .el-dropdown-header:hover {
background: rgba(255, 255, 255, 0.85) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
.ali-logo {
filter: none;
}
/* ============ 侧边栏菜单 — 胶囊高亮 ============ */
.menu-top .el-menu-item {
color: #4E5969 !important;
border-radius: 10px !important;
margin: 2px 0 !important;
height: 44px !important;
line-height: 44px !important;
transition: all 0.2s !important;
border-bottom: none !important;
}
.menu-top .el-menu-item i {
color: #4E5969 !important;
transition: color 0.2s !important;
}
.menu-top .el-menu-item:hover {
background-color: rgba(22, 93, 255, 0.04) !important;
color: #1D2129 !important;
border-bottom: none !important;
}
.menu-top .el-menu-item:hover i {
color: #1D2129 !important;
}
.menu-top .el-menu-item.is-active {
background-color: rgba(22, 93, 255, 0.08) !important;
color: #165DFF !important;
border-bottom: none !important;
font-weight: 500 !important;
}
.menu-top .el-menu-item.is-active i {
color: #165DFF !important;
}
/* 子菜单 */
.menu-top .el-submenu__title {
color: #4E5969 !important;
border-radius: 10px !important;
height: 44px !important;
line-height: 44px !important;
transition: all 0.2s !important;
}
.menu-top .el-submenu__title i {
color: #4E5969 !important;
}
.menu-top .el-submenu__title:hover {
background-color: rgba(22, 93, 255, 0.04) !important;
color: #1D2129 !important;
}
.menu-top .el-submenu__title:hover i {
color: #1D2129 !important;
}
.menu-top .el-submenu .el-menu-item:hover {
background-color: rgba(22, 93, 255, 0.04) !important;
color: #1D2129 !important;
}
.menu-top .el-submenu .el-menu-item.is-active {
background-color: rgba(22, 93, 255, 0.08) !important;
color: #165DFF !important;
font-weight: 500 !important;
}
/* Element UI 菜单整体背景 */
.el-menu {
background-color: transparent !important;
border-right: none !important;
}
/* ============ 顶栏子元素 ============ */
.el-header .search-value,
.el-header .search-name {
color: #4E5969 !important;
}
.header-right .header-right-item .el-dropdown-header .head-box {
background: #F5F7FA !important;
}
.header-right .header-right-item .un-login {
color: #4E5969 !important;
}
.header-right .header-right-item .cloum-line {
border-color: rgba(0,0,0,0.06) !important;
}
.header-left .el-input input {
background: rgba(255,255,255,0.4) !important;
color: #1D2129 !important;
border-radius: 10px !important;
}
/* 顶栏图标颜色 */
.header-right .header-right-item i {
color: #4E5969 !important;
}
.header-right .header-right-item i:hover {
color: #165DFF !important;
}
.main-card {
background: rgba(255,255,255,0.7) !important;
color: #1D2129 !important;
border-radius: 16px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
border: 1px solid rgba(255,255,255,0.8);
}
.main-card-title {
color: #1D2129 !important;
}
/* ============ Element UI 输入框 ============ */
.el-input__inner {
background-color: #FFFFFF !important;
border: 1px solid #DCDFE6 !important;
color: #1a1a1a !important;
transition: border-color 0.2s;
}
.el-input__inner:hover {
border-color: #B0B3B8 !important;
}
.el-input__inner:focus {
border-color: #165DFF !important;
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1) !important;
}
.el-input__inner::placeholder {
color: #C0C4CC !important;
}
.el-input.is-disabled .el-input__inner {
background-color: #F5F7FA !important;
color: #C0C4CC !important;
}
.el-input__prefix,
.el-input__suffix {
color: #909399 !important;
}
.el-textarea__inner {
background-color: #FFFFFF !important;
border: 1px solid #DCDFE6 !important;
color: #1a1a1a !important;
}
.el-textarea__inner:focus {
border-color: #165DFF !important;
}
/* ============ Element UI 选择器 ============ */
.el-select-dropdown {
background-color: #FFFFFF !important;
border: 1px solid #E4E7ED !important;
}
.el-select-dropdown__item {
color: #1a1a1a !important;
}
.el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
background-color: #F5F7FA !important;
}
.el-select-dropdown__item.selected {
color: #165DFF !important;
}
/* ============ Element UI 表格 ============ */
.el-table {
background-color: #FFFFFF !important;
color: #1a1a1a !important;
}
.el-table::before,
.el-table::after {
background-color: #EBEEF5 !important;
}
.el-table th,
.el-table th.el-table__cell {
background-color: #FAFAFA !important;
color: #5f6368 !important;
border-bottom: 1px solid #EBEEF5 !important;
}
.el-table tr {
background-color: #FFFFFF !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background-color: #FAFAFA !important;
}
.el-table td,
.el-table td.el-table__cell {
border-bottom: 1px solid #EBEEF5 !important;
color: #1a1a1a !important;
}
.el-table__body tr:hover > td.el-table__cell {
background-color: #F5F7FA !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: #F5F7FA !important;
}
/* ============ Element UI Tabs ============ */
.el-tabs__header {
border-bottom-color: #E4E7ED !important;
}
.el-tabs__item {
color: #5f6368 !important;
}
.el-tabs__item:hover {
color: #1a1a1a !important;
}
.el-tabs__item.is-active {
color: #165DFF !important;
}
.el-tabs__active-bar {
background-color: #165DFF !important;
}
.el-tabs__nav-wrap::after {
background-color: #E4E7ED !important;
}
/* ============ Element UI 弹窗 ============ */
.el-dialog {
background-color: #FFFFFF !important;
border: none;
box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}
.el-dialog__header {
border-bottom: 1px solid #E4E7ED;
}
.el-dialog__title {
color: #1a1a1a !important;
}
.el-dialog__headerbtn .el-dialog__close {
color: #909399 !important;
}
.el-dialog__body {
color: #1a1a1a !important;
}
.dialog-title {
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 {
background: #165DFF !important;
color: #FFFFFF !important;
border: none !important;
}
.dialog-footer .btn-ok:hover {
background: #0E42D2 !important;
}
.dialog-footer .btn-no {
background: #F5F7FA !important;
color: #5f6368 !important;
border: 1px solid #DCDFE6 !important;
}
/* ============ Element UI 按钮 ============ */
.el-button {
background-color: #FFFFFF !important;
border: 1px solid #DCDFE6 !important;
color: #5f6368 !important;
}
.el-button:hover,
.el-button:focus {
background-color: #F5F7FA !important;
border-color: #B0B3B8 !important;
color: #1a1a1a !important;
}
.el-button--primary {
background-color: #165DFF !important;
border-color: #165DFF !important;
color: #FFFFFF !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
background-color: #0E42D2 !important;
border-color: #0E42D2 !important;
}
.el-button--primary.is-plain {
background-color: rgba(22, 93, 255, 0.06) !important;
border-color: rgba(22, 93, 255, 0.3) !important;
color: #165DFF !important;
}
.el-button--text {
background: transparent !important;
border: none !important;
color: #165DFF !important;
}
.el-button.is-disabled,
.el-button.is-disabled:hover {
background-color: #F5F7FA !important;
color: #C0C4CC !important;
border-color: #E4E7ED !important;
}
/* ============ Element UI 分页 ============ */
.el-pagination {
color: #8B949E !important;
}
.el-pagination button {
background-color: transparent !important;
color: #8B949E !important;
}
.el-pagination button:hover {
color: #165DFF !important;
}
.el-pager li {
border-color: #E4E7ED !important;
}
.el-pager li:hover {
color: #165DFF !important;
}
.el-pager li.active {
color: #165DFF !important;
background: rgba(22, 93, 255, 0.1) !important;
border-color: rgba(22, 93, 255, 0.3) !important;
}
.el-pagination .el-select .el-input .el-input__inner {
color: #8B949E !important;
}
.el-pagination__jump {
color: #8B949E !important;
}
/* ============ Element UI 复选框/单选框 ============ */
.el-checkbox__inner {
background-color: #FFFFFF !important;
border-color: #DCDFE6 !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #165DFF !important;
border-color: #165DFF !important;
}
.el-checkbox__label {
color: #1a1a1a !important;
}
.el-radio__inner {
background-color: #FFFFFF !important;
border-color: #DCDFE6 !important;
}
.el-radio__input.is-checked .el-radio__inner {
background-color: #165DFF !important;
border-color: #165DFF !important;
}
.el-radio__label {
color: #1a1a1a !important;
}
/* ============ Element UI 提示/警告 ============ */
.el-alert--error {
background-color: rgba(240, 20, 46, 0.08) !important;
border: 1px solid rgba(240, 20, 46, 0.15);
color: #F0142F !important;
}
.el-alert--error .el-alert__title {
color: #F0142F !important;
}
.el-alert--success {
background-color: rgba(61, 213, 152, 0.08) !important;
border: 1px solid rgba(61, 213, 152, 0.15);
}
.el-alert--info {
background-color: rgba(22, 93, 255, 0.06) !important;
border: 1px solid rgba(22, 93, 255, 0.12);
}
/* ============ Element UI 加载 ============ */
.el-loading-mask {
background-color: rgba(255, 255, 255, 0.8) !important;
}
/* ============ Element UI 分割线 ============ */
.el-divider {
background-color: #E4E7ED !important;
}
.el-divider--vertical {
background-color: #E4E7ED !important;
}
/* ============ Element UI Switch ============ */
.el-switch__core {
border-color: #DCDFE6 !important;
background-color: #DCDFE6 !important;
}
.el-switch.is-checked .el-switch__core {
background-color: #165DFF !important;
border-color: #165DFF !important;
}
/* ============ Element UI Popover ============ */
.el-popover {
background: #FFFFFF !important;
border: 1px solid #E4E7ED !important;
color: #1a1a1a !important;
}
/* ============ Element UI Form ============ */
.el-form-item__label {
color: #5f6368 !important;
}
/* ============ Element UI Form ============ */
.el-form-item__label {
color: #8B949E !important;
}
/* ============ Element UI Tag ============ */
.el-tag {
background-color: rgba(22, 93, 255, 0.1) !important;
border-color: rgba(22, 93, 255, 0.2) !important;
color: #165DFF !important;
}
/* ============ Element UI Dropdown ============ */
.el-dropdown-menu {
background-color: #FFFFFF !important;
border: 1px solid #E4E7ED !important;
}
.el-dropdown-menu__item {
color: #1a1a1a !important;
}
.el-dropdown-menu__item:hover,
.el-dropdown-menu__item--divided:hover {
background-color: #F5F7FA !important;
color: #165DFF !important;
}
.el-dropdown-menu__item--divided::before {
background-color: #E4E7ED !important;
}
/* ============ Element UI Message Box ============ */
.el-message-box {
background-color: #FFFFFF !important;
border: 1px solid #E4E7ED !important;
}
.el-message-box__title {
color: #1a1a1a !important;
}
.el-message-box__message {
color: #5f6368 !important;
}
/* ============ Element UI Popconfirm ============ */
.el-popconfirm {
color: #E6E8EB !important;
}
/* ============ Element UI Progress ============ */
.el-progress__text {
color: #E6E8EB !important;
}
/* ============ Element UI Badge ============ */
.el-badge__content {
border: none !important;
}
/* ============ 公共组件样式覆盖 ============ */
/* 搜索框 */
.com-search .el-input__suffix {
color: #8B949E !important;
}
/* 消息面板 */
.top-msg-box {
background: #FFFFFF !important;
}
.top-msg-box .msg-top .msg-top-left {
color: #1a1a1a !important;
}
.top-msg-box .msg-list .msg-item:hover {
background: #F5F7FA !important;
}
.top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-top {
color: #1a1a1a !important;
}
.top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-bottom {
color: #8B949E !important;
}
/* 支付弹窗 */
.pay-dialog .dia-title {
background: #FAFAFA !important;
color: #1a1a1a !important;
}
/* 蓝色文字链接 */
.bule-text,
.a-text {
color: #165DFF !important;
}
/* 通用卡片标题 */
.title-text {
color: #1a1a1a !important;
}
/* 优惠码弹窗 */
.discount-content {
background: #FFFFFF !important;
}
/* 滚动条暗色 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.12);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.2);
}
/* ============ Element UI DatePicker ============ */
.el-date-picker,
.el-picker-panel {
background: #FFFFFF !important;
border: 1px solid #E4E7ED !important;
color: #1a1a1a !important;
}
.el-date-picker .el-picker-panel__header,
.el-date-range-picker .el-picker-panel__header {
color: #1a1a1a !important;
}
.el-date-table th {
color: #5f6368 !important;
border-bottom-color: #EBEEF5 !important;
}
.el-date-table td.normal span,
.el-date-table td span {
color: #1a1a1a !important;
}
.el-date-table td.disabled span {
color: #C0C4CC !important;
}
.el-picker-panel__footer {
background: #FAFAFA !important;
border-top-color: #E4E7ED !important;
}