mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-16 14:16:37 +08:00
feat: 完成全站深色主题改造
This commit is contained in:
ccnetcore
@@ -1,5 +1,13 @@
|
||||
/* ========== 深色主题 Element Plus 覆盖样式 ========== */
|
||||
|
||||
/* 深色主题通用 Div 样式 Mixin */
|
||||
@mixin dark-theme-div {
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 全局基础样式 */
|
||||
[data-theme="dark"] {
|
||||
background:
|
||||
@@ -124,7 +132,7 @@
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: var(--text-color-primary) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 聊天区域 */
|
||||
@@ -332,10 +340,7 @@
|
||||
|
||||
/* 表格 */
|
||||
.el-table {
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
.cell{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@@ -866,42 +871,29 @@
|
||||
/* 大标题样式 */
|
||||
h1 {
|
||||
color: #ffffff !important;
|
||||
font-size: 68px !important;
|
||||
line-height: 74px !important;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff !important;
|
||||
font-size: 24px !important;
|
||||
line-height: 62px !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffffff !important;
|
||||
font-size: 22px !important;
|
||||
line-height: 54px !important;
|
||||
}
|
||||
|
||||
/* 正文标题 */
|
||||
h4, h5, h6 {
|
||||
color: #ffffff !important;
|
||||
font-size: 28px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
/* 正文 */
|
||||
p {
|
||||
color: #a0a0a0 !important;
|
||||
line-height: 22px !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
/* 备注内容 */
|
||||
small, .note, .hint, .tip {
|
||||
color: #666 !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 18px !important;
|
||||
}
|
||||
|
||||
/* 链接 */
|
||||
@@ -1518,9 +1510,7 @@
|
||||
background: transparent !important;
|
||||
}
|
||||
.info-item{
|
||||
border-radius: 0 !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.info-value{
|
||||
color: #fff !important;
|
||||
@@ -1529,9 +1519,7 @@
|
||||
background: transparent !important;
|
||||
}
|
||||
.filter-toolbar{
|
||||
background: transparent !important;
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-select__wrapper{
|
||||
border-radius: 0 !important;
|
||||
@@ -1542,25 +1530,16 @@
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
}
|
||||
.toolbar{
|
||||
border-radius: 0 !important;
|
||||
background-color: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-card__header{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.header-title{
|
||||
color: #fff !important;
|
||||
}
|
||||
.token-table-wrapper{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.guide-title{
|
||||
color: #fff !important;
|
||||
@@ -1574,40 +1553,22 @@
|
||||
color: #fff !important;
|
||||
}
|
||||
.chart-container{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.stat-item{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.progress-section{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-alert{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.chart-container-wrapper{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.token-stat-item{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.token-value{
|
||||
color: #fff !important;
|
||||
@@ -1619,16 +1580,10 @@
|
||||
color: #fff !important;
|
||||
}
|
||||
.consumption-card{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.task-item{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.task-name{
|
||||
color: #fff !important;
|
||||
@@ -1650,27 +1605,16 @@
|
||||
border-radius: 0;
|
||||
}
|
||||
.tip-item{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.tools-panel{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.tool-item {
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-tabs--border-card{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-tabs--border-card>.el-tabs__header{
|
||||
border-radius: 0 !important;
|
||||
@@ -1681,23 +1625,175 @@
|
||||
background-color: rgba(0, 255, 136, 0.15) !important;
|
||||
}
|
||||
.channel-management{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-list-panel{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
color: #fff !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.app-list-panel{
|
||||
border-radius: 0 !important;
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, .2) !important;
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.bg-green-50{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-upload--picture-card{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.brand-container:hover{
|
||||
color: #00ff88 !important;
|
||||
background-color: rgba(0, 255, 136, 0.15) !important;
|
||||
}
|
||||
.announcement-tabs .el-tabs__header{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.activity-content .activity-item{
|
||||
@include dark-theme-div;
|
||||
|
||||
}
|
||||
.activity-title h3{
|
||||
color: #fff !important;
|
||||
}
|
||||
.activity-content .activity-title{
|
||||
-webkit-text-fill-color: #fff !important;
|
||||
}
|
||||
.announcement-content .announcement-item{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.popover-content{
|
||||
@include dark-theme-div;
|
||||
background-color: #04080b !important;
|
||||
}
|
||||
.popover-box-item{
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
}
|
||||
.text-gray-800{
|
||||
color: #fff !important;
|
||||
}
|
||||
.popover-content-box-items:hover{
|
||||
border: 1px solid rgba(0, 255, 136, 0.4);
|
||||
border-radius: 0;
|
||||
}
|
||||
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-sub-menu__title{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-table tbody tr:hover{
|
||||
transition: none;
|
||||
}
|
||||
.footer-wrapper{
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-bubble-content-wrapper .el-bubble-content{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.markdown-body p{
|
||||
color: #fff !important;
|
||||
}
|
||||
.footer-time .el-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.desktop-layout .package-card{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.contact-service-card{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-library-card-mobile{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.desktop-layout .right-panel .benefits-list .benefit-item{
|
||||
color: #fff !important;
|
||||
}
|
||||
.section-title{
|
||||
color: #fff !important;
|
||||
}
|
||||
.el-dialog .el-dialog__body{
|
||||
color: #fff !important;
|
||||
}
|
||||
.desktop-layout .package-card.selected{
|
||||
border: 1px solid rgba(0, 255, 136, 0.4) !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.newbie-guide-container{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.newbie-header{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.purchase-card{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.taobao-code-box{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.code-text{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.tips-box{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.activation-guide-container{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.contact-section{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-library-card{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-library-container{
|
||||
background: transparent !important;
|
||||
}
|
||||
.filter-section{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-card{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.el-check-tag.el-check-tag--primary.is-checked{
|
||||
color: #00ff88 !important;
|
||||
}
|
||||
.el-check-tag{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-id{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-id-label{
|
||||
color: #fff !important;
|
||||
}
|
||||
.model-id-value{
|
||||
color: #fff !important;
|
||||
}
|
||||
.model-library-container .main-content .content-wrapper .model-list-section .model-grid .model-card .model-card-header .model-icon .icon-img{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.model-library-container .main-content .content-wrapper .model-list-section .model-grid .model-card .model-description:hover
|
||||
{
|
||||
background: transparent !important;
|
||||
border: 1px solid rgba(0, 255, 136, 0.4) !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.theme-btn-container .theme-btn[data-v-20012115]:hover{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.loading-wrapper{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.empty-wrapper{
|
||||
@include dark-theme-div;
|
||||
}
|
||||
.session-sidebar .session-item{
|
||||
color: #CFD3DC !important;
|
||||
}
|
||||
.model-name{
|
||||
color: #fff !important;
|
||||
}
|
||||
.model-logo{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user
