diff --git a/src/Jellyfin.Plugin.MediaBar/Inject/home-html.chunk.js b/src/Jellyfin.Plugin.MediaBar/Inject/home-html.chunk.js
deleted file mode 100644
index 522fa7f..0000000
--- a/src/Jellyfin.Plugin.MediaBar/Inject/home-html.chunk.js
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/Jellyfin.Plugin.MediaBar/Inject/index.html b/src/Jellyfin.Plugin.MediaBar/Inject/index.html
index 41c07a8..b1c02f4 100644
--- a/src/Jellyfin.Plugin.MediaBar/Inject/index.html
+++ b/src/Jellyfin.Plugin.MediaBar/Inject/index.html
@@ -1,4 +1,3 @@
-
-
+
-
+
\ No newline at end of file
diff --git a/src/Jellyfin.Plugin.MediaBar/Inject/media-bar.js b/src/Jellyfin.Plugin.MediaBar/Inject/media-bar.js
deleted file mode 100644
index 713367a..0000000
--- a/src/Jellyfin.Plugin.MediaBar/Inject/media-bar.js
+++ /dev/null
@@ -1,35 +0,0 @@
-(function () {
- // List of CSS selectors for Home buttons
- const buttonSelectors = [
- ".headerHomeButton.barsMenuButton",
- ".css-17c09up",
- ".mainDrawer-scrollContainer > a:nth-child(2)"
- ];
-
- // Polling interval to check for buttons
- const intervalId = setInterval(function () {
- buttonSelectors.forEach(selector => {
- // Try to find the button
- const homeButton = document.querySelector(selector);
-
- // If the button is found
- if (homeButton) {
- // Attach the click event listener if not already added
- if (!homeButton.hasAttribute("data-home-handler")) {
- homeButton.addEventListener("click", function (event) {
- event.preventDefault(); // Prevent default behavior if necessary
- window.location.href = "/web/index.html#/home.html";
- });
-
- // Mark the button as handled
- homeButton.setAttribute("data-home-handler", "true");
- }
- }
- });
-
- // Stop polling if all buttons are found
- if (buttonSelectors.every(selector => document.querySelector(selector))) {
- clearInterval(intervalId);
- }
- }, 100); // Check every 100ms
-})();
\ No newline at end of file
diff --git a/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.css b/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.css
index b44b624..f877169 100644
--- a/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.css
+++ b/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.css
@@ -1,4 +1,4 @@
-@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);
+@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
.bar-loading {
z-index: 99999999;
position: fixed;
@@ -6,7 +6,7 @@
left: 0;
width: 100%;
height: 100%;
- background-color: rgb(0 0 0);
+ background-color: #000;
display: flex;
align-items: center;
justify-content: center;
@@ -37,8 +37,9 @@
transform: rotate(360deg);
}
}
-/* Mobile (Portrait) */
-@media only screen and (max-width: 480px) and (orientation: portrait) {
+
+/*Mobiles S*/
+@media only screen and (max-width: 320px) and (orientation: portrait) {
.backdrop,
.slide {
position: absolute;
@@ -62,7 +63,7 @@
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -80,16 +81,16 @@
.fade-out {
opacity: 0 !important;
}
- #homeTab {
- top: -5em;
- padding-bottom: 5em !important;
- position: relative;
- padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
- }
+ /*#homeTab {
+ top: -5em;
+ padding-bottom: 5em !important;
+ position: relative;
+ padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
+ }*/
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -11em;
+ top: 71vh;
}
.dots-container {
position: absolute;
@@ -129,7 +130,7 @@
overflow: hidden;
margin: 0;
padding: 0%;
- top: -3.5em;
+ /*top: -3.5em;*/
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -182,13 +183,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.gradient-overlay {
@@ -204,13 +205,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
@@ -225,7 +226,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-size: 1.1em;
font-weight: 500;
z-index: 4;
@@ -245,13 +246,13 @@
width: 100%;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -337,15 +338,14 @@
}
}
-/* Mobile (Landscape) */
-@media only screen and (max-width: 767px) and (orientation: landscape) {
+@media only screen and (max-width: 320px) and (orientation: landscape) {
.backdrop,
.slide {
position: absolute;
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -360,7 +360,7 @@
cursor: pointer;
color: #fff;
z-index: 3;
- display: flex;
+ display: none;
justify-content: center;
align-items: center;
}
@@ -428,16 +428,14 @@
#slides-container {
position: relative;
width: 100vw;
- height: 155vh;
+ height: 190vh;
overflow: hidden;
margin: 0 auto;
- /*border-radius: 15px;*/
- top: -7.5em;
}
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -15em;
+ top: 125vh;
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -474,13 +472,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.backdrop-overlay {
@@ -496,13 +494,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.logo-container {
@@ -521,8 +519,8 @@
width: auto;
object-fit: contain;
z-index: 4;
- top: 8em;
- left: 5em;
+ top: 8vh;
+ left: 5vw;
filter: brightness(1.5);
}
.featured-content {
@@ -559,9 +557,9 @@
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- left: 4.5em;
+ left: 5vw;
position: absolute;
- top: 7.5em;
+ top: 8.5em;
}
.gradient-overlay {
position: absolute;
@@ -575,22 +573,22 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
position: absolute;
top: calc(50% + 35px);
- left: 4.8em;
+ left: 5vw;
text-align: center;
color: #fff;
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-size: 14px;
z-index: 4;
}
@@ -605,15 +603,14 @@
z-index: 4;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
- margin: 0 6em;
z-index: 5;
position: relative;
}
.runTime {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -645,7 +642,7 @@
padding: 0 0.6em;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -703,8 +700,8 @@
}
}
-/* Tablet (Portrait) */
-@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait) {
+/*Mobiles M*/
+@media only screen and (min-width: 321px) and (max-width: 375px) and (orientation: portrait) {
.backdrop,
.slide {
position: absolute;
@@ -728,7 +725,7 @@
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -746,16 +743,16 @@
.fade-out {
opacity: 0 !important;
}
- #homeTab {
- top: -5em;
- padding-bottom: 5em !important;
- position: relative;
- padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
- }
+ /*#homeTab {
+ top: -5em;
+ padding-bottom: 5em !important;
+ position: relative;
+ padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
+ }*/
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -150px;
+ top: 91vh;
}
.dots-container {
position: absolute;
@@ -791,11 +788,11 @@
#slides-container {
position: relative;
width: 100vw;
- height: 800px;
+ height: 120vh;
overflow: hidden;
margin: 0;
padding: 0%;
- top: -3.5em;
+ /*top: -3.5em;*/
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -848,13 +845,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.gradient-overlay {
@@ -870,13 +867,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
@@ -891,7 +888,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-size: 1.1em;
font-weight: 500;
z-index: 4;
@@ -911,13 +908,13 @@
width: 100%;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -1003,15 +1000,14 @@
}
}
-/* Tablet (Landscape) */
-@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+@media only screen and (min-width: 321px) and (max-width: 375px) and (orientation: landscape) {
.backdrop,
.slide {
position: absolute;
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -1026,7 +1022,7 @@
cursor: pointer;
color: #fff;
z-index: 3;
- display: flex;
+ display: none;
justify-content: center;
align-items: center;
}
@@ -1052,7 +1048,670 @@
}
.dots-container {
position: absolute;
- top: calc(50% + 9em);
+ top: calc(50% + 22vh);
+ right: 3%;
+ z-index: 2;
+ display: flex;
+ gap: 5px;
+ background-color: #ffffff3d;
+ border-radius: 50px;
+ justify-content: center;
+ align-items: center;
+ width: 140px;
+ height: 22px;
+ transition: opacity 0.5s ease-in-out;
+ scale: 0.6;
+ }
+ .dot {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 5px;
+ background-color: #cecece;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+ .dot.active {
+ width: 22px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 6px;
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ .fade-in {
+ opacity: 1 !important;
+ }
+ .fade-out {
+ opacity: 0 !important;
+ }
+ #slides-container {
+ position: relative;
+ width: 100vw;
+ height: 135vh;
+ overflow: hidden;
+ margin: 0 auto;
+ }
+ .sections.homeSectionsContainer {
+ position: relative;
+ z-index: 8;
+ top: 75vh;
+ }
+ .slide {
+ transition: opacity 0.5s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .slide.active {
+ opacity: 1;
+ display: block;
+ }
+ .slide:focus {
+ outline: #fff solid 2px;
+ }
+ .backdrop-container {
+ position: relative;
+ top: -40%;
+ right: -35%;
+ width: 70%;
+ height: 100%;
+ }
+ .backdrop {
+ right: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center 20%;
+ border-radius: 5px;
+ z-index: 1;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .backdrop-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(0 0 0 / 0.6);
+ border-radius: 5px;
+ z-index: 2;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .logo-container {
+ width: 45%;
+ height: 40%;
+ position: relative;
+ display: flex;
+ justify-content: left;
+ align-items: left;
+ }
+ .logo {
+ position: relative;
+ max-height: 50%;
+ max-width: 70%;
+ height: auto;
+ width: auto;
+ object-fit: contain;
+ z-index: 4;
+ top: 25vh;
+ left: 5vw;
+ filter: brightness(1.5);
+ }
+ .featured-content {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 50px;
+ background-color: #fff0;
+ color: #d3d3d3;
+ font-size: 22px;
+ display: none;
+ align-items: center;
+ justify-content: flex-start;
+ z-index: 2;
+ }
+ .plot-container {
+ position: absolute;
+ bottom: 0;
+ color: #fff;
+ width: 90%;
+ height: 60%;
+ font-size: 15px;
+ padding: 10px 0 25px 15px;
+ border-radius: 5px;
+ z-index: 3;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: justify;
+ }
+ .plot {
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ left: 5vw;
+ position: absolute;
+ top: calc(50% + -20vh);
+ }
+ .gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70%;
+ height: 100%;
+ background: linear-gradient(to right, #000 49%, #fff0 70%);
+ z-index: 2;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .genre {
+ position: absolute;
+ top: calc(50% + 0vh);
+ left: 5vw;
+ text-align: center;
+ color: #fff;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: 14px;
+ z-index: 4;
+ }
+ .info-container {
+ position: absolute;
+ top: calc(50% + -10vh);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ left: 5vw;
+ color: #fff;
+ z-index: 4;
+ }
+ .rating-value {
+ font-family: "Archivo Narrow", sans-serif;
+ display: flex;
+ align-items: center;
+ z-index: 5;
+ position: relative;
+ }
+ .runTime {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin: 0 8px;
+ margin-right: -3px;
+ }
+ .rating-value img {
+ margin-right: 6px;
+ }
+ .tomato-rating {
+ display: flex;
+ align-items: center;
+ margin-left: 0;
+ }
+ .tomato-rating img {
+ margin-left: 5px;
+ }
+ .age-rating {
+ display: flex;
+ align-items: center;
+ margin-left: 5px;
+ margin-right: 5px;
+ border-radius: 5px;
+ background: rgb(255 255 255 / 0.8);
+ color: #000;
+ border: none;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 0.6em;
+ }
+ .date {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin-right: 5px;
+ margin-left: 2px;
+ }
+ .separator-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 10px;
+ color: aquamarine;
+ }
+ .button-container {
+ position: absolute;
+ top: calc(50% + 20vh);
+ left: 2vw;
+ display: flex;
+ z-index: 5;
+ justify-content: space-between;
+ width: 16em;
+ scale: 0.8;
+ }
+ .play-button,
+ .detail-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ border: solid 2px rgb(12 109 162 / 0.7);
+ border-radius: 25px;
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 700;
+ gap: 6px;
+ -webkit-tap-highlight-color: #fff0;
+ }
+ .play-button {
+ background-color: #0c6da2;
+ color: #fff;
+ }
+ .detail-button {
+ background-color: rgb(12 109 162 / 0.5);
+ color: #fff;
+ }
+ .play-button:hover,
+ .detail-button:hover {
+ opacity: 0.8;
+ }
+ .play-icon,
+ .detail-icon {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ }
+}
+
+/*Mobiles L*/
+@media only screen and (min-width: 376px) and (max-width: 425px) and (orientation: portrait) {
+ .backdrop,
+ .slide {
+ position: absolute;
+ }
+ .arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 24px;
+ cursor: pointer;
+ color: rgb(255 255 255 / 0.6);
+ z-index: 4;
+ -webkit-tap-highlight-color: #fff0;
+ display: none;
+ }
+ .left-arrow {
+ left: 10px;
+ }
+ .right-arrow {
+ right: 10px;
+ }
+ .featured-content,
+ .plot-container {
+ font-family: "Archivo Narrow", sans-serif;
+ left: 0;
+ }
+ .plot,
+ body {
+ overflow: hidden;
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ }
+ .fade-in {
+ opacity: 1 !important;
+ }
+ .fade-out {
+ opacity: 0 !important;
+ }
+ /*#homeTab {
+ top: -5em;
+ padding-bottom: 5em !important;
+ position: relative;
+ padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
+ }*/
+ .sections.homeSectionsContainer {
+ position: relative;
+ z-index: 8;
+ top: 73vh;
+ }
+ .dots-container {
+ position: absolute;
+ bottom: 20%;
+ left: 50%;
+ transform: translateX(-50%) scale(0.6);
+ z-index: 2;
+ display: flex;
+ gap: 5px;
+ background-color: #ffffff13;
+ border-radius: 50px;
+ justify-content: center;
+ align-items: center;
+ width: 140px;
+ height: 22px;
+ transition: opacity 0.5s ease-in-out;
+ }
+ .dot {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 5px;
+ background-color: #cecece;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+ .dot.active {
+ width: 27px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 10px;
+ }
+ #slides-container {
+ position: relative;
+ width: 100vw;
+ height: 95vh;
+ overflow: hidden;
+ margin: 0;
+ padding: 0%;
+ /*top: -3.5em;*/
+ }
+ .slide {
+ transition: opacity 0.5s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .slide.active {
+ opacity: 1;
+ display: block;
+ }
+ .slide:focus {
+ outline: #fff solid 2px;
+ }
+ .logo {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 50%;
+ max-width: 70%;
+ width: auto;
+ z-index: 4;
+ filter: brightness(1.5);
+ }
+ .featured-logo-blur {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 50%;
+ max-width: 70%;
+ width: auto;
+ scale: 1.01;
+ filter: blur(1.1rem);
+ z-index: 3;
+ }
+ .backdrop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 1;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgb(0 0 0 / 0.65);
+ z-index: 2;
+ pointer-events: none;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .genre {
+ position: absolute;
+ bottom: 30%;
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+ color: #fff;
+ width: 90%;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: 1.1em;
+ font-weight: 500;
+ z-index: 4;
+ box-sizing: border-box;
+ }
+ .info-container {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ bottom: 25%;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 1.1em;
+ color: #fff;
+ z-index: 5;
+ width: 100%;
+ }
+ .rating-value {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ }
+ .date {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin-left: 2px;
+ }
+ .tomato-rating {
+ display: flex;
+ align-items: center;
+ }
+ .tomato-logo {
+ margin-right: 3px;
+ }
+ .critic-logo {
+ margin-left: 3px;
+ }
+ .imdb-logo {
+ margin-right: 3px;
+ }
+ .age-rating {
+ display: flex;
+ align-items: center;
+ border-radius: 5px;
+ background: rgb(255 255 255 / 0.8);
+ color: #000;
+ border: none;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 0.4em;
+ }
+ .separator-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 1px;
+ color: aquamarine;
+ }
+ .featured-content,
+ .plot {
+ display: none;
+ }
+ .button-container {
+ position: absolute;
+ bottom: 13%;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 15px;
+ z-index: 4;
+ }
+ .play-button,
+ .detail-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ border: none;
+ border-radius: 20px;
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 700;
+ gap: 6px;
+ -webkit-tap-highlight-color: #fff0;
+ }
+ .play-button {
+ background-color: #0c6da2;
+ color: #fff;
+ }
+ .detail-button {
+ background-color: rgb(12 109 162 / 0.5);
+ border: solid 1.5px rgb(12 109 162 / 0.8);
+ color: #fff;
+ }
+ .play-button:hover,
+ .detail-button:hover {
+ opacity: 0.8;
+ }
+ .play-icon,
+ .detail-icon {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ }
+}
+
+@media only screen and (min-width: 376px) and (max-width: 425px) and (orientation: landscape) {
+ .backdrop,
+ .slide {
+ position: absolute;
+ }
+ .featured-content,
+ .plot-container {
+ font-family: "Archivo Narrow", sans-serif;
+ left: 0;
+ }
+ .plot,
+ body {
+ overflow: hidden;
+ }
+ .arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 12px;
+ cursor: pointer;
+ color: #fff;
+ z-index: 3;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ }
+ .arrow::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 40px;
+ height: 40px;
+ background-color: rgb(12 110 162 / 0.7);
+ border-radius: 50%;
+ z-index: -1;
+ }
+ .left-arrow {
+ left: 20px;
+ font-size: 12px;
+ }
+ .right-arrow {
+ right: 20px;
+ font-size: 12px;
+ }
+ .dots-container {
+ position: absolute;
+ top: calc(50% + 11em);
right: 3%;
z-index: 2;
display: flex;
@@ -1094,16 +1753,14 @@
#slides-container {
position: relative;
width: 100vw;
- height: 135vh;
+ height: 190vh;
overflow: hidden;
margin: 0 auto;
- /*border-radius: 15px;*/
- top: -7.5em;
}
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -15em;
+ top: 125vh;
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -1140,13 +1797,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.backdrop-overlay {
@@ -1162,13 +1819,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.logo-container {
@@ -1187,7 +1844,7 @@
width: auto;
object-fit: contain;
z-index: 4;
- top: 5em;
+ top: 8em;
left: 5em;
filter: brightness(1.5);
}
@@ -1227,7 +1884,7 @@
-webkit-box-orient: vertical;
left: 4.5em;
position: absolute;
- top: 6.5em;
+ top: 35vh;
}
.gradient-overlay {
position: absolute;
@@ -1241,45 +1898,44 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
position: absolute;
- top: calc(50% + 1.5em);
- left: 5em;
+ top: calc(50% + 35px);
+ left: 4.8em;
text-align: center;
color: #fff;
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-size: 14px;
z-index: 4;
}
.info-container {
position: absolute;
- top: calc(50% + -1em);
+ top: calc(50% + 0px);
display: flex;
align-items: center;
justify-content: center;
- left: 2em !important;
+ left: -1em !important;
color: #fff;
z-index: 4;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
- margin: 0 3em;
z-index: 5;
position: relative;
}
.runTime {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -1311,7 +1967,1324 @@
padding: 0 0.6em;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin-right: 5px;
+ margin-left: 2px;
+ }
+ .separator-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 10px;
+ color: aquamarine;
+ }
+ .button-container {
+ position: absolute;
+ top: calc(50% + 10em);
+ left: 4.5em;
+ display: flex;
+ z-index: 5;
+ justify-content: space-between;
+ width: 16em;
+ }
+ .play-button,
+ .detail-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ border: solid 2px rgb(12 109 162 / 0.7);
+ border-radius: 25px;
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 700;
+ gap: 6px;
+ -webkit-tap-highlight-color: #fff0;
+ }
+ .play-button {
+ background-color: #0c6da2;
+ color: #fff;
+ }
+ .detail-button {
+ background-color: rgb(12 109 162 / 0.5);
+ color: #fff;
+ }
+ .play-button:hover,
+ .detail-button:hover {
+ opacity: 0.8;
+ }
+ .play-icon,
+ .detail-icon {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ }
+}
+
+/*Mobiles UL*/
+@media only screen and (min-width: 426px) and (max-width: 768px) and (orientation: portrait) {
+ .backdrop,
+ .slide {
+ position: absolute;
+ }
+ .arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 24px;
+ cursor: pointer;
+ color: rgb(255 255 255 / 0.6);
+ z-index: 4;
+ -webkit-tap-highlight-color: #fff0;
+ display: none;
+ }
+ .left-arrow {
+ left: 10px;
+ }
+ .right-arrow {
+ right: 10px;
+ }
+ .featured-content,
+ .plot-container {
+ font-family: "Archivo Narrow", sans-serif;
+ left: 0;
+ }
+ .plot,
+ body {
+ overflow: hidden;
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ }
+ .fade-in {
+ opacity: 1 !important;
+ }
+ .fade-out {
+ opacity: 0 !important;
+ }
+ .sections.homeSectionsContainer {
+ position: relative;
+ z-index: 8;
+ top: 73vh;
+ }
+ .dots-container {
+ position: absolute;
+ bottom: 24%;
+ left: 50%;
+ transform: translateX(-50%) scale(0.6);
+ z-index: 2;
+ display: flex;
+ gap: 5px;
+ background-color: #ffffff13;
+ border-radius: 50px;
+ justify-content: center;
+ align-items: center;
+ width: 140px;
+ height: 22px;
+ transition: opacity 0.5s ease-in-out;
+ }
+ .dot {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 5px;
+ background-color: #cecece;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+ .dot.active {
+ width: 27px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 10px;
+ }
+ #slides-container {
+ position: relative;
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ margin: 0;
+ padding: 0%;
+ }
+ .slide {
+ transition: opacity 0.5s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .slide.active {
+ opacity: 1;
+ display: block;
+ }
+ .slide:focus {
+ outline: #fff solid 2px;
+ }
+ .logo {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 50%;
+ max-width: 70%;
+ width: auto;
+ z-index: 4;
+ filter: brightness(1.5);
+ }
+ .featured-logo-blur {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 50%;
+ max-width: 70%;
+ width: auto;
+ scale: 1.01;
+ filter: blur(1.1rem);
+ z-index: 3;
+ }
+ .backdrop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 1;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgb(0 0 0 / 0.65);
+ z-index: 2;
+ pointer-events: none;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .genre {
+ position: absolute;
+ bottom: 33%;
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+ color: #fff;
+ width: 90%;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: 1.1em;
+ font-weight: 500;
+ z-index: 4;
+ box-sizing: border-box;
+ }
+ .info-container {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ bottom: 28%;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 1.1em;
+ color: #fff;
+ z-index: 5;
+ width: 100%;
+ }
+ .rating-value {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ }
+ .date {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin-left: 2px;
+ }
+ .tomato-rating {
+ display: flex;
+ align-items: center;
+ }
+ .tomato-logo {
+ margin-right: 3px;
+ }
+ .critic-logo {
+ margin-left: 3px;
+ }
+ .imdb-logo {
+ margin-right: 3px;
+ }
+ .age-rating {
+ display: flex;
+ align-items: center;
+ border-radius: 5px;
+ background: rgb(255 255 255 / 0.8);
+ color: #000;
+ border: none;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 0.4em;
+ }
+ .separator-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 1px;
+ color: aquamarine;
+ }
+ .featured-content,
+ .plot {
+ display: none;
+ }
+ .button-container {
+ position: absolute;
+ bottom: 18vh;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 15px;
+ z-index: 4;
+ }
+ .play-button,
+ .detail-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ border: none;
+ border-radius: 20px;
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 700;
+ gap: 6px;
+ -webkit-tap-highlight-color: #fff0;
+ }
+ .play-button {
+ background-color: #0c6da2;
+ color: #fff;
+ }
+ .detail-button {
+ background-color: rgb(12 109 162 / 0.5);
+ border: solid 1.5px rgb(12 109 162 / 0.8);
+ color: #fff;
+ }
+ .play-button:hover,
+ .detail-button:hover {
+ opacity: 0.8;
+ }
+ .play-icon,
+ .detail-icon {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ }
+}
+
+@media only screen and (min-width: 426px) and (max-width: 768px) and (orientation: landscape) {
+ .backdrop,
+ .slide {
+ position: absolute;
+ }
+ .featured-content,
+ .plot-container {
+ font-family: "Archivo Narrow", sans-serif;
+ left: 0;
+ }
+ .plot,
+ body {
+ overflow: hidden;
+ }
+ .arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 12px;
+ cursor: pointer;
+ color: #fff;
+ z-index: 3;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ }
+ .arrow::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 40px;
+ height: 40px;
+ background-color: rgb(12 110 162 / 0.7);
+ border-radius: 50%;
+ z-index: -1;
+ }
+ .left-arrow {
+ left: 20px;
+ font-size: 12px;
+ }
+ .right-arrow {
+ right: 20px;
+ font-size: 12px;
+ }
+ .dots-container {
+ position: absolute;
+ top: calc(50% + 34vh);
+ right: 3%;
+ z-index: 2;
+ display: flex;
+ gap: 5px;
+ background-color: #ffffff3d;
+ border-radius: 50px;
+ justify-content: center;
+ align-items: center;
+ width: 140px;
+ height: 22px;
+ transition: opacity 0.5s ease-in-out;
+ scale: 0.6;
+ }
+ .dot {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 5px;
+ background-color: #cecece;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+ .dot.active {
+ width: 22px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 6px;
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ .fade-in {
+ opacity: 1 !important;
+ }
+ .fade-out {
+ opacity: 0 !important;
+ }
+ #slides-container {
+ position: relative;
+ width: 100vw;
+ height: 145vh;
+ overflow: hidden;
+ margin: 0 auto;
+ }
+ .sections.homeSectionsContainer {
+ position: relative;
+ z-index: 8;
+ top: 90vh;
+ }
+ .slide {
+ transition: opacity 0.5s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .slide.active {
+ opacity: 1;
+ display: block;
+ }
+ .slide:focus {
+ outline: #fff solid 2px;
+ }
+ .backdrop-container {
+ position: relative;
+ top: -40%;
+ right: -35%;
+ width: 70%;
+ height: 100%;
+ }
+ .backdrop {
+ right: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center 20%;
+ border-radius: 5px;
+ z-index: 1;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .backdrop-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(0 0 0 / 0.6);
+ border-radius: 5px;
+ z-index: 2;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .logo-container {
+ width: 45%;
+ height: 40%;
+ position: relative;
+ display: flex;
+ justify-content: left;
+ align-items: left;
+ }
+ .logo {
+ position: relative;
+ max-height: 70%;
+ max-width: 100%;
+ height: auto;
+ width: auto;
+ object-fit: contain;
+ z-index: 4;
+ top: 8em;
+ left: 4vw;
+ filter: brightness(1.5);
+ }
+ .featured-content {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 50px;
+ background-color: #fff0;
+ color: #d3d3d3;
+ font-size: 22px;
+ display: none;
+ align-items: center;
+ justify-content: flex-start;
+ z-index: 2;
+ }
+ .plot-container {
+ position: absolute;
+ bottom: 0;
+ color: #fff;
+ width: 90%;
+ height: 60%;
+ font-size: 15px;
+ padding: 10px 0 25px 15px;
+ border-radius: 5px;
+ z-index: 3;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: justify;
+ }
+ .plot {
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ left: 4vw;
+ position: absolute;
+ top: 33vh;
+ }
+ .gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70%;
+ height: 100%;
+ background: linear-gradient(to right, #000 49%, #fff0 70%);
+ z-index: 2;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .genre {
+ position: absolute;
+ top: calc(50% + 10vh);
+ left: 4vw;
+ text-align: center;
+ color: #fff;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: 14px;
+ z-index: 4;
+ }
+ .info-container {
+ position: absolute;
+ top: calc(50% + 0px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ left: 4vw;
+ color: #fff;
+ z-index: 4;
+ }
+ .rating-value {
+ font-family: "Archivo Narrow", sans-serif;
+ display: flex;
+ align-items: center;
+ z-index: 5;
+ position: relative;
+ }
+ .runTime {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin: 0 8px;
+ margin-right: -3px;
+ }
+ .rating-value img {
+ margin-right: 6px;
+ }
+ .tomato-rating {
+ display: flex;
+ align-items: center;
+ margin-left: 0;
+ }
+ .tomato-rating img {
+ margin-left: 5px;
+ }
+ .age-rating {
+ display: flex;
+ align-items: center;
+ margin-left: 5px;
+ margin-right: 5px;
+ border-radius: 5px;
+ background: rgb(255 255 255 / 0.8);
+ color: #000;
+ border: none;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 0.6em;
+ }
+ .date {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin-right: 5px;
+ margin-left: 2px;
+ }
+ .separator-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 10px;
+ color: aquamarine;
+ }
+ .button-container {
+ position: absolute;
+ top: calc(50% + 32vh);
+ left: 0.5vw;
+ display: flex;
+ z-index: 5;
+ justify-content: space-between;
+ width: 16em;
+ scale: 0.8;
+ }
+ .play-button,
+ .detail-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ border: solid 2px rgb(12 109 162 / 0.7);
+ border-radius: 25px;
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 700;
+ gap: 6px;
+ -webkit-tap-highlight-color: #fff0;
+ }
+ .play-button {
+ background-color: #0c6da2;
+ color: #fff;
+ }
+ .detail-button {
+ background-color: rgb(12 109 162 / 0.5);
+ color: #fff;
+ }
+ .play-button:hover,
+ .detail-button:hover {
+ opacity: 0.8;
+ }
+ .play-icon,
+ .detail-icon {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ }
+}
+/*upwards changed lanscape width*/
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
+ .backdrop,
+ .slide {
+ position: absolute;
+ }
+ .arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 24px;
+ cursor: pointer;
+ color: rgb(255 255 255 / 0.6);
+ z-index: 4;
+ -webkit-tap-highlight-color: #fff0;
+ display: none;
+ }
+ .left-arrow {
+ left: 10px;
+ }
+ .right-arrow {
+ right: 10px;
+ }
+ .featured-content,
+ .plot-container {
+ font-family: "Archivo Narrow", sans-serif;
+ left: 0;
+ }
+ .plot,
+ body {
+ overflow: hidden;
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ }
+ .fade-in {
+ opacity: 1 !important;
+ }
+ .fade-out {
+ opacity: 0 !important;
+ }
+ /*#homeTab {
+ top: -5em;
+ padding-bottom: 5em !important;
+ position: relative;
+ padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
+ }*/
+ .sections.homeSectionsContainer {
+ position: relative;
+ z-index: 8;
+ top: 73vh;
+ }
+ .dots-container {
+ position: absolute;
+ bottom: 20%;
+ left: 50%;
+ transform: translateX(-50%) scale(0.6);
+ z-index: 2;
+ display: flex;
+ gap: 5px;
+ background-color: #ffffff13;
+ border-radius: 50px;
+ justify-content: center;
+ align-items: center;
+ width: 140px;
+ height: 22px;
+ transition: opacity 0.5s ease-in-out;
+ }
+ .dot {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 5px;
+ background-color: #cecece;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+ .dot.active {
+ width: 27px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 10px;
+ }
+ #slides-container {
+ position: relative;
+ width: 100vw;
+ height: 95vh;
+ overflow: hidden;
+ margin: 0;
+ padding: 0%;
+ }
+ .slide {
+ transition: opacity 0.5s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .slide.active {
+ opacity: 1;
+ display: block;
+ }
+ .slide:focus {
+ outline: #fff solid 2px;
+ }
+ .logo {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 50%;
+ max-width: 70%;
+ width: auto;
+ z-index: 4;
+ filter: brightness(1.5);
+ }
+ .featured-logo-blur {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-height: 50%;
+ max-width: 70%;
+ width: auto;
+ scale: 1.01;
+ filter: blur(1.1rem);
+ z-index: 3;
+ }
+ .backdrop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ z-index: 1;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgb(0 0 0 / 0.65);
+ z-index: 2;
+ pointer-events: none;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .genre {
+ position: absolute;
+ bottom: 30%;
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+ color: #fff;
+ width: 90%;
+ max-width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: 1.1em;
+ font-weight: 500;
+ z-index: 4;
+ box-sizing: border-box;
+ }
+ .info-container {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ bottom: 25%;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 1.1em;
+ color: #fff;
+ z-index: 5;
+ width: 100%;
+ }
+ .rating-value {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ }
+ .date {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin-left: 2px;
+ }
+ .tomato-rating {
+ display: flex;
+ align-items: center;
+ }
+ .tomato-logo {
+ margin-right: 3px;
+ }
+ .critic-logo {
+ margin-left: 3px;
+ }
+ .imdb-logo {
+ margin-right: 3px;
+ }
+ .age-rating {
+ display: flex;
+ align-items: center;
+ border-radius: 5px;
+ background: rgb(255 255 255 / 0.8);
+ color: #000;
+ border: none;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 0.4em;
+ }
+ .separator-icon {
+ margin-left: 5px;
+ margin-right: 5px;
+ font-size: 1px;
+ color: aquamarine;
+ }
+ .featured-content,
+ .plot {
+ display: none;
+ }
+ .button-container {
+ position: absolute;
+ bottom: 13%;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 15px;
+ z-index: 4;
+ }
+ .play-button,
+ .detail-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 16px;
+ border: none;
+ border-radius: 20px;
+ font-size: 14px;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 700;
+ gap: 6px;
+ -webkit-tap-highlight-color: #fff0;
+ }
+ .play-button {
+ background-color: #0c6da2;
+ color: #fff;
+ }
+ .detail-button {
+ background-color: rgb(12 109 162 / 0.5);
+ border: solid 1.5px rgb(12 109 162 / 0.8);
+ color: #fff;
+ }
+ .play-button:hover,
+ .detail-button:hover {
+ opacity: 0.8;
+ }
+ .play-icon,
+ .detail-icon {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ }
+}
+
+@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
+ .backdrop,
+ .slide {
+ position: absolute;
+ }
+ .featured-content,
+ .plot-container {
+ font-family: "Archivo Narrow", sans-serif;
+ left: 0;
+ }
+ .plot,
+ body {
+ overflow: hidden;
+ }
+ .arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 12px;
+ cursor: pointer;
+ color: #fff;
+ z-index: 3;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ }
+ .arrow::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 40px;
+ height: 40px;
+ background-color: rgb(12 110 162 / 0.7);
+ border-radius: 50%;
+ z-index: -1;
+ }
+ .left-arrow {
+ left: 20px;
+ font-size: 12px;
+ }
+ .right-arrow {
+ right: 20px;
+ font-size: 12px;
+ }
+ .dots-container {
+ position: absolute;
+ top: calc(50% + 9em);
+ right: 3%;
+ z-index: 2;
+ display: flex;
+ gap: 5px;
+ background-color: #ffffff3d;
+ border-radius: 50px;
+ justify-content: center;
+ align-items: center;
+ width: 140px;
+ height: 22px;
+ transition: opacity 0.5s ease-in-out;
+ scale: 0.6;
+ }
+ .dot {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin: 0 5px;
+ background-color: #cecece;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ }
+ .dot.active {
+ width: 22px;
+ height: 12px;
+ background-color: #fff;
+ border-radius: 6px;
+ }
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ .fade-in {
+ opacity: 1 !important;
+ }
+ .fade-out {
+ opacity: 0 !important;
+ }
+ #slides-container {
+ position: relative;
+ width: 100vw;
+ height: 135vh;
+ overflow: hidden;
+ margin: 0 auto;
+ }
+ .sections.homeSectionsContainer {
+ position: relative;
+ z-index: 8;
+ top: 83vh;
+ }
+ .slide {
+ transition: opacity 0.5s ease-in-out;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .slide.active {
+ opacity: 1;
+ display: block;
+ }
+ .slide:focus {
+ outline: #fff solid 2px;
+ }
+ .backdrop-container {
+ position: relative;
+ top: -40%;
+ right: -35%;
+ width: 70%;
+ height: 100%;
+ }
+ .backdrop {
+ right: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center 20%;
+ border-radius: 5px;
+ z-index: 1;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .backdrop-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgb(0 0 0 / 0.6);
+ border-radius: 5px;
+ z-index: 2;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .logo-container {
+ width: 45%;
+ height: 40%;
+ position: relative;
+ display: flex;
+ justify-content: left;
+ align-items: left;
+ }
+ .logo {
+ position: relative;
+ max-height: 70%;
+ max-width: 100%;
+ height: auto;
+ width: auto;
+ object-fit: contain;
+ z-index: 4;
+ top: 20vh;
+ left: 5vw;
+ filter: brightness(1.5);
+ }
+ .featured-content {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 50px;
+ background-color: #fff0;
+ color: #d3d3d3;
+ font-size: 22px;
+ display: none;
+ align-items: center;
+ justify-content: flex-start;
+ z-index: 2;
+ }
+ .plot-container {
+ position: absolute;
+ bottom: 0;
+ color: #fff;
+ width: 90%;
+ height: 60%;
+ font-size: 15px;
+ padding: 10px 0 25px 15px;
+ border-radius: 5px;
+ z-index: 3;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: justify;
+ }
+ .plot {
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ left: 5vw;
+ position: absolute;
+ top: 25vh;
+ }
+ .gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70%;
+ height: 100%;
+ background: linear-gradient(to right, #000 49%, #fff0 70%);
+ z-index: 2;
+ mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ -webkit-mask-image: linear-gradient(
+ to top,
+ #fff0 2%,
+ rgb(0 0 0 / 0.5) 6%,
+ #000000 8%
+ );
+ }
+ .genre {
+ position: absolute;
+ top: calc(50% + 3.5vh);
+ left: 5vw;
+ text-align: center;
+ color: #fff;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: 14px;
+ z-index: 4;
+ }
+ .info-container {
+ position: absolute;
+ top: calc(50% + -6vh);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ left: 5vw !important;
+ color: #fff;
+ z-index: 4;
+ }
+ .rating-value {
+ font-family: "Archivo Narrow", sans-serif;
+ display: flex;
+ align-items: center;
+ z-index: 5;
+ position: relative;
+ }
+ .runTime {
+ font-family: "Archivo Narrow", sans-serif;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ margin: 0 8px;
+ margin-right: -3px;
+ }
+ .rating-value img {
+ margin-right: 6px;
+ }
+ .tomato-rating {
+ display: flex;
+ align-items: center;
+ margin-left: 0;
+ }
+ .tomato-rating img {
+ margin-left: 5px;
+ }
+ .age-rating {
+ display: flex;
+ align-items: center;
+ margin-left: 5px;
+ margin-right: 5px;
+ border-radius: 5px;
+ background: rgb(255 255 255 / 0.8);
+ color: #000;
+ border: none;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 0.6em;
+ }
+ .date {
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -1327,7 +3300,7 @@
.button-container {
position: absolute;
top: calc(50% + 7.5em);
- left: 4em;
+ left: 5vw;
display: flex;
z-index: 5;
justify-content: space-between;
@@ -1369,7 +3342,6 @@
}
}
-/* Laptop (Small to Medium Screens) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
.backdrop,
.slide {
@@ -1377,7 +3349,7 @@
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -1418,7 +3390,7 @@
}
.dots-container {
position: absolute;
- top: calc(50% + 13em);
+ top: calc(50% + 21vh);
right: 3%;
z-index: 2;
display: flex;
@@ -1463,13 +3435,11 @@
height: 95vh;
overflow: hidden;
margin: 0 auto;
- /*border-radius: 15px;*/
- top: -7.8em;
}
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -17em;
+ top: 65vh;
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -1506,13 +3476,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.backdrop-overlay {
@@ -1528,13 +3498,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.logo-container {
@@ -1554,7 +3524,7 @@
object-fit: contain;
z-index: 4;
top: 10em;
- left: 8em;
+ left: 6vw;
filter: brightness(1.5);
}
.featured-content {
@@ -1591,9 +3561,9 @@
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- left: 7.9em;
+ left: 6vw;
position: absolute;
- top: 190px;
+ top: 20vh;
}
.gradient-overlay {
position: absolute;
@@ -1607,22 +3577,22 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
position: absolute;
top: calc(50% + 50px);
- left: 8.4em;
+ left: 6vw;
text-align: center;
color: #fff;
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-size: 14px;
z-index: 4;
}
@@ -1632,20 +3602,19 @@
display: flex;
align-items: center;
justify-content: center;
- left: 2em !important;
+ left: 6vw !important;
color: #fff;
z-index: 4;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
- margin: 0 6em;
z-index: 5;
position: relative;
}
.runTime {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -1677,7 +3646,7 @@
padding: 0 0.6em;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -1692,12 +3661,12 @@
}
.button-container {
position: absolute;
- top: calc(50% + 180px);
- left: 7.5em;
+ top: calc(50% + 20vh);
+ left: 5vw;
display: flex;
z-index: 5;
justify-content: space-between;
- width: 16em;
+ width: 15em;
}
.play-button,
.detail-button {
@@ -1734,8 +3703,6 @@
align-items: center;
}
}
-
-/* Large Screens (2K) */
@media only screen and (min-width: 1441px) and (max-width: 2560px) {
.backdrop,
.slide {
@@ -1743,7 +3710,7 @@
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -1784,7 +3751,7 @@
}
.dots-container {
position: absolute;
- top: calc(50% + 13em);
+ top: calc(50% + 20vh);
right: 3%;
z-index: 2;
display: flex;
@@ -1826,16 +3793,14 @@
#slides-container {
position: relative;
width: 100vw;
- height: 95vh;
+ height: 98vh;
overflow: hidden;
margin: 0 auto;
- /*border-radius: 15px;*/
- top: -6.8em;
}
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -20em;
+ top: 65vh;
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -1872,13 +3837,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.backdrop-overlay {
@@ -1894,13 +3859,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.logo-container {
@@ -1919,8 +3884,8 @@
width: auto;
object-fit: contain;
z-index: 4;
- top: 10em;
- left: 8em;
+ top: 15vh;
+ left: 5vw;
filter: brightness(1.5);
}
.featured-content {
@@ -1957,9 +3922,9 @@
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- left: 7.9em;
+ left: 5vw;
position: absolute;
- top: 190px;
+ top: 20vh;
}
.gradient-overlay {
position: absolute;
@@ -1973,45 +3938,44 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
position: absolute;
- top: calc(50% + 50px);
- left: 8.4em;
+ top: calc(50% + 4.5vh);
+ left: 5vw;
text-align: center;
color: #fff;
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-size: 14px;
z-index: 4;
}
.info-container {
position: absolute;
- top: calc(50% + 0px);
+ top: calc(50% + -2vh);
display: flex;
align-items: center;
justify-content: center;
- left: 2em !important;
+ left: 5vw !important;
color: #fff;
z-index: 4;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
- margin: 0 6em;
z-index: 5;
position: relative;
}
.runTime {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -2043,7 +4007,7 @@
padding: 0 0.6em;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -2058,8 +4022,8 @@
}
.button-container {
position: absolute;
- top: calc(50% + 180px);
- left: 7.5em;
+ top: calc(50% + 19vh);
+ left: 5vw;
display: flex;
z-index: 5;
justify-content: space-between;
@@ -2100,8 +4064,6 @@
align-items: center;
}
}
-
-/* Extra Large Screens (4K) */
@media only screen and (min-width: 2561px) {
.backdrop,
.slide {
@@ -2109,7 +4071,7 @@
}
.featured-content,
.plot-container {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
left: 0;
}
.plot,
@@ -2150,7 +4112,7 @@
}
.dots-container {
position: absolute;
- top: calc(50% + 13em);
+ top: calc(50% + 21vh);
right: 3%;
z-index: 2;
display: flex;
@@ -2195,13 +4157,11 @@
height: 95vh;
overflow: hidden;
margin: 0 auto;
- /*border-radius: 15px;*/
- top: -6.8em;
}
.sections.homeSectionsContainer {
position: relative;
z-index: 8;
- top: -20em;
+ top: 65vh;
}
.slide {
transition: opacity 0.5s ease-in-out;
@@ -2238,13 +4198,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.backdrop-overlay {
@@ -2260,13 +4220,13 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.logo-container {
@@ -2286,7 +4246,7 @@
object-fit: contain;
z-index: 4;
top: 10em;
- left: 8em;
+ left: 5vw;
filter: brightness(1.5);
}
.featured-content {
@@ -2322,10 +4282,11 @@
display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2;
+ font-size: x-large;
-webkit-box-orient: vertical;
- left: 7.9em;
+ left: 5vw;
position: absolute;
- top: 190px;
+ top: 20vh;
}
.gradient-overlay {
position: absolute;
@@ -2339,45 +4300,45 @@
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
-webkit-mask-image: linear-gradient(
to top,
#fff0 2%,
rgb(0 0 0 / 0.5) 6%,
- rgb(0 0 0) 8%
+ #000000 8%
);
}
.genre {
position: absolute;
- top: calc(50% + 50px);
- left: 8.4em;
+ top: calc(50% + 5vh);
+ left: 5vw;
text-align: center;
color: #fff;
- font-family: "Titillium Web", sans-serif;
- font-size: 14px;
+ font-family: "Archivo Narrow", sans-serif;
+ font-size: x-large;
z-index: 4;
}
.info-container {
position: absolute;
- top: calc(50% + 0px);
+ top: calc(50% + 0vh);
+ font-size: x-large;
display: flex;
align-items: center;
justify-content: center;
- left: 2em !important;
+ left: 5vw !important;
color: #fff;
z-index: 4;
}
.rating-value {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
display: flex;
align-items: center;
- margin: 0 6em;
z-index: 5;
position: relative;
}
.runTime {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -2409,7 +4370,7 @@
padding: 0 0.6em;
}
.date {
- font-family: "Titillium Web", sans-serif;
+ font-family: "Archivo Narrow", sans-serif;
font-weight: 500;
display: flex;
align-items: center;
@@ -2424,12 +4385,13 @@
}
.button-container {
position: absolute;
- top: calc(50% + 180px);
- left: 7.5em;
+ top: calc(50% + 20vh);
+ left: 12vh;
display: flex;
z-index: 5;
justify-content: space-between;
- width: 16em;
+ width: 15em;
+ scale: 1.3;
}
.play-button,
.detail-button {
diff --git a/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.js b/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.js
index eae1aef..a2f9a73 100644
--- a/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.js
+++ b/src/Jellyfin.Plugin.MediaBar/Inject/slideshowpure.js
@@ -1,17 +1,30 @@
const getJellyfinCredentials = () => {
const jellyfinCreds = localStorage.getItem("jellyfin_credentials");
+ const deviceID = localStorage.getItem("_deviceId2");
+ if (!jellyfinCreds) {
+ console.error("No Jellyfin credentials found in localStorage");
+ return;
+ }
try {
const serverCredentials = JSON.parse(jellyfinCreds);
- const firstServer = serverCredentials.Servers[0];
- if (!firstServer) {
- console.error("Could not find credentials for the client");
+ const firstServer = serverCredentials?.Servers?.[0];
+ if (!firstServer || !firstServer.AccessToken || !firstServer.UserId) {
+ console.error("Invalid Jellyfin credentials structure");
return;
}
- return { token: firstServer.AccessToken, userId: firstServer.UserId };
+ return {
+ token: firstServer.AccessToken,
+ userId: firstServer.UserId,
+ deviceID
+ };
} catch (e) {
- console.error("Could not parse jellyfin credentials", e);
+ console.error("Could not parse Jellyfin credentials", e);
}
};
+const credentials = getJellyfinCredentials();
+if (credentials) {
+ console.log("Token:", credentials.token, "UserId:", credentials.userId, "DeviceID:", credentials.deviceID);
+}
const initLoadingScreen = () => {
const currentPath = window.location.href.toLowerCase();
@@ -32,8 +45,15 @@ const initLoadingScreen = () => {
`;
document.body.insertAdjacentHTML("beforeend", loadingHTML);
+
const interval = setInterval(() => {
- if (document.querySelector(".manualLoginForm")) {
+ if (
+ document.querySelector(".manualLoginForm") ||
+ (
+ document.querySelector(".homeSectionsContainer") &&
+ document.querySelector(".slide.active")
+ )
+ ) {
$(".bar-loading").fadeOut(700, () => $(".bar-loading").remove());
clearInterval(interval);
}
@@ -41,12 +61,33 @@ const initLoadingScreen = () => {
}
};
initLoadingScreen();
-const slidesInit = async () => {
+
+const observer = new MutationObserver((mutations) => {
+ for (let mutation of mutations) {
+ if (window.location.hash.includes("#/home.html")) {
+ let container = document.getElementById("slides-container");
+
+ if (!container) {
+ container = document.createElement("div");
+ container.id = "slides-container";
+ document.body.appendChild(container);
+ slidesInit();
+ }
+ container.style.display = "block";
+ } else {
+ const container = document.getElementById("slides-container");
+ if (container) container.style.display = "none";
+ }
+ }
+});
+observer.observe(document.body, { childList: true, subtree: true });
+
+
+const slidesInit = () => {
if (window.hasInitializedSlideshow) {
console.log("Slideshow already initialized. Skipping re-init.");
return;
}
-
window.hasInitializedSlideshow = !0;
const shuffleInterval = 8000;
let isTransitioning = !1;
@@ -97,15 +138,9 @@ const slidesInit = async () => {
logo.src = `${window.location.origin}/Items/${itemId}/Images/Logo`;
logo.alt = "Logo";
logo.loading = "eager";
- const logoImgBlur = document.createElement("img");
- logoImgBlur.src = `${window.location.origin}/Items/${itemId}/Images/Logo`;
- logoImgBlur.alt = item.Name || "Title";
- logoImgBlur.loading = "eager";
- logoImgBlur.className = "featured-logo-blur";
const logoContainer = document.createElement("div");
logoContainer.className = "logo-container";
logoContainer.appendChild(logo);
- logoContainer.appendChild(logoImgBlur);
const featuredContent = document.createElement("div");
featuredContent.className = "featured-content";
featuredContent.textContent = title;
@@ -142,9 +177,9 @@ const slidesInit = async () => {
ratingTest.appendChild(imdbLogo);
if (typeof rating === "number") {
const formattedRating = rating.toFixed(1);
- ratingTest.innerHTML += `${formattedRating} ⭐`;
+ ratingTest.innerHTML += `${formattedRating}`;
} else {
- ratingTest.innerHTML += `N/A ⭐`;
+ ratingTest.innerHTML += `N/A`;
}
ratingTest.appendChild(createSeparator());
const tomatoRatingDiv = document.createElement("div");
@@ -159,7 +194,10 @@ const slidesInit = async () => {
if (typeof criticRating === "number") {
valueElement = document.createTextNode(`${criticRating}% `);
} else {
- valueElement = document.createTextNode(`N/A `);
+ const naSpan = document.createElement("span");
+ naSpan.textContent = "N/A ";
+ naSpan.style.color = "#fff9";
+ valueElement = naSpan;
}
if (criticRating === undefined || criticRating <= 59) {
criticLogo.src =
@@ -184,13 +222,19 @@ const slidesInit = async () => {
} else {
ageRatingDiv.innerHTML = `N/A`;
}
- const calender = "📅";
const premiereDate = document.createElement("div");
premiereDate.className = "date";
- const year = date ? new Date(date).getFullYear() : "N/A";
- premiereDate.textContent = isNaN(year) ? "N/A" : year;
+ const year = date ? new Date(date).getFullYear() : NaN;
+ if (isNaN(year)) {
+ const naSpan = document.createElement("span");
+ naSpan.textContent = "N/A";
+ naSpan.style.color = "#fff9";
+ premiereDate.innerHTML = "";
+ premiereDate.appendChild(naSpan);
+ } else {
+ premiereDate.textContent = year;
+ }
ratingTest.appendChild(tomatoRatingDiv);
- ratingTest.appendChild(document.createTextNode(calender));
ratingTest.appendChild(premiereDate);
ratingTest.appendChild(createSeparator());
ratingTest.appendChild(ageRatingDiv);
@@ -214,44 +258,62 @@ const slidesInit = async () => {
const playButton = document.createElement("button");
playButton.className = "play-button";
playButton.innerHTML = `
- play_circle
+ play_circle_fill
Play
`;
playButton.onclick = async () => {
- if (!window.PlaybackManager) {
- console.error("PlaybackManager is not available.");
- return;
- }
- if (!window.ApiClient) {
- console.error("Jellyfin API client is not available.");
- return;
- }
const apiClient = window.ApiClient;
const userId = apiClient.getCurrentUserId();
- if (!userId) {
- console.error("User not found.");
+ const mediabrowser = apiClient.appName();
+ const appVersion = apiClient.appVersion();
+ const deviceName = apiClient.deviceName();
+ const deviceId = apiClient.deviceId();
+ const accessToken = apiClient.accessToken();
+ const baseUrl = apiClient.serverAddress();
+ if (!userId || !mediabrowser || !deviceName || !deviceId || !appVersion || !accessToken || !baseUrl) {
+ console.error("Details not found.");
return;
}
+ let sessionId = null;
try {
- const item = await apiClient.getItem(userId, itemId);
- if (!item) {
- console.error("Media item not found.");
+ const response = await fetch(`${baseUrl}/Sessions?deviceId=${encodeURIComponent(deviceId)}`, {
+ headers: {
+ 'X-Emby-Authorization': `MediaBrowser Client="${mediabrowser}", Device="${deviceName}", DeviceId="${deviceId}", Version="${appVersion}", Token="${accessToken}"`
+ }
+ });
+ if (!response.ok) {
+ throw new Error(`Failed to fetch session data: ${response.statusText}`);
+ }
+ const sessions = await response.json();
+ if (sessions.length === 0) {
+ console.warn("No sessions found for deviceId:", deviceId);
return;
}
- window.PlaybackManager.play({
- items: [item],
- startPositionTicks: 0,
- isMuted: !1,
- isPaused: !1,
- })
- .then(() => {
- console.log("Playback started successfully.");
- })
- .catch((error) => {
- console.error("Failed to start playback:", error);
- });
+ const session = sessions[0];
+ sessionId = session.Id;
+ console.log("Found sessionId:", sessionId);
} catch (error) {
- console.error("Error starting playback:", error);
+ console.error("Error fetching session data:", error);
+ return;
+ }
+ if (!sessionId) {
+ console.error("Session ID not found.");
+ return;
+ }
+ const playUrl = `${baseUrl}/Sessions/${sessionId}/Playing?playCommand=PlayNow&itemIds=${itemId}`;
+ try {
+ const playResponse = await fetch(playUrl, {
+ method: 'POST',
+ headers: {
+ 'X-Emby-Authorization': `MediaBrowser Client="${mediabrowser}", Device="${deviceName}", DeviceId="${deviceId}", Version="${appVersion}", Token="${accessToken}"`
+ }
+ });
+ if (!playResponse.ok) {
+ throw new Error(`Failed to send play command: ${playResponse.statusText}`);
+ }
+ console.log("Play command sent successfully to session:", sessionId);
+ } catch (error) {
+ console.error("Error sending play command:", error);
}
};
const detailButton = document.createElement("button");
@@ -261,8 +323,8 @@ const slidesInit = async () => {
Info
`;
detailButton.onclick = () => {
- window.top.location.href = `/#!/details?id=${itemId}`;
- };
+ Emby.Page.show(`/details?id=${itemId}`);
+ }
buttonContainer.appendChild(detailButton);
buttonContainer.appendChild(playButton);
slide.append(
@@ -280,20 +342,10 @@ const slidesInit = async () => {
const createSlideForItem = async (item, title) => {
const container = document.getElementById("slides-container");
const itemId = item.Id;
- const backdropUrl = `${window.location.origin}/Items/${itemId}/Images/Backdrop/0`;
- const logoUrl = `${window.location.origin}/Items/${itemId}/Images/Logo`;
- const [backdropExists, logoExists] = await Promise.all([
- fetch(backdropUrl, { method: "HEAD" }).then((res) => res.ok),
- fetch(logoUrl, { method: "HEAD" }).then((res) => res.ok),
- ]);
- if (backdropExists && logoExists) {
- const slideElement = createSlideElement(item, title);
- container.appendChild(slideElement);
- if (container.children.length === 1) {
- showSlide(0);
- }
- } else {
- console.warn(`Skipping item ${itemId}: Missing backdrop or logo.`);
+ const slideElement = createSlideElement(item, title);
+ container.appendChild(slideElement);
+ if (container.children.length === 1) {
+ showSlide(0);
}
};
const fetchItemDetails = async (itemId) => {
@@ -325,7 +377,7 @@ const slidesInit = async () => {
const fetchItemsFromServer = async () => {
try {
const response = await fetch(
- `${window.location.origin}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&SortBy=random&isPlayed=False&Limit=500`,
+ `${window.location.origin}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&SortBy=random&isPlayed=False&Limit=100`,
{
headers: {
Authorization: `MediaBrowser Client="Jellyfin Web", Device="YourDeviceName", DeviceId="YourDeviceId", Version="YourClientVersion", Token="${token}"`,
@@ -394,6 +446,15 @@ const slidesInit = async () => {
});
};
const initializeSlideshow = () => {
+ var slideInterval = null;
+ class SlideTimer {
+ constructor(fnctn, time) {
+ var timerObject = setInterval(fnctn, time);
+ this.stop = function () { if (timerObject) { clearInterval(timerObject); timerObject = null; } return this; };
+ this.start = function () { if (!timerObject) { this.stop(); timerObject = setInterval(fnctn, time); } return this; };
+ this.restart = function () { return this.stop().start(); };
+ }
+ }
const slides = document.querySelectorAll(".slide");
createPaginationDots();
const container = document.getElementById("slides-container");
@@ -405,6 +466,7 @@ const slidesInit = async () => {
isTransitioning = !0;
currentSlideIndex = (index + slides.length) % slides.length;
showSlide(currentSlideIndex);
+ slideInterval.restart();
setTimeout(() => {
isTransitioning = !1;
}, 500);
@@ -417,11 +479,10 @@ const slidesInit = async () => {
if (slides.length > 0) {
showSlide(currentSlideIndex);
container.style.display = "block";
- setTimeout(() => {
- setInterval(() => {
+ slideInterval =
+ new SlideTimer(function () {
updateCurrentSlide(currentSlideIndex + 1);
}, shuffleInterval);
- }, 8000);
}
slides.forEach((slide) => {
slide.addEventListener(
@@ -533,7 +594,6 @@ const slidesInit = async () => {
items = shuffleArray(items);
await createSlidesForItems(items);
initializeSlideshow();
- $(".bar-loading").fadeOut(700, () => $(".bar-loading").remove());
};
initializeSlides();
};
\ No newline at end of file
diff --git a/src/Jellyfin.Plugin.MediaBar/Jellyfin.Plugin.MediaBar.csproj b/src/Jellyfin.Plugin.MediaBar/Jellyfin.Plugin.MediaBar.csproj
index 81c5ef6..16f6c4c 100644
--- a/src/Jellyfin.Plugin.MediaBar/Jellyfin.Plugin.MediaBar.csproj
+++ b/src/Jellyfin.Plugin.MediaBar/Jellyfin.Plugin.MediaBar.csproj
@@ -18,13 +18,9 @@
-
-
-
-
diff --git a/src/Jellyfin.Plugin.MediaBar/Services/StartupService.cs b/src/Jellyfin.Plugin.MediaBar/Services/StartupService.cs
index a45eaa6..0552d13 100644
--- a/src/Jellyfin.Plugin.MediaBar/Services/StartupService.cs
+++ b/src/Jellyfin.Plugin.MediaBar/Services/StartupService.cs
@@ -57,26 +57,6 @@ namespace Jellyfin.Plugin.MediaBar.Services
payloads.Add(payload);
}
- {
- JObject payload = new JObject();
- payload.Add("id", "e6d32b76-d54b-4946-b73e-c5c9c50575c9");
- payload.Add("fileNamePattern", "home-html\\.[a-zA-z0-9]+\\.chunk\\.js");
- payload.Add("callbackAssembly", GetType().Assembly.FullName);
- payload.Add("callbackClass", typeof(TransformationPatches).FullName);
- payload.Add("callbackMethod", nameof(TransformationPatches.HomeHtmlChunk));
-
- payloads.Add(payload);
- }
- {
- JObject payload = new JObject();
- payload.Add("id", "3d171ef1-a198-48ac-9a60-f6aa98e5fd6d");
- payload.Add("fileNamePattern", "main.jellyfin.bundle.js");
- payload.Add("callbackAssembly", GetType().Assembly.FullName);
- payload.Add("callbackClass", typeof(TransformationPatches).FullName);
- payload.Add("callbackMethod", nameof(TransformationPatches.MainBundle));
-
- payloads.Add(payload);
- }
{
JObject payload = new JObject();
payload.Add("id", "8d374d6b-3c5b-464a-a2a2-96e92fa81345");