From 8e2b7e4f6d20a0b4f780c34ec2670ec1f9bd25e6 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 29 Apr 2026 16:04:20 +1000 Subject: [PATCH] fix(ci): use biome to sort CSS properties (#1490) --- .vscode/settings.json | 1 + .../templates/firefox-mse-repro/index.html | 36 +++---- .../templates/spf-segment-loading/index.html | 98 ++++++++++--------- biome.json | 9 +- packages/html/src/define/background/skin.css | 4 +- packages/html/src/define/base.css | 8 +- packages/skins/src/default/css/audio.css | 16 +-- .../default/css/components/button-group.css | 2 +- .../src/default/css/components/button.css | 32 +++--- .../src/default/css/components/captions.css | 8 +- .../src/default/css/components/controls.css | 12 +-- .../src/default/css/components/error.css | 2 +- .../src/default/css/components/overlay.css | 14 +-- .../src/default/css/components/popup.css | 18 ++-- .../src/default/css/components/poster.css | 2 +- .../src/default/css/components/preview.css | 14 +-- .../skins/src/default/css/components/root.css | 24 ++--- .../src/default/css/components/slider.css | 40 ++++---- .../src/default/css/components/surface.css | 6 +- .../skins/src/default/css/components/time.css | 4 +- packages/skins/src/default/css/video.css | 52 +++++----- packages/skins/src/minimal/css/audio.css | 18 ++-- .../minimal/css/components/button-group.css | 2 +- .../src/minimal/css/components/button.css | 30 +++--- .../src/minimal/css/components/captions.css | 8 +- .../src/minimal/css/components/controls.css | 8 +- .../src/minimal/css/components/error.css | 2 +- .../src/minimal/css/components/overlay.css | 14 +-- .../src/minimal/css/components/popup.css | 26 ++--- .../src/minimal/css/components/poster.css | 2 +- .../src/minimal/css/components/preview.css | 6 +- .../skins/src/minimal/css/components/root.css | 24 ++--- .../src/minimal/css/components/slider.css | 32 +++--- .../skins/src/minimal/css/components/time.css | 8 +- packages/skins/src/minimal/css/video.css | 58 +++++------ site/astro.config.mjs | 4 +- .../html/css/BasicUsage.css | 6 +- .../react/css/BasicUsage.css | 6 +- .../captions-button/html/css/BasicUsage.css | 10 +- .../captions-button/react/css/BasicUsage.css | 10 +- .../demos/controls/html/css/BasicUsage.css | 24 ++--- .../demos/controls/react/css/BasicUsage.css | 22 ++--- .../create-player/react/css/BasicUsage.css | 8 +- .../fullscreen-button/html/css/BasicUsage.css | 14 +-- .../react/css/BasicUsage.css | 12 +-- .../html/css/BasicUsage.css | 10 +- .../demos/mute-button/html/css/BasicUsage.css | 10 +- .../mute-button/html/css/VolumeLevels.css | 10 +- .../mute-button/react/css/BasicUsage.css | 10 +- .../mute-button/react/css/VolumeLevels.css | 10 +- .../demos/pip-button/html/css/BasicUsage.css | 14 +-- .../demos/pip-button/react/css/BasicUsage.css | 12 +-- .../demos/play-button/html/css/BasicUsage.css | 10 +- .../play-button/react/css/BasicUsage.css | 10 +- .../html/css/BasicUsage.css | 10 +- .../react/css/BasicUsage.css | 10 +- .../player-controller/html/css/BasicUsage.css | 12 +-- .../demos/popover/html/css/BasicUsage.css | 16 +-- .../demos/popover/react/css/BasicUsage.css | 18 ++-- .../docs/demos/poster/html/css/BasicUsage.css | 10 +- .../demos/poster/react/css/BasicUsage.css | 10 +- .../render-element/react/css/BasicUsage.css | 14 +-- .../demos/seek-button/html/css/BasicUsage.css | 14 +-- .../seek-button/react/css/BasicUsage.css | 14 +-- .../docs/demos/slider/html/css/BasicUsage.css | 8 +- .../demos/slider/html/css/WithPreview.css | 16 +-- .../demos/slider/react/css/BasicUsage.css | 8 +- .../demos/slider/react/css/WithPreview.css | 16 +-- .../demos/thumbnail/html/css/BasicUsage.css | 2 +- .../demos/thumbnail/react/css/BasicUsage.css | 2 +- .../demos/time-slider/html/css/WithParts.css | 28 +++--- .../demos/time-slider/react/css/WithParts.css | 26 ++--- .../demos/time/html/css/CurrentDuration.css | 16 +-- .../docs/demos/time/html/css/CurrentTime.css | 10 +- .../time/html/css/CustomNegativeSign.css | 10 +- .../demos/time/html/css/CustomSeparator.css | 16 +-- .../docs/demos/time/html/css/Remaining.css | 10 +- .../demos/time/react/css/CurrentDuration.css | 16 +-- .../docs/demos/time/react/css/CurrentTime.css | 10 +- .../time/react/css/CustomNegativeSign.css | 10 +- .../demos/time/react/css/CustomSeparator.css | 16 +-- .../docs/demos/time/react/css/Remaining.css | 10 +- .../demos/tooltip/html/css/BasicUsage.css | 14 +-- .../docs/demos/tooltip/html/css/Grouping.css | 14 +-- .../demos/tooltip/react/css/BasicUsage.css | 18 ++-- .../docs/demos/tooltip/react/css/Grouping.css | 18 ++-- .../demos/use-button/react/css/BasicUsage.css | 12 +-- .../use-player/react/css/StoreAccess.css | 8 +- .../demos/use-store/react/css/StoreAccess.css | 8 +- .../volume-slider/html/css/WithParts.css | 40 ++++---- .../volume-slider/react/css/WithParts.css | 38 +++---- site/src/styles/docsearch.css | 54 +++++----- site/src/styles/globals.css | 36 +++---- site/src/styles/shiki-transformers.css | 14 +-- 94 files changed, 749 insertions(+), 735 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 00e180a4..1b35ae3d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,6 +10,7 @@ // Auto fix all Biome issues on save. "source.fixAll.biome": "always", "source.organizeImports.biome": "always", + "source.action.useSortedProperties.biome": "always", // Disable built-in organize imports to avoid conflicts with Biome. "source.organizeImports": "never" }, diff --git a/apps/sandbox/templates/firefox-mse-repro/index.html b/apps/sandbox/templates/firefox-mse-repro/index.html index d02b09a1..187f17f2 100644 --- a/apps/sandbox/templates/firefox-mse-repro/index.html +++ b/apps/sandbox/templates/firefox-mse-repro/index.html @@ -5,14 +5,14 @@ Firefox MSE Init Order Repro diff --git a/apps/sandbox/templates/spf-segment-loading/index.html b/apps/sandbox/templates/spf-segment-loading/index.html index 13221f86..9d25805f 100644 --- a/apps/sandbox/templates/spf-segment-loading/index.html +++ b/apps/sandbox/templates/spf-segment-loading/index.html @@ -6,8 +6,8 @@ Sandbox — SPF Segment Loading POC diff --git a/biome.json b/biome.json index 6ae4a78e..dc91d720 100644 --- a/biome.json +++ b/biome.json @@ -5,7 +5,10 @@ }, "assist": { "actions": { - "source": { "organizeImports": "on" } + "source": { + "organizeImports": "on", + "useSortedProperties": "on" + } } }, "formatter": { @@ -140,13 +143,17 @@ "**", "!**/.astro", "!**/.netlify", + "!**/.pnpm-store", "!**/.vercel", "!**/.turbo", "!**/.next", "!**/.opencode", "!**/.github", + "!**/build/AGENTS.md", + "!**/build/agents", "!**/dist", "!**/examples", + "!**/packages/html/cdn", "!**/styles/vjs.css", "!**/packages/*/types" ] diff --git a/packages/html/src/define/background/skin.css b/packages/html/src/define/background/skin.css index daf9d07e..f0956b9e 100644 --- a/packages/html/src/define/background/skin.css +++ b/packages/html/src/define/background/skin.css @@ -3,11 +3,11 @@ background-video-player { } background-video-skin { - display: block; + --media-object-fit: cover; position: relative; + display: block; width: 100%; height: 100%; - --media-object-fit: cover; object-fit: var(--media-object-fit); } diff --git a/packages/html/src/define/base.css b/packages/html/src/define/base.css index 2bafe872..d59f548f 100644 --- a/packages/html/src/define/base.css +++ b/packages/html/src/define/base.css @@ -18,10 +18,10 @@ video-player [slot="poster"] { } video-player video::-webkit-media-text-track-container { - transition: translate var(--media-caption-track-duration, 0) ease-out; - transition-delay: var(--media-caption-track-delay, 0); - translate: 0 var(--media-caption-track-y, 0); - scale: 0.98; z-index: 1; font-family: inherit; + scale: 0.98; + translate: 0 var(--media-caption-track-y, 0); + transition: translate var(--media-caption-track-duration, 0) ease-out; + transition-delay: var(--media-caption-track-delay, 0); } diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css index 7057f508..962601ae 100644 --- a/packages/skins/src/default/css/audio.css +++ b/packages/skins/src/default/css/audio.css @@ -62,17 +62,17 @@ inset: 0; z-index: 20; display: flex; - align-items: center; gap: 0.75rem; + align-items: center; padding-inline: 1.25rem 0.125rem; - transition-property: opacity, filter; - transition-duration: var(--media-error-dialog-transition-duration); + color: var(--media-text-color); + background-color: var(--media-surface-background-color); + border-radius: calc(infinity * 1px); + backdrop-filter: var(--media-surface-backdrop-filter); transition-delay: var(--media-error-dialog-transition-delay); transition-timing-function: ease-out; - border-radius: calc(infinity * 1px); - background-color: var(--media-surface-background-color); - backdrop-filter: var(--media-surface-backdrop-filter); - color: var(--media-text-color); + transition-duration: var(--media-error-dialog-transition-duration); + transition-property: opacity, filter; } .media-default-skin .media-error[data-starting-style] .media-error__dialog, @@ -85,8 +85,8 @@ } .media-default-skin--audio .media-error__content { - flex: 1; display: flex; + flex: 1; gap: 0.5rem; align-items: center; } diff --git a/packages/skins/src/default/css/components/button-group.css b/packages/skins/src/default/css/components/button-group.css index db840f7c..7c4007b3 100644 --- a/packages/skins/src/default/css/components/button-group.css +++ b/packages/skins/src/default/css/components/button-group.css @@ -4,8 +4,8 @@ .media-default-skin .media-button-group { display: flex; - align-items: center; gap: 0.075rem; + align-items: center; @container media-root (width > 42rem) { gap: 0.125rem; diff --git a/packages/skins/src/default/css/components/button.css b/packages/skins/src/default/css/components/button.css index 4407254b..52bab2ab 100644 --- a/packages/skins/src/default/css/components/button.css +++ b/packages/skins/src/default/css/components/button.css @@ -5,23 +5,23 @@ /* Base button */ .media-default-skin .media-button { display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - flex-shrink: 0; padding: 0.5rem 1rem; - border: none; - border-radius: calc(infinity * 1px); + text-align: center; + touch-action: manipulation; + cursor: pointer; + user-select: none; outline: 2px solid transparent; outline-offset: -2px; + border: none; + border-radius: calc(infinity * 1px); + transition-timing-function: ease-out; + transition-duration: 150ms; transition-property: background-color, outline-offset, scale; /* Fix weird jumping when clicking on the buttons in Safari. */ will-change: scale; - transition-duration: 150ms; - transition-timing-function: ease-out; - cursor: pointer; - user-select: none; - text-align: center; - touch-action: manipulation; &:focus-visible { outline-color: currentColor; @@ -33,9 +33,9 @@ } &[disabled] { + cursor: not-allowed; opacity: 0.5; filter: grayscale(1); - cursor: not-allowed; } &[data-availability="unavailable"], @@ -46,23 +46,23 @@ /* Primary button variant */ .media-default-skin .media-button--primary { - background: oklch(1 0 0); - color: oklch(0 0 0); font-weight: 500; + color: oklch(0 0 0); text-shadow: none; + background: oklch(1 0 0); } /* Subtle button variant */ .media-default-skin .media-button--subtle { - background: transparent; color: inherit; text-shadow: inherit; + background: transparent; &:hover, &:focus-visible, &[aria-expanded="true"] { - background-color: oklch(from currentColor l c h / 0.1); text-decoration: none; + background-color: oklch(from currentColor l c h / 0.1); } } @@ -70,8 +70,8 @@ .media-default-skin .media-button--icon { display: grid; width: 2.25rem; - padding: 0; aspect-ratio: 1; + padding: 0; &:active { scale: 0.9; @@ -104,8 +104,8 @@ padding: 0; &::after { - content: attr(data-rate) "\00D7"; width: 4ch; font-variant-numeric: tabular-nums; + content: attr(data-rate) "\00D7"; } } diff --git a/packages/skins/src/default/css/components/captions.css b/packages/skins/src/default/css/components/captions.css index 6976c469..3c6a6556 100644 --- a/packages/skins/src/default/css/components/captions.css +++ b/packages/skins/src/default/css/components/captions.css @@ -19,10 +19,10 @@ } .media-default-skin video::-webkit-media-text-track-container { - transition: translate var(--media-caption-track-duration) ease-out; - transition-delay: var(--media-caption-track-delay); - translate: 0 var(--media-caption-track-y); - scale: 0.98; z-index: 1; font-family: inherit; + scale: 0.98; + translate: 0 var(--media-caption-track-y); + transition: translate var(--media-caption-track-duration) ease-out; + transition-delay: var(--media-caption-track-delay); } diff --git a/packages/skins/src/default/css/components/controls.css b/packages/skins/src/default/css/components/controls.css index 7c2f9447..71e3cf4f 100644 --- a/packages/skins/src/default/css/components/controls.css +++ b/packages/skins/src/default/css/components/controls.css @@ -3,16 +3,16 @@ ========================================================================== */ .media-default-skin .media-controls { - container: media-controls / inline-size; - display: flex; - align-items: center; - column-gap: 0.075rem; - padding: 0.375rem; - border-radius: 1.5rem; --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15)); --media-controls-current-shadow-color-subtle: oklch( from var(--media-controls-current-shadow-color) l c h / calc(alpha * 0.4) ); + display: flex; + column-gap: 0.075rem; + align-items: center; + padding: 0.375rem; + container: media-controls / inline-size; text-shadow: 0 1px 0 var(--media-controls-current-shadow-color); + border-radius: 1.5rem; } diff --git a/packages/skins/src/default/css/components/error.css b/packages/skins/src/default/css/components/error.css index 9947de2d..a72ca20a 100644 --- a/packages/skins/src/default/css/components/error.css +++ b/packages/skins/src/default/css/components/error.css @@ -16,8 +16,8 @@ } .media-default-skin .media-error__description { - opacity: 0.7; overflow-wrap: anywhere; + opacity: 0.7; } .media-default-skin .media-error__actions { diff --git a/packages/skins/src/default/css/components/overlay.css b/packages/skins/src/default/css/components/overlay.css index 1fe0cf4d..4fb82213 100644 --- a/packages/skins/src/default/css/components/overlay.css +++ b/packages/skins/src/default/css/components/overlay.css @@ -5,19 +5,19 @@ .media-default-skin .media-overlay { position: absolute; inset: 0; - border-radius: inherit; - background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0)); - backdrop-filter: blur(0) saturate(1); - opacity: 0; pointer-events: none; - transition-property: opacity, backdrop-filter; - transition-duration: var(--media-controls-transition-duration); + background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0)); + border-radius: inherit; + opacity: 0; + backdrop-filter: blur(0) saturate(1); transition-timing-function: ease-out; + transition-duration: var(--media-controls-transition-duration); + transition-property: opacity, backdrop-filter; } .media-default-skin .media-error ~ .media-overlay { - transition-duration: var(--media-error-dialog-transition-duration); transition-delay: var(--media-error-dialog-transition-delay); + transition-duration: var(--media-error-dialog-transition-duration); } .media-default-skin .media-controls[data-visible] ~ .media-overlay, diff --git a/packages/skins/src/default/css/components/popup.css b/packages/skins/src/default/css/components/popup.css index 78d277c3..15e5c3ec 100644 --- a/packages/skins/src/default/css/components/popup.css +++ b/packages/skins/src/default/css/components/popup.css @@ -5,18 +5,18 @@ .media-default-skin .media-popover, .media-default-skin .media-tooltip { margin: 0; - border: 0; - color: inherit; overflow: visible; - transition-property: scale, opacity, filter; - transition-duration: var(--media-popup-transition-duration); + color: inherit; + border: 0; transition-timing-function: var(--media-popup-transition-timing-function); + transition-duration: var(--media-popup-transition-duration); + transition-property: scale, opacity, filter; &[data-starting-style], &[data-ending-style] { opacity: 0; - scale: 0.5; filter: blur(8px); + scale: 0.5; } &[data-instant] { @@ -38,15 +38,15 @@ /* Safe area between trigger and popup */ &::before { - content: ""; position: absolute; pointer-events: inherit; + content: ""; } &[data-side="top"]::before, &[data-side="bottom"]::before { - width: 100%; inset-inline: 0; + width: 100%; } &[data-side="top"]::before { top: 100%; @@ -57,8 +57,8 @@ &[data-side="left"]::before, &[data-side="right"]::before { - height: 100%; inset-block: 0; + height: 100%; } &[data-side="left"]::before { left: 100%; @@ -89,9 +89,9 @@ .media-default-skin .media-tooltip { padding: 0.25rem 0.625rem; - border-radius: calc(infinity * 1px); font-size: 0.75rem; white-space: nowrap; + border-radius: calc(infinity * 1px); &[data-side="top"]::before, &[data-side="bottom"]::before { diff --git a/packages/skins/src/default/css/components/poster.css b/packages/skins/src/default/css/components/poster.css index c2a4349a..85dd9e8a 100644 --- a/packages/skins/src/default/css/components/poster.css +++ b/packages/skins/src/default/css/components/poster.css @@ -8,8 +8,8 @@ inset: 0; width: 100%; height: 100%; - transition: opacity 0.25s; pointer-events: none; + transition: opacity 0.25s; } .media-default-skin media-poster:not([data-visible]), .media-default-skin > img:not([data-visible]) { diff --git a/packages/skins/src/default/css/components/preview.css b/packages/skins/src/default/css/components/preview.css index 0b7220c3..25b13792 100644 --- a/packages/skins/src/default/css/components/preview.css +++ b/packages/skins/src/default/css/components/preview.css @@ -2,29 +2,29 @@ Media preview ========================================================================== */ .media-default-skin .media-preview { + pointer-events: none; background-color: oklch(0 0 0 / 0.9); border-radius: 0.75rem; - pointer-events: none; & .media-preview__thumbnail { - display: block; position: relative; - border-radius: inherit; + display: block; overflow: clip; + border-radius: inherit; &::after { - content: ""; position: absolute; inset: 0; - border-radius: inherit; + content: ""; background-image: linear-gradient(to top, oklch(0 0 0 / 0.8), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0)); + border-radius: inherit; } } & .media-preview__time { position: absolute; - bottom: 0.5rem; inset-inline: 0; + bottom: 0.5rem; text-align: center; } @@ -36,8 +36,8 @@ position: absolute; top: 50%; left: 50%; - translate: -50% -50%; opacity: 0; + translate: -50% -50%; } & .media-preview__thumbnail, diff --git a/packages/skins/src/default/css/components/root.css b/packages/skins/src/default/css/components/root.css index 3ec7677a..f04a8871 100644 --- a/packages/skins/src/default/css/components/root.css +++ b/packages/skins/src/default/css/components/root.css @@ -3,29 +3,29 @@ ========================================================================== */ .media-default-skin { - container: media-root / inline-size; position: relative; - isolation: isolate; display: block; - height: 100%; width: 100%; - border-radius: var(--media-border-radius, 2rem); - outline: 2px solid transparent; - outline-offset: 2px; - - &:focus-visible { - outline-color: currentColor; - } + height: 100%; + container: media-root / inline-size; font-family: Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif; - line-height: 1.5; - letter-spacing: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; + line-height: 1.5; + letter-spacing: normal; + outline: 2px solid transparent; + outline-offset: 2px; + border-radius: var(--media-border-radius, 2rem); + isolation: isolate; + + &:focus-visible { + outline-color: currentColor; + } & > * { font-size: 0.75rem; /* 12px at 100% font size */ diff --git a/packages/skins/src/default/css/components/slider.css b/packages/skins/src/default/css/components/slider.css index 5d2a8dd0..a2a7e696 100644 --- a/packages/skins/src/default/css/components/slider.css +++ b/packages/skins/src/default/css/components/slider.css @@ -5,16 +5,16 @@ .media-default-skin .media-slider { position: relative; display: flex; + flex: 1; align-items: center; justify-content: center; - flex: 1; - border-radius: calc(infinity * 1px); - outline: none; cursor: pointer; + outline: none; + border-radius: calc(infinity * 1px); &[data-orientation="horizontal"] { - min-width: 5rem; width: 100%; + min-width: 5rem; height: 2rem; } @@ -27,10 +27,10 @@ /* Track */ .media-default-skin .media-slider__track { position: relative; - isolation: isolate; overflow: hidden; - border-radius: inherit; user-select: none; + border-radius: inherit; + isolation: isolate; &[data-orientation="horizontal"] { width: 100%; @@ -45,11 +45,13 @@ /* Thumb */ .media-default-skin .media-slider__thumb { - z-index: 10; position: absolute; - translate: -50% -50%; + z-index: 10; width: 0.625rem; height: 0.625rem; + user-select: none; + outline: 4px solid transparent; + outline-offset: -4px; background-color: currentColor; border-radius: calc(infinity * 1px); box-shadow: @@ -57,12 +59,10 @@ 0 1px 3px 0 oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15); opacity: 0; - transition-property: opacity, height, width, outline-offset; - transition-duration: 150ms; + translate: -50% -50%; transition-timing-function: ease-out; - user-select: none; - outline: 4px solid transparent; - outline-offset: -4px; + transition-duration: 150ms; + transition-property: opacity, height, width, outline-offset; &[data-orientation="horizontal"] { top: 50%; @@ -70,8 +70,8 @@ } &[data-orientation="vertical"] { - left: 50%; top: calc(100% - var(--media-slider-fill)); + left: 50%; } &:hover, @@ -81,19 +81,19 @@ } &::after { - content: ""; position: absolute; inset: -4px; + content: ""; border-radius: inherit; box-shadow: 0 0 0 2px oklch(1 0 0); - transition-property: opacity, scale; - transition-duration: 150ms; transition-timing-function: ease-out; + transition-duration: 150ms; + transition-property: opacity, scale; } &:not(:focus-visible)::after { - scale: 0.5; opacity: 0; + scale: 0.5; } } @@ -113,8 +113,8 @@ .media-default-skin .media-slider__buffer, .media-default-skin .media-slider__fill { position: absolute; - border-radius: inherit; pointer-events: none; + border-radius: inherit; } .media-default-skin .media-slider__buffer[data-orientation="horizontal"], @@ -132,8 +132,8 @@ /* Buffer */ .media-default-skin .media-slider__buffer { background-color: oklch(from currentColor l c h / 0.2); - transition-duration: 0.25s; transition-timing-function: ease-out; + transition-duration: 0.25s; &[data-orientation="horizontal"] { width: var(--media-slider-buffer); diff --git a/packages/skins/src/default/css/components/surface.css b/packages/skins/src/default/css/components/surface.css index 2e2ae90b..173c7c24 100644 --- a/packages/skins/src/default/css/components/surface.css +++ b/packages/skins/src/default/css/components/surface.css @@ -4,20 +4,20 @@ .media-default-skin .media-surface { background-color: var(--media-surface-background-color); - backdrop-filter: var(--media-surface-backdrop-filter); box-shadow: 0 0 0 1px var(--media-surface-outer-border-color), 0 1px 3px 0 var(--media-surface-shadow-color), 0 1px 2px -1px var(--media-surface-shadow-color); + backdrop-filter: var(--media-surface-backdrop-filter); /* Inner border ring */ &::after { - content: ""; position: absolute; inset: 0; z-index: 10; + pointer-events: none; + content: ""; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color); - pointer-events: none; } } diff --git a/packages/skins/src/default/css/components/time.css b/packages/skins/src/default/css/components/time.css index c205c34b..fc0f7645 100644 --- a/packages/skins/src/default/css/components/time.css +++ b/packages/skins/src/default/css/components/time.css @@ -3,12 +3,12 @@ ========================================================================== */ .media-default-skin .media-time-controls { - container: media-time-controls / inline-size; display: flex; - align-items: center; flex: 1; gap: 0.75rem; + align-items: center; padding-inline: 0.5rem; + container: media-time-controls / inline-size; } .media-default-skin .media-time { diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css index 165b538e..78e784ef 100644 --- a/packages/skins/src/default/css/video.css +++ b/packages/skins/src/default/css/video.css @@ -22,7 +22,6 @@ ========================================================================== */ .media-default-skin--video { - background: oklch(0 0 0); --media-spring-transition: linear( 0, 0.034 1.5%, @@ -50,6 +49,7 @@ --media-popup-transition-timing-function: ease-out; --media-tooltip-side-offset: 0.75rem; --media-popover-side-offset: 0.5rem; + background: oklch(0 0 0); @media (prefers-reduced-motion: reduce) { --media-error-dialog-transition-duration: 50ms; @@ -83,13 +83,13 @@ /* Inner border ring */ &::after { - content: ""; position: absolute; inset: 0; z-index: 10; + pointer-events: none; + content: ""; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--media-border-color); - pointer-events: none; } &:fullscreen { @@ -116,13 +116,13 @@ gap: 0.75rem; max-width: 18rem; padding: 0.75rem; - border-radius: 1.75rem; color: oklch(1 0 0); text-shadow: 0 1px 0 oklch(0 0 0 / 0.25); - transition-property: opacity, scale; - transition-duration: var(--media-error-dialog-transition-duration); + border-radius: 1.75rem; transition-delay: var(--media-error-dialog-transition-delay); transition-timing-function: var(--media-error-dialog-transition-timing-function); + transition-duration: var(--media-error-dialog-transition-duration); + transition-property: opacity, scale; } .media-default-skin--video .media-error[data-starting-style] .media-error__dialog, @@ -151,29 +151,29 @@ ========================================================================== */ .media-default-skin--video .media-controls { - flex-wrap: wrap; position: absolute; - bottom: 0.5rem; inset-inline: 0.5rem; + bottom: 0.5rem; z-index: 10; + flex-wrap: wrap; color: var(--media-color-primary, oklch(1 0 0)); - transition-duration: var(--media-controls-transition-duration); - transition-timing-function: var(--media-controls-transition-timing-function); transform-origin: bottom; + transition-timing-function: var(--media-controls-transition-timing-function); + transition-duration: var(--media-controls-transition-duration); @media (pointer: fine) { - will-change: scale, filter, opacity; transition-property: scale, filter, opacity; + will-change: scale, filter, opacity; } @media (pointer: coarse) { - will-change: scale, opacity; transition-property: scale, opacity; + will-change: scale, opacity; } &:not([data-visible]) { - opacity: 0; pointer-events: none; + opacity: 0; scale: 0.9; @media (pointer: fine) and (prefers-reduced-motion: no-preference) { @@ -186,8 +186,8 @@ } & .media-time-controls { - order: -1; flex: 0 0 100%; + order: -1; padding-inline: 0.625rem; } @@ -202,15 +202,15 @@ } @container media-root (width > 42rem) { - bottom: 0.75rem; inset-inline: 0.75rem; + bottom: 0.75rem; flex-wrap: nowrap; column-gap: 0.125rem; padding: 0.25rem; & .media-time-controls { - order: unset; flex: 1; + order: unset; } & .media-button-group:first-child, @@ -248,21 +248,21 @@ --media-preview-inset: calc((100cqi - 100%) / 2); position: absolute; + bottom: calc(100% + 1.2rem); left: clamp( calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding) - var(--media-preview-inset)), var(--media-slider-pointer), calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset)) ); - bottom: calc(100% + 1.2rem); - translate: -50%; - opacity: 0; - scale: 0.8; - filter: blur(8px); - transition-property: scale, opacity, filter; - transition-duration: 150ms; - transition-timing-function: ease-out; - transform-origin: bottom; pointer-events: none; + opacity: 0; + filter: blur(8px); + transform-origin: bottom; + scale: 0.8; + translate: -50%; + transition-timing-function: ease-out; + transition-duration: 150ms; + transition-property: scale, opacity, filter; & .media-preview__thumbnail { max-width: var(--media-preview-max-width); @@ -274,6 +274,6 @@ } .media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) { opacity: 1; - scale: 1; filter: blur(0); + scale: 1; } diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css index 36c30128..6ba07682 100644 --- a/packages/skins/src/minimal/css/audio.css +++ b/packages/skins/src/minimal/css/audio.css @@ -61,15 +61,15 @@ inset: 0; z-index: 20; display: flex; - align-items: center; gap: 1rem; + align-items: center; padding-inline: 1.25rem 0.5rem; - transition-property: opacity, filter, scale; - transition-duration: var(--media-error-dialog-transition-duration); + background-color: oklch(from var(--media-controls-background-color) l c h / 1); + border-radius: calc(infinity * 1px); transition-delay: var(--media-error-dialog-transition-delay); transition-timing-function: ease-out; - border-radius: calc(infinity * 1px); - background-color: oklch(from var(--media-controls-background-color) l c h / 1); + transition-duration: var(--media-error-dialog-transition-duration); + transition-property: opacity, filter, scale; } .media-minimal-skin--audio .media-error[data-starting-style] .media-error__dialog, @@ -83,8 +83,8 @@ } .media-minimal-skin--audio .media-error__content { - flex: 1; display: flex; + flex: 1; gap: 0.5rem; align-items: center; } @@ -94,11 +94,11 @@ ========================================================================== */ .media-minimal-skin--audio .media-controls { - padding: 0.375rem; gap: 0.5rem; + padding: 0.375rem; color: var(--media-controls-text-color); - box-shadow: 0 0 0 1px var(--media-controls-border-color); border-radius: var(--media-border-radius, 1rem); + box-shadow: 0 0 0 1px var(--media-controls-border-color); } /* ========================================================================== @@ -106,6 +106,6 @@ ========================================================================== */ .media-minimal-skin--audio .media-popover--volume { - background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%); padding: 0 0 0 4rem; + background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%); } diff --git a/packages/skins/src/minimal/css/components/button-group.css b/packages/skins/src/minimal/css/components/button-group.css index 54131548..fcf4068b 100644 --- a/packages/skins/src/minimal/css/components/button-group.css +++ b/packages/skins/src/minimal/css/components/button-group.css @@ -4,8 +4,8 @@ .media-minimal-skin .media-button-group { display: flex; - align-items: center; gap: 0.075rem; + align-items: center; @container media-root (width > 42rem) { gap: 0.125rem; diff --git a/packages/skins/src/minimal/css/components/button.css b/packages/skins/src/minimal/css/components/button.css index ea451665..2711ac77 100644 --- a/packages/skins/src/minimal/css/components/button.css +++ b/packages/skins/src/minimal/css/components/button.css @@ -5,23 +5,23 @@ /* Base button */ .media-minimal-skin .media-button { display: flex; + flex-shrink: 0; align-items: center; justify-content: center; - flex-shrink: 0; padding: 0.5rem 1rem; - border: none; - border-radius: 0.5rem; + text-align: center; + touch-action: manipulation; + cursor: pointer; + user-select: none; outline: 2px solid transparent; outline-offset: -2px; + border: none; + border-radius: 0.5rem; + transition-timing-function: ease-out; + transition-duration: 150ms; transition-property: background-color, outline-offset, scale; /* Fix weird jumping when clicking on the buttons in Safari. */ will-change: scale; - transition-duration: 150ms; - transition-timing-function: ease-out; - cursor: pointer; - user-select: none; - text-align: center; - touch-action: manipulation; &:focus-visible { outline-color: currentColor; @@ -33,9 +33,9 @@ } &[disabled] { + cursor: not-allowed; opacity: 0.5; filter: grayscale(1); - cursor: not-allowed; } &[data-availability="unavailable"], @@ -55,17 +55,17 @@ /* Primary button variant */ .media-minimal-skin .media-button--primary { - background: oklch(1 0 0); - color: oklch(0 0 0); font-weight: 500; + color: oklch(0 0 0); text-shadow: none; + background: oklch(1 0 0); } /* Subtle button variant */ .media-minimal-skin .media-button--subtle { - background: transparent; color: inherit; text-shadow: inherit; + background: transparent; &:hover, &:focus-visible, @@ -78,8 +78,8 @@ .media-minimal-skin .media-button--icon { display: grid; width: 2.375rem; - padding: 0; aspect-ratio: 1; + padding: 0; &:active { scale: 0.9; @@ -112,8 +112,8 @@ padding: 0; &::after { - content: attr(data-rate) "\00D7"; width: 4ch; font-variant-numeric: tabular-nums; + content: attr(data-rate) "\00D7"; } } diff --git a/packages/skins/src/minimal/css/components/captions.css b/packages/skins/src/minimal/css/components/captions.css index 32ffdcb8..e3e54f48 100644 --- a/packages/skins/src/minimal/css/components/captions.css +++ b/packages/skins/src/minimal/css/components/captions.css @@ -19,10 +19,10 @@ } .media-minimal-skin video::-webkit-media-text-track-container { - transition: translate var(--media-caption-track-duration) ease-out; - transition-delay: var(--media-caption-track-delay); - translate: 0 var(--media-caption-track-y); - scale: 0.98; z-index: 1; font-family: inherit; + scale: 0.98; + translate: 0 var(--media-caption-track-y); + transition: translate var(--media-caption-track-duration) ease-out; + transition-delay: var(--media-caption-track-delay); } diff --git a/packages/skins/src/minimal/css/components/controls.css b/packages/skins/src/minimal/css/components/controls.css index be025e6f..897e607f 100644 --- a/packages/skins/src/minimal/css/components/controls.css +++ b/packages/skins/src/minimal/css/components/controls.css @@ -3,15 +3,15 @@ ========================================================================== */ .media-minimal-skin .media-controls { - container: media-controls / inline-size; - display: flex; - align-items: center; --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15)); --media-controls-current-shadow-color-subtle: oklch( from var(--media-controls-current-shadow-color) l c h / calc(alpha * 0.4) ); + display: flex; + align-items: center; + container: media-controls / inline-size; + text-shadow: 0 1px 0 var(--media-controls-current-shadow-color); background-color: var(--media-controls-background-color); backdrop-filter: var(--media-controls-backdrop-filter); - text-shadow: 0 1px 0 var(--media-controls-current-shadow-color); } diff --git a/packages/skins/src/minimal/css/components/error.css b/packages/skins/src/minimal/css/components/error.css index 78212d06..f54389b9 100644 --- a/packages/skins/src/minimal/css/components/error.css +++ b/packages/skins/src/minimal/css/components/error.css @@ -12,8 +12,8 @@ } .media-minimal-skin .media-error__description { - opacity: 0.7; overflow-wrap: anywhere; + opacity: 0.7; } .media-minimal-skin .media-error__actions { diff --git a/packages/skins/src/minimal/css/components/overlay.css b/packages/skins/src/minimal/css/components/overlay.css index 555465b2..0dd4d058 100644 --- a/packages/skins/src/minimal/css/components/overlay.css +++ b/packages/skins/src/minimal/css/components/overlay.css @@ -5,19 +5,19 @@ .media-minimal-skin .media-overlay { position: absolute; inset: 0; - border-radius: inherit; - background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0)); - backdrop-filter: blur(0) saturate(1); - opacity: 0; pointer-events: none; - transition-property: opacity, backdrop-filter; - transition-duration: var(--media-controls-transition-duration); + background-image: linear-gradient(to top, oklch(0 0 0 / 0.7), oklch(0 0 0 / 0.5) 7.5rem, oklch(0 0 0 / 0)); + border-radius: inherit; + opacity: 0; + backdrop-filter: blur(0) saturate(1); transition-timing-function: ease-out; + transition-duration: var(--media-controls-transition-duration); + transition-property: opacity, backdrop-filter; } .media-minimal-skin .media-error ~ .media-overlay { - transition-duration: var(--media-error-dialog-transition-duration); transition-delay: var(--media-error-dialog-transition-delay); + transition-duration: var(--media-error-dialog-transition-duration); } .media-minimal-skin .media-controls[data-visible] ~ .media-overlay, diff --git a/packages/skins/src/minimal/css/components/popup.css b/packages/skins/src/minimal/css/components/popup.css index 4ec16cfa..75fabcaf 100644 --- a/packages/skins/src/minimal/css/components/popup.css +++ b/packages/skins/src/minimal/css/components/popup.css @@ -5,18 +5,18 @@ .media-minimal-skin .media-popover, .media-minimal-skin .media-tooltip { margin: 0; - border: 0; - color: inherit; overflow: visible; - transition-property: scale, opacity, filter; - transition-duration: var(--media-popup-transition-duration); + color: inherit; + border: 0; transition-timing-function: var(--media-popup-transition-timing-function); + transition-duration: var(--media-popup-transition-duration); + transition-property: scale, opacity, filter; &[data-starting-style], &[data-ending-style] { opacity: 0; - scale: 0.5; filter: blur(8px); + scale: 0.5; } &[data-instant] { @@ -38,15 +38,15 @@ /* Safe area between trigger and popup */ &::before { - content: ""; position: absolute; pointer-events: inherit; + content: ""; } &[data-side="top"]::before, &[data-side="bottom"]::before { - width: 100%; inset-inline: 0; + width: 100%; } &[data-side="top"]::before { top: 100%; @@ -57,8 +57,8 @@ &[data-side="left"]::before, &[data-side="right"]::before { - height: 100%; inset-block: 0; + height: 100%; } &[data-side="left"]::before { left: 100%; @@ -81,16 +81,16 @@ .media-minimal-skin .media-tooltip { padding: 0.25rem 0.5rem; - border-radius: 0.5rem; + font-size: 0.75rem; /* 12px at 100% font size */ + color: var(--media-tooltip-text-color); + white-space: nowrap; background-color: var(--media-tooltip-background-color); - backdrop-filter: var(--media-tooltip-backdrop-filter); + border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--media-tooltip-border-color), 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1); - color: var(--media-tooltip-text-color); - font-size: 0.75rem; /* 12px at 100% font size */ - white-space: nowrap; + backdrop-filter: var(--media-tooltip-backdrop-filter); &[data-side="top"]::before, &[data-side="bottom"]::before { diff --git a/packages/skins/src/minimal/css/components/poster.css b/packages/skins/src/minimal/css/components/poster.css index 44b371e7..f425f25b 100644 --- a/packages/skins/src/minimal/css/components/poster.css +++ b/packages/skins/src/minimal/css/components/poster.css @@ -8,8 +8,8 @@ inset: 0; width: 100%; height: 100%; - transition: opacity 0.25s; pointer-events: none; + transition: opacity 0.25s; } .media-minimal-skin media-poster:not([data-visible]), .media-minimal-skin > img:not([data-visible]) { diff --git a/packages/skins/src/minimal/css/components/preview.css b/packages/skins/src/minimal/css/components/preview.css index 679a3b4d..f4652f44 100644 --- a/packages/skins/src/minimal/css/components/preview.css +++ b/packages/skins/src/minimal/css/components/preview.css @@ -6,8 +6,8 @@ & .media-preview__thumbnail-wrapper { position: relative; - border-radius: 0.5rem; background-color: oklch(0 0 0 / 0.9); + border-radius: 0.5rem; } & .media-preview__thumbnail { display: block; @@ -16,8 +16,8 @@ & .media-preview__time { display: block; - text-align: center; margin-top: 0.5rem; + text-align: center; } & .media-overlay { @@ -28,8 +28,8 @@ position: absolute; top: 50%; left: 50%; - translate: -50% -50%; opacity: 0; + translate: -50% -50%; } & .media-preview__thumbnail, diff --git a/packages/skins/src/minimal/css/components/root.css b/packages/skins/src/minimal/css/components/root.css index c4260229..b3675e7d 100644 --- a/packages/skins/src/minimal/css/components/root.css +++ b/packages/skins/src/minimal/css/components/root.css @@ -3,29 +3,29 @@ ========================================================================== */ .media-minimal-skin { - container: media-root / inline-size; position: relative; - isolation: isolate; display: block; - height: 100%; width: 100%; - border-radius: var(--media-border-radius, 0.75rem); - outline: 2px solid transparent; - outline-offset: 2px; - - &:focus-visible { - outline-color: currentColor; - } + height: 100%; + container: media-root / inline-size; font-family: Inter Variable, Inter, ui-sans-serif, system-ui, sans-serif; - line-height: 1.5; - letter-spacing: normal; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; + line-height: 1.5; + letter-spacing: normal; + outline: 2px solid transparent; + outline-offset: 2px; + border-radius: var(--media-border-radius, 0.75rem); + isolation: isolate; + + &:focus-visible { + outline-color: currentColor; + } & > * { font-size: 0.75rem; /* 12px at 100% font size */ diff --git a/packages/skins/src/minimal/css/components/slider.css b/packages/skins/src/minimal/css/components/slider.css index 639c9e04..876187d6 100644 --- a/packages/skins/src/minimal/css/components/slider.css +++ b/packages/skins/src/minimal/css/components/slider.css @@ -5,16 +5,16 @@ .media-minimal-skin .media-slider { position: relative; display: flex; + flex: 1; align-items: center; justify-content: center; - flex: 1; - border-radius: calc(infinity * 1px); - outline: none; cursor: pointer; + outline: none; + border-radius: calc(infinity * 1px); &[data-orientation="horizontal"] { - min-width: 5rem; width: 100%; + min-width: 5rem; height: 2rem; } @@ -27,11 +27,11 @@ /* Track */ .media-minimal-skin .media-slider__track { position: relative; - isolation: isolate; overflow: hidden; - border-radius: inherit; user-select: none; background-color: oklch(from currentColor l c h / 0.2); + border-radius: inherit; + isolation: isolate; &[data-orientation="horizontal"] { width: 100%; @@ -47,10 +47,12 @@ /* Thumb */ .media-minimal-skin .media-slider__thumb { position: absolute; - translate: -50% -50%; z-index: 10; width: 0.75rem; height: 0.75rem; + user-select: none; + outline: 2px solid transparent; + outline-offset: -2px; background-color: currentColor; border-radius: calc(infinity * 1px); box-shadow: @@ -58,14 +60,12 @@ 0 1px 3px 0 oklch(0 0 0 / 0.15), 0 1px 2px -1px oklch(0 0 0 / 0.15); opacity: 0; - scale: 0.7; transform-origin: center; - transition-property: opacity, scale, outline-offset; - transition-duration: 150ms; + scale: 0.7; + translate: -50% -50%; transition-timing-function: ease-out; - user-select: none; - outline: 2px solid transparent; - outline-offset: -2px; + transition-duration: 150ms; + transition-property: opacity, scale, outline-offset; &[data-orientation="horizontal"] { top: 50%; @@ -73,8 +73,8 @@ } &[data-orientation="vertical"] { - left: 50%; top: calc(100% - var(--media-slider-fill)); + left: 50%; } &:focus-visible { @@ -94,8 +94,8 @@ .media-minimal-skin .media-slider__buffer, .media-minimal-skin .media-slider__fill { position: absolute; - border-radius: inherit; pointer-events: none; + border-radius: inherit; } .media-minimal-skin .media-slider__buffer[data-orientation="horizontal"], @@ -113,8 +113,8 @@ /* Buffer */ .media-minimal-skin .media-slider__buffer { background-color: oklch(from currentColor l c h / 0.2); - transition-duration: 0.25s; transition-timing-function: ease-out; + transition-duration: 0.25s; &[data-orientation="horizontal"] { width: var(--media-slider-buffer); diff --git a/packages/skins/src/minimal/css/components/time.css b/packages/skins/src/minimal/css/components/time.css index 650cb6b6..0dc1663d 100644 --- a/packages/skins/src/minimal/css/components/time.css +++ b/packages/skins/src/minimal/css/components/time.css @@ -3,18 +3,18 @@ ========================================================================== */ .media-minimal-skin .media-time-controls { - container: media-time-controls / inline-size; display: flex; - flex-direction: row-reverse; - align-items: center; flex: 1; + flex-direction: row-reverse; gap: 0.75rem; + align-items: center; + container: media-time-controls / inline-size; } .media-minimal-skin .media-time-group { display: flex; - align-items: center; gap: 0.25rem; + align-items: center; } .media-minimal-skin .media-time { diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css index 6b144b5d..4021bdc7 100644 --- a/packages/skins/src/minimal/css/video.css +++ b/packages/skins/src/minimal/css/video.css @@ -21,8 +21,6 @@ ========================================================================== */ .media-minimal-skin--video { - overflow: clip; - background: oklch(0 0 0); --media-border-color: oklch(0 0 0 / 0.15); --media-video-border-radius: var(--media-border-radius, 0.75rem); --media-controls-background-color: transparent; @@ -39,6 +37,8 @@ --media-tooltip-text-color: currentColor; --media-tooltip-side-offset: 0.5rem; --media-popover-side-offset: 1.5rem; + overflow: clip; + background: oklch(0 0 0); @media (prefers-reduced-motion: reduce) { --media-error-dialog-transition-duration: 50ms; @@ -76,13 +76,13 @@ /* Inner border ring */ &::after { - content: ""; position: absolute; inset: 0; z-index: 10; + pointer-events: none; + content: ""; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--media-border-color); - pointer-events: none; } /* Fullscreen */ @@ -114,11 +114,11 @@ padding: 1rem; color: oklch(1 0 0); text-shadow: 0 1px 0 oklch(0 0 0 / 0.5); - transition-property: opacity, scale; - transition-duration: var(--media-error-dialog-transition-duration); + pointer-events: auto; transition-delay: var(--media-error-dialog-transition-delay); transition-timing-function: var(--media-error-dialog-transition-timing-function); - pointer-events: auto; + transition-duration: var(--media-error-dialog-transition-duration); + transition-property: opacity, scale; } .media-minimal-skin--video .media-error[data-starting-style] .media-error__dialog, @@ -150,31 +150,31 @@ ========================================================================== */ .media-minimal-skin--video .media-controls { - padding: 0.25rem; - column-gap: 0.5rem; - flex-wrap: wrap; position: absolute; - bottom: 0.25rem; inset-inline: 0.25rem; + bottom: 0.25rem; z-index: 10; + flex-wrap: wrap; + column-gap: 0.5rem; + padding: 0.25rem; color: oklch(1 0 0); border-radius: 0.75rem; - transition-duration: var(--media-controls-transition-duration); transition-timing-function: var(--media-controls-transition-timing-function); + transition-duration: var(--media-controls-transition-duration); @media (pointer: fine) { - will-change: translate, filter, opacity; transition-property: translate, filter, opacity; + will-change: translate, filter, opacity; } @media (pointer: coarse) { - will-change: translate, opacity; transition-property: translate, opacity; + will-change: translate, opacity; } &:not([data-visible]) { - opacity: 0; pointer-events: none; + opacity: 0; translate: 0 100%; @media (pointer: fine) { @@ -182,14 +182,14 @@ } @media (prefers-reduced-motion: reduce) { - translate: 0 0; filter: blur(0); + translate: 0 0; } } & .media-time-controls { - order: -1; flex: 0 0 100%; + order: -1; padding-inline: 0.625rem; } @@ -204,13 +204,13 @@ } @container media-root (width > 42rem) { - flex-wrap: nowrap; - bottom: 0.5rem; inset-inline: 0.5rem; + bottom: 0.5rem; + flex-wrap: nowrap; & .media-time-controls { - order: unset; flex: 1; + order: unset; } & .media-button-group:first-child, @@ -238,8 +238,8 @@ ========================================================================== */ .media-minimal-skin--video .media-popover--volume { - background: transparent; padding-block: 0.75rem; + background: transparent; border-radius: 0.75rem; @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) { @@ -261,20 +261,20 @@ --media-preview-inset: calc(100cqi - 100%); position: absolute; + bottom: 100%; left: clamp( calc(var(--media-preview-max-width) / 2 + var(--media-preview-padding)), var(--media-slider-pointer), calc(100% - var(--media-preview-max-width) / 2 - var(--media-preview-padding) + var(--media-preview-inset)) ); - bottom: 100%; - translate: -50%; opacity: 0; - scale: 0.8; filter: blur(8px); - transition-property: scale, opacity, filter; - transition-duration: 150ms; - transition-timing-function: ease-out; transform-origin: bottom; + scale: 0.8; + translate: -50%; + transition-timing-function: ease-out; + transition-duration: 150ms; + transition-property: scale, opacity, filter; @container media-root (width > 42rem) { bottom: calc(100% + 0.25rem); @@ -285,9 +285,9 @@ position: relative; &::after { - content: ""; position: absolute; inset: 0; + content: ""; border-radius: inherit; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05), @@ -306,6 +306,6 @@ } .media-minimal-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) { opacity: 1; - scale: 1; filter: blur(0); + scale: 1; } diff --git a/site/astro.config.mjs b/site/astro.config.mjs index 30478bea..2a476f7c 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -165,7 +165,9 @@ export default defineConfig({ // components, and (2) SVGR runs SVGO for automatic SVG optimization. plugins: [tailwindcss(), svgr()], optimizeDeps: { - exclude: ['@videojs/react', '@videojs/html'], + // @resvg/resvg-js loads a native .node binding for the server-only OG + // image route, so Vite's dev optimizer must leave it external. + exclude: ['@videojs/react', '@videojs/html', '@resvg/resvg-js'], }, resolve: { dedupe: ['react', 'react-dom'], diff --git a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.css b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.css index 86cedf88..cc76ee2c 100644 --- a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.css @@ -1,28 +1,28 @@ .video-player { + position: relative; display: flex; width: 100%; height: 100%; - position: relative; } .media-buffering-indicator { position: absolute; inset: 0; + z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; - z-index: 30; } .spinner { + display: none; width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: buffering-spin 0.8s linear infinite; - display: none; } .media-buffering-indicator[data-visible] .spinner { diff --git a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.css b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.css index db439cab..adfb05ee 100644 --- a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.css @@ -1,28 +1,28 @@ .media-container { + position: relative; display: flex; width: 100%; height: 100%; - position: relative; } .media-buffering-indicator { position: absolute; inset: 0; + z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none; - z-index: 30; } .spinner { + display: none; width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: buffering-spin 0.8s linear infinite; - display: none; } .media-buffering-indicator[data-visible] .spinner { diff --git a/site/src/components/docs/demos/captions-button/html/css/BasicUsage.css b/site/src/components/docs/demos/captions-button/html/css/BasicUsage.css index 9bbbe3f2..9a7d2f18 100644 --- a/site/src/components/docs/demos/captions-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/captions-button/html/css/BasicUsage.css @@ -7,17 +7,17 @@ } .media-captions-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-captions-button .active { diff --git a/site/src/components/docs/demos/captions-button/react/css/BasicUsage.css b/site/src/components/docs/demos/captions-button/react/css/BasicUsage.css index 534eb05e..9cf0be45 100644 --- a/site/src/components/docs/demos/captions-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/captions-button/react/css/BasicUsage.css @@ -7,15 +7,15 @@ } .media-captions-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/controls/html/css/BasicUsage.css b/site/src/components/docs/demos/controls/html/css/BasicUsage.css index ce6adcd1..b6ed99e8 100644 --- a/site/src/components/docs/demos/controls/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/controls/html/css/BasicUsage.css @@ -1,6 +1,6 @@ .video-player { - display: block; position: relative; + display: block; } .video-player video { @@ -28,16 +28,16 @@ .time { display: inline-flex; - align-items: center; gap: 4px; + align-items: center; padding-block: 8px; padding-inline: 16px; - border-radius: 9999px; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.25); font-size: 14px; + color: black; + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 9999px; + backdrop-filter: blur(10px); } .controls-group { @@ -49,14 +49,14 @@ .button { padding-block: 8px; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.25); - border-radius: 9999px; padding-inline: 16px; font-size: 14px; + color: black; cursor: pointer; + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 9999px; + backdrop-filter: blur(10px); } .button .paused, diff --git a/site/src/components/docs/demos/controls/react/css/BasicUsage.css b/site/src/components/docs/demos/controls/react/css/BasicUsage.css index 1d82bc2b..3bbce7aa 100644 --- a/site/src/components/docs/demos/controls/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/controls/react/css/BasicUsage.css @@ -27,16 +27,16 @@ .time { display: inline-flex; - align-items: center; gap: 4px; + align-items: center; padding-block: 8px; padding-inline: 16px; - border-radius: 9999px; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.25); font-size: 14px; + color: black; + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 9999px; + backdrop-filter: blur(10px); } .controls-group { @@ -48,12 +48,12 @@ .button { padding-block: 8px; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.25); - border-radius: 9999px; padding-inline: 16px; font-size: 14px; + color: black; cursor: pointer; + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/create-player/react/css/BasicUsage.css b/site/src/components/docs/demos/create-player/react/css/BasicUsage.css index 5ba43e4a..5ba5d8d8 100644 --- a/site/src/components/docs/demos/create-player/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/create-player/react/css/BasicUsage.css @@ -14,11 +14,11 @@ .button { padding-block: 8px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.css b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.css index fe67d5f1..46cbe44f 100644 --- a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.css @@ -1,6 +1,6 @@ .video-player { - display: block; position: relative; + display: block; } .video-player video { @@ -8,17 +8,17 @@ } .media-fullscreen-button { - padding-block: 8px; position: absolute; - bottom: 10px; right: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + bottom: 10px; + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-fullscreen-button .fullscreen { diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css index b3eaa2b6..4be70e98 100644 --- a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css @@ -7,15 +7,15 @@ } .media-fullscreen-button { - padding-block: 8px; position: absolute; - bottom: 10px; right: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + bottom: 10px; + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.css b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.css index c8bc20eb..7ddea713 100644 --- a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.css @@ -7,17 +7,17 @@ } .media-play-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-play-button .paused { diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.css b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.css index 05c7105b..f12272c0 100644 --- a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.css @@ -7,17 +7,17 @@ } .media-mute-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-mute-button .muted { diff --git a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.css b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.css index cbf6e935..ad40eec4 100644 --- a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.css +++ b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.css @@ -7,17 +7,17 @@ } .media-mute-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-mute-button .level-off, diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css index 6c27776e..3aaa0410 100644 --- a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css @@ -7,15 +7,15 @@ } .media-mute-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.css b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.css index 6c27776e..3aaa0410 100644 --- a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.css +++ b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.css @@ -7,15 +7,15 @@ } .media-mute-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.css b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.css index 61c35cdf..f2ed00b3 100644 --- a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.css @@ -1,6 +1,6 @@ .video-player { - display: block; position: relative; + display: block; } .video-player video { @@ -8,17 +8,17 @@ } .media-pip-button { - padding-block: 8px; position: absolute; - bottom: 10px; right: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + bottom: 10px; + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-pip-button .pip { diff --git a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.css b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.css index b4ca8943..81a3b069 100644 --- a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.css @@ -7,15 +7,15 @@ } .media-pip-button { - padding-block: 8px; position: absolute; - bottom: 10px; right: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + bottom: 10px; + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.css b/site/src/components/docs/demos/play-button/html/css/BasicUsage.css index cd3b73f5..3f85b3a1 100644 --- a/site/src/components/docs/demos/play-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.css @@ -7,17 +7,17 @@ } .media-play-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-play-button .paused { diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.css b/site/src/components/docs/demos/play-button/react/css/BasicUsage.css index 3fca56b2..c4e1bb76 100644 --- a/site/src/components/docs/demos/play-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.css @@ -7,15 +7,15 @@ } .media-play-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.css b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.css index fb0212c2..4fd23413 100644 --- a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.css @@ -7,17 +7,17 @@ } .media-playback-rate-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-playback-rate-button::after { diff --git a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.css b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.css index d742811d..8d750614 100644 --- a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.css @@ -7,15 +7,15 @@ } .media-playback-rate-button { - padding-block: 8px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); + padding-block: 8px; + padding-inline: 20px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - padding-inline: 20px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.css b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.css index 47d99320..d11c559c 100644 --- a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.css @@ -9,10 +9,10 @@ .panel { display: flex; gap: 16px; + align-items: center; padding: 12px; background: rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(0, 0, 0, 0.1); - align-items: center; } .actions { @@ -22,15 +22,15 @@ .actions button { padding: 4px 12px; - border-radius: 6px; - border: 1px solid #ccc; - background: white; - cursor: pointer; font-size: 0.8125rem; + cursor: pointer; + background: white; + border: 1px solid #ccc; + border-radius: 6px; } .state { font-size: 0.8125rem; - color: #374151; font-variant-numeric: tabular-nums; + color: #374151; } diff --git a/site/src/components/docs/demos/popover/html/css/BasicUsage.css b/site/src/components/docs/demos/popover/html/css/BasicUsage.css index 78d4c94a..8f218fe4 100644 --- a/site/src/components/docs/demos/popover/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/popover/html/css/BasicUsage.css @@ -1,7 +1,7 @@ .video-player, .video-player media-container { - display: block; position: relative; + display: block; } .video-player video { @@ -16,20 +16,20 @@ .trigger { padding: 6px 16px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-popover { - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(10px); - color: white; - border-radius: 8px; padding: 12px 16px; font-size: 14px; + color: white; white-space: nowrap; + background: rgba(0, 0, 0, 0.85); + border-radius: 8px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/popover/react/css/BasicUsage.css b/site/src/components/docs/demos/popover/react/css/BasicUsage.css index 630aef9f..7796a427 100644 --- a/site/src/components/docs/demos/popover/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/popover/react/css/BasicUsage.css @@ -14,26 +14,26 @@ .trigger { padding: 6px 16px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - cursor: pointer; + backdrop-filter: blur(10px); } .popup { /* Reset UA [popover] defaults */ - margin: 0; - border: 0; --media-popover-side-offset: 8px; + padding: 12px 16px; + margin: 0; + font-size: 14px; + color: white; background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(10px); - color: white; + border: 0; border-radius: 8px; - padding: 12px 16px; - font-size: 14px; + backdrop-filter: blur(10px); } .arrow { diff --git a/site/src/components/docs/demos/poster/html/css/BasicUsage.css b/site/src/components/docs/demos/poster/html/css/BasicUsage.css index ca665196..50ad06c1 100644 --- a/site/src/components/docs/demos/poster/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/poster/html/css/BasicUsage.css @@ -1,6 +1,6 @@ .video-player { - display: block; position: relative; + display: block; } .video-player video { @@ -29,13 +29,13 @@ bottom: 10px; left: 10px; padding-block: 8px; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(10px); + padding-inline: 16px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 9999px; - padding-inline: 16px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-play-button .paused, diff --git a/site/src/components/docs/demos/poster/react/css/BasicUsage.css b/site/src/components/docs/demos/poster/react/css/BasicUsage.css index 2e631436..134ca931 100644 --- a/site/src/components/docs/demos/poster/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/poster/react/css/BasicUsage.css @@ -11,8 +11,8 @@ inset: 0; width: 100%; height: 100%; - object-fit: cover; pointer-events: none; + object-fit: cover; transition: opacity 0.25s; } @@ -25,11 +25,11 @@ bottom: 10px; left: 10px; padding-block: 8px; - background: rgba(255, 255, 255, 0.75); - backdrop-filter: blur(10px); + padding-inline: 16px; color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 9999px; - padding-inline: 16px; - cursor: pointer; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/render-element/react/css/BasicUsage.css b/site/src/components/docs/demos/render-element/react/css/BasicUsage.css index 4e5bab13..37188f5e 100644 --- a/site/src/components/docs/demos/render-element/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/render-element/react/css/BasicUsage.css @@ -8,29 +8,29 @@ .toggle { align-self: flex-start; padding: 6px 16px; - border-radius: 6px; - border: 1px solid #ccc; - background: #f5f5f5; cursor: pointer; + background: #f5f5f5; + border: 1px solid #ccc; + border-radius: 6px; } .tags { display: flex; - gap: 12px; flex-wrap: wrap; + gap: 12px; } .tag { display: inline-flex; align-items: center; padding: 6px 12px; - border-radius: 9999px; - background: #e5e7eb; color: #374151; + background: #e5e7eb; + border-radius: 9999px; transition: all 0.2s ease; } .tag--active { - background: #3b82f6; color: white; + background: #3b82f6; } diff --git a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.css b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.css index 8381e5d1..bc51f468 100644 --- a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.css @@ -7,23 +7,23 @@ } .buttons { - display: flex; - gap: 8px; position: absolute; bottom: 10px; left: 10px; + display: flex; + gap: 8px; } .media-seek-button { padding-block: 8px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-inline: 20px; + color: black; white-space: nowrap; cursor: pointer; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } .media-seek-button .backward { diff --git a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.css b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.css index e4754f61..bbc91c95 100644 --- a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.css @@ -7,21 +7,21 @@ } .buttons { - display: flex; - gap: 8px; position: absolute; bottom: 10px; left: 10px; + display: flex; + gap: 8px; } .media-seek-button { padding-block: 8px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-inline: 20px; + color: black; white-space: nowrap; cursor: pointer; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/slider/html/css/BasicUsage.css b/site/src/components/docs/demos/slider/html/css/BasicUsage.css index 139670a2..b0d78823 100644 --- a/site/src/components/docs/demos/slider/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/slider/html/css/BasicUsage.css @@ -7,17 +7,17 @@ .media-slider { position: relative; - width: 100%; display: flex; align-items: center; + width: 100%; height: 20px; cursor: pointer; } .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; @@ -32,8 +32,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -45,9 +45,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-slider[data-interactive] .media-slider-thumb { diff --git a/site/src/components/docs/demos/slider/html/css/WithPreview.css b/site/src/components/docs/demos/slider/html/css/WithPreview.css index 1ded2e25..74a4d1db 100644 --- a/site/src/components/docs/demos/slider/html/css/WithPreview.css +++ b/site/src/components/docs/demos/slider/html/css/WithPreview.css @@ -7,17 +7,17 @@ .media-slider { position: relative; - width: 100%; display: flex; align-items: center; + width: 100%; height: 20px; cursor: pointer; } .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; @@ -32,8 +32,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -45,9 +45,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-slider[data-interactive] .media-slider-thumb { @@ -72,10 +72,10 @@ } .media-slider-value { - background: rgba(0, 0, 0, 0.8); - color: white; - font-size: 12px; padding: 2px 6px; - border-radius: 4px; + font-size: 12px; + color: white; white-space: nowrap; + background: rgba(0, 0, 0, 0.8); + border-radius: 4px; } diff --git a/site/src/components/docs/demos/slider/react/css/BasicUsage.css b/site/src/components/docs/demos/slider/react/css/BasicUsage.css index 139670a2..b0d78823 100644 --- a/site/src/components/docs/demos/slider/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/slider/react/css/BasicUsage.css @@ -7,17 +7,17 @@ .media-slider { position: relative; - width: 100%; display: flex; align-items: center; + width: 100%; height: 20px; cursor: pointer; } .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; @@ -32,8 +32,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -45,9 +45,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-slider[data-interactive] .media-slider-thumb { diff --git a/site/src/components/docs/demos/slider/react/css/WithPreview.css b/site/src/components/docs/demos/slider/react/css/WithPreview.css index 1ded2e25..74a4d1db 100644 --- a/site/src/components/docs/demos/slider/react/css/WithPreview.css +++ b/site/src/components/docs/demos/slider/react/css/WithPreview.css @@ -7,17 +7,17 @@ .media-slider { position: relative; - width: 100%; display: flex; align-items: center; + width: 100%; height: 20px; cursor: pointer; } .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; @@ -32,8 +32,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -45,9 +45,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-slider[data-interactive] .media-slider-thumb { @@ -72,10 +72,10 @@ } .media-slider-value { - background: rgba(0, 0, 0, 0.8); - color: white; - font-size: 12px; padding: 2px 6px; - border-radius: 4px; + font-size: 12px; + color: white; white-space: nowrap; + background: rgba(0, 0, 0, 0.8); + border-radius: 4px; } diff --git a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.css b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.css index 76ad5220..1599cb0a 100644 --- a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.css @@ -8,8 +8,8 @@ position: absolute; width: 1px; height: 1px; - opacity: 0; pointer-events: none; + opacity: 0; } .media-thumbnail { diff --git a/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.css b/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.css index e515237a..30f3c07d 100644 --- a/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.css @@ -7,8 +7,8 @@ position: absolute; width: 1px; height: 1px; - opacity: 0; pointer-events: none; + opacity: 0; } .media-thumbnail { diff --git a/site/src/components/docs/demos/time-slider/html/css/WithParts.css b/site/src/components/docs/demos/time-slider/html/css/WithParts.css index 7dccfd63..796fe0ca 100644 --- a/site/src/components/docs/demos/time-slider/html/css/WithParts.css +++ b/site/src/components/docs/demos/time-slider/html/css/WithParts.css @@ -1,7 +1,7 @@ .video-player, .video-player media-container { - display: block; position: relative; + display: block; } .video-player video { @@ -10,9 +10,9 @@ .media-time-slider { position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; display: flex; align-items: center; height: 20px; @@ -21,8 +21,8 @@ .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; @@ -37,8 +37,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-buffer); + height: 100%; background: rgba(255, 255, 255, 0.4); border-radius: 9999px; } @@ -47,8 +47,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -60,9 +60,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-time-slider[data-interactive] .media-slider-thumb { @@ -80,18 +80,18 @@ .media-slider-value { position: absolute; - left: var(--media-slider-pointer); bottom: 100%; - transform: translateX(-50%); - margin-bottom: 6px; - background: rgba(0, 0, 0, 0.8); - color: white; - font-size: 12px; + left: var(--media-slider-pointer); padding: 2px 6px; - border-radius: 4px; - pointer-events: none; + margin-bottom: 6px; + font-size: 12px; + color: white; white-space: nowrap; + pointer-events: none; + background: rgba(0, 0, 0, 0.8); + border-radius: 4px; opacity: 0; + transform: translateX(-50%); transition: opacity 150ms ease; } diff --git a/site/src/components/docs/demos/time-slider/react/css/WithParts.css b/site/src/components/docs/demos/time-slider/react/css/WithParts.css index 58e72575..14bf285f 100644 --- a/site/src/components/docs/demos/time-slider/react/css/WithParts.css +++ b/site/src/components/docs/demos/time-slider/react/css/WithParts.css @@ -8,9 +8,9 @@ .media-time-slider { position: absolute; + right: 0; bottom: 0; left: 0; - right: 0; display: flex; align-items: center; height: 20px; @@ -19,8 +19,8 @@ .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; @@ -35,8 +35,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-buffer); + height: 100%; background: rgba(255, 255, 255, 0.4); border-radius: 9999px; } @@ -45,8 +45,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -58,9 +58,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-time-slider[data-interactive] .media-slider-thumb { @@ -78,18 +78,18 @@ .media-slider-value { position: absolute; - left: var(--media-slider-pointer); bottom: 100%; - transform: translateX(-50%); - margin-bottom: 6px; - background: rgba(0, 0, 0, 0.8); - color: white; - font-size: 12px; + left: var(--media-slider-pointer); padding: 2px 6px; - border-radius: 4px; - pointer-events: none; + margin-bottom: 6px; + font-size: 12px; + color: white; white-space: nowrap; + pointer-events: none; + background: rgba(0, 0, 0, 0.8); + border-radius: 4px; opacity: 0; + transform: translateX(-50%); transition: opacity 150ms ease; } diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.css b/site/src/components/docs/demos/time/html/css/CurrentDuration.css index b235eefb..0872c0b8 100644 --- a/site/src/components/docs/demos/time/html/css/CurrentDuration.css +++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.css @@ -7,18 +7,18 @@ } .time-group { - display: flex; - align-items: center; - gap: 4px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; + display: flex; + gap: 4px; + align-items: center; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.css b/site/src/components/docs/demos/time/html/css/CurrentTime.css index 3f9c07dd..a005de15 100644 --- a/site/src/components/docs/demos/time/html/css/CurrentTime.css +++ b/site/src/components/docs/demos/time/html/css/CurrentTime.css @@ -10,12 +10,12 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css index 3f9c07dd..a005de15 100644 --- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css +++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.css @@ -10,12 +10,12 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.css b/site/src/components/docs/demos/time/html/css/CustomSeparator.css index b235eefb..0872c0b8 100644 --- a/site/src/components/docs/demos/time/html/css/CustomSeparator.css +++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.css @@ -7,18 +7,18 @@ } .time-group { - display: flex; - align-items: center; - gap: 4px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; + display: flex; + gap: 4px; + align-items: center; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/html/css/Remaining.css b/site/src/components/docs/demos/time/html/css/Remaining.css index 3f9c07dd..a005de15 100644 --- a/site/src/components/docs/demos/time/html/css/Remaining.css +++ b/site/src/components/docs/demos/time/html/css/Remaining.css @@ -10,12 +10,12 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.css b/site/src/components/docs/demos/time/react/css/CurrentDuration.css index fd09ef16..34a51965 100644 --- a/site/src/components/docs/demos/time/react/css/CurrentDuration.css +++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.css @@ -7,18 +7,18 @@ } .time-group { - display: flex; - align-items: center; - gap: 4px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; + display: flex; + gap: 4px; + align-items: center; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.css b/site/src/components/docs/demos/time/react/css/CurrentTime.css index 60bf1a85..70884478 100644 --- a/site/src/components/docs/demos/time/react/css/CurrentTime.css +++ b/site/src/components/docs/demos/time/react/css/CurrentTime.css @@ -10,12 +10,12 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css index 60bf1a85..70884478 100644 --- a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css +++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css @@ -10,12 +10,12 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.css b/site/src/components/docs/demos/time/react/css/CustomSeparator.css index fd09ef16..34a51965 100644 --- a/site/src/components/docs/demos/time/react/css/CustomSeparator.css +++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.css @@ -7,18 +7,18 @@ } .time-group { - display: flex; - align-items: center; - gap: 4px; position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; + display: flex; + gap: 4px; + align-items: center; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/time/react/css/Remaining.css b/site/src/components/docs/demos/time/react/css/Remaining.css index 60bf1a85..70884478 100644 --- a/site/src/components/docs/demos/time/react/css/Remaining.css +++ b/site/src/components/docs/demos/time/react/css/Remaining.css @@ -10,12 +10,12 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; font-variant-numeric: tabular-nums; + color: black; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/tooltip/html/css/BasicUsage.css b/site/src/components/docs/demos/tooltip/html/css/BasicUsage.css index a04a9b4d..818d3e5d 100644 --- a/site/src/components/docs/demos/tooltip/html/css/BasicUsage.css +++ b/site/src/components/docs/demos/tooltip/html/css/BasicUsage.css @@ -7,22 +7,22 @@ .trigger { padding: 6px 16px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-tooltip { --media-tooltip-side-offset: 8px; - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(10px); - color: white; - border-radius: 6px; padding: 4px 10px; font-size: 13px; + color: white; white-space: nowrap; pointer-events: none; + background: rgba(0, 0, 0, 0.85); + border-radius: 6px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/tooltip/html/css/Grouping.css b/site/src/components/docs/demos/tooltip/html/css/Grouping.css index 523b3cbe..de76574e 100644 --- a/site/src/components/docs/demos/tooltip/html/css/Grouping.css +++ b/site/src/components/docs/demos/tooltip/html/css/Grouping.css @@ -7,21 +7,21 @@ .trigger { padding: 6px 16px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); color: black; - border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); } .media-tooltip { --media-tooltip-side-offset: 8px; - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(10px); - color: white; - border-radius: 6px; padding: 4px 10px; font-size: 13px; + color: white; white-space: nowrap; pointer-events: none; + background: rgba(0, 0, 0, 0.85); + border-radius: 6px; + backdrop-filter: blur(10px); } diff --git a/site/src/components/docs/demos/tooltip/react/css/BasicUsage.css b/site/src/components/docs/demos/tooltip/react/css/BasicUsage.css index 345218da..5ae6c7ad 100644 --- a/site/src/components/docs/demos/tooltip/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/tooltip/react/css/BasicUsage.css @@ -7,26 +7,26 @@ .trigger { padding: 6px 16px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); color: black; + cursor: pointer; + background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 9999px; - cursor: pointer; + backdrop-filter: blur(10px); } .media-tooltip { --media-tooltip-side-offset: 8px; - margin: 0; - border: 0; - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(10px); - color: white; - border-radius: 6px; padding: 4px 10px; + margin: 0; font-size: 13px; + color: white; white-space: nowrap; pointer-events: none; + background: rgba(0, 0, 0, 0.85); + border: 0; + border-radius: 6px; + backdrop-filter: blur(10px); } .arrow { diff --git a/site/src/components/docs/demos/tooltip/react/css/Grouping.css b/site/src/components/docs/demos/tooltip/react/css/Grouping.css index 85f2be3e..9a327a5a 100644 --- a/site/src/components/docs/demos/tooltip/react/css/Grouping.css +++ b/site/src/components/docs/demos/tooltip/react/css/Grouping.css @@ -7,25 +7,25 @@ .trigger { padding: 6px 16px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); color: black; - border: 1px solid rgba(255, 255, 255, 0.3); cursor: pointer; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(10px); } .media-tooltip { --media-tooltip-side-offset: 8px; - margin: 0; - border: 0; - background: rgba(0, 0, 0, 0.85); - backdrop-filter: blur(10px); - color: white; - border-radius: 6px; padding: 4px 10px; + margin: 0; font-size: 13px; + color: white; white-space: nowrap; pointer-events: none; + background: rgba(0, 0, 0, 0.85); + border: 0; + border-radius: 6px; + backdrop-filter: blur(10px); } .arrow { diff --git a/site/src/components/docs/demos/use-button/react/css/BasicUsage.css b/site/src/components/docs/demos/use-button/react/css/BasicUsage.css index 653daef8..a60a08c8 100644 --- a/site/src/components/docs/demos/use-button/react/css/BasicUsage.css +++ b/site/src/components/docs/demos/use-button/react/css/BasicUsage.css @@ -8,23 +8,23 @@ .button { align-self: flex-start; padding: 8px 20px; - border-radius: 6px; - border: 1px solid #ccc; - background: #f5f5f5; - cursor: pointer; font-variant-numeric: tabular-nums; + cursor: pointer; + background: #f5f5f5; + border: 1px solid #ccc; + border-radius: 6px; transition: opacity 0.2s; } .button[disabled] { - opacity: 0.5; cursor: not-allowed; + opacity: 0.5; } .label { display: flex; - align-items: center; gap: 6px; + align-items: center; font-size: 0.875rem; color: #6b7280; } diff --git a/site/src/components/docs/demos/use-player/react/css/StoreAccess.css b/site/src/components/docs/demos/use-player/react/css/StoreAccess.css index c652d72f..1dd452aa 100644 --- a/site/src/components/docs/demos/use-player/react/css/StoreAccess.css +++ b/site/src/components/docs/demos/use-player/react/css/StoreAccess.css @@ -16,9 +16,9 @@ .controls button { padding: 4px 12px; - border-radius: 6px; - border: 1px solid #ccc; - background: white; - cursor: pointer; font-size: 0.8125rem; + cursor: pointer; + background: white; + border: 1px solid #ccc; + border-radius: 6px; } diff --git a/site/src/components/docs/demos/use-store/react/css/StoreAccess.css b/site/src/components/docs/demos/use-store/react/css/StoreAccess.css index c652d72f..1dd452aa 100644 --- a/site/src/components/docs/demos/use-store/react/css/StoreAccess.css +++ b/site/src/components/docs/demos/use-store/react/css/StoreAccess.css @@ -16,9 +16,9 @@ .controls button { padding: 4px 12px; - border-radius: 6px; - border: 1px solid #ccc; - background: white; - cursor: pointer; font-size: 0.8125rem; + cursor: pointer; + background: white; + border: 1px solid #ccc; + border-radius: 6px; } diff --git a/site/src/components/docs/demos/volume-slider/html/css/WithParts.css b/site/src/components/docs/demos/volume-slider/html/css/WithParts.css index 0c12fbb1..d333239e 100644 --- a/site/src/components/docs/demos/volume-slider/html/css/WithParts.css +++ b/site/src/components/docs/demos/volume-slider/html/css/WithParts.css @@ -1,7 +1,7 @@ .video-player, .video-player media-container { - display: block; position: relative; + display: block; } .video-player video { @@ -12,14 +12,14 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; + color: black; cursor: pointer; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } .media-mute-button .muted { @@ -37,23 +37,23 @@ .media-volume-slider { position: absolute; - bottom: 10px; right: 10px; - width: 100px; + bottom: 10px; display: flex; align-items: center; + width: 100px; height: 20px; cursor: pointer; } .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); border-radius: 9999px; + backdrop-filter: blur(10px); transition: height 150ms ease; } @@ -65,8 +65,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -78,9 +78,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-volume-slider[data-interactive] .media-slider-thumb { @@ -93,18 +93,18 @@ .media-slider-value { position: absolute; - left: var(--media-slider-pointer); bottom: 100%; - transform: translateX(-50%); - margin-bottom: 6px; - background: rgba(0, 0, 0, 0.8); - color: white; - font-size: 12px; + left: var(--media-slider-pointer); padding: 2px 6px; - border-radius: 4px; - pointer-events: none; + margin-bottom: 6px; + font-size: 12px; + color: white; white-space: nowrap; + pointer-events: none; + background: rgba(0, 0, 0, 0.8); + border-radius: 4px; opacity: 0; + transform: translateX(-50%); transition: opacity 150ms ease; } diff --git a/site/src/components/docs/demos/volume-slider/react/css/WithParts.css b/site/src/components/docs/demos/volume-slider/react/css/WithParts.css index a76b602d..e02b1bcf 100644 --- a/site/src/components/docs/demos/volume-slider/react/css/WithParts.css +++ b/site/src/components/docs/demos/volume-slider/react/css/WithParts.css @@ -10,35 +10,35 @@ position: absolute; bottom: 10px; left: 10px; - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(10px); - color: black; - border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 9999px; padding-block: 8px; padding-inline: 20px; + color: black; cursor: pointer; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 9999px; + backdrop-filter: blur(10px); } .media-volume-slider { position: absolute; - bottom: 10px; right: 10px; - width: 100px; + bottom: 10px; display: flex; align-items: center; + width: 100px; height: 20px; cursor: pointer; } .media-slider-track { position: absolute; - left: 0; right: 0; + left: 0; height: 4px; background: rgba(255, 255, 255, 0.3); - backdrop-filter: blur(10px); border-radius: 9999px; + backdrop-filter: blur(10px); transition: height 150ms ease; } @@ -50,8 +50,8 @@ position: absolute; top: 0; left: 0; - height: 100%; width: var(--media-slider-fill); + height: 100%; background: white; border-radius: 9999px; } @@ -63,9 +63,9 @@ height: 14px; background: white; border-radius: 50%; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transform: translateX(-50%) scale(0); transition: transform 150ms ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .media-volume-slider[data-interactive] .media-slider-thumb { @@ -78,18 +78,18 @@ .media-slider-value { position: absolute; - left: var(--media-slider-pointer); bottom: 100%; - transform: translateX(-50%); - margin-bottom: 6px; - background: rgba(0, 0, 0, 0.8); - color: white; - font-size: 12px; + left: var(--media-slider-pointer); padding: 2px 6px; - border-radius: 4px; - pointer-events: none; + margin-bottom: 6px; + font-size: 12px; + color: white; white-space: nowrap; + pointer-events: none; + background: rgba(0, 0, 0, 0.8); + border-radius: 4px; opacity: 0; + transform: translateX(-50%); transition: opacity 150ms ease; } diff --git a/site/src/styles/docsearch.css b/site/src/styles/docsearch.css index 971893dd..713de8e6 100644 --- a/site/src/styles/docsearch.css +++ b/site/src/styles/docsearch.css @@ -75,14 +75,14 @@ /* ── Trigger button — match rounded-pill navbar style ── */ .DocSearch-Button { box-sizing: border-box; - border-radius: 9999px; - border: none; - padding: 0 calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2); height: auto; min-height: calc(var(--spacing) * 6); + padding: 0 calc(var(--spacing) * 2); margin: 0; font-family: inherit; + border: none; + border-radius: 9999px; } .DocSearch-Button:hover, @@ -112,8 +112,8 @@ .DocSearch-Button-Keys { display: none; - min-width: 0; gap: 0; + min-width: 0; } .DocSearch-Button-Keys:has(.DocSearch-Button-Key--ctrl) { @@ -121,25 +121,25 @@ } .DocSearch-Button .DocSearch-Button-Key { + width: auto; + height: auto; + padding: 0; + margin: 0; + font-family: var(--font-display); + font-size: var(--text-h4); + font-weight: var(--font-weight-bold); + line-height: var(--text-h4--line-height); + color: inherit; + letter-spacing: var(--text-h4--letter-spacing); background: none; border: none; box-shadow: none !important; - color: inherit; - width: auto; - height: auto; - font-family: var(--font-display); - font-size: var(--text-h4); - line-height: var(--text-h4--line-height); - letter-spacing: var(--text-h4--letter-spacing); - font-weight: var(--font-weight-bold); - padding: 0; - margin: 0; } @media (width >= 40rem) { .DocSearch-Button { - border: 1px solid var(--color-faded-black); width: calc(var(--spacing) * 16.5); + border: 1px solid var(--color-faded-black); } .DocSearch-Button:has(.DocSearch-Button-Key--ctrl) { @@ -185,8 +185,8 @@ } .DocSearch-Footer { - border-radius: 0 0 var(--radius-xs) var(--radius-xs); border-block-start: none; + border-radius: 0 0 var(--radius-xs) var(--radius-xs); } .DocSearch-Dropdown + .DocSearch-Footer { @@ -201,35 +201,35 @@ .DocSearch-Modal { font-family: var(--font-sans); font-size: var(--text-p2); + font-weight: var(--text-p2--font-weight); line-height: var(--text-p2--line-height); letter-spacing: var(--text-p2--letter-spacing); - font-weight: var(--text-p2--font-weight); text-underline-offset: 0.25em; } .DocSearch-Input { - letter-spacing: var(--tracking-tight); font-weight: var(--text-p1--font-weight); + letter-spacing: var(--tracking-tight); } .DocSearch-Button-Key, .DocSearch-Escape-Key { font-family: var(--font-mono); font-size: var(--text-code); - line-height: var(--text-code--line-height); - letter-spacing: var(--text-code--letter-spacing); font-weight: var(--text-code--font-weight); font-variant-ligatures: none; + line-height: var(--text-code--line-height); + letter-spacing: var(--text-code--letter-spacing); text-underline-offset: 0.125em; } .DocSearch-Hit-source { - font-size: var(--text-p2); - line-height: var(--text-p2--line-height); - letter-spacing: var(--text-p2--letter-spacing); - font-weight: var(--font-weight-bold); padding-block-start: calc(var(--spacing) * 4); padding-block-end: calc(var(--spacing) * 2); + font-size: var(--text-p2); + font-weight: var(--font-weight-bold); + line-height: var(--text-p2--line-height); + letter-spacing: var(--text-p2--letter-spacing); } .DocSearch-Hit-title { @@ -240,18 +240,18 @@ .DocSearch-Hit-path { font-size: var(--text-p3); + font-weight: var(--text-p3--font-weight); line-height: var(--text-p3--line-height); letter-spacing: var(--text-p3--letter-spacing); - font-weight: var(--text-p3--font-weight); } .DocSearch-Label, .DocSearch-Help, .DocSearch-NoResults-Help { font-size: var(--text-p3); + font-weight: var(--text-p3--font-weight); line-height: var(--text-p3--line-height); letter-spacing: var(--text-p3--letter-spacing); - font-weight: var(--text-p3--font-weight); } .DocSearch-Clear { @@ -277,6 +277,6 @@ /* ── Text match highlight — keep readable in all states ── */ .DocSearch-Hit mark, .DocSearch-Hit[aria-selected="true"] mark { - text-decoration-color: var(--color-gold); color: currentColor; + text-decoration-color: var(--color-gold); } diff --git a/site/src/styles/globals.css b/site/src/styles/globals.css index 19387247..b5cf019f 100644 --- a/site/src/styles/globals.css +++ b/site/src/styles/globals.css @@ -71,6 +71,7 @@ } /* theme inline tells tailwind to reference the value of these properties */ +/* biome-ignore assist/source/useSortedProperties: Tailwind theme namespace resets are order-sensitive. */ @theme inline { --font-*: initial; /* --font-instrument-sans and --font-ibm-plex-mono are defined in Base.astro */ @@ -80,6 +81,7 @@ --font-display: "Eurostile LT Pro Extended", "Eurostile LT Pro Extended Fallback", sans-serif; } +/* biome-ignore assist/source/useSortedProperties: Tailwind theme namespace resets are order-sensitive. */ @theme { --color-*: initial; @@ -212,8 +214,8 @@ } .font-mono { - text-underline-offset: 0.125em; font-variant-ligatures: none; + text-underline-offset: 0.125em; } [id] { @@ -227,8 +229,8 @@ } mark { - background-color: var(--color-bright-yellow); color: var(--color-faded-black); + background-color: var(--color-bright-yellow); } .dark * { @@ -246,8 +248,8 @@ } @utility data-bar { - height: 2.5rem; width: var(--data-bar-width, 100%); + height: 2.5rem; background-image: url("/data-bar-white.svg"); background-repeat: repeat-x; background-size: auto 100%; @@ -281,19 +283,19 @@ } @utility built-bg-gray { + padding: 8px 10px 0 10px; background-image: url("/built-bg-horizontal-line-gray.svg"); background-repeat: repeat-y; - background-size: 100% 9px; background-clip: content-box; - padding: 8px 10px 0 10px; + background-size: 100% 9px; } @utility built-bg-black { + padding: 8px 10px 0 10px; background-image: url("/built-bg-horizontal-line-black.svg"); background-repeat: repeat-y; - background-size: 100% 9px; background-clip: content-box; - padding: 8px 10px 0 10px; + background-size: 100% 9px; } @utility text-stroke-faded-black { @@ -320,33 +322,33 @@ position: relative; &::before { + position: absolute; top: 0; left: 0%; + z-index: 1000; width: 100%; height: 100%; + pointer-events: none; content: ""; - position: absolute; border: 10px solid; border-color: inherit; - z-index: 1000; - pointer-events: none; } } @utility grid-separators { - border-right: 1px solid; - border-bottom: 1px solid; border-color: inherit; + border-style: solid; + border-width: 0 1px 1px 0; &::after { - content: ""; position: absolute; - bottom: -5px; right: -5px; - height: 10px; - width: 10px; - background: inherit; + bottom: -5px; z-index: 10; + width: 10px; + height: 10px; + content: ""; + background: inherit; } } diff --git a/site/src/styles/shiki-transformers.css b/site/src/styles/shiki-transformers.css index 56791b6f..3061c687 100644 --- a/site/src/styles/shiki-transformers.css +++ b/site/src/styles/shiki-transformers.css @@ -6,8 +6,8 @@ .astro-code .line.focused { position: relative; width: calc(100% + var(--spacing) * 12); - margin-inline: calc(var(--spacing) * -6); padding-inline: calc(var(--spacing) * 6); + margin-inline: calc(var(--spacing) * -6); } /* Diff: added lines */ @@ -18,19 +18,19 @@ .astro-code .line.diff.add::before, .astro-code .line.diff.remove::before { position: absolute; - font-weight: bold; - left: 0; top: 0; bottom: 0; - width: calc(var(--spacing) * 6); + left: 0; display: flex; align-items: center; justify-content: center; + width: calc(var(--spacing) * 6); + font-weight: bold; } .astro-code .line.diff.add::before { - content: "+"; color: rgba(184, 187, 31, 1); + content: "+"; } /* Diff: removed lines */ @@ -39,15 +39,15 @@ } .astro-code .line.diff.remove::before { - content: "-"; color: rgba(251, 73, 52, 1); + content: "-"; } /* Word highlight */ .astro-code .highlighted-word { + padding-inline: 0.2em; background-color: var(--color-soot); border-bottom: 1px solid var(--color-manila-dark); - padding-inline: 0.2em; } :where(.dark, .dark *) .astro-code .highlighted-word {