From a040c88a07bd182a0396bf6fa4ec50b1d990e5ac Mon Sep 17 00:00:00 2001 From: KyleBing Date: Wed, 25 Nov 2020 13:49:43 +0800 Subject: [PATCH] use scss source file, remove pre-compiled css file. --- package.json | 4 ++- src/App.vue | 30 ++------------------ src/main.js | 1 - src/scss/_dark-mode.scss | 57 +++++++++++++++++++------------------- src/scss/_gaps.scss | 27 +++++++++--------- src/scss/_normal.scss | 37 +++++++++++++++++++++++++ src/scss/_variables.scss | 35 +++++++++++++++-------- src/scss/unlock-music.css | 1 - src/scss/unlock-music.scss | 20 ++----------- 9 files changed, 108 insertions(+), 104 deletions(-) create mode 100644 src/scss/_normal.scss delete mode 100644 src/scss/unlock-music.css diff --git a/package.json b/package.json index 01537e1..d71c545 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.vue b/src/App.vue index 0530566..60c8fc9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -176,35 +176,9 @@ }, 300); } }, - } - - diff --git a/src/main.js b/src/main.js index 8619a29..466d4b8 100644 --- a/src/main.js +++ b/src/main.js @@ -21,7 +21,6 @@ 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 index 44bbb6a..8377f28 100644 --- a/src/scss/_dark-mode.scss +++ b/src/scss/_dark-mode.scss @@ -1,12 +1,12 @@ /* -* 样式 - 夜间模式 -* @KyleBing -* 2020-11-24 -*/ + * name: 样式 - 夜间模式 + * author: @KyleBing + * date: 2020-11-24 + */ @media (prefers-color-scheme: dark) { #app{ - color: $dark-color-text-info; + color: $dark-text-info; } body{ background-color: $dark-bg; @@ -15,12 +15,12 @@ // FORM .el-radio{ &__label{ - color: $dark-color-text; + color: $dark-text-main; } &__input{ - color: $dark-color-text-info; + color: $dark-text-info; .el-radio__inner{ - border-color: $dark-color-border; + border-color: $dark-border; background-color: $dark-btn-bg; } } @@ -36,19 +36,19 @@ } .el-checkbox.is-bordered{ - border-color: $dark-color-border; + border-color: $dark-border; .el-checkbox__inner{ background-color: $dark-btn-bg; - border-color: $dark-color-border; + border-color: $dark-border; } &:hover{ - border-color: $dark-color-border-highlight; + border-color: $dark-border-highlight; .el-checkbox__inner{ background-color: $dark-btn-bg-highlight; - border-color: $dark-color-border-highlight; + border-color: $dark-border-highlight; } .el-checkbox__label{ - color: $dark-color-text-info; + color: $dark-text-info; } } &.is-checked{ @@ -68,8 +68,8 @@ // BUTTON .el-button{ background-color: $dark-btn-bg; - border-color: $dark-color-border; - color: $dark-color-text; + border-color: $dark-border; + color: $dark-text-main; &:active{ transform: translateY(2px); @@ -87,7 +87,7 @@ } &--danger{ &.is-plain{ - border-color: $dark-color-border; + border-color: $dark-border; background-color: $dark-btn-bg; &:hover{ background-color: $red; @@ -99,17 +99,17 @@ // 文件拖放区 .el-upload__tip{ - color: $dark-color-text-info; + color: $dark-text-info; } .el-upload-dragger{ background-color: $dark-btn-bg; - border-color: $dark-color-border; + border-color: $dark-border; .el-upload__text{ - color: $dark-color-text-info; + color: $dark-text-info; } &:hover{ background: $dark-btn-bg; - border-color: $dark-color-border-highlight; + border-color: $dark-border-highlight; } } @@ -121,19 +121,19 @@ } &__header{ th{ - border-bottom-color: $dark-color-border !important; + border-bottom-color: $dark-border !important; } } th{ background-color: $dark-bg-th; - color: $dark-color-text-info; + color: $dark-text-info; } td{ - border-bottom-color: $dark-color-border !important; + border-bottom-color: $dark-border !important; } tr{ background-color: $dark-bg-td; - color: $dark-color-text; + color: $dark-text-main; &:hover{ td{ background-color: $dark-bg-th !important; @@ -144,24 +144,23 @@ // LINKS - $dark-link: $green; a{ text-decoration: none; - color: darken($dark-link, 15%); + color: darken($dark-color-link, 15%); &:hover{ - color: $dark-link; + color: $dark-color-link; } } // ALERT .el-notification{ background-color: $dark-btn-bg-highlight; - border-color: $dark-color-border; + border-color: $dark-border; &__title{ color: white; } &__content{ - color: $dark-color-text-info; + color: $dark-text-info; } } } diff --git a/src/scss/_gaps.scss b/src/scss/_gaps.scss index 7d75ca1..478756e 100644 --- a/src/scss/_gaps.scss +++ b/src/scss/_gaps.scss @@ -1,19 +1,18 @@ /* -* 间隔工具集 -*/ + * 间隔工具集 + */ -$timer: 5px; -// common +$gap: 5px; @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;} + .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 : $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;} + .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;} } \ No newline at end of file diff --git a/src/scss/_normal.scss b/src/scss/_normal.scss new file mode 100644 index 0000000..c393e9f --- /dev/null +++ b/src/scss/_normal.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 5d73fa2..c4b1319 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,13 +1,24 @@ -$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%); +// COLORS +$blue : #409EFF; +$red : #F56C6C; +$green : #85ce61; -$blue: #409EFF; -$red: #F56C6C; -$green: #85ce61; \ No newline at end of file +$text-main : #2C3E50; + +$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; \ No newline at end of file diff --git a/src/scss/unlock-music.css b/src/scss/unlock-music.css deleted file mode 100644 index 101dd2e..0000000 --- a/src/scss/unlock-music.css +++ /dev/null @@ -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} diff --git a/src/scss/unlock-music.scss b/src/scss/unlock-music.scss index 5fb5de6..ae52fe6 100644 --- a/src/scss/unlock-music.scss +++ b/src/scss/unlock-music.scss @@ -1,21 +1,5 @@ @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 +@import "normal"; +@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级 \ No newline at end of file