/* * ======================================== * 会员中心全局暗色主题覆盖 * dark-override.css * ======================================== * 覆盖 common.css 和 Element UI 默认的浅色样式 * 在 header.php 中引入,影响所有登录后页面 */ /* ============ 基础层 ============ */ html, body { background-color: #F5F7FA !important; color: #1a1a1a !important; } #mainLoading { background: #FFFFFF !important; } #mainLoading.pro-des::before { background: #FFFFFF !important; } .template:first-child { display: none; } /* ============ 侧边栏 ============ */ .el-aside { background: #FFFFFF !important; border-right: none !important; border-radius: 0 16px 16px 0 !important; box-shadow: 1px 0 3px rgba(0,0,0,0.04) !important; overflow-y: auto !important; overflow-x: hidden !important; } /* 去掉侧边栏旧的 margin-top(logo 已移到顶栏) */ .menu-top { margin-top: 12px !important; } .ali-logo { filter: none; } /* ============ 侧边栏菜单 — 胶囊高亮(白底) ============ */ .menu-top .el-menu-item { color: #5f6368 !important; border-radius: 8px !important; margin: 2px 0 !important; transition: all 0.2s !important; border-bottom: none !important; } .menu-top .el-menu-item i { color: #5f6368 !important; transition: color 0.2s !important; } .menu-top .el-menu-item:hover { background-color: rgba(0, 0, 0, 0.04) !important; color: #1a1a1a !important; border-bottom: none !important; } .menu-top .el-menu-item:hover i { color: #1a1a1a !important; } .menu-top .el-menu-item.is-active { background-color: rgba(22, 93, 255, 0.08) !important; color: #165DFF !important; border-bottom: none !important; } .menu-top .el-menu-item.is-active i { color: #165DFF !important; } /* 子菜单 */ .menu-top .el-submenu__title { color: #5f6368 !important; border-radius: 8px !important; transition: all 0.2s !important; } .menu-top .el-submenu__title i { color: #5f6368 !important; } .menu-top .el-submenu__title:hover { background-color: rgba(0, 0, 0, 0.04) !important; color: #1a1a1a !important; } .menu-top .el-submenu__title:hover i { color: #1a1a1a !important; } .menu-top .el-submenu .el-menu-item:hover { background-color: rgba(0, 0, 0, 0.04) !important; color: #1a1a1a !important; } .menu-top .el-submenu .el-menu-item.is-active { background-color: rgba(22, 93, 255, 0.08) !important; color: #165DFF !important; } /* Element UI 菜单整体背景 */ .el-menu { background-color: transparent !important; border-right: none !important; } /* ============ 顶栏 ============ */ .el-header { background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important; border-bottom: 1px solid rgba(0,0,0,0.06); } .el-header .search-value, .el-header .search-name { color: #8B949E !important; } .header-right .header-right-item .el-dropdown-header .head-box { background: #F5F7FA !important; } .header-right .header-right-item .un-login { color: #5f6368 !important; } .header-right .header-right-item .cloum-line { border-color: rgba(0,0,0,0.08) !important; } .header-left .el-input input { background: transparent !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 { background: #F5F7FA !important; } .main-card { background: #FFFFFF !important; color: #1a1a1a !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; } .main-card-title { color: #1a1a1a !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; }