Files
v10/packages/skins/src/default/tailwind/audio.tailwind.ts
T

78 lines
3.0 KiB
TypeScript

import { cn } from '@videojs/utils/style';
import { bufferingIndicator as baseBufferingIndicator } from './components/buffering';
import { controls as baseControls } from './components/controls';
import { error as baseError } from './components/error';
import { popup as basePopup } from './components/popup';
import { slider as baseSlider } from './components/slider';
import { surface as baseSurface } from './components/surface';
/* ==========================================================================
Surface (shared glass effect for tooltips, popovers, controls)
========================================================================== */
export const surface = cn(
baseSurface,
'bg-white/50 dark:bg-black/40',
'backdrop-brightness-98 backdrop-saturate-120 backdrop-blur',
// Border and shadow
'ring-white/5 shadow-black/15',
// Border to enhance contrast on lighter pages
'after:ring-black/5'
);
/* ==========================================================================
Controls
========================================================================== */
export const controls = cn(baseControls, surface, 'dark:text-white');
/* ==========================================================================
Sliders
========================================================================== */
export const slider = {
...baseSlider,
track: cn(baseSlider.track, 'bg-black/10', 'dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'),
};
/* ==========================================================================
Popup (with audio surface)
========================================================================== */
export const popup = {
...basePopup,
popover: cn(surface, basePopup.popover),
tooltip: cn(surface, basePopup.tooltip),
};
/* ==========================================================================
Buffering (with audio surface)
========================================================================== */
export const bufferingIndicator = {
...baseBufferingIndicator,
container: cn(baseBufferingIndicator.container, surface),
};
/* ==========================================================================
Error (with audio surface)
========================================================================== */
export const error = {
...baseError,
dialog: cn(baseError.dialog, surface),
};
/* ==========================================================================
Shared components (no overrides)
========================================================================== */
export { iconState } from '../../shared/tailwind/icon-state';
export { tooltipState } from '../../shared/tailwind/tooltip-state';
export { button } from './components/button';
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
export { playbackRate } from './components/playback-rate';
export { root } from './components/root';
export { seek } from './components/seek';
export { time } from './components/time';