@enact/sandstone/VideoPlayer/FeedbackTooltip.module.css

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

.feedbackTooltip {
  position: absolute;
  bottom: 0.875rem;
}
.feedbackTooltip.shift {
  bottom: 1.375rem;
}
.feedbackTooltip.shift .content {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}
.feedbackTooltip.hidden {
  display: none;
}
.feedbackTooltip .thumbnail,
.feedbackTooltip .content {
  pointer-events: none;
  will-change: transform;
}
.feedbackTooltip .thumbnail {
  border-width: 0.125rem;
  border-style: solid;
  border-radius: 0;
  overflow: hidden;
  transition: opacity 250ms;
}
.feedbackTooltip .thumbnail .image {
  margin: 0;
  width: 8.875rem;
  height: 5rem;
}
.feedbackTooltip.thumbnailDeactivated .thumbnail {
  opacity: 0.5;
}
.feedbackTooltip .content {
  font-family: "Sandstone";
  font-family: "Sandstone Number";
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5rem;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 0.125rem;
}
:global(.enact-locale-non-latin) .feedbackTooltip .content {
  font-family: "Sandstone";
  font-size: 1rem;
  font-weight: normal;
}
:global(.enact-locale-non-latin) .feedbackTooltip .content {
  font-family: "Sandstone Number";
}
.feedbackTooltip .alignmentContainer {
  position: relative;
  right: 50%;
}
.feedbackTooltip .arrowContainer {
  position: absolute;
  left: 0;
  right: 0;
}
.feedbackTooltip .arrowContainer.hidden {
  display: none;
}
.feedbackTooltip .arrowContainer .arrow {
  margin: auto;
  width: 0;
  height: 0;
  border-top: 0.5rem solid;
  border-right: 0.375rem solid;
  border-left: 0.375rem solid;
}
.feedbackTooltip:global(.neutral) .thumbnail {
  border-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.feedbackTooltip:global(.neutral) .arrow {
  border-top-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-right-color: transparent;
  border-left-color: transparent;
}
.feedbackTooltip:global(.neutral) .content {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  text-shadow: 0 0.08333rem 0.08333rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 75%);
}
:global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast) .thumbnail {
  border-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast) .arrow {
  border-top-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-right-color: transparent;
  border-left-color: transparent;
}
:global(.enact-a11y-high-contrast) .feedbackTooltip:global(.neutral):global(.highContrast) .content {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  text-shadow: 0 0.08333rem 0.08333rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 75%);
}
.feedbackTooltip:global(.light) .thumbnail {
  border-color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
}
.feedbackTooltip:global(.light) .arrow {
  border-top-color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
  border-right-color: transparent;
  border-left-color: transparent;
}
.feedbackTooltip:global(.light) .content {
  color: rgb(var(--sand-text-color-rgb, 46, 50, 57));
  text-shadow: 0 0.08333rem 0.08333rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 75%);
}
.feedbackTooltip:global(.game) .thumbnail {
  border-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
.feedbackTooltip:global(.game) .arrow {
  border-top-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-right-color: transparent;
  border-left-color: transparent;
}
.feedbackTooltip:global(.game) .content {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  text-shadow: 0 0.08333rem 0.08333rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 75%);
}
:global(.green) .feedbackTooltip:global(.game) .thumbnail {
  border-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.green) .feedbackTooltip:global(.game) .arrow {
  border-top-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-right-color: transparent;
  border-left-color: transparent;
}
:global(.green) .feedbackTooltip:global(.game) .content {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  text-shadow: 0 0.08333rem 0.08333rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 75%);
}
:global(.orange) .feedbackTooltip:global(.game) .thumbnail {
  border-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
}
:global(.orange) .feedbackTooltip:global(.game) .arrow {
  border-top-color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-right-color: transparent;
  border-left-color: transparent;
}
:global(.orange) .feedbackTooltip:global(.game) .content {
  color: rgb(var(--sand-text-color-rgb, 230, 230, 230));
  text-shadow: 0 0.08333rem 0.08333rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 75%);
}