forked from um/web
257 lines
4.9 KiB
SCSS
257 lines
4.9 KiB
SCSS
/*
|
|
* 样式 - 暗黑模式
|
|
*/
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#app{
|
|
color: $dark-text-info;
|
|
}
|
|
body{
|
|
background-color: $dark-bg;
|
|
}
|
|
|
|
// FORM
|
|
.el-radio{
|
|
&__label{
|
|
color: $dark-text-main;
|
|
}
|
|
&__input{
|
|
color: $dark-text-info;
|
|
.el-radio__inner{
|
|
border-color: $dark-border;
|
|
background-color: $dark-btn-bg;
|
|
}
|
|
}
|
|
|
|
&.is-checked{
|
|
.el-radio__inner{
|
|
background-color: $blue;
|
|
}
|
|
.el-radio__label{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-checkbox.is-bordered{
|
|
border-color: $dark-border;
|
|
color: $dark-text-main;
|
|
background-color: $dark-btn-bg;
|
|
.el-checkbox__inner{
|
|
background-color: $dark-btn-bg-highlight;
|
|
border-color: $dark-border-highlight;
|
|
}
|
|
&:hover{
|
|
border-color: $dark-border-highlight;
|
|
.el-checkbox__inner{
|
|
background-color: $dark-btn-bg-highlight;
|
|
border-color: $dark-border-highlight;
|
|
}
|
|
.el-checkbox__label{
|
|
color: $dark-text-info;
|
|
}
|
|
}
|
|
&.is-checked{
|
|
background-color: $blue;
|
|
.el-checkbox__inner{
|
|
border-color: white;
|
|
}
|
|
.el-checkbox__label{
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
&:hover{
|
|
border-color: $blue;
|
|
.el-checkbox__inner{
|
|
background-color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// BUTTON
|
|
.el-button{
|
|
background-color: $dark-btn-bg;
|
|
border-color: $dark-border;
|
|
color: $dark-text-main;
|
|
|
|
&:active{
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
&--default{
|
|
&.is-plain {
|
|
background-color: $dark-btn-bg;
|
|
&:hover {
|
|
background-color: $blue;
|
|
border-color: $blue;
|
|
color: white;
|
|
}
|
|
}
|
|
&.is-circle {
|
|
background-color: $dark-blue;
|
|
border-color: $dark-blue;
|
|
&:hover {
|
|
background-color: $blue;
|
|
border-color: $blue;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--success{
|
|
&.is-plain {
|
|
background-color: $dark-btn-bg;
|
|
&:hover {
|
|
background-color: $green;
|
|
border-color: $green;
|
|
color: white;
|
|
}
|
|
}
|
|
&.is-circle {
|
|
background-color: $dark-green;
|
|
border-color: $dark-green;
|
|
&:hover {
|
|
background-color: $green;
|
|
border-color: $green;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
&--danger{
|
|
&.is-plain{
|
|
border-color: $dark-border;
|
|
background-color: $dark-btn-bg;
|
|
&:hover{
|
|
background-color: $red;
|
|
border-color: $red;
|
|
}
|
|
}
|
|
&.is-circle {
|
|
background-color: $dark-red;
|
|
border-color: $dark-red;
|
|
&:hover {
|
|
background-color: $red;
|
|
border-color: $red;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 文件拖放区
|
|
.el-upload__tip{
|
|
color: $dark-text-info;
|
|
}
|
|
.el-upload-dragger{
|
|
background-color: $dark-uploader-bg;
|
|
border-color: $dark-border;
|
|
.el-upload__text{
|
|
color: $dark-text-info;
|
|
}
|
|
&:hover{
|
|
background: $dark-uploader-bg-highlight;
|
|
border-color: $dark-border-highlight;
|
|
}
|
|
}
|
|
|
|
// TABLE
|
|
.el-table{
|
|
background-color: $dark-bg-td;
|
|
&:before{ // 去除表格末尾的横线
|
|
content: none;
|
|
}
|
|
&__header{
|
|
th{
|
|
border-bottom-color: $dark-border !important;
|
|
}
|
|
}
|
|
th.el-table__cell{
|
|
background-color: $dark-bg-th;
|
|
color: $dark-text-info;
|
|
}
|
|
td{
|
|
border-bottom-color: $dark-border !important;
|
|
}
|
|
tr{
|
|
background-color: $dark-bg-td;
|
|
color: $dark-text-main;
|
|
&:hover{
|
|
td{
|
|
background-color: $dark-bg-th !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// LINKS
|
|
a{
|
|
text-decoration: none;
|
|
color: darken($dark-color-link, 15%);
|
|
&:hover{
|
|
color: $dark-color-link;
|
|
}
|
|
}
|
|
|
|
// ALERT
|
|
.el-notification{
|
|
background-color: $dark-btn-bg-highlight;
|
|
border-color: $dark-border;
|
|
&__title{
|
|
color: white;
|
|
}
|
|
&__content{
|
|
color: $dark-text-info;
|
|
}
|
|
}
|
|
|
|
// DIALOG
|
|
.el-dialog{
|
|
background-color: $dark-dialog-bg;
|
|
.el-dialog__header{
|
|
.el-dialog__title{
|
|
color: $dark-text-main;
|
|
}
|
|
}
|
|
.el-dialog__body{
|
|
color: $dark-text-main;
|
|
.el-input{
|
|
.el-input__inner{
|
|
color: $dark-text-main;
|
|
background-color: $dark-btn-bg;
|
|
}
|
|
.el-input__suffix{
|
|
.el-input__suffix-inner{
|
|
}
|
|
}
|
|
.el-input__count{
|
|
.el-input__count-inner{
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item-desc{
|
|
color: $dark-text-info;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 自定义样式
|
|
// 首页弹窗提示信息的 更新信息 面板
|
|
.update-info{
|
|
border: 1px solid $dark-btn-bg !important;
|
|
.update-title{
|
|
color: $dark-text-main;
|
|
background-color: $dark-btn-bg !important;
|
|
}
|
|
.update-content{
|
|
color: $dark-text-info;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
}
|