Files
v10/packages/skins/src/default/tailwind/components/controls.ts
T

18 lines
703 B
TypeScript

import { cn } from '@videojs/utils/style';
export const controls = cn(
// Peer marker for overlay/captions
'peer/controls',
// Layout
'@container/media-controls',
'p-[0.175rem] flex items-center gap-[0.075rem]',
'rounded-full',
// Shadow color variables (derived from currentColor lightness)
'[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]',
'[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]',
// Text shadow
'text-shadow-[0_1px_0_var(--media-controls-current-shadow-color)]',
// Wider container
'@2xl/media-root:p-1 @2xl/media-root:gap-0.5'
);