@enact/sandstone/MediaOverlay/MediaOverlay.module.css

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

.mediaOverlay {
  display: block;
  position: relative;
  width: 13.375rem;
  height: auto;
  padding: 0.5rem;
}
.mediaOverlay .bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0.25rem;
}
.mediaOverlay .mediaContainer {
  position: relative;
}
.mediaOverlay .media {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}
.mediaOverlay .image,
.mediaOverlay .textLayout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mediaOverlay .textLayout {
  margin: 0.5rem 1.25rem;
}
.mediaOverlay .image {
  margin: 0;
  height: auto;
  width: auto;
}
.mediaOverlay .text {
  font-family: "Sandstone";
  font-size: 1rem;
  line-height: 1.3em;
  font-weight: 500;
}
:global(.enact-locale-non-latin) .mediaOverlay .text {
  font-family: "Sandstone";
  font-size: 1rem;
  line-height: 1.3em;
}
.mediaOverlay .progressBar {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 0.125rem 0.125rem 0.125rem;
}
.mediaOverlay .captionContainer > :first-child {
  margin-top: 0.625rem;
}
.mediaOverlay .captionContainer > :last-child {
  margin-bottom: 0.125rem;
}
.mediaOverlay .caption,
.mediaOverlay .subtitle {
  font-family: "Sandstone";
  font-size: 1rem;
  line-height: 1.3em;
}
:global(.enact-locale-non-latin) .mediaOverlay .caption,
:global(.enact-locale-non-latin) .mediaOverlay .subtitle {
  font-family: "Sandstone";
  font-size: 1rem;
  line-height: 1.3em;
}
.mediaOverlay .title {
  font-family: "Sandstone";
  font-size: 1.25rem;
  line-height: 1.3em;
}
:global(.enact-locale-non-latin) .mediaOverlay .title {
  font-family: "Sandstone";
  font-size: 1.25rem;
  line-height: 1.3em;
}
.mediaOverlay:global(.neutral) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow;
}
.mediaOverlay:global(.neutral) .caption,
.mediaOverlay:global(.neutral) .title {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.mediaOverlay:global(.neutral) .subtitle {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) .mediaOverlay:global(.neutral):global(.spottable):focus,
:global(.spotlight-input-mouse) .mediaOverlay:global(.neutral):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .mediaOverlay:global(.neutral):global(.spottable):focus .caption,
:global(.spotlight-input-mouse) .mediaOverlay:global(.neutral):global(.spottable):focus .caption,
:global(.spotlight-input-key) .mediaOverlay:global(.neutral):global(.spottable):focus .title,
:global(.spotlight-input-mouse) .mediaOverlay:global(.neutral):global(.spottable):focus .title,
:global(.spotlight-input-key) .mediaOverlay:global(.neutral):global(.spottable):focus .subtitle,
:global(.spotlight-input-mouse) .mediaOverlay:global(.neutral):global(.spottable):focus .subtitle {
  color: inherit;
}
:global(.spotlight-input-key) .mediaOverlay:global(.neutral):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .mediaOverlay:global(.neutral):global(.spottable):focus .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.spotlight-input-touch) .mediaOverlay:global(.neutral):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .mediaOverlay:global(.neutral):global(.spottable):active .caption,
:global(.spotlight-input-touch) .mediaOverlay:global(.neutral):global(.spottable):active .title,
:global(.spotlight-input-touch) .mediaOverlay:global(.neutral):global(.spottable):active .subtitle {
  color: inherit;
}
:global(.spotlight-input-touch) .mediaOverlay:global(.neutral):global(.spottable):active .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow;
}
:global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast) .caption,
:global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast) .title {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast) .subtitle {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .caption,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .caption,
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .title,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .title,
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .subtitle,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .subtitle {
  color: inherit;
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):active .caption,
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):active .title,
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):active .subtitle {
  color: inherit;
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .mediaOverlay:global(.neutral):global(.highContrast):global(.spottable):active .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.mediaOverlay:global(.light) .bg {
  opacity: 0;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  will-change: box-shadow;
}
.mediaOverlay:global(.light) .caption,
.mediaOverlay:global(.light) .title {
  color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
}
.mediaOverlay:global(.light) .subtitle {
  color: var(--sand-text-sub-color, #2e3239);
}
:global(.spotlight-input-key) .mediaOverlay:global(.light):global(.spottable):focus,
:global(.spotlight-input-mouse) .mediaOverlay:global(.light):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .mediaOverlay:global(.light):global(.spottable):focus .caption,
:global(.spotlight-input-mouse) .mediaOverlay:global(.light):global(.spottable):focus .caption,
:global(.spotlight-input-key) .mediaOverlay:global(.light):global(.spottable):focus .title,
:global(.spotlight-input-mouse) .mediaOverlay:global(.light):global(.spottable):focus .title,
:global(.spotlight-input-key) .mediaOverlay:global(.light):global(.spottable):focus .subtitle,
:global(.spotlight-input-mouse) .mediaOverlay:global(.light):global(.spottable):focus .subtitle {
  color: inherit;
}
:global(.spotlight-input-key) .mediaOverlay:global(.light):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .mediaOverlay:global(.light):global(.spottable):focus .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.spotlight-input-touch) .mediaOverlay:global(.light):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .mediaOverlay:global(.light):global(.spottable):active .caption,
:global(.spotlight-input-touch) .mediaOverlay:global(.light):global(.spottable):active .title,
:global(.spotlight-input-touch) .mediaOverlay:global(.light):global(.spottable):active .subtitle {
  color: inherit;
}
:global(.spotlight-input-touch) .mediaOverlay:global(.light):global(.spottable):active .bg {
  opacity: 1;
  background-color: rgb(var(--sand-focus-bg-color-rgb, 230, 230, 230));
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.mediaOverlay:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  will-change: box-shadow;
}
.mediaOverlay:global(.game) .caption,
.mediaOverlay:global(.game) .title {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.mediaOverlay:global(.game) .subtitle {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) .mediaOverlay:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) .mediaOverlay:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .mediaOverlay:global(.game):global(.spottable):focus .caption,
:global(.spotlight-input-mouse) .mediaOverlay:global(.game):global(.spottable):focus .caption,
:global(.spotlight-input-key) .mediaOverlay:global(.game):global(.spottable):focus .title,
:global(.spotlight-input-mouse) .mediaOverlay:global(.game):global(.spottable):focus .title,
:global(.spotlight-input-key) .mediaOverlay:global(.game):global(.spottable):focus .subtitle,
:global(.spotlight-input-mouse) .mediaOverlay:global(.game):global(.spottable):focus .subtitle {
  color: inherit;
}
:global(.spotlight-input-key) .mediaOverlay:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) .mediaOverlay:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.spotlight-input-touch) .mediaOverlay:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) .mediaOverlay:global(.game):global(.spottable):active .caption,
:global(.spotlight-input-touch) .mediaOverlay:global(.game):global(.spottable):active .title,
:global(.spotlight-input-touch) .mediaOverlay:global(.game):global(.spottable):active .subtitle {
  color: inherit;
}
:global(.spotlight-input-touch) .mediaOverlay:global(.game):global(.spottable):active .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #6d2fa1);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.green) .mediaOverlay:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  will-change: box-shadow;
}
:global(.green) .mediaOverlay:global(.game) .caption,
:global(.green) .mediaOverlay:global(.game) .title {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.green) .mediaOverlay:global(.game) .subtitle {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .caption,
:global(.spotlight-input-mouse) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .caption,
:global(.spotlight-input-key) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .title,
:global(.spotlight-input-mouse) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .title,
:global(.spotlight-input-key) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .subtitle,
:global(.spotlight-input-mouse) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .subtitle {
  color: inherit;
}
:global(.spotlight-input-key) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.green) .mediaOverlay:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.spotlight-input-touch) :global(.green) .mediaOverlay:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.green) .mediaOverlay:global(.game):global(.spottable):active .caption,
:global(.spotlight-input-touch) :global(.green) .mediaOverlay:global(.game):global(.spottable):active .title,
:global(.spotlight-input-touch) :global(.green) .mediaOverlay:global(.game):global(.spottable):active .subtitle {
  color: inherit;
}
:global(.spotlight-input-touch) :global(.green) .mediaOverlay:global(.game):global(.spottable):active .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #3ea07d);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.orange) .mediaOverlay:global(.game) .bg {
  opacity: 0;
  background-color: var(--sand-focus-bg-color, #b85f23);
  will-change: box-shadow;
}
:global(.orange) .mediaOverlay:global(.game) .caption,
:global(.orange) .mediaOverlay:global(.game) .title {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.orange) .mediaOverlay:global(.game) .subtitle {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.spotlight-input-key) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .caption,
:global(.spotlight-input-mouse) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .caption,
:global(.spotlight-input-key) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .title,
:global(.spotlight-input-mouse) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .title,
:global(.spotlight-input-key) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .subtitle,
:global(.spotlight-input-mouse) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .subtitle {
  color: inherit;
}
:global(.spotlight-input-key) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .bg,
:global(.spotlight-input-mouse) :global(.orange) .mediaOverlay:global(.game):global(.spottable):focus .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #b85f23);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.spotlight-input-touch) :global(.orange) .mediaOverlay:global(.game):global(.spottable):active {
  color: rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.orange) .mediaOverlay:global(.game):global(.spottable):active .caption,
:global(.spotlight-input-touch) :global(.orange) .mediaOverlay:global(.game):global(.spottable):active .title,
:global(.spotlight-input-touch) :global(.orange) .mediaOverlay:global(.game):global(.spottable):active .subtitle {
  color: inherit;
}
:global(.spotlight-input-touch) :global(.orange) .mediaOverlay:global(.game):global(.spottable):active .bg {
  opacity: 1;
  background-color: var(--sand-focus-bg-color, #b85f23);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}