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

Merge pull request #113 from KyleBing/master 

调整暗黑模式样式，新增全局统一样式 by @KyleBing
20230320
MengYX 5 years ago
committed by GitHub
parent
bf0df4e68d e9a25f3140
commit
0fb30ddc17
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 1101 additions and 309 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. 1106
      package-lock.json
  2. 4
      package.json
  3. 3
      public/index.html
  4. 40
      src/App.vue
  5. 2
      src/component/preview.vue
  6. 166
      src/scss/_dark-mode.scss
  7. 18
      src/scss/_gaps.scss
  8. 38
      src/scss/_normal.scss
  9. 28
      src/scss/_variables.scss
  10. 5
      src/scss/unlock-music.scss

1106
package-lock.json
View File

File diff suppressed because it is too large

4
package.json
View File

@ -25,7 +25,9 @@
"metaflac-js": "^1.0.5", "metaflac-js": "^1.0.5",
"music-metadata-browser": "^2.1.6", "music-metadata-browser": "^2.1.6",
"register-service-worker": "^1.7.1", "register-service-worker": "^1.7.1",
"vue": "^2.6.12" "vue": "^2.6.12",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.5.8", "@vue/cli-plugin-babel": "^4.5.8",

3
public/index.html
View File

@ -13,8 +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{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)}</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>
<!--深色模式--><style>@media(prefers-color-scheme:dark){#loader-mask,html,.el-notification,.el-upload-dragger,.el-icon-upload,.el-table,.el-table__expanded-cell,.el-table th,.el-table tr{background-color:#111 !important;}html,.el-notification__content,.el-notification__title,#app,.el-upload__text,.el-table,.el-table__expanded-cell,.el-table th,.el-table tr{color:#DDD !important;}.el-upload__tip,.el-radio__label,.el-checkbox__label,.el-table__empty-text{color:#AAA !important;}.el-table tr:hover,.el-table tr:hover td{background-color:#555 !important;transition:background-color .4s !important;}}</style>
<!--@formatter:on--> <!--@formatter:on-->
</head> </head>
<body> <body>

40
src/App.vue
View File

@ -5,8 +5,8 @@
<x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload> <x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
<div id="app-control"> <div id="app-control">
<el-row style="padding-bottom: 1em; font-size: 14px"> <el-row class="mb-3">
歌曲命名格式： <span>歌曲命名格式：</span>
<el-radio label="1" name="format" v-model="download_format">歌手-歌曲名</el-radio> <el-radio label="1" name="format" v-model="download_format">歌手-歌曲名</el-radio>
<el-radio label="2" name="format" v-model="download_format">歌曲名</el-radio> <el-radio label="2" name="format" v-model="download_format">歌曲名</el-radio>
<el-radio label="3" name="format" v-model="download_format">歌曲名-歌手</el-radio> <el-radio label="3" name="format" v-model="download_format">歌曲名-歌手</el-radio>
@ -16,18 +16,16 @@
<el-button @click="handleDownloadAll" icon="el-icon-download" plain>下载全部</el-button> <el-button @click="handleDownloadAll" icon="el-icon-download" plain>下载全部</el-button>
<el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">清除全部</el-button> <el-button @click="handleDeleteAll" icon="el-icon-delete" plain type="danger">清除全部</el-button>
<el-tooltip class="item" effect="dark" placement="top-start"> <el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content"> <div slot="content">
当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/> 当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/>
开启后，解锁结果将不会存留于浏览器中，防止内存不足。 开启后，解锁结果将不会存留于浏览器中，防止内存不足。
</div> </div>
<el-checkbox border style="margin-left: 1em" v-model="instant_download">立即保存</el-checkbox> <el-checkbox border class="ml-2" v-model="instant_download">立即保存</el-checkbox>
</el-tooltip> </el-tooltip>
</el-row> </el-row>
</div> </div>
<audio :autoplay="playing_auto" :src="playing_url" controls/> <audio :autoplay="playing_auto" :src="playing_url" controls/>
<x-preview :download_format="download_format" :table-data="tableData" <x-preview :download_format="download_format" :table-data="tableData"
@ -178,35 +176,9 @@
}, 300); }, 300);
} }
}, },
} }
</script> </script>
<style> <style lang="scss">
#app { @import "scss/unlock-music";
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
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;
}
</style> </style>

2
src/component/preview.vue
View File

@ -12,7 +12,7 @@
</el-table-column> </el-table-column>
<el-table-column label="歌曲"> <el-table-column label="歌曲">
<template slot-scope="scope"> <template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.title }}</span> <span>{{ scope.row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="歌手"> <el-table-column label="歌手">

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

@ -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;
}
}
}

18
src/scss/_gaps.scss
View File

@ -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;}
}

38
src/scss/_normal.scss
View File

@ -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;
}
}

28
src/scss/_variables.scss
View File

@ -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;

5
src/scss/unlock-music.scss
View File

@ -0,0 +1,5 @@
@import "variables";
@import "gaps";
@import "normal";
@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
Write Preview
Loading…
Cancel
Save