@enact/sandstone/MediaPlayer/MediaSlider.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.sliderFrame {
  flex: 1 0 auto;
}
.sliderFrame.hidden {
  will-change: opacity;
  opacity: 0;
}
.sliderFrame .mediaSlider {
  margin: 0 1rem;
  padding: 1.5625rem 0;
  height: 0.25rem;
}
.sliderFrame .mediaSlider::before {
  content: "";
  position: absolute;
  top: 0;
  right: -1.75rem;
  bottom: 0;
  left: -1.75rem;
}
:global(.spotlight-input-key) .sliderFrame .mediaSlider:global(.spottable):focus .knob::before,
:global(.spotlight-input-mouse) .sliderFrame .mediaSlider:global(.spottable):focus .knob::before {
  opacity: 1;
}
:global(.spotlight-input-key) .sliderFrame .mediaSlider:global(.spottable):focus.active .knob::before,
:global(.spotlight-input-mouse) .sliderFrame .mediaSlider:global(.spottable):focus.active .knob::before,
:global(.spotlight-input-key) .sliderFrame .mediaSlider:global(.spottable):focus.pressed .knob::before,
:global(.spotlight-input-mouse) .sliderFrame .mediaSlider:global(.spottable):focus.pressed .knob::before {
  transform: translate(-50%, -50%) scale(1);
}
:global(.spotlight-input-touch) .sliderFrame .mediaSlider:global(.spottable):active .knob::before {
  opacity: 1;
}
:global(.spotlight-input-touch) .sliderFrame .mediaSlider:global(.spottable):active.active .knob::before,
:global(.spotlight-input-touch) .sliderFrame .mediaSlider:global(.spottable):active.pressed .knob::before {
  transform: translate(-50%, -50%) scale(1);
}
.sliderFrame .mediaSlider:global(.spottable).pressed .knob::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.sliderFrame .knob::before {
  width: 1rem;
  height: 1rem;
  border-width: 0;
  border-radius: 1rem;
  transform: translate(-50%, -50%) scale(0.75);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform cubic-bezier(0.15, 0.85, 0.6, 1.65) 0.2s, opacity ease 0.2s;
}
.sliderFrame.scrubbing .knob {
  display: block;
}
:global(.neutral) .sliderFrame .slider .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.neutral) .sliderFrame .slider .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.neutral) .sliderFrame .slider .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.neutral) .sliderFrame .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) :global(.neutral) .sliderFrame .slider:global(.spottable):focus .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-key) :global(.neutral) .sliderFrame .slider:global(.spottable):focus .fill,
:global(.spotlight-input-mouse) :global(.neutral) .sliderFrame .slider:global(.spottable):focus .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.neutral) .sliderFrame .slider:global(.spottable):focus[disabled] .bar,
:global(.spotlight-input-mouse) :global(.neutral) .sliderFrame .slider:global(.spottable):focus[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.neutral) .sliderFrame .slider:global(.spottable):active .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.neutral) .sliderFrame .slider:global(.spottable):active .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.neutral) .sliderFrame .slider:global(.spottable):active[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.neutral) .sliderFrame .slider.pressed .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.neutral) .sliderFrame .slider.pressed .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.neutral) .sliderFrame .slider.pressed .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.neutral) .sliderFrame .slider[disabled] .bar {
  opacity: 0.3;
}
:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):focus .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):focus .fill,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):focus .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):focus[disabled] .bar,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):focus[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):active .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):active .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider:global(.spottable):active[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider.pressed .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider.pressed .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider.pressed .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .sliderFrame .slider[disabled] .bar {
  opacity: 0.3;
}
:global(.light) .sliderFrame .slider .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65), 30%);
}
:global(.light) .sliderFrame .slider .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
:global(.light) .sliderFrame .slider .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
:global(.spotlight-input-key) :global(.light) .sliderFrame .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) :global(.light) .sliderFrame .slider:global(.spottable):focus .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65), 30%);
}
:global(.spotlight-input-key) :global(.light) .sliderFrame .slider:global(.spottable):focus .fill,
:global(.spotlight-input-mouse) :global(.light) .sliderFrame .slider:global(.spottable):focus .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
:global(.spotlight-input-key) :global(.light) .sliderFrame .slider:global(.spottable):focus[disabled] .bar,
:global(.spotlight-input-mouse) :global(.light) .sliderFrame .slider:global(.spottable):focus[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.light) .sliderFrame .slider:global(.spottable):active .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65), 30%);
}
:global(.spotlight-input-touch) :global(.light) .sliderFrame .slider:global(.spottable):active .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
:global(.spotlight-input-touch) :global(.light) .sliderFrame .slider:global(.spottable):active[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.light) .sliderFrame .slider.pressed .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65), 30%);
}
:global(.spotlight-input-touch) :global(.light) .sliderFrame .slider.pressed .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
:global(.spotlight-input-touch) :global(.light) .sliderFrame .slider.pressed .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 55, 58, 65));
}
:global(.light) .sliderFrame .slider[disabled] .bar {
  opacity: 0.3;
}
:global(.game) .sliderFrame .slider .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.game) .sliderFrame .slider .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.game) .sliderFrame .slider .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.game) .sliderFrame .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) :global(.game) .sliderFrame .slider:global(.spottable):focus .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-key) :global(.game) .sliderFrame .slider:global(.spottable):focus .fill,
:global(.spotlight-input-mouse) :global(.game) .sliderFrame .slider:global(.spottable):focus .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.game) .sliderFrame .slider:global(.spottable):focus[disabled] .bar,
:global(.spotlight-input-mouse) :global(.game) .sliderFrame .slider:global(.spottable):focus[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.game) .sliderFrame .slider:global(.spottable):active .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.game) .sliderFrame .slider:global(.spottable):active .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.game) .sliderFrame .slider:global(.spottable):active[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.game) .sliderFrame .slider.pressed .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.game) .sliderFrame .slider.pressed .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.game) .sliderFrame .slider.pressed .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.game) .sliderFrame .slider[disabled] .bar {
  opacity: 0.3;
}
:global(.green) :global(.game) .sliderFrame .slider .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.green) :global(.game) .sliderFrame .slider .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.green) :global(.game) .sliderFrame .slider .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):focus .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-key) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):focus .fill,
:global(.spotlight-input-mouse) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):focus .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):focus[disabled] .bar,
:global(.spotlight-input-mouse) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):focus[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):active .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):active .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .sliderFrame .slider:global(.spottable):active[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .sliderFrame .slider.pressed .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .sliderFrame .slider.pressed .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.green) :global(.game) .sliderFrame .slider.pressed .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.green) :global(.game) .sliderFrame .slider[disabled] .bar {
  opacity: 0.3;
}
:global(.orange) :global(.game) .sliderFrame .slider .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.orange) :global(.game) .sliderFrame .slider .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.orange) :global(.game) .sliderFrame .slider .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):focus .bar,
:global(.spotlight-input-mouse) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):focus .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-key) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):focus .fill,
:global(.spotlight-input-mouse) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):focus .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):focus[disabled] .bar,
:global(.spotlight-input-mouse) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):focus[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):active .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):active .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .sliderFrame .slider:global(.spottable):active[disabled] .bar {
  opacity: 0.3;
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .sliderFrame .slider.pressed .bar {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230), 30%);
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .sliderFrame .slider.pressed .fill {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.orange) :global(.game) .sliderFrame .slider.pressed .knob::before {
  background-color: rgb(var(--sand-progress-color-rgb, 230, 230, 230));
}
:global(.orange) :global(.game) .sliderFrame .slider[disabled] .bar {
  opacity: 0.3;
}