dev: ElegantFin v25.08.02 rc1

dev: Media Bar plugin support add-on v25.08.02

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

@@ -0,0 +1,68 @@
+/* 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: 60%;
+    top: 8em;
+    border: var(--defaultBorder);
+    border-radius: var(--largerRadius);
+    transition: all .125s, border 0s;
+    user-select: none;
+}
+
+.layout-desktop .logo-container {
+    top: 10vh;
+}
+
+.layout-desktop .backdrop,
+.layout-desktop .backdrop-container,
+.layout-desktop .backdrop-overlay {
+    mask-image: none;
+    -webkit-mask-image: none;
+}
+
+.layout-desktop .backdrop-overlay {
+    background: linear-gradient(0deg, rgba(0, 0, 0, .85), 40%, transparent);
+}
+
+/* this styles the media bar plugin - end */