zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(packages): make tooltips visual-only and auto-forward media button labels (#1174)

Browse Source 
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
rahim
2026-04-02 14:20:01 -07:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 341b405a21
commit 86cf3e8977
52 changed files with 242 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skins/src/default/css/audio.css
-1
View File
@@ -11,7 +11,6 @@
@import "./components/slider.css";
@import "./components/popup.css";
@import "../../shared/css/audio/icon-state.css";
@import "../../shared/css/audio/tooltip-state.css";
/* ==========================================================================
Root
packages/skins/src/default/css/video.css
-1
View File
@@ -16,7 +16,6 @@
@import "./components/popup.css";
@import "./components/captions.css";
@import "../../shared/css/video/icon-state.css";
@import "../../shared/css/video/tooltip-state.css";
/* ==========================================================================
Root
packages/skins/src/default/tailwind/audio.tailwind.ts
-1
View File
@@ -101,7 +101,6 @@ export const error = {
========================================================================== */
export { iconState } from '../../shared/tailwind/icon-state';
export { tooltipState } from '../../shared/tailwind/tooltip-state';
export { button } from './components/button';
export { buttonGroup } from './components/button-group';
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
packages/skins/src/default/tailwind/video.tailwind.ts
-1
View File
@@ -193,7 +193,6 @@ export const error = {
========================================================================== */
export { iconState } from '../../shared/tailwind/icon-state';
export { tooltipState } from '../../shared/tailwind/tooltip-state';
export { button } from './components/button';
export { buttonGroup } from './components/button-group';
export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon';
packages/skins/src/minimal/css/audio.css
-1
View File
@@ -10,7 +10,6 @@
@import "./components/slider.css";
@import "./components/popup.css";
@import "../../shared/css/audio/icon-state.css";
@import "../../shared/css/audio/tooltip-state.css";
/* ==========================================================================
Root
packages/skins/src/minimal/css/video.css
-1
View File
@@ -15,7 +15,6 @@
@import "./components/popup.css";
@import "./components/captions.css";
@import "../../shared/css/video/icon-state.css";
@import "../../shared/css/video/tooltip-state.css";
/* ==========================================================================
Root
packages/skins/src/minimal/tailwind/audio.tailwind.ts
-1
View File
@@ -89,7 +89,6 @@ export const error = {
========================================================================== */
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';
packages/skins/src/minimal/tailwind/video.tailwind.ts
-1
View File
@@ -188,7 +188,6 @@ export const popup = {
========================================================================== */
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';
packages/skins/src/shared/css/audio/tooltip-state.css
-25
View File
@@ -1,25 +0,0 @@
/* ==========================================================================
Tooltip Label State Visibility for Audio Skins
Data-attribute-driven visibility rules for multi-state tooltip labels.
Uses adjacent sibling selectors to match button state → tooltip content.
========================================================================== */
/* --- All multi-state labels hidden by default --- */
.media-tooltip-label {
display: none;
}
/* --- Active label per state --- */
/* Play: ended → replay */
.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
/* Play: paused (not ended) → play */
.media-button--play:not([data-ended])[data-paused] + .media-tooltip
.media-tooltip-label--play,
/* Play: playing (not paused, not ended) → pause */
.media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
.media-tooltip-label--pause {
display: block;
}
packages/skins/src/shared/css/video/tooltip-state.css
-43
View File
@@ -1,43 +0,0 @@
/* ==========================================================================
Tooltip Label State Visibility for Video Skins
Data-attribute-driven visibility rules for multi-state tooltip labels.
Uses adjacent sibling selectors to match button state → tooltip content.
========================================================================== */
/* --- All multi-state labels hidden by default --- */
.media-tooltip-label {
display: none;
}
/* --- Active label per state --- */
/* Play: ended → replay */
.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,
/* Play: paused (not ended) → play */
.media-button--play:not([data-ended])[data-paused] + .media-tooltip
.media-tooltip-label--play,
/* Play: playing (not paused, not ended) → pause */
.media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip
.media-tooltip-label--pause,
/* Fullscreen: not fullscreen → enter */
.media-button--fullscreen:not([data-fullscreen]) + .media-tooltip
.media-tooltip-label--enter-fullscreen,
/* Fullscreen: fullscreen → exit */
.media-button--fullscreen[data-fullscreen] + .media-tooltip
.media-tooltip-label--exit-fullscreen,
/* Captions: not active → enable */
.media-button--captions:not([data-active]) + .media-tooltip
.media-tooltip-label--enable-captions,
/* Captions: active → disable */
.media-button--captions[data-active] + .media-tooltip
.media-tooltip-label--disable-captions,
/* PiP: not in pip → enter */
.media-button--pip:not([data-pip]) + .media-tooltip
.media-tooltip-label--enter-pip,
/* PiP: in pip → exit */
.media-button--pip[data-pip] + .media-tooltip
.media-tooltip-label--exit-pip {
display: block;
}
packages/skins/src/shared/tailwind/tooltip-state.ts
-23
View File
@@ -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',
},
};