@remotion/promo-pages 4.0.430 → 4.0.432

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