@videojs/html 10.0.0-beta.2 → 10.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/cdn/audio-minimal.dev.js +25 -39
  2. package/cdn/audio-minimal.dev.js.map +1 -1
  3. package/cdn/audio-minimal.js +4 -4
  4. package/cdn/audio-minimal.js.map +1 -1
  5. package/cdn/audio.css +1 -1
  6. package/cdn/audio.dev.js +26 -40
  7. package/cdn/audio.dev.js.map +1 -1
  8. package/cdn/audio.js +4 -4
  9. package/cdn/audio.js.map +1 -1
  10. package/cdn/background.dev.js +13 -7
  11. package/cdn/background.dev.js.map +1 -1
  12. package/cdn/background.js +4 -4
  13. package/cdn/background.js.map +1 -1
  14. package/cdn/video-minimal.css +1 -1
  15. package/cdn/video-minimal.dev.js +26 -52
  16. package/cdn/video-minimal.dev.js.map +1 -1
  17. package/cdn/video-minimal.js +5 -5
  18. package/cdn/video-minimal.js.map +1 -1
  19. package/cdn/video.css +1 -1
  20. package/cdn/video.dev.js +27 -53
  21. package/cdn/video.dev.js.map +1 -1
  22. package/cdn/video.js +5 -5
  23. package/cdn/video.js.map +1 -1
  24. package/dist/default/_virtual/inline-css_src/define/audio/skin.js +1 -1
  25. package/dist/default/_virtual/inline-css_src/define/audio/skin.js.map +1 -1
  26. package/dist/default/_virtual/inline-css_src/define/base.js +6 -0
  27. package/dist/default/_virtual/inline-css_src/define/base.js.map +1 -0
  28. package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
  29. package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
  30. package/dist/default/_virtual/inline-css_src/define/video/skin.js +1 -1
  31. package/dist/default/_virtual/inline-css_src/define/video/skin.js.map +1 -1
  32. package/dist/default/define/audio/skin.css +2 -0
  33. package/dist/default/define/base.css +25 -0
  34. package/dist/default/define/skin-mixin.js +10 -18
  35. package/dist/default/define/skin-mixin.js.map +1 -1
  36. package/dist/default/define/video/minimal-skin.css +1 -64
  37. package/dist/default/define/video/minimal-skin.js.map +1 -1
  38. package/dist/default/define/video/minimal-skin.tailwind.js +1 -2
  39. package/dist/default/define/video/minimal-skin.tailwind.js.map +1 -1
  40. package/dist/default/define/video/skin.css +3 -64
  41. package/dist/default/define/video/skin.js +1 -1
  42. package/dist/default/define/video/skin.js.map +1 -1
  43. package/dist/default/define/video/skin.tailwind.js +2 -2
  44. package/dist/default/define/video/skin.tailwind.js.map +1 -1
  45. package/dist/default/skins/dist/default/default/tailwind/components/root.js +1 -1
  46. package/dist/default/skins/dist/default/default/tailwind/components/root.js.map +1 -1
  47. package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js +1 -1
  48. package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
  49. package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js +0 -1
  50. package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
  51. package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js +0 -1
  52. package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
  53. package/dist/dev/_virtual/inline-css_src/define/audio/skin.js +1 -1
  54. package/dist/dev/_virtual/inline-css_src/define/audio/skin.js.map +1 -1
  55. package/dist/dev/_virtual/inline-css_src/define/base.js +6 -0
  56. package/dist/dev/_virtual/inline-css_src/define/base.js.map +1 -0
  57. package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js +1 -1
  58. package/dist/dev/_virtual/inline-css_src/define/video/minimal-skin.js.map +1 -1
  59. package/dist/dev/_virtual/inline-css_src/define/video/skin.js +1 -1
  60. package/dist/dev/_virtual/inline-css_src/define/video/skin.js.map +1 -1
  61. package/dist/dev/define/audio/skin.css +2 -0
  62. package/dist/dev/define/base.css +25 -0
  63. package/dist/dev/define/skin-mixin.d.ts +2 -2
  64. package/dist/dev/define/skin-mixin.d.ts.map +1 -1
  65. package/dist/dev/define/skin-mixin.js +10 -32
  66. package/dist/dev/define/skin-mixin.js.map +1 -1
  67. package/dist/dev/define/video/minimal-skin.css +1 -64
  68. package/dist/dev/define/video/minimal-skin.d.ts.map +1 -1
  69. package/dist/dev/define/video/minimal-skin.js +0 -12
  70. package/dist/dev/define/video/minimal-skin.js.map +1 -1
  71. package/dist/dev/define/video/minimal-skin.tailwind.d.ts.map +1 -1
  72. package/dist/dev/define/video/minimal-skin.tailwind.js +0 -13
  73. package/dist/dev/define/video/minimal-skin.tailwind.js.map +1 -1
  74. package/dist/dev/define/video/skin.css +3 -64
  75. package/dist/dev/define/video/skin.d.ts.map +1 -1
  76. package/dist/dev/define/video/skin.js +1 -13
  77. package/dist/dev/define/video/skin.js.map +1 -1
  78. package/dist/dev/define/video/skin.tailwind.d.ts.map +1 -1
  79. package/dist/dev/define/video/skin.tailwind.js +1 -13
  80. package/dist/dev/define/video/skin.tailwind.js.map +1 -1
  81. package/dist/dev/skins/dist/default/default/tailwind/components/root.js +1 -1
  82. package/dist/dev/skins/dist/default/default/tailwind/components/root.js.map +1 -1
  83. package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js +1 -1
  84. package/dist/dev/skins/dist/default/default/tailwind/video.tailwind.js.map +1 -1
  85. package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js +0 -1
  86. package/dist/dev/skins/dist/default/minimal/tailwind/audio.tailwind.js.map +1 -1
  87. package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js +0 -1
  88. package/dist/dev/skins/dist/default/minimal/tailwind/video.tailwind.js.map +1 -1
  89. package/package.json +8 -8
  90. package/dist/default/skins/dist/default/minimal/tailwind/components/error.js +0 -15
  91. package/dist/default/skins/dist/default/minimal/tailwind/components/error.js.map +0 -1
  92. package/dist/dev/skins/dist/default/minimal/tailwind/components/error.js +0 -15
  93. package/dist/dev/skins/dist/default/minimal/tailwind/components/error.js.map +0 -1
package/dist/default/_virtual/inline-css_src/define/audio/skin.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //#region inline-css:src/define/audio/skin.js
2
- var skin_default = ".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\"\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \"×\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin--audio{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(8px) brightness(.98) saturate(1.2);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1);--media-surface-background-color:oklch(0% 0 0/.4)}}.media-default-skin--audio .media-controls{@media (prefers-color-scheme:dark){color:oklch(100% 0 0)}}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}";
2
+ var skin_default = ".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;width:100%;height:100%;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\"\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \"×\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin--audio{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(8px) brightness(.98) saturate(1.2);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1);--media-surface-background-color:oklch(0% 0 0/.4)}}.media-default-skin--audio .media-controls{@media (prefers-color-scheme:dark){color:oklch(100% 0 0)}}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}";
3
3
 
4
4
  //#endregion
5
5
  export { skin_default as default };
package/dist/default/_virtual/inline-css_src/define/audio/skin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"skin.js","names":[],"sources":["../../../../../../inline-css:src/define/audio/skin.js"],"sourcesContent":["export default \".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin--audio{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(8px) brightness(.98) saturate(1.2);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1);--media-surface-background-color:oklch(0% 0 0/.4)}}.media-default-skin--audio .media-controls{@media (prefers-color-scheme:dark){color:oklch(100% 0 0)}}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}\";"],"mappings":";AAAA,mBAAe"}
1
+ {"version":3,"file":"skin.js","names":[],"sources":["../../../../../../inline-css:src/define/audio/skin.js"],"sourcesContent":["export default \".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;width:100%;height:100%;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin--audio{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.5);--media-surface-inner-border-color:oklch(100% 0 0/.1);--media-surface-outer-border-color:oklch(0% 0 0/.05);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(8px) brightness(.98) saturate(1.2);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1);--media-surface-background-color:oklch(0% 0 0/.4)}}.media-default-skin--audio .media-controls{@media (prefers-color-scheme:dark){color:oklch(100% 0 0)}}.media-default-skin--audio .media-slider__track{background-color:oklch(0% 0 0/.1);@media (prefers-color-scheme:dark){background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}}\";"],"mappings":";AAAA,mBAAe"}
package/dist/default/_virtual/inline-css_src/define/base.js ADDED
@@ -0,0 +1,6 @@
1
+ //#region inline-css:src/define/base.js
2
+ var base_default = "video-player{display:contents}video-player video,video-player hls-video,video-player simple-hls-video{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container{transition:transform var(--media-caption-track-duration,.15s) ease-out;transition-delay:var(--media-caption-track-delay,.6s);transform:translateY(var(--media-caption-track-y,0)) scale(.98);z-index:var(--media-caption-track-z,1);font-family:inherit}@media (prefers-reduced-motion:reduce){video-player video::-webkit-media-text-track-container{transition-duration:50ms}}";
3
+
4
+ //#endregion
5
+ export { base_default as default };
6
+ //# sourceMappingURL=base.js.map
package/dist/default/_virtual/inline-css_src/define/base.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base.js","names":[],"sources":["../../../../../inline-css:src/define/base.js"],"sourcesContent":["export default \"video-player{display:contents}video-player video,video-player hls-video,video-player simple-hls-video{width:100%;height:100%;display:block}video-player video::-webkit-media-text-track-container{transition:transform var(--media-caption-track-duration,.15s) ease-out;transition-delay:var(--media-caption-track-delay,.6s);transform:translateY(var(--media-caption-track-y,0)) scale(.98);z-index:var(--media-caption-track-z,1);font-family:inherit}@media (prefers-reduced-motion:reduce){video-player video::-webkit-media-text-track-container{transition-duration:50ms}}\";"],"mappings":";AAAA,mBAAe"}
package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //#region inline-css:src/define/video/minimal-skin.js
2
- var minimal_skin_default = ".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-minimal-skin *,.media-minimal-skin :before,.media-minimal-skin :after{box-sizing:border-box;margin:0}.media-minimal-skin img,.media-minimal-skin video,.media-minimal-skin svg{max-width:100%;display:block}.media-minimal-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-minimal-skin{interpolate-size:allow-keywords}}.media-minimal-skin{isolation:isolate;border-radius:var(--media-border-radius,.75rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size}.media-minimal-skin ::slotted(video),.media-minimal-skin video{border-radius:var(--media-border-radius,.75rem);width:100%;height:100%;display:block}.media-minimal-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-minimal-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(0deg,oklch(0% 0 0/.7),oklch(0% 0 0/.5) 7.5rem,oklch(0% 0 0/0));transition:opacity .5s ease-out .5s,backdrop-filter .5s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-minimal-skin .media-controls[data-visible]~.media-overlay,.media-minimal-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-minimal-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-minimal-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}}.media-minimal-skin .media-error{z-index:20;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-minimal-skin .media-error__dialog{color:oklch(100% 0 0);text-shadow:0 1px oklch(0% 0 0/.5);max-width:16rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);flex-direction:column;gap:.75rem;padding:1rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,.media-minimal-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-minimal-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.375rem 0;display:flex}.media-minimal-skin .media-error__title{font-weight:600;line-height:1.25}.media-minimal-skin .media-error__description{opacity:.7}.media-minimal-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-minimal-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);align-items:center;display:flex;container:media-controls/inline-size}.media-minimal-skin .media-time-controls{flex-direction:row-reverse;flex:1;align-items:center;gap:.75rem;display:flex}.media-minimal-skin .media-time{align-items:center;gap:.25rem;display:flex}.media-minimal-skin .media-time__value{font-variant-numeric:tabular-nums}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:none}@container media-controls (width>28rem){.media-minimal-skin .media-time-controls{flex-direction:row}.media-minimal-skin .media-time__value--duration,.media-minimal-skin .media-time__separator{color:oklch(from currentColor l c h / .6)}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:inline}}.media-minimal-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>40rem){gap:.125rem}}.media-minimal-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;text-shadow:inherit;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:.5rem;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-minimal-skin .media-button--icon{aspect-ratio:1;width:2.375rem;color:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{color:oklch(from currentColor l c h / .8);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-minimal-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-minimal-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \"×\";font-variant-numeric:tabular-nums;width:4ch}}.media-minimal-skin .media-icon__container{position:relative}.media-minimal-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-minimal-skin .media-icon--flipped{scale:-1 1}.media-minimal-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:4.5rem}}.media-minimal-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;background-color:oklch(from currentColor l c h / .2);position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.1875rem}&[data-orientation=vertical]{width:.1875rem;height:100%}}.media-minimal-skin .media-slider__thumb{z-index:10;width:.75rem;height:.75rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;transform-origin:50%;user-select:none;outline-offset:-2px;background-color:currentColor;border-radius:3.40282e38px;outline:2px solid #0000;transition-property:opacity,scale,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%)scale(.7);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:focus-visible{outline-offset:2px;outline-color:currentColor}}.media-minimal-skin .media-slider:hover .media-slider__thumb,.media-minimal-skin .media-slider:focus-within .media-slider__thumb,.media-minimal-skin .media-slider__thumb--persistent{opacity:1;scale:1}.media-minimal-skin .media-slider__buffer,.media-minimal-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-minimal-skin .media-slider__buffer[data-orientation=horizontal],.media-minimal-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-minimal-skin .media-slider__buffer[data-orientation=vertical],.media-minimal-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-minimal-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-minimal-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-minimal-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-minimal-skin .media-popover,.media-minimal-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-minimal-skin .media-tooltip{backdrop-filter:blur(64px)brightness(.9)saturate(1.5);white-space:nowrap;--media-tooltip-side-offset:.5rem;background-color:oklch(100% 0 0/.1);border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;box-shadow:0 4px 6px -1px oklch(0% 0 0/.1),0 2px 4px -2px oklch(0% 0 0/.1);@media (prefers-reduced-transparency:reduce){background-color:oklch(0% 0 0/.7)}@media (prefers-contrast:more){background-color:oklch(0% 0 0/.9)}}.media-minimal-skin .media-captions{z-index:20;text-wrap:balance;pointer-events:none;font-size:1rem;position:absolute;inset:auto 1rem 1.5rem;@container media-root (width>20rem){font-size:1.5rem}@container media-root (width>48rem){font-size:1.875rem}@container media-root (width>80rem){font-size:2.25rem}}.media-minimal-skin .media-captions__container{text-align:center;flex-direction:column;align-items:center;max-width:42ch;margin:0 auto;display:flex}.media-minimal-skin .media-captions__text{color:oklch(100% 0 0);text-shadow:0 0 1px oklch(0% 0 0/.7),0 0 8px oklch(0% 0 0/.7);text-align:center;white-space:pre-wrap;padding:.125rem .5rem;line-height:1.2;display:block;@media (prefers-contrast:more){text-shadow:none;box-decoration-break:clone;background:oklch(0% 0 0/.7)}&>*{display:inline}}.media-minimal-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3rem}}.media-minimal-skin .media-captions,.media-minimal-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay)}.media-minimal-skin video::-webkit-media-text-track-container{transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}.media-minimal-skin .media-controls[data-visible]~.media-captions{transform:translateY(calc(var(--media-caption-track-y) - .5rem))}@media (prefers-reduced-motion:reduce){.media-minimal-skin .media-captions,.media-minimal-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-minimal-skin--video{background:oklch(0% 0 0);&:after{content:\"\";z-index:10;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.15);@media (prefers-color-scheme:dark){box-shadow:inset 0 0 0 1px oklch(100% 0 0/.15)}}&:fullscreen{border-radius:0}}.media-minimal-skin--video .media-controls{bottom:0;z-index:10;will-change:transform, filter, opacity;color:oklch(100% 0 0);gap:.5rem;padding:2rem .375rem .375rem;transition:transform 75ms ease-out,filter 75ms ease-out,opacity 75ms ease-out;position:absolute;inset-inline:0;@container media-root (width>40rem){gap:.875rem;padding:2.5rem .75rem .75rem}&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.5s;transition-delay:.5s;transform:translateY(100%);@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;transform:translateY(0)}}}.media-minimal-skin--video .media-slider__track{box-shadow:0 0 0 1px oklch(0% 0 0/.05)}.media-minimal-skin--video .media-popover--volume{--media-popover-side-offset:.5rem;background:0 0;padding:.25rem}";
2
+ var minimal_skin_default = ".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-minimal-skin *,.media-minimal-skin :before,.media-minimal-skin :after{box-sizing:border-box;margin:0}.media-minimal-skin img,.media-minimal-skin video,.media-minimal-skin svg{max-width:100%;display:block}.media-minimal-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-minimal-skin{interpolate-size:allow-keywords}}.media-minimal-skin{isolation:isolate;border-radius:var(--media-border-radius,.75rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size}.media-minimal-skin ::slotted(video),.media-minimal-skin video{border-radius:var(--media-border-radius,.75rem);width:100%;height:100%;display:block}.media-minimal-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-minimal-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(0deg,oklch(0% 0 0/.7),oklch(0% 0 0/.5) 7.5rem,oklch(0% 0 0/0));transition:opacity .5s ease-out .5s,backdrop-filter .5s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-minimal-skin .media-controls[data-visible]~.media-overlay,.media-minimal-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-minimal-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-minimal-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}}.media-minimal-skin .media-error{z-index:20;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-minimal-skin .media-error__dialog{color:oklch(100% 0 0);text-shadow:0 1px oklch(0% 0 0/.5);max-width:16rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);flex-direction:column;gap:.75rem;padding:1rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,.media-minimal-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-minimal-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.375rem 0;display:flex}.media-minimal-skin .media-error__title{font-weight:600;line-height:1.25}.media-minimal-skin .media-error__description{opacity:.7}.media-minimal-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-minimal-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);align-items:center;display:flex;container:media-controls/inline-size}.media-minimal-skin .media-time-controls{flex-direction:row-reverse;flex:1;align-items:center;gap:.75rem;display:flex}.media-minimal-skin .media-time{align-items:center;gap:.25rem;display:flex}.media-minimal-skin .media-time__value{font-variant-numeric:tabular-nums}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:none}@container media-controls (width>28rem){.media-minimal-skin .media-time-controls{flex-direction:row}.media-minimal-skin .media-time__value--duration,.media-minimal-skin .media-time__separator{color:oklch(from currentColor l c h / .6)}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:inline}}.media-minimal-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>40rem){gap:.125rem}}.media-minimal-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;text-shadow:inherit;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:.5rem;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-minimal-skin .media-button--icon{aspect-ratio:1;width:2.375rem;color:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{color:oklch(from currentColor l c h / .8);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-minimal-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-minimal-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \"×\";font-variant-numeric:tabular-nums;width:4ch}}.media-minimal-skin .media-icon__container{position:relative}.media-minimal-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-minimal-skin .media-icon--flipped{scale:-1 1}.media-minimal-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:4.5rem}}.media-minimal-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;background-color:oklch(from currentColor l c h / .2);position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.1875rem}&[data-orientation=vertical]{width:.1875rem;height:100%}}.media-minimal-skin .media-slider__thumb{z-index:10;width:.75rem;height:.75rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;transform-origin:50%;user-select:none;outline-offset:-2px;background-color:currentColor;border-radius:3.40282e38px;outline:2px solid #0000;transition-property:opacity,scale,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%)scale(.7);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:focus-visible{outline-offset:2px;outline-color:currentColor}}.media-minimal-skin .media-slider:hover .media-slider__thumb,.media-minimal-skin .media-slider:focus-within .media-slider__thumb,.media-minimal-skin .media-slider__thumb--persistent{opacity:1;scale:1}.media-minimal-skin .media-slider__buffer,.media-minimal-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-minimal-skin .media-slider__buffer[data-orientation=horizontal],.media-minimal-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-minimal-skin .media-slider__buffer[data-orientation=vertical],.media-minimal-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-minimal-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-minimal-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-minimal-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-minimal-skin .media-popover,.media-minimal-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-minimal-skin .media-tooltip{backdrop-filter:blur(64px)brightness(.9)saturate(1.5);white-space:nowrap;--media-tooltip-side-offset:.5rem;background-color:oklch(100% 0 0/.1);border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;box-shadow:0 4px 6px -1px oklch(0% 0 0/.1),0 2px 4px -2px oklch(0% 0 0/.1);@media (prefers-reduced-transparency:reduce){background-color:oklch(0% 0 0/.7)}@media (prefers-contrast:more){background-color:oklch(0% 0 0/.9)}}.media-minimal-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3rem}}.media-minimal-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay);transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}@media (prefers-reduced-motion:reduce){.media-minimal-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-minimal-skin--video{background:oklch(0% 0 0);&:after{content:\"\";z-index:10;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.15);@media (prefers-color-scheme:dark){box-shadow:inset 0 0 0 1px oklch(100% 0 0/.15)}}&:fullscreen{border-radius:0}}.media-minimal-skin--video .media-controls{bottom:0;z-index:10;will-change:transform, filter, opacity;color:oklch(100% 0 0);gap:.5rem;padding:2rem .375rem .375rem;transition:transform 75ms ease-out,filter 75ms ease-out,opacity 75ms ease-out;position:absolute;inset-inline:0;@container media-root (width>40rem){gap:.875rem;padding:2.5rem .75rem .75rem}&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.5s;transition-delay:.5s;transform:translateY(100%);@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;transform:translateY(0)}}}.media-minimal-skin--video .media-slider__track{box-shadow:0 0 0 1px oklch(0% 0 0/.05)}.media-minimal-skin--video .media-popover--volume{--media-popover-side-offset:.5rem;background:0 0;padding:.25rem}";
3
3
 
4
4
  //#endregion
5
5
  export { minimal_skin_default as default };
package/dist/default/_virtual/inline-css_src/define/video/minimal-skin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../../../inline-css:src/define/video/minimal-skin.js"],"sourcesContent":["export default \".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-minimal-skin *,.media-minimal-skin :before,.media-minimal-skin :after{box-sizing:border-box;margin:0}.media-minimal-skin img,.media-minimal-skin video,.media-minimal-skin svg{max-width:100%;display:block}.media-minimal-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-minimal-skin{interpolate-size:allow-keywords}}.media-minimal-skin{isolation:isolate;border-radius:var(--media-border-radius,.75rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size}.media-minimal-skin ::slotted(video),.media-minimal-skin video{border-radius:var(--media-border-radius,.75rem);width:100%;height:100%;display:block}.media-minimal-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-minimal-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(0deg,oklch(0% 0 0/.7),oklch(0% 0 0/.5) 7.5rem,oklch(0% 0 0/0));transition:opacity .5s ease-out .5s,backdrop-filter .5s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-minimal-skin .media-controls[data-visible]~.media-overlay,.media-minimal-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-minimal-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-minimal-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}}.media-minimal-skin .media-error{z-index:20;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-minimal-skin .media-error__dialog{color:oklch(100% 0 0);text-shadow:0 1px oklch(0% 0 0/.5);max-width:16rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);flex-direction:column;gap:.75rem;padding:1rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,.media-minimal-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-minimal-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.375rem 0;display:flex}.media-minimal-skin .media-error__title{font-weight:600;line-height:1.25}.media-minimal-skin .media-error__description{opacity:.7}.media-minimal-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-minimal-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);align-items:center;display:flex;container:media-controls/inline-size}.media-minimal-skin .media-time-controls{flex-direction:row-reverse;flex:1;align-items:center;gap:.75rem;display:flex}.media-minimal-skin .media-time{align-items:center;gap:.25rem;display:flex}.media-minimal-skin .media-time__value{font-variant-numeric:tabular-nums}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:none}@container media-controls (width>28rem){.media-minimal-skin .media-time-controls{flex-direction:row}.media-minimal-skin .media-time__value--duration,.media-minimal-skin .media-time__separator{color:oklch(from currentColor l c h / .6)}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:inline}}.media-minimal-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>40rem){gap:.125rem}}.media-minimal-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;text-shadow:inherit;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:.5rem;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-minimal-skin .media-button--icon{aspect-ratio:1;width:2.375rem;color:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{color:oklch(from currentColor l c h / .8);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-minimal-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-minimal-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-minimal-skin .media-icon__container{position:relative}.media-minimal-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-minimal-skin .media-icon--flipped{scale:-1 1}.media-minimal-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:4.5rem}}.media-minimal-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;background-color:oklch(from currentColor l c h / .2);position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.1875rem}&[data-orientation=vertical]{width:.1875rem;height:100%}}.media-minimal-skin .media-slider__thumb{z-index:10;width:.75rem;height:.75rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;transform-origin:50%;user-select:none;outline-offset:-2px;background-color:currentColor;border-radius:3.40282e38px;outline:2px solid #0000;transition-property:opacity,scale,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%)scale(.7);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:focus-visible{outline-offset:2px;outline-color:currentColor}}.media-minimal-skin .media-slider:hover .media-slider__thumb,.media-minimal-skin .media-slider:focus-within .media-slider__thumb,.media-minimal-skin .media-slider__thumb--persistent{opacity:1;scale:1}.media-minimal-skin .media-slider__buffer,.media-minimal-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-minimal-skin .media-slider__buffer[data-orientation=horizontal],.media-minimal-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-minimal-skin .media-slider__buffer[data-orientation=vertical],.media-minimal-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-minimal-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-minimal-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-minimal-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-minimal-skin .media-popover,.media-minimal-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-minimal-skin .media-tooltip{backdrop-filter:blur(64px)brightness(.9)saturate(1.5);white-space:nowrap;--media-tooltip-side-offset:.5rem;background-color:oklch(100% 0 0/.1);border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;box-shadow:0 4px 6px -1px oklch(0% 0 0/.1),0 2px 4px -2px oklch(0% 0 0/.1);@media (prefers-reduced-transparency:reduce){background-color:oklch(0% 0 0/.7)}@media (prefers-contrast:more){background-color:oklch(0% 0 0/.9)}}.media-minimal-skin .media-captions{z-index:20;text-wrap:balance;pointer-events:none;font-size:1rem;position:absolute;inset:auto 1rem 1.5rem;@container media-root (width>20rem){font-size:1.5rem}@container media-root (width>48rem){font-size:1.875rem}@container media-root (width>80rem){font-size:2.25rem}}.media-minimal-skin .media-captions__container{text-align:center;flex-direction:column;align-items:center;max-width:42ch;margin:0 auto;display:flex}.media-minimal-skin .media-captions__text{color:oklch(100% 0 0);text-shadow:0 0 1px oklch(0% 0 0/.7),0 0 8px oklch(0% 0 0/.7);text-align:center;white-space:pre-wrap;padding:.125rem .5rem;line-height:1.2;display:block;@media (prefers-contrast:more){text-shadow:none;box-decoration-break:clone;background:oklch(0% 0 0/.7)}&>*{display:inline}}.media-minimal-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3rem}}.media-minimal-skin .media-captions,.media-minimal-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay)}.media-minimal-skin video::-webkit-media-text-track-container{transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}.media-minimal-skin .media-controls[data-visible]~.media-captions{transform:translateY(calc(var(--media-caption-track-y) - .5rem))}@media (prefers-reduced-motion:reduce){.media-minimal-skin .media-captions,.media-minimal-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-minimal-skin--video{background:oklch(0% 0 0);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.15);@media (prefers-color-scheme:dark){box-shadow:inset 0 0 0 1px oklch(100% 0 0/.15)}}&:fullscreen{border-radius:0}}.media-minimal-skin--video .media-controls{bottom:0;z-index:10;will-change:transform, filter, opacity;color:oklch(100% 0 0);gap:.5rem;padding:2rem .375rem .375rem;transition:transform 75ms ease-out,filter 75ms ease-out,opacity 75ms ease-out;position:absolute;inset-inline:0;@container media-root (width>40rem){gap:.875rem;padding:2.5rem .75rem .75rem}&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.5s;transition-delay:.5s;transform:translateY(100%);@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;transform:translateY(0)}}}.media-minimal-skin--video .media-slider__track{box-shadow:0 0 0 1px oklch(0% 0 0/.05)}.media-minimal-skin--video .media-popover--volume{--media-popover-side-offset:.5rem;background:0 0;padding:.25rem}\";"],"mappings":";AAAA,2BAAe"}
1
+ {"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../../../inline-css:src/define/video/minimal-skin.js"],"sourcesContent":["export default \".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-minimal-skin *,.media-minimal-skin :before,.media-minimal-skin :after{box-sizing:border-box;margin:0}.media-minimal-skin img,.media-minimal-skin video,.media-minimal-skin svg{max-width:100%;display:block}.media-minimal-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-minimal-skin{interpolate-size:allow-keywords}}.media-minimal-skin{isolation:isolate;border-radius:var(--media-border-radius,.75rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size}.media-minimal-skin ::slotted(video),.media-minimal-skin video{border-radius:var(--media-border-radius,.75rem);width:100%;height:100%;display:block}.media-minimal-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-minimal-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(0deg,oklch(0% 0 0/.7),oklch(0% 0 0/.5) 7.5rem,oklch(0% 0 0/0));transition:opacity .5s ease-out .5s,backdrop-filter .5s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-minimal-skin .media-controls[data-visible]~.media-overlay,.media-minimal-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-minimal-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-minimal-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}}.media-minimal-skin .media-error{z-index:20;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-minimal-skin .media-error__dialog{color:oklch(100% 0 0);text-shadow:0 1px oklch(0% 0 0/.5);max-width:16rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);flex-direction:column;gap:.75rem;padding:1rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,.media-minimal-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-minimal-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.375rem 0;display:flex}.media-minimal-skin .media-error__title{font-weight:600;line-height:1.25}.media-minimal-skin .media-error__description{opacity:.7}.media-minimal-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-minimal-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);align-items:center;display:flex;container:media-controls/inline-size}.media-minimal-skin .media-time-controls{flex-direction:row-reverse;flex:1;align-items:center;gap:.75rem;display:flex}.media-minimal-skin .media-time{align-items:center;gap:.25rem;display:flex}.media-minimal-skin .media-time__value{font-variant-numeric:tabular-nums}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:none}@container media-controls (width>28rem){.media-minimal-skin .media-time-controls{flex-direction:row}.media-minimal-skin .media-time__value--duration,.media-minimal-skin .media-time__separator{color:oklch(from currentColor l c h / .6)}.media-minimal-skin .media-time__value--current,.media-minimal-skin .media-time__separator{display:inline}}.media-minimal-skin .media-button-group{align-items:center;gap:.075rem;display:flex;@container media-root (width>40rem){gap:.125rem}}.media-minimal-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;text-shadow:inherit;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:.5rem;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:currentColor}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-minimal-skin .media-button--icon{aspect-ratio:1;width:2.375rem;color:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{color:oklch(from currentColor l c h / .8);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-minimal-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-minimal-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-minimal-skin .media-icon__container{position:relative}.media-minimal-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-minimal-skin .media-icon--flipped{scale:-1 1}.media-minimal-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:4.5rem}}.media-minimal-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;background-color:oklch(from currentColor l c h / .2);position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.1875rem}&[data-orientation=vertical]{width:.1875rem;height:100%}}.media-minimal-skin .media-slider__thumb{z-index:10;width:.75rem;height:.75rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;transform-origin:50%;user-select:none;outline-offset:-2px;background-color:currentColor;border-radius:3.40282e38px;outline:2px solid #0000;transition-property:opacity,scale,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%)scale(.7);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:focus-visible{outline-offset:2px;outline-color:currentColor}}.media-minimal-skin .media-slider:hover .media-slider__thumb,.media-minimal-skin .media-slider:focus-within .media-slider__thumb,.media-minimal-skin .media-slider__thumb--persistent{opacity:1;scale:1}.media-minimal-skin .media-slider__buffer,.media-minimal-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-minimal-skin .media-slider__buffer[data-orientation=horizontal],.media-minimal-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-minimal-skin .media-slider__buffer[data-orientation=vertical],.media-minimal-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-minimal-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-minimal-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-minimal-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-minimal-skin .media-popover,.media-minimal-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-minimal-skin .media-tooltip{backdrop-filter:blur(64px)brightness(.9)saturate(1.5);white-space:nowrap;--media-tooltip-side-offset:.5rem;background-color:oklch(100% 0 0/.1);border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;box-shadow:0 4px 6px -1px oklch(0% 0 0/.1),0 2px 4px -2px oklch(0% 0 0/.1);@media (prefers-reduced-transparency:reduce){background-color:oklch(0% 0 0/.7)}@media (prefers-contrast:more){background-color:oklch(0% 0 0/.9)}}.media-minimal-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3rem}}.media-minimal-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay);transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}@media (prefers-reduced-motion:reduce){.media-minimal-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-minimal-skin--video{background:oklch(0% 0 0);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.15);@media (prefers-color-scheme:dark){box-shadow:inset 0 0 0 1px oklch(100% 0 0/.15)}}&:fullscreen{border-radius:0}}.media-minimal-skin--video .media-controls{bottom:0;z-index:10;will-change:transform, filter, opacity;color:oklch(100% 0 0);gap:.5rem;padding:2rem .375rem .375rem;transition:transform 75ms ease-out,filter 75ms ease-out,opacity 75ms ease-out;position:absolute;inset-inline:0;@container media-root (width>40rem){gap:.875rem;padding:2.5rem .75rem .75rem}&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.5s;transition-delay:.5s;transform:translateY(100%);@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;transform:translateY(0)}}}.media-minimal-skin--video .media-slider__track{box-shadow:0 0 0 1px oklch(0% 0 0/.05)}.media-minimal-skin--video .media-popover--volume{--media-popover-side-offset:.5rem;background:0 0;padding:.25rem}\";"],"mappings":";AAAA,2BAAe"}
package/dist/default/_virtual/inline-css_src/define/video/skin.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //#region inline-css:src/define/video/skin.js
2
- var skin_default = ".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\"\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin ::slotted(video),.media-default-skin video{border-radius:var(--media-border-radius,2rem);width:100%;height:100%;display:block}.media-default-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-default-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(oklch(0% 0 0/0),oklch(0% 0 0/.3),oklch(0% 0 0/.5));transition:opacity .3s ease-out .5s,backdrop-filter .3s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-default-skin .media-controls[data-visible]~.media-overlay,.media-default-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-default-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \"×\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin .media-captions{z-index:20;text-wrap:balance;pointer-events:none;font-size:1rem;position:absolute;inset:auto 1rem 1.5rem;@container media-root (width>20rem){font-size:1.5rem}@container media-root (width>48rem){font-size:1.875rem}@container media-root (width>80rem){font-size:2.25rem}}.media-default-skin .media-captions__container{text-align:center;flex-direction:column;align-items:center;max-width:42ch;margin:0 auto;display:flex}.media-default-skin .media-captions__text{color:oklch(100% 0 0);text-shadow:0 0 1px oklch(0% 0 0/.7),0 0 8px oklch(0% 0 0/.7);text-align:center;white-space:pre-wrap;padding:.125rem .5rem;line-height:1.2;display:block;@media (prefers-contrast:more){text-shadow:none;box-decoration-break:clone;background:oklch(0% 0 0/.7)}&>*{display:inline}}.media-default-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3.5rem}}.media-default-skin .media-captions,.media-default-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay)}.media-default-skin video::-webkit-media-text-track-container{transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}.media-default-skin .media-controls[data-visible]~.media-captions{transform:translateY(calc(var(--media-caption-track-y) - .5rem))}@media (prefers-reduced-motion:reduce){.media-default-skin .media-captions,.media-default-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-default-skin--video{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.1);--media-surface-inner-border-color:oklch(100% 0 0/.05);--media-surface-outer-border-color:oklch(0% 0 0/.1);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(64px) brightness(.9) saturate(1.5);background:oklch(0% 0 0);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1)}&:after{content:\"\";z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-border-color);pointer-events:none;position:absolute;inset:0}}.media-default-skin--video .media-controls{bottom:.75rem;z-index:10;will-change:scale, transform, filter, opacity;transform-origin:bottom;color:oklch(100% 0 0);transition:scale .1s ease-out,transform .1s ease-out,filter .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline:.75rem;&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.3s;transition-delay:.5s;scale:.9;@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;scale:1}}}.media-default-skin--video .media-slider__track{background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}";
2
+ var skin_default = ".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;width:100%;height:100%;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\"\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin ::slotted(video),.media-default-skin video{border-radius:var(--media-border-radius,2rem);width:100%;height:100%;display:block}.media-default-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-default-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(oklch(0% 0 0/0),oklch(0% 0 0/.3),oklch(0% 0 0/.5));transition:opacity .3s ease-out .5s,backdrop-filter .3s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-default-skin .media-controls[data-visible]~.media-overlay,.media-default-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-default-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \"×\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3.5rem}}.media-default-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay);transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}@media (prefers-reduced-motion:reduce){.media-default-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-default-skin--video{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.1);--media-surface-inner-border-color:oklch(100% 0 0/.05);--media-surface-outer-border-color:oklch(0% 0 0/.1);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(64px) brightness(.9) saturate(1.5);background:oklch(0% 0 0);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1)}&:after{content:\"\";z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-border-color);pointer-events:none;position:absolute;inset:0}}.media-default-skin--video .media-controls{bottom:.75rem;z-index:10;will-change:scale, transform, filter, opacity;transform-origin:bottom;color:oklch(100% 0 0);transition:scale .1s ease-out,transform .1s ease-out,filter .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline:.75rem;&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.3s;transition-delay:.5s;scale:.9;@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;scale:1}}}.media-default-skin--video .media-slider__track{background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}";
3
3
 
4
4
  //#endregion
5
5
  export { skin_default as default };
package/dist/default/_virtual/inline-css_src/define/video/skin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"skin.js","names":[],"sources":["../../../../../../inline-css:src/define/video/skin.js"],"sourcesContent":["export default \".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin ::slotted(video),.media-default-skin video{border-radius:var(--media-border-radius,2rem);width:100%;height:100%;display:block}.media-default-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-default-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(oklch(0% 0 0/0),oklch(0% 0 0/.3),oklch(0% 0 0/.5));transition:opacity .3s ease-out .5s,backdrop-filter .3s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-default-skin .media-controls[data-visible]~.media-overlay,.media-default-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-default-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin .media-captions{z-index:20;text-wrap:balance;pointer-events:none;font-size:1rem;position:absolute;inset:auto 1rem 1.5rem;@container media-root (width>20rem){font-size:1.5rem}@container media-root (width>48rem){font-size:1.875rem}@container media-root (width>80rem){font-size:2.25rem}}.media-default-skin .media-captions__container{text-align:center;flex-direction:column;align-items:center;max-width:42ch;margin:0 auto;display:flex}.media-default-skin .media-captions__text{color:oklch(100% 0 0);text-shadow:0 0 1px oklch(0% 0 0/.7),0 0 8px oklch(0% 0 0/.7);text-align:center;white-space:pre-wrap;padding:.125rem .5rem;line-height:1.2;display:block;@media (prefers-contrast:more){text-shadow:none;box-decoration-break:clone;background:oklch(0% 0 0/.7)}&>*{display:inline}}.media-default-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3.5rem}}.media-default-skin .media-captions,.media-default-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay)}.media-default-skin video::-webkit-media-text-track-container{transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}.media-default-skin .media-controls[data-visible]~.media-captions{transform:translateY(calc(var(--media-caption-track-y) - .5rem))}@media (prefers-reduced-motion:reduce){.media-default-skin .media-captions,.media-default-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-default-skin--video{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.1);--media-surface-inner-border-color:oklch(100% 0 0/.05);--media-surface-outer-border-color:oklch(0% 0 0/.1);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(64px) brightness(.9) saturate(1.5);background:oklch(0% 0 0);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1)}&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-border-color);pointer-events:none;position:absolute;inset:0}}.media-default-skin--video .media-controls{bottom:.75rem;z-index:10;will-change:scale, transform, filter, opacity;transform-origin:bottom;color:oklch(100% 0 0);transition:scale .1s ease-out,transform .1s ease-out,filter .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline:.75rem;&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.3s;transition-delay:.5s;scale:.9;@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;scale:1}}}.media-default-skin--video .media-slider__track{background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}\";"],"mappings":";AAAA,mBAAe"}
1
+ {"version":3,"file":"skin.js","names":[],"sources":["../../../../../../inline-css:src/define/video/skin.js"],"sourcesContent":["export default \".media-button--play .media-icon--restart,.media-button--play .media-icon--play,.media-button--play .media-icon--pause,.media-button--mute .media-icon--volume-off,.media-button--mute .media-icon--volume-low,.media-button--mute .media-icon--volume-high,.media-button--fullscreen .media-icon--fullscreen-enter,.media-button--fullscreen .media-icon--fullscreen-exit,.media-button--captions .media-icon--captions-off,.media-button--captions .media-icon--captions-on{opacity:0;display:none}.media-button--play[data-ended] .media-icon--restart,.media-button--play:not([data-ended])[data-paused] .media-icon--play,.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,.media-button--mute[data-muted] .media-icon--volume-off,.media-button--mute:not([data-muted])[data-volume-level=low] .media-icon--volume-low,.media-button--mute:not([data-muted]):not([data-volume-level=low]) .media-icon--volume-high,.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,.media-button--captions:not([data-active]) .media-icon--captions-off,.media-button--captions[data-active] .media-icon--captions-on{opacity:1;display:block}.media-tooltip-label{display:none}.media-button--play[data-ended]+.media-tooltip .media-tooltip-label--replay,.media-button--play:not([data-ended])[data-paused]+.media-tooltip .media-tooltip-label--play,.media-button--play:not([data-paused]):not([data-ended])+.media-tooltip .media-tooltip-label--pause,.media-button--fullscreen:not([data-fullscreen])+.media-tooltip .media-tooltip-label--enter-fullscreen,.media-button--fullscreen[data-fullscreen]+.media-tooltip .media-tooltip-label--exit-fullscreen,.media-button--captions:not([data-active])+.media-tooltip .media-tooltip-label--enable-captions,.media-button--captions[data-active]+.media-tooltip .media-tooltip-label--disable-captions,.media-button--pip:not([data-pip])+.media-tooltip .media-tooltip-label--enter-pip,.media-button--pip[data-pip]+.media-tooltip .media-tooltip-label--exit-pip{display:block}.media-default-skin *,.media-default-skin :before,.media-default-skin :after{box-sizing:border-box;margin:0}.media-default-skin img,.media-default-skin video,.media-default-skin svg{max-width:100%;display:block}.media-default-skin button{font:inherit}@media (prefers-reduced-motion:no-preference){.media-default-skin{interpolate-size:allow-keywords}}.media-default-skin{isolation:isolate;border-radius:var(--media-border-radius,2rem);letter-spacing:normal;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;width:100%;height:100%;font-family:Inter Variable,Inter,ui-sans-serif,system-ui,sans-serif;font-size:.8125rem;line-height:1.5;display:block;position:relative;container:media-root/inline-size;&:fullscreen{border-radius:0}}.media-default-skin .media-surface{background-color:var(--media-surface-background-color);backdrop-filter:var(--media-surface-backdrop-filter);box-shadow:inset 0 0 0 1px var(--media-surface-inner-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color);&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:0 0 0 1px var(--media-surface-outer-border-color);pointer-events:none;position:absolute;inset:0}@media (prefers-reduced-transparency:reduce){background-color:oklch(from var(--media-surface-background-color) l c h / .7)}@media (prefers-contrast:more){background-color:oklch(from var(--media-surface-background-color) l c h / .9)}}.media-default-skin ::slotted(video),.media-default-skin video{border-radius:var(--media-border-radius,2rem);width:100%;height:100%;display:block}.media-default-skin>img{border-radius:inherit;object-fit:cover;pointer-events:none;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0;&:not([data-visible]){opacity:0}}.media-default-skin .media-overlay{border-radius:inherit;backdrop-filter:blur()saturate(1.2)brightness(.9);opacity:0;pointer-events:none;background-image:linear-gradient(oklch(0% 0 0/0),oklch(0% 0 0/.3),oklch(0% 0 0/.5));transition:opacity .3s ease-out .5s,backdrop-filter .3s ease-out .5s;position:absolute;inset:0;@media (prefers-reduced-motion:reduce){transition-duration:.1s}}.media-default-skin .media-controls[data-visible]~.media-overlay,.media-default-skin .media-error[data-open]~.media-overlay{opacity:1;transition-duration:.15s;transition-delay:0s}.media-default-skin .media-error[data-open]~.media-overlay{backdrop-filter:blur(8px)saturate(1.2)brightness(.9)}.media-default-skin .media-buffering-indicator{color:oklch(100% 0 0);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;inset:0;&[data-visible]{display:flex}& .media-surface{border-radius:100%;padding:.25rem}}.media-default-skin .media-error{z-index:20;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.media-default-skin .media-error__dialog{color:oklch(100% 0 0);max-width:18rem;transition-property:opacity,transform;transition-duration:.5s;transition-delay:.1s;transition-timing-function:linear(0, .034 1.5%, .763 9.7%, 1.066 13.9%, 1.198 19.9%, 1.184 21.8%, .963 37.5%, .997 50.9%, 1);border-radius:1.75rem;flex-direction:column;gap:.75rem;padding:.75rem;font-size:.875rem;display:flex;@media (prefers-reduced-motion:reduce){transition-duration:.1s;transition-delay:0s;transition-timing-function:ease-out}}.media-default-skin .media-error[data-starting-style] .media-error__dialog,.media-default-skin .media-error[data-ending-style] .media-error__dialog{opacity:0;transform:scale(.5)}.media-default-skin .media-error__content{flex-direction:column;gap:.5rem;padding:.5rem .5rem .375rem;display:flex}.media-default-skin .media-error__title{font-weight:600;line-height:1.25}.media-default-skin .media-error__description{opacity:.7}.media-default-skin .media-error__actions{gap:.5rem;display:flex;&>*{flex:1}}.media-default-skin .media-controls{--media-controls-current-shadow-color:oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .25));--media-controls-current-shadow-color-subtle:oklch(from var(--media-controls-current-shadow-color) l c h / calc(alpha * .4));text-shadow:0 0 1px var(--media-controls-current-shadow-color);border-radius:3.40282e38px;align-items:center;gap:.075rem;padding:.175rem;display:flex;container:media-controls/inline-size;@container media-root (width>40rem){gap:.125rem;padding:.25rem}}.media-default-skin .media-time{flex:1;align-items:center;gap:.75rem;padding-inline:.5rem;display:flex;container:media-time/inline-size;& .media-time__value:first-child{display:none;@container media-time (width>18rem){display:block}}}.media-default-skin .media-time__value{font-variant-numeric:tabular-nums}.media-default-skin .media-button{outline-offset:-2px;color:oklch(0% 0 0);text-align:center;cursor:pointer;user-select:none;background:oklch(100% 0 0);border:none;border-radius:3.40282e38px;outline:2px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:.5rem 1rem;font-weight:500;transition-property:background-color,color,outline-offset,transform;transition-duration:.15s;transition-timing-function:ease-out;display:flex;&:focus-visible{outline-offset:2px;outline-color:oklch(62.3% .214 259.815)}&[disabled]{opacity:.5;filter:grayscale();cursor:not-allowed}&[data-availability=unavailable]{display:none}}.media-default-skin .media-button--icon{aspect-ratio:1;width:2.125rem;color:inherit;text-shadow:inherit;background:0 0;padding:0;display:grid;&:hover,&:focus-visible,&[aria-expanded=true]{background-color:oklch(from currentColor l c h / .1);text-decoration:none}&:active{transform:scale(.9)}& .media-icon{filter:drop-shadow(0 1px 0 var(--media-controls-current-shadow-color,oklch(0% 0 0/.25)))}}.media-default-skin .media-button--seek{& .media-icon__label{font-variant-numeric:tabular-nums;font-size:.75em;font-weight:480;position:absolute;bottom:-3px;right:-1px}&:has(.media-icon--flipped) .media-icon__label{right:unset;left:-1px}@container media-controls (width<28rem){display:none}}.media-default-skin .media-button--playback-rate{padding:0;&:after{content:attr(data-rate) \\\"×\\\";font-variant-numeric:tabular-nums;width:4ch}}.media-default-skin .media-icon__container{position:relative}.media-default-skin .media-icon{transition-behavior:allow-discrete;flex-shrink:0;grid-area:1/1;width:18px;height:18px;transition-property:display,opacity;transition-duration:.15s;transition-timing-function:ease-out;display:block}.media-default-skin .media-icon--flipped{scale:-1 1}.media-default-skin .media-slider{border-radius:3.40282e38px;outline:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;&[data-orientation=horizontal]{width:100%;min-width:5rem;height:1.25rem}&[data-orientation=vertical]{width:1.25rem;height:5rem}}.media-default-skin .media-slider__track{isolation:isolate;border-radius:inherit;user-select:none;position:relative;overflow:hidden;&[data-orientation=horizontal]{width:100%;height:.25rem}&[data-orientation=vertical]{width:.25rem;height:100%}}.media-default-skin .media-slider__thumb{z-index:10;width:.625rem;height:.625rem;box-shadow:0 0 0 1px var(--media-controls-current-shadow-color-subtle,oklch(0% 0 0/.1)), 0 1px 3px 0 oklch(0% 0 0/.15), 0 1px 2px -1px oklch(0% 0 0/.15);opacity:0;user-select:none;outline-offset:-4px;background-color:currentColor;border-radius:3.40282e38px;outline:4px solid #0000;transition-property:opacity,height,width,outline-offset;transition-duration:.15s;transition-timing-function:ease-out;position:absolute;transform:translate(-50%,-50%);&[data-orientation=horizontal]{top:50%;left:var(--media-slider-fill)}&[data-orientation=vertical]{left:50%;top:calc(100% - var(--media-slider-fill))}&:hover,&:focus{outline-color:oklch(from currentColor l c h / .25);outline-offset:0}}.media-default-skin .media-slider:active .media-slider__thumb,.media-default-skin .media-slider__thumb--persistent{width:.75rem;height:.75rem}.media-default-skin .media-slider:hover .media-slider__thumb,.media-default-skin .media-slider__thumb:focus-visible,.media-default-skin .media-slider__thumb--persistent{opacity:1}.media-default-skin .media-slider__buffer,.media-default-skin .media-slider__fill{border-radius:inherit;pointer-events:none;position:absolute}.media-default-skin .media-slider__buffer[data-orientation=horizontal],.media-default-skin .media-slider__fill[data-orientation=horizontal]{inset-block:0;left:0}.media-default-skin .media-slider__buffer[data-orientation=vertical],.media-default-skin .media-slider__fill[data-orientation=vertical]{inset-inline:0;bottom:0}.media-default-skin .media-slider__buffer{background-color:oklch(from currentColor l c h / .2);transition-duration:.25s;transition-timing-function:ease-out;&[data-orientation=horizontal]{width:var(--media-slider-buffer);transition-property:width}&[data-orientation=vertical]{height:var(--media-slider-buffer);transition-property:height}}.media-default-skin .media-slider__fill{background-color:currentColor;&[data-orientation=horizontal]{width:var(--media-slider-fill)}&[data-orientation=vertical]{height:var(--media-slider-fill)}}.media-default-skin .media-slider__time-display{font-variant-numeric:tabular-nums}.media-default-skin .media-popover,.media-default-skin .media-tooltip{color:inherit;border:0;margin:0;transition-property:transform,scale,opacity,filter;transition-duration:.2s;overflow:visible;&[data-starting-style],&[data-ending-style]{opacity:0;filter:blur(8px);transform:scale(0)}&[data-instant]{transition-duration:0s}&[data-side=top]{transform-origin:bottom}&[data-side=bottom]{transform-origin:top}&[data-side=left]{transform-origin:100%}&[data-side=right]{transform-origin:0}}.media-default-skin .media-popover{--media-popover-side-offset:.5rem}.media-default-skin .media-popover--volume{border-radius:3.40282e38px;padding:.625rem .25rem}.media-default-skin .media-tooltip{white-space:nowrap;--media-tooltip-side-offset:.5rem;border-radius:3.40282e38px;padding:.25rem .625rem;font-size:.75rem}.media-default-skin{--media-caption-track-delay:.6s;--media-caption-track-y:-.5rem;&:has(.media-controls[data-visible]){--media-caption-track-delay:25ms;--media-caption-track-y:-3.5rem}}.media-default-skin video::-webkit-media-text-track-container{transition:transform .15s ease-out;transition-delay:var(--media-caption-track-delay);transform:translateY(var(--media-caption-track-y)) scale(.98);z-index:1;font-family:inherit}@media (prefers-reduced-motion:reduce){.media-default-skin video::-webkit-media-text-track-container{transition-duration:50ms}}.media-default-skin--video{--media-border-color:oklch(0% 0 0/.1);--media-surface-background-color:oklch(100% 0 0/.1);--media-surface-inner-border-color:oklch(100% 0 0/.05);--media-surface-outer-border-color:oklch(0% 0 0/.1);--media-surface-shadow-color:oklch(0% 0 0/.15);--media-surface-backdrop-filter:blur(64px) brightness(.9) saturate(1.5);background:oklch(0% 0 0);@media (prefers-color-scheme:dark){--media-border-color:oklch(100% 0 0/.1)}&:after{content:\\\"\\\";z-index:10;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--media-border-color);pointer-events:none;position:absolute;inset:0}}.media-default-skin--video .media-controls{bottom:.75rem;z-index:10;will-change:scale, transform, filter, opacity;transform-origin:bottom;color:oklch(100% 0 0);transition:scale .1s ease-out,transform .1s ease-out,filter .1s ease-out,opacity .1s ease-out;position:absolute;inset-inline:.75rem;&:not([data-visible]){opacity:0;filter:blur(8px);pointer-events:none;transition-duration:.3s;transition-delay:.5s;scale:.9;@media (prefers-reduced-motion:reduce){filter:blur();transition-duration:.1s;scale:1}}}.media-default-skin--video .media-slider__track{background-color:oklch(100% 0 0/.2);box-shadow:0 0 0 1px oklch(0% 0 0/.05)}\";"],"mappings":";AAAA,mBAAe"}
package/dist/default/define/audio/skin.css CHANGED
@@ -95,6 +95,8 @@
95
95
  position: relative;
96
96
  isolation: isolate;
97
97
  display: block;
98
+ height: 100%;
99
+ width: 100%;
98
100
  container: media-root / inline-size;
99
101
  border-radius: var(--media-border-radius, 2rem);
100
102
  font-family:
package/dist/default/define/base.css ADDED
@@ -0,0 +1,25 @@
1
+ video-player {
2
+ display: contents;
3
+ }
4
+
5
+ video-player video,
6
+ video-player hls-video,
7
+ video-player simple-hls-video {
8
+ display: block;
9
+ width: 100%;
10
+ height: 100%;
11
+ }
12
+
13
+ video-player video::-webkit-media-text-track-container {
14
+ transition: transform var(--media-caption-track-duration, 150ms) ease-out;
15
+ transition-delay: var(--media-caption-track-delay, 600ms);
16
+ transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
17
+ z-index: var(--media-caption-track-z, 1);
18
+ font-family: inherit;
19
+ }
20
+
21
+ @media (prefers-reduced-motion: reduce) {
22
+ video-player video::-webkit-media-text-track-container {
23
+ transition-duration: 50ms;
24
+ }
25
+ }
package/dist/default/define/skin-mixin.js CHANGED
@@ -1,19 +1,12 @@
1
+ import base_default from "../_virtual/inline-css_src/define/base.js";
2
+
1
3
  //#region src/define/skin-mixin.ts
2
- /**
3
- * Light DOM stylesheet that bridges CSS custom properties set by skins
4
- * to native WebKit text track pseudo-elements on the slotted `<video>`.
5
- *
6
- * `::slotted(video)::-webkit-media-text-track-container` is invalid per
7
- * CSS spec, so this bridge lives in light DOM where it can directly
8
- * target the video element's pseudo-elements.
9
- */
10
- const NATIVE_CAPTION_BRIDGE_CSS = `.media-skin>video::-webkit-media-text-track-container{transition:transform var(--media-caption-track-duration,.15s) ease-out;transition-delay:var(--media-caption-track-delay,.6s);transform:translateY(var(--media-caption-track-y,0)) scale(.98);z-index:var(--media-caption-track-z,1);font-family:inherit}@media (prefers-reduced-motion:reduce){.media-skin>video::-webkit-media-text-track-container{transition-duration:50ms}}`;
11
- const BRIDGE_ID = "media-caption-bridge";
12
- function ensureCaptionBridge() {
13
- if (document.getElementById(BRIDGE_ID)) return;
4
+ const STYLES_ID = "__media-styles";
5
+ function ensureStyles() {
6
+ if (document.getElementById(STYLES_ID)) return;
14
7
  const style = document.createElement("style");
15
- style.id = BRIDGE_ID;
16
- style.textContent = NATIVE_CAPTION_BRIDGE_CSS;
8
+ style.id = STYLES_ID;
9
+ style.textContent = base_default;
17
10
  document.head.appendChild(style);
18
11
  }
19
12
  /**
@@ -21,8 +14,8 @@ function ensureCaptionBridge() {
21
14
  * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
22
15
  * handle light DOM projection automatically.
23
16
  *
24
- * When `static styles` is set, the stylesheet is adopted into the shadow
25
- * root via `adoptedStyleSheets`.
17
+ * When `static styles` is set, the stylesheet is adopted into the
18
+ * shadow root via `adoptedStyleSheets`.
26
19
  */
27
20
  function SkinMixin(BaseClass) {
28
21
  class SkinElement extends BaseClass {
@@ -31,8 +24,7 @@ function SkinMixin(BaseClass) {
31
24
  }
32
25
  constructor(...args) {
33
26
  super(...args);
34
- this.classList.add("media-skin");
35
- ensureCaptionBridge();
27
+ ensureStyles();
36
28
  if (!this.shadowRoot) {
37
29
  const ctor = this.constructor;
38
30
  this.attachShadow(ctor.shadowRootOptions);
package/dist/default/define/skin-mixin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"skin-mixin.js","names":[],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/**\n * Light DOM stylesheet that bridges CSS custom properties set by skins\n * to native WebKit text track pseudo-elements on the slotted `<video>`.\n *\n * `::slotted(video)::-webkit-media-text-track-container` is invalid per\n * CSS spec, so this bridge lives in light DOM where it can directly\n * target the video element's pseudo-elements.\n */\nconst NATIVE_CAPTION_BRIDGE_CSS = /* css */ `\n.media-skin > video::-webkit-media-text-track-container {\n transition: transform var(--media-caption-track-duration, 150ms) ease-out;\n transition-delay: var(--media-caption-track-delay, 600ms);\n transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);\n z-index: var(--media-caption-track-z, 1);\n font-family: inherit;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .media-skin > video::-webkit-media-text-track-container {\n transition-duration: 50ms;\n }\n}\n`;\n\nconst BRIDGE_ID = 'media-caption-bridge';\n\nfunction ensureCaptionBridge(): void {\n if (document.getElementById(BRIDGE_ID)) return;\n const style = document.createElement('style');\n style.id = BRIDGE_ID;\n style.textContent = NATIVE_CAPTION_BRIDGE_CSS;\n document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the shadow\n * root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n static styles?: CSSStyleSheet;\n\n constructor(...args: any[]) {\n super(...args);\n\n this.classList.add('media-skin');\n ensureCaptionBridge();\n\n if (!this.shadowRoot) {\n const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n this.attachShadow(ctor.shadowRootOptions);\n\n if (ctor.styles) {\n this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n }\n\n if (ctor.getTemplateHTML) {\n this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n }\n }\n }\n }\n\n return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n return sheet;\n}\n"],"mappings":";;;;;;;;;AAWA,MAAM,4BAAsC;AAE5C,MAAE,YAAY;AAEd,SAAE,sBAAkC;AAClC,KAAE,SAAW,eAAe,UAAU,CAAE;CACxC,MAAK,QAAQ,SAAO,cAAA,QAAA;AACtB,OAAA,KAAA;;AAEC,UAAO,KAAQ,YAAQ,MAAQ;;;;;;;;;;AAWhC,SAAgB,UACd,WAC6C;CAC7C,MAAA,oBAA0B,UAAM;;4BAClC,EAAA,MAAA,QAAA;;EAGG,YAAU,GAAK,MAAc;AAC5B,SAAA,GAAA,KAAgB;AAEnB,QAAA,UAAA,IAAA,aAAA;AACE,wBAAwB;AAEzB,OAAA,CAAA,KAAA,YAAA;IACK,MAAA,OAAS,KAAU;AACxB,SAAW,aAAA,KAAA,kBAAA;AAEL,QAAA,KAAA,OACE,MAAC,WAAA,qBAAqC,CAAC,KAAK,OAAO;AAGzD,QAAA,KAAa,gBACX,MAAS,WAAK,YAAA,KAAA,iBAAA;;;;AAMlB,QAAM;;;AAIR,SAAe,aAAY,KAA2B;CACpD,MAAM,QAAA,IAAA,eAAA;;AAEN,QAAM"}
1
+ {"version":3,"file":"skin-mixin.js","names":["styles"],"sources":["../../../src/define/skin-mixin.ts"],"sourcesContent":["import type { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\nimport styles from './base.css?inline';\n\nconst STYLES_ID = '__media-styles';\n\nfunction ensureStyles(): void {\n if (document.getElementById(STYLES_ID)) return;\n const style = document.createElement('style');\n style.id = STYLES_ID;\n style.textContent = styles;\n document.head.appendChild(style);\n}\n\n/**\n * Mixin for skin elements that renders the template from a static\n * `getTemplateHTML` method into a shadow root. Native `<slot>` elements\n * handle light DOM projection automatically.\n *\n * When `static styles` is set, the stylesheet is adopted into the\n * shadow root via `adoptedStyleSheets`.\n */\nexport function SkinMixin<Base extends Constructor<ReactiveElement>>(\n BaseClass: Base\n): Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet } {\n class SkinElement extends (BaseClass as Constructor<ReactiveElement>) {\n static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n static styles?: CSSStyleSheet;\n\n constructor(...args: any[]) {\n super(...args);\n\n ensureStyles();\n\n if (!this.shadowRoot) {\n const ctor = this.constructor as typeof SkinElement & { getTemplateHTML?: () => string };\n this.attachShadow(ctor.shadowRootOptions);\n\n if (ctor.styles) {\n this.shadowRoot!.adoptedStyleSheets = [ctor.styles];\n }\n\n if (ctor.getTemplateHTML) {\n this.shadowRoot!.innerHTML = ctor.getTemplateHTML();\n }\n }\n }\n }\n\n return SkinElement as unknown as Base & { shadowRootOptions: ShadowRootInit; styles?: CSSStyleSheet };\n}\n\n/** Create a shared `CSSStyleSheet` from a CSS string. */\nexport function createStyles(css: string): CSSStyleSheet {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n return sheet;\n}\n"],"mappings":";;;AAIA,MAAM,YAAY;AAElB,SAAS,eAAqB;AAC5B,KAAI,SAAS,eAAe,UAAU,CAAE;CACxC,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAcA;AACpB,UAAS,KAAK,YAAY,MAAM;;;;;;;;;;AAWlC,SAAgB,UACd,WACsE;CACtE,MAAM,oBAAqB,UAA2C;;4BACzB,EAAE,MAAM,QAAQ;;EAG3D,YAAY,GAAG,MAAa;AAC1B,SAAM,GAAG,KAAK;AAEd,iBAAc;AAEd,OAAI,CAAC,KAAK,YAAY;IACpB,MAAM,OAAO,KAAK;AAClB,SAAK,aAAa,KAAK,kBAAkB;AAEzC,QAAI,KAAK,OACP,MAAK,WAAY,qBAAqB,CAAC,KAAK,OAAO;AAGrD,QAAI,KAAK,gBACP,MAAK,WAAY,YAAY,KAAK,iBAAiB;;;;AAM3D,QAAO;;;AAIT,SAAgB,aAAa,KAA4B;CACvD,MAAM,QAAQ,IAAI,eAAe;AACjC,OAAM,YAAY,IAAI;AACtB,QAAO"}
package/dist/default/define/video/minimal-skin.css CHANGED
@@ -693,62 +693,9 @@
693
693
  }
694
694
 
695
695
  /* ==========================================================================
696
- Captions
696
+ Native Caption Track
697
697
  ========================================================================== */
698
698
 
699
- .media-minimal-skin .media-captions {
700
- position: absolute;
701
- inset: auto 1rem 1.5rem 1rem;
702
- z-index: 20;
703
- font-size: 1rem;
704
- text-wrap: balance;
705
- pointer-events: none;
706
-
707
- @container media-root (width > 20rem) {
708
- font-size: 1.5rem;
709
- }
710
-
711
- @container media-root (width > 48rem) {
712
- font-size: 1.875rem;
713
- }
714
-
715
- @container media-root (width > 80rem) {
716
- font-size: 2.25rem;
717
- }
718
- }
719
-
720
- .media-minimal-skin .media-captions__container {
721
- display: flex;
722
- flex-direction: column;
723
- align-items: center;
724
- max-width: 42ch;
725
- margin: 0 auto;
726
- text-align: center;
727
- }
728
-
729
- .media-minimal-skin .media-captions__text {
730
- display: block;
731
- padding: 0.125rem 0.5rem;
732
- color: oklch(1 0 0);
733
- text-shadow:
734
- 0 0 1px oklch(0 0 0 / 0.7),
735
- 0 0 8px oklch(0 0 0 / 0.7);
736
- text-align: center;
737
- white-space: pre-wrap;
738
- line-height: 1.2;
739
-
740
- @media (prefers-contrast: more) {
741
- background: oklch(0 0 0 / 0.7);
742
- text-shadow: none;
743
- box-decoration-break: clone;
744
- }
745
-
746
- & > * {
747
- display: inline;
748
- }
749
- }
750
-
751
- /* Caption shifting styles (custom and native) */
752
699
  .media-minimal-skin {
753
700
  --media-caption-track-delay: 600ms;
754
701
  --media-caption-track-y: -0.5rem;
@@ -759,26 +706,16 @@
759
706
  }
760
707
  }
761
708
 
762
- .media-minimal-skin .media-captions,
763
709
  .media-minimal-skin video::-webkit-media-text-track-container {
764
710
  /* NOTE: The delay must account for the controls delay/duration */
765
711
  transition: transform 150ms ease-out;
766
712
  transition-delay: var(--media-caption-track-delay);
767
- }
768
-
769
- .media-minimal-skin video::-webkit-media-text-track-container {
770
713
  transform: translateY(var(--media-caption-track-y)) scale(0.98);
771
714
  z-index: 1;
772
715
  font-family: inherit;
773
716
  }
774
717
 
775
- /* When controls are visible, shift captions up to avoid overlap */
776
- .media-minimal-skin .media-controls[data-visible] ~ .media-captions {
777
- transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));
778
- }
779
-
780
718
  @media (prefers-reduced-motion: reduce) {
781
- .media-minimal-skin .media-captions,
782
719
  .media-minimal-skin video::-webkit-media-text-track-container {
783
720
  transition-duration: 50ms;
784
721
  }