dev: Decoupled Media Bar plugin support as a separate import

README.md

@@ -183,6 +183,16 @@ Captured on ElegantFin v25.07.27
 - To undo this change, simply remove this code block or replace `block` with `none`.
 </details>
 
+<details>
+  <summary><i>7. Enable support for the [Media Bar plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar/)</i></summary>
+
+- TBD
+```
+	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css");
+```
+- TBD
+</details>
+
 <hr>
 
 ### 🆗 Tested on 

Theme/ElegantFin-theme-nightly.css

@@ -2070,52 +2070,6 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     background: transparent;
 }
 
-/* this styles the media bar plugin - start */
-.button-container {
-    align-items: center;
-}
-
-.favorite-button {
-    background: none;
-    color: var(--textColor);
-}
-
-.detail-button:hover,
-.favorite-button:hover {
-    background: var(--dimTextColor);
-    color: black;
-}
-
-.play-button::before,
-.detail-button::before,
-.favorite-button::before,
-.favorite-button.favorited::before {
-    font-weight: 400;
-}
-
-.play-button {
-    font-family: 'Inter';
-    font-size: 1em;
-    font-weight: 500;
-}
-
-.backdrop,
-.backdrop-container,
-.backdrop-overlay {
-    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
-    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), 70%, rgba(0, 0, 0, 0));
-    background-color: transparent;
-}
-
-.backdrop-container {
-    top: 3.5em;
-}
-
-.backdrop {
-    transform-origin: center left;
-}
-/* this styles the media bar plugin - end */
-
 .layout-desktop .detailButton:not(.btnPlay):hover {
     color: black;
     background: var(--dimTextColor);

Theme/assets/add-ons/media-bar-plugin-support-nightly.css

@@ -0,0 +1,71 @@
+/* this styles the media bar plugin - start */
+.button-container {
+    align-items: center;
+}
+
+.favorite-button {
+    background: none;
+    color: var(--textColor);
+}
+
+.detail-button:hover,
+.favorite-button:hover {
+    background: var(--dimTextColor);
+    color: black;
+}
+
+.play-button::before,
+.detail-button::before,
+.favorite-button::before,
+.favorite-button.favorited::before {
+    font-weight: 400;
+}
+
+.play-button {
+    font-family: 'Inter';
+    font-size: 1em;
+    font-weight: 500;
+}
+
+.backdrop,
+.backdrop-container,
+.backdrop-overlay {
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, 0));
+    background-color: transparent;
+}
+
+.backdrop {
+    transform-origin: center left;
+}
+
+/* this is my own take */
+.layout-desktop #slides-container {
+    width: calc(100vw - (2 * var(--sidePadding)));
+    height: 62%;
+    top: 8em;
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all .25s, border 0s;
+}
+
+.layout-desktop #slides-container:active {
+    width: 100vw;
+    height: 90%;
+    top: 0em;
+    border: none;
+    border-radius: 0;
+}
+
+.layout-desktop .logo-container {
+    top: 8vh;
+}
+
+/* .layout-desktop .backdrop,
+.layout-desktop .backdrop-container,
+.layout-desktop .backdrop-overlay {
+    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, .3));
+    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .85), 70%, rgba(0, 0, 0, .3));
+} */
+
+/* this styles the media bar plugin - end */