New: Added support for the Media Bar plugin

Theme/ElegantFin-theme-nightly.css

@@ -2045,6 +2045,54 @@ 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/extras-media-bar-nightly.css

@@ -1,62 +0,0 @@
-.gradient-overlay {
-    background: linear-gradient(0deg, var(--darkerGradientPoint) 0%, rgba(29, 38, 53, 0.45));
-}
-
-.gradient-overlay:before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    backdrop-filter: blur(10px);
-    mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
-}
-
-.age-rating {
-    font-size: smaller;
-}
-
-.button-container>.detailButton,
-.favorite-button {
-    display: block;
-    width: auto;
-    border-radius: 3em;
-    border: var(--defaultLighterBorder);
-    padding: .5em 1em !important;
-    margin: 0.125em !important;
-    backdrop-filter: none;
-    color: black;
-    background: var(--textColor) !important;
-    padding-inline: 1em !important;
-}
-
-.button-container>.detailButton:hover,
-.favorite-button:hover,
-.button-container>.detailButton:active,
-.favorite-button:ative {
-    background-color: white !important;
-    opacity: 1 !important
-}
-
-.play-text {
-    display: none;
-}
-
-.play-button:after {
-    padding-inline-start: .25em;
-    content: "Play";
-    font-weight: 700;
-    font-family: "Archivo Narrow", sans-serif;
-}
-
-.favorite-button:after {
-    padding-inline-start: .5em;
-    font-weight: 700;
-    font-family: "Archivo Narrow", sans-serif;
-}
-
-.layout-desktop .detail-button:after,
-.layout-tv .detail-button:after {
-    padding-inline-start: .5em;
-    content: "More Info";
-    font-weight: 700;
-    font-family: "Archivo Narrow", sans-serif;
-}