Browse Source

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

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

(cherry picked from commit 8c149b6fa82dde3d2c03c236c699939154c65508)
20230320
邴新科 3 years ago
committed by MengYX
parent
commit
9688cf13c9
No known key found for this signature in database GPG Key ID: E63F9C7303E8F604
  1. 9
      src/App.vue
  2. 2
      src/component/FileSelector.vue
  3. 77
      src/scss/_dark-mode.scss
  4. 39
      src/scss/_element-ui-overrite.scss
  5. 2
      src/scss/_gaps.scss
  6. 72
      src/scss/_utility.scss
  7. 6
      src/scss/_variables.scss
  8. 21
      src/scss/unlock-music.scss
  9. 2
      src/view/Home.vue

9
src/App.vue

@ -71,7 +71,14 @@ export default {
} else { } else {
this.$notify.info({ this.$notify.info({
title: '离线使用', 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, dangerouslyUseHTMLString: true,
duration: 10000, duration: 10000,
position: 'top-left', position: 'top-left',

2
src/component/FileSelector.vue

@ -1,7 +1,7 @@
<template> <template>
<el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple> <el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
<i class="el-icon-upload" /> <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 slot="tip" class="el-upload__tip">
<div> <div>
仅在浏览器内对文件进行解锁无需消耗流量 仅在浏览器内对文件进行解锁无需消耗流量

77
src/scss/_dark-mode.scss

@ -1,7 +1,5 @@
/* /*
* name: 样式 - 夜间模式 * 样式 - 暗黑模式
* author: @KyleBing
* date: 2020-11-24
*/ */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -37,9 +35,11 @@
.el-checkbox.is-bordered{ .el-checkbox.is-bordered{
border-color: $dark-border; border-color: $dark-border;
.el-checkbox__inner{ color: $dark-text-main;
background-color: $dark-btn-bg; background-color: $dark-btn-bg;
border-color: $dark-border; .el-checkbox__inner{
background-color: $dark-btn-bg-highlight;
border-color: $dark-border-highlight;
} }
&:hover{ &:hover{
border-color: $dark-border-highlight; border-color: $dark-border-highlight;
@ -54,12 +54,18 @@
&.is-checked{ &.is-checked{
background-color: $blue; background-color: $blue;
.el-checkbox__inner{ .el-checkbox__inner{
border-color: $dark-btn-bg-highlight; border-color: white;
} }
.el-checkbox__label{ .el-checkbox__label{
color: white; color: white;
font-weight: bold; font-weight: bold;
} }
&:hover{
border-color: $blue;
.el-checkbox__inner{
background-color: white;
}
}
} }
} }
@ -84,6 +90,35 @@
color: white; 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{ &--danger{
&.is-plain{ &.is-plain{
@ -94,6 +129,15 @@
border-color: $red; 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{ .el-table{
background-color: $dark-bg-td; background-color: $dark-bg-td;
&:before{ // 去除表格末尾的横线 &:before{ // 去除表格末尾的横线
@ -124,7 +168,7 @@
border-bottom-color: $dark-border !important; border-bottom-color: $dark-border !important;
} }
} }
th{ th.el-table__cell{
background-color: $dark-bg-th; background-color: $dark-bg-th;
color: $dark-text-info; color: $dark-text-info;
} }
@ -142,7 +186,6 @@
} }
} }
// LINKS // LINKS
a{ a{
text-decoration: none; text-decoration: none;
@ -163,4 +206,20 @@
color: $dark-text-info; 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;
}
}
} }

39
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) ;
}

2
src/scss/_gaps.scss

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

72
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))
}
}

6
src/scss/_variables.scss

@ -8,6 +8,8 @@ $text-main : #2C3E50;
$color-link: $blue; $color-link: $blue;
$fz-main: 14px; $fz-main: 14px;
$fz-mini-title: 13px;
$fz-mini-content: 12px;
$font-family: "Helvetica Neue", Helvetica, "PingFang SC", $font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
@ -26,3 +28,7 @@ $dark-btn-bg-highlight : lighten(black, 30%);
$dark-bg-th : lighten(black, 18%); $dark-bg-th : lighten(black, 18%);
$dark-bg-td : lighten(black, 13%); $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%);

21
src/scss/unlock-music.scss

@ -1,5 +1,26 @@
@import "variables"; @import "variables";
@import "utility";
@import "gaps"; @import "gaps";
@import "element-ui-overrite";
@import "normal"; @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;
}
}

2
src/view/Home.vue

@ -28,7 +28,7 @@
开启后解锁结果将不会存留于浏览器中防止内存不足 开启后解锁结果将不会存留于浏览器中防止内存不足
</span> </span>
</div> </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-tooltip>
</el-row> </el-row>
</div> </div>

Loading…
Cancel
Save