diff --git a/slideshowpure-fullsreen.css b/slideshowpure-fullsreen.css index 3683dee..42e45de 100644 --- a/slideshowpure-fullsreen.css +++ b/slideshowpure-fullsreen.css @@ -1,5 +1,51 @@ @import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap"); +.misty-loading { + z-index: 99999999; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 1); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.misty-loading h1 { + margin: 0; + margin-bottom: 3rem; + text-transform: uppercase; + transition: 0.8s; + transform: scale(1.15); + opacity: 1; + font-size: 4em; +} + +.misty-loading h1 img { + transform: scale(1); + opacity: 1; + display: block; + z-index: 999999999 !important; + visibility: visible; +} + +.misty-loading h1.active { + transform: scale(1); + opacity: 1; +} + +.misty-loading .mdl-spinner { + margin: 0; + position: initial; +} + +.misty-loading .mdl-spinner__layer-1 { + border-color: #fff; +} + @media only screen and (min-width: 767px) { div[data-role="page"].page { overflow-y: scroll; @@ -11,10 +57,6 @@ display: none; } - .emby-scroller-container { - z-index: 8; -} - .backdrop, .slide { position: absolute; @@ -69,8 +111,8 @@ .dots-container { position: absolute; - top: calc(50% + 190px); - right: 2%; + top: calc(50% + 13em); + right: 3%; z-index: 2; display: flex; gap: 5px; @@ -143,12 +185,19 @@ } #slides-container { - position: static; - width: 92vw; - height: 650px; + position: relative; + width: 100vw; + height: 90vh; overflow: hidden; margin: 0 auto; border-radius: 15px; + top: -5em; + } + + .sections.homeSectionsContainer { + position: relative; + z-index: 8; + top: -17em; } .slide { @@ -188,15 +237,15 @@ z-index: 1; mask-image: linear-gradient( to top, - rgba(0, 0, 0, 0) 10%, - rgba(0, 0, 0, 0.5) 15%, - rgba(0, 0, 0, 1) 30% + rgba(0, 0, 0, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + rgba(0, 0, 0, 1) 8% ); -webkit-mask-image: linear-gradient( to top, - rgba(0, 0, 0, 0) 10%, - rgba(0, 0, 0, 0.5) 15%, - rgba(0, 0, 0, 1) 30% + rgba(0, 0, 0, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + rgba(0, 0, 0, 1) 8% ); } @@ -211,15 +260,15 @@ z-index: 2; mask-image: linear-gradient( to top, - rgba(0, 0, 0, 0) 10%, - rgba(0, 0, 0, 0.5) 15%, - rgba(0, 0, 0, 1) 30% + rgba(0, 0, 0, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + rgba(0, 0, 0, 1) 8% ); -webkit-mask-image: linear-gradient( to top, - rgba(0, 0, 0, 0) 10%, - rgba(0, 0, 0, 0.5) 15%, - rgba(0, 0, 0, 1) 30% + rgba(0, 0, 0, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + rgba(0, 0, 0, 1) 8% ); } @@ -310,15 +359,15 @@ z-index: 2; mask-image: linear-gradient( to top, - rgba(0, 0, 0, 0) 8%, - rgba(0, 0, 0, 0.5) 10%, - rgba(0, 0, 0, 1) 12% + rgba(0, 0, 0, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + rgba(0, 0, 0, 1) 8% ); -webkit-mask-image: linear-gradient( to top, - rgba(0, 0, 0, 0) 8%, - rgba(0, 0, 0, 0.5) 10%, - rgba(0, 0, 0, 1) 12% + rgba(0, 0, 0, 0) 2%, + rgba(0, 0, 0, 0.5) 6%, + rgba(0, 0, 0, 1) 8% ); } .genre { @@ -574,8 +623,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - max-height: 60%; - max-width: 80%; + max-height: 50%; + max-width: 70%; width: auto; z-index: 4; filter: brightness(1.5); @@ -585,8 +634,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - max-height: 60%; - max-width: 80%; + max-height: 50%; + max-width: 70%; width: auto; scale: 1.01; filter: blur(1.1rem);