From 0f897b91cd48ad35ea15e3a3654f6f973e714de5 Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Wed, 6 Aug 2025 10:03:55 -0700
Subject: [PATCH] Fix: Updated the media bar plugin styling on mobile to match
 the desktop layout

---
 .../media-bar-plugin-support-nightly.css      | 54 ++++++++++++++-----
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/Theme/assets/add-ons/media-bar-plugin-support-nightly.css b/Theme/assets/add-ons/media-bar-plugin-support-nightly.css
index 4b520a0..8bcb081 100644
--- a/Theme/assets/add-ons/media-bar-plugin-support-nightly.css
+++ b/Theme/assets/add-ons/media-bar-plugin-support-nightly.css
@@ -41,8 +41,16 @@
 }
 
 /* this is my own take */
-.layout-desktop #slides-container,
-.layout-tv #slides-container {
+.rating-value {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.age-rating {
+    font-size: 0.8em;
+}
+
+#slides-container {
     width: calc(100vw - (2 * var(--sidePadding)));
     height: 60%;
     top: 8em;
@@ -56,24 +64,46 @@
     top: 0em;
 }
 
-.layout-desktop .logo-container,
-.layout-tv .logo-container {
+.layout-mobile #slides-container {
+    top: 10em;
+}
+
+.logo-container {
     top: 10vh;
 }
 
-.layout-desktop .backdrop,
-.layout-desktop .backdrop-container,
-.layout-desktop .backdrop-overlay,
-.layout-tv .backdrop,
-.layout-tv .backdrop-container,
-.layout-tv .backdrop-overlay {
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
     mask-image: none;
     -webkit-mask-image: none;
 }
 
-.layout-desktop .backdrop-overlay,
-.layout-tv .backdrop-overlay {
+.backdrop-overlay {
     background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
 }
 
+@media only screen and (max-width: 767px) and (orientation: portrait) {
+    .button-container {
+        top: calc(50% + 20vh);
+        transform: translateX(-50%) scale(0.8);
+    }
+
+    .info-container {
+        /* top: calc(50% + 6vh); */
+    }
+
+    .tomato-rating {
+        display: none;
+    }
+
+    .dots-container {
+        top: calc(50% + 19vh);
+    }
+
+    .backdrop {
+        transform-origin: center;
+    }
+}
+
 /* this styles the media bar plugin - end */
\ No newline at end of file