mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
50 lines
2.1 KiB
CSS
50 lines
2.1 KiB
CSS
/* ==========================================================================
|
|
Icon State Visibility for Video Skins
|
|
|
|
Data-attribute-driven visibility rules for multi-state icon buttons.
|
|
Uses :is() with both element selectors (for HTML custom element wrappers)
|
|
and class selectors (for React rendered SVG elements).
|
|
========================================================================== */
|
|
|
|
/* --- All icons hidden by default --- */
|
|
|
|
.media-button--play .media-icon--restart,
|
|
.media-button--play .media-icon--play,
|
|
.media-button--play .media-icon--pause,
|
|
.media-button--mute .media-icon--volume-off,
|
|
.media-button--mute .media-icon--volume-low,
|
|
.media-button--mute .media-icon--volume-high,
|
|
.media-button--fullscreen .media-icon--fullscreen-enter,
|
|
.media-button--fullscreen .media-icon--fullscreen-exit,
|
|
.media-button--captions .media-icon--captions-off,
|
|
.media-button--captions .media-icon--captions-on {
|
|
display: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* --- Active icon per state --- */
|
|
|
|
/* Play: ended → restart */
|
|
.media-button--play[data-ended] .media-icon--restart,
|
|
/* Play: paused (not ended) → play */
|
|
.media-button--play:not([data-ended])[data-paused] .media-icon--play,
|
|
/* Play: playing (not paused, not ended) → pause */
|
|
.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,
|
|
/* Mute: muted → volume off */
|
|
.media-button--mute[data-muted] .media-icon--volume-off,
|
|
/* Mute: volume low (not muted) → volume low */
|
|
.media-button--mute:not([data-muted])[data-volume-level="low"] .media-icon--volume-low,
|
|
/* Mute: volume high (not muted, not low) → volume high */
|
|
.media-button--mute:not([data-muted]):not([data-volume-level="low"]) .media-icon--volume-high,
|
|
/* Fullscreen: not fullscreen → enter */
|
|
.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,
|
|
/* Fullscreen: fullscreen → exit */
|
|
.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,
|
|
/* Captions: not active → captions off */
|
|
.media-button--captions:not([data-active]) .media-icon--captions-off,
|
|
/* Captions: active → captions on */
|
|
.media-button--captions[data-active] .media-icon--captions-on {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|