/* Umpteenth audio player widget - official styles for its components. Alpha version, subject to change.
 * Do not change this file on your own, otherwise avoid posting issues concerning custom variations --
 *   they would probably be ignored and closed anyway.
 * Do not forget to also link a theme style css file from themes/ subdirectory, or style your own.
 *   Without a theme, you will not see a thing.
 */
.audio-widget { display: flex; height:1.2em; line-height: 1.2em; } .audio-widget > .bar { flex: 1; overflow-x: hidden; line-height: 1.0em; }
.audio-widget button { mask-image:url("icons.svg"); mask-size: 5em 3em; padding: 0.3em 0.45em; border: none; background-color: white; } .audio-widget .previous { mask-position: 3.2em 0; } .audio-widget .play { mask-position: -0.3em 0; } .audio-widget .pause { mask-position: -0.3em 1.5em; } .audio-widget .volume { mask-position: 3.2em 1.5em; } .audio-widget .repeat { mask-position: 1.7em 1.5em; } .audio-widget .repeat.on { background-color: yellow; } .audio-widget .next { mask-position: 1.7em 0; } .audio-widget .slider { display: inline-block; margin: 0; white-space:nowrap; width: fit-content; background-color: black; padding: 0; color: white; vertical-align: middle; } .audio-widget .slider > button { display: none; } .audio-widget .dragger { height: 100%; cursor: grab; } .audio-widget .dragger span::before { content:" "; } .audio-widget .dragger span::after { content:" "; } .audio-widget .dragger:is(:hover, .ui-draggable-dragging) span::before { content:"‹"; } .audio-widget .dragger:is(:hover, .ui-draggable-dragging) span::after { content:"›"; } .audio-widget .dragger:hover { cursor: grab; } .audio-widget .dragger.ui-draggable-dragging { cursor: grabbing; } .audio-widget .dragger > button {} .audio-widget .volume-slider { min-width: 100%; } .audio-widget .slider + .slider { display: none; }