restyled music videos

This commit is contained in:
yazninja 2022-05-15 14:47:18 +08:00
parent ddeb299317
commit 392b5a20a8
2 changed files with 81 additions and 18 deletions

View file

@ -2973,10 +2973,79 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 100%;
height: calc(100% - var(--chromeHeight));
bottom: 0;
z-index: 100000;
z-index: 100000;
}
#apple-music-video-container {
// AM Web Style Fullscreen Button
#player-fullscreen {
background-size : 50%;
background-position: center;
background-repeat : no-repeat;
filter : opacity(0.6);
// filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 80%));
background-color : transparent;
border-radius : 10px;
transition : 0.2s ease-in-out filter;
bottom : 0;
&:hover {
filter : opacity(1);
transition: 0.2s ease-in-out filter;
}
}
// AM Web Style PiP Button
#player-pip {
background-color: transparent;
border-radius : 10px;
bottom : 0;
filter : opacity(0.6);
transition : 0.2s ease-in-out filter;
&:hover {
filter : opacity(1);
transition: 0.2s ease-in-out filter;
}
}
.playback-info{
position: absolute;
width:100%;
bottom: 0;
padding: 20px 40px;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%);
.song-artist{
font-size: 1.7rem;
font-weight: bold;
}
.song-name{
font-size: 1.2rem;
font-weight: bold;
color:rgb(255,255,255,0.8);
}
}
input[type="range"]{
align-self: center;
height: 4px;
border-radius: .5rem;
margin-inline: 10px;
}
.song-progress input[type="range"]{
appearance: initial;
&::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000;
border: 1px solid #39404D;
background: #fff;
height:0.7rem;
width:0.7rem;
border-radius: 50%;
cursor: pointer;
-webkit-appearance: none;
}
}
}
#apple-music-video-player {
position: absolute;
@ -3000,10 +3069,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 100%;
height: 100%;
.playback-info{
position: absolute;
bottom: 2vw;
left: 2vw;
width: 97%;
.song-progress {
display: flex;
}
@ -3073,7 +3138,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 10px;
right: 50px;
border-radius: 100%;
background: rgb(255 255 255 / 50%);
display: flex;
justify-content: center;
align-items: center;
@ -3092,7 +3156,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
margin: 10px;
right: 0px;
border-radius: 100%;
background: rgb(255 255 255 / 50%);
display: flex;
justify-content: center;
align-items: center;