diff --git a/packages/html/src/define/audio/minimal-skin.css b/packages/html/src/define/audio/minimal-skin.css index f7064f30..363d6ab8 100644 --- a/packages/html/src/define/audio/minimal-skin.css +++ b/packages/html/src/define/audio/minimal-skin.css @@ -1 +1,2 @@ @import "@videojs/skins/minimal/css/audio.css"; +@import "../shared.css"; diff --git a/packages/html/src/define/audio/minimal-skin.tailwind.ts b/packages/html/src/define/audio/minimal-skin.tailwind.ts index 53c7af22..bbb8914c 100644 --- a/packages/html/src/define/audio/minimal-skin.tailwind.ts +++ b/packages/html/src/define/audio/minimal-skin.tailwind.ts @@ -29,6 +29,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -39,79 +40,81 @@ function getTemplateHTML() {
- - - - ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} - ${renderIcon('play', { class: cn(icon, iconState.play.play) })} - ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - - - Replay - Play - Pause + +
+ + + ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} + ${renderIcon('play', { class: cn(icon, iconState.play.play) })} + ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} + + + Replay + Play + Pause + + + + + + ${renderIcon('seek', { class: cn(icon, iconFlipped) })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds - - - - ${renderIcon('seek', { class: cn(icon, iconFlipped) })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: icon })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + +
- - - ${renderIcon('seek', { class: icon })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - - +
+ + + + + - - - - - - - - - - - - - - - - - - - - - Toggle playback rate - - - - ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} - ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} - ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - - - - + + - - - - + + +
+ +
+ + + + Toggle playback rate + + + + ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} + ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} + ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} + + + + + + + + + + +
+
`; diff --git a/packages/html/src/define/audio/minimal-skin.ts b/packages/html/src/define/audio/minimal-skin.ts index 7b1abcfb..f012c255 100644 --- a/packages/html/src/define/audio/minimal-skin.ts +++ b/packages/html/src/define/audio/minimal-skin.ts @@ -13,6 +13,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -23,77 +24,79 @@ function getTemplateHTML() {
- - - ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} - ${renderIcon('play', { class: 'media-icon media-icon--play' })} - ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - - - Replay - Play - Pause - + +
+ + ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} + ${renderIcon('play', { class: 'media-icon media-icon--play' })} + ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} + + + Replay + Play + Pause + - - - ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds + - - - ${renderIcon('seek', { class: 'media-icon media-icon--seek' })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - - + + + ${renderIcon('seek', { class: 'media-icon media-icon--seek' })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + +
- - - - - - +
+ + + + + - - - - - - - - - - - - - - Toggle playback rate - - - - ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} - ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} - ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - - - - + + - - - - + + +
+ +
+ + + + Toggle playback rate + + + + ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} + ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} + ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} + + + + + + + + + + +
+
`; diff --git a/packages/html/src/define/audio/skin.css b/packages/html/src/define/audio/skin.css index d02eea76..5549ac65 100644 --- a/packages/html/src/define/audio/skin.css +++ b/packages/html/src/define/audio/skin.css @@ -1 +1,2 @@ @import "@videojs/skins/default/css/audio.css"; +@import "../shared.css"; diff --git a/packages/html/src/define/audio/skin.tailwind.ts b/packages/html/src/define/audio/skin.tailwind.ts index 2538a7a0..7d79a902 100644 --- a/packages/html/src/define/audio/skin.tailwind.ts +++ b/packages/html/src/define/audio/skin.tailwind.ts @@ -28,6 +28,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -38,70 +39,72 @@ function getTemplateHTML() {
- - - ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} - ${renderIcon('play', { class: cn(icon, iconState.play.play) })} - ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - - - Replay - Play - Pause + + + + ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} + ${renderIcon('play', { class: cn(icon, iconState.play.play) })} + ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} + + + Replay + Play + Pause + + + + + + ${renderIcon('seek', { class: cn(icon, iconFlipped) })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds - - - - ${renderIcon('seek', { class: cn(icon, iconFlipped) })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: icon })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + - - - ${renderIcon('seek', { class: icon })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - + + + + + + + + + + + - - - - - - - - - - - + + + Toggle playback rate + - - - Toggle playback rate - + + ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} + ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} + ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} + - - ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} - ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} - ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - - - - - - - - - - + + + + + + + + +
`; diff --git a/packages/html/src/define/audio/skin.ts b/packages/html/src/define/audio/skin.ts index 7688bbce..ce87c479 100644 --- a/packages/html/src/define/audio/skin.ts +++ b/packages/html/src/define/audio/skin.ts @@ -13,6 +13,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -23,68 +24,70 @@ function getTemplateHTML() {
- - ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} - ${renderIcon('play', { class: 'media-icon media-icon--play' })} - ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - - - Replay - Play - Pause - + + + ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} + ${renderIcon('play', { class: 'media-icon media-icon--play' })} + ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} + + + Replay + Play + Pause + - - - ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: 'media-icon media-icon--seek media-icon--flipped' })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds + - - - ${renderIcon('seek', { class: 'media-icon media-icon--seek' })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: 'media-icon media-icon--seek' })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + - - - - - - - - - - - + + + + + + + + + + + - - - Toggle playback rate - + + + Toggle playback rate + - - ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} - ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} - ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - + + ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} + ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} + ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} + - - - - - - - - + + + + + + + + +
`; diff --git a/packages/html/src/define/shared.css b/packages/html/src/define/shared.css new file mode 100644 index 00000000..d67093d5 --- /dev/null +++ b/packages/html/src/define/shared.css @@ -0,0 +1,3 @@ +media-tooltip-group { + display: contents; +} diff --git a/packages/html/src/define/video/minimal-skin.css b/packages/html/src/define/video/minimal-skin.css index 383ec1eb..1abf9392 100644 --- a/packages/html/src/define/video/minimal-skin.css +++ b/packages/html/src/define/video/minimal-skin.css @@ -1 +1,2 @@ @import "@videojs/skins/minimal/css/video.css"; +@import "../shared.css"; diff --git a/packages/html/src/define/video/minimal-skin.tailwind.ts b/packages/html/src/define/video/minimal-skin.tailwind.ts index af6b6989..e6c11fc1 100644 --- a/packages/html/src/define/video/minimal-skin.tailwind.ts +++ b/packages/html/src/define/video/minimal-skin.tailwind.ts @@ -35,6 +35,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; import { playbackRate } from '@videojs/skins/default/tailwind/video.tailwind'; @@ -50,111 +51,113 @@ function getTemplateHTML() { - - - - ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} - ${renderIcon('play', { class: cn(icon, iconState.play.play) })} - ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - - - Replay - Play - Pause + +
+ + + ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} + ${renderIcon('play', { class: cn(icon, iconState.play.play) })} + ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} + + + Replay + Play + Pause + + + + + + ${renderIcon('seek', { class: cn(icon, iconFlipped) })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds - - - - ${renderIcon('seek', { class: cn(icon, iconFlipped) })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: icon })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + +
- - - ${renderIcon('seek', { class: icon })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - - +
+ + + + + - - - - - - - - - - - - - - - - - - - - - Toggle playback rate - - - - ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} - ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} - ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - - - - + + - - - + + +
- - - ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })} - ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })} - - - Enable captions - Disable captions +
+ + + + Toggle playback rate - - - - ${renderIcon('pip', { class: icon })} - - - Enter picture-in-picture - Exit picture-in-picture - - + + ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} + ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} + ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} + - - - ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })} - ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })} - - - Enter fullscreen - Exit fullscreen - - - + + + + + + + + + + + + ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })} + ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })} + + + Enable captions + Disable captions + + + + + + ${renderIcon('pip', { class: icon })} + + + Enter picture-in-picture + Exit picture-in-picture + + + + + + ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })} + ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })} + + + Enter fullscreen + Exit fullscreen + + +
+
diff --git a/packages/html/src/define/video/minimal-skin.ts b/packages/html/src/define/video/minimal-skin.ts index 17b1c4f5..724cb4ce 100644 --- a/packages/html/src/define/video/minimal-skin.ts +++ b/packages/html/src/define/video/minimal-skin.ts @@ -17,6 +17,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -31,101 +32,103 @@ function getTemplateHTML() { - - - ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} - ${renderIcon('play', { class: 'media-icon media-icon--play' })} - ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - - - Replay - Play - Pause - + +
+ + ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} + ${renderIcon('play', { class: 'media-icon media-icon--play' })} + ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} + + + Replay + Play + Pause + - - - ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds + - - - ${renderIcon('seek', { class: 'media-icon' })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - - + + + ${renderIcon('seek', { class: 'media-icon' })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + +
- - - - - - +
+ + + + + - - - - - - - - - - - - - Toggle playback rate - - - - ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} - ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} - ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - - - - + + - - - + + +
- - ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })} - ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })} - - - Toggle captions - +
+ + + Toggle playback rate + - - ${renderIcon('pip', { class: 'media-icon' })} - - - Enter picture-in-picture - Exit picture-in-picture - + + ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} + ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} + ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} + - - ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })} - ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })} - - - Enter fullscreen - Exit fullscreen - - + + + + + + + + + + + ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })} + ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })} + + + Toggle captions + + + + ${renderIcon('pip', { class: 'media-icon' })} + + + Enter picture-in-picture + Exit picture-in-picture + + + + ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })} + ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })} + + + Enter fullscreen + Exit fullscreen + +
+
diff --git a/packages/html/src/define/video/skin.css b/packages/html/src/define/video/skin.css index 14b25f0f..383d5bcd 100644 --- a/packages/html/src/define/video/skin.css +++ b/packages/html/src/define/video/skin.css @@ -1 +1,2 @@ @import "@videojs/skins/default/css/video.css"; +@import "../shared.css"; diff --git a/packages/html/src/define/video/skin.tailwind.ts b/packages/html/src/define/video/skin.tailwind.ts index 81b81dd7..b7c4c67b 100644 --- a/packages/html/src/define/video/skin.tailwind.ts +++ b/packages/html/src/define/video/skin.tailwind.ts @@ -35,6 +35,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -51,102 +52,104 @@ function getTemplateHTML() { - - - ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} - ${renderIcon('play', { class: cn(icon, iconState.play.play) })} - ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} - - - Replay - Play - Pause - - - - - - ${renderIcon('seek', { class: cn(icon, iconFlipped) })} - ${SEEK_TIME} + + + + ${renderIcon('restart', { class: cn(icon, iconState.play.restart) })} + ${renderIcon('play', { class: cn(icon, iconState.play.play) })} + ${renderIcon('pause', { class: cn(icon, iconState.play.pause) })} + + + Replay + Play + Pause + - - - Seek backward ${SEEK_TIME} seconds - - - - ${renderIcon('seek', { class: icon })} - ${SEEK_TIME} + + + ${renderIcon('seek', { class: cn(icon, iconFlipped) })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds + + + + + ${renderIcon('seek', { class: icon })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + + + + + + + + + + + + + + + + + Toggle playback rate + + + + ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} + ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} + ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} + + + + + + + + + + + + + + ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })} + ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })} + + + Enable captions + Disable captions + - - - Seek forward ${SEEK_TIME} seconds - - - - - - - - - - - - + + + ${renderIcon('pip', { class: icon })} + + + Enter picture-in-picture + Exit picture-in-picture + + - - - Toggle playback rate - - - - ${renderIcon('volume-off', { class: cn(icon, iconState.mute.volumeOff) })} - ${renderIcon('volume-low', { class: cn(icon, iconState.mute.volumeLow) })} - ${renderIcon('volume-high', { class: cn(icon, iconState.mute.volumeHigh) })} - - - - - - - - - - - - - - ${renderIcon('captions-off', { class: cn(icon, iconState.captions.off) })} - ${renderIcon('captions-on', { class: cn(icon, iconState.captions.on) })} - - - Enable captions - Disable captions - - - - - - ${renderIcon('pip', { class: icon })} - - - Enter picture-in-picture - Exit picture-in-picture - - - - - - ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })} - ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })} - - - Enter fullscreen - Exit fullscreen - - + + + ${renderIcon('fullscreen-enter', { class: cn(icon, iconState.fullscreen.enter) })} + ${renderIcon('fullscreen-exit', { class: cn(icon, iconState.fullscreen.exit) })} + + + Enter fullscreen + Exit fullscreen + + +
diff --git a/packages/html/src/define/video/skin.ts b/packages/html/src/define/video/skin.ts index 7088c345..2eb78e30 100644 --- a/packages/html/src/define/video/skin.ts +++ b/packages/html/src/define/video/skin.ts @@ -18,6 +18,7 @@ import '../ui/seek-button'; import '../ui/time'; import '../ui/time-slider'; import '../ui/tooltip'; +import '../ui/tooltip-group'; import '../ui/volume-slider'; const SEEK_TIME = 10; @@ -34,94 +35,96 @@ function getTemplateHTML() { - - ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} - ${renderIcon('play', { class: 'media-icon media-icon--play' })} - ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} - - - Replay - Play - Pause - + + + ${renderIcon('restart', { class: 'media-icon media-icon--restart' })} + ${renderIcon('play', { class: 'media-icon media-icon--play' })} + ${renderIcon('pause', { class: 'media-icon media-icon--pause' })} + + + Replay + Play + Pause + - - - ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })} - ${SEEK_TIME} - - - - Seek backward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: 'media-icon media-icon--flipped' })} + ${SEEK_TIME} + + + + Seek backward ${SEEK_TIME} seconds + - - - ${renderIcon('seek', { class: 'media-icon' })} - ${SEEK_TIME} - - - - Seek forward ${SEEK_TIME} seconds - + + + ${renderIcon('seek', { class: 'media-icon' })} + ${SEEK_TIME} + + + + Seek forward ${SEEK_TIME} seconds + - - - - - - - - - - - + + + + + + + + + + + - - - Toggle playback rate - + + + Toggle playback rate + - - ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} - ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} - ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} - + + ${renderIcon('volume-off', { class: 'media-icon media-icon--volume-off' })} + ${renderIcon('volume-low', { class: 'media-icon media-icon--volume-low' })} + ${renderIcon('volume-high', { class: 'media-icon media-icon--volume-high' })} + - - - - - - - - + + + + + + + + - - ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })} - ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })} - - - Enable captions - Disable captions - + + ${renderIcon('captions-off', { class: 'media-icon media-icon--captions-off' })} + ${renderIcon('captions-on', { class: 'media-icon media-icon--captions-on' })} + + + Enable captions + Disable captions + - - ${renderIcon('pip', { class: 'media-icon' })} - - - Enter picture-in-picture - Exit picture-in-picture - + + ${renderIcon('pip', { class: 'media-icon' })} + + + Enter picture-in-picture + Exit picture-in-picture + - - ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })} - ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })} - - - Enter fullscreen - Exit fullscreen - + + ${renderIcon('fullscreen-enter', { class: 'media-icon media-icon--fullscreen-enter' })} + ${renderIcon('fullscreen-exit', { class: 'media-icon media-icon--fullscreen-exit' })} + + + Enter fullscreen + Exit fullscreen + +
diff --git a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx index 20547621..e88f4fae 100644 --- a/packages/react/src/presets/audio/minimal-skin.tailwind.tsx +++ b/packages/react/src/presets/audio/minimal-skin.tailwind.tsx @@ -108,121 +108,123 @@ export function MinimalAudioSkinTailwind(props: MinimalAudioSkinProps): ReactNod {children}
- - - ( - - )} - /> - } - /> - - - - + +
+ + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + +
- - - - - - +
+ + + + + - }> - }> - } /> - } /> - - } /> - - + }> + }> + } /> + } /> + + } /> + +
- - - - )} - /> - } - /> - - } - > - }> - } /> - - } /> - - - - + + ( + + )} + /> + } + /> + + } + > + }> + } /> + + } /> + + + +
+ ); diff --git a/packages/react/src/presets/audio/minimal-skin.tsx b/packages/react/src/presets/audio/minimal-skin.tsx index 45499dd8..904a5c7c 100644 --- a/packages/react/src/presets/audio/minimal-skin.tsx +++ b/packages/react/src/presets/audio/minimal-skin.tsx @@ -44,117 +44,119 @@ export function MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode { {children}
- - - ( - - )} - /> - } - /> - - - - + +
+ + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + +
- - - - - - +
+ + + + + - - - - - - - - + + + + + + + +
- - - - )} - /> - } - /> - - - - - - - - - - + + ( + + )} + /> + } + /> + + + + + + + + + +
+ ); diff --git a/packages/react/src/presets/audio/skin.tailwind.tsx b/packages/react/src/presets/audio/skin.tailwind.tsx index e4f3a3d6..e475f61d 100644 --- a/packages/react/src/presets/audio/skin.tailwind.tsx +++ b/packages/react/src/presets/audio/skin.tailwind.tsx @@ -107,113 +107,115 @@ export function AudioSkinTailwind(props: AudioSkinProps): ReactNode { {children}
- - ( - - )} - /> - } - /> - - - - + + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + - - - }> - }> - } /> - } /> - - } /> - - - + + + }> + }> + } /> + } /> + + } /> + + + - - - )} - /> - } - /> - - } - > - }> - } /> - - } /> - - - + + ( + + )} + /> + } + /> + + } + > + }> + } /> + + } /> + + + +
); diff --git a/packages/react/src/presets/audio/skin.tsx b/packages/react/src/presets/audio/skin.tsx index 045da05c..3ce8cb06 100644 --- a/packages/react/src/presets/audio/skin.tsx +++ b/packages/react/src/presets/audio/skin.tsx @@ -44,109 +44,111 @@ export function AudioSkin(props: AudioSkinProps): ReactNode { {children}
- - ( - - )} - /> - } - /> - - - - + + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + - - - - - - - - - - - + + + + + + + + + + + - - - )} - /> - } - /> - - - - - - - - - + + ( + + )} + /> + } + /> + + + + + + + + + +
); diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx index 02a156d6..8e4ca266 100644 --- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx +++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx @@ -160,174 +160,176 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod data-controls="" // Used as a hook for Tailwind has-[] styles className={controls} > - - - ( - - )} - /> - } - /> - - - - + +
+ + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + +
- - - - - - +
+ + + + + - }> - }> - } /> - } /> - - } /> - - + }> + }> + } /> + } /> + + } /> + +
- - - - )} - /> - } - /> - - } - > - }> - } /> - - } /> - - - + + ( + + )} + /> + } + /> + + } + > + }> + } /> + + } /> + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - - + + ( + + )} + /> + } + /> + + + + + +
diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx index a8164899..a1225614 100644 --- a/packages/react/src/presets/video/minimal-skin.tsx +++ b/packages/react/src/presets/video/minimal-skin.tsx @@ -91,170 +91,172 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { - - - ( - - )} - /> - } - /> - - - - + +
+ + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + +
- - - - - - +
+ + + + + - - - - - - - - + + + + + + + +
- - - - )} - /> - } - /> - - - - - - - - - + + ( + + )} + /> + } + /> + + + + + + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - - + + ( + + )} + /> + } + /> + + + + +
+
diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx index 98c067b3..822fb885 100644 --- a/packages/react/src/presets/video/skin.tailwind.tsx +++ b/packages/react/src/presets/video/skin.tailwind.tsx @@ -162,166 +162,168 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { data-controls="" // Used as a hook for Tailwind has-[] styles className={controls} > - - ( - - )} - /> - } - /> - - - - + + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + - - - }> - }> - } /> - } /> - - } /> - - - + + + }> + }> + } /> + } /> + + } /> + + + - - - )} - /> - } - /> - - } - > - }> - } /> - - } /> - - - + + ( + + )} + /> + } + /> + + } + > + }> + } /> + + } /> + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + +
diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx index 3a7596e9..462044b8 100644 --- a/packages/react/src/presets/video/skin.tsx +++ b/packages/react/src/presets/video/skin.tsx @@ -93,162 +93,164 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { - - ( - - )} - /> - } - /> - - - - + + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - Seek backward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek backward {SEEK_TIME} seconds + - - ( - - )} - /> - } - /> - Seek forward {SEEK_TIME} seconds - + + ( + + )} + /> + } + /> + Seek forward {SEEK_TIME} seconds + - - - - - - - - - - - + + + + + + + + + + + - - - )} - /> - } - /> - - - - - - - - - + + ( + + )} + /> + } + /> + + + + + + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + - - ( - - )} - /> - } - /> - - - - + + ( + + )} + /> + } + /> + + + + +
diff --git a/packages/skins/src/default/css/audio.css b/packages/skins/src/default/css/audio.css index 059e8753..ad1acc0b 100644 --- a/packages/skins/src/default/css/audio.css +++ b/packages/skins/src/default/css/audio.css @@ -1,5 +1,5 @@ -@import "../../shared/audio/icon-state.css"; -@import "../../shared/audio/tooltip-state.css"; +@import "../../shared/css/audio/icon-state.css"; +@import "../../shared/css/audio/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/surface.css"; diff --git a/packages/skins/src/default/css/video.css b/packages/skins/src/default/css/video.css index 0f9526d0..23d5a4be 100644 --- a/packages/skins/src/default/css/video.css +++ b/packages/skins/src/default/css/video.css @@ -1,5 +1,5 @@ -@import "../../shared/video/icon-state.css"; -@import "../../shared/video/tooltip-state.css"; +@import "../../shared/css/video/icon-state.css"; +@import "../../shared/css/video/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/surface.css"; diff --git a/packages/skins/src/default/tailwind/audio.tailwind.ts b/packages/skins/src/default/tailwind/audio.tailwind.ts index d2c4dd0c..486923ab 100644 --- a/packages/skins/src/default/tailwind/audio.tailwind.ts +++ b/packages/skins/src/default/tailwind/audio.tailwind.ts @@ -35,41 +35,6 @@ export const slider = { track: cn(baseSlider.track, 'bg-black/10', 'dark:bg-white/20 dark:shadow-[0_0_0_1px_oklch(0_0_0/0.05)]'), }; -/* ========================================================================== - Icon State (audio: play + mute only) - ========================================================================== */ - -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', - pause: - 'hidden opacity-0 group-not-data-paused:group-not-data-ended:block 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', - }, -}; - -/* ========================================================================== - Tooltip State (audio: play only) - ========================================================================== */ - -export const tooltipState = { - play: { - wrapper: 'contents group/play-tip', - replay: 'hidden group-has-data-ended/play-tip:block', - play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block', - pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block', - }, -}; - /* ========================================================================== Popup (with audio surface) ========================================================================== */ @@ -102,6 +67,8 @@ export const error = { 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'; diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts index eea1b6c7..a37f54a9 100644 --- a/packages/skins/src/default/tailwind/video.tailwind.ts +++ b/packages/skins/src/default/tailwind/video.tailwind.ts @@ -135,11 +135,11 @@ export const error = { 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 { iconState } from './components/icon-state'; export { overlay } from './components/overlay'; export { playbackRate } from './components/playback-rate'; export { seek } from './components/seek'; export { time } from './components/time'; -export { tooltipState } from './components/tooltip-state'; diff --git a/packages/skins/src/minimal/css/audio.css b/packages/skins/src/minimal/css/audio.css index 142bff35..424c78aa 100644 --- a/packages/skins/src/minimal/css/audio.css +++ b/packages/skins/src/minimal/css/audio.css @@ -1,5 +1,5 @@ -@import "../../shared/audio/icon-state.css"; -@import "../../shared/audio/tooltip-state.css"; +@import "../../shared/css/audio/icon-state.css"; +@import "../../shared/css/audio/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/buffering.css"; diff --git a/packages/skins/src/minimal/css/video.css b/packages/skins/src/minimal/css/video.css index ad07eddb..e712082f 100644 --- a/packages/skins/src/minimal/css/video.css +++ b/packages/skins/src/minimal/css/video.css @@ -1,5 +1,5 @@ -@import "../../shared/video/icon-state.css"; -@import "../../shared/video/tooltip-state.css"; +@import "../../shared/css/video/icon-state.css"; +@import "../../shared/css/video/tooltip-state.css"; @import "./components/reset.css"; @import "./components/root.css"; @import "./components/media.css"; diff --git a/packages/skins/src/minimal/tailwind/audio.tailwind.ts b/packages/skins/src/minimal/tailwind/audio.tailwind.ts index 185457fc..dc45f0ca 100644 --- a/packages/skins/src/minimal/tailwind/audio.tailwind.ts +++ b/packages/skins/src/minimal/tailwind/audio.tailwind.ts @@ -35,19 +35,6 @@ export const controls = cn( 'ring-1 ring-(color:--media-controls-border-color)' ); -/* ========================================================================== - Tooltip State (audio: play only) - ========================================================================== */ - -export const tooltipState = { - play: { - wrapper: 'contents group/play-tip', - replay: 'hidden group-has-data-ended/play-tip:block', - play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block', - pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block', - }, -}; - /* ========================================================================== Popup ========================================================================== */ @@ -61,32 +48,12 @@ export const popup = { ), }; -/* ========================================================================== - Icon State (audio: play + mute only) - ========================================================================== */ - -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', - pause: - 'hidden opacity-0 group-not-data-paused:group-not-data-ended:block 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', - }, -}; - /* ========================================================================== Shared components (no overrides) ========================================================================== */ +export { iconState } from '../../shared/tailwind/icon-state'; +export { tooltipState } from '../../shared/tailwind/tooltip-state'; export { bufferingIndicator } from './components/buffering'; export { button } from './components/button'; export { buttonGroup } from './components/button-group'; diff --git a/packages/skins/src/minimal/tailwind/components/icon-state.ts b/packages/skins/src/minimal/tailwind/components/icon-state.ts deleted file mode 100644 index 309df24a..00000000 --- a/packages/skins/src/minimal/tailwind/components/icon-state.ts +++ /dev/null @@ -1,27 +0,0 @@ -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', - pause: - 'hidden opacity-0 group-not-data-paused:group-not-data-ended:block 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', - }, -}; diff --git a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts b/packages/skins/src/minimal/tailwind/components/tooltip-state.ts deleted file mode 100644 index a0399f4e..00000000 --- a/packages/skins/src/minimal/tailwind/components/tooltip-state.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const tooltipState = { - play: { - wrapper: 'contents group/play-tip', - replay: 'hidden group-has-data-ended/play-tip:block', - play: 'hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block', - pause: 'hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block', - }, - fullscreen: { - wrapper: 'contents group/fullscreen-tip', - enter: 'hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block', - exit: 'hidden group-has-data-fullscreen/fullscreen-tip:block', - }, - captions: { - wrapper: 'contents group/captions-tip', - enable: 'hidden group-[:not(:has([data-active]))]/captions-tip:block', - disable: 'hidden group-has-data-active/captions-tip:block', - }, - pip: { - wrapper: 'contents group/pip-tip', - enter: 'hidden group-[:not(:has([data-pip]))]/pip-tip:block', - exit: 'hidden group-has-data-pip/pip-tip:block', - }, -}; diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts index 7d638243..b6642cd9 100644 --- a/packages/skins/src/minimal/tailwind/video.tailwind.ts +++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts @@ -99,13 +99,13 @@ export const popup = { Shared components (no overrides) ========================================================================== */ +export { iconState } from '../../shared/tailwind/icon-state'; +export { tooltipState } from '../../shared/tailwind/tooltip-state'; export { bufferingIndicator } from './components/buffering'; export { button } from './components/button'; export { buttonGroup } from './components/button-group'; export { error } from './components/error'; export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon'; -export { iconState } from './components/icon-state'; export { overlay } from './components/overlay'; export { seek } from './components/seek'; export { time } from './components/time'; -export { tooltipState } from './components/tooltip-state'; diff --git a/packages/skins/src/shared/audio/icon-state.css b/packages/skins/src/shared/css/audio/icon-state.css similarity index 100% rename from packages/skins/src/shared/audio/icon-state.css rename to packages/skins/src/shared/css/audio/icon-state.css diff --git a/packages/skins/src/shared/audio/tooltip-state.css b/packages/skins/src/shared/css/audio/tooltip-state.css similarity index 100% rename from packages/skins/src/shared/audio/tooltip-state.css rename to packages/skins/src/shared/css/audio/tooltip-state.css diff --git a/packages/skins/src/shared/video/icon-state.css b/packages/skins/src/shared/css/video/icon-state.css similarity index 100% rename from packages/skins/src/shared/video/icon-state.css rename to packages/skins/src/shared/css/video/icon-state.css diff --git a/packages/skins/src/shared/video/tooltip-state.css b/packages/skins/src/shared/css/video/tooltip-state.css similarity index 100% rename from packages/skins/src/shared/video/tooltip-state.css rename to packages/skins/src/shared/css/video/tooltip-state.css diff --git a/packages/skins/src/default/tailwind/components/icon-state.ts b/packages/skins/src/shared/tailwind/icon-state.ts similarity index 88% rename from packages/skins/src/default/tailwind/components/icon-state.ts rename to packages/skins/src/shared/tailwind/icon-state.ts index 309df24a..41613554 100644 --- a/packages/skins/src/default/tailwind/components/icon-state.ts +++ b/packages/skins/src/shared/tailwind/icon-state.ts @@ -1,3 +1,7 @@ +/* ========================================================================== + Icon State + ========================================================================== */ + export const iconState = { play: { button: 'group', diff --git a/packages/skins/src/default/tailwind/components/tooltip-state.ts b/packages/skins/src/shared/tailwind/tooltip-state.ts similarity index 100% rename from packages/skins/src/default/tailwind/components/tooltip-state.ts rename to packages/skins/src/shared/tailwind/tooltip-state.ts