+ 新功能提示框(白/黑)

+ fix: 暗黑模式 一些小问题
+ 一些 scss 通用方法

(cherry picked from commit 8c149b6fa82dde3d2c03c236c699939154c65508)

src/App.vue

@@ -71,7 +71,14 @@ export default {
       } else {
         this.$notify.info({
           title: '离线使用',
-          message: `我们使用PWA技术，无网络也能使用<br/>最近更新：${config.updateInfo}<br/><a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>`,
+          message: `<div>
+                        <p>我们使用 PWA 技术，无网络也能使用</p>
+                        <div class="update-info">
+                            <div class="update-title">最近更新</div>
+                            <div class="update-content"> ${config.updateInfo} </div>
+                        </div>
+                        <a target="_blank" href="https://github.com/ix64/unlock-music/wiki/使用提示">使用提示</a>
+                    </div>`,
           dangerouslyUseHTMLString: true,
           duration: 10000,
           position: 'top-left',

src/component/FileSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
     <i class="el-icon-upload" />
-    <div class="el-upload__text">将文件拖到此处，或<em>点击选择</em></div>
+    <div class="el-upload__text">将文件拖到此处，或 <em>点击选择</em></div>
     <div slot="tip" class="el-upload__tip">
       <div>
         仅在浏览器内对文件进行解锁，无需消耗流量

src/scss/_dark-mode.scss

@@ -1,7 +1,5 @@
 /*
- * name:    样式 - 夜间模式
+ * 样式 - 暗黑模式
- * author:  @KyleBing
- * date:    2020-11-24
  */
 
 @media (prefers-color-scheme: dark) {
@@ -37,9 +35,11 @@
 
   .el-checkbox.is-bordered{
     border-color: $dark-border;
+    color: $dark-text-main;
+    background-color: $dark-btn-bg;
     .el-checkbox__inner{
-      background-color: $dark-btn-bg;
+      background-color: $dark-btn-bg-highlight;
-      border-color: $dark-border;
+      border-color: $dark-border-highlight;
     }
     &:hover{
       border-color: $dark-border-highlight;
@@ -54,12 +54,18 @@
     &.is-checked{
       background-color: $blue;
       .el-checkbox__inner{
-        border-color: $dark-btn-bg-highlight;
+        border-color: white;
       }
       .el-checkbox__label{
         color: white;
         font-weight: bold;
       }
+      &:hover{
+        border-color: $blue;
+        .el-checkbox__inner{
+          background-color: white;
+        }
+      }
     }
   }
 
@@ -84,6 +90,35 @@
           color: white;
         }
       }
+      &.is-circle {
+        background-color: $dark-blue;
+        border-color: $dark-blue;
+        &:hover {
+          background-color: $blue;
+          border-color: $blue;
+          color: white;
+        }
+      }
+    }
+
+    &--success{
+      &.is-plain {
+        background-color: $dark-btn-bg;
+        &:hover {
+          background-color: $green;
+          border-color: $green;
+          color: white;
+        }
+      }
+      &.is-circle {
+        background-color: $dark-green;
+        border-color: $dark-green;
+        &:hover {
+          background-color: $green;
+          border-color: $green;
+          color: white;
+        }
+      }
     }
     &--danger{
       &.is-plain{
@@ -94,6 +129,15 @@
           border-color: $red;
         }
       }
+      &.is-circle {
+        background-color: $dark-red;
+        border-color: $dark-red;
+        &:hover {
+          background-color: $red;
+          border-color: $red;
+          color: white;
+        }
+      }
     }
   }
 
@@ -113,7 +157,7 @@
     }
   }
 
-  //TABLE
+  // TABLE
   .el-table{
     background-color: $dark-bg-td;
     &:before{ // 去除表格末尾的横线
@@ -124,7 +168,7 @@
         border-bottom-color: $dark-border !important;
       }
     }
-    th{
+    th.el-table__cell{
       background-color: $dark-bg-th;
       color: $dark-text-info;
     }
@@ -142,7 +186,6 @@
     }
   }
 
-
   // LINKS
   a{
     text-decoration: none;
@@ -163,4 +206,20 @@
       color: $dark-text-info;
     }
   }
+
+
+
+  // 自定义样式
+  // 首页弹窗提示信息的 更新信息 面板
+  .update-info{
+    border: 1px solid $dark-btn-bg !important;
+    .update-title{
+      color: $dark-text-main;
+      background-color: $dark-btn-bg !important;
+    }
+    .update-content{
+      color: $dark-text-info;
+      padding: 10px;
+    }
+  }
 }

src/scss/_element-ui-overrite.scss

@@ -0,0 +1,39 @@
+$color-checkbox: $blue;
+$color-border-el: #DCDFE6;
+
+$btn-radius: 6px;
+
+/* FORM */
+// checkbox
+.el-checkbox.is-bordered{
+  @include border-radius($btn-radius) ;
+  &:hover{
+    border-color: $color-checkbox;
+    .el-checkbox__label{
+      color: $color-checkbox;
+    }
+  }
+  .el-checkbox__input.is-focus{
+    .el-checkbox__inner{
+      border-color: $color-border-el;
+    }
+  }
+  &.is-checked{
+    background-color: $color-checkbox;
+    .el-checkbox__label{
+      color: white;
+    }
+    .el-checkbox__inner{
+      border-color: white;
+      background-color: white;
+      &:after{
+        border-color: $color-checkbox;
+      }
+    }
+  }
+}
+
+// el-button
+.el-button{
+  @include border-radius($btn-radius) ;
+}

src/scss/_gaps.scss

@@ -3,7 +3,7 @@
  */
 
 $gap: 5px;
-@for $item from 1 through 7 {
+@for $item from 0 through 8 {
   .mt-#{$item} { margin-top     : $gap * $item !important;}
   .mb-#{$item} { margin-bottom  : $gap * $item !important;}
   .ml-#{$item} { margin-left    : $gap * $item !important;}
@@ -15,4 +15,4 @@ $gap: 5px;
   .pl-#{$item} { padding-left   : $gap * $item !important;}
   .pr-#{$item} { padding-right  : $gap * $item !important;}
    .p-#{$item} { padding        : $gap * $item !important;}
-}
+}

src/scss/_utility.scss

@@ -0,0 +1,72 @@
+// box-shadow
+@mixin box-shadow($value...){
+  -webkit-box-shadow:  $value;
+  -moz-box-shadow:  $value;
+  box-shadow:  $value;
+}
+
+// border-radius
+@mixin border-radius($corner...){
+  -webkit-border-radius: $corner;
+  -moz-border-radius: $corner;
+  border-radius: $corner;
+}
+
+@mixin clearfix(){
+  &:after{
+    content: '';
+    display: block;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
+@mixin transform($value){
+  -webkit-transform: $value;
+  -moz-transform: $value;
+  -ms-transform: $value;
+  -o-transform: $value;
+  transform: $value;
+}
+
+@mixin transition($value...){
+  -webkit-transition: $value;
+  -moz-transition: $value;
+  -ms-transition: $value;
+  -o-transition: $value;
+  transition: $value;
+}
+
+@mixin animation($value){
+  animation: $value;
+  -webkit-animation: $value;
+}
+
+@mixin linear-gradient($direct, $colors){
+  background: linear-gradient($direct, $colors);
+  background: -webkit-linear-gradient($direct, $colors);
+  background: -moz-linear-gradient($direct, $colors);
+}
+
+@mixin backdrop-filter($value){
+  backdrop-filter: $value ;
+  -webkit-backdrop-filter: $value;
+}
+
+
+/*
+  Extension
+*/
+
+.unselectable {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.btn-like{
+  &:active{
+    @include transform(translateY(2px))
+  }
+}

src/scss/_variables.scss

@@ -8,6 +8,8 @@ $text-main : #2C3E50;
 $color-link: $blue;
 
 $fz-main: 14px;
+$fz-mini-title: 13px;
+$fz-mini-content: 12px;
 
 $font-family: "Helvetica Neue", Helvetica, "PingFang SC",
 "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
@@ -25,4 +27,8 @@ $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;
+$dark-color-link            : $green;
+
+$dark-blue      : darken(desaturate($blue, 40%), 30%);
+$dark-red       : darken(desaturate($red, 50%), 30%);
+$dark-green     : darken(desaturate($green, 30%), 30%);

src/scss/unlock-music.scss

@@ -1,5 +1,26 @@
 @import "variables";
+@import "utility";
 @import "gaps";
+@import "element-ui-overrite";
 
 @import "normal";
-@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
+@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
+
+
+// 首页弹窗提示信息的 更新信息 面板
+.update-info{
+  @include border-radius(8px);
+  overflow: hidden;
+  border: 1px solid $color-border-el;
+  margin: 10px 0;
+  .update-title{
+    font-size: $fz-mini-title;
+    padding: 5px 10px;
+    background-color: $color-border-el;
+  }
+  .update-content{
+    font-size: $fz-mini-content;
+    line-height: 1.5;
+    padding: 10px;
+  }
+}

src/view/Home.vue

@@ -28,7 +28,7 @@
               开启后，解锁结果将不会存留于浏览器中，防止内存不足。
             </span>
           </div>
-          <el-checkbox v-model="instant_save" border class="ml-2">立即保存</el-checkbox>
+            <el-checkbox v-model="instant_save" type="success" border class="ml-2">立即保存</el-checkbox>
         </el-tooltip>
       </el-row>
     </div>