KyleBing
4 years ago
9 changed files with 228 additions and 9 deletions
@ -0,0 +1,167 @@ |
|||
/* |
|||
* 样式 - 夜间模式 |
|||
* @KyleBing |
|||
* 2020-11-24 |
|||
*/ |
|||
|
|||
@media (prefers-color-scheme: dark) { |
|||
#app{ |
|||
color: $dark-color-text-info; |
|||
} |
|||
body{ |
|||
background-color: $dark-bg; |
|||
} |
|||
|
|||
// FORM |
|||
.el-radio{ |
|||
&__label{ |
|||
color: $dark-color-text; |
|||
} |
|||
&__input{ |
|||
color: $dark-color-text-info; |
|||
.el-radio__inner{ |
|||
border-color: $dark-color-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-color-border; |
|||
.el-checkbox__inner{ |
|||
background-color: $dark-btn-bg; |
|||
border-color: $dark-color-border; |
|||
} |
|||
&:hover{ |
|||
border-color: $dark-color-border-highlight; |
|||
.el-checkbox__inner{ |
|||
background-color: $dark-btn-bg-highlight; |
|||
border-color: $dark-color-border-highlight; |
|||
} |
|||
.el-checkbox__label{ |
|||
color: $dark-color-text-info; |
|||
} |
|||
} |
|||
&.is-checked{ |
|||
background-color: $blue; |
|||
.el-checkbox__inner{ |
|||
border-color: $dark-btn-bg-highlight; |
|||
} |
|||
.el-checkbox__label{ |
|||
color: white; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
// BUTTON |
|||
.el-button{ |
|||
background-color: $dark-btn-bg; |
|||
border-color: $dark-color-border; |
|||
color: $dark-color-text; |
|||
|
|||
&:active{ |
|||
transform: translateY(2px); |
|||
} |
|||
|
|||
&--default{ |
|||
&.is-plain { |
|||
background-color: $dark-btn-bg; |
|||
&:hover { |
|||
background-color: $blue; |
|||
border-color: $blue; |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
&--danger{ |
|||
&.is-plain{ |
|||
border-color: $dark-color-border; |
|||
background-color: $dark-btn-bg; |
|||
&:hover{ |
|||
background-color: $red; |
|||
border-color: $red; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 文件拖放区 |
|||
.el-upload__tip{ |
|||
color: $dark-color-text-info; |
|||
} |
|||
.el-upload-dragger{ |
|||
background-color: $dark-btn-bg; |
|||
border-color: $dark-color-border; |
|||
.el-upload__text{ |
|||
color: $dark-color-text-info; |
|||
} |
|||
&:hover{ |
|||
background: $dark-btn-bg; |
|||
border-color: $dark-color-border-highlight; |
|||
} |
|||
} |
|||
|
|||
//TABLE |
|||
.el-table{ |
|||
background-color: $dark-bg-td; |
|||
&:before{ // 去除表格末尾的横线 |
|||
content: none; |
|||
} |
|||
&__header{ |
|||
th{ |
|||
border-bottom-color: $dark-color-border !important; |
|||
} |
|||
} |
|||
th{ |
|||
background-color: $dark-bg-th; |
|||
color: $dark-color-text-info; |
|||
} |
|||
td{ |
|||
border-bottom-color: $dark-color-border !important; |
|||
} |
|||
tr{ |
|||
background-color: $dark-bg-td; |
|||
color: $dark-color-text; |
|||
&:hover{ |
|||
td{ |
|||
background-color: $dark-bg-th !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
// LINKS |
|||
$dark-link: $green; |
|||
a{ |
|||
text-decoration: none; |
|||
color: darken($dark-link, 15%); |
|||
&:hover{ |
|||
color: $dark-link; |
|||
} |
|||
} |
|||
|
|||
// ALERT |
|||
.el-notification{ |
|||
background-color: $dark-btn-bg-highlight; |
|||
border-color: $dark-color-border; |
|||
&__title{ |
|||
color: white; |
|||
} |
|||
&__content{ |
|||
color: $dark-color-text-info; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
/* |
|||
* 间隔工具集 |
|||
*/ |
|||
|
|||
$timer: 5px; |
|||
// common |
|||
@for $item from 1 through 7 { |
|||
.mt-#{$item} { margin-top : $timer * $item !important;} |
|||
.mb-#{$item} { margin-bottom : $timer * $item !important;} |
|||
.ml-#{$item} { margin-left : $timer * $item !important;} |
|||
.mr-#{$item} { margin-right : $timer * $item !important;} |
|||
.m-#{$item} { margin : $timer * $item !important;} |
|||
|
|||
.pt-#{$item} { padding-top : $timer * $item !important;} |
|||
.pb-#{$item} { padding-bottom : $timer * $item !important;} |
|||
.pl-#{$item} { padding-left : $timer * $item !important;} |
|||
.pr-#{$item} { padding-right : $timer * $item !important;} |
|||
.p-#{$item} { padding : $timer * $item !important;} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
$dark-color-border : lighten(black, 30%); |
|||
$dark-color-border-highlight : lighten(black, 55%); |
|||
$dark-bg : lighten(black, 8%); |
|||
$dark-color-text : lighten(black, 90%); |
|||
$dark-color-text-info : lighten(black, 60%); |
|||
$dark-btn-bg : lighten(black, 20%); |
|||
$dark-btn-bg-highlight : lighten(black, 30%); |
|||
$dark-bg-th : lighten(black, 20%); |
|||
$dark-bg-td : lighten(black, 15%); |
|||
|
|||
$blue: #409EFF; |
|||
$red: #F56C6C; |
|||
$green: #85ce61; |
|||
@ -0,0 +1 @@ |
|||
@media(prefers-color-scheme: dark){#app{color:#999}body{background-color:#141414}.el-radio__label{color:#e6e6e6}.el-radio__input{color:#999}.el-radio__input .el-radio__inner{border-color:#4d4d4d;background-color:#333}.el-radio.is-checked .el-radio__inner{background-color:#409eff}.el-radio.is-checked .el-radio__label{font-weight:bold}.el-checkbox.is-bordered{border-color:#4d4d4d}.el-checkbox.is-bordered .el-checkbox__inner{background-color:#333;border-color:#4d4d4d}.el-checkbox.is-bordered:hover{border-color:#8c8c8c}.el-checkbox.is-bordered:hover .el-checkbox__inner{background-color:#4d4d4d;border-color:#8c8c8c}.el-checkbox.is-bordered:hover .el-checkbox__label{color:#999}.el-checkbox.is-bordered.is-checked{background-color:#409eff}.el-checkbox.is-bordered.is-checked .el-checkbox__inner{border-color:#4d4d4d}.el-checkbox.is-bordered.is-checked .el-checkbox__label{color:#fff;font-weight:bold}.el-button{background-color:#333;border-color:#4d4d4d;color:#e6e6e6}.el-button:active{transform:translateY(2px)}.el-button--default.is-plain{background-color:#333}.el-button--default.is-plain:hover{background-color:#409eff;border-color:#409eff;color:#fff}.el-button--danger.is-plain{border-color:#4d4d4d;background-color:#333}.el-button--danger.is-plain:hover{background-color:#f56c6c;border-color:#f56c6c}.el-upload__tip{color:#999}.el-upload-dragger{background-color:#333;border-color:#4d4d4d}.el-upload-dragger .el-upload__text{color:#999}.el-upload-dragger:hover{background:#333;border-color:#8c8c8c}.el-table{background-color:#262626}.el-table:before{content:none}.el-table__header th{border-bottom-color:#4d4d4d !important}.el-table th{background-color:#333;color:#999}.el-table td{border-bottom-color:#4d4d4d !important}.el-table tr{background-color:#262626;color:#e6e6e6}.el-table tr:hover td{background-color:#333 !important}a{text-decoration:none;color:#5dad36}a:hover{color:#85ce61}.el-notification{background-color:#4d4d4d;border-color:#4d4d4d}.el-notification__title{color:#fff}.el-notification__content{color:#999}}.mt-1{margin-top:5px !important}.mb-1{margin-bottom:5px !important}.ml-1{margin-left:5px !important}.mr-1{margin-right:5px !important}.m-1{margin:5px !important}.pt-1{padding-top:5px !important}.pb-1{padding-bottom:5px !important}.pl-1{padding-left:5px !important}.pr-1{padding-right:5px !important}.p-1{padding:5px !important}.mt-2{margin-top:10px !important}.mb-2{margin-bottom:10px !important}.ml-2{margin-left:10px !important}.mr-2{margin-right:10px !important}.m-2{margin:10px !important}.pt-2{padding-top:10px !important}.pb-2{padding-bottom:10px !important}.pl-2{padding-left:10px !important}.pr-2{padding-right:10px !important}.p-2{padding:10px !important}.mt-3{margin-top:15px !important}.mb-3{margin-bottom:15px !important}.ml-3{margin-left:15px !important}.mr-3{margin-right:15px !important}.m-3{margin:15px !important}.pt-3{padding-top:15px !important}.pb-3{padding-bottom:15px !important}.pl-3{padding-left:15px !important}.pr-3{padding-right:15px !important}.p-3{padding:15px !important}.mt-4{margin-top:20px !important}.mb-4{margin-bottom:20px !important}.ml-4{margin-left:20px !important}.mr-4{margin-right:20px !important}.m-4{margin:20px !important}.pt-4{padding-top:20px !important}.pb-4{padding-bottom:20px !important}.pl-4{padding-left:20px !important}.pr-4{padding-right:20px !important}.p-4{padding:20px !important}.mt-5{margin-top:25px !important}.mb-5{margin-bottom:25px !important}.ml-5{margin-left:25px !important}.mr-5{margin-right:25px !important}.m-5{margin:25px !important}.pt-5{padding-top:25px !important}.pb-5{padding-bottom:25px !important}.pl-5{padding-left:25px !important}.pr-5{padding-right:25px !important}.p-5{padding:25px !important}.mt-6{margin-top:30px !important}.mb-6{margin-bottom:30px !important}.ml-6{margin-left:30px !important}.mr-6{margin-right:30px !important}.m-6{margin:30px !important}.pt-6{padding-top:30px !important}.pb-6{padding-bottom:30px !important}.pl-6{padding-left:30px !important}.pr-6{padding-right:30px !important}.p-6{padding:30px !important}.mt-7{margin-top:35px !important}.mb-7{margin-bottom:35px !important}.ml-7{margin-left:35px !important}.mr-7{margin-right:35px !important}.m-7{margin:35px !important}.pt-7{padding-top:35px !important}.pb-7{padding-bottom:35px !important}.pl-7{padding-left:35px !important}.pr-7{padding-right:35px !important}.p-7{padding:35px !important}body{font-size:14px}audio{margin-bottom:15px}a{color:#0077f3}a:hover{color:#409eff} |
|||
@ -0,0 +1,21 @@ |
|||
@import "variables"; |
|||
@import "dark-mode"; |
|||
@import "gaps"; |
|||
|
|||
body{ |
|||
font-size: 14px; |
|||
} |
|||
|
|||
// 播放控件与正文表格间隔 |
|||
audio{ |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
$link: $blue; |
|||
a{ |
|||
//text-decoration: none; |
|||
color: darken($link, 15%); |
|||
&:hover{ |
|||
color: $link; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue