From b370f4ceb676ad08466466abae99230742b3f757 Mon Sep 17 00:00:00 2001
From: KyleBing <kylebing@163.com>
Date: Tue, 24 Nov 2020 22:28:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=9A=97=E9=BB=91=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=96=B0=E5=A2=9E=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E7=BB=9F=E4=B8=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html          |   3 +-
 src/App.vue                |  10 +--
 src/component/preview.vue  |   2 +-
 src/main.js                |   1 +
 src/scss/_dark-mode.scss   | 167 +++++++++++++++++++++++++++++++++++++
 src/scss/_gaps.scss        |  19 +++++
 src/scss/_variables.scss   |  13 +++
 src/scss/unlock-music.css  |   1 +
 src/scss/unlock-music.scss |  21 +++++
 9 files changed, 228 insertions(+), 9 deletions(-)
 create mode 100644 src/scss/_dark-mode.scss
 create mode 100644 src/scss/_gaps.scss
 create mode 100644 src/scss/_variables.scss
 create mode 100644 src/scss/unlock-music.css
 create mode 100644 src/scss/unlock-music.scss
diff --git a/public/index.html b/public/index.html
index c4b6e1c..4e160ba 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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 #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>
     <!--@formatter:on-->
 </head>
 <body>
diff --git a/src/App.vue b/src/App.vue
index 3d1674e..0530566 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/component/preview.vue b/src/component/preview.vue
index 0395a08..ef64f2b 100644
--- a/src/component/preview.vue
+++ b/src/component/preview.vue
@@ -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="歌手">
diff --git a/src/main.js b/src/main.js
index 466d4b8..8619a29 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,6 +21,7 @@ import {
     Upload
 } from 'element-ui';
 import 'element-ui/lib/theme-chalk/base.css';
+import '@/scss/unlock-music.css' // dark mode file and global css
 
 Vue.use(Link);
 Vue.use(Image);
diff --git a/src/scss/_dark-mode.scss b/src/scss/_dark-mode.scss
new file mode 100644
index 0000000..44bbb6a
--- /dev/null
+++ b/src/scss/_dark-mode.scss
@@ -0,0 +1,167 @@
+/*
+* 样式 - 夜间模式
+* @KyleBing
+* 2020-11-24
+*/
+
+@media (prefers-color-scheme: dark) {
+  #app{
+    color: $dark-color-text-info;
+  }
+  body{
+    background-color: $dark-bg;
+  }
+
+  // FORM
+  .el-radio{
+    &__label{
+      color: $dark-color-text;
+    }
+    &__input{
+      color: $dark-color-text-info;
+      .el-radio__inner{
+        border-color: $dark-color-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-color-border;
+    .el-checkbox__inner{
+      background-color: $dark-btn-bg;
+      border-color: $dark-color-border;
+    }
+    &:hover{
+      border-color: $dark-color-border-highlight;
+      .el-checkbox__inner{
+        background-color: $dark-btn-bg-highlight;
+        border-color: $dark-color-border-highlight;
+      }
+      .el-checkbox__label{
+        color: $dark-color-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-color-border;
+    color: $dark-color-text;
+
+    &: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-color-border;
+        background-color: $dark-btn-bg;
+        &:hover{
+          background-color: $red;
+          border-color: $red;
+        }
+      }
+    }
+  }
+
+  // 文件拖放区
+  .el-upload__tip{
+    color: $dark-color-text-info;
+  }
+  .el-upload-dragger{
+    background-color: $dark-btn-bg;
+    border-color: $dark-color-border;
+    .el-upload__text{
+      color: $dark-color-text-info;
+    }
+    &:hover{
+      background: $dark-btn-bg;
+      border-color: $dark-color-border-highlight;
+    }
+  }
+
+  //TABLE
+  .el-table{
+    background-color: $dark-bg-td;
+    &:before{ // 去除表格末尾的横线
+      content: none;
+    }
+    &__header{
+      th{
+        border-bottom-color: $dark-color-border !important;
+      }
+    }
+    th{
+      background-color: $dark-bg-th;
+      color: $dark-color-text-info;
+    }
+    td{
+      border-bottom-color: $dark-color-border !important;
+    }
+    tr{
+      background-color: $dark-bg-td;
+      color: $dark-color-text;
+      &:hover{
+        td{
+          background-color: $dark-bg-th !important;
+        }
+      }
+    }
+  }
+
+
+  // LINKS
+  $dark-link: $green;
+  a{
+    text-decoration: none;
+    color: darken($dark-link, 15%);
+    &:hover{
+      color: $dark-link;
+    }
+  }
+
+  // ALERT
+  .el-notification{
+    background-color: $dark-btn-bg-highlight;
+    border-color: $dark-color-border;
+    &__title{
+      color: white;
+    }
+    &__content{
+      color: $dark-color-text-info;
+    }
+  }
+}
diff --git a/src/scss/_gaps.scss b/src/scss/_gaps.scss
new file mode 100644
index 0000000..7d75ca1
--- /dev/null
+++ b/src/scss/_gaps.scss
@@ -0,0 +1,19 @@
+/*
+* 间隔工具集
+*/
+
+$timer: 5px;
+// common
+@for $item from 1 through 7 {
+  .mt-#{$item} { margin-top     : $timer * $item !important;}
+  .mb-#{$item} { margin-bottom  : $timer * $item !important;}
+  .ml-#{$item} { margin-left    : $timer * $item !important;}
+  .mr-#{$item} { margin-right   : $timer * $item !important;}
+   .m-#{$item} { margin         : $timer * $item !important;}
+
+  .pt-#{$item} { padding-top    : $timer * $item !important;}
+  .pb-#{$item} { padding-bottom : $timer * $item !important;}
+  .pl-#{$item} { padding-left   : $timer * $item !important;}
+  .pr-#{$item} { padding-right  : $timer * $item !important;}
+   .p-#{$item} { padding        : $timer * $item !important;}
+}
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..5d73fa2
--- /dev/null
+++ b/src/scss/_variables.scss
@@ -0,0 +1,13 @@
+$dark-color-border                  : lighten(black, 30%);
+$dark-color-border-highlight        : lighten(black, 55%);
+$dark-bg                            : lighten(black, 8%);
+$dark-color-text                    : lighten(black, 90%);
+$dark-color-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%);
+
+$blue:  #409EFF;
+$red:   #F56C6C;
+$green: #85ce61;
\ No newline at end of file
diff --git a/src/scss/unlock-music.css b/src/scss/unlock-music.css
new file mode 100644
index 0000000..101dd2e
--- /dev/null
+++ b/src/scss/unlock-music.css
@@ -0,0 +1 @@
+@media(prefers-color-scheme: dark){#app{color:#999}body{background-color:#141414}.el-radio__label{color:#e6e6e6}.el-radio__input{color:#999}.el-radio__input .el-radio__inner{border-color:#4d4d4d;background-color:#333}.el-radio.is-checked .el-radio__inner{background-color:#409eff}.el-radio.is-checked .el-radio__label{font-weight:bold}.el-checkbox.is-bordered{border-color:#4d4d4d}.el-checkbox.is-bordered .el-checkbox__inner{background-color:#333;border-color:#4d4d4d}.el-checkbox.is-bordered:hover{border-color:#8c8c8c}.el-checkbox.is-bordered:hover .el-checkbox__inner{background-color:#4d4d4d;border-color:#8c8c8c}.el-checkbox.is-bordered:hover .el-checkbox__label{color:#999}.el-checkbox.is-bordered.is-checked{background-color:#409eff}.el-checkbox.is-bordered.is-checked .el-checkbox__inner{border-color:#4d4d4d}.el-checkbox.is-bordered.is-checked .el-checkbox__label{color:#fff;font-weight:bold}.el-button{background-color:#333;border-color:#4d4d4d;color:#e6e6e6}.el-button:active{transform:translateY(2px)}.el-button--default.is-plain{background-color:#333}.el-button--default.is-plain:hover{background-color:#409eff;border-color:#409eff;color:#fff}.el-button--danger.is-plain{border-color:#4d4d4d;background-color:#333}.el-button--danger.is-plain:hover{background-color:#f56c6c;border-color:#f56c6c}.el-upload__tip{color:#999}.el-upload-dragger{background-color:#333;border-color:#4d4d4d}.el-upload-dragger .el-upload__text{color:#999}.el-upload-dragger:hover{background:#333;border-color:#8c8c8c}.el-table{background-color:#262626}.el-table:before{content:none}.el-table__header th{border-bottom-color:#4d4d4d !important}.el-table th{background-color:#333;color:#999}.el-table td{border-bottom-color:#4d4d4d !important}.el-table tr{background-color:#262626;color:#e6e6e6}.el-table tr:hover td{background-color:#333 !important}a{text-decoration:none;color:#5dad36}a:hover{color:#85ce61}.el-notification{background-color:#4d4d4d;border-color:#4d4d4d}.el-notification__title{color:#fff}.el-notification__content{color:#999}}.mt-1{margin-top:5px !important}.mb-1{margin-bottom:5px !important}.ml-1{margin-left:5px !important}.mr-1{margin-right:5px !important}.m-1{margin:5px !important}.pt-1{padding-top:5px !important}.pb-1{padding-bottom:5px !important}.pl-1{padding-left:5px !important}.pr-1{padding-right:5px !important}.p-1{padding:5px !important}.mt-2{margin-top:10px !important}.mb-2{margin-bottom:10px !important}.ml-2{margin-left:10px !important}.mr-2{margin-right:10px !important}.m-2{margin:10px !important}.pt-2{padding-top:10px !important}.pb-2{padding-bottom:10px !important}.pl-2{padding-left:10px !important}.pr-2{padding-right:10px !important}.p-2{padding:10px !important}.mt-3{margin-top:15px !important}.mb-3{margin-bottom:15px !important}.ml-3{margin-left:15px !important}.mr-3{margin-right:15px !important}.m-3{margin:15px !important}.pt-3{padding-top:15px !important}.pb-3{padding-bottom:15px !important}.pl-3{padding-left:15px !important}.pr-3{padding-right:15px !important}.p-3{padding:15px !important}.mt-4{margin-top:20px !important}.mb-4{margin-bottom:20px !important}.ml-4{margin-left:20px !important}.mr-4{margin-right:20px !important}.m-4{margin:20px !important}.pt-4{padding-top:20px !important}.pb-4{padding-bottom:20px !important}.pl-4{padding-left:20px !important}.pr-4{padding-right:20px !important}.p-4{padding:20px !important}.mt-5{margin-top:25px !important}.mb-5{margin-bottom:25px !important}.ml-5{margin-left:25px !important}.mr-5{margin-right:25px !important}.m-5{margin:25px !important}.pt-5{padding-top:25px !important}.pb-5{padding-bottom:25px !important}.pl-5{padding-left:25px !important}.pr-5{padding-right:25px !important}.p-5{padding:25px !important}.mt-6{margin-top:30px !important}.mb-6{margin-bottom:30px !important}.ml-6{margin-left:30px !important}.mr-6{margin-right:30px !important}.m-6{margin:30px !important}.pt-6{padding-top:30px !important}.pb-6{padding-bottom:30px !important}.pl-6{padding-left:30px !important}.pr-6{padding-right:30px !important}.p-6{padding:30px !important}.mt-7{margin-top:35px !important}.mb-7{margin-bottom:35px !important}.ml-7{margin-left:35px !important}.mr-7{margin-right:35px !important}.m-7{margin:35px !important}.pt-7{padding-top:35px !important}.pb-7{padding-bottom:35px !important}.pl-7{padding-left:35px !important}.pr-7{padding-right:35px !important}.p-7{padding:35px !important}body{font-size:14px}audio{margin-bottom:15px}a{color:#0077f3}a:hover{color:#409eff}
diff --git a/src/scss/unlock-music.scss b/src/scss/unlock-music.scss
new file mode 100644
index 0000000..5fb5de6
--- /dev/null
+++ b/src/scss/unlock-music.scss
@@ -0,0 +1,21 @@
+@import "variables";
+@import "dark-mode";
+@import "gaps";
+
+body{
+  font-size: 14px;
+}
+
+// 播放控件与正文表格间隔
+audio{
+  margin-bottom: 15px;
+}
+
+$link: $blue;
+a{
+  //text-decoration: none;
+  color: darken($link, 15%);
+  &:hover{
+    color: $link;
+  }
+}
\ No newline at end of file
