MengYX
4 years ago
committed by
GitHub
commit
0fb30ddc17
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
Loading…
Reference in New Issue