mirror of
https://github.com/cuiocean/ZY-Player.git
synced 2026-07-11 05:56:10 +08:00
🎋 大部分样式完成
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 20 KiB |
@@ -4,6 +4,7 @@
|
||||
--l-c-1: #823aa011;
|
||||
--l-c-2: #823aa022;
|
||||
--l-c-3: #823aa033;
|
||||
--l-c-5: #823aa055;
|
||||
--l-c-8: #823aa088;
|
||||
--l-c-9: #823aa099;
|
||||
--l-fc-1: #808695;
|
||||
@@ -12,6 +13,7 @@
|
||||
--l-bgc-1: #ffffff;
|
||||
--l-bgc-2: #f2f6f9;
|
||||
--l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
|
||||
--l-bsc-2: 0 -4px 23px 0 #8e8da233;
|
||||
--l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
|
||||
--l-bsc-scroll: inset 0 0 5px #823aa005;
|
||||
}
|
||||
|
||||
@@ -123,6 +123,40 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
color: var(--l-fc-1);
|
||||
background-color:var(--l-bgc-1);
|
||||
box-shadow: var(--l-bsc-2);
|
||||
.detail-content{
|
||||
.detail-close{
|
||||
svg{
|
||||
stroke-width: 1;
|
||||
stroke: var(--l-c-8);
|
||||
&:hover{
|
||||
stroke-width: 2px;
|
||||
stroke: var(--l-c-9);
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-body{
|
||||
.info, .desc, .m3u8_urls, .mp4_urls{
|
||||
border-color: var(--l-c-2);
|
||||
}
|
||||
.m3u8_urls, .mp4_urls{
|
||||
.box{
|
||||
span{
|
||||
border-color: var(--l-c-5);
|
||||
&:hover{
|
||||
color: var(--l-fc-2);
|
||||
background-color: var(--l-c-1);
|
||||
border-color: var(--l-c-8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.film{
|
||||
.top{
|
||||
.search{
|
||||
@@ -151,5 +185,109 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
background-color: var(--l-bgc-1);
|
||||
box-shadow: var(--l-bsc);
|
||||
}
|
||||
}
|
||||
.play{
|
||||
background-color: var(--l-bgc-1);
|
||||
box-shadow: var(--l-bsc);
|
||||
.box{
|
||||
.more{
|
||||
span{
|
||||
svg{
|
||||
stroke: var(--l-c-5);
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
}
|
||||
&:hover{
|
||||
svg{
|
||||
stroke: var(--l-c-8);
|
||||
stroke-width: 1.5;
|
||||
fill: var(--l-c-2);
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
svg{
|
||||
stroke: var(--l-c-9);
|
||||
stroke-width: 2;
|
||||
fill: var(--l-c-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
border: 1px solid var(--l-c-3);
|
||||
background-color: var(--l-bgc-2);
|
||||
.list-top{
|
||||
color: var(--l-fc-2);
|
||||
.list-top-close{
|
||||
svg{
|
||||
stroke: var(--l-c-5);
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
&:hover{
|
||||
stroke: var(--l-c-8);
|
||||
stroke-width: 1.5;
|
||||
fill: var(--l-c-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-body{
|
||||
.list-item{
|
||||
li{
|
||||
color: var(--l-fc-1);
|
||||
&.active{
|
||||
background-color: var(--l-c-2);
|
||||
color: var(--l-fc-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-history{
|
||||
li{
|
||||
.title{
|
||||
color: var(--l-fc-1);
|
||||
}
|
||||
&.active{
|
||||
background-color: var(--l-c-2);
|
||||
.title{
|
||||
color: var(--l-fc-3);
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color: var(--l-c-3);
|
||||
.detail-delete{
|
||||
display: inline-block;
|
||||
color: var(--l-fc-2);
|
||||
}
|
||||
}
|
||||
.detail-delete{
|
||||
&:hover{
|
||||
background-color: var(--l-c-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.star{
|
||||
background-color: var(--l-bgc-1);
|
||||
box-shadow: var(--l-bsc);
|
||||
}
|
||||
.setting{
|
||||
background-color: var(--l-bgc-1);
|
||||
box-shadow: var(--l-bsc);
|
||||
.info{
|
||||
a{
|
||||
color: var(--l-fc-1);
|
||||
&:hover{
|
||||
color: var(--l-fc-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user