mirror of
https://github.com/zoriya/v10.git
synced 2026-08-15 10:23:32 +00:00
63 lines
2.9 KiB
TypeScript
63 lines
2.9 KiB
TypeScript
/* ==========================================================================
|
|
Icon State
|
|
========================================================================== */
|
|
|
|
export const iconState = {
|
|
play: {
|
|
button: 'group',
|
|
restart: 'hidden opacity-0 group-data-ended:block group-data-ended:opacity-100',
|
|
play: [
|
|
'hidden opacity-0',
|
|
'group-not-data-ended:group-data-paused:block',
|
|
'group-not-data-ended:group-data-paused:opacity-100',
|
|
'group-not-data-ended:group-not-data-started:block',
|
|
'group-not-data-ended:group-not-data-started:opacity-100',
|
|
].join(' '),
|
|
pause:
|
|
'hidden opacity-0 group-data-started:group-not-data-paused:group-not-data-ended:block group-data-started:group-not-data-paused:group-not-data-ended:opacity-100',
|
|
},
|
|
mute: {
|
|
button: 'group',
|
|
volumeOff: 'hidden opacity-0 group-data-muted:block group-data-muted:opacity-100',
|
|
volumeLow:
|
|
'hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100',
|
|
volumeHigh:
|
|
'hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100',
|
|
},
|
|
fullscreen: {
|
|
button: 'group',
|
|
enter: 'hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100',
|
|
exit: 'hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100',
|
|
},
|
|
captions: {
|
|
button: 'group',
|
|
off: 'hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100',
|
|
on: 'hidden opacity-0 group-data-active:block group-data-active:opacity-100',
|
|
},
|
|
pip: {
|
|
button: 'group',
|
|
off: 'hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100',
|
|
on: 'hidden opacity-0 group-data-pip:block group-data-pip:opacity-100',
|
|
},
|
|
cast: {
|
|
button: 'group',
|
|
enter:
|
|
'hidden opacity-0 group-not-data-[cast-state=connected]:block group-not-data-[cast-state=connected]:opacity-100',
|
|
exit: 'hidden opacity-0 group-data-[cast-state=connected]:block group-data-[cast-state=connected]:opacity-100',
|
|
},
|
|
airplay: {
|
|
// `group` enables the icon-state variants below. The two CSS-variable
|
|
// overrides mirror the spinner pattern: the airplay-exit SVG stays in
|
|
// the DOM while inactive, so we short-circuit its keyframes by setting
|
|
// the animation variables to `none` whenever airplay isn't connected.
|
|
button: [
|
|
'group',
|
|
'not-data-[airplay-state=connected]:[--media-icon--airplay__fill-animation:none]',
|
|
'not-data-[airplay-state=connected]:[--media-icon--airplay__triangle-animation:none]',
|
|
].join(' '),
|
|
enter:
|
|
'hidden opacity-0 group-not-data-[airplay-state=connected]:block group-not-data-[airplay-state=connected]:opacity-100',
|
|
exit: 'hidden opacity-0 group-data-[airplay-state=connected]:block group-data-[airplay-state=connected]:opacity-100',
|
|
},
|
|
};
|