@m4l/gclick 0.32.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/VideoPlayer/VideoPlayer.d.ts +7 -6
- package/components/VideoPlayer/VideoPlayer.d.ts.map +1 -1
- package/components/VideoPlayer/VideoPlayer.styles.d.ts +4 -5
- package/components/VideoPlayer/VideoPlayer.styles.d.ts.map +1 -1
- package/components/VideoPlayer/VideoPlayer.styles.js +27 -28
- package/components/VideoPlayer/VideojsDefaultSkin.styles.d.ts.map +1 -1
- package/components/VideoPlayer/VideojsDefaultSkin.styles.js +330 -397
- package/components/VideoPlayer/{VideojsMinimalSkin.styles.d.ts → VideojsNeutralSkin.styles.d.ts} +2 -2
- package/components/VideoPlayer/VideojsNeutralSkin.styles.d.ts.map +1 -0
- package/components/VideoPlayer/{VideojsMinimalSkin.styles.js → VideojsNeutralSkin.styles.js} +618 -672
- package/components/VideoPlayer/constants.d.ts +24 -7
- package/components/VideoPlayer/constants.d.ts.map +1 -1
- package/components/VideoPlayer/constants.js +12 -8
- package/components/VideoPlayer/hlsSource.d.ts +17 -9
- package/components/VideoPlayer/hlsSource.d.ts.map +1 -1
- package/components/VideoPlayer/hooks/useAccessErrorReporter.d.ts +4 -4
- package/components/VideoPlayer/hooks/useAccessErrorReporter.js +9 -9
- package/components/VideoPlayer/hooks/useMediaReadiness.d.ts +6 -7
- package/components/VideoPlayer/hooks/useMediaReadiness.d.ts.map +1 -1
- package/components/VideoPlayer/hooks/usePlayerControl.d.ts +6 -5
- package/components/VideoPlayer/hooks/usePlayerControl.d.ts.map +1 -1
- package/components/VideoPlayer/hooks/usePlayerControl.js +14 -11
- package/components/VideoPlayer/hooks/usePlayerEvents.d.ts +9 -4
- package/components/VideoPlayer/hooks/usePlayerEvents.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/GclickVideoSkin.d.ts +7 -6
- package/components/VideoPlayer/subcomponents/GclickVideoSkin.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/GclickVideoSkin.js +35 -35
- package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts +1 -1
- package/components/VideoPlayer/subcomponents/VideoPlayerStage.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/VideoPlayerStage.js +16 -15
- package/components/VideoPlayer/subcomponents/skin/LiveButton.d.ts +24 -0
- package/components/VideoPlayer/subcomponents/skin/LiveButton.d.ts.map +1 -0
- package/components/VideoPlayer/subcomponents/skin/LiveButton.js +53 -0
- package/components/VideoPlayer/subcomponents/skin/MinimalVideoControls.d.ts +2 -2
- package/components/VideoPlayer/subcomponents/skin/VideoErrorDialog.d.ts +3 -3
- package/components/VideoPlayer/subcomponents/skin/VideoStatusIndicators.d.ts +2 -2
- package/components/VideoPlayer/subcomponents/skin/buttons.d.ts +2 -2
- package/components/VideoPlayer/subcomponents/skin/buttons.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/skin/buttons.js +14 -13
- package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts +3 -0
- package/components/VideoPlayer/subcomponents/skin/skinVariant.d.ts.map +1 -1
- package/components/VideoPlayer/subcomponents/skin/skinVariant.js +53 -51
- package/components/VideoPlayer/types.d.ts +7 -5
- package/components/VideoPlayer/types.d.ts.map +1 -1
- package/package.json +5 -5
- package/components/VideoPlayer/VideojsMinimalSkin.styles.d.ts.map +0 -1
package/components/VideoPlayer/{VideojsMinimalSkin.styles.js → VideojsNeutralSkin.styles.js}
RENAMED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
const e = {
|
|
2
2
|
"@layer base.theme": {
|
|
3
|
-
'& .media-skin[data-theme="
|
|
3
|
+
'& .media-skin[data-theme="neutral"]': {
|
|
4
4
|
"--media-control-corner-shape": "squircle",
|
|
5
5
|
"--media-control-radius": "calc(var(--media-spacing) * 2)",
|
|
6
6
|
"--media-control-size": "calc(var(--media-spacing) * 9)",
|
|
7
7
|
"--media-controls-radius": "calc(var(--media-spacing) * 3)",
|
|
8
|
-
"--media-popover": "oklch(0% 0 0 /
|
|
9
|
-
"--media-border": "oklch(100% 0 0 /
|
|
10
|
-
"--media-shadow-surface": "0 1px 2px oklch(0% 0 0 /
|
|
8
|
+
"--media-popover": "oklch(0% 0 0 / .5)",
|
|
9
|
+
"--media-border": "oklch(100% 0 0 / .1)",
|
|
10
|
+
"--media-shadow-surface": "0 1px 2px oklch(0% 0 0 / .2)",
|
|
11
11
|
"--media-shadow-thumb": "0 0 0 1px #00000026, 0 1px 3px 0 #00000026, 0 1px 2px -1px #00000026",
|
|
12
12
|
"--media-text-shadow-dialog": "0 1px 0 #00000080",
|
|
13
13
|
"--media-backdrop-filter-dialog": "blur(16px) saturate(120%)",
|
|
14
|
-
"--media-shadow-tooltip": "0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 /
|
|
14
|
+
"--media-shadow-tooltip": "0 0 0 1px var(--media-border), 0 4px 6px -1px oklch(0% 0 0 / .2), 0 2px 4px -2px oklch(0% 0 0 / .2)",
|
|
15
15
|
"--media-duration-dialog": "var(--media-duration)",
|
|
16
|
-
"--media-duration-indicator": "
|
|
16
|
+
"--media-duration-indicator": ".4s",
|
|
17
17
|
"--media-hidden-offset": "100%",
|
|
18
18
|
"--media-hidden-indicator-offset": "-100%",
|
|
19
19
|
"--media-menu-item-radius": "calc(var(--media-spacing) * 1.5)",
|
|
@@ -29,57 +29,58 @@ const e = {
|
|
|
29
29
|
"& .media-skin": {
|
|
30
30
|
"--media-background": "oklch(0% 0 0)",
|
|
31
31
|
"--media-foreground": "oklch(100% 0 0)",
|
|
32
|
-
"--media-controls": "oklch(0% 0 0 /
|
|
32
|
+
"--media-controls": "oklch(0% 0 0 / .35)",
|
|
33
33
|
"--media-controls-foreground": "var(--media-foreground)",
|
|
34
|
-
"--media-popover": "oklch(100% 0 0 /
|
|
34
|
+
"--media-popover": "oklch(100% 0 0 / .1)",
|
|
35
35
|
"--media-popover-foreground": "var(--media-foreground)",
|
|
36
36
|
"--media-primary": "var(--media-accent-color, var(--media-default-accent-color))",
|
|
37
|
-
"--media-primary-foreground": "var(
|
|
37
|
+
"--media-primary-foreground": "var(--media-accent-text-color, var(--media-default-accent-text-color))",
|
|
38
38
|
"--media-accent": "var(--media-accent-color, color-mix(in oklab, var(--media-default-accent-color) 10%, transparent))",
|
|
39
|
-
"--media-accent-foreground": "var(
|
|
40
|
-
"--media-muted": "oklch(100% 0 0 /
|
|
41
|
-
"--media-muted-foreground": "oklch(100% 0 0 /
|
|
42
|
-
"--media-border": "oklch(0% 0 0 /
|
|
39
|
+
"--media-accent-foreground": "var(--media-accent-text-color, currentColor)",
|
|
40
|
+
"--media-muted": "oklch(100% 0 0 / .15)",
|
|
41
|
+
"--media-muted-foreground": "oklch(100% 0 0 / .65)",
|
|
42
|
+
"--media-border": "oklch(0% 0 0 / .1)",
|
|
43
43
|
"--media-ring": "oklch(100% 0 0)",
|
|
44
44
|
"--media-backdrop": "oklch(0% 0 0)",
|
|
45
|
-
"--media-live-color": "oklch(65%
|
|
46
|
-
"--media-shadow-surface": "0 1px 3px 0 oklch(0% 0 0 /
|
|
45
|
+
"--media-live-color": "oklch(65% .22 27)",
|
|
46
|
+
"--media-shadow-surface": "0 1px 3px 0 oklch(0% 0 0 / .15), 0 1px 2px -1px oklch(0% 0 0 / .15)",
|
|
47
47
|
"--media-shadow-surface-inset": "inset 0 1px 0 0 #ffffff1a, inset 0 0 0 1px #ffffff0d",
|
|
48
48
|
"--media-shadow-thumb": "0 0 0 1px #0000001a, 0 1px 3px 0 #00000059, 0 1px 2px -1px #00000059",
|
|
49
49
|
"--media-shadow-tooltip": "0 0 0 1px var(--media-border), var(--media-shadow-surface)",
|
|
50
|
-
"--media-shadow-separator": "0 1px 0 0 oklch(100% 0 0 /
|
|
51
|
-
"--media-shadow-current-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l -
|
|
52
|
-
"--media-shadow-subtle-current-color": "
|
|
50
|
+
"--media-shadow-separator": "0 1px 0 0 oklch(100% 0 0 / .075)",
|
|
51
|
+
"--media-shadow-current-color": "oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15))",
|
|
52
|
+
"--media-shadow-subtle-current-color": "color-mix(in oklab, var(--media-shadow-current-color) 40%, transparent)",
|
|
53
53
|
"--media-text-shadow-dialog": "0 1px 0 #00000040",
|
|
54
|
-
"--media-backdrop-filter-surface": "blur(16px) saturate(
|
|
54
|
+
"--media-backdrop-filter-surface": "blur(16px) saturate(110%)",
|
|
55
55
|
"--media-backdrop-filter-indicator": "blur(8px)",
|
|
56
|
-
"--media-backdrop-filter-dialog": "blur(16px) saturate(
|
|
56
|
+
"--media-backdrop-filter-dialog": "blur(16px) saturate(110%)",
|
|
57
57
|
"--media-control-corner-shape": "round",
|
|
58
58
|
"--media-control-radius": "99px",
|
|
59
59
|
"--media-control-size": "calc(var(--media-spacing) * 9)",
|
|
60
60
|
"--media-controls-radius": "var(--media-control-radius)",
|
|
61
61
|
"--media-default-accent-color": "oklch(100% 0 0)",
|
|
62
|
+
"--media-default-accent-text-color": "oklch(0% 0 0)",
|
|
62
63
|
"--media-duration-instant": "50ms",
|
|
63
|
-
"--media-duration-fast": "
|
|
64
|
-
"--media-duration": "
|
|
65
|
-
"--media-duration-slow": "
|
|
66
|
-
"--media-duration-slower": "
|
|
67
|
-
"--media-duration-controls": "
|
|
68
|
-
"--media-duration-dialog": "
|
|
64
|
+
"--media-duration-fast": ".1s",
|
|
65
|
+
"--media-duration": ".15s",
|
|
66
|
+
"--media-duration-slow": ".2s",
|
|
67
|
+
"--media-duration-slower": ".25s",
|
|
68
|
+
"--media-duration-controls": ".1s",
|
|
69
|
+
"--media-duration-dialog": ".35s",
|
|
69
70
|
"--media-duration-indicator": "var(--media-duration-slower)",
|
|
70
|
-
"--media-duration-menu": "
|
|
71
|
+
"--media-duration-menu": ".25s",
|
|
71
72
|
"--media-duration-slider": "var(--media-duration-fast)",
|
|
72
|
-
"--media-delay-dialog": "
|
|
73
|
-
"--media-hidden-scale": "
|
|
73
|
+
"--media-delay-dialog": ".1s",
|
|
74
|
+
"--media-hidden-scale": ".95",
|
|
74
75
|
"--media-hidden-blur": "8px",
|
|
75
76
|
"--media-hidden-offset": "calc(var(--media-spacing) * 1)",
|
|
76
77
|
"--media-hidden-icon-scale": "0",
|
|
77
|
-
"--media-hidden-indicator-scale": "
|
|
78
|
+
"--media-hidden-indicator-scale": ".9",
|
|
78
79
|
"--media-hidden-indicator-offset": "-25%",
|
|
79
|
-
"--media-hidden-playback-scale": "
|
|
80
|
-
"--media-hidden-popup-scale": "
|
|
80
|
+
"--media-hidden-playback-scale": ".85",
|
|
81
|
+
"--media-hidden-popup-scale": ".95",
|
|
81
82
|
"--media-hidden-popup-blur": "4px",
|
|
82
|
-
"--media-hidden-preview-scale": "
|
|
83
|
+
"--media-hidden-preview-scale": ".8",
|
|
83
84
|
"--media-hidden-preview-offset": "calc(var(--media-spacing) * 2)",
|
|
84
85
|
"--media-hidden-seek-offset": "60%",
|
|
85
86
|
"--media-menu-item-radius": "calc(var(--media-spacing) * 2)",
|
|
@@ -95,11 +96,27 @@ const e = {
|
|
|
95
96
|
"--media-slider-preview-label-offset": "calc(var(--media-spacing) * 10.5)",
|
|
96
97
|
"--media-video-border-radius": "var(--media-border-radius, 28px)",
|
|
97
98
|
"--media-scale": "1",
|
|
98
|
-
"--media-scrollbar-thumb-color": "
|
|
99
|
+
"--media-scrollbar-thumb-color": "color-mix(in oklab, currentColor 30%, transparent)",
|
|
99
100
|
"--media-spacing": "calc(var(--media-scale-unit, 16px) * var(--media-scale) / 4)",
|
|
100
101
|
scrollbarColor: "var(--media-scrollbar-thumb-color) transparent",
|
|
101
102
|
scrollbarWidth: "thin"
|
|
102
103
|
},
|
|
104
|
+
"@supports (color: contrast-color(red))": {
|
|
105
|
+
"& .media-skin": {
|
|
106
|
+
"--media-primary-foreground": "var(--media-accent-text-color, contrast-color(var(--media-primary)))",
|
|
107
|
+
"--media-accent-foreground": "var(--media-accent-text-color, contrast-color(var(--media-accent-color, var(--media-internal-accent-text-fallback, oklch(0% 0 0)))))"
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
"@supports (color: oklch(from red l c h))": {
|
|
111
|
+
"& .media-skin": {
|
|
112
|
+
"--media-shadow-subtle-current-color": "oklch(from var(--media-shadow-current-color) l c h / calc(alpha * .4))"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
"@supports (color: oklch(from currentColor l c h))": {
|
|
116
|
+
"& .media-skin": {
|
|
117
|
+
"--media-scrollbar-thumb-color": "oklch(from currentColor l c h / .3)"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
103
120
|
"& .media-skin::-webkit-scrollbar-thumb": {
|
|
104
121
|
background: "var(--media-scrollbar-thumb-color)",
|
|
105
122
|
borderRadius: "9999px"
|
|
@@ -126,29 +143,63 @@ const e = {
|
|
|
126
143
|
},
|
|
127
144
|
"@layer base.preset": {
|
|
128
145
|
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
|
|
129
|
-
"--media-frame-border": "var(--media-border-color,
|
|
130
|
-
"--media-controls-gradient": "linear-gradient(
|
|
131
|
-
"--media-caption-controls-y": "calc(var(--media-spacing) * -
|
|
146
|
+
"--media-frame-border": "var(--media-border-color, #0000001a)",
|
|
147
|
+
"--media-controls-gradient": "linear-gradient(to top, color-mix(in oklab, var(--media-backdrop) 40%, transparent), color-mix(in oklab, var(--media-backdrop) 20%, transparent), color-mix(in oklab, var(--media-backdrop) 50%, transparent))",
|
|
148
|
+
"--media-caption-controls-y": "calc(var(--media-spacing) * -16)",
|
|
132
149
|
"--media-slider-preview-offset": "calc(var(--media-spacing) * 9)",
|
|
133
|
-
"--media-thumbnail-gradient": "linear-gradient(
|
|
150
|
+
"--media-thumbnail-gradient": "linear-gradient(to top, color-mix(in oklab, var(--media-backdrop) 50%, transparent), color-mix(in oklab, var(--media-backdrop) 10%, transparent), transparent)"
|
|
134
151
|
},
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
152
|
+
"@supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red))": {
|
|
153
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
|
|
154
|
+
"--media-controls-gradient": "linear-gradient(to top in oklab, oklch(from var(--media-backdrop) l c h / .4), oklch(from var(--media-backdrop) l c h / .2), oklch(from var(--media-backdrop) l c h / .5))"
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
"@supports (color: oklch(from red l c h))": {
|
|
158
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
|
|
159
|
+
"--media-thumbnail-gradient": "linear-gradient(to top, oklch(from var(--media-backdrop) l c h / .5), oklch(from var(--media-backdrop) l c h / .1), transparent)"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
|
|
163
|
+
"--media-frame-border": "var(--media-border-color, #00000026)",
|
|
164
|
+
"--media-controls-gradient": "linear-gradient(to top, color-mix(in oklab, var(--media-backdrop) 50%, transparent), color-mix(in oklab, var(--media-backdrop) 20%, transparent))",
|
|
165
|
+
"--media-indicator-gradient": "linear-gradient(to bottom, color-mix(in oklab, var(--media-backdrop) 35%, transparent), color-mix(in oklab, var(--media-backdrop) 20%, transparent) calc(var(--media-spacing) * 12), transparent)",
|
|
166
|
+
"--media-caption-controls-y": "calc(var(--media-spacing) * -14)",
|
|
140
167
|
"--media-slider-preview-offset": "calc(var(--media-spacing) * 11)"
|
|
168
|
+
},
|
|
169
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="compat"]': {
|
|
170
|
+
"--media-caption-controls-y": "calc(var(--media-spacing) * -18)"
|
|
171
|
+
},
|
|
172
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="scaffold"]': {
|
|
173
|
+
"--media-caption-controls-y": "calc(var(--media-spacing) * -20)"
|
|
174
|
+
},
|
|
175
|
+
"@supports (color: oklch(from red l c h)) and (background-image: linear-gradient(in oklab, red, red)) ": {
|
|
176
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
|
|
177
|
+
"--media-controls-gradient": "linear-gradient(to top in oklab, oklch(from var(--media-backdrop) l c h / .5), oklch(from var(--media-backdrop) l c h / .2))"
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
"@supports (color: oklch(from red l c h)) ": {
|
|
181
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
|
|
182
|
+
"--media-indicator-gradient": "linear-gradient(to bottom, oklch(from var(--media-backdrop) l c h / .35), oklch(from var(--media-backdrop) l c h / .2) calc(var(--media-spacing) * 12), transparent)"
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
"@supports (color: light-dark(red, red))": {
|
|
186
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])': {
|
|
187
|
+
"--media-frame-border": "var(--media-border-color, light-dark(#0000001a, #ffffff26))"
|
|
188
|
+
},
|
|
189
|
+
'& .media-skin:is([data-preset="video"], [data-preset="live-video"])[data-theme="neutral"]': {
|
|
190
|
+
"--media-frame-border": "var(--media-border-color, light-dark(#00000026, #ffffff26))"
|
|
191
|
+
}
|
|
141
192
|
}
|
|
142
193
|
},
|
|
143
194
|
"@layer base.preferences": {
|
|
144
195
|
"@media (pointer: fine) and (prefers-reduced-motion: no-preference)": {
|
|
145
196
|
"& .media-skin:not([data-controls-visible])": {
|
|
146
|
-
"--media-duration-controls": "
|
|
197
|
+
"--media-duration-controls": ".3s"
|
|
147
198
|
}
|
|
148
199
|
},
|
|
149
200
|
"@media (pointer: coarse) and (prefers-reduced-motion: no-preference)": {
|
|
150
201
|
"& .media-skin:not([data-controls-visible])": {
|
|
151
|
-
"--media-duration-controls": "
|
|
202
|
+
"--media-duration-controls": ".15s"
|
|
152
203
|
}
|
|
153
204
|
},
|
|
154
205
|
"@media (prefers-reduced-motion: reduce)": {
|
|
@@ -184,12 +235,17 @@ const e = {
|
|
|
184
235
|
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)": {
|
|
185
236
|
"& .media-skin": {
|
|
186
237
|
"--media-popover": "var(--media-background)",
|
|
187
|
-
"--media-scrollbar-thumb-color": "
|
|
238
|
+
"--media-scrollbar-thumb-color": "color-mix(in oklab, currentColor 80%, transparent)",
|
|
188
239
|
"--media-backdrop-filter-surface": "none",
|
|
189
240
|
"--media-backdrop-filter-indicator": "none",
|
|
190
241
|
"--media-backdrop-filter-dialog": "none",
|
|
191
242
|
"--media-shadow-surface-inset": "inset 0 1px 0 0 #ffffff40, inset 0 0 0 1px #ffffff20",
|
|
192
243
|
scrollbarWidth: "auto"
|
|
244
|
+
},
|
|
245
|
+
"@supports (color: oklch(from currentColor l c h))": {
|
|
246
|
+
"& .media-skin": {
|
|
247
|
+
"--media-scrollbar-thumb-color": "oklch(from currentColor l c h / .8)"
|
|
248
|
+
}
|
|
193
249
|
}
|
|
194
250
|
},
|
|
195
251
|
"@media (forced-colors: active)": {
|
|
@@ -204,14 +260,14 @@ const e = {
|
|
|
204
260
|
}
|
|
205
261
|
},
|
|
206
262
|
"@layer base": {
|
|
207
|
-
"& .media-skin": {
|
|
263
|
+
"& :where(.media-skin)": {
|
|
208
264
|
textAlign: "start",
|
|
209
265
|
textTransform: "none",
|
|
210
266
|
letterSpacing: "normal",
|
|
211
267
|
fontStyle: "normal",
|
|
212
268
|
fontWeight: "400"
|
|
213
269
|
},
|
|
214
|
-
"& .media-skin, & :where(.media-skin) *, & :where(.media-skin) :before, & :where(.media-skin) :after": {
|
|
270
|
+
"& :where(.media-skin), & :where(.media-skin) *, & :where(.media-skin) :before, & :where(.media-skin) :after": {
|
|
215
271
|
boxSizing: "border-box",
|
|
216
272
|
border: "0 solid",
|
|
217
273
|
margin: "0",
|
|
@@ -272,28 +328,37 @@ const e = {
|
|
|
272
328
|
}
|
|
273
329
|
},
|
|
274
330
|
"@layer components": {
|
|
275
|
-
"& .media-skin": {
|
|
331
|
+
"& :where(.media-skin)": {
|
|
276
332
|
"--media-caption-track-duration": "var(--media-duration-controls)",
|
|
277
333
|
"--media-caption-track-delay": "25ms",
|
|
278
|
-
"--media-caption-track-y": "calc(var(--media-spacing) * -
|
|
334
|
+
"--media-caption-track-y": "calc(var(--media-spacing) * -3)"
|
|
279
335
|
},
|
|
280
336
|
"& :where(.media-skin) video::-webkit-media-text-track-container": {
|
|
281
337
|
zIndex: "20",
|
|
282
|
-
scale: "
|
|
338
|
+
scale: ".98",
|
|
283
339
|
translate: "0 var(--media-caption-track-y)",
|
|
284
340
|
transition: "translate var(--media-caption-track-duration) ease-out",
|
|
285
341
|
transitionDelay: "var(--media-caption-track-delay)",
|
|
286
342
|
fontFamily: "inherit"
|
|
287
343
|
},
|
|
288
|
-
"& .media-skin[data-controls-visible]": {
|
|
344
|
+
"& :where(.media-skin)[data-controls-visible]": {
|
|
289
345
|
"--media-caption-track-y": "var(--media-caption-controls-y)"
|
|
290
346
|
},
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
347
|
+
'& :where(.media-skin)[data-theme="compat"] video::-webkit-media-text-track-container': {
|
|
348
|
+
translate: "none",
|
|
349
|
+
scale: "none",
|
|
350
|
+
transform: "translateY(var(--media-caption-track-y, 0px)) scale(.98)",
|
|
351
|
+
transitionProperty: "transform"
|
|
352
|
+
},
|
|
353
|
+
"@container media-root (width < 42rem)": {
|
|
354
|
+
'& :where(.media-skin)[data-theme="default"][data-controls-visible] video': {
|
|
355
|
+
"--media-caption-track-y": "calc(var(--media-spacing) * -14)"
|
|
356
|
+
},
|
|
357
|
+
'& :where(.media-skin)[data-theme="neutral"][data-controls-visible] video': {
|
|
358
|
+
"--media-caption-track-y": "calc(var(--media-spacing) * -17)"
|
|
294
359
|
}
|
|
295
360
|
},
|
|
296
|
-
'& :where(.media-skin[data-theme="
|
|
361
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button': {
|
|
297
362
|
width: "var(--media-control-size)",
|
|
298
363
|
height: "var(--media-control-size)",
|
|
299
364
|
cursor: "pointer",
|
|
@@ -316,81 +381,82 @@ const e = {
|
|
|
316
381
|
flexShrink: "0",
|
|
317
382
|
placeItems: "center",
|
|
318
383
|
padding: "0",
|
|
319
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
384
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
320
385
|
display: "grid"
|
|
321
386
|
},
|
|
322
387
|
"@media (hover: hover)": {
|
|
323
|
-
'& :where(.media-skin[data-theme="
|
|
388
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button:not([aria-disabled="true"]):hover': {
|
|
324
389
|
backgroundColor: "var(--media-accent)",
|
|
325
390
|
color: "var(--media-accent-foreground)"
|
|
326
391
|
}
|
|
327
392
|
},
|
|
328
|
-
'& :where(.media-skin[data-theme="
|
|
393
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button:focus-visible': {
|
|
329
394
|
outlineOffset: "2px",
|
|
330
395
|
outlineColor: "var(--media-ring)"
|
|
331
396
|
},
|
|
332
|
-
'& :where(.media-skin[data-theme="
|
|
333
|
-
scale: "
|
|
397
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button:not([aria-disabled="true"]):active': {
|
|
398
|
+
scale: ".97"
|
|
334
399
|
},
|
|
335
|
-
'& :where(.media-skin[data-theme="
|
|
400
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button[aria-disabled="true"]': {
|
|
336
401
|
cursor: "not-allowed",
|
|
337
|
-
opacity: "
|
|
402
|
+
opacity: ".5"
|
|
338
403
|
},
|
|
339
404
|
"@supports (corner-shape: squircle)": {
|
|
340
|
-
'& :where(.media-skin[data-theme="
|
|
405
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button': {
|
|
341
406
|
borderRadius: "1rem"
|
|
342
407
|
}
|
|
343
408
|
},
|
|
344
409
|
"@media (prefers-reduced-motion: reduce)": {
|
|
345
|
-
'& :where(.media-skin[data-theme="
|
|
410
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button': {
|
|
346
411
|
willChange: "auto",
|
|
347
412
|
transitionProperty: "background-color, color",
|
|
348
413
|
scale: "1"
|
|
349
414
|
}
|
|
350
415
|
},
|
|
351
|
-
'& :where(.media-skin[data-theme="
|
|
416
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
352
417
|
backgroundColor: "var(--media-accent)",
|
|
353
418
|
color: "var(--media-accent-foreground)"
|
|
354
419
|
},
|
|
355
|
-
'& :where(.media-skin[data-theme="
|
|
420
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-actions': {
|
|
356
421
|
gap: "calc(var(--media-spacing) * 2)",
|
|
357
422
|
flexShrink: "0",
|
|
358
423
|
display: "flex"
|
|
359
424
|
},
|
|
360
|
-
'& :where(.media-skin[data-theme="
|
|
425
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop': [
|
|
361
426
|
{
|
|
362
427
|
zIndex: "40",
|
|
363
428
|
borderRadius: "inherit",
|
|
364
429
|
backgroundColor: "var(--media-backdrop)",
|
|
365
430
|
opacity: "1",
|
|
431
|
+
WebkitBackdropFilter: "var(--media-backdrop-filter-dialog)",
|
|
366
432
|
backdropFilter: "var(--media-backdrop-filter-dialog)",
|
|
367
433
|
transitionProperty: "opacity",
|
|
368
|
-
transitionDuration: "
|
|
434
|
+
transitionDuration: ".15s",
|
|
369
435
|
transitionDelay: "var(--media-delay-dialog)"
|
|
370
436
|
},
|
|
371
437
|
{
|
|
372
438
|
transitionDuration: "var(--media-duration-dialog)",
|
|
373
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
439
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
374
440
|
position: "absolute",
|
|
375
441
|
inset: "0"
|
|
376
442
|
}
|
|
377
443
|
],
|
|
378
444
|
"@supports (color: color-mix(in lab, red, red))": {
|
|
379
|
-
'& :where(.media-skin[data-theme="
|
|
445
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop': {
|
|
380
446
|
backgroundColor: "color-mix(in oklab, var(--media-backdrop) 20%, transparent)"
|
|
381
447
|
}
|
|
382
448
|
},
|
|
383
|
-
'& :where(.media-skin[data-theme="
|
|
449
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop:not([data-open])': {
|
|
384
450
|
display: "none"
|
|
385
451
|
},
|
|
386
|
-
'& :where(.media-skin[data-theme="
|
|
452
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop[data-ending-style]': {
|
|
387
453
|
transitionDelay: "0s",
|
|
388
454
|
transitionDuration: "var(--media-duration-instant)"
|
|
389
455
|
},
|
|
390
|
-
'& :where(.media-skin[data-theme="
|
|
456
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-backdrop:is([data-starting-style], [data-ending-style])': {
|
|
391
457
|
opacity: "0"
|
|
392
458
|
},
|
|
393
|
-
'& :where(.media-skin[data-theme="
|
|
459
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-close': {
|
|
394
460
|
height: "var(--media-control-size)",
|
|
395
461
|
width: "100%",
|
|
396
462
|
paddingInline: "calc(var(--media-spacing) * 4)",
|
|
@@ -400,7 +466,7 @@ const e = {
|
|
|
400
466
|
backgroundColor: "var(--media-primary) !important",
|
|
401
467
|
color: "var(--media-primary-foreground) !important"
|
|
402
468
|
},
|
|
403
|
-
'& :where(.media-skin[data-theme="
|
|
469
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-content': {
|
|
404
470
|
gap: "calc(var(--media-spacing) * 2)",
|
|
405
471
|
minHeight: "0",
|
|
406
472
|
paddingBlock: "calc(var(--media-spacing) * 1.5)",
|
|
@@ -408,15 +474,15 @@ const e = {
|
|
|
408
474
|
display: "flex",
|
|
409
475
|
overflowY: "auto"
|
|
410
476
|
},
|
|
411
|
-
'& :where(.media-skin[data-theme="
|
|
477
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-description': {
|
|
412
478
|
overflowWrap: "anywhere",
|
|
413
|
-
opacity: "
|
|
479
|
+
opacity: ".7",
|
|
414
480
|
margin: "0"
|
|
415
481
|
},
|
|
416
|
-
'& :where(.media-skin[data-theme="
|
|
482
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-popup': [
|
|
417
483
|
{
|
|
418
484
|
zIndex: "50",
|
|
419
|
-
maxHeight: "calc(100% -
|
|
485
|
+
maxHeight: "calc(100% - .5rem)",
|
|
420
486
|
width: "var(--media-dialog-width)",
|
|
421
487
|
maxWidth: "var(--media-dialog-max-width)",
|
|
422
488
|
gap: "calc(var(--media-spacing) * 3)",
|
|
@@ -424,7 +490,7 @@ const e = {
|
|
|
424
490
|
padding: "calc(var(--media-spacing) * 4)",
|
|
425
491
|
color: "var(--media-popover-foreground)",
|
|
426
492
|
transitionProperty: "opacity, scale",
|
|
427
|
-
transitionDuration: "
|
|
493
|
+
transitionDuration: ".15s",
|
|
428
494
|
transitionDelay: "var(--media-delay-dialog)"
|
|
429
495
|
},
|
|
430
496
|
{
|
|
@@ -432,7 +498,7 @@ const e = {
|
|
|
432
498
|
textShadow: "var(--media-text-shadow-dialog)",
|
|
433
499
|
outlineStyle: "none",
|
|
434
500
|
flexDirection: "column",
|
|
435
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
501
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
436
502
|
display: "flex",
|
|
437
503
|
position: "absolute",
|
|
438
504
|
top: "50%",
|
|
@@ -441,29 +507,29 @@ const e = {
|
|
|
441
507
|
}
|
|
442
508
|
],
|
|
443
509
|
"@media (forced-colors: active)": {
|
|
444
|
-
'& :where(.media-skin[data-theme="
|
|
510
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-popup': {
|
|
445
511
|
outlineOffset: "2px",
|
|
446
512
|
outline: "2px solid #0000"
|
|
447
513
|
}
|
|
448
514
|
},
|
|
449
|
-
'& :where(.media-skin[data-theme="
|
|
515
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-popup:not([data-open])': {
|
|
450
516
|
display: "none"
|
|
451
517
|
},
|
|
452
|
-
'& :where(.media-skin[data-theme="
|
|
518
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-popup[data-ending-style]': {
|
|
453
519
|
transitionDelay: "0s",
|
|
454
520
|
transitionDuration: "var(--media-duration-instant)"
|
|
455
521
|
},
|
|
456
|
-
'& :where(.media-skin[data-theme="
|
|
522
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-popup:is([data-starting-style], [data-ending-style])': {
|
|
457
523
|
scale: "var(--media-hidden-popup-scale) var(--media-hidden-popup-scale)",
|
|
458
524
|
opacity: "0"
|
|
459
525
|
},
|
|
460
|
-
'& :where(.media-skin[data-theme="
|
|
526
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-dialog-title': {
|
|
461
527
|
fontSize: "calc(var(--media-spacing) * 3.75)",
|
|
462
528
|
margin: "0",
|
|
463
529
|
fontWeight: "600",
|
|
464
530
|
lineHeight: "1.25"
|
|
465
531
|
},
|
|
466
|
-
'& :where(.media-skin[data-theme="
|
|
532
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-buffering-indicator': {
|
|
467
533
|
pointerEvents: "none",
|
|
468
534
|
color: "var(--media-controls-foreground)",
|
|
469
535
|
placeContent: "center",
|
|
@@ -471,40 +537,41 @@ const e = {
|
|
|
471
537
|
position: "absolute",
|
|
472
538
|
inset: "0"
|
|
473
539
|
},
|
|
474
|
-
'& :where(.media-skin[data-theme="
|
|
540
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-buffering-indicator:not([data-visible])': {
|
|
475
541
|
"--media-spinner-animation": "none"
|
|
476
542
|
},
|
|
477
|
-
'& :where(.media-skin[data-theme="
|
|
543
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-buffering-indicator:before': {
|
|
478
544
|
backgroundColor: "var(--media-backdrop)",
|
|
479
545
|
content: '""',
|
|
546
|
+
WebkitBackdropFilter: "var(--media-backdrop-filter-indicator)",
|
|
480
547
|
backdropFilter: "var(--media-backdrop-filter-indicator)",
|
|
481
548
|
position: "absolute",
|
|
482
549
|
inset: "0"
|
|
483
550
|
},
|
|
484
551
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
485
|
-
'& :where(.media-skin[data-theme="
|
|
552
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-buffering-indicator:before': {
|
|
486
553
|
backgroundColor: "color-mix(in oklab, var(--media-backdrop) 35%, transparent)"
|
|
487
554
|
}
|
|
488
555
|
},
|
|
489
|
-
'& :where(.media-skin[data-theme="
|
|
556
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-buffering-indicator[data-visible]': {
|
|
490
557
|
display: "grid"
|
|
491
558
|
},
|
|
492
|
-
'& :where(.media-skin[data-theme="
|
|
559
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-buffering-indicator-spinner-icon': {
|
|
493
560
|
zIndex: "30",
|
|
494
561
|
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
495
562
|
height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
496
563
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
497
564
|
position: "relative"
|
|
498
565
|
},
|
|
499
|
-
'& :where(.media-skin[data-theme="
|
|
566
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-poster': [
|
|
500
567
|
{
|
|
501
568
|
pointerEvents: "none",
|
|
502
569
|
borderRadius: "inherit",
|
|
503
570
|
width: "100%",
|
|
504
571
|
height: "100%",
|
|
505
572
|
transitionProperty: "opacity",
|
|
506
|
-
transitionDuration: "
|
|
507
|
-
transitionTimingFunction: "cubic-bezier(
|
|
573
|
+
transitionDuration: ".15s",
|
|
574
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)"
|
|
508
575
|
},
|
|
509
576
|
{
|
|
510
577
|
transitionDuration: "var(--media-duration-slower)",
|
|
@@ -512,10 +579,10 @@ const e = {
|
|
|
512
579
|
inset: "0"
|
|
513
580
|
}
|
|
514
581
|
],
|
|
515
|
-
'& :where(.media-skin[data-theme="
|
|
582
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-poster:not([data-visible])': {
|
|
516
583
|
opacity: "0"
|
|
517
584
|
},
|
|
518
|
-
'& :where(.media-skin[data-theme="
|
|
585
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-poster-image': {
|
|
519
586
|
borderRadius: "inherit",
|
|
520
587
|
objectFit: "var(--media-object-fit, contain)",
|
|
521
588
|
objectPosition: "var(--media-object-position, center)",
|
|
@@ -524,83 +591,51 @@ const e = {
|
|
|
524
591
|
position: "absolute",
|
|
525
592
|
inset: "0"
|
|
526
593
|
},
|
|
527
|
-
'& :where(.media-skin[data-theme="
|
|
594
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-poster-image:not([src]):not([srcset])': {
|
|
528
595
|
visibility: "hidden"
|
|
529
596
|
},
|
|
530
|
-
'& :where(.media-skin[data-theme="
|
|
531
|
-
{
|
|
532
|
-
pointerEvents: "none",
|
|
533
|
-
borderRadius: "inherit",
|
|
534
|
-
width: "100%",
|
|
535
|
-
height: "100%",
|
|
536
|
-
transitionProperty: "opacity",
|
|
537
|
-
transitionDuration: "0.15s",
|
|
538
|
-
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
539
|
-
},
|
|
540
|
-
{
|
|
541
|
-
transitionDuration: "var(--media-duration-slower)",
|
|
542
|
-
position: "absolute",
|
|
543
|
-
inset: "0"
|
|
544
|
-
}
|
|
545
|
-
],
|
|
546
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-poster:not([data-visible]) ': {
|
|
547
|
-
opacity: "0"
|
|
548
|
-
},
|
|
549
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-poster-image ': {
|
|
550
|
-
borderRadius: "inherit",
|
|
551
|
-
objectFit: "var(--media-object-fit, contain)",
|
|
552
|
-
objectPosition: "var(--media-object-position, center)",
|
|
553
|
-
width: "100%",
|
|
554
|
-
height: "100%",
|
|
555
|
-
position: "absolute",
|
|
556
|
-
inset: "0"
|
|
557
|
-
},
|
|
558
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-poster-image:not([src]):not([srcset]) ': {
|
|
559
|
-
visibility: "hidden"
|
|
560
|
-
},
|
|
561
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-title': [
|
|
597
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-title': [
|
|
562
598
|
{
|
|
563
599
|
pointerEvents: "none",
|
|
564
600
|
isolation: "isolate",
|
|
565
601
|
zIndex: "20",
|
|
566
602
|
transformOrigin: "top",
|
|
567
603
|
paddingInline: "calc(var(--media-spacing) * 4)",
|
|
568
|
-
paddingTop: "calc(var(--media-spacing) *
|
|
569
|
-
fontSize: "calc(var(--media-spacing) *
|
|
570
|
-
letterSpacing: "
|
|
604
|
+
paddingTop: "calc(var(--media-spacing) * 3.5)",
|
|
605
|
+
fontSize: "calc(var(--media-spacing) * 4)",
|
|
606
|
+
letterSpacing: "-.0125em",
|
|
571
607
|
overflowWrap: "anywhere",
|
|
572
608
|
color: "var(--media-controls-foreground)",
|
|
573
609
|
transitionProperty: "filter, opacity, translate",
|
|
574
|
-
transitionDuration: "
|
|
610
|
+
transitionDuration: ".15s"
|
|
575
611
|
},
|
|
576
612
|
{
|
|
577
613
|
transitionDuration: "calc(var(--media-duration-controls) / 2)",
|
|
578
614
|
textShadow: "0 1px 0 var(--media-shadow-current-color)",
|
|
579
615
|
insetInline: "0",
|
|
580
616
|
fontWeight: "400",
|
|
581
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
617
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
582
618
|
position: "absolute",
|
|
583
619
|
top: "0"
|
|
584
620
|
}
|
|
585
621
|
],
|
|
586
|
-
'& :where(.media-skin[data-theme="
|
|
622
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible])': {
|
|
587
623
|
translate: "0 calc(min(var(--media-hidden-offset), var(--media-control-size)) * -1)",
|
|
588
624
|
opacity: "0",
|
|
589
625
|
transitionDuration: "var(--media-duration-controls)"
|
|
590
626
|
},
|
|
591
627
|
"@media (pointer: fine)": {
|
|
592
|
-
'& :where(.media-skin[data-theme="
|
|
628
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-title:not([data-visible])': {
|
|
593
629
|
filter: "blur(var(--media-hidden-blur))"
|
|
594
630
|
}
|
|
595
631
|
},
|
|
596
632
|
"@container media-root (width >= 28rem)": {
|
|
597
|
-
'& :where(.media-skin[data-theme="
|
|
633
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-title': {
|
|
598
634
|
paddingInline: "calc(var(--media-spacing) * 6)",
|
|
599
|
-
paddingTop: "calc(var(--media-spacing) *
|
|
600
|
-
fontSize: "calc(var(--media-spacing) * 4.25)"
|
|
635
|
+
paddingTop: "calc(var(--media-spacing) * 5)"
|
|
601
636
|
}
|
|
602
637
|
},
|
|
603
|
-
'& :where(.media-skin[data-theme="
|
|
638
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-container, & :where(.media-skin[data-theme="neutral"]).media-container': [
|
|
604
639
|
{
|
|
605
640
|
isolation: "isolate",
|
|
606
641
|
borderRadius: "var(--media-video-border-radius)",
|
|
@@ -613,21 +648,21 @@ const e = {
|
|
|
613
648
|
MozOsxFontSmoothing: "auto",
|
|
614
649
|
outlineOffset: "-4px",
|
|
615
650
|
transitionProperty: "outline-offset, outline-color",
|
|
616
|
-
transitionDuration: "
|
|
651
|
+
transitionDuration: ".15s"
|
|
617
652
|
},
|
|
618
653
|
{
|
|
619
654
|
transitionDuration: "var(--media-duration-fast)",
|
|
620
655
|
"--spacing": "var(--media-spacing)",
|
|
621
656
|
outline: "2px solid #0000",
|
|
622
657
|
lineHeight: "1.5",
|
|
623
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
658
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
624
659
|
display: "block",
|
|
625
660
|
position: "relative",
|
|
626
661
|
overflow: "clip",
|
|
627
662
|
container: "media-root / inline-size"
|
|
628
663
|
}
|
|
629
664
|
],
|
|
630
|
-
'& :where(.media-skin[data-theme="
|
|
665
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-container:after, & :where(.media-skin[data-theme="neutral"]).media-container:after': {
|
|
631
666
|
pointerEvents: "none",
|
|
632
667
|
zIndex: "10",
|
|
633
668
|
borderRadius: "inherit",
|
|
@@ -638,15 +673,15 @@ const e = {
|
|
|
638
673
|
position: "absolute",
|
|
639
674
|
inset: "0"
|
|
640
675
|
},
|
|
641
|
-
'& :where(.media-skin[data-theme="
|
|
676
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-container:focus-visible, & :where(.media-skin[data-theme="neutral"]).media-container:focus-visible': {
|
|
642
677
|
outlineOffset: "2px",
|
|
643
678
|
outlineColor: "var(--media-ring)"
|
|
644
679
|
},
|
|
645
|
-
'& :where(.media-skin[data-theme="
|
|
680
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-container:fullscreen:after, & :where(.media-skin[data-theme="neutral"]).media-container:fullscreen:after': {
|
|
646
681
|
content: '""',
|
|
647
682
|
display: "none"
|
|
648
683
|
},
|
|
649
|
-
'& :where(.media-skin[data-theme="
|
|
684
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-announcer': {
|
|
650
685
|
clipPath: "inset(50%)",
|
|
651
686
|
whiteSpace: "nowrap",
|
|
652
687
|
borderWidth: "0",
|
|
@@ -657,7 +692,7 @@ const e = {
|
|
|
657
692
|
position: "absolute",
|
|
658
693
|
overflow: "hidden"
|
|
659
694
|
},
|
|
660
|
-
'& :where(.media-skin[data-theme="
|
|
695
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-indicator': {
|
|
661
696
|
placeContent: "center",
|
|
662
697
|
gap: "var(--media-spacing)",
|
|
663
698
|
padding: "calc(var(--media-spacing) * 4)",
|
|
@@ -666,51 +701,51 @@ const e = {
|
|
|
666
701
|
gridColumnStart: "2",
|
|
667
702
|
display: "grid"
|
|
668
703
|
},
|
|
669
|
-
'& :where(.media-skin[data-theme="
|
|
704
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-indicator[data-direction="backward"]': {
|
|
670
705
|
gridColumnStart: "1",
|
|
671
706
|
justifySelf: "flex-start"
|
|
672
707
|
},
|
|
673
|
-
'& :where(.media-skin[data-theme="
|
|
708
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-indicator[data-direction="forward"]': {
|
|
674
709
|
gridColumnStart: "3",
|
|
675
710
|
justifySelf: "flex-end"
|
|
676
711
|
},
|
|
677
|
-
"@container media-root (width >= 42rem)
|
|
678
|
-
'& :where(.media-skin[data-theme="
|
|
712
|
+
"@container media-root (width >= 42rem)": {
|
|
713
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-indicator': {
|
|
679
714
|
padding: "calc(var(--media-spacing) * 6)"
|
|
680
715
|
}
|
|
681
716
|
},
|
|
682
|
-
'& :where(.media-skin[data-theme="
|
|
717
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-indicator-icon': [
|
|
683
718
|
{
|
|
684
719
|
width: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5)",
|
|
685
720
|
height: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 1.5)",
|
|
686
721
|
transitionProperty: "translate, opacity",
|
|
687
|
-
transitionDuration: "
|
|
722
|
+
transitionDuration: ".15s"
|
|
688
723
|
},
|
|
689
724
|
{
|
|
690
725
|
transitionDuration: "var(--media-duration-slow)",
|
|
691
|
-
transitionTimingFunction: "cubic-bezier(
|
|
726
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
|
|
692
727
|
display: "none"
|
|
693
728
|
}
|
|
694
729
|
],
|
|
695
|
-
'& :where(.media-skin[data-theme="
|
|
730
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-seek-indicator)[data-direction] .media-seek-indicator-icon': {
|
|
696
731
|
display: "block"
|
|
697
732
|
},
|
|
698
|
-
'& :where(.media-skin[data-theme="
|
|
733
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-seek-indicator)[data-direction="backward"] .media-seek-indicator-icon': {
|
|
699
734
|
scale: "-1 1"
|
|
700
735
|
},
|
|
701
|
-
'& :where(.media-skin[data-theme="
|
|
736
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-seek-indicator)[data-direction="backward"][data-starting-style] .media-seek-indicator-icon': {
|
|
702
737
|
translate: "var(--media-hidden-seek-offset) 0"
|
|
703
738
|
},
|
|
704
|
-
'& :where(.media-skin[data-theme="
|
|
739
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-seek-indicator)[data-direction="forward"][data-starting-style] .media-seek-indicator-icon': {
|
|
705
740
|
translate: "calc(var(--media-hidden-seek-offset) * -1) 0"
|
|
706
741
|
},
|
|
707
|
-
'& :where(.media-skin[data-theme="
|
|
742
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-seek-indicator):is([data-starting-style], [data-ending-style]) .media-seek-indicator-icon': {
|
|
708
743
|
opacity: "0"
|
|
709
744
|
},
|
|
710
|
-
'& :where(.media-skin[data-theme="
|
|
745
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-indicator-value': {
|
|
711
746
|
fontVariantNumeric: "tabular-nums"
|
|
712
747
|
},
|
|
713
|
-
'& :where(.media-skin[data-theme="
|
|
748
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator': {
|
|
714
749
|
pointerEvents: "none",
|
|
715
750
|
transformOrigin: "top",
|
|
716
751
|
backgroundImage: "var(--media-indicator-gradient)",
|
|
@@ -721,37 +756,37 @@ const e = {
|
|
|
721
756
|
textShadow: "0 1px 0 var(--media-shadow-current-color)",
|
|
722
757
|
insetInline: "0",
|
|
723
758
|
justifyContent: "center",
|
|
724
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
759
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
725
760
|
display: "flex",
|
|
726
761
|
position: "absolute",
|
|
727
762
|
top: "0"
|
|
728
763
|
},
|
|
729
|
-
'& :where(.media-skin[data-theme="
|
|
764
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator[data-ending-style]': {
|
|
730
765
|
translate: "0 var(--media-hidden-indicator-offset)"
|
|
731
766
|
},
|
|
732
767
|
"@media (pointer: coarse)": {
|
|
733
|
-
'& :where(.media-skin[data-theme="
|
|
768
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator': {
|
|
734
769
|
willChange: "translate, opacity",
|
|
735
770
|
transitionProperty: "translate, opacity"
|
|
736
771
|
}
|
|
737
772
|
},
|
|
738
773
|
"@media (pointer: fine) ": {
|
|
739
|
-
'& :where(.media-skin[data-theme="
|
|
774
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator': {
|
|
740
775
|
willChange: "translate, filter, opacity",
|
|
741
776
|
transitionProperty: "translate, filter, opacity"
|
|
742
777
|
}
|
|
743
778
|
},
|
|
744
|
-
'& :where(.media-skin[data-theme="
|
|
779
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator:is([data-starting-style], [data-ending-style])': {
|
|
745
780
|
opacity: "0",
|
|
746
781
|
transitionDuration: "var(--media-duration-indicator)",
|
|
747
|
-
transitionTimingFunction: "cubic-bezier(
|
|
782
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, 1, 1)"
|
|
748
783
|
},
|
|
749
784
|
"@media (pointer: fine) ": {
|
|
750
|
-
'& :where(.media-skin[data-theme="
|
|
785
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator:is([data-starting-style], [data-ending-style])': {
|
|
751
786
|
filter: "blur(var(--media-hidden-blur))"
|
|
752
787
|
}
|
|
753
788
|
},
|
|
754
|
-
'& :where(.media-skin[data-theme="
|
|
789
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator-content': {
|
|
755
790
|
justifyContent: "space-between",
|
|
756
791
|
alignItems: "center",
|
|
757
792
|
gap: "calc(var(--media-spacing) * 2)",
|
|
@@ -759,142 +794,138 @@ const e = {
|
|
|
759
794
|
paddingBlock: "var(--media-spacing)"
|
|
760
795
|
},
|
|
761
796
|
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)": {
|
|
762
|
-
'& :where(.media-skin[data-theme="
|
|
797
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-indicator-content': {
|
|
763
798
|
borderRadius: "var(--media-control-radius)",
|
|
764
799
|
backgroundColor: "var(--media-background)"
|
|
765
800
|
}
|
|
766
801
|
},
|
|
767
|
-
'& :where(.media-skin[data-theme="
|
|
802
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator': [
|
|
768
803
|
{
|
|
769
804
|
padding: "calc(var(--media-spacing) * 4)",
|
|
770
805
|
textAlign: "center",
|
|
771
806
|
transitionProperty: "opacity, scale",
|
|
772
|
-
transitionDuration: "
|
|
807
|
+
transitionDuration: ".15s"
|
|
773
808
|
},
|
|
774
809
|
{
|
|
775
810
|
transitionDuration: "var(--media-duration-slow)",
|
|
776
811
|
gridRowStart: "1",
|
|
777
812
|
gridColumnStart: "2",
|
|
778
813
|
placeContent: "center",
|
|
779
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
814
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
780
815
|
display: "grid"
|
|
781
816
|
}
|
|
782
817
|
],
|
|
783
|
-
'& :where(.media-skin[data-theme="
|
|
818
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator[data-ending-style]': {
|
|
784
819
|
transitionDuration: "var(--media-duration-fast)",
|
|
785
|
-
transitionTimingFunction: "cubic-bezier(
|
|
820
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, 1, 1)"
|
|
786
821
|
},
|
|
787
|
-
'& :where(.media-skin[data-theme="
|
|
822
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator:is([data-starting-style], [data-ending-style])': {
|
|
788
823
|
scale: "var(--media-hidden-playback-scale) var(--media-hidden-playback-scale)",
|
|
789
824
|
opacity: "0"
|
|
790
825
|
},
|
|
791
|
-
'& :where(.media-skin[data-theme="
|
|
826
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator-pause-icon': [
|
|
792
827
|
{
|
|
793
828
|
width: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 2)",
|
|
794
829
|
height: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 2)",
|
|
795
830
|
scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
|
|
796
831
|
opacity: "0",
|
|
797
832
|
transitionProperty: "opacity, scale",
|
|
798
|
-
transitionDuration: "
|
|
833
|
+
transitionDuration: ".15s"
|
|
799
834
|
},
|
|
800
835
|
{
|
|
801
836
|
transitionDuration: "var(--media-duration)",
|
|
802
837
|
gridRowStart: "1",
|
|
803
838
|
gridColumnStart: "1",
|
|
804
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
839
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
805
840
|
}
|
|
806
841
|
],
|
|
807
|
-
'& :where(.media-skin[data-theme="
|
|
842
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator)[data-status="pause"] .media-playback-status-indicator-pause-icon': {
|
|
808
843
|
opacity: "1",
|
|
809
844
|
scale: "1"
|
|
810
845
|
},
|
|
811
|
-
'& :where(.media-skin[data-theme="
|
|
846
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator-play-icon': [
|
|
812
847
|
{
|
|
813
848
|
width: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 2)",
|
|
814
849
|
height: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 2)",
|
|
815
850
|
scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
|
|
816
851
|
opacity: "0",
|
|
817
852
|
transitionProperty: "opacity, scale",
|
|
818
|
-
transitionDuration: "
|
|
853
|
+
transitionDuration: ".15s"
|
|
819
854
|
},
|
|
820
855
|
{
|
|
821
856
|
transitionDuration: "var(--media-duration)",
|
|
822
857
|
gridRowStart: "1",
|
|
823
858
|
gridColumnStart: "1",
|
|
824
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
859
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
825
860
|
}
|
|
826
861
|
],
|
|
827
|
-
'& :where(.media-skin[data-theme="
|
|
862
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-playback-status-indicator)[data-status="play"] .media-playback-status-indicator-play-icon': {
|
|
828
863
|
opacity: "1",
|
|
829
864
|
scale: "1"
|
|
830
865
|
},
|
|
831
|
-
'& :where(.media-skin[data-theme="
|
|
866
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-captions-off-icon': {
|
|
832
867
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
833
868
|
flexShrink: "0",
|
|
834
869
|
display: "none"
|
|
835
870
|
},
|
|
836
|
-
'& :where(.media-skin[data-theme="
|
|
871
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-status-indicator)[data-status="captions-off"] .media-status-indicator-captions-off-icon': {
|
|
837
872
|
display: "block"
|
|
838
873
|
},
|
|
839
|
-
'& :where(.media-skin[data-theme="
|
|
874
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-captions-on-icon': {
|
|
840
875
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
841
876
|
flexShrink: "0",
|
|
842
877
|
display: "none"
|
|
843
878
|
},
|
|
844
|
-
'& :where(.media-skin[data-theme="
|
|
879
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-status-indicator)[data-status="captions-on"] .media-status-indicator-captions-on-icon': {
|
|
845
880
|
display: "block"
|
|
846
881
|
},
|
|
847
|
-
'& :where(.media-skin[data-theme="
|
|
882
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-content': {
|
|
848
883
|
display: "flex"
|
|
849
884
|
},
|
|
850
|
-
'& :where(.media-skin[data-theme="
|
|
885
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-fullscreen-enter-icon': {
|
|
851
886
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
852
887
|
flexShrink: "0",
|
|
853
888
|
display: "none"
|
|
854
889
|
},
|
|
855
|
-
'& :where(.media-skin[data-theme="
|
|
890
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-status-indicator)[data-status="fullscreen"] .media-status-indicator-fullscreen-enter-icon': {
|
|
856
891
|
display: "block"
|
|
857
892
|
},
|
|
858
|
-
'& :where(.media-skin[data-theme="
|
|
893
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-fullscreen-exit-icon': {
|
|
859
894
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
860
895
|
flexShrink: "0",
|
|
861
896
|
display: "none"
|
|
862
897
|
},
|
|
863
|
-
'& :where(.media-skin[data-theme="
|
|
898
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-status-indicator)[data-status="exit-fullscreen"] .media-status-indicator-fullscreen-exit-icon': {
|
|
864
899
|
display: "block"
|
|
865
900
|
},
|
|
866
|
-
'& :where(.media-skin[data-theme="
|
|
901
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-pip-enter-icon': {
|
|
867
902
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
868
903
|
flexShrink: "0",
|
|
869
904
|
display: "none"
|
|
870
905
|
},
|
|
871
|
-
'& :where(.media-skin[data-theme="
|
|
906
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-status-indicator)[data-status="pip"] .media-status-indicator-pip-enter-icon': {
|
|
872
907
|
display: "block"
|
|
873
908
|
},
|
|
874
|
-
'& :where(.media-skin[data-theme="
|
|
909
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-pip-exit-icon': {
|
|
875
910
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
876
911
|
flexShrink: "0",
|
|
877
912
|
display: "none"
|
|
878
913
|
},
|
|
879
|
-
'& :where(.media-skin[data-theme="
|
|
914
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-status-indicator)[data-status="exit-pip"] .media-status-indicator-pip-exit-icon': {
|
|
880
915
|
display: "block"
|
|
881
916
|
},
|
|
882
|
-
'& :where(.media-skin[data-theme="
|
|
917
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-status-indicator-value': {
|
|
883
918
|
marginLeft: "auto"
|
|
884
919
|
},
|
|
885
|
-
|
|
886
|
-
"@media (pointer: fine) ": {},
|
|
887
|
-
"@media (pointer: fine) ": {},
|
|
888
|
-
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {},
|
|
889
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-volume-indicator-fill': {
|
|
920
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-fill': {
|
|
890
921
|
borderRadius: "inherit",
|
|
891
922
|
gridTemplateColumns: "auto minmax(0, 1fr) auto",
|
|
892
923
|
width: "min(80%, 14rem)",
|
|
893
924
|
display: "grid",
|
|
894
925
|
transform: "translateX(0)"
|
|
895
926
|
},
|
|
896
|
-
'& :where(.media-skin[data-theme="
|
|
897
|
-
height: "calc(var(--media-spacing) *
|
|
927
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-fill:before': {
|
|
928
|
+
height: "calc(var(--media-spacing) * .75)",
|
|
898
929
|
content: '""',
|
|
899
930
|
width: "100%",
|
|
900
931
|
boxShadow: "0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 0 var(--media-shadow-subtle-current-color)",
|
|
@@ -904,17 +935,17 @@ const e = {
|
|
|
904
935
|
gridColumnStart: "2"
|
|
905
936
|
},
|
|
906
937
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
907
|
-
'& :where(.media-skin[data-theme="
|
|
938
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-fill:before': {
|
|
908
939
|
backgroundColor: "color-mix(in oklab, currentcolor 20%, transparent)"
|
|
909
940
|
}
|
|
910
941
|
},
|
|
911
|
-
'& :where(.media-skin[data-theme="
|
|
942
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-fill:after': [
|
|
912
943
|
{
|
|
913
|
-
height: "calc(var(--media-spacing) *
|
|
944
|
+
height: "calc(var(--media-spacing) * .75)",
|
|
914
945
|
width: "var(--media-volume-fill, 0%)",
|
|
915
946
|
backgroundColor: "var(--media-primary)",
|
|
916
947
|
transitionProperty: "width",
|
|
917
|
-
transitionDuration: "
|
|
948
|
+
transitionDuration: ".15s"
|
|
918
949
|
},
|
|
919
950
|
{
|
|
920
951
|
transitionDuration: "var(--media-duration-slow)",
|
|
@@ -927,46 +958,46 @@ const e = {
|
|
|
927
958
|
}
|
|
928
959
|
],
|
|
929
960
|
"@media (prefers-reduced-motion: no-preference)": {
|
|
930
|
-
'& :where(.media-skin[data-theme="
|
|
931
|
-
transition: "transform
|
|
932
|
-
transform: "translateX(
|
|
961
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-volume-indicator):is([data-min], [data-max]):not([data-starting-style], [data-ending-style]) .media-volume-indicator-fill': {
|
|
962
|
+
transition: "transform .3s linear(0, -24 20%, 16 40%, -8 60%, 4 80%, 1)",
|
|
963
|
+
transform: "translateX(.25px)"
|
|
933
964
|
}
|
|
934
965
|
},
|
|
935
|
-
'& :where(.media-skin[data-theme="
|
|
966
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-high-icon': {
|
|
936
967
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
937
968
|
flexShrink: "0",
|
|
938
969
|
gridRowStart: "1",
|
|
939
970
|
gridColumnStart: "1",
|
|
940
971
|
display: "none"
|
|
941
972
|
},
|
|
942
|
-
'& :where(.media-skin[data-theme="
|
|
973
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-volume-indicator)[data-level="high"] .media-volume-indicator-high-icon': {
|
|
943
974
|
display: "block"
|
|
944
975
|
},
|
|
945
|
-
'& :where(.media-skin[data-theme="
|
|
976
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-low-icon': {
|
|
946
977
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
947
978
|
flexShrink: "0",
|
|
948
979
|
gridRowStart: "1",
|
|
949
980
|
gridColumnStart: "1",
|
|
950
981
|
display: "none"
|
|
951
982
|
},
|
|
952
|
-
'& :where(.media-skin[data-theme="
|
|
983
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-volume-indicator)[data-level="low"] .media-volume-indicator-low-icon': {
|
|
953
984
|
display: "block"
|
|
954
985
|
},
|
|
955
|
-
'& :where(.media-skin[data-theme="
|
|
986
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-off-icon': {
|
|
956
987
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
957
988
|
flexShrink: "0",
|
|
958
989
|
gridRowStart: "1",
|
|
959
990
|
gridColumnStart: "1",
|
|
960
991
|
display: "none"
|
|
961
992
|
},
|
|
962
|
-
'& :where(.media-skin[data-theme="
|
|
993
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-volume-indicator)[data-level="off"] .media-volume-indicator-off-icon': {
|
|
963
994
|
display: "block"
|
|
964
995
|
},
|
|
965
|
-
'& :where(.media-skin[data-theme="
|
|
996
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-indicator-value': {
|
|
966
997
|
gridRowStart: "1",
|
|
967
998
|
gridColumnStart: "3"
|
|
968
999
|
},
|
|
969
|
-
'& :where(.media-skin[data-theme="
|
|
1000
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-status-indicators': {
|
|
970
1001
|
pointerEvents: "none",
|
|
971
1002
|
zIndex: "20",
|
|
972
1003
|
color: "var(--media-controls-foreground)",
|
|
@@ -976,129 +1007,113 @@ const e = {
|
|
|
976
1007
|
position: "absolute",
|
|
977
1008
|
inset: "0"
|
|
978
1009
|
},
|
|
979
|
-
'& :where(.media-skin[data-theme="
|
|
1010
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-airplay-button:not([data-airplay-state="connected"])': {
|
|
980
1011
|
"--media-icon-airplay-fill-animation": "none",
|
|
981
1012
|
"--media-icon-airplay-triangle-animation": "none"
|
|
982
1013
|
},
|
|
983
|
-
'& :where(.media-skin[data-theme="
|
|
1014
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-airplay-button-enter-icon': {
|
|
984
1015
|
opacity: "0"
|
|
985
1016
|
},
|
|
986
|
-
'& :where(.media-skin[data-theme="
|
|
1017
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-airplay-button):not([data-airplay-state="connected"]) .media-airplay-button-enter-icon': {
|
|
987
1018
|
opacity: "1",
|
|
988
1019
|
scale: "1"
|
|
989
1020
|
},
|
|
990
|
-
'& :where(.media-skin[data-theme="
|
|
1021
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-airplay-button-exit-icon': {
|
|
991
1022
|
opacity: "0"
|
|
992
1023
|
},
|
|
993
|
-
'& :where(.media-skin[data-theme="
|
|
1024
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-airplay-button)[data-airplay-state="connected"] .media-airplay-button-exit-icon': {
|
|
994
1025
|
opacity: "1",
|
|
995
1026
|
scale: "1"
|
|
996
1027
|
},
|
|
997
|
-
'& :where(.media-skin[data-theme="
|
|
1028
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button-icon': [
|
|
998
1029
|
{
|
|
999
1030
|
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
1000
1031
|
height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
1001
1032
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
1002
1033
|
transitionProperty: "opacity, scale",
|
|
1003
|
-
transitionDuration: "
|
|
1034
|
+
transitionDuration: ".15s"
|
|
1004
1035
|
},
|
|
1005
1036
|
{
|
|
1006
1037
|
transitionDuration: "var(--media-duration)",
|
|
1007
1038
|
textShadow: "inherit",
|
|
1008
1039
|
gridRowStart: "1",
|
|
1009
1040
|
gridColumnStart: "1",
|
|
1010
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1041
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
1011
1042
|
}
|
|
1012
1043
|
],
|
|
1013
|
-
'& :where(.media-skin[data-theme="
|
|
1044
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup': {
|
|
1014
1045
|
color: "inherit",
|
|
1015
1046
|
borderStyle: "solid",
|
|
1016
1047
|
borderWidth: "0",
|
|
1017
1048
|
margin: "0",
|
|
1018
1049
|
overflow: "visible"
|
|
1019
1050
|
},
|
|
1020
|
-
'& :where(.media-skin[data-theme="
|
|
1051
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup[data-ending-style]': {
|
|
1021
1052
|
transform: "none"
|
|
1022
1053
|
},
|
|
1023
|
-
'& :where(.media-skin[data-theme="
|
|
1054
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup[data-starting-style]': {
|
|
1024
1055
|
transform: "translate(var(--media-popup-translate-x-distance, 0), var(--media-popup-translate-y-distance, 0))",
|
|
1025
1056
|
filter: "none"
|
|
1026
1057
|
},
|
|
1027
|
-
'& :where(.media-skin[data-theme="
|
|
1058
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup[data-side="bottom"]': {
|
|
1028
1059
|
transformOrigin: "top",
|
|
1029
1060
|
"--media-popup-translate-y-distance": "calc(var(--media-popup-translate-distance) * -1)"
|
|
1030
1061
|
},
|
|
1031
|
-
'& :where(.media-skin[data-theme="
|
|
1062
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup[data-side="left"]': {
|
|
1032
1063
|
transformOrigin: "100%",
|
|
1033
1064
|
"--media-popup-translate-x-distance": "var(--media-popup-translate-distance)"
|
|
1034
1065
|
},
|
|
1035
|
-
'& :where(.media-skin[data-theme="
|
|
1066
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup[data-side="right"]': {
|
|
1036
1067
|
transformOrigin: "0",
|
|
1037
1068
|
"--media-popup-translate-x-distance": "calc(var(--media-popup-translate-distance) * -1)"
|
|
1038
1069
|
},
|
|
1039
|
-
'& :where(.media-skin[data-theme="
|
|
1070
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup[data-side="top"]': {
|
|
1040
1071
|
transformOrigin: "bottom",
|
|
1041
1072
|
"--media-popup-translate-y-distance": "var(--media-popup-translate-distance)"
|
|
1042
1073
|
},
|
|
1043
|
-
'& :where(.media-skin[data-theme="
|
|
1074
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup:is([data-starting-style], [data-ending-style])': {
|
|
1044
1075
|
scale: "var(--media-hidden-popup-scale) var(--media-hidden-popup-scale)",
|
|
1045
1076
|
opacity: "0",
|
|
1046
1077
|
filter: "blur(var(--media-hidden-popup-blur))"
|
|
1047
1078
|
},
|
|
1048
|
-
'& :where(.media-skin[data-theme="
|
|
1079
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-safe-area:before': {
|
|
1049
1080
|
pointerEvents: "auto",
|
|
1050
1081
|
content: '""',
|
|
1051
1082
|
position: "absolute"
|
|
1052
1083
|
},
|
|
1053
|
-
'& :where(.media-skin[data-theme="
|
|
1084
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-safe-area[data-side="bottom"]:before': {
|
|
1054
1085
|
content: '""',
|
|
1055
1086
|
height: "var(--media-popup-side-offset)",
|
|
1056
1087
|
insetInline: "0",
|
|
1057
1088
|
bottom: "100%"
|
|
1058
1089
|
},
|
|
1059
|
-
'& :where(.media-skin[data-theme="
|
|
1090
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-safe-area[data-side="left"]:before': {
|
|
1060
1091
|
content: '""',
|
|
1061
1092
|
width: "var(--media-popup-side-offset)",
|
|
1062
1093
|
insetBlock: "0",
|
|
1063
1094
|
left: "100%"
|
|
1064
1095
|
},
|
|
1065
|
-
'& :where(.media-skin[data-theme="
|
|
1096
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-safe-area[data-side="right"]:before': {
|
|
1066
1097
|
content: '""',
|
|
1067
1098
|
width: "var(--media-popup-side-offset)",
|
|
1068
1099
|
insetBlock: "0",
|
|
1069
1100
|
right: "100%"
|
|
1070
1101
|
},
|
|
1071
|
-
'& :where(.media-skin[data-theme="
|
|
1102
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-safe-area[data-side="top"]:before': {
|
|
1072
1103
|
content: '""',
|
|
1073
1104
|
height: "var(--media-popup-side-offset)",
|
|
1074
1105
|
insetInline: "0",
|
|
1075
1106
|
top: "100%"
|
|
1076
1107
|
},
|
|
1077
|
-
'& :where(.media-skin[data-theme="
|
|
1078
|
-
backgroundColor: "var(--media-popover)",
|
|
1079
|
-
color: "var(--media-popover-foreground)",
|
|
1080
|
-
boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
|
|
1081
|
-
backdropFilter: "var(--media-backdrop-filter-surface)"
|
|
1082
|
-
},
|
|
1083
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-popup-surface:after': {
|
|
1084
|
-
zIndex: "10",
|
|
1085
|
-
pointerEvents: "none",
|
|
1086
|
-
borderRadius: "inherit",
|
|
1087
|
-
boxShadow: "var(--media-shadow-surface-inset)",
|
|
1088
|
-
content: '""',
|
|
1089
|
-
display: "none",
|
|
1090
|
-
position: "absolute",
|
|
1091
|
-
inset: "0"
|
|
1092
|
-
},
|
|
1093
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-popup-transition': {
|
|
1108
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-transition': {
|
|
1094
1109
|
transitionProperty: "opacity, filter, transform, scale",
|
|
1095
1110
|
transitionDuration: "var(--media-duration-fast)",
|
|
1096
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1111
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
1097
1112
|
},
|
|
1098
|
-
'& :where(.media-skin[data-theme="
|
|
1113
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-transition[data-ending-style]': {
|
|
1099
1114
|
transitionDuration: "var(--media-duration-instant)"
|
|
1100
1115
|
},
|
|
1101
|
-
'& :where(.media-skin[data-theme="
|
|
1116
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-tooltip': {
|
|
1102
1117
|
borderRadius: "var(--media-control-radius)",
|
|
1103
1118
|
paddingInline: "calc(var(--media-spacing) * 2)",
|
|
1104
1119
|
paddingBlock: "var(--media-spacing)",
|
|
@@ -1107,12 +1122,12 @@ const e = {
|
|
|
1107
1122
|
"--media-popup-side-offset": "var(--media-tooltip-side-offset)",
|
|
1108
1123
|
boxShadow: "0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--media-shadow-tooltip) !important"
|
|
1109
1124
|
},
|
|
1110
|
-
'& :where(.media-skin[data-theme="
|
|
1125
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-tooltip[data-open]': {
|
|
1111
1126
|
alignItems: "center",
|
|
1112
1127
|
gap: "var(--media-spacing)",
|
|
1113
1128
|
display: "flex"
|
|
1114
1129
|
},
|
|
1115
|
-
'& :where(.media-skin[data-theme="
|
|
1130
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-tooltip-shortcut': {
|
|
1116
1131
|
borderRadius: "var(--media-spacing)",
|
|
1117
1132
|
backgroundColor: "var(--media-muted)",
|
|
1118
1133
|
textAlign: "center",
|
|
@@ -1120,17 +1135,18 @@ const e = {
|
|
|
1120
1135
|
fontFamily: "inherit",
|
|
1121
1136
|
fontSize: "calc(var(--media-spacing) * 2.75)",
|
|
1122
1137
|
marginInlineEnd: "calc(var(--media-spacing) * -1)",
|
|
1123
|
-
padding: "
|
|
1138
|
+
padding: ".1em",
|
|
1124
1139
|
fontWeight: "600",
|
|
1125
1140
|
lineHeight: "1.25"
|
|
1126
1141
|
},
|
|
1127
|
-
'& :where(.media-skin[data-theme="
|
|
1142
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-surface': {
|
|
1128
1143
|
backgroundColor: "var(--media-popover)",
|
|
1129
1144
|
color: "var(--media-popover-foreground)",
|
|
1130
1145
|
boxShadow: "0 0 0 1px var(--media-surface-border, var(--media-border)), var(--media-shadow-surface)",
|
|
1146
|
+
WebkitBackdropFilter: "var(--media-backdrop-filter-surface)",
|
|
1131
1147
|
backdropFilter: "var(--media-backdrop-filter-surface)"
|
|
1132
1148
|
},
|
|
1133
|
-
'& :where(.media-skin[data-theme="
|
|
1149
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-popup-surface:after': {
|
|
1134
1150
|
zIndex: "10",
|
|
1135
1151
|
pointerEvents: "none",
|
|
1136
1152
|
borderRadius: "inherit",
|
|
@@ -1140,113 +1156,113 @@ const e = {
|
|
|
1140
1156
|
position: "absolute",
|
|
1141
1157
|
inset: "0"
|
|
1142
1158
|
},
|
|
1143
|
-
'& :where(.media-skin[data-theme="
|
|
1159
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-captions-button-off-icon': {
|
|
1144
1160
|
opacity: "0"
|
|
1145
1161
|
},
|
|
1146
|
-
'& :where(.media-skin[data-theme="
|
|
1162
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-captions-button):not([data-active]) .media-captions-button-off-icon': {
|
|
1147
1163
|
opacity: "1",
|
|
1148
1164
|
scale: "1"
|
|
1149
1165
|
},
|
|
1150
|
-
'& :where(.media-skin[data-theme="
|
|
1166
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-captions-button-on-icon': {
|
|
1151
1167
|
opacity: "0"
|
|
1152
1168
|
},
|
|
1153
|
-
'& :where(.media-skin[data-theme="
|
|
1169
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-captions-button)[data-active] .media-captions-button-on-icon': {
|
|
1154
1170
|
opacity: "1",
|
|
1155
1171
|
scale: "1"
|
|
1156
1172
|
},
|
|
1157
|
-
'& :where(.media-skin[data-theme="
|
|
1173
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-cast-button-enter-icon': {
|
|
1158
1174
|
opacity: "0"
|
|
1159
1175
|
},
|
|
1160
|
-
'& :where(.media-skin[data-theme="
|
|
1176
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-cast-button):not([data-cast-state="connected"]) .media-cast-button-enter-icon': {
|
|
1161
1177
|
opacity: "1",
|
|
1162
1178
|
scale: "1"
|
|
1163
1179
|
},
|
|
1164
|
-
'& :where(.media-skin[data-theme="
|
|
1180
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-cast-button-exit-icon': {
|
|
1165
1181
|
opacity: "0"
|
|
1166
1182
|
},
|
|
1167
|
-
'& :where(.media-skin[data-theme="
|
|
1183
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-cast-button)[data-cast-state="connected"] .media-cast-button-exit-icon': {
|
|
1168
1184
|
opacity: "1",
|
|
1169
1185
|
scale: "1"
|
|
1170
1186
|
},
|
|
1171
|
-
'& :where(.media-skin[data-theme="
|
|
1187
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-fullscreen-button-enter-icon': {
|
|
1172
1188
|
opacity: "0"
|
|
1173
1189
|
},
|
|
1174
|
-
'& :where(.media-skin[data-theme="
|
|
1190
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-fullscreen-button):not([data-fullscreen]) .media-fullscreen-button-enter-icon': {
|
|
1175
1191
|
opacity: "1",
|
|
1176
1192
|
scale: "1"
|
|
1177
1193
|
},
|
|
1178
|
-
'& :where(.media-skin[data-theme="
|
|
1194
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-fullscreen-button-exit-icon': {
|
|
1179
1195
|
opacity: "0"
|
|
1180
1196
|
},
|
|
1181
|
-
'& :where(.media-skin[data-theme="
|
|
1197
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-fullscreen-button)[data-fullscreen] .media-fullscreen-button-exit-icon': {
|
|
1182
1198
|
opacity: "1",
|
|
1183
1199
|
scale: "1"
|
|
1184
1200
|
},
|
|
1185
|
-
'& :where(.media-skin[data-theme="
|
|
1201
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-pip-button-enter-icon': {
|
|
1186
1202
|
opacity: "0"
|
|
1187
1203
|
},
|
|
1188
|
-
'& :where(.media-skin[data-theme="
|
|
1204
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-pip-button):not([data-pip]) .media-pip-button-enter-icon': {
|
|
1189
1205
|
opacity: "1",
|
|
1190
1206
|
scale: "1"
|
|
1191
1207
|
},
|
|
1192
|
-
'& :where(.media-skin[data-theme="
|
|
1208
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-pip-button-exit-icon': {
|
|
1193
1209
|
opacity: "0"
|
|
1194
1210
|
},
|
|
1195
|
-
'& :where(.media-skin[data-theme="
|
|
1211
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-pip-button)[data-pip] .media-pip-button-exit-icon': {
|
|
1196
1212
|
opacity: "1",
|
|
1197
1213
|
scale: "1"
|
|
1198
1214
|
},
|
|
1199
|
-
'& :where(.media-skin[data-theme="
|
|
1215
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-play-button-pause-icon': {
|
|
1200
1216
|
scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
|
|
1201
1217
|
opacity: "0"
|
|
1202
1218
|
},
|
|
1203
|
-
'& :where(.media-skin[data-theme="
|
|
1219
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-play-button)[data-started]:not([data-paused]):not([data-ended]) .media-play-button-pause-icon': {
|
|
1204
1220
|
opacity: "1",
|
|
1205
1221
|
scale: "1"
|
|
1206
1222
|
},
|
|
1207
|
-
'& :where(.media-skin[data-theme="
|
|
1223
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-play-button-play-icon': {
|
|
1208
1224
|
scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
|
|
1209
1225
|
opacity: "0"
|
|
1210
1226
|
},
|
|
1211
|
-
'& :where(.media-skin[data-theme="
|
|
1227
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-play-button):not([data-ended]):not([data-started]) .media-play-button-play-icon, & :where(:where(.media-skin[data-theme="neutral"]) .media-play-button):not([data-ended])[data-paused] .media-play-button-play-icon': {
|
|
1212
1228
|
opacity: "1",
|
|
1213
1229
|
scale: "1"
|
|
1214
1230
|
},
|
|
1215
|
-
'& :where(.media-skin[data-theme="
|
|
1231
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-play-button-restart-icon': {
|
|
1216
1232
|
scale: "var(--media-hidden-icon-scale) var(--media-hidden-icon-scale)",
|
|
1217
1233
|
opacity: "0"
|
|
1218
1234
|
},
|
|
1219
|
-
'& :where(.media-skin[data-theme="
|
|
1235
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-play-button)[data-ended] .media-play-button-restart-icon': {
|
|
1220
1236
|
opacity: "1",
|
|
1221
1237
|
scale: "1"
|
|
1222
1238
|
},
|
|
1223
|
-
'& :where(.media-skin[data-theme="
|
|
1239
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-mute-button-high-icon': {
|
|
1224
1240
|
opacity: "0"
|
|
1225
1241
|
},
|
|
1226
|
-
'& :where(.media-skin[data-theme="
|
|
1242
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-mute-button):not([data-muted]):not([data-volume-level="low"]) .media-mute-button-high-icon': {
|
|
1227
1243
|
opacity: "1",
|
|
1228
1244
|
scale: "1"
|
|
1229
1245
|
},
|
|
1230
|
-
'& :where(.media-skin[data-theme="
|
|
1246
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-mute-button-low-icon': {
|
|
1231
1247
|
opacity: "0"
|
|
1232
1248
|
},
|
|
1233
|
-
'& :where(.media-skin[data-theme="
|
|
1249
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-mute-button):not([data-muted])[data-volume-level="low"] .media-mute-button-low-icon': {
|
|
1234
1250
|
opacity: "1",
|
|
1235
1251
|
scale: "1"
|
|
1236
1252
|
},
|
|
1237
|
-
'& :where(.media-skin[data-theme="
|
|
1253
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-mute-button-off-icon': {
|
|
1238
1254
|
opacity: "0"
|
|
1239
1255
|
},
|
|
1240
|
-
'& :where(.media-skin[data-theme="
|
|
1256
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-mute-button)[data-muted] .media-mute-button-off-icon': {
|
|
1241
1257
|
opacity: "1",
|
|
1242
1258
|
scale: "1"
|
|
1243
1259
|
},
|
|
1244
|
-
'& :where(.media-skin[data-theme="
|
|
1260
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer': {
|
|
1245
1261
|
pointerEvents: "none",
|
|
1246
1262
|
position: "absolute",
|
|
1247
1263
|
inset: "0"
|
|
1248
1264
|
},
|
|
1249
|
-
'& :where(.media-skin[data-theme="
|
|
1265
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer:before': {
|
|
1250
1266
|
borderRadius: "var(--media-control-radius)",
|
|
1251
1267
|
content: '""',
|
|
1252
1268
|
backgroundColor: "currentColor",
|
|
@@ -1255,36 +1271,36 @@ const e = {
|
|
|
1255
1271
|
position: "absolute"
|
|
1256
1272
|
},
|
|
1257
1273
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
1258
|
-
'& :where(.media-skin[data-theme="
|
|
1274
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer:before': {
|
|
1259
1275
|
backgroundColor: "color-mix(in oklab, currentcolor 20%, transparent)"
|
|
1260
1276
|
}
|
|
1261
1277
|
},
|
|
1262
|
-
'& :where(.media-skin[data-theme="
|
|
1278
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer[data-orientation="horizontal"]': {
|
|
1263
1279
|
left: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
|
|
1264
|
-
right: "max(
|
|
1280
|
+
right: "max(calc(100% - var(--media-slider-buffer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
|
|
1265
1281
|
clipPath: "inset(-1px 0)"
|
|
1266
1282
|
},
|
|
1267
|
-
'& :where(.media-skin[data-theme="
|
|
1283
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer[data-orientation="horizontal"]:before': {
|
|
1268
1284
|
content: '""',
|
|
1269
1285
|
minWidth: "var(--media-spacing)",
|
|
1270
1286
|
left: "0"
|
|
1271
1287
|
},
|
|
1272
|
-
'& :where(.media-skin[data-theme="
|
|
1288
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer[data-orientation="vertical"]': {
|
|
1273
1289
|
bottom: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
|
|
1274
|
-
top: "max(
|
|
1290
|
+
top: "max(calc(100% - var(--media-slider-buffer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
|
|
1275
1291
|
clipPath: "inset(0 -1px)"
|
|
1276
1292
|
},
|
|
1277
|
-
'& :where(.media-skin[data-theme="
|
|
1293
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-buffer[data-orientation="vertical"]:before': {
|
|
1278
1294
|
content: '""',
|
|
1279
1295
|
minHeight: "var(--media-spacing)",
|
|
1280
1296
|
bottom: "0"
|
|
1281
1297
|
},
|
|
1282
|
-
'& :where(.media-skin[data-theme="
|
|
1298
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-fill': {
|
|
1283
1299
|
pointerEvents: "none",
|
|
1284
1300
|
position: "absolute",
|
|
1285
1301
|
inset: "0"
|
|
1286
1302
|
},
|
|
1287
|
-
'& :where(.media-skin[data-theme="
|
|
1303
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-fill:before': {
|
|
1288
1304
|
borderRadius: "var(--media-control-radius)",
|
|
1289
1305
|
content: '""',
|
|
1290
1306
|
backgroundColor: "var(--media-primary)",
|
|
@@ -1292,40 +1308,40 @@ const e = {
|
|
|
1292
1308
|
height: "100%",
|
|
1293
1309
|
position: "absolute"
|
|
1294
1310
|
},
|
|
1295
|
-
'& :where(.media-skin[data-theme="
|
|
1311
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-fill[data-orientation="horizontal"]': {
|
|
1296
1312
|
left: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
|
|
1297
|
-
right: "max(
|
|
1313
|
+
right: "max(calc(100% - var(--media-slider-fill, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
|
|
1298
1314
|
clipPath: "inset(-1px 0)"
|
|
1299
1315
|
},
|
|
1300
|
-
'& :where(.media-skin[data-theme="
|
|
1316
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider)[data-dragging] .media-slider-fill[data-orientation="horizontal"]': {
|
|
1301
1317
|
left: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
|
|
1302
|
-
right: "max(
|
|
1318
|
+
right: "max(calc(100% - var(--media-slider-pointer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
|
|
1303
1319
|
clipPath: "inset(-1px 0)"
|
|
1304
1320
|
},
|
|
1305
|
-
'& :where(.media-skin[data-theme="
|
|
1321
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-fill[data-orientation="horizontal"]:before': {
|
|
1306
1322
|
content: '""',
|
|
1307
1323
|
minWidth: "var(--media-spacing)",
|
|
1308
1324
|
left: "0"
|
|
1309
1325
|
},
|
|
1310
|
-
'& :where(.media-skin[data-theme="
|
|
1326
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-fill[data-orientation="vertical"]': {
|
|
1311
1327
|
bottom: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
|
|
1312
|
-
top: "max(
|
|
1328
|
+
top: "max(calc(100% - var(--media-slider-fill, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
|
|
1313
1329
|
clipPath: "inset(0 -1px)"
|
|
1314
1330
|
},
|
|
1315
|
-
'& :where(.media-skin[data-theme="
|
|
1316
|
-
bottom: "calc(
|
|
1317
|
-
top: "max(
|
|
1331
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider)[data-dragging] .media-slider-fill[data-orientation="vertical"]': {
|
|
1332
|
+
bottom: "calc(var(--media-slider-chapter-start, 0%) + var(--media-spacing) * var(--media-chapter-inset-start, 0))",
|
|
1333
|
+
top: "max(calc(100% - var(--media-slider-pointer, 0%)), calc(100% - var(--media-slider-chapter-end, 100%) + var(--media-spacing) * var(--media-chapter-inset-end, 0)))",
|
|
1318
1334
|
clipPath: "inset(0 -1px)"
|
|
1319
1335
|
},
|
|
1320
|
-
'& :where(.media-skin[data-theme="
|
|
1336
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-fill[data-orientation="vertical"]:before': {
|
|
1321
1337
|
content: '""',
|
|
1322
1338
|
minHeight: "var(--media-spacing)",
|
|
1323
1339
|
bottom: "0"
|
|
1324
1340
|
},
|
|
1325
|
-
'& :where(.media-skin[data-theme="
|
|
1341
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumb': [
|
|
1326
1342
|
{
|
|
1327
1343
|
top: "50%",
|
|
1328
|
-
left: "var(--media-slider-fill)",
|
|
1344
|
+
left: "var(--media-slider-fill, 0%)",
|
|
1329
1345
|
zIndex: "10",
|
|
1330
1346
|
width: "calc(var(--media-spacing) * 3)",
|
|
1331
1347
|
height: "calc(var(--media-spacing) * 3)",
|
|
@@ -1333,7 +1349,7 @@ const e = {
|
|
|
1333
1349
|
boxShadow: "0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, var(--media-shadow-thumb)",
|
|
1334
1350
|
outlineOffset: "-2px",
|
|
1335
1351
|
transitionProperty: "opacity, height, width, outline-offset, scale",
|
|
1336
|
-
transitionDuration: "
|
|
1352
|
+
transitionDuration: ".15s"
|
|
1337
1353
|
},
|
|
1338
1354
|
{
|
|
1339
1355
|
transitionDuration: "var(--media-duration-slider)",
|
|
@@ -1341,29 +1357,29 @@ const e = {
|
|
|
1341
1357
|
userSelect: "none",
|
|
1342
1358
|
backgroundColor: "#fff",
|
|
1343
1359
|
outline: "2px solid #0000",
|
|
1344
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1360
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1345
1361
|
position: "absolute",
|
|
1346
1362
|
translate: "-50% -50%"
|
|
1347
1363
|
}
|
|
1348
1364
|
],
|
|
1349
|
-
'& :where(.media-skin[data-theme="
|
|
1350
|
-
scale: "
|
|
1365
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider)[data-dragging] .media-slider-thumb': {
|
|
1366
|
+
scale: ".9"
|
|
1351
1367
|
},
|
|
1352
|
-
'& :where(.media-skin[data-theme="
|
|
1368
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumb:focus-visible': {
|
|
1353
1369
|
outlineOffset: "2px",
|
|
1354
1370
|
outlineColor: "var(--media-ring)"
|
|
1355
1371
|
},
|
|
1356
|
-
'& :where(.media-skin[data-theme="
|
|
1372
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider)[data-dragging] .media-slider-thumb[data-orientation="horizontal"]': {
|
|
1357
1373
|
left: "var(--media-slider-pointer)"
|
|
1358
1374
|
},
|
|
1359
|
-
'& :where(.media-skin[data-theme="
|
|
1360
|
-
top: "calc(100% - var(--media-slider-fill))",
|
|
1375
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumb[data-orientation="vertical"]': {
|
|
1376
|
+
top: "calc(100% - var(--media-slider-fill, 0%))",
|
|
1361
1377
|
left: "50%"
|
|
1362
1378
|
},
|
|
1363
|
-
'& :where(.media-skin[data-theme="
|
|
1379
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider)[data-dragging] .media-slider-thumb[data-orientation="vertical"]': {
|
|
1364
1380
|
top: "calc(100% - var(--media-slider-pointer))"
|
|
1365
1381
|
},
|
|
1366
|
-
'& :where(.media-skin[data-theme="
|
|
1382
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-track': {
|
|
1367
1383
|
isolation: "isolate",
|
|
1368
1384
|
WebkitUserSelect: "none",
|
|
1369
1385
|
userSelect: "none",
|
|
@@ -1371,7 +1387,7 @@ const e = {
|
|
|
1371
1387
|
width: "100%",
|
|
1372
1388
|
position: "relative"
|
|
1373
1389
|
},
|
|
1374
|
-
'& :where(.media-skin[data-theme="
|
|
1390
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-track:before': {
|
|
1375
1391
|
pointerEvents: "none",
|
|
1376
1392
|
borderRadius: "var(--media-control-radius)",
|
|
1377
1393
|
content: '""',
|
|
@@ -1380,22 +1396,22 @@ const e = {
|
|
|
1380
1396
|
inset: "0"
|
|
1381
1397
|
},
|
|
1382
1398
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
1383
|
-
'& :where(.media-skin[data-theme="
|
|
1399
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-track:before': {
|
|
1384
1400
|
backgroundColor: "color-mix(in oklab, currentcolor 20%, transparent)"
|
|
1385
1401
|
}
|
|
1386
1402
|
},
|
|
1387
|
-
'& :where(.media-skin[data-theme="
|
|
1403
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-track[data-orientation="horizontal"]': {
|
|
1388
1404
|
height: "var(--media-spacing)"
|
|
1389
1405
|
},
|
|
1390
|
-
'& :where(.media-skin[data-theme="
|
|
1406
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-track[data-orientation="vertical"]': {
|
|
1391
1407
|
height: "100%",
|
|
1392
1408
|
width: "var(--media-spacing)"
|
|
1393
1409
|
},
|
|
1394
|
-
'& :where(.media-skin[data-theme="
|
|
1410
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider': [
|
|
1395
1411
|
{
|
|
1396
1412
|
cursor: "pointer",
|
|
1397
1413
|
transitionProperty: "--media-slider-fill, --media-slider-buffer",
|
|
1398
|
-
transitionDuration: "
|
|
1414
|
+
transitionDuration: ".15s"
|
|
1399
1415
|
},
|
|
1400
1416
|
{
|
|
1401
1417
|
transitionDuration: "var(--media-duration-slider)",
|
|
@@ -1404,43 +1420,43 @@ const e = {
|
|
|
1404
1420
|
flex: "1",
|
|
1405
1421
|
justifyContent: "center",
|
|
1406
1422
|
alignItems: "center",
|
|
1407
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1423
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1408
1424
|
display: "flex",
|
|
1409
1425
|
position: "relative"
|
|
1410
1426
|
}
|
|
1411
1427
|
],
|
|
1412
1428
|
"@media (forced-colors: active) ": {
|
|
1413
|
-
'& :where(.media-skin[data-theme="
|
|
1429
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider': {
|
|
1414
1430
|
outlineOffset: "2px",
|
|
1415
1431
|
outline: "2px solid #0000"
|
|
1416
1432
|
}
|
|
1417
1433
|
},
|
|
1418
|
-
'& :where(.media-skin[data-theme="
|
|
1434
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider[data-disabled]': {
|
|
1419
1435
|
pointerEvents: "none"
|
|
1420
1436
|
},
|
|
1421
|
-
'& :where(.media-skin[data-theme="
|
|
1437
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider[data-dragging]': {
|
|
1422
1438
|
transitionDuration: "0s"
|
|
1423
1439
|
},
|
|
1424
|
-
'& :where(.media-skin[data-theme="
|
|
1440
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider[data-orientation="horizontal"]': {
|
|
1425
1441
|
height: "var(--media-slider-height, calc(var(--media-spacing) * 8))",
|
|
1426
1442
|
minWidth: "calc(var(--media-spacing) * 20)"
|
|
1427
1443
|
},
|
|
1428
|
-
'& :where(.media-skin[data-theme="
|
|
1444
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider[data-orientation="vertical"]': {
|
|
1429
1445
|
height: "calc(var(--media-spacing) * 20)",
|
|
1430
1446
|
width: "calc(var(--media-spacing) * 8)",
|
|
1431
1447
|
minWidth: "0"
|
|
1432
1448
|
},
|
|
1433
|
-
'& :where(.media-skin[data-theme="
|
|
1449
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-slider-thumb': {
|
|
1434
1450
|
opacity: "1",
|
|
1435
1451
|
scale: "1"
|
|
1436
1452
|
},
|
|
1437
|
-
'& :where(.media-skin[data-theme="
|
|
1453
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-popover': {
|
|
1438
1454
|
borderRadius: "var(--media-control-radius)",
|
|
1439
1455
|
paddingInline: "0",
|
|
1440
1456
|
paddingBlock: "calc(var(--media-spacing) * 3)",
|
|
1441
1457
|
"--media-popup-side-offset": "var(--media-popover-side-offset)"
|
|
1442
1458
|
},
|
|
1443
|
-
'& :where(.media-skin[data-theme="
|
|
1459
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-popover[data-side="left"]': {
|
|
1444
1460
|
backgroundImage: "linear-gradient(to left, var(--media-controls) 80%, transparent 100%)",
|
|
1445
1461
|
"--media-popover-side-offset": "0rem",
|
|
1446
1462
|
borderStyle: "solid",
|
|
@@ -1450,72 +1466,73 @@ const e = {
|
|
|
1450
1466
|
paddingInlineStart: "calc(var(--media-spacing) * 16)",
|
|
1451
1467
|
paddingInlineEnd: "calc(var(--media-spacing) * 2)",
|
|
1452
1468
|
boxShadow: "none !important",
|
|
1469
|
+
WebkitBackdropFilter: "none !important",
|
|
1453
1470
|
backdropFilter: "none !important",
|
|
1454
1471
|
backgroundColor: "#0000 !important"
|
|
1455
1472
|
},
|
|
1456
|
-
'& :where(.media-skin[data-theme="
|
|
1473
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-popover[data-side="left"]:after': {
|
|
1457
1474
|
content: '""',
|
|
1458
1475
|
display: "none"
|
|
1459
1476
|
},
|
|
1460
|
-
'& :where(.media-skin[data-theme="
|
|
1477
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-popover[data-side="right"]': {
|
|
1461
1478
|
padding: "0",
|
|
1462
1479
|
paddingInline: "calc(var(--media-spacing) * 3)",
|
|
1463
1480
|
"--media-popover-side-offset": "0rem",
|
|
1464
1481
|
borderRadius: "0",
|
|
1465
1482
|
boxShadow: "none !important",
|
|
1483
|
+
WebkitBackdropFilter: "none !important",
|
|
1466
1484
|
backdropFilter: "none !important",
|
|
1467
1485
|
backgroundColor: "#0000 !important"
|
|
1468
1486
|
},
|
|
1469
|
-
'& :where(.media-skin[data-theme="
|
|
1487
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-volume-popover[data-side="right"]:after': {
|
|
1470
1488
|
content: '""',
|
|
1471
1489
|
display: "none"
|
|
1472
1490
|
},
|
|
1473
|
-
|
|
1474
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-slider-preview': {
|
|
1491
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview': {
|
|
1475
1492
|
height: "var(--media-spacing)",
|
|
1476
1493
|
"--media-preview-end-inset": "calc(100cqi - 100%)",
|
|
1477
|
-
"--media-preview-left": "clamp(
|
|
1494
|
+
"--media-preview-left": "clamp(calc(var(--media-slider-preview-max-width) / 2), var(--media-slider-pointer), calc(100% - var(--media-slider-preview-max-width) / 2 + var(--media-preview-end-inset)))",
|
|
1478
1495
|
"--media-slider-preview-max-height": "var(--media-slider-preview-max-width)",
|
|
1479
1496
|
"--media-slider-preview-max-width": "min(calc(var(--media-spacing) * 28), 100cqi)",
|
|
1480
1497
|
minWidth: "100%",
|
|
1481
1498
|
position: "relative"
|
|
1482
1499
|
},
|
|
1483
|
-
'& :where(.media-skin[data-theme="
|
|
1500
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview:before': [
|
|
1484
1501
|
{
|
|
1485
1502
|
pointerEvents: "none",
|
|
1486
1503
|
zIndex: "1",
|
|
1487
1504
|
opacity: "0",
|
|
1488
1505
|
transitionProperty: "opacity, scale",
|
|
1489
|
-
transitionDuration: "
|
|
1506
|
+
transitionDuration: ".15s"
|
|
1490
1507
|
},
|
|
1491
1508
|
{
|
|
1492
1509
|
transitionDuration: "var(--media-duration-slow)",
|
|
1493
1510
|
content: '""',
|
|
1494
1511
|
backgroundColor: "currentColor",
|
|
1495
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1512
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1496
1513
|
position: "absolute",
|
|
1497
1514
|
translate: "-50% -50%",
|
|
1498
|
-
scale: "
|
|
1515
|
+
scale: ".5"
|
|
1499
1516
|
}
|
|
1500
1517
|
],
|
|
1501
1518
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
1502
|
-
'& :where(.media-skin[data-theme="
|
|
1519
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview:before': {
|
|
1503
1520
|
backgroundColor: "color-mix(in oklab, currentcolor 35%, transparent)"
|
|
1504
1521
|
}
|
|
1505
1522
|
},
|
|
1506
|
-
'& :where(.media-skin[data-theme="
|
|
1523
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview[data-pointing]:not([data-dragging]):before': {
|
|
1507
1524
|
content: '""',
|
|
1508
1525
|
opacity: "1",
|
|
1509
1526
|
scale: "1"
|
|
1510
1527
|
},
|
|
1511
|
-
'& :where(.media-skin[data-theme="
|
|
1528
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview[data-orientation="horizontal"]:before': {
|
|
1512
1529
|
top: "50%",
|
|
1513
1530
|
left: "var(--media-slider-pointer)",
|
|
1514
1531
|
height: "calc(var(--media-spacing) * 5)",
|
|
1515
1532
|
content: '""',
|
|
1516
1533
|
width: "1px"
|
|
1517
1534
|
},
|
|
1518
|
-
'& :where(.media-skin[data-theme="
|
|
1535
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview[data-orientation="vertical"]:before': {
|
|
1519
1536
|
top: "calc(100% - var(--media-slider-pointer))",
|
|
1520
1537
|
content: '""',
|
|
1521
1538
|
height: "1px",
|
|
@@ -1523,98 +1540,38 @@ const e = {
|
|
|
1523
1540
|
left: "50%"
|
|
1524
1541
|
},
|
|
1525
1542
|
"@container media-root (width >= 32rem)": {
|
|
1526
|
-
'& :where(.media-skin[data-theme="
|
|
1543
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview': {
|
|
1527
1544
|
"--media-slider-preview-max-width": "min(calc(var(--media-spacing) * 36), 100cqi)"
|
|
1528
1545
|
}
|
|
1529
1546
|
},
|
|
1530
|
-
"@container media-root (width >= 42rem)
|
|
1531
|
-
'& :where(.media-skin[data-theme="
|
|
1547
|
+
"@container media-root (width >= 42rem) ": {
|
|
1548
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview': {
|
|
1532
1549
|
"--media-preview-left": "var(--media-slider-pointer)",
|
|
1533
1550
|
"--media-slider-preview-max-width": "min(calc(var(--media-spacing) * 48), 100cqi)"
|
|
1534
1551
|
}
|
|
1535
1552
|
},
|
|
1536
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-slider-preview-content': [
|
|
1537
|
-
{
|
|
1538
|
-
maxWidth: "var(--media-slider-preview-max-width)",
|
|
1539
|
-
transformOrigin: "bottom",
|
|
1540
|
-
translate: "-50% var(--media-hidden-preview-offset)",
|
|
1541
|
-
scale: "var(--media-hidden-preview-scale) var(--media-hidden-preview-scale)",
|
|
1542
|
-
opacity: "0",
|
|
1543
|
-
filter: "blur(var(--media-hidden-blur))",
|
|
1544
|
-
transitionProperty: "filter, opacity, scale",
|
|
1545
|
-
transitionDuration: "0.15s"
|
|
1546
|
-
},
|
|
1547
|
-
{
|
|
1548
|
-
transitionDuration: "var(--media-duration)",
|
|
1549
|
-
transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
|
|
1550
|
-
position: "absolute"
|
|
1551
|
-
}
|
|
1552
|
-
],
|
|
1553
|
-
'& :where(.media-skin[data-theme="minimal"]) :where(.media-slider):has(:focus-visible) .media-slider-preview-content, & :where(.media-skin[data-theme="minimal"]) :where(.media-slider-preview)[data-pointing] .media-slider-preview-content': {
|
|
1554
|
-
opacity: "1",
|
|
1555
|
-
filter: "none",
|
|
1556
|
-
scale: "1"
|
|
1557
|
-
},
|
|
1558
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-slider-thumbnail': {
|
|
1559
|
-
pointerEvents: "none",
|
|
1560
|
-
bottom: "calc(100% + var(--media-slider-preview-offset))",
|
|
1561
|
-
left: "var(--media-preview-left, var(--media-slider-pointer))",
|
|
1562
|
-
maxHeight: "var(--media-slider-preview-max-height)",
|
|
1563
|
-
borderRadius: "var(--media-popup-radius)",
|
|
1564
|
-
backgroundColor: "var(--media-backdrop)",
|
|
1565
|
-
overflow: "hidden"
|
|
1566
|
-
},
|
|
1567
1553
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
1568
|
-
'& :where(.media-skin[data-theme="
|
|
1554
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail': {
|
|
1569
1555
|
backgroundColor: "color-mix(in oklab, var(--media-backdrop) 90%, transparent)"
|
|
1570
1556
|
}
|
|
1571
1557
|
},
|
|
1572
|
-
'& :where(.media-skin[data-theme="
|
|
1573
|
-
aspectRatio: "16 / 9",
|
|
1574
|
-
width: "var(--media-slider-preview-max-width)"
|
|
1575
|
-
},
|
|
1576
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-slider-thumbnail-image': [
|
|
1577
|
-
{
|
|
1578
|
-
transitionProperty: "opacity",
|
|
1579
|
-
transitionDuration: "0.15s"
|
|
1580
|
-
},
|
|
1581
|
-
{
|
|
1582
|
-
transitionDuration: "var(--media-duration)",
|
|
1583
|
-
transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
|
|
1584
|
-
display: "block"
|
|
1585
|
-
}
|
|
1586
|
-
],
|
|
1587
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-slider-thumbnail[data-loading] .media-slider-thumbnail-image': {
|
|
1558
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail)[data-loading] .media-slider-thumbnail-image': {
|
|
1588
1559
|
opacity: "0"
|
|
1589
1560
|
},
|
|
1590
|
-
'& :where(.media-skin[data-theme="
|
|
1591
|
-
{
|
|
1592
|
-
zIndex: "10",
|
|
1593
|
-
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
1594
|
-
height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
1595
|
-
opacity: "0",
|
|
1596
|
-
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
1597
|
-
transitionProperty: "opacity",
|
|
1598
|
-
transitionDuration: "0.15s"
|
|
1599
|
-
},
|
|
1600
|
-
{
|
|
1601
|
-
transitionDuration: "var(--media-duration)",
|
|
1602
|
-
transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
|
|
1603
|
-
position: "absolute",
|
|
1604
|
-
top: "50%",
|
|
1605
|
-
left: "50%",
|
|
1606
|
-
translate: "-50% -50%"
|
|
1607
|
-
}
|
|
1608
|
-
],
|
|
1609
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-slider-thumbnail:not([data-loading]) .media-slider-thumbnail-spinner-icon': {
|
|
1561
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail):not([data-loading]) .media-slider-thumbnail-spinner-icon': {
|
|
1610
1562
|
"--media-spinner-animation": "none"
|
|
1611
1563
|
},
|
|
1612
|
-
'& :where(.media-skin[data-theme="
|
|
1564
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail)[data-loading] .media-slider-thumbnail-spinner-icon': {
|
|
1613
1565
|
opacity: "1"
|
|
1614
1566
|
},
|
|
1615
|
-
'& :where(.media-skin[data-theme="
|
|
1616
|
-
"--media-
|
|
1617
|
-
|
|
1567
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider[data-playing]': {
|
|
1568
|
+
transitionProperty: "--media-slider-buffer",
|
|
1569
|
+
transitionDuration: ".15s",
|
|
1570
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)"
|
|
1571
|
+
},
|
|
1572
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter': {
|
|
1573
|
+
"--media-chapter-inset-end": ".5",
|
|
1574
|
+
"--media-chapter-inset-start": ".5",
|
|
1618
1575
|
justifyContent: "center",
|
|
1619
1576
|
alignItems: "center",
|
|
1620
1577
|
minWidth: "0",
|
|
@@ -1623,65 +1580,65 @@ const e = {
|
|
|
1623
1580
|
position: "absolute",
|
|
1624
1581
|
inset: "0"
|
|
1625
1582
|
},
|
|
1626
|
-
'& :where(.media-skin[data-theme="
|
|
1583
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter:first-of-type': {
|
|
1627
1584
|
"--media-chapter-inset-start": "0"
|
|
1628
1585
|
},
|
|
1629
|
-
'& :where(.media-skin[data-theme="
|
|
1586
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter:last-of-type': {
|
|
1630
1587
|
"--media-chapter-inset-end": "0"
|
|
1631
1588
|
},
|
|
1632
|
-
'& :where(.media-skin[data-theme="
|
|
1589
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter[data-orientation="horizontal"]': {
|
|
1633
1590
|
clipPath: "inset(0 calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start))"
|
|
1634
1591
|
},
|
|
1635
|
-
'& :where(.media-skin[data-theme="
|
|
1592
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter[data-orientation="vertical"]': {
|
|
1636
1593
|
clipPath: "inset(calc(100% - var(--media-slider-chapter-end)) 0 var(--media-slider-chapter-start) 0)"
|
|
1637
1594
|
},
|
|
1638
|
-
'& :where(.media-skin[data-theme="
|
|
1595
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-layer[data-orientation="horizontal"]:before': {
|
|
1639
1596
|
content: '""',
|
|
1640
1597
|
minWidth: "calc(var(--media-spacing) * 1.75)"
|
|
1641
1598
|
},
|
|
1642
|
-
'& :where(.media-skin[data-theme="
|
|
1599
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-layer[data-orientation="vertical"]:before': {
|
|
1643
1600
|
content: '""',
|
|
1644
1601
|
minHeight: "calc(var(--media-spacing) * 1.75)"
|
|
1645
1602
|
},
|
|
1646
|
-
'& :where(.media-skin[data-theme="
|
|
1603
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter-title': {
|
|
1647
1604
|
maxWidth: "var(--media-slider-preview-max-width)",
|
|
1648
1605
|
textOverflow: "ellipsis",
|
|
1649
1606
|
whiteSpace: "nowrap",
|
|
1650
1607
|
minWidth: "0",
|
|
1651
1608
|
overflow: "hidden"
|
|
1652
1609
|
},
|
|
1653
|
-
'& :where(.media-skin[data-theme="
|
|
1610
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter-title:empty': {
|
|
1654
1611
|
display: "none"
|
|
1655
1612
|
},
|
|
1656
|
-
'& :where(.media-skin[data-theme="
|
|
1613
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter-track': [
|
|
1657
1614
|
{
|
|
1658
1615
|
transitionProperty: "height, width",
|
|
1659
|
-
transitionDuration: "
|
|
1616
|
+
transitionDuration: ".15s"
|
|
1660
1617
|
},
|
|
1661
1618
|
{
|
|
1662
1619
|
transitionDuration: "var(--media-duration-slow)",
|
|
1663
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1620
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
1664
1621
|
}
|
|
1665
1622
|
],
|
|
1666
|
-
'& :where(.media-skin[data-theme="
|
|
1623
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-track[data-orientation="horizontal"]': {
|
|
1667
1624
|
height: "calc(var(--media-spacing) * 1.75)"
|
|
1668
1625
|
},
|
|
1669
|
-
'& :where(.media-skin[data-theme="
|
|
1626
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter-track[data-orientation="horizontal"]:before': {
|
|
1670
1627
|
content: '""',
|
|
1671
1628
|
left: "calc(var(--media-slider-chapter-start) + var(--media-spacing) * var(--media-chapter-inset-start))",
|
|
1672
1629
|
right: "calc(100% - var(--media-slider-chapter-end) + var(--media-spacing) * var(--media-chapter-inset-end))",
|
|
1673
1630
|
clipPath: "inset(-1px)"
|
|
1674
1631
|
},
|
|
1675
|
-
'& :where(.media-skin[data-theme="
|
|
1632
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter)[data-highlighted] .media-time-slider-chapter-track[data-orientation="vertical"]': {
|
|
1676
1633
|
width: "calc(var(--media-spacing) * 1.75)"
|
|
1677
1634
|
},
|
|
1678
|
-
'& :where(.media-skin[data-theme="
|
|
1635
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapter-track[data-orientation="vertical"]:before': {
|
|
1679
1636
|
content: '""',
|
|
1680
1637
|
top: "calc(100% - var(--media-slider-chapter-end) + var(--media-spacing) * var(--media-chapter-inset-end))",
|
|
1681
1638
|
bottom: "calc(var(--media-slider-chapter-start) + var(--media-spacing) * var(--media-chapter-inset-start))",
|
|
1682
1639
|
clipPath: "inset(-1px)"
|
|
1683
1640
|
},
|
|
1684
|
-
'& :where(.media-skin[data-theme="
|
|
1641
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-chapters': {
|
|
1685
1642
|
borderRadius: "inherit",
|
|
1686
1643
|
flex: "1",
|
|
1687
1644
|
alignItems: "center",
|
|
@@ -1692,7 +1649,7 @@ const e = {
|
|
|
1692
1649
|
display: "flex",
|
|
1693
1650
|
position: "relative"
|
|
1694
1651
|
},
|
|
1695
|
-
'& :where(.media-skin[data-theme="
|
|
1652
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-preview-content': {
|
|
1696
1653
|
bottom: "calc(100% + var(--media-slider-preview-label-offset))",
|
|
1697
1654
|
left: "var(--media-preview-left, var(--media-slider-pointer))",
|
|
1698
1655
|
justifyContent: "center",
|
|
@@ -1701,29 +1658,29 @@ const e = {
|
|
|
1701
1658
|
flexDirection: "row-reverse",
|
|
1702
1659
|
display: "flex"
|
|
1703
1660
|
},
|
|
1704
|
-
'& :where(.media-skin[data-theme="
|
|
1661
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-thumb': {
|
|
1705
1662
|
opacity: "0",
|
|
1706
|
-
scale: "
|
|
1663
|
+
scale: ".7"
|
|
1707
1664
|
},
|
|
1708
|
-
'& :where(.media-skin[data-theme="
|
|
1665
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-thumb:focus-visible': {
|
|
1709
1666
|
opacity: "1"
|
|
1710
1667
|
},
|
|
1711
|
-
'& :where(.media-skin[data-theme="
|
|
1668
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-thumb[data-interactive]': {
|
|
1712
1669
|
opacity: "1",
|
|
1713
1670
|
scale: "1"
|
|
1714
1671
|
},
|
|
1715
|
-
"@media (pointer: fine)
|
|
1672
|
+
"@media (pointer: fine) ": {
|
|
1716
1673
|
"@media (hover: hover)": {
|
|
1717
|
-
'& :where(.media-skin[data-theme="
|
|
1674
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-slider):hover .media-time-slider-thumb': {
|
|
1718
1675
|
opacity: "1",
|
|
1719
1676
|
scale: "1"
|
|
1720
1677
|
}
|
|
1721
1678
|
}
|
|
1722
1679
|
},
|
|
1723
|
-
'& :where(.media-skin[data-theme="
|
|
1680
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-time-slider-value': {
|
|
1724
1681
|
fontVariantNumeric: "tabular-nums"
|
|
1725
1682
|
},
|
|
1726
|
-
'& :where(.media-skin[data-theme="
|
|
1683
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-preview-content': [
|
|
1727
1684
|
{
|
|
1728
1685
|
maxWidth: "var(--media-slider-preview-max-width)",
|
|
1729
1686
|
transformOrigin: "bottom",
|
|
@@ -1732,20 +1689,20 @@ const e = {
|
|
|
1732
1689
|
opacity: "0",
|
|
1733
1690
|
filter: "blur(var(--media-hidden-blur))",
|
|
1734
1691
|
transitionProperty: "filter, opacity, scale",
|
|
1735
|
-
transitionDuration: "
|
|
1692
|
+
transitionDuration: ".15s"
|
|
1736
1693
|
},
|
|
1737
1694
|
{
|
|
1738
1695
|
transitionDuration: "var(--media-duration)",
|
|
1739
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1696
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1740
1697
|
position: "absolute"
|
|
1741
1698
|
}
|
|
1742
1699
|
],
|
|
1743
|
-
'& :where(.media-skin[data-theme="
|
|
1700
|
+
'& :where(.media-skin[data-theme="neutral"]) :where(.media-slider):has(:focus-visible) .media-slider-preview-content, & :where(.media-skin[data-theme="neutral"]) :where(.media-slider-preview)[data-pointing] .media-slider-preview-content': {
|
|
1744
1701
|
opacity: "1",
|
|
1745
1702
|
filter: "none",
|
|
1746
1703
|
scale: "1"
|
|
1747
1704
|
},
|
|
1748
|
-
'& :where(.media-skin[data-theme="
|
|
1705
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail': {
|
|
1749
1706
|
pointerEvents: "none",
|
|
1750
1707
|
bottom: "calc(100% + var(--media-slider-preview-offset))",
|
|
1751
1708
|
left: "var(--media-preview-left, var(--media-slider-pointer))",
|
|
@@ -1755,29 +1712,29 @@ const e = {
|
|
|
1755
1712
|
overflow: "hidden"
|
|
1756
1713
|
},
|
|
1757
1714
|
"@supports (color: color-mix(in lab, red, red)) ": {
|
|
1758
|
-
'& :where(.media-skin[data-theme="
|
|
1715
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail': {
|
|
1759
1716
|
backgroundColor: "color-mix(in oklab, var(--media-backdrop) 90%, transparent)"
|
|
1760
1717
|
}
|
|
1761
1718
|
},
|
|
1762
|
-
'& :where(.media-skin[data-theme="
|
|
1719
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail[data-loading]': {
|
|
1763
1720
|
aspectRatio: "16 / 9",
|
|
1764
1721
|
width: "var(--media-slider-preview-max-width)"
|
|
1765
1722
|
},
|
|
1766
|
-
'& :where(.media-skin[data-theme="
|
|
1723
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail-image': [
|
|
1767
1724
|
{
|
|
1768
1725
|
transitionProperty: "opacity",
|
|
1769
|
-
transitionDuration: "
|
|
1726
|
+
transitionDuration: ".15s"
|
|
1770
1727
|
},
|
|
1771
1728
|
{
|
|
1772
1729
|
transitionDuration: "var(--media-duration)",
|
|
1773
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1730
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1774
1731
|
display: "block"
|
|
1775
1732
|
}
|
|
1776
1733
|
],
|
|
1777
|
-
'& :where(.media-skin[data-theme="
|
|
1734
|
+
'& :where(.media-skin[data-theme="neutral"]) :where(.media-slider-thumbnail)[data-loading] .media-slider-thumbnail-image': {
|
|
1778
1735
|
opacity: "0"
|
|
1779
1736
|
},
|
|
1780
|
-
'& :where(.media-skin[data-theme="
|
|
1737
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-slider-thumbnail-spinner-icon': [
|
|
1781
1738
|
{
|
|
1782
1739
|
zIndex: "10",
|
|
1783
1740
|
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
@@ -1785,24 +1742,24 @@ const e = {
|
|
|
1785
1742
|
opacity: "0",
|
|
1786
1743
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
1787
1744
|
transitionProperty: "opacity",
|
|
1788
|
-
transitionDuration: "
|
|
1745
|
+
transitionDuration: ".15s"
|
|
1789
1746
|
},
|
|
1790
1747
|
{
|
|
1791
1748
|
transitionDuration: "var(--media-duration)",
|
|
1792
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1749
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1793
1750
|
position: "absolute",
|
|
1794
1751
|
top: "50%",
|
|
1795
1752
|
left: "50%",
|
|
1796
1753
|
translate: "-50% -50%"
|
|
1797
1754
|
}
|
|
1798
1755
|
],
|
|
1799
|
-
'& :where(.media-skin[data-theme="
|
|
1756
|
+
'& :where(.media-skin[data-theme="neutral"]) :where(.media-slider-thumbnail):not([data-loading]) .media-slider-thumbnail-spinner-icon': {
|
|
1800
1757
|
"--media-spinner-animation": "none"
|
|
1801
1758
|
},
|
|
1802
|
-
'& :where(.media-skin[data-theme="
|
|
1759
|
+
'& :where(.media-skin[data-theme="neutral"]) :where(.media-slider-thumbnail)[data-loading] .media-slider-thumbnail-spinner-icon': {
|
|
1803
1760
|
opacity: "1"
|
|
1804
1761
|
},
|
|
1805
|
-
'& :where(.media-skin[data-theme="
|
|
1762
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-chevron': {
|
|
1806
1763
|
width: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 7 / 9)",
|
|
1807
1764
|
height: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 7 / 9)",
|
|
1808
1765
|
color: "var(--media-muted-foreground)",
|
|
@@ -1810,36 +1767,36 @@ const e = {
|
|
|
1810
1767
|
flexShrink: "0",
|
|
1811
1768
|
rotate: "180deg"
|
|
1812
1769
|
},
|
|
1813
|
-
'& :where(.media-skin[data-theme="
|
|
1770
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-menu-back-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-back-chevron': {
|
|
1814
1771
|
color: "inherit"
|
|
1815
1772
|
},
|
|
1816
|
-
'& :where(.media-skin[data-theme="
|
|
1773
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-chevron:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
1817
1774
|
rotate: "0deg",
|
|
1818
1775
|
scale: "1"
|
|
1819
1776
|
},
|
|
1820
|
-
'& :where(.media-skin[data-theme="
|
|
1777
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-forward-chevron': {
|
|
1821
1778
|
width: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 7 / 9)",
|
|
1822
1779
|
height: "calc(var(--media-icon-size, calc(var(--media-spacing) * 4.5)) * 7 / 9)",
|
|
1823
1780
|
color: "var(--media-muted-foreground)",
|
|
1824
1781
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
1825
1782
|
flexShrink: "0"
|
|
1826
1783
|
},
|
|
1827
|
-
'& :where(.media-skin[data-theme="
|
|
1784
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-forward-chevron': {
|
|
1828
1785
|
color: "inherit"
|
|
1829
1786
|
},
|
|
1830
|
-
'& :where(.media-skin[data-theme="
|
|
1787
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-forward-chevron:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
1831
1788
|
scale: "-1 1"
|
|
1832
1789
|
},
|
|
1833
|
-
'& :where(.media-skin[data-theme="
|
|
1790
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-item-indicator': {
|
|
1834
1791
|
opacity: "0",
|
|
1835
1792
|
flexShrink: "0",
|
|
1836
1793
|
marginInlineStart: "auto",
|
|
1837
1794
|
marginInlineEnd: "calc(var(--media-spacing) * -1)"
|
|
1838
1795
|
},
|
|
1839
|
-
'& :where(.media-skin[data-theme="
|
|
1796
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-menu-radio-item)[aria-checked="true"] .media-menu-item-indicator': {
|
|
1840
1797
|
opacity: "1"
|
|
1841
1798
|
},
|
|
1842
|
-
'& :where(.media-skin[data-theme="
|
|
1799
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item': [
|
|
1843
1800
|
{
|
|
1844
1801
|
cursor: "pointer",
|
|
1845
1802
|
justifyContent: "space-between",
|
|
@@ -1854,7 +1811,7 @@ const e = {
|
|
|
1854
1811
|
fontVariantNumeric: "tabular-nums",
|
|
1855
1812
|
outlineOffset: "-2px",
|
|
1856
1813
|
transitionProperty: "background-color, color",
|
|
1857
|
-
transitionDuration: "
|
|
1814
|
+
transitionDuration: ".15s"
|
|
1858
1815
|
},
|
|
1859
1816
|
{
|
|
1860
1817
|
transitionDuration: "var(--media-duration-fast)",
|
|
@@ -1862,52 +1819,52 @@ const e = {
|
|
|
1862
1819
|
userSelect: "none",
|
|
1863
1820
|
textShadow: "0 1px 0 var(--media-shadow-current-color)",
|
|
1864
1821
|
outline: "2px solid #0000",
|
|
1865
|
-
transitionTimingFunction: "cubic-bezier(
|
|
1822
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
|
|
1866
1823
|
display: "flex",
|
|
1867
1824
|
position: "relative"
|
|
1868
1825
|
}
|
|
1869
1826
|
],
|
|
1870
|
-
'& :where(.media-skin[data-theme="
|
|
1827
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item:focus-visible': {
|
|
1871
1828
|
outlineOffset: "2px",
|
|
1872
1829
|
outlineColor: "var(--media-ring)"
|
|
1873
1830
|
},
|
|
1874
|
-
'& :where(.media-skin[data-theme="
|
|
1831
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[aria-disabled="true"]': {
|
|
1875
1832
|
pointerEvents: "none",
|
|
1876
1833
|
cursor: "not-allowed",
|
|
1877
|
-
opacity: "
|
|
1834
|
+
opacity: ".5"
|
|
1878
1835
|
},
|
|
1879
|
-
'& :where(.media-skin[data-theme="
|
|
1836
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unavailable"], & :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-availability="unsupported"]': {
|
|
1880
1837
|
display: "none"
|
|
1881
1838
|
},
|
|
1882
|
-
'& :where(.media-skin[data-theme="
|
|
1839
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
1883
1840
|
backgroundColor: "var(--media-accent)",
|
|
1884
1841
|
color: "var(--media-accent-foreground)"
|
|
1885
1842
|
},
|
|
1886
1843
|
"@supports (top: anchor(top))": {
|
|
1887
|
-
'& :where(.media-skin[data-theme="
|
|
1844
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item': {
|
|
1888
1845
|
transitionDuration: "var(--media-duration-instant)"
|
|
1889
1846
|
},
|
|
1890
|
-
'& :where(.media-skin[data-theme="
|
|
1847
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item[data-highlighted]': {
|
|
1891
1848
|
anchorName: "--media-menu-item-highlight-anchor"
|
|
1892
1849
|
},
|
|
1893
|
-
'& :where(.media-skin[data-theme="
|
|
1850
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
1894
1851
|
transitionDuration: "var(--media-duration-slow)",
|
|
1895
1852
|
backgroundColor: "#0000"
|
|
1896
1853
|
}
|
|
1897
1854
|
},
|
|
1898
|
-
'& :where(.media-skin[data-theme="
|
|
1855
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-item-icon': {
|
|
1899
1856
|
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
1900
1857
|
height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
1901
1858
|
color: "var(--media-muted-foreground)",
|
|
1902
1859
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
1903
1860
|
flexShrink: "0"
|
|
1904
1861
|
},
|
|
1905
|
-
'& :where(.media-skin[data-theme="
|
|
1862
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-menu-radio-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-radio-item-icon': {
|
|
1906
1863
|
color: "inherit"
|
|
1907
1864
|
},
|
|
1908
|
-
'& :where(.media-skin[data-theme="
|
|
1865
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-item': [
|
|
1909
1866
|
{
|
|
1910
|
-
marginBottom: "calc(var(--media-spacing) *
|
|
1867
|
+
marginBottom: "calc(var(--media-spacing) * .5)",
|
|
1911
1868
|
cursor: "pointer",
|
|
1912
1869
|
alignItems: "center",
|
|
1913
1870
|
gap: "calc(var(--media-spacing) * 1.5)",
|
|
@@ -1919,7 +1876,7 @@ const e = {
|
|
|
1919
1876
|
whiteSpace: "nowrap",
|
|
1920
1877
|
outlineOffset: "-2px",
|
|
1921
1878
|
transitionProperty: "background-color, color",
|
|
1922
|
-
transitionDuration: "
|
|
1879
|
+
transitionDuration: ".15s"
|
|
1923
1880
|
},
|
|
1924
1881
|
{
|
|
1925
1882
|
transitionDuration: "var(--media-duration-fast)",
|
|
@@ -1927,89 +1884,89 @@ const e = {
|
|
|
1927
1884
|
userSelect: "none",
|
|
1928
1885
|
textShadow: "0 1px 0 var(--media-shadow-current-color)",
|
|
1929
1886
|
outline: "2px solid #0000",
|
|
1930
|
-
transitionTimingFunction: "cubic-bezier(
|
|
1887
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
|
|
1931
1888
|
display: "flex",
|
|
1932
1889
|
position: "relative"
|
|
1933
1890
|
}
|
|
1934
1891
|
],
|
|
1935
|
-
'& :where(.media-skin[data-theme="
|
|
1892
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-item:focus-visible': {
|
|
1936
1893
|
outlineOffset: "2px",
|
|
1937
1894
|
outlineColor: "var(--media-ring)"
|
|
1938
1895
|
},
|
|
1939
|
-
'& :where(.media-skin[data-theme="
|
|
1896
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
1940
1897
|
backgroundColor: "var(--media-accent)",
|
|
1941
1898
|
color: "var(--media-accent-foreground)"
|
|
1942
1899
|
},
|
|
1943
1900
|
"@supports (top: anchor(top)) ": {
|
|
1944
|
-
'& :where(.media-skin[data-theme="
|
|
1901
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-item': {
|
|
1945
1902
|
transitionDuration: "var(--media-duration-instant)"
|
|
1946
1903
|
},
|
|
1947
|
-
'& :where(.media-skin[data-theme="
|
|
1904
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-back-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
1948
1905
|
transitionDuration: "var(--media-duration-slow)"
|
|
1949
1906
|
}
|
|
1950
1907
|
},
|
|
1951
|
-
'& :where(.media-skin[data-theme="
|
|
1908
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content': [
|
|
1952
1909
|
{
|
|
1953
1910
|
maxHeight: "inherit",
|
|
1954
1911
|
overscrollBehavior: "none",
|
|
1955
1912
|
transitionProperty: "translate, filter",
|
|
1956
|
-
transitionDuration: "
|
|
1913
|
+
transitionDuration: ".15s"
|
|
1957
1914
|
},
|
|
1958
1915
|
{
|
|
1959
1916
|
transitionDuration: "var(--media-duration-menu)",
|
|
1960
1917
|
anchorScope: "--media-menu-item-highlight-anchor",
|
|
1961
1918
|
outlineStyle: "none",
|
|
1962
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
1919
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
1963
1920
|
position: "absolute",
|
|
1964
1921
|
overflow: "auto"
|
|
1965
1922
|
}
|
|
1966
1923
|
],
|
|
1967
|
-
"@media (forced-colors: active)
|
|
1968
|
-
'& :where(.media-skin[data-theme="
|
|
1924
|
+
"@media (forced-colors: active) ": {
|
|
1925
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content': {
|
|
1969
1926
|
outlineOffset: "2px",
|
|
1970
1927
|
outline: "2px solid #0000"
|
|
1971
1928
|
}
|
|
1972
1929
|
},
|
|
1973
|
-
'& :where(.media-skin[data-theme="
|
|
1930
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:not([data-submenu])': {
|
|
1974
1931
|
insetInline: "var(--media-spacing)",
|
|
1975
1932
|
top: "var(--media-spacing)",
|
|
1976
|
-
gap: "calc(var(--media-spacing) *
|
|
1933
|
+
gap: "calc(var(--media-spacing) * .5)",
|
|
1977
1934
|
flexDirection: "column",
|
|
1978
1935
|
display: "flex"
|
|
1979
1936
|
},
|
|
1980
|
-
'& :where(.media-skin[data-theme="
|
|
1937
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:not([data-submenu])[data-child-open]': {
|
|
1981
1938
|
filter: "blur(var(--media-hidden-blur))",
|
|
1982
1939
|
translate: "-100%"
|
|
1983
1940
|
},
|
|
1984
|
-
'& :where(.media-skin[data-theme="
|
|
1941
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:not([data-submenu])[data-child-open]:before': {
|
|
1985
1942
|
content: '""',
|
|
1986
1943
|
display: "none"
|
|
1987
1944
|
},
|
|
1988
|
-
'& :where(.media-skin[data-theme="
|
|
1945
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content[data-submenu]': {
|
|
1989
1946
|
zIndex: "10",
|
|
1990
1947
|
maxHeight: "inherit",
|
|
1991
1948
|
padding: "var(--media-spacing)",
|
|
1992
1949
|
insetInline: "0",
|
|
1993
1950
|
top: "0"
|
|
1994
1951
|
},
|
|
1995
|
-
'& :where(.media-skin[data-theme="
|
|
1952
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:not([data-submenu])[data-child-open]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
1996
1953
|
translate: "100%"
|
|
1997
1954
|
},
|
|
1998
|
-
'& :where(.media-skin[data-theme="
|
|
1955
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:is([data-starting-style], [data-ending-style]):before': {
|
|
1999
1956
|
content: '""',
|
|
2000
1957
|
display: "none"
|
|
2001
1958
|
},
|
|
2002
|
-
'& :where(.media-skin[data-theme="
|
|
1959
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content[data-submenu]:is([data-starting-style], [data-ending-style])': {
|
|
2003
1960
|
pointerEvents: "none",
|
|
2004
1961
|
filter: "blur(var(--media-hidden-blur))",
|
|
2005
1962
|
overflow: "hidden",
|
|
2006
1963
|
translate: "100%"
|
|
2007
1964
|
},
|
|
2008
|
-
'& :where(.media-skin[data-theme="
|
|
1965
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content[data-submenu]:is([data-starting-style], [data-ending-style]):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2009
1966
|
translate: "-100%"
|
|
2010
1967
|
},
|
|
2011
1968
|
"@supports (top: anchor(top)) ": {
|
|
2012
|
-
'& :where(.media-skin[data-theme="
|
|
1969
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:before': {
|
|
2013
1970
|
content: '""',
|
|
2014
1971
|
positionAnchor: "--media-menu-item-highlight-anchor",
|
|
2015
1972
|
inset: "anchor(inside)",
|
|
@@ -2020,48 +1977,43 @@ const e = {
|
|
|
2020
1977
|
transition: "inset var(--media-duration-fast) ease-in-out",
|
|
2021
1978
|
position: "absolute"
|
|
2022
1979
|
},
|
|
2023
|
-
'& :where(.media-skin[data-theme="
|
|
1980
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:has([data-highlighted=""]):before': {
|
|
2024
1981
|
content: '""',
|
|
2025
1982
|
transitionDuration: "0s"
|
|
2026
1983
|
}
|
|
2027
1984
|
},
|
|
2028
|
-
'& :where(.media-skin[data-theme="
|
|
1985
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-content:is([data-starting-style], [data-ending-style]) :before': {
|
|
2029
1986
|
content: '""',
|
|
2030
1987
|
display: "none"
|
|
2031
1988
|
},
|
|
2032
|
-
'& :where(.media-skin[data-theme="
|
|
1989
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-hint': {
|
|
2033
1990
|
alignItems: "center",
|
|
2034
1991
|
gap: "var(--media-spacing)",
|
|
2035
|
-
color: "currentColor",
|
|
2036
1992
|
minWidth: "0",
|
|
2037
1993
|
marginInlineStart: "auto",
|
|
2038
1994
|
paddingInlineStart: "calc(var(--media-spacing) * 2)",
|
|
2039
1995
|
display: "inline-flex"
|
|
2040
1996
|
},
|
|
2041
|
-
|
|
2042
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-menu-hint': {
|
|
2043
|
-
color: "color-mix(in oklab, currentcolor 65%, transparent)"
|
|
2044
|
-
}
|
|
2045
|
-
},
|
|
2046
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-menu-hint-label': {
|
|
1997
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-hint-label': {
|
|
2047
1998
|
maxWidth: "calc(var(--media-spacing) * 24)",
|
|
2048
1999
|
textOverflow: "ellipsis",
|
|
2049
2000
|
whiteSpace: "nowrap",
|
|
2001
|
+
opacity: ".65",
|
|
2050
2002
|
overflow: "hidden"
|
|
2051
2003
|
},
|
|
2052
|
-
'& :where(.media-skin[data-theme="
|
|
2004
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group': {
|
|
2053
2005
|
maxHeight: "inherit",
|
|
2054
|
-
gap: "calc(var(--media-spacing) *
|
|
2006
|
+
gap: "calc(var(--media-spacing) * .5)",
|
|
2055
2007
|
anchorScope: "--media-menu-item-highlight-anchor",
|
|
2056
2008
|
flexDirection: "column",
|
|
2057
2009
|
display: "flex"
|
|
2058
2010
|
},
|
|
2059
|
-
'& :where(.media-skin[data-theme="
|
|
2011
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group:is([data-starting-style], [data-ending-style]):before': {
|
|
2060
2012
|
content: '""',
|
|
2061
2013
|
display: "none"
|
|
2062
2014
|
},
|
|
2063
2015
|
"@supports (top: anchor(top)) ": {
|
|
2064
|
-
'& :where(.media-skin[data-theme="
|
|
2016
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group:before': {
|
|
2065
2017
|
content: '""',
|
|
2066
2018
|
positionAnchor: "--media-menu-item-highlight-anchor",
|
|
2067
2019
|
inset: "anchor(inside)",
|
|
@@ -2072,33 +2024,33 @@ const e = {
|
|
|
2072
2024
|
transition: "inset var(--media-duration-fast) ease-in-out",
|
|
2073
2025
|
position: "absolute"
|
|
2074
2026
|
},
|
|
2075
|
-
'& :where(.media-skin[data-theme="
|
|
2027
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group:has([data-highlighted=""]):before': {
|
|
2076
2028
|
content: '""',
|
|
2077
2029
|
transitionDuration: "0s"
|
|
2078
2030
|
}
|
|
2079
2031
|
},
|
|
2080
|
-
'& :where(.media-skin[data-theme="
|
|
2032
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-radio-group:is([data-starting-style], [data-ending-style]) :before': {
|
|
2081
2033
|
content: '""',
|
|
2082
2034
|
display: "none"
|
|
2083
2035
|
},
|
|
2084
|
-
'& :where(.media-skin[data-theme="
|
|
2036
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-separator': {
|
|
2085
2037
|
marginBlock: "var(--media-spacing)",
|
|
2086
2038
|
borderBottomStyle: "solid",
|
|
2087
2039
|
borderBottomWidth: "1px",
|
|
2088
2040
|
borderColor: "var(--media-border)",
|
|
2089
2041
|
display: "block"
|
|
2090
2042
|
},
|
|
2091
|
-
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)
|
|
2092
|
-
'& :where(.media-skin[data-theme="
|
|
2043
|
+
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {
|
|
2044
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-separator': {
|
|
2093
2045
|
borderColor: "var(--media-foreground)"
|
|
2094
2046
|
},
|
|
2095
2047
|
"@supports (color: color-mix(in lab, red, red))": {
|
|
2096
|
-
'& :where(.media-skin[data-theme="
|
|
2048
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-separator': {
|
|
2097
2049
|
borderColor: "color-mix(in oklab, var(--media-foreground) 25%, transparent)"
|
|
2098
2050
|
}
|
|
2099
2051
|
}
|
|
2100
2052
|
},
|
|
2101
|
-
'& :where(.media-skin[data-theme="
|
|
2053
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item': [
|
|
2102
2054
|
{
|
|
2103
2055
|
cursor: "pointer",
|
|
2104
2056
|
justifyContent: "space-between",
|
|
@@ -2113,7 +2065,7 @@ const e = {
|
|
|
2113
2065
|
fontVariantNumeric: "tabular-nums",
|
|
2114
2066
|
outlineOffset: "-2px",
|
|
2115
2067
|
transitionProperty: "background-color, color",
|
|
2116
|
-
transitionDuration: "
|
|
2068
|
+
transitionDuration: ".15s"
|
|
2117
2069
|
},
|
|
2118
2070
|
{
|
|
2119
2071
|
transitionDuration: "var(--media-duration-fast)",
|
|
@@ -2121,83 +2073,67 @@ const e = {
|
|
|
2121
2073
|
userSelect: "none",
|
|
2122
2074
|
textShadow: "0 1px 0 var(--media-shadow-current-color)",
|
|
2123
2075
|
outline: "2px solid #0000",
|
|
2124
|
-
transitionTimingFunction: "cubic-bezier(
|
|
2076
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)",
|
|
2125
2077
|
display: "flex",
|
|
2126
2078
|
position: "relative"
|
|
2127
2079
|
}
|
|
2128
2080
|
],
|
|
2129
|
-
'& :where(.media-skin[data-theme="
|
|
2081
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item:focus-visible': {
|
|
2130
2082
|
outlineOffset: "2px",
|
|
2131
2083
|
outlineColor: "var(--media-ring)"
|
|
2132
2084
|
},
|
|
2133
|
-
'& :where(.media-skin[data-theme="
|
|
2085
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item[aria-disabled="true"]': {
|
|
2134
2086
|
pointerEvents: "none",
|
|
2135
2087
|
cursor: "not-allowed",
|
|
2136
|
-
opacity: "
|
|
2088
|
+
opacity: ".5"
|
|
2137
2089
|
},
|
|
2138
|
-
'& :where(.media-skin[data-theme="
|
|
2090
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item[data-availability="unavailable"], & :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item[data-availability="unsupported"]': {
|
|
2139
2091
|
display: "none"
|
|
2140
2092
|
},
|
|
2141
|
-
'& :where(.media-skin[data-theme="
|
|
2093
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
2142
2094
|
backgroundColor: "var(--media-accent)",
|
|
2143
2095
|
color: "var(--media-accent-foreground)"
|
|
2144
2096
|
},
|
|
2145
2097
|
"@supports (top: anchor(top)) ": {
|
|
2146
|
-
'& :where(.media-skin[data-theme="
|
|
2098
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item': {
|
|
2147
2099
|
transitionDuration: "var(--media-duration-instant)"
|
|
2148
2100
|
},
|
|
2149
|
-
'& :where(.media-skin[data-theme="
|
|
2101
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item[data-highlighted]': {
|
|
2150
2102
|
anchorName: "--media-menu-item-highlight-anchor"
|
|
2151
2103
|
},
|
|
2152
|
-
'& :where(.media-skin[data-theme="
|
|
2104
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item:where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"]))': {
|
|
2153
2105
|
transitionDuration: "var(--media-duration-slow)",
|
|
2154
2106
|
backgroundColor: "#0000"
|
|
2155
2107
|
}
|
|
2156
2108
|
},
|
|
2157
|
-
'& :where(.media-skin[data-theme="
|
|
2109
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item-icon': {
|
|
2158
2110
|
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
2159
2111
|
height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
2160
2112
|
color: "var(--media-muted-foreground)",
|
|
2161
2113
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
2162
2114
|
flexShrink: "0"
|
|
2163
2115
|
},
|
|
2164
|
-
'& :where(.media-skin[data-theme="
|
|
2116
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-menu-trigger-item):where(:focus-visible, [aria-expanded="true"], [data-highlighted]):where(:not([aria-disabled="true"])) .media-menu-trigger-item-icon': {
|
|
2165
2117
|
color: "inherit"
|
|
2166
2118
|
},
|
|
2167
|
-
|
|
2168
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-menu-badge': {
|
|
2119
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-badge': {
|
|
2169
2120
|
borderRadius: "var(--media-control-radius)",
|
|
2170
2121
|
backgroundColor: "var(--media-accent)",
|
|
2171
2122
|
paddingInline: "calc(var(--media-spacing) * 1.5)",
|
|
2172
|
-
fontSize: "
|
|
2123
|
+
fontSize: ".7em",
|
|
2173
2124
|
fontWeight: "600"
|
|
2174
2125
|
},
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
"@supports (top: anchor(top)) ": {},
|
|
2179
|
-
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {
|
|
2180
|
-
"@supports (color: color-mix(in lab, red, red))": {}
|
|
2181
|
-
},
|
|
2182
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-menu-tier': {
|
|
2183
|
-
color: "currentColor",
|
|
2184
|
-
paddingInlineStart: "calc(var(--media-spacing) * 0.5)",
|
|
2126
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-tier': {
|
|
2127
|
+
opacity: ".7",
|
|
2128
|
+
paddingInlineStart: "calc(var(--media-spacing) * .5)",
|
|
2185
2129
|
paddingTop: "1px",
|
|
2186
|
-
fontSize: "
|
|
2130
|
+
fontSize: ".7em",
|
|
2187
2131
|
fontWeight: "600",
|
|
2188
2132
|
lineHeight: "1"
|
|
2189
2133
|
},
|
|
2190
|
-
|
|
2191
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-menu-tier': {
|
|
2192
|
-
color: "color-mix(in oklab, currentcolor 70%, transparent)"
|
|
2193
|
-
}
|
|
2194
|
-
},
|
|
2195
|
-
"@supports (top: anchor(top)) ": {},
|
|
2196
|
-
"@media (forced-colors: active) ": {},
|
|
2197
|
-
"@supports (top: anchor(top)) ": {},
|
|
2198
|
-
'& :where(.media-skin[data-theme="minimal"]) .media-menu-popup': {
|
|
2134
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-popup': {
|
|
2199
2135
|
height: "var(--media-menu-height)",
|
|
2200
|
-
maxHeight: "min(
|
|
2136
|
+
maxHeight: "min(var(--media-menu-available-height, calc(var(--media-spacing) * 56)), calc(var(--media-spacing) * 56))",
|
|
2201
2137
|
width: "var(--media-menu-width)",
|
|
2202
2138
|
maxWidth: "var(--media-menu-available-width)",
|
|
2203
2139
|
minWidth: "calc(var(--media-spacing) * 44)",
|
|
@@ -2210,37 +2146,37 @@ const e = {
|
|
|
2210
2146
|
borderStyle: "solid",
|
|
2211
2147
|
borderWidth: "0",
|
|
2212
2148
|
margin: "0",
|
|
2213
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2149
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
2214
2150
|
overflow: "hidden !important"
|
|
2215
2151
|
},
|
|
2216
|
-
'& :where(.media-skin[data-theme="
|
|
2152
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-popup:is([data-starting-style], [data-ending-style])': {
|
|
2217
2153
|
transitionProperty: "opacity, filter, transform, scale",
|
|
2218
2154
|
transitionDuration: "var(--media-duration-fast)",
|
|
2219
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2155
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
2220
2156
|
},
|
|
2221
|
-
'& :where(.media-skin[data-theme="
|
|
2157
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-menu-resizable-popup': {
|
|
2222
2158
|
transitionProperty: "opacity, filter, transform, scale, width, height",
|
|
2223
2159
|
transitionDuration: "var(--media-duration-fast), var(--media-duration-fast), var(--media-duration-fast), var(--media-duration-fast), var(--media-duration-menu), var(--media-duration-menu)"
|
|
2224
2160
|
},
|
|
2225
|
-
'& :where(.media-skin[data-theme="
|
|
2161
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-settings-menu-trigger-icon': [
|
|
2226
2162
|
{
|
|
2227
2163
|
transitionProperty: "transform, translate, scale, rotate",
|
|
2228
|
-
transitionDuration: "
|
|
2164
|
+
transitionDuration: ".15s"
|
|
2229
2165
|
},
|
|
2230
2166
|
{
|
|
2231
2167
|
transitionDuration: "var(--media-duration)",
|
|
2232
|
-
transitionTimingFunction: "cubic-bezier(
|
|
2168
|
+
transitionTimingFunction: "cubic-bezier(.4, 0, .2, 1)"
|
|
2233
2169
|
}
|
|
2234
2170
|
],
|
|
2235
|
-
'& :where(.media-skin[data-theme="
|
|
2171
|
+
'& :where(:where(.media-skin[data-theme="neutral"]) .media-settings-menu-trigger)[aria-expanded="true"] .media-settings-menu-trigger-icon': {
|
|
2236
2172
|
rotate: "90deg"
|
|
2237
2173
|
},
|
|
2238
2174
|
"@media (prefers-reduced-motion: reduce) ": {
|
|
2239
|
-
'& :where(.media-skin[data-theme="
|
|
2175
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-settings-menu-trigger-icon': {
|
|
2240
2176
|
transitionProperty: "none"
|
|
2241
2177
|
}
|
|
2242
2178
|
},
|
|
2243
|
-
'& :where(.media-skin[data-theme="
|
|
2179
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-settings-menu-trigger-label': {
|
|
2244
2180
|
clipPath: "inset(50%)",
|
|
2245
2181
|
whiteSpace: "nowrap",
|
|
2246
2182
|
borderWidth: "0",
|
|
@@ -2251,7 +2187,7 @@ const e = {
|
|
|
2251
2187
|
position: "absolute",
|
|
2252
2188
|
overflow: "hidden"
|
|
2253
2189
|
},
|
|
2254
|
-
'& :where(.media-skin[data-theme="
|
|
2190
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-button-icon-base': {
|
|
2255
2191
|
width: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
2256
2192
|
height: "var(--media-icon-size, calc(var(--media-spacing) * 4.5))",
|
|
2257
2193
|
filter: "drop-shadow(0 1px 0 var(--media-shadow-current-color))",
|
|
@@ -2259,34 +2195,34 @@ const e = {
|
|
|
2259
2195
|
gridRowStart: "1",
|
|
2260
2196
|
gridColumnStart: "1"
|
|
2261
2197
|
},
|
|
2262
|
-
'& :where(.media-skin[data-theme="
|
|
2198
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-backdrop': [
|
|
2263
2199
|
{
|
|
2264
2200
|
pointerEvents: "none",
|
|
2265
2201
|
zIndex: "10",
|
|
2266
2202
|
borderRadius: "inherit",
|
|
2267
2203
|
backgroundImage: "var(--media-controls-gradient)",
|
|
2268
2204
|
transitionProperty: "opacity",
|
|
2269
|
-
transitionDuration: "
|
|
2205
|
+
transitionDuration: ".15s"
|
|
2270
2206
|
},
|
|
2271
2207
|
{
|
|
2272
2208
|
transitionDuration: "var(--media-duration-controls)",
|
|
2273
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2209
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
2274
2210
|
position: "absolute",
|
|
2275
2211
|
inset: "0"
|
|
2276
2212
|
}
|
|
2277
2213
|
],
|
|
2278
|
-
'& :where(.media-skin[data-theme="
|
|
2214
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-backdrop:not([data-visible])': {
|
|
2279
2215
|
opacity: "0"
|
|
2280
2216
|
},
|
|
2281
2217
|
"@container media-root (width < 20rem)": {
|
|
2282
|
-
'& :where(.media-skin[data-theme="
|
|
2218
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-captions-button': {
|
|
2283
2219
|
display: "none"
|
|
2284
2220
|
}
|
|
2285
2221
|
},
|
|
2286
|
-
'& :where(.media-skin[data-theme="
|
|
2222
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content': [
|
|
2287
2223
|
{
|
|
2288
|
-
insetInline: "calc(var(--media-spacing) *
|
|
2289
|
-
bottom: "calc(var(--media-spacing) *
|
|
2224
|
+
insetInline: "calc(var(--media-spacing) * .5)",
|
|
2225
|
+
bottom: "calc(var(--media-spacing) * .5)",
|
|
2290
2226
|
zIndex: "30",
|
|
2291
2227
|
alignItems: "center",
|
|
2292
2228
|
columnGap: "calc(var(--media-spacing) * 2)",
|
|
@@ -2294,102 +2230,107 @@ const e = {
|
|
|
2294
2230
|
padding: "var(--media-spacing)",
|
|
2295
2231
|
color: "var(--media-controls-foreground)",
|
|
2296
2232
|
transitionProperty: "filter, opacity, translate",
|
|
2297
|
-
transitionDuration: "
|
|
2233
|
+
transitionDuration: ".15s"
|
|
2298
2234
|
},
|
|
2299
2235
|
{
|
|
2300
2236
|
transitionDuration: "calc(var(--media-duration-controls) / 2)",
|
|
2301
2237
|
textShadow: "0 1px 0 var(--media-shadow-current-color)",
|
|
2302
2238
|
backgroundColor: "#0000",
|
|
2303
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2239
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
2304
2240
|
display: "flex",
|
|
2305
2241
|
position: "absolute"
|
|
2306
2242
|
}
|
|
2307
2243
|
],
|
|
2308
|
-
'& :where(.media-skin[data-theme="
|
|
2244
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content:not([data-visible])': {
|
|
2309
2245
|
pointerEvents: "none",
|
|
2310
2246
|
translate: "0 var(--media-hidden-offset)",
|
|
2311
2247
|
opacity: "0",
|
|
2312
2248
|
transitionDuration: "var(--media-duration-controls)"
|
|
2313
2249
|
},
|
|
2314
|
-
'& :where(.media-skin[data-theme="
|
|
2250
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2315
2251
|
flexDirection: "row-reverse"
|
|
2316
2252
|
},
|
|
2317
|
-
"@media (pointer: fine)
|
|
2318
|
-
'& :where(.media-skin[data-theme="
|
|
2253
|
+
"@media (pointer: fine) ": {
|
|
2254
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content:not([data-visible])': {
|
|
2319
2255
|
filter: "blur(var(--media-hidden-blur))"
|
|
2320
2256
|
}
|
|
2321
2257
|
},
|
|
2322
|
-
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)
|
|
2323
|
-
'& :where(.media-skin[data-theme="
|
|
2258
|
+
"@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) ": {
|
|
2259
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content': {
|
|
2324
2260
|
backgroundColor: "var(--media-background)"
|
|
2325
2261
|
}
|
|
2326
2262
|
},
|
|
2327
|
-
"@container media-root (width >= 42rem)
|
|
2328
|
-
'& :where(.media-skin[data-theme="
|
|
2263
|
+
"@container media-root (width >= 42rem) ": {
|
|
2264
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content': {
|
|
2329
2265
|
insetInline: "calc(var(--media-spacing) * 2)",
|
|
2330
2266
|
bottom: "calc(var(--media-spacing) * 2)",
|
|
2331
2267
|
"--media-popover-side-offset": "calc(var(--media-spacing) * 3)",
|
|
2332
2268
|
"--media-tooltip-side-offset": "var(--media-popover-side-offset)"
|
|
2333
2269
|
}
|
|
2334
2270
|
},
|
|
2335
|
-
'& :where(.media-skin[data-theme="
|
|
2271
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-end': {
|
|
2336
2272
|
flex: "1",
|
|
2337
2273
|
justifyContent: "flex-end",
|
|
2338
2274
|
alignItems: "center",
|
|
2339
2275
|
gap: "1px",
|
|
2340
2276
|
display: "flex"
|
|
2341
2277
|
},
|
|
2342
|
-
'& :where(.media-skin[data-theme="
|
|
2278
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2343
2279
|
flexDirection: "row-reverse"
|
|
2344
2280
|
},
|
|
2345
|
-
"@container media-root (width >= 42rem)
|
|
2346
|
-
'& :where(.media-skin[data-theme="
|
|
2281
|
+
"@container media-root (width >= 42rem) ": {
|
|
2282
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-end': {
|
|
2347
2283
|
flex: "none"
|
|
2348
2284
|
}
|
|
2349
2285
|
},
|
|
2350
|
-
"@container media-root (width < 42rem)": {
|
|
2351
|
-
'& :where(.media-skin[data-theme="
|
|
2286
|
+
"@container media-root (width < 42rem) ": {
|
|
2287
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-end': {
|
|
2352
2288
|
transition: "mask-position var(--media-duration-instant) ease-out",
|
|
2289
|
+
WebkitMaskPosition: "100% 0",
|
|
2353
2290
|
maskPosition: "100% 0",
|
|
2291
|
+
WebkitMaskSize: "400% 100%",
|
|
2354
2292
|
maskSize: "400% 100%",
|
|
2293
|
+
WebkitMaskRepeat: "no-repeat",
|
|
2355
2294
|
maskRepeat: "no-repeat"
|
|
2356
2295
|
},
|
|
2357
|
-
'& :where(.media-skin[data-theme="
|
|
2296
|
+
'& :where(:where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content):has([data-volume-level][aria-expanded="true"]) .video-controls-end': {
|
|
2297
|
+
WebkitMaskImage: "linear-gradient(to right, #0000 10%, #000 25% 100%)",
|
|
2358
2298
|
maskImage: "linear-gradient(to right, #0000 10%, #000 25% 100%)",
|
|
2299
|
+
WebkitMaskPosition: "0 0",
|
|
2359
2300
|
maskPosition: "0 0"
|
|
2360
2301
|
}
|
|
2361
2302
|
},
|
|
2362
|
-
'& :where(.media-skin[data-theme="
|
|
2303
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-start': {
|
|
2363
2304
|
flex: "1",
|
|
2364
2305
|
alignItems: "center",
|
|
2365
2306
|
gap: "1px",
|
|
2366
2307
|
display: "flex"
|
|
2367
2308
|
},
|
|
2368
|
-
'& :where(.media-skin[data-theme="
|
|
2309
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-start:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2369
2310
|
flexDirection: "row-reverse"
|
|
2370
2311
|
},
|
|
2371
|
-
"@container media-root (width >= 42rem)
|
|
2372
|
-
'& :where(.media-skin[data-theme="
|
|
2312
|
+
"@container media-root (width >= 42rem) ": {
|
|
2313
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-start': {
|
|
2373
2314
|
flex: "none"
|
|
2374
2315
|
}
|
|
2375
2316
|
},
|
|
2376
|
-
'& :where(.media-skin[data-theme="
|
|
2317
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-trailing': {
|
|
2377
2318
|
alignItems: "center",
|
|
2378
2319
|
gap: "1px",
|
|
2379
2320
|
display: "flex"
|
|
2380
2321
|
},
|
|
2381
|
-
'& :where(.media-skin[data-theme="
|
|
2322
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-trailing:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2382
2323
|
flexDirection: "row-reverse"
|
|
2383
2324
|
},
|
|
2384
|
-
'& :where(.media-skin[data-theme="
|
|
2325
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-wrap': {
|
|
2385
2326
|
flexWrap: "wrap"
|
|
2386
2327
|
},
|
|
2387
|
-
"@container media-root (width >= 42rem)
|
|
2388
|
-
'& :where(.media-skin[data-theme="
|
|
2328
|
+
"@container media-root (width >= 42rem) ": {
|
|
2329
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-wrap': {
|
|
2389
2330
|
flexWrap: "nowrap"
|
|
2390
2331
|
}
|
|
2391
2332
|
},
|
|
2392
|
-
'& :where(.media-skin[data-theme="
|
|
2333
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-time-slider-group': {
|
|
2393
2334
|
alignItems: "center",
|
|
2394
2335
|
gap: "calc(var(--media-spacing) * 3)",
|
|
2395
2336
|
paddingInline: "calc(var(--media-spacing) * 1.5)",
|
|
@@ -2400,138 +2341,143 @@ const e = {
|
|
|
2400
2341
|
display: "flex",
|
|
2401
2342
|
container: "video-time-controls / inline-size"
|
|
2402
2343
|
},
|
|
2403
|
-
'& :where(.media-skin[data-theme="
|
|
2344
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-time-slider-group:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2404
2345
|
flexDirection: "row"
|
|
2405
2346
|
},
|
|
2406
|
-
"@container media-root (width >= 42rem)
|
|
2407
|
-
'& :where(.media-skin[data-theme="
|
|
2347
|
+
"@container media-root (width >= 42rem) ": {
|
|
2348
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-time-slider-group': {
|
|
2408
2349
|
minWidth: "0",
|
|
2409
2350
|
transition: "mask-position var(--media-duration-instant) ease-out",
|
|
2410
2351
|
"--media-slider-height": "calc(var(--media-spacing) * 8)",
|
|
2411
2352
|
flexDirection: "row",
|
|
2412
2353
|
flex: "1",
|
|
2413
2354
|
order: "0",
|
|
2355
|
+
WebkitMaskPosition: "100% 0",
|
|
2414
2356
|
maskPosition: "100% 0",
|
|
2357
|
+
WebkitMaskSize: "200% 100%",
|
|
2415
2358
|
maskSize: "200% 100%",
|
|
2359
|
+
WebkitMaskRepeat: "no-repeat",
|
|
2416
2360
|
maskRepeat: "no-repeat"
|
|
2417
2361
|
},
|
|
2418
|
-
'& :where(.media-skin[data-theme="
|
|
2362
|
+
'& :where(:where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-controls-content):has([data-volume-level][aria-expanded="true"]) .video-time-slider-group': {
|
|
2363
|
+
WebkitMaskImage: "linear-gradient(to right, #0000 10%, #000 25% 100%)",
|
|
2419
2364
|
maskImage: "linear-gradient(to right, #0000 10%, #000 25% 100%)",
|
|
2365
|
+
WebkitMaskPosition: "0 0",
|
|
2420
2366
|
maskPosition: "0 0"
|
|
2421
2367
|
},
|
|
2422
|
-
'& :where(.media-skin[data-theme="
|
|
2368
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-time-slider-group:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2423
2369
|
flexDirection: "row-reverse"
|
|
2424
2370
|
}
|
|
2425
2371
|
},
|
|
2426
|
-
'& :where(.media-skin[data-theme="
|
|
2372
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-current-value': {
|
|
2427
2373
|
display: "none"
|
|
2428
2374
|
},
|
|
2429
|
-
"@container media-root (width >= 42rem)
|
|
2430
|
-
'& :where(.media-skin[data-theme="
|
|
2375
|
+
"@container media-root (width >= 42rem) ": {
|
|
2376
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-current-value': {
|
|
2431
2377
|
display: "inline"
|
|
2432
2378
|
}
|
|
2433
2379
|
},
|
|
2434
|
-
'& :where(.media-skin[data-theme="
|
|
2380
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value': [
|
|
2435
2381
|
{
|
|
2436
2382
|
fontVariantNumeric: "tabular-nums",
|
|
2437
2383
|
transitionProperty: "opacity",
|
|
2438
|
-
transitionDuration: "
|
|
2384
|
+
transitionDuration: ".15s"
|
|
2439
2385
|
},
|
|
2440
2386
|
{
|
|
2441
2387
|
transitionDuration: "var(--media-duration-slow)",
|
|
2442
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2388
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
2443
2389
|
}
|
|
2444
2390
|
],
|
|
2445
|
-
'& :where(.media-skin[data-theme="
|
|
2446
|
-
opacity: "
|
|
2391
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value[data-unavailable]': {
|
|
2392
|
+
opacity: ".5"
|
|
2447
2393
|
},
|
|
2448
|
-
"@container media-root (width >= 42rem)
|
|
2449
|
-
'& :where(.media-skin[data-theme="
|
|
2450
|
-
color: "
|
|
2394
|
+
"@container media-root (width >= 42rem) ": {
|
|
2395
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value': {
|
|
2396
|
+
color: "var(--media-controls-foreground)"
|
|
2451
2397
|
},
|
|
2452
2398
|
"@supports (color: color-mix(in lab, red, red))": {
|
|
2453
|
-
'& :where(.media-skin[data-theme="
|
|
2454
|
-
color: "color-mix(in oklab,
|
|
2399
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-duration-value': {
|
|
2400
|
+
color: "color-mix(in oklab, var(--media-controls-foreground) 60%, transparent)"
|
|
2455
2401
|
}
|
|
2456
2402
|
}
|
|
2457
2403
|
},
|
|
2458
|
-
'& :where(.media-skin[data-theme="
|
|
2404
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-group': {
|
|
2459
2405
|
alignItems: "center",
|
|
2460
2406
|
gap: "var(--media-spacing)",
|
|
2461
2407
|
display: "flex"
|
|
2462
2408
|
},
|
|
2463
|
-
'& :where(.media-skin[data-theme="
|
|
2409
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-group:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)': {
|
|
2464
2410
|
flexDirection: "row-reverse"
|
|
2465
2411
|
},
|
|
2466
|
-
'& :where(.media-skin[data-theme="
|
|
2412
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-separator': {
|
|
2467
2413
|
display: "none"
|
|
2468
2414
|
},
|
|
2469
|
-
"@container media-root (width >= 42rem)
|
|
2470
|
-
'& :where(.media-skin[data-theme="
|
|
2471
|
-
color: "
|
|
2415
|
+
"@container media-root (width >= 42rem) ": {
|
|
2416
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-separator': {
|
|
2417
|
+
color: "var(--media-controls-foreground)",
|
|
2472
2418
|
display: "inline"
|
|
2473
2419
|
},
|
|
2474
2420
|
"@supports (color: color-mix(in lab, red, red))": {
|
|
2475
|
-
'& :where(.media-skin[data-theme="
|
|
2476
|
-
color: "color-mix(in oklab,
|
|
2421
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-separator': {
|
|
2422
|
+
color: "color-mix(in oklab, var(--media-controls-foreground) 60%, transparent)"
|
|
2477
2423
|
}
|
|
2478
2424
|
}
|
|
2479
2425
|
},
|
|
2480
|
-
'& :where(.media-skin[data-theme="
|
|
2426
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-toggle': [
|
|
2481
2427
|
{
|
|
2482
2428
|
cursor: "pointer",
|
|
2483
2429
|
fontVariantNumeric: "tabular-nums",
|
|
2484
2430
|
outlineOffset: "-2px",
|
|
2485
2431
|
transitionProperty: "outline-color, outline-offset",
|
|
2486
|
-
transitionDuration: "
|
|
2432
|
+
transitionDuration: ".15s"
|
|
2487
2433
|
},
|
|
2488
2434
|
{
|
|
2489
2435
|
transitionDuration: "var(--media-duration-fast)",
|
|
2490
|
-
borderRadius: "
|
|
2436
|
+
borderRadius: ".25rem",
|
|
2491
2437
|
outline: "2px solid #0000",
|
|
2492
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2438
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)"
|
|
2493
2439
|
}
|
|
2494
2440
|
],
|
|
2495
|
-
'& :where(.media-skin[data-theme="
|
|
2441
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-toggle:focus-visible': {
|
|
2496
2442
|
outlineOffset: "2px",
|
|
2497
2443
|
outlineColor: "var(--media-ring)"
|
|
2498
2444
|
},
|
|
2499
|
-
'& :where(.media-skin[data-theme="
|
|
2445
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-toggle[aria-disabled="true"]': {
|
|
2500
2446
|
cursor: "not-allowed",
|
|
2501
|
-
opacity: "
|
|
2447
|
+
opacity: ".5"
|
|
2502
2448
|
},
|
|
2503
2449
|
"@supports (corner-shape: squircle) ": {
|
|
2504
|
-
'& :where(.media-skin[data-theme="
|
|
2450
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .media-time-toggle': {
|
|
2505
2451
|
cornerShape: "squircle",
|
|
2506
2452
|
borderRadius: "1rem"
|
|
2507
2453
|
}
|
|
2508
2454
|
},
|
|
2509
|
-
"@media (pointer: fine)
|
|
2510
|
-
'& :where(.media-skin[data-theme="
|
|
2455
|
+
"@media (pointer: fine) ": {
|
|
2456
|
+
'& :where(.media-skin[data-theme="neutral"][data-preset="video"]) .video-skin:not([data-controls-visible]), & :where(.media-skin[data-theme="neutral"][data-preset="video"]).video-skin:not([data-controls-visible])': {
|
|
2511
2457
|
cursor: "none"
|
|
2512
2458
|
}
|
|
2513
2459
|
}
|
|
2514
2460
|
},
|
|
2515
2461
|
"@layer components ": {
|
|
2516
|
-
'& :where(.media-skin[data-theme="
|
|
2462
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-live-button': {
|
|
2517
2463
|
alignItems: "center",
|
|
2518
2464
|
gap: "calc(var(--media-spacing) * 1.5)",
|
|
2519
2465
|
width: "auto",
|
|
2520
2466
|
paddingInline: "calc(var(--media-spacing) * 3)",
|
|
2521
2467
|
paddingBlock: "calc(var(--media-spacing) * 2)",
|
|
2522
2468
|
fontSize: "calc(var(--media-spacing) * 2.75)",
|
|
2523
|
-
letterSpacing: "
|
|
2469
|
+
letterSpacing: ".05em",
|
|
2524
2470
|
textTransform: "uppercase",
|
|
2525
2471
|
fontWeight: "600",
|
|
2526
2472
|
lineHeight: "1",
|
|
2527
2473
|
display: "inline-flex !important"
|
|
2528
2474
|
},
|
|
2529
|
-
'& :where(.media-skin[data-theme="
|
|
2475
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-live-button:before': [
|
|
2530
2476
|
{
|
|
2531
2477
|
width: "calc(var(--media-spacing) * 2)",
|
|
2532
2478
|
height: "calc(var(--media-spacing) * 2)",
|
|
2533
2479
|
transitionProperty: "background-color",
|
|
2534
|
-
transitionDuration: "
|
|
2480
|
+
transitionDuration: ".15s"
|
|
2535
2481
|
},
|
|
2536
2482
|
{
|
|
2537
2483
|
transitionDuration: "var(--media-duration)",
|
|
@@ -2539,38 +2485,38 @@ const e = {
|
|
|
2539
2485
|
backgroundColor: "currentColor",
|
|
2540
2486
|
borderRadius: "9999px",
|
|
2541
2487
|
flexShrink: "0",
|
|
2542
|
-
transitionTimingFunction: "cubic-bezier(0, 0,
|
|
2488
|
+
transitionTimingFunction: "cubic-bezier(0, 0, .2, 1)",
|
|
2543
2489
|
display: "inline-block"
|
|
2544
2490
|
}
|
|
2545
2491
|
],
|
|
2546
2492
|
"@supports (color: color-mix(in lab, red, red))": {
|
|
2547
|
-
'& :where(.media-skin[data-theme="
|
|
2493
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-live-button:before': {
|
|
2548
2494
|
backgroundColor: "color-mix(in oklab, currentcolor 40%, transparent)"
|
|
2549
2495
|
}
|
|
2550
2496
|
},
|
|
2551
|
-
'& :where(.media-skin[data-theme="
|
|
2497
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-live-button[data-live-edge]:before': {
|
|
2552
2498
|
content: '""',
|
|
2553
2499
|
backgroundColor: "var(--media-live-color)"
|
|
2554
2500
|
}
|
|
2555
2501
|
},
|
|
2556
2502
|
"@layer components ": {
|
|
2557
|
-
'& :where(.media-skin[data-theme="
|
|
2503
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-button-backward-icon': {
|
|
2558
2504
|
scale: "-1 1"
|
|
2559
2505
|
},
|
|
2560
|
-
'& :where(.media-skin[data-theme="
|
|
2506
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-button-backward-label': {
|
|
2561
2507
|
left: "-1px"
|
|
2562
2508
|
},
|
|
2563
|
-
'& :where(.media-skin[data-theme="
|
|
2509
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-button-content': {
|
|
2564
2510
|
display: "grid",
|
|
2565
2511
|
position: "relative"
|
|
2566
2512
|
},
|
|
2567
|
-
'& :where(.media-skin[data-theme="
|
|
2513
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-button-forward-label': {
|
|
2568
2514
|
right: "-1px"
|
|
2569
2515
|
},
|
|
2570
|
-
'& :where(.media-skin[data-theme="
|
|
2571
|
-
letterSpacing: "
|
|
2516
|
+
'& :where(.media-skin[data-theme="neutral"]) .media-seek-button-label': {
|
|
2517
|
+
letterSpacing: "-.05em",
|
|
2572
2518
|
fontVariantNumeric: "tabular-nums",
|
|
2573
|
-
fontSize: "
|
|
2519
|
+
fontSize: ".7em",
|
|
2574
2520
|
fontWeight: "500",
|
|
2575
2521
|
position: "absolute",
|
|
2576
2522
|
bottom: "-3px"
|
|
@@ -2588,5 +2534,5 @@ const e = {
|
|
|
2588
2534
|
}
|
|
2589
2535
|
};
|
|
2590
2536
|
export {
|
|
2591
|
-
e as
|
|
2537
|
+
e as videojsNeutralSkinStyles
|
|
2592
2538
|
};
|