diff --git a/src/renderer/style.less b/src/renderer/style.less index 0e1a3661..6009522d 100644 --- a/src/renderer/style.less +++ b/src/renderer/style.less @@ -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; diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs index 427b15f1..f748bfb9 100644 --- a/src/renderer/views/app/panels.ejs +++ b/src/renderer/views/app/panels.ejs @@ -62,16 +62,6 @@ : '')}} -