forked from um/web
Merge pull request #113 from KyleBing/master
调整暗黑模式样式，新增全局统一样式 by @KyleBing
This commit is contained in:
MengYX
GitHub
commit
0fb30ddc17
1088
package-lock.json
generated
1088
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -25,7 +25,9 @@
|
||||
"metaflac-js": "^1.0.5",
|
||||
"music-metadata-browser": "^2.1.6",
|
||||
"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": {
|
||||
"@vue/cli-plugin-babel": "^4.5.8",
|
||||
|
||||
@ -13,8 +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{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>@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>
|
||||
<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>
|
||||
|
||||
40
src/App.vue
40
src/App.vue
@ -5,8 +5,8 @@
|
||||
<x-upload v-on:handle_error="showFail" v-on:handle_finish="showSuccess"></x-upload>
|
||||
|
||||
<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="2" 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="handleDeleteAll" icon="el-icon-delete" plain type="danger">清除全部</el-button>
|
||||
|
||||
|
||||
<el-tooltip class="item" effect="dark" placement="top-start">
|
||||
<div slot="content">
|
||||
当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br/>
|
||||
开启后，解锁结果将不会存留于浏览器中，防止内存不足。
|
||||
</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-row>
|
||||
</div>
|
||||
|
||||
<audio :autoplay="playing_auto" :src="playing_url" controls/>
|
||||
|
||||
<x-preview :download_format="download_format" :table-data="tableData"
|
||||
@ -178,35 +176,9 @@
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
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 lang="scss">
|
||||
@import "scss/unlock-music";
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="歌曲">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.title }}</span>
|
||||
<span>{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="歌手">
|
||||
|
||||
166
src/scss/_dark-mode.scss
Normal file
166
src/scss/_dark-mode.scss
Normal 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
Normal file
18
src/scss/_gaps.scss
Normal 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
Normal file
38
src/scss/_normal.scss
Normal 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
Normal file
28
src/scss/_variables.scss
Normal 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
Normal file
5
src/scss/unlock-music.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import "variables";
|
||||
@import "gaps";
|
||||
|
||||
@import "normal";
|
||||
@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
|
||||
Loading…
Reference in New Issue
Block a user