@oplayer/plugins
Version:
oplayer's plugin
181 lines (157 loc) • 3.12 kB
CSS
.playlist {
position: absolute;
top: 0;
left: 100%;
height: 100%;
z-index: 9;
width: 18em;
transition: transform 0.3s;
background-color: rgba(28, 28, 28, 0.9);
}
@media (max-width: 991px) {
.playlist {
max-width: 70%;
}
}
.playlist.playlist__active {
transform: translateX(-100%);
}
.playlist.playlist__wait .playlist-list {
cursor: wait;
}
.playlist.playlist__wait .playlist-list .playlist-list-item {
pointer-events: none;
}
.playlist.playlist__active::before {
content: '';
position: absolute;
width: 100vw;
height: 100%;
right: 0;
z-index: -1;
}
.playlist-head {
display: flex;
justify-content: space-between;
background: #000;
border-bottom: 1px solid #484848;
padding: 0.2em 0.2em 0.2em 0.4em;
align-items: center;
color: #fff;
box-sizing: border-box;
height: 2.2em;
> span {
font-size: 0.8em;
}
}
.playlist-head .playlist-back {
display: flex;
align-items: center;
cursor: pointer;
}
.playlist-head .playlist-back > svg {
width: 1.75em;
height: 1.75em;
fill: #fff;
pointer-events: none;
}
.playlist-head .playlist-back:hover {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.playlist-list {
overflow: auto;
height: 100%;
padding-bottom: 2.2em;
box-sizing: border-box;
color: #ccc;
}
.playlist-list::-webkit-scrollbar {
width: 0.3em;
}
.playlist-list::-webkit-scrollbar-thumb {
background: #ccc;
}
.playlist-list-item {
position: relative;
border-bottom: 1px solid #444;
padding: 8px;
display: flex;
height: 5em;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.playlist-list-item > * {
pointer-events: none;
}
.playlist-list-item:hover,
.playlist-list-item.playlist-source__active {
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
.playlist-list-item.playlist-source__progress::before {
content: '';
top: 0;
left: -100%;
position: absolute;
width: 100%;
height: 100%;
animation: progress 1s infinite;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
}
@keyframes progress {
from {
left: -100%;
}
to {
left: 100%;
}
}
.playlist-list-item-thumb {
background-color: #000;
border: 1px solid #444;
float: left;
margin-right: 10px;
height: 100%;
aspect-ratio: 16/9;
color: #555;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.playlist-list-item-img {
height: 100%;
width: 100%;
object-fit: cover;
}
.playlist-list-item-img__error::after {
content: 'ERROR';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.playlist-list-item-desc {
width: 100%;
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.playlist-list-item-desc > p {
margin: 0 0 6px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
line-height: 1.2;
}