Merge pull request 'remerge https://git.unlock-music.dev/um/web/pulls/30' (#67) from kylebing/web:master into master
Reviewed-on: https://git.unlock-music.dev/um/web/pulls/67 Reviewed-by: jixunmoe <jixunmoe@noreply.unlock-music.dev>remotes/origin/HEAD
鲁树人
1 year ago
commit
201e44fb38
@ -1,39 +0,0 @@
|
||||
$color-checkbox: $blue;
|
||||
$color-border-el: #DCDFE6;
|
||||
|
||||
$btn-radius: 6px;
|
||||
|
||||
/* FORM */
|
||||
// checkbox
|
||||
.el-checkbox.is-bordered{
|
||||
@include border-radius($btn-radius) ;
|
||||
&:hover{
|
||||
border-color: $color-checkbox;
|
||||
.el-checkbox__label{
|
||||
color: $color-checkbox;
|
||||
}
|
||||
}
|
||||
.el-checkbox__input.is-focus{
|
||||
.el-checkbox__inner{
|
||||
border-color: $color-border-el;
|
||||
}
|
||||
}
|
||||
&.is-checked{
|
||||
background-color: $color-checkbox;
|
||||
.el-checkbox__label{
|
||||
color: white;
|
||||
}
|
||||
.el-checkbox__inner{
|
||||
border-color: white;
|
||||
background-color: white;
|
||||
&:after{
|
||||
border-color: $color-checkbox;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// el-button
|
||||
.el-button{
|
||||
@include border-radius($btn-radius) ;
|
||||
}
|
||||
@ -0,0 +1,291 @@
|
||||
$color-checkbox: $blue;
|
||||
$color-border-el: #DCDFE6;
|
||||
|
||||
$btn-radius: 6px;
|
||||
|
||||
/* FORM */
|
||||
// checkbox
|
||||
.el-checkbox.is-bordered{
|
||||
@include border-radius($btn-radius) ;
|
||||
&:hover{
|
||||
border-color: $color-checkbox;
|
||||
.el-checkbox__label{
|
||||
color: $color-checkbox;
|
||||
}
|
||||
}
|
||||
.el-checkbox__input.is-focus{
|
||||
.el-checkbox__inner{
|
||||
border-color: $color-border-el;
|
||||
}
|
||||
}
|
||||
&.is-checked{
|
||||
background-color: $color-checkbox;
|
||||
.el-checkbox__label{
|
||||
color: white;
|
||||
}
|
||||
.el-checkbox__inner{
|
||||
border-color: white;
|
||||
background-color: white;
|
||||
&:after{
|
||||
border-color: $color-checkbox;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// el-button
|
||||
.el-button{
|
||||
@include border-radius($btn-radius) ;
|
||||
}
|
||||
|
||||
// upload
|
||||
.el-upload-dragger{
|
||||
&:hover{
|
||||
background-color: transparentize($color-checkbox, 0.9);
|
||||
}
|
||||
}
|
||||
.el-upload__tip{
|
||||
text-align: center;
|
||||
color: $text-comment;
|
||||
}
|
||||
|
||||
|
||||
// dialog
|
||||
.el-dialog{
|
||||
@include border-radius(5px);
|
||||
&.el-dialog--center{
|
||||
.el-dialog__body{
|
||||
padding: 25px 25px 15px;
|
||||
}
|
||||
.el-dialog__footer{
|
||||
padding: 10px 20px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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{
|
||||
border-color: $dark-border;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
body{
|
||||
font-family: $font-family;
|
||||
font-size: $fz-main;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
text-align: center;
|
||||
color: $text-main;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
#app-footer a {
|
||||
padding-left: 0.2em;
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
|
||||
#app-footer {
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
#app-control {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
audio{
|
||||
margin-bottom: 15px; // 播放控件与表格间隔
|
||||
}
|
||||
|
||||
a{
|
||||
color: darken($color-link, 15%);
|
||||
&:hover{
|
||||
color: $color-link;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue