mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
38 lines
1.5 KiB
CSS
38 lines
1.5 KiB
CSS
/* ==========================================================================
|
|
Icon State Visibility for Audio 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 {
|
|
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 {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|