@maveio/components 0.0.168 → 0.0.170

package/dist/themes/dolphin.cjs

@@ -1,4 +1,4 @@
-'use strict';require('../chunk-JHSFSCC2.cjs');function n(t,i,a,o){class e extends i{render(){return a`
+'use strict';require('../chunk-JHSFSCC2.cjs');function n(t,a,i,o){class e extends a{render(){return i`
         <media-controller novolumepref>
           <div class="subtitles">
             <div id="subtitles_text">subtitles</div>
@@ -29,6 +29,7 @@
             </media-play-button>
           </div>
           <div
+            class="mave-gradient-bottom"
             style="position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); pointer-events: none;"
           ></div>
           <div style="width: calc(100% - 32px); padding: 16px;">
@@ -72,7 +73,7 @@
               <media-time-display showduration></media-time-display>
               <div style="flex-grow: 1;"></div>
               <media-playback-rate-button></media-playback-rate-button>
-              <media-captions-menu-button>
+              <mave-captions-menu-button id="mave-captions">
                 <div slot="off">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -101,8 +102,8 @@
                     />
                   </svg>
                 </div>
-              </media-captions-menu-button>
-              <media-captions-menu hidden anchor="auto"></media-captions-menu>
+              </mave-captions-menu-button>
+              <media-captions-menu hidden anchor="mave-captions"></media-captions-menu>
               <mave-audio-track-menu
                 hidden
                 anchor="mave-audio-tracks"
@@ -125,6 +126,38 @@
                   </svg>
                 </div>
               </mave-audio-track-menu-button>
+              <media-settings-menu-button id="mave-settings">
+                <div slot="icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <circle cx="5" cy="12" r="2"></circle>
+                    <circle cx="12" cy="12" r="2"></circle>
+                    <circle cx="19" cy="12" r="2"></circle>
+                  </svg>
+                </div>
+              </media-settings-menu-button>
+              <media-settings-menu hidden anchor="mave-settings">
+                <media-settings-menu-item style="display: var(--playbackrate-display, flex);">
+                  <span>Playback speed</span>
+                  <media-playback-rate-menu slot="submenu" hidden></media-playback-rate-menu>
+                </media-settings-menu-item>
+                <media-settings-menu-item
+                  style="display: var(--mave-captions-menu-button-display, flex);"
+                >
+                  <span>Captions</span>
+                  <media-captions-menu slot="submenu" hidden></media-captions-menu>
+                </media-settings-menu-item>
+                <media-settings-menu-item
+                  style="display: var(--media-audio-track-menu-button-display, none);"
+                >
+                  <span>Audio tracks</span>
+                  <mave-audio-track-menu slot="submenu" hidden></mave-audio-track-menu>
+                </media-settings-menu-item>
+              </media-settings-menu>
               <media-mute-button>
                 <div slot="high">
                   <svg
@@ -232,6 +265,7 @@
         overflow: hidden;
         position: relative;
         direction: ltr !important;
+        container-type: inline-size;
       }
 
       img,
@@ -255,6 +289,7 @@
       media-controller {
         --media-tooltip-display: none;
         display: flex;
+        container-type: inline-size;
         width: 100%;
         height: 100%;
         max-height: 100vh;
@@ -263,19 +298,35 @@
         --media-font-family: 'Inter', system-ui, sans-serif;
         --media-background-color: transparent;
 
-        --media-primary-color: rgba(255, 255, 255, 0.94);
-        --media-secondary-color: rgba(255, 255, 255, 0.94);
+        --media-primary-color: var(--mave-control-fg, rgba(255, 255, 255, 0.94));
+        --media-secondary-color: var(--mave-control-fg, rgba(255, 255, 255, 0.94));
 
         --media-control-padding: 8px;
         --media-control-background: transparent;
         --media-option-hover-background: rgba(0, 0, 0, 0.25);
 
+        --media-range-track-background: var(--mave-control-fg-weak, rgba(255, 255, 255, 0.35));
+        --media-range-track-pointer-background: var(
+          --mave-control-fg-muted,
+          rgba(255, 255, 255, 0.6)
+        );
+
         --media-preview-time-margin: 0;
 
         --media-preview-thumbnail-max-width: 132px;
         --media-preview-thumbnail-max-height: 88px;
       }
 
+      media-controller svg[stroke],
+      media-controller svg [stroke] {
+        stroke: currentColor;
+      }
+
+      media-controller svg[fill]:not([fill='none']),
+      media-controller svg [fill]:not([fill='none']) {
+        fill: currentColor;
+      }
+
       media-control-bar {
         border-radius: 12px;
         width: 100%;
@@ -283,7 +334,7 @@
         padding: 0 0 0 3px;
         z-index: 20;
 
-        background: var(--primary-color, rgba(0, 0, 0, 0.25));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
 
         transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
@@ -303,6 +354,14 @@
 
         --media-range-track-border-radius: 8px;
         --media-range-hover-background: transparent;
+        --media-text-color: #fff;
+      }
+
+      @media (prefers-contrast: more) {
+        media-time-range {
+          --media-preview-time-background: rgba(0, 0, 0, 0.85);
+          --media-preview-time-text-shadow: none;
+        }
       }
 
       media-time-display {
@@ -317,7 +376,8 @@
       media-play-button,
       media-fullscreen-button,
       media-mute-button,
-      media-captions-menu-button,
+      mave-captions-menu-button,
+      media-settings-menu-button,
       media-audio-track-menu-button,
       mave-audio-track-menu-button {
         transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
@@ -329,10 +389,11 @@
       media-play-button:hover,
       media-fullscreen-button:hover,
       media-mute-button:hover,
-      media-captions-menu-button:hover,
+      mave-captions-menu-button:hover,
+      media-settings-menu-button:hover,
       media-audio-track-menu-button:hover,
       mave-audio-track-menu-button:hover {
-        --media-primary-color: rgba(255, 255, 255, 1);
+        --media-primary-color: var(--mave-control-fg, rgba(255, 255, 255, 1));
         transform: scale(1.3);
       }
 
@@ -343,7 +404,8 @@
         padding-top: 7px;
       }
 
-      media-captions-menu-button div,
+      mave-captions-menu-button div,
+      media-settings-menu-button div,
       media-audio-track-menu-button div,
       mave-audio-track-menu-button div {
         width: 26px;
@@ -351,7 +413,8 @@
       }
 
       media-play-button svg,
-      media-captions-menu-button svg,
+      mave-captions-menu-button svg,
+      media-settings-menu-button svg,
       media-fullscreen-button svg,
       media-mute-button svg,
       media-audio-track-menu-button svg,
@@ -377,7 +440,7 @@
         bottom: calc(100% + 8px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.5));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -390,13 +453,28 @@
         background: rgba(0, 0, 0, 0.15);
       }
 
+      media-settings-menu {
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
+        border-radius: 8px;
+        backdrop-filter: blur(12px);
+        min-width: 160px;
+      }
+
+      media-settings-menu[hidden] {
+        display: none;
+      }
+
+      media-settings-menu-item {
+        --media-menu-item-hover-background: rgba(0, 0, 0, 0.15);
+      }
+
       media-audio-track-menu,
       mave-audio-track-menu {
         position: absolute;
         bottom: calc(100% + 8px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.5));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -416,13 +494,34 @@
         display: var(--media-audio-track-menu-button-display, none);
       }
 
+      media-settings-menu-button {
+        display: none;
+      }
+
+      @supports not (container-type: inline-size) {
+        media-settings-menu-button {
+          display: flex;
+        }
+      }
+
       media-controller[mediapaused] div[slot='centered-chrome'] media-play-button {
         opacity: 1;
       }
 
       div[slot='centered-chrome'] media-play-button {
         opacity: 0;
-        --media-control-hover-background: transparent;
+        --media-control-background: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.25))
+        );
+        --media-control-hover-background: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.25))
+        );
+        border-radius: 999px;
+        padding: 8px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+        backdrop-filter: blur(6px);
       }
 
       div[slot='centered-chrome'] media-play-button div {
@@ -522,7 +621,84 @@
       }
 
       media-captions-menu,
-      media-captions-menu-button[mediasubtitleslist] {
+      mave-captions-menu-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
+
+      @container (max-width: 480px) {
+        media-control-bar {
+          position: static;
+          flex-wrap: wrap;
+          height: auto;
+          row-gap: 0;
+          padding: 0 4px 2px 2px;
+          transform: none;
+          z-index: auto;
+        }
+
+        media-captions-menu,
+        media-audio-track-menu,
+        mave-audio-track-menu,
+        media-settings-menu {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          min-width: unset;
+          width: 100%;
+          max-height: none;
+          overflow-y: auto;
+          border-radius: 0;
+          background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          --media-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          --media-settings-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          backdrop-filter: blur(16px);
+          transform-origin: bottom center;
+          z-index: 30;
+        }
+
+        .mave-gradient-bottom {
+          display: none;
+        }
+
+        media-control-bar > div[style*='flex-grow: 1'] {
+          display: none;
+        }
+
+        media-control-bar > :not(media-time-range) {
+          order: 2;
+        }
+
+        media-time-display {
+          position: absolute;
+          top: 8px;
+          right: 16px;
+          font-size: 14px;
+          min-width: 0;
+          margin: 0;
+          padding: 2px 8px;
+          background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
+          backdrop-filter: blur(8px);
+          border-radius: 12px;
+          z-index: 10;
+        }
+
+        media-time-range {
+          order: 1;
+          flex-basis: 100%;
+          height: 28px;
+          margin: 0;
+          --media-preview-thumbnail-max-width: 0px;
+          --media-preview-thumbnail-max-height: 0px;
+        }
+
+        media-preview-thumbnail {
+          display: none;
+        }
+
+        div[slot='centered-chrome'] {
+          display: none;
+        }
+      }
     `,customElements.define(`theme-${t}`,e);}exports.build=n;

package/dist/themes/dolphin.js

@@ -1,4 +1,4 @@
-import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){return a`
+import'../chunk-KA24PL7V.js';function n(t,a,i,o){class e extends a{render(){return i`
         <media-controller novolumepref>
           <div class="subtitles">
             <div id="subtitles_text">subtitles</div>
@@ -29,6 +29,7 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
             </media-play-button>
           </div>
           <div
+            class="mave-gradient-bottom"
             style="position: absolute; bottom: 0; width: 100%; height: 50%; background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); pointer-events: none;"
           ></div>
           <div style="width: calc(100% - 32px); padding: 16px;">
@@ -72,7 +73,7 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
               <media-time-display showduration></media-time-display>
               <div style="flex-grow: 1;"></div>
               <media-playback-rate-button></media-playback-rate-button>
-              <media-captions-menu-button>
+              <mave-captions-menu-button id="mave-captions">
                 <div slot="off">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -101,8 +102,8 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
                     />
                   </svg>
                 </div>
-              </media-captions-menu-button>
-              <media-captions-menu hidden anchor="auto"></media-captions-menu>
+              </mave-captions-menu-button>
+              <media-captions-menu hidden anchor="mave-captions"></media-captions-menu>
               <mave-audio-track-menu
                 hidden
                 anchor="mave-audio-tracks"
@@ -125,6 +126,38 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
                   </svg>
                 </div>
               </mave-audio-track-menu-button>
+              <media-settings-menu-button id="mave-settings">
+                <div slot="icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <circle cx="5" cy="12" r="2"></circle>
+                    <circle cx="12" cy="12" r="2"></circle>
+                    <circle cx="19" cy="12" r="2"></circle>
+                  </svg>
+                </div>
+              </media-settings-menu-button>
+              <media-settings-menu hidden anchor="mave-settings">
+                <media-settings-menu-item style="display: var(--playbackrate-display, flex);">
+                  <span>Playback speed</span>
+                  <media-playback-rate-menu slot="submenu" hidden></media-playback-rate-menu>
+                </media-settings-menu-item>
+                <media-settings-menu-item
+                  style="display: var(--mave-captions-menu-button-display, flex);"
+                >
+                  <span>Captions</span>
+                  <media-captions-menu slot="submenu" hidden></media-captions-menu>
+                </media-settings-menu-item>
+                <media-settings-menu-item
+                  style="display: var(--media-audio-track-menu-button-display, none);"
+                >
+                  <span>Audio tracks</span>
+                  <mave-audio-track-menu slot="submenu" hidden></mave-audio-track-menu>
+                </media-settings-menu-item>
+              </media-settings-menu>
               <media-mute-button>
                 <div slot="high">
                   <svg
@@ -232,6 +265,7 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         overflow: hidden;
         position: relative;
         direction: ltr !important;
+        container-type: inline-size;
       }
 
       img,
@@ -255,6 +289,7 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
       media-controller {
         --media-tooltip-display: none;
         display: flex;
+        container-type: inline-size;
         width: 100%;
         height: 100%;
         max-height: 100vh;
@@ -263,19 +298,35 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         --media-font-family: 'Inter', system-ui, sans-serif;
         --media-background-color: transparent;
 
-        --media-primary-color: rgba(255, 255, 255, 0.94);
-        --media-secondary-color: rgba(255, 255, 255, 0.94);
+        --media-primary-color: var(--mave-control-fg, rgba(255, 255, 255, 0.94));
+        --media-secondary-color: var(--mave-control-fg, rgba(255, 255, 255, 0.94));
 
         --media-control-padding: 8px;
         --media-control-background: transparent;
         --media-option-hover-background: rgba(0, 0, 0, 0.25);
 
+        --media-range-track-background: var(--mave-control-fg-weak, rgba(255, 255, 255, 0.35));
+        --media-range-track-pointer-background: var(
+          --mave-control-fg-muted,
+          rgba(255, 255, 255, 0.6)
+        );
+
         --media-preview-time-margin: 0;
 
         --media-preview-thumbnail-max-width: 132px;
         --media-preview-thumbnail-max-height: 88px;
       }
 
+      media-controller svg[stroke],
+      media-controller svg [stroke] {
+        stroke: currentColor;
+      }
+
+      media-controller svg[fill]:not([fill='none']),
+      media-controller svg [fill]:not([fill='none']) {
+        fill: currentColor;
+      }
+
       media-control-bar {
         border-radius: 12px;
         width: 100%;
@@ -283,7 +334,7 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         padding: 0 0 0 3px;
         z-index: 20;
 
-        background: var(--primary-color, rgba(0, 0, 0, 0.25));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.25)));
 
         transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
 
@@ -303,6 +354,14 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
 
         --media-range-track-border-radius: 8px;
         --media-range-hover-background: transparent;
+        --media-text-color: #fff;
+      }
+
+      @media (prefers-contrast: more) {
+        media-time-range {
+          --media-preview-time-background: rgba(0, 0, 0, 0.85);
+          --media-preview-time-text-shadow: none;
+        }
       }
 
       media-time-display {
@@ -317,7 +376,8 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
       media-play-button,
       media-fullscreen-button,
       media-mute-button,
-      media-captions-menu-button,
+      mave-captions-menu-button,
+      media-settings-menu-button,
       media-audio-track-menu-button,
       mave-audio-track-menu-button {
         transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
@@ -329,10 +389,11 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
       media-play-button:hover,
       media-fullscreen-button:hover,
       media-mute-button:hover,
-      media-captions-menu-button:hover,
+      mave-captions-menu-button:hover,
+      media-settings-menu-button:hover,
       media-audio-track-menu-button:hover,
       mave-audio-track-menu-button:hover {
-        --media-primary-color: rgba(255, 255, 255, 1);
+        --media-primary-color: var(--mave-control-fg, rgba(255, 255, 255, 1));
         transform: scale(1.3);
       }
 
@@ -343,7 +404,8 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         padding-top: 7px;
       }
 
-      media-captions-menu-button div,
+      mave-captions-menu-button div,
+      media-settings-menu-button div,
       media-audio-track-menu-button div,
       mave-audio-track-menu-button div {
         width: 26px;
@@ -351,7 +413,8 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
       }
 
       media-play-button svg,
-      media-captions-menu-button svg,
+      mave-captions-menu-button svg,
+      media-settings-menu-button svg,
       media-fullscreen-button svg,
       media-mute-button svg,
       media-audio-track-menu-button svg,
@@ -377,7 +440,7 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         bottom: calc(100% + 8px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.5));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -390,13 +453,28 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         background: rgba(0, 0, 0, 0.15);
       }
 
+      media-settings-menu {
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
+        border-radius: 8px;
+        backdrop-filter: blur(12px);
+        min-width: 160px;
+      }
+
+      media-settings-menu[hidden] {
+        display: none;
+      }
+
+      media-settings-menu-item {
+        --media-menu-item-hover-background: rgba(0, 0, 0, 0.15);
+      }
+
       media-audio-track-menu,
       mave-audio-track-menu {
         position: absolute;
         bottom: calc(100% + 8px);
         min-width: 120px;
         transform-origin: bottom right;
-        background: var(--primary-color, rgba(0, 0, 0, 0.5));
+        background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
         border-radius: 8px;
         backdrop-filter: blur(12px);
       }
@@ -416,13 +494,34 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
         display: var(--media-audio-track-menu-button-display, none);
       }
 
+      media-settings-menu-button {
+        display: none;
+      }
+
+      @supports not (container-type: inline-size) {
+        media-settings-menu-button {
+          display: flex;
+        }
+      }
+
       media-controller[mediapaused] div[slot='centered-chrome'] media-play-button {
         opacity: 1;
       }
 
       div[slot='centered-chrome'] media-play-button {
         opacity: 0;
-        --media-control-hover-background: transparent;
+        --media-control-background: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.25))
+        );
+        --media-control-hover-background: var(
+          --mave-control-bg,
+          var(--primary-color, rgba(0, 0, 0, 0.25))
+        );
+        border-radius: 999px;
+        padding: 8px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
+        backdrop-filter: blur(6px);
       }
 
       div[slot='centered-chrome'] media-play-button div {
@@ -522,7 +621,84 @@ import'../chunk-KA24PL7V.js';function n(t,i,a,o){class e extends i{render(){retu
       }
 
       media-captions-menu,
-      media-captions-menu-button[mediasubtitleslist] {
+      mave-captions-menu-button[mediasubtitleslist] {
         display: var(--captions-display, flex);
       }
+
+      @container (max-width: 480px) {
+        media-control-bar {
+          position: static;
+          flex-wrap: wrap;
+          height: auto;
+          row-gap: 0;
+          padding: 0 4px 2px 2px;
+          transform: none;
+          z-index: auto;
+        }
+
+        media-captions-menu,
+        media-audio-track-menu,
+        mave-audio-track-menu,
+        media-settings-menu {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          min-width: unset;
+          width: 100%;
+          max-height: none;
+          overflow-y: auto;
+          border-radius: 0;
+          background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          --media-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          --media-settings-menu-background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.85)));
+          backdrop-filter: blur(16px);
+          transform-origin: bottom center;
+          z-index: 30;
+        }
+
+        .mave-gradient-bottom {
+          display: none;
+        }
+
+        media-control-bar > div[style*='flex-grow: 1'] {
+          display: none;
+        }
+
+        media-control-bar > :not(media-time-range) {
+          order: 2;
+        }
+
+        media-time-display {
+          position: absolute;
+          top: 8px;
+          right: 16px;
+          font-size: 14px;
+          min-width: 0;
+          margin: 0;
+          padding: 2px 8px;
+          background: var(--mave-control-bg, var(--primary-color, rgba(0, 0, 0, 0.5)));
+          backdrop-filter: blur(8px);
+          border-radius: 12px;
+          z-index: 10;
+        }
+
+        media-time-range {
+          order: 1;
+          flex-basis: 100%;
+          height: 28px;
+          margin: 0;
+          --media-preview-thumbnail-max-width: 0px;
+          --media-preview-thumbnail-max-height: 0px;
+        }
+
+        media-preview-thumbnail {
+          display: none;
+        }
+
+        div[slot='centered-chrome'] {
+          display: none;
+        }
+      }
     `,customElements.define(`theme-${t}`,e);}export{n as build};