MengYX
4 years ago
committed by
GitHub
GitHub
10 changed files with 1101 additions and 309 deletions
File diff suppressed because it is too large
@ -0,0 +1,166 @@ |
|||
/* |
|||
* name: 样式 - 夜间模式 |
|||
* author: @KyleBing |
|||
* date: 2020-11-24 |
|||
*/ |
|||
|
|||
@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; |
|||
.el-checkbox__inner{ |
|||
background-color: $dark-btn-bg; |
|||
border-color: $dark-border; |
|||
} |
|||
&: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: $dark-btn-bg-highlight; |
|||
} |
|||
.el-checkbox__label{ |
|||
color: white; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
// 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; |
|||
} |
|||
} |
|||
} |
|||
&--danger{ |
|||
&.is-plain{ |
|||
border-color: $dark-border; |
|||
background-color: $dark-btn-bg; |
|||
&:hover{ |
|||
background-color: $red; |
|||
border-color: $red; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 文件拖放区 |
|||
.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{ |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
/* |
|||
* 间隔工具集 |
|||
*/ |
|||
|
|||
$gap: 5px; |
|||
@for $item from 1 through 7 { |
|||
.mt-#{$item} { margin-top : $gap * $item !important;} |
|||
.mb-#{$item} { margin-bottom : $gap * $item !important;} |
|||
.ml-#{$item} { margin-left : $gap * $item !important;} |
|||
.mr-#{$item} { margin-right : $gap * $item !important;} |
|||
.m-#{$item} { margin : $gap * $item !important;} |
|||
|
|||
.pt-#{$item} { padding-top : $gap * $item !important;} |
|||
.pb-#{$item} { padding-bottom : $gap * $item !important;} |
|||
.pl-#{$item} { padding-left : $gap * $item !important;} |
|||
.pr-#{$item} { padding-right : $gap * $item !important;} |
|||
.p-#{$item} { padding : $gap * $item !important;} |
|||
} |
|||
@ -0,0 +1,38 @@ |
|||
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; |
|||
} |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
// COLORS |
|||
$blue : #409EFF; |
|||
$red : #F56C6C; |
|||
$green : #85ce61; |
|||
|
|||
// TEXT |
|||
$text-main : #2C3E50; |
|||
$color-link: $blue; |
|||
|
|||
$fz-main: 14px; |
|||
|
|||
$font-family: "Helvetica Neue", Helvetica, "PingFang SC", |
|||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
|||
|
|||
|
|||
// DARK MODE |
|||
$dark-border : lighten(black, 25%); |
|||
$dark-border-highlight : lighten(black, 55%); |
|||
$dark-bg : lighten(black, 10%); |
|||
$dark-text-main : lighten(black, 90%); |
|||
$dark-text-info : lighten(black, 60%); |
|||
$dark-uploader-bg : lighten(black, 13%); |
|||
$dark-uploader-bg-highlight : lighten(black, 18%); |
|||
$dark-btn-bg : lighten(black, 20%); |
|||
$dark-btn-bg-highlight : lighten(black, 30%); |
|||
$dark-bg-th : lighten(black, 18%); |
|||
$dark-bg-td : lighten(black, 13%); |
|||
$dark-color-link : $green; |
|||
@ -0,0 +1,5 @@ |
|||
@import "variables"; |
|||
@import "gaps"; |
|||
|
|||
@import "normal"; |
|||
@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级 |
|||
Loading…
Reference in new issue