mirror of
https://github.com/cuiocean/ZY-Player.git
synced 2026-02-08 21:23:39 +08:00
❤️v0.8.17 add two themes
This commit is contained in:
Hunlongyu
@@ -15,7 +15,11 @@
|
||||
资源播放器, 提供影视资源的浏览,搜索,播放,收藏,查看详情等功能.
|
||||
|
||||
### 下载:
|
||||
[下载地址](https://github.com/Hunlongyu/ZY-Player/releases)
|
||||
[Github Release 实时更新，保证最新版](https://github.com/Hunlongyu/ZY-Player/releases)
|
||||
|
||||
[蓝奏云 快速下载通道](https://www.lanzous.com/b04s6a3re) 密码:95px
|
||||
|
||||
[诚通网盘 备用下载通道](https://72k.us/dir/12872257-37375957-d3f41d)
|
||||
|
||||
### 截图:
|
||||
主界面 ⬇
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "zy",
|
||||
"version": "0.8.16",
|
||||
"version": "0.8.17",
|
||||
"author": "Hunlongyu",
|
||||
"description": "ZY Player 资源播放器",
|
||||
"private": true,
|
||||
@@ -13,7 +13,7 @@
|
||||
"postinstall": "electron-builder install-app-deps",
|
||||
"postuninstall": "electron-builder install-app-deps",
|
||||
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
|
||||
"bp": "vue-cli-service electron:build --win --ia32 --x64 -p always"
|
||||
"bp": "vue-cli-service electron:build --win --x64 -p always"
|
||||
},
|
||||
"main": "background.js",
|
||||
"dependencies": {
|
||||
|
||||
@@ -91,6 +91,8 @@ export default Vue.extend({
|
||||
@import './assets/theme/global.scss';
|
||||
@import './assets/theme/dark.scss';
|
||||
@import './assets/theme/light.scss';
|
||||
@import './assets/theme/pink.scss';
|
||||
@import './assets/theme/green.scss';
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
BIN
src/assets/image/green.png
Normal file
BIN
src/assets/image/green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/image/pink.png
Normal file
BIN
src/assets/image/pink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
@@ -6,32 +6,61 @@
|
||||
background-color: var(--d-bgc);
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.el-select .el-input .el-select__caret{
|
||||
color: var(--d-icon)
|
||||
}
|
||||
.el-button--text{
|
||||
border: none;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
background-color: var(--d-bdc);
|
||||
}
|
||||
.el-tabs__item:hover, .el-tabs__item.is-active{
|
||||
color: var(--d-c-h);
|
||||
}
|
||||
.el-tabs__item, .el-tabs__nav-wrap::after{
|
||||
color: var(--d-c);
|
||||
background-color: var(--d-bgc);
|
||||
border-color: var(--d-dbc);
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.el-table--border::after, .el-table--group::after, .el-table::before,
|
||||
.el-table--border::after, .el-table--droup::after, .el-table::before,
|
||||
.el-table, .el-table th, .el-table tr,
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td,
|
||||
.el-table td, .el-table th.is-leaf{
|
||||
color: var(--d-c);
|
||||
background-color: var(--d-bgc);
|
||||
border-color: var(--d-dbc);
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li{
|
||||
color: var(--d-c);
|
||||
background-color: var(--d-bgc);
|
||||
}
|
||||
.el-input__inner,
|
||||
.el-pager li:hover, .el-pager li.active, .el-pager li.btn-quicknext, .el-pager li.btn-quickprev{
|
||||
color: var(--d-c-h);
|
||||
}
|
||||
.el-input__inner, .el-input__inner:hover,
|
||||
.el-input-group__append, .el-input-group__prepend{
|
||||
background-color: var(--d-bgc);
|
||||
border-color: var(--d-dbc);
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.el-input.is-active .el-input__inner, .el-input__inner:focus{
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.el-input__inner{
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.el-select .el-input.is-focus .el-input__inner,
|
||||
.el-select .el-input__inner:focus,
|
||||
.el-select:hover .el-input__inner{
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
input::-webkit-input-placeholder{
|
||||
color: var(--d-c);
|
||||
}
|
||||
.el-icon-search{
|
||||
color: var(--d-icon);
|
||||
}
|
||||
.el-select-dropdown{
|
||||
color: var(--d-c);
|
||||
@@ -47,6 +76,12 @@
|
||||
background-color: var(--d-bgc);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.el-slider__bar{
|
||||
background-color: var(--d-c-h);
|
||||
}
|
||||
.el-slider__button{
|
||||
border-color: var(--d-c-h);
|
||||
}
|
||||
.Header, .Aside{
|
||||
i{
|
||||
color: var(--d-icon);
|
||||
@@ -67,6 +102,11 @@
|
||||
}
|
||||
.Main{
|
||||
.film, .search, .star, .player{
|
||||
button:hover{
|
||||
color: var(--d-c-h);
|
||||
background: var(--d-bgc);
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
.table-box{
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px var(--d-bdc);
|
||||
@@ -77,6 +117,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.player{
|
||||
.el-button--primary.is-plain{
|
||||
color: var(--d-c);
|
||||
background-color: var(--d-bgc-h);
|
||||
border-color: var(--d-bdc);
|
||||
}
|
||||
}
|
||||
.setting{
|
||||
.el-link, .card{
|
||||
color: var(--d-c);
|
||||
|
||||
@@ -16,4 +16,22 @@
|
||||
--d-bgc: #242424;
|
||||
--d-bgc-h: #454545;
|
||||
--d-bdc: #7a7a7a;
|
||||
|
||||
// pink
|
||||
--p-c: #ffffff;
|
||||
--p-c-h: #fd7792;
|
||||
--p-icon: #ffffff;
|
||||
--p-icon-h: #fd7792;
|
||||
--p-bgc: #ffbaba;
|
||||
--p-bgc-h: #ffc5c5;
|
||||
--p-bdc: #fdcfcf;
|
||||
|
||||
// green
|
||||
--g-c: #ffffff;
|
||||
--g-c-h: #ebe65b;
|
||||
--g-icon: #ffffff;
|
||||
--g-icon-h: #ebe65b;
|
||||
--g-bgc: #4baea0;
|
||||
--g-bgc-h: #6db8ac;
|
||||
--g-bdc: #76d3c5;
|
||||
}
|
||||
156
src/assets/theme/green.scss
Normal file
156
src/assets/theme/green.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.theme-green{
|
||||
color: var(--g-c);
|
||||
background-color: var(--g-bgc);
|
||||
.el-button, input, select, .el-select{
|
||||
color: var(--g-c);
|
||||
background-color: var(--g-bgc);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.el-select .el-input .el-select__caret{
|
||||
color: var(--g-icon)
|
||||
}
|
||||
.el-button--text{
|
||||
border: none;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
background-color: var(--g-bdc);
|
||||
}
|
||||
.el-tabs__item:hover, .el-tabs__item.is-active{
|
||||
color: var(--g-c-h);
|
||||
}
|
||||
.el-tabs__item, .el-tabs__nav-wrap::after{
|
||||
color: var(--g-c);
|
||||
background-color: var(--g-bgc);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.el-table--border::after, .el-table--group::after, .el-table::before,
|
||||
.el-table, .el-table th, .el-table tr,
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td,
|
||||
.el-table td, .el-table th.is-leaf{
|
||||
color: var(--g-c);
|
||||
background-color: var(--g-bgc);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li{
|
||||
color: var(--g-c);
|
||||
background-color: var(--g-bgc);
|
||||
}
|
||||
.el-pager li:hover, .el-pager li.active, .el-pager li.btn-quicknext, .el-pager li.btn-quickprev{
|
||||
color: var(--g-c-h);
|
||||
}
|
||||
.el-input__inner, .el-input__inner:hover,
|
||||
.el-input-group__append, .el-input-group__prepend{
|
||||
background-color: var(--g-bgc);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.el-input.is-active .el-input__inner, .el-input__inner:focus{
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.el-input__inner{
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.el-select .el-input.is-focus .el-input__inner,
|
||||
.el-select .el-input__inner:focus,
|
||||
.el-select:hover .el-input__inner{
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
input::-webkit-input-placeholder{
|
||||
color: var(--g-c);
|
||||
}
|
||||
.el-icon-search{
|
||||
color: var(--g-icon);
|
||||
}
|
||||
.el-select-dropdown{
|
||||
color: var(--g-c);
|
||||
}
|
||||
.el-drawer{
|
||||
background-color: var(--g-bgc) !important;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
.el-loading-mask{
|
||||
background-color: var(--g-bgc);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.el-slider__bar{
|
||||
background-color: var(--g-c-h);
|
||||
}
|
||||
.el-slider__button{
|
||||
border-color: var(--g-c-h);
|
||||
}
|
||||
.Header, .Aside{
|
||||
i{
|
||||
color: var(--g-icon);
|
||||
&:hover{
|
||||
color: var(--g-icon-h);
|
||||
background-color: var(--g-bgc-h);
|
||||
}
|
||||
}
|
||||
}
|
||||
.Aside{
|
||||
i{
|
||||
&.active{
|
||||
color: var(--g-icon-h);
|
||||
background-color: var(--g-bgc-h);
|
||||
border-left: 4px solid var(--g-icon-h);
|
||||
}
|
||||
}
|
||||
}
|
||||
.Main{
|
||||
.film, .search, .star, .player{
|
||||
button:hover{
|
||||
color: var(--g-c-h);
|
||||
background: var(--g-bgc);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
.table-box{
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px var(--g-bdc);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--g-icon);
|
||||
outline: 1px solid var(--g-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
.player{
|
||||
.el-button--primary.is-plain{
|
||||
color: var(--g-c-h);
|
||||
background-color: var(--g-bgc-h);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
}
|
||||
.setting{
|
||||
.el-link, .card{
|
||||
color: var(--g-c);
|
||||
background-color: var(--g-bgc);
|
||||
border-color: var(--g-bdc);
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
color: var(--g-c);
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px var(--g-bdc);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--g-icon);
|
||||
outline: 1px solid var(--g-icon);
|
||||
}
|
||||
.box, .info, .urls{
|
||||
border: 1px solid var(--g-bdc);
|
||||
}
|
||||
.vodInfo{
|
||||
li, span, a{
|
||||
color: var(--g-c);
|
||||
}
|
||||
label{
|
||||
color: #f90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
src/assets/theme/pink.scss
Normal file
156
src/assets/theme/pink.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.theme-pink{
|
||||
color: var(--p-c);
|
||||
background-color: var(--p-bgc);
|
||||
.el-button, input, select, .el-select{
|
||||
color: var(--p-c);
|
||||
background-color: var(--p-bgc);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.el-select .el-input .el-select__caret{
|
||||
color: var(--p-icon)
|
||||
}
|
||||
.el-button--text{
|
||||
border: none;
|
||||
}
|
||||
.el-tabs__active-bar{
|
||||
background-color: var(--p-bdc);
|
||||
}
|
||||
.el-tabs__item:hover, .el-tabs__item.is-active{
|
||||
color: var(--p-c-h);
|
||||
}
|
||||
.el-tabs__item, .el-tabs__nav-wrap::after{
|
||||
color: var(--p-c);
|
||||
background-color: var(--p-bgc);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.el-table--border::after, .el-table--proup::after, .el-table::before,
|
||||
.el-table, .el-table th, .el-table tr,
|
||||
.el-table--striped .el-table__body tr.el-table__row--striped td,
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td,
|
||||
.el-table td, .el-table th.is-leaf{
|
||||
color: var(--p-c);
|
||||
background-color: var(--p-bgc);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.el-pagination, .el-pagination .el-pagination__total, .el-pagination .el-pagination__jump,
|
||||
.el-pagination .btn-next, .el-pagination .btn-prev, .el-pager li{
|
||||
color: var(--p-c);
|
||||
background-color: var(--p-bgc);
|
||||
}
|
||||
.el-pager li:hover, .el-pager li.active, .el-pager li.btn-quicknext, .el-pager li.btn-quickprev{
|
||||
color: var(--p-c-h);
|
||||
}
|
||||
.el-input__inner, .el-input__inner:hover,
|
||||
.el-input-group__append, .el-input-group__prepend{
|
||||
background-color: var(--p-bgc);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.el-input.is-active .el-input__inner, .el-input__inner:focus{
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.el-input__inner{
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.el-select .el-input.is-focus .el-input__inner,
|
||||
.el-select .el-input__inner:focus,
|
||||
.el-select:hover .el-input__inner{
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
input::-webkit-input-placeholder{
|
||||
color: var(--p-c);
|
||||
}
|
||||
.el-icon-search{
|
||||
color: var(--p-icon);
|
||||
}
|
||||
.el-select-dropdown{
|
||||
color: var(--p-c);
|
||||
}
|
||||
.el-drawer{
|
||||
background-color: var(--p-bgc) !important;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar{
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
.el-loading-mask{
|
||||
background-color: var(--p-bgc);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.el-slider__bar{
|
||||
background-color: var(--p-c-h);
|
||||
}
|
||||
.el-slider__button{
|
||||
border-color: var(--p-c-h);
|
||||
}
|
||||
.Header, .Aside{
|
||||
i{
|
||||
color: var(--p-icon);
|
||||
&:hover{
|
||||
color: var(--p-icon-h);
|
||||
background-color: var(--p-bgc-h);
|
||||
}
|
||||
}
|
||||
}
|
||||
.Aside{
|
||||
i{
|
||||
&.active{
|
||||
color: var(--p-icon-h);
|
||||
background-color: var(--p-bgc-h);
|
||||
border-left: 4px solid var(--p-icon-h);
|
||||
}
|
||||
}
|
||||
}
|
||||
.Main{
|
||||
.film, .search, .star, .player{
|
||||
button:hover{
|
||||
color: var(--p-c-h);
|
||||
background: var(--p-bgc);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
.table-box{
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px var(--p-bdc);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--p-icon);
|
||||
outline: 1px solid var(--p-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
.player{
|
||||
.el-button--primary.is-plain{
|
||||
color: var(--p-c-h);
|
||||
background-color: var(--p-bgc-h);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
}
|
||||
.setting{
|
||||
.el-link, .card{
|
||||
color: var(--p-c);
|
||||
background-color: var(--p-bgc);
|
||||
border-color: var(--p-bdc);
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
color: var(--p-c);
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px var(--p-bdc);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--p-icon);
|
||||
outline: 1px solid var(--p-icon);
|
||||
}
|
||||
.box, .info, .urls{
|
||||
border: 1px solid var(--p-bdc);
|
||||
}
|
||||
.vodInfo{
|
||||
li, span, a{
|
||||
color: var(--p-c);
|
||||
}
|
||||
label{
|
||||
color: #f90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -31,6 +31,14 @@
|
||||
<img src="@/assets/image/dark.png" class="image" @click="selectTheme('dark')">
|
||||
<span size="mini">Dark</span>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="card">
|
||||
<img src="@/assets/image/pink.png" class="image" @click="selectTheme('pink')">
|
||||
<span size="mini">Pink</span>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="card">
|
||||
<img src="@/assets/image/green.png" class="image" @click="selectTheme('green')">
|
||||
<span size="mini">Green</span>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row class="item about">
|
||||
@@ -60,7 +68,7 @@ export default Vue.extend({
|
||||
return {
|
||||
sites: sites,
|
||||
dbSite: 0,
|
||||
opacity: 96,
|
||||
opacity: 98,
|
||||
download: false
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user