um/web
um
/
web
81
147
Fork 60
Code Issues 15 Pull Requests 1 Packages Projects Releases 2 Wiki Activity

use scss source file, remove pre-compiled css file.

This commit is contained in:
KyleBing 2020-11-25 13:49:43 +08:00
parent b370f4ceb6
commit a040c88a07
9 changed files with 108 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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",

30
src/App.vue
View File

@ -176,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>

1
src/main.js
View File

@ -21,7 +21,6 @@ import {
Upload Upload
} from 'element-ui'; } from 'element-ui';
import 'element-ui/lib/theme-chalk/base.css'; import 'element-ui/lib/theme-chalk/base.css';
import '@/scss/unlock-music.css' // dark mode file and global css
Vue.use(Link); Vue.use(Link);
Vue.use(Image); Vue.use(Image);

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

@ -1,12 +1,12 @@
/* /*
* 样式 - 夜间模式 * name: 样式 - 夜间模式
* @KyleBing * author: @KyleBing
* 2020-11-24 * date: 2020-11-24
*/ */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#app{ #app{
color: $dark-color-text-info; color: $dark-text-info;
} }
body{ body{
background-color: $dark-bg; background-color: $dark-bg;
@ -15,12 +15,12 @@
// FORM // FORM
.el-radio{ .el-radio{
&__label{ &__label{
color: $dark-color-text; color: $dark-text-main;
} }
&__input{ &__input{
color: $dark-color-text-info; color: $dark-text-info;
.el-radio__inner{ .el-radio__inner{
border-color: $dark-color-border; border-color: $dark-border;
background-color: $dark-btn-bg; background-color: $dark-btn-bg;
} }
} }
@ -36,19 +36,19 @@
} }
.el-checkbox.is-bordered{ .el-checkbox.is-bordered{
border-color: $dark-color-border; border-color: $dark-border;
.el-checkbox__inner{ .el-checkbox__inner{
background-color: $dark-btn-bg; background-color: $dark-btn-bg;
border-color: $dark-color-border; border-color: $dark-border;
} }
&:hover{ &:hover{
border-color: $dark-color-border-highlight; border-color: $dark-border-highlight;
.el-checkbox__inner{ .el-checkbox__inner{
background-color: $dark-btn-bg-highlight; background-color: $dark-btn-bg-highlight;
border-color: $dark-color-border-highlight; border-color: $dark-border-highlight;
} }
.el-checkbox__label{ .el-checkbox__label{
color: $dark-color-text-info; color: $dark-text-info;
} }
} }
&.is-checked{ &.is-checked{
@ -68,8 +68,8 @@
// BUTTON // BUTTON
.el-button{ .el-button{
background-color: $dark-btn-bg; background-color: $dark-btn-bg;
border-color: $dark-color-border; border-color: $dark-border;
color: $dark-color-text; color: $dark-text-main;
&:active{ &:active{
transform: translateY(2px); transform: translateY(2px);
@ -87,7 +87,7 @@
} }
&--danger{ &--danger{
&.is-plain{ &.is-plain{
border-color: $dark-color-border; border-color: $dark-border;
background-color: $dark-btn-bg; background-color: $dark-btn-bg;
&:hover{ &:hover{
background-color: $red; background-color: $red;
@ -99,17 +99,17 @@
// 文件拖放区 // 文件拖放区
.el-upload__tip{ .el-upload__tip{
color: $dark-color-text-info; color: $dark-text-info;
} }
.el-upload-dragger{ .el-upload-dragger{
background-color: $dark-btn-bg; background-color: $dark-btn-bg;
border-color: $dark-color-border; border-color: $dark-border;
.el-upload__text{ .el-upload__text{
color: $dark-color-text-info; color: $dark-text-info;
} }
&:hover{ &:hover{
background: $dark-btn-bg; background: $dark-btn-bg;
border-color: $dark-color-border-highlight; border-color: $dark-border-highlight;
} }
} }
@ -121,19 +121,19 @@
} }
&__header{ &__header{
th{ th{
border-bottom-color: $dark-color-border !important; border-bottom-color: $dark-border !important;
} }
} }
th{ th{
background-color: $dark-bg-th; background-color: $dark-bg-th;
color: $dark-color-text-info; color: $dark-text-info;
} }
td{ td{
border-bottom-color: $dark-color-border !important; border-bottom-color: $dark-border !important;
} }
tr{ tr{
background-color: $dark-bg-td; background-color: $dark-bg-td;
color: $dark-color-text; color: $dark-text-main;
&:hover{ &:hover{
td{ td{
background-color: $dark-bg-th !important; background-color: $dark-bg-th !important;
@ -144,24 +144,23 @@
// LINKS // LINKS
$dark-link: $green;
a{ a{
text-decoration: none; text-decoration: none;
color: darken($dark-link, 15%); color: darken($dark-color-link, 15%);
&:hover{ &:hover{
color: $dark-link; color: $dark-color-link;
} }
} }
// ALERT // ALERT
.el-notification{ .el-notification{
background-color: $dark-btn-bg-highlight; background-color: $dark-btn-bg-highlight;
border-color: $dark-color-border; border-color: $dark-border;
&__title{ &__title{
color: white; color: white;
} }
&__content{ &__content{
color: $dark-color-text-info; color: $dark-text-info;
} }
} }
} }

27
src/scss/_gaps.scss
View File

@ -1,19 +1,18 @@
/* /*
* 间隔工具集 * 间隔工具集
*/ */
$timer: 5px; $gap: 5px;
// common
@for $item from 1 through 7 { @for $item from 1 through 7 {
.mt-#{$item} { margin-top : $timer * $item !important;} .mt-#{$item} { margin-top : $gap * $item !important;}
.mb-#{$item} { margin-bottom : $timer * $item !important;} .mb-#{$item} { margin-bottom : $gap * $item !important;}
.ml-#{$item} { margin-left : $timer * $item !important;} .ml-#{$item} { margin-left : $gap * $item !important;}
.mr-#{$item} { margin-right : $timer * $item !important;} .mr-#{$item} { margin-right : $gap * $item !important;}
.m-#{$item} { margin : $timer * $item !important;} .m-#{$item} { margin : $gap * $item !important;}
.pt-#{$item} { padding-top : $timer * $item !important;} .pt-#{$item} { padding-top : $gap * $item !important;}
.pb-#{$item} { padding-bottom : $timer * $item !important;} .pb-#{$item} { padding-bottom : $gap * $item !important;}
.pl-#{$item} { padding-left : $timer * $item !important;} .pl-#{$item} { padding-left : $gap * $item !important;}
.pr-#{$item} { padding-right : $timer * $item !important;} .pr-#{$item} { padding-right : $gap * $item !important;}
.p-#{$item} { padding : $timer * $item !important;} .p-#{$item} { padding : $gap * $item !important;}
} }

37
src/scss/_normal.scss Normal file
View File

@ -0,0 +1,37 @@
#app {
font-size: $fz-main;
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: $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;
}
}

35
src/scss/_variables.scss
View File

@ -1,13 +1,24 @@
$dark-color-border : lighten(black, 30%); // COLORS
$dark-color-border-highlight : lighten(black, 55%); $blue : #409EFF;
$dark-bg : lighten(black, 8%); $red : #F56C6C;
$dark-color-text : lighten(black, 90%); $green : #85ce61;
$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; $text-main : #2C3E50;
$red: #F56C6C;
$green: #85ce61; $color-link: $blue;
// 暗黑模式
$dark-border : lighten(black, 30%);
$dark-border-highlight : lighten(black, 55%);
$dark-bg : lighten(black, 8%);
$dark-text-main : lighten(black, 90%);
$dark-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%);
$dark-color-link : $green;
// 字体大小
$fz-main: 14px;

1
src/scss/unlock-music.css
View File

@ -1 +0,0 @@
@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}

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

@ -1,21 +1,5 @@
@import "variables"; @import "variables";
@import "dark-mode";
@import "gaps"; @import "gaps";
body{ @import "normal";
font-size: 14px; @import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
}
// 播放控件与正文表格间隔
audio{
margin-bottom: 15px;
}
$link: $blue;
a{
//text-decoration: none;
color: darken($link, 15%);
&:hover{
color: $link;
}
}