um/web
um/web
95
188
Fork 0
Code Issues 9 Pull Requests Packages Releases 5 Wiki Activity

暗黑模式颜色调整，载入页颜色适配黑色

Browse Source
This commit is contained in:
KyleBing 2020-11-25 14:38:29 +08:00
parent a040c88a07
commit 5e2f3d36c2
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -13,7 +13,7 @@
<meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords"/>
<meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/>
<!--@formatter:off-->
<style> #loader {position: absolute;left: 50%;top: 50%;z-index: 1010;margin: -75px 0 0 -75px;border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;width: 120px;height: 120px;animation: spin 2s linear infinite} @keyframes spin { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } #loader-mask {text-align: center;position: absolute;width: 100%;height: 100%;bottom: 0;left: 0;right: 0;top: 0;z-index: 1009;background-color: rgba(242, 246, 252, 0.88)} #loader-source{font-size: 1.5rem;} #loader-tips-timeout{font-size: 1.2rem;}</style>
<style>#loader{position:absolute;left:50%;top:50%;z-index:1010;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #1db1ff;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#loader-mask{text-align:center;position:absolute;width:100%;height:100%;bottom:0;left:0;right:0;top:0;z-index:1009;background-color:rgba(242,246,252,.88)}@media (prefers-color-scheme:dark){#loader-mask{color:#fff;background-color:rgba(0,0,0,.85)}#loader-mask a{color:#ddd}#loader-mask a:hover{color:#1db1ff}}#loader-source{font-size:1.5rem}#loader-tips-timeout{font-size:1.2rem}</style>
<!--@formatter:on-->
</head>
<body>

4
src/scss/_dark-mode.scss
View File

@ -102,13 +102,13 @@
color: $dark-text-info;
}
.el-upload-dragger{
background-color: $dark-btn-bg;
background-color: $dark-uploader-bg;
border-color: $dark-border;
.el-upload__text{
color: $dark-text-info;
}
&:hover{
background: $dark-btn-bg;
background: $dark-uploader-bg-highlight;
border-color: $dark-border-highlight;
}
}

9
src/scss/_normal.scss
View File

@ -1,9 +1,11 @@
#app {
body{
font-family: $font-family;
font-size: $fz-main;
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app {
text-align: center;
color: $text-main;
padding-top: 30px;
@ -28,7 +30,6 @@ audio{
margin-bottom: 15px; // 播放控件与表格间隔
}
a{
color: darken($color-link, 15%);
&:hover{

34
src/scss/_variables.scss
View File

@ -3,22 +3,26 @@ $blue : #409EFF;
$red : #F56C6C;
$green : #85ce61;
// TEXT
$text-main : #2C3E50;
$color-link: $blue;
// 暗黑模式
$dark-border : lighten(black, 30%);
$dark-border-highlight : lighten(black, 55%);
$dark-bg : lighten(black, 8%);
$dark-text-main : lighten(black, 90%);
$dark-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%);
$dark-color-link : $green;
// 字体大小
$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;