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

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

.controlsFrame {
  position: relative;
  display: block;
}
.controlsFrame.hidden {
  will-change: opacity;
  opacity: 0;
}
.controlsFrame .mediaControls {
  text-align: center;
  direction: ltr;
  white-space: nowrap;
}
.controlsFrame .mediaControls > *:first-child {
  margin-inline-start: 0;
}
.controlsFrame .actionGuide {
  padding-top: 1.625rem;
  transition: opacity 0.2s linear;
}
.controlsFrame .actionGuide.hidden {
  opacity: 0;
  visibility: hidden;
}
.controlsFrame .moreComponents {
  position: absolute;
  left: 0;
  right: 0;
  height: 0rem;
  opacity: 0;
}
.controlsFrame .moreComponents.hidden {
  visibility: hidden;
}
.controlsFrame .moreComponents .moreButtonsComponents > * {
  margin: 0;
  margin-inline-start: 4.75rem;
}
.controlsFrame .moreComponents .moreButtonsComponents > *:first-child {
  margin-inline-start: 0;
}
.controlsFrame .moreComponents > :first-child {
  margin-top: 0.875rem;
}
.controlsFrame .button {
  height: 3.75rem;
  min-width: 3.75rem;
  margin: 0;
  margin-inline-start: 1.875rem;
}
.controlsFrame .button .client {
  padding: 0 0.375rem;
}
.controlsFrame:global(.neutral) .button .bg {
  border-radius: 2rem;
}
:global(.enact-a11y-high-contrast) .controlsFrame:global(.neutral):global(.highContrast) .button .bg {
  border-radius: 2rem;
}
.controlsFrame:global(.light) .button .bg {
  border-radius: 2rem;
}
.controlsFrame:global(.game) .button .bg {
  border-radius: 2rem;
}
:global(.green) .controlsFrame:global(.game) .button .bg {
  border-radius: 2rem;
}
:global(.orange) .controlsFrame:global(.game) .button .bg {
  border-radius: 2rem;
}