dnomd343
/
unlock-music
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

20230320
KyleBing 4 years ago
parent
a040c88a07
commit
5e2f3d36c2
4 changed files with 26 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      public/index.html
  2. 4
      src/scss/_dark-mode.scss
  3. 9
      src/scss/_normal.scss
  4. 32
      src/scss/_variables.scss

2
public/index.html
View File

@ -13,7 +13,7 @@
<meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords"/> <meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords"/>
<meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/> <meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/>
<!--@formatter:off--> <!--@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--> <!--@formatter:on-->
</head> </head>
<body> <body>

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

@ -102,13 +102,13 @@
color: $dark-text-info; color: $dark-text-info;
} }
.el-upload-dragger{ .el-upload-dragger{
background-color: $dark-btn-bg; background-color: $dark-uploader-bg;
border-color: $dark-border; border-color: $dark-border;
.el-upload__text{ .el-upload__text{
color: $dark-text-info; color: $dark-text-info;
} }
&:hover{ &:hover{
background: $dark-btn-bg; background: $dark-uploader-bg-highlight;
border-color: $dark-border-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-size: $fz-main;
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
}
#app {
text-align: center; text-align: center;
color: $text-main; color: $text-main;
padding-top: 30px; padding-top: 30px;
@ -28,7 +30,6 @@ audio{
margin-bottom: 15px; // 播放控件与表格间隔 margin-bottom: 15px; // 播放控件与表格间隔
} }
a{ a{
color: darken($color-link, 15%); color: darken($color-link, 15%);
&:hover{ &:hover{

32
src/scss/_variables.scss
View File

@ -3,22 +3,26 @@ $blue : #409EFF;
$red : #F56C6C; $red : #F56C6C;
$green : #85ce61; $green : #85ce61;
// TEXT
$text-main : #2C3E50; $text-main : #2C3E50;
$color-link: $blue; $color-link: $blue;
// 暗黑模式 $fz-main: 14px;
$dark-border : lighten(black, 30%);
$dark-border-highlight : lighten(black, 55%); $font-family: "Helvetica Neue", Helvetica, "PingFang SC",
$dark-bg : lighten(black, 8%); "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
$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;
// 字体大小 // DARK MODE
$fz-main: 14px; $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;
Write Preview
Loading…
Cancel
Save