@enact/sandstone/KeyGuide/KeyGuide.module.css

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

.keyGuide {
  position: absolute;
  width: 15.625rem;
  right: 3.125rem;
  bottom: 2.5rem;
  padding: 0.5rem 0;
}
.keyGuide .item {
  font-family: "Sandstone";
  font-size: 1.25rem;
  height: 2.5rem;
  margin: 0;
}
:global(.enact-locale-non-latin) .keyGuide .item {
  font-family: "Sandstone";
  font-size: 1.25rem;
}
.keyGuide .item .icon {
  margin: 0;
}
.keyGuide .item .slotBefore {
  margin-inline-end: 1rem;
}
.keyGuide .red,
.keyGuide .green,
.keyGuide .yellow,
.keyGuide .blue {
  width: 1.25rem;
  height: 0.25rem;
  margin: 0 0.1875rem;
  border-radius: 0.125rem;
}
.keyGuide:global(.neutral) {
  background: rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65), 90%);
}
.keyGuide:global(.neutral) .red {
  background-color: #e1777e;
}
.keyGuide:global(.neutral) .green {
  background-color: #7fd563;
}
.keyGuide:global(.neutral) .yellow {
  background-color: #d3b85f;
}
.keyGuide:global(.neutral) .blue {
  background-color: #5185c1;
}
.keyGuide:global(.neutral) .item {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) {
  background: rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65));
}
:global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .red {
  background-color: #e1777e;
}
:global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .green {
  background-color: #7fd563;
}
:global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .yellow {
  background-color: #d3b85f;
}
:global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .blue {
  background-color: #5185c1;
}
:global(.enact-a11y-high-contrast) .keyGuide:global(.neutral):global(.highContrast) .item {
  color: var(--sand-text-sub-color, #abaeb3);
}
.keyGuide:global(.light) {
  background: rgb(var(--sand-keyguide-bg-color-rgb, var(--sand-alert-overlay-bg-color-rgb, 187, 187, 187)), 90%);
}
.keyGuide:global(.light) .red {
  background-color: #e1777e;
}
.keyGuide:global(.light) .green {
  background-color: #7fd563;
}
.keyGuide:global(.light) .yellow {
  background-color: #d3b85f;
}
.keyGuide:global(.light) .blue {
  background-color: #5185c1;
}
.keyGuide:global(.light) .item {
  color: var(--sand-text-sub-color, #2e3239);
}
.keyGuide:global(.game) {
  background: rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65), 90%);
}
.keyGuide:global(.game) .red {
  background-color: #e1777e;
}
.keyGuide:global(.game) .green {
  background-color: #7fd563;
}
.keyGuide:global(.game) .yellow {
  background-color: #d3b85f;
}
.keyGuide:global(.game) .blue {
  background-color: #5185c1;
}
.keyGuide:global(.game) .item {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.green) .keyGuide:global(.game) {
  background: rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65), 90%);
}
:global(.green) .keyGuide:global(.game) .red {
  background-color: #e1777e;
}
:global(.green) .keyGuide:global(.game) .green {
  background-color: #7fd563;
}
:global(.green) .keyGuide:global(.game) .yellow {
  background-color: #d3b85f;
}
:global(.green) .keyGuide:global(.game) .blue {
  background-color: #5185c1;
}
:global(.green) .keyGuide:global(.game) .item {
  color: var(--sand-text-sub-color, #abaeb3);
}
:global(.orange) .keyGuide:global(.game) {
  background: rgb(var(--sand-keyguide-bg-color-rgb, 55, 58, 65), 90%);
}
:global(.orange) .keyGuide:global(.game) .red {
  background-color: #e1777e;
}
:global(.orange) .keyGuide:global(.game) .green {
  background-color: #7fd563;
}
:global(.orange) .keyGuide:global(.game) .yellow {
  background-color: #d3b85f;
}
:global(.orange) .keyGuide:global(.game) .blue {
  background-color: #5185c1;
}
:global(.orange) .keyGuide:global(.game) .item {
  color: var(--sand-text-sub-color, #abaeb3);
}