diff --git a/slideshowpure.css b/slideshowpure.css index e6d7ad4..efb25df 100644 --- a/slideshowpure.css +++ b/slideshowpure.css @@ -1,5 +1,5 @@ /* - * Jellyfin Slideshow by M0RPH3US v4.0.2 + * Jellyfin Slideshow by M0RPH3US v4.0.3 */ @import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap); @@ -50,7 +50,7 @@ opacity: 1; transition: opacity 0.3s ease-in-out; overflow: hidden; - /*will-change: opacity;*/ + will-change: opacity; } .bar-loading.hide { @@ -119,7 +119,7 @@ height: 12%; } -.video-container { +/* .video-container { position: absolute; top: 0; right: 0; @@ -152,6 +152,50 @@ .video-player { width: 100%; height: 100%; +} */ + +.video-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100vw; + height: 56.25vw; + min-height: 100vh; + min-width: 177.77vh; + z-index: 0; + pointer-events: none; + overflow: hidden; + opacity: 0; + transition: opacity 0.5s ease-in-out; + mask-image: + linear-gradient(to right, transparent 10%, black 30%), + linear-gradient(to top, transparent 15%, rgba(0, 0, 0, 0.5) 20%, black 30%); + + -webkit-mask-image: + linear-gradient(to right, transparent 10%, black 30%), + linear-gradient(to top, transparent 15%, rgba(0, 0, 0, 0.5) 20%, black 30%); + + mask-composite: intersect; + -webkit-mask-composite: source-in; +} + +.video-container.active { + opacity: 1; +} + +.video-player { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.video-player iframe { + width: 100%; + height: 100%; + pointer-events: none; } .volume-toggle { @@ -361,13 +405,14 @@ border-radius: 5px; z-index: 3; transition: - width 0.5s ease-in-out, - mask-image 0.5s ease-in-out, - -webkit-mask-image 0.5s ease-in-out; + width 1.5s ease-in-out, + mask-image 1.5s ease-in-out, + -webkit-mask-image 1.5s ease-in-out; + will-change: width; } .backdrop.with-video { - width: 100%; + width: 40%; mask-image: linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%), linear-gradient(to right, black 30%, transparent 85%);