mirror of
https://github.com/cuiocean/ZY-Player.git
synced 2026-05-05 16:53:30 +08:00
🚖 优化绿色主题，新增粉色主题
This commit is contained in:
hunlongyu
@@ -592,7 +592,7 @@ section {
|
||||
z-index: 1;
|
||||
transform: scale(1.2);
|
||||
margin-top: 10px;
|
||||
border-radius: 25px;
|
||||
/* border-radius: 25px; */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 81 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: 74 KiB |
@@ -43,19 +43,38 @@
|
||||
--g-c-5: #EAEF9D55;
|
||||
--g-c-8: #EAEF9D88;
|
||||
--g-c-9: #EAEF9D99;
|
||||
--g-fc-1: #80B155;
|
||||
--g-fc-2: #C1D95CAA;
|
||||
--g-fc-1: #ffffff;
|
||||
--g-fc-2: #d2dedc;
|
||||
--g-fc-3: #C1D95C;
|
||||
--g-bgc-1: #336A29;
|
||||
--g-bgc-2: #498428;
|
||||
--g-bsc: 0 3px 1px -2px #C1D95C33, 0 2px 2px 0 #C1D95C22, 0 1px 5px 0 #C1D95C11;
|
||||
--g-bsc-2: 0 -4px 23px 0 #C1D95C33;
|
||||
--g-bsc-hover: 0 14px 26px -12px #C1D95C33, 0 4px 23px 0 #C1D95C22, 0 8px 10px -5px #C1D95C11;
|
||||
--g-bsc-scroll: inset 0 0 5px #C1D95C05;
|
||||
--g-bgc-1: #4baea0;
|
||||
--g-bgc-2: #74b4ac;
|
||||
--g-bsc: 0 3px 1px -2px #e1ebe033, 0 2px 2px 0 #e1ebe022, 0 1px 5px 0 #e1ebe011;
|
||||
--g-bsc-2: 0 -4px 23px 0 #e1ebe033;
|
||||
--g-bsc-hover: 0 14px 26px -12px #e1ebe033, 0 4px 23px 0 #e1ebe022, 0 8px 10px -5px #e1ebe011;
|
||||
--g-bsc-scroll: inset 0 0 5px #e1ebe005;
|
||||
|
||||
// pink
|
||||
--p-c-0: #f4f7f7;
|
||||
--p-c-1: #f4f7f711;
|
||||
--p-c-2: #f4f7f722;
|
||||
--p-c-3: #f4f7f733;
|
||||
--p-c-5: #f4f7f755;
|
||||
--p-c-8: #f4f7f788;
|
||||
--p-c-9: #f4f7f799;
|
||||
--p-fc-1: #ffffff;
|
||||
--p-fc-2: #FFFFF3;
|
||||
--p-fc-3: #f15c5c;
|
||||
--p-bgc-1: #ff8499;
|
||||
--p-bgc-2: #fea1b2;
|
||||
--p-bsc: 0 3px 1px -2px #ef528533, 0 2px 2px 0 #ef528522, 0 1px 5px 0 #ef528511;
|
||||
--p-bsc-2: 0 -4px 23px 0 #ef528533;
|
||||
--p-bsc-hover: 0 14px 26px -12px #ef528533, 0 4px 23px 0 #ef528522, 0 8px 10px -5px #ef528511;
|
||||
--p-bsc-scroll: inset 0 0 5px #ef528505;
|
||||
}
|
||||
|
||||
@import './theme/light.scss';
|
||||
@import './theme/dark.scss';
|
||||
@import './theme/green.scss';
|
||||
@import './theme/pink.scss';
|
||||
|
||||
@import './style.scss';
|
||||
|
||||
346
src/assets/scss/theme/pink.scss
Normal file
346
src/assets/scss/theme/pink.scss
Normal file
@@ -0,0 +1,346 @@
|
||||
.theme-pink{
|
||||
background-color: var(--p-bgc-1);
|
||||
.el-pagination{
|
||||
background-color: var(--p-bgc-1);
|
||||
color: var(--p-fc-1);
|
||||
.el-pagination__total, .el-pagination__jump, .el-input__inner{
|
||||
color: var(--p-fc-1);
|
||||
background-color: var(--p-bgc-1);
|
||||
}
|
||||
.el-input__inner{
|
||||
border-color: var(--p-c-3);
|
||||
}
|
||||
.el-pager{
|
||||
.number{
|
||||
background-color: var(--p-bgc-1);
|
||||
}
|
||||
.number:hover{
|
||||
color: var(--p-c-8);
|
||||
}
|
||||
.active{
|
||||
color: var(--p-c-9);
|
||||
}
|
||||
}
|
||||
.more, .btn-next, .btn-prev{
|
||||
background-color: var(--p-bgc-1);
|
||||
&:hover{
|
||||
color: var(--p-c-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-select{
|
||||
color: var(--p-fc-1);
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
&:hover{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
}
|
||||
.vs-options{
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
ul{
|
||||
li{
|
||||
&:hover{
|
||||
background-color: var(--p-c-1);
|
||||
}
|
||||
&.active{
|
||||
background-color: var(--p-c-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-table{
|
||||
color: var(--p-fc-2);
|
||||
.tHead{
|
||||
background-color: var(--p-bgc-1);
|
||||
border-bottom-color: var(--p-c-3);
|
||||
}
|
||||
.tBody{
|
||||
border-bottom-color: var(--p-c-3);
|
||||
ul{
|
||||
li{
|
||||
border-bottom-color: var(--p-c-2);
|
||||
&:hover{
|
||||
animation: d-tableHoverAni 0.2s ease both;
|
||||
@keyframes d-tableHoverAni {
|
||||
to{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
span{
|
||||
&.btn:hover{
|
||||
color: var(--p-fc-3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tFooter{
|
||||
.tFooter-span{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-scroll{
|
||||
&:hover{
|
||||
&::-webkit-scrollbar-thumb {
|
||||
box-shadow: var(--p-bsc-scroll);
|
||||
background: var(--p-c-3);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
box-shadow: var(--p-bsc-scroll);
|
||||
background: var(--bgc);
|
||||
}
|
||||
}
|
||||
}
|
||||
.zy-loading{
|
||||
.loader{
|
||||
color: var(--p-c-3);
|
||||
}
|
||||
}
|
||||
.zy-body{
|
||||
background-color: var(--p-bgc-2);
|
||||
}
|
||||
.aside{
|
||||
.zy-svg{
|
||||
svg{
|
||||
stroke: var(--p-c-0);
|
||||
}
|
||||
&:hover{
|
||||
background-color: var(--p-c-2);
|
||||
}
|
||||
&.active{
|
||||
svg{
|
||||
stroke: var(--p-c-0);
|
||||
stroke-width: 2;
|
||||
fill: var(--p-c-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame{
|
||||
span{
|
||||
&.min{
|
||||
background-color: #ffbe2a;
|
||||
}
|
||||
&.close{
|
||||
background-color: #ff5f56;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
color: var(--p-fc-1);
|
||||
background-color:var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc-2);
|
||||
.detail-content{
|
||||
.detail-close{
|
||||
svg{
|
||||
stroke-width: 1;
|
||||
stroke: var(--p-c-8);
|
||||
&:hover{
|
||||
stroke-width: 2px;
|
||||
stroke: var(--p-c-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-body{
|
||||
.info, .desc, .m3u8_urls, .mp4_urls{
|
||||
border-color: var(--p-c-2);
|
||||
}
|
||||
.m3u8_urls, .mp4_urls{
|
||||
.box{
|
||||
span{
|
||||
border-color: var(--p-c-5);
|
||||
&:hover{
|
||||
color: var(--p-fc-2);
|
||||
background-color: var(--p-c-1);
|
||||
border-color: var(--p-c-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.film{
|
||||
.top{
|
||||
.search{
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
&:hover{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
}
|
||||
svg{
|
||||
stroke: var(--p-c-0);
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
.search-box{
|
||||
background-color: var(--p-bgc-1);
|
||||
}
|
||||
&.active{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
svg{
|
||||
stroke-width: 1.5;
|
||||
fill: var(--p-c-2);
|
||||
}
|
||||
}
|
||||
input{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
}
|
||||
}
|
||||
.play{
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
.title{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
.box{
|
||||
.more{
|
||||
span{
|
||||
svg{
|
||||
stroke: var(--p-c-5);
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
&:hover{
|
||||
svg{
|
||||
stroke: var(--p-c-8);
|
||||
stroke-width: 1.5;
|
||||
fill: var(--p-c-2);
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
svg{
|
||||
stroke: var(--p-c-9);
|
||||
stroke-width: 2;
|
||||
fill: var(--p-c-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
border: 1px solid var(--p-c-3);
|
||||
background-color: var(--p-bgc-2);
|
||||
.list-top{
|
||||
color: var(--p-fc-2);
|
||||
.list-top-close{
|
||||
svg{
|
||||
stroke: var(--p-c-5);
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
&:hover{
|
||||
stroke: var(--p-c-8);
|
||||
stroke-width: 1.5;
|
||||
fill: var(--p-c-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-body{
|
||||
.list-item{
|
||||
li{
|
||||
color: var(--p-fc-1);
|
||||
&.active{
|
||||
background-color: var(--p-c-2);
|
||||
color: var(--p-fc-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-history{
|
||||
li{
|
||||
.title{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
&.active{
|
||||
background-color: var(--p-c-2);
|
||||
.title{
|
||||
color: var(--p-fc-3);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color: var(--p-c-3);
|
||||
.detail-delete{
|
||||
display: inline-block;
|
||||
color: var(--p-fc-2);
|
||||
}
|
||||
}
|
||||
.detail-delete{
|
||||
&:hover{
|
||||
background-color: var(--p-c-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.play-mask{
|
||||
background-color: var(--p-bgc-1);
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
}
|
||||
.star{
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
}
|
||||
.setting{
|
||||
background-color: var(--p-bgc-1);
|
||||
box-shadow: var(--p-bsc);
|
||||
.info{
|
||||
a{
|
||||
color: var(--p-fc-1);
|
||||
&:hover{
|
||||
color: var(--p-fc-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.theme{
|
||||
.title{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
.theme-item{
|
||||
box-shadow: var(--p-bsc);
|
||||
&:hover{
|
||||
box-shadow: var(--p-bsc-hover);
|
||||
.theme-name{
|
||||
color: var(--p-fc-2)
|
||||
}
|
||||
}
|
||||
.theme-name{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.qrcode{
|
||||
.title{
|
||||
color: var(--p-fc-1);
|
||||
}
|
||||
.qrcode-item{
|
||||
box-shadow: var(--p-bsc);
|
||||
}
|
||||
}
|
||||
}
|
||||
.share{
|
||||
background-color: var(--p-bgc-1);
|
||||
color: var(--p-fc-1);
|
||||
border: 1px solid var(--p-c-8);
|
||||
.right{
|
||||
color: var(--p-fc-1);
|
||||
.tops{
|
||||
color: var(--p-fc-2);
|
||||
}
|
||||
}
|
||||
.share-mask{
|
||||
background-color: var(--p-bgc-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -45,6 +45,12 @@
|
||||
</div>
|
||||
<div class="theme-name">Green</div>
|
||||
</div>
|
||||
<div @click="changeTheme('pink')" class="theme-item pink">
|
||||
<div class="theme-image">
|
||||
<img src="../assets/image/pink.png" alt="">
|
||||
</div>
|
||||
<div class="theme-name">Pink</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qrcode">
|
||||
|
||||
Reference in New Issue
Block a user