okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

restyled music videos

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

77
src/renderer/style.less
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;

22
src/renderer/views/app/panels.ejs
View file

@ -62,16 +62,6 @@
:
'')}}
</div>
<div id="player-pip"
@click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
title="Picture-in-Picture">
<%- include("../svg/pip.svg") %>
</div>
<div id="player-fullscreen"
@click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
title="Fullscreen">
<%- include("../svg/fullscreen.svg") %>
</div>
<div class="playback-info music-player-info">
<div class="song-artist-album-content"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
@ -120,7 +110,17 @@
<button class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>
</div>
</div>
<div id="player-pip"
@click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
title="Picture-in-Picture">
<%- include("../svg/pip.svg") %>
</div>
<div id="player-fullscreen"
@click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
title="Fullscreen">
<%- include("../svg/fullscreen.svg") %>
</div>
</div>
</div>
</div>