@enact/sandstone/Alert/Alert.module.css

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

.alertWrapper {
  display: inline;
}
.alert.noImage {
  /* Needed to prevent global class being added in the DOM */
}
.alert.fullscreen .alertImage {
  margin-bottom: 0.625rem;
}
.alert.fullscreen .title,
.alert.fullscreen .content {
  max-width: 42.25rem;
}
.alert.fullscreen .content {
  margin: 0;
  overflow: hidden;
  max-height: 60%;
}
.alert.fullscreen.noTitle .content {
  font-size: 1.875rem;
  line-height: 1.3em;
}
:global(.enact-locale-non-latin) .alert.fullscreen.noTitle .content {
  font-size: 1.875rem;
}
:global(.enact-locale-km) .alert.fullscreen.noTitle .content {
  line-height: 1.5em;
}
:global(.enact-locale-si) .alert.fullscreen.noTitle .content {
  line-height: 1.5em;
}
:global(.enact-locale-th) .alert.fullscreen.noTitle .content {
  line-height: 1.5em;
}
:global(.enact-locale-vi) .alert.fullscreen.noTitle .content {
  line-height: 1.5em;
}
.alert.fullscreen.maxButtons .buttonContainer {
  margin-top: 6.25rem;
}
.alert.fullscreen .title {
  font-size: 3rem;
}
:global(.enact-locale-non-latin) .alert.fullscreen .title {
  font-size: 3rem;
}
.alert.fullscreen .buttonContainer {
  margin-top: 3.75rem;
}
.alert.fullscreen .buttonContainer .buttonCell + .buttonCell {
  margin-top: 1.25rem;
}
.alert.overlay .alertImage {
  margin: 0;
}
.alert.overlay .buttonContainer {
  box-sizing: border-box;
}
.alert.overlay .buttonContainer .buttonCell + .buttonCell {
  margin-top: 0.625rem;
}
.alert.overlay .buttonContainer.full {
  margin: 0 0 0 2.625rem;
  margin-left: 2.625rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .alert.overlay .buttonContainer.full {
  margin-left: 0;
  margin-right: 2.625rem;
}
:global(.enact-orientation-portrait) .alert.overlay .buttonContainer.full {
  margin: 0 0 0 1.625rem;
  margin-left: 1.625rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) :global(.enact-orientation-portrait) .alert.overlay .buttonContainer.full {
  margin-left: 0;
  margin-right: 1.625rem;
}
.alert.overlay .content {
  font-family: "Sandstone";
  line-height: normal;
  font-weight: normal;
  font-size: 1.25rem;
  text-align: initial;
  overflow-wrap: break-word;
  word-break: keep-all;
}
:global(.enact-locale-non-latin) .alert.overlay .content {
  font-family: "Sandstone";
}
:global(.enact-locale-km) .alert.overlay .content {
  line-height: 1.7em;
}
:global(.enact-locale-si) .alert.overlay .content {
  line-height: 1.7em;
}
:global(.enact-locale-th) .alert.overlay .content {
  line-height: 1.7em;
}
:global(.enact-locale-vi) .alert.overlay .content {
  line-height: 1.7em;
}
:global(.enact-locale-ja) .alert.overlay .content {
  line-break: strict;
}
:global(.enact-locale-ja) .alert.overlay .content,
:global(.enact-locale-zh) .alert.overlay .content {
  overflow-wrap: normal;
  word-break: normal;
}
.alert.overlay .content.full {
  width: 25rem;
  margin-left: 1rem;
  margin-right: 0.75rem;
  margin-bottom: 0;
}
:global(.enact-locale-right-to-left) .alert.overlay .content.full {
  margin-left: 0.75rem;
  margin-right: 1rem;
}
:global(.enact-orientation-portrait) .alert.overlay .content.full {
  width: 17.125rem;
  margin-left: 1rem;
  margin-right: 0.75rem;
}
:global(.enact-locale-right-to-left) :global(.enact-orientation-portrait) .alert.overlay .content.full {
  margin-left: 0.75rem;
  margin-right: 1rem;
}
.alert.overlay.noImage .content {
  margin-left: 0.625rem;
  margin-right: 0.75rem;
}
:global(.enact-locale-right-to-left) .alert.overlay.noImage .content {
  margin-left: 0.75rem;
  margin-right: 0.625rem;
}
:global(.enact-orientation-portrait) .alert.overlay.noImage .content {
  width: 21.25rem;
  margin-left: 0.625rem;
  margin-right: 0.75rem;
}
:global(.enact-locale-right-to-left) :global(.enact-orientation-portrait) .alert.overlay.noImage .content {
  margin-left: 0.75rem;
  margin-right: 0.625rem;
}
.popup.overlay {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.popup.overlay .body {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.125rem;
}
:global(.enact-locale-right-to-left) .popup.overlay .body {
  padding-left: 1.125rem;
  padding-right: 1.25rem;
}
.popup:global(.neutral) {
  background-color: var(--sand-fullscreen-bg-color, var(--sand-bg-color, #000000));
}
.popup:global(.neutral).overlay {
  margin-bottom: 7.5rem;
  border-radius: 0.5rem;
  /* Override colors inside overlay type Alert */
  --sand-bg-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 202, 203, 204));
  --sand-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 46, 50, 57);
  --sand-text-sub-color: var(--sand-alert-overlay-text-sub-color, #2e3239);
  --sand-focus-text-color: var(--sand-alert-overlay-focus-text-color, #575e66);
  --sand-disabled-selected-color: var(--sand-alert-overlay-disabled-selected-color, #ffffff);
  --sand-disabled-selected-bg-color: var(--sand-alert-overlay-disabled-selected-bg-color, #788688);
  --sand-disabled-selected-focus-color: var(--sand-alert-overlay-disabled-selected-focus-color, #e6e6e6);
  --sand-disabled-selected-focus-bg-color: var(--sand-alert-overlay-disabled-selected-focus-bg-color, #4c5059);
  --sand-progress-color-rgb: var(--sand-alert-overlay-progress-color-rgb, 55, 58, 65);
  --sand-progress-bg-color-rgb: var(--sand-alert-overlay-progress-bg-color-rgb, 161, 161, 161);
  --sand-progress-bg-color-alpha: var(--sand-alert-overlay-progress-bg-color-alpha, 40%);
  --sand-checkbox-color: var(--sand-alert-overlay-checkbox-color, #858b92);
  --sand-checkbox-disabled-selected-text-color: var(--sand-alert-overlay-checkbox-disabled-selected-text-color, #ffffff);
  --sand-formcheckboxitem-focus-text-color: var(--sand-alert-overlay-formcheckboxitem-focus-text-color, var(--sand-alert-overlay-focus-text-color, #575e66));
  --sand-item-disabled-focus-bg-color: var(--sand-alert-overlay-item-disabled-focus-bg-color, #989ca2);
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 202, 203, 204), 95%);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast) {
  background-color: var(--sand-fullscreen-bg-color, var(--sand-bg-color, #000000));
}
:global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay {
  margin-bottom: 7.5rem;
  border-radius: 0.5rem;
  /* Override colors inside overlay type Alert */
  --sand-bg-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0));
  --sand-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 230, 230, 230);
  --sand-text-sub-color: var(--sand-alert-overlay-text-sub-color, #abaeb3);
  --sand-focus-text-color: var(--sand-alert-overlay-focus-text-color, #ffffff);
  --sand-disabled-selected-color: var(--sand-alert-overlay-disabled-selected-color, #ffffff);
  --sand-disabled-selected-bg-color: var(--sand-alert-overlay-disabled-selected-bg-color, #788688);
  --sand-disabled-selected-focus-color: var(--sand-alert-overlay-disabled-selected-focus-color, #e6e6e6);
  --sand-disabled-selected-focus-bg-color: var(--sand-alert-overlay-disabled-selected-focus-bg-color, #4c5059);
  --sand-progress-color-rgb: var(--sand-alert-overlay-progress-color-rgb, 230, 230, 230);
  --sand-progress-bg-color-rgb: var(--sand-alert-overlay-progress-bg-color-rgb, 55, 58, 65);
  --sand-progress-bg-color-alpha: var(--sand-alert-overlay-progress-bg-color-alpha, 100%);
  --sand-checkbox-color: var(--sand-alert-overlay-checkbox-color, #e6e6e6);
  --sand-checkbox-disabled-selected-text-color: var(--sand-alert-overlay-checkbox-disabled-selected-text-color, #4c5059);
  --sand-formcheckboxitem-focus-text-color: var(--sand-alert-overlay-formcheckboxitem-focus-text-color, var(--sand-alert-overlay-focus-text-color, #ffffff));
  --sand-item-disabled-focus-bg-color: var(--sand-alert-overlay-item-disabled-focus-bg-color, #e6e6e6);
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0), 100%);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.popup:global(.light) {
  background-color: var(--sand-fullscreen-bg-color, var(--sand-bg-color, #cacbcc));
}
.popup:global(.light).overlay {
  margin-bottom: 7.5rem;
  border-radius: 0.5rem;
  /* Override colors inside overlay type Alert */
  --sand-bg-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0));
  --sand-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 230, 230, 230);
  --sand-text-sub-color: var(--sand-alert-overlay-text-sub-color, #abaeb3);
  --sand-focus-text-color: var(--sand-alert-overlay-focus-text-color, #ffffff);
  --sand-disabled-selected-color: var(--sand-alert-overlay-disabled-selected-color, #ffffff);
  --sand-disabled-selected-bg-color: var(--sand-alert-overlay-disabled-selected-bg-color, #788688);
  --sand-disabled-selected-focus-color: var(--sand-alert-overlay-disabled-selected-focus-color, #e6e6e6);
  --sand-disabled-selected-focus-bg-color: var(--sand-alert-overlay-disabled-selected-focus-bg-color, #4c5059);
  --sand-progress-color-rgb: var(--sand-alert-overlay-progress-color-rgb, 230, 230, 230);
  --sand-progress-bg-color-rgb: var(--sand-alert-overlay-progress-bg-color-rgb, 55, 58, 65);
  --sand-progress-bg-color-alpha: var(--sand-alert-overlay-progress-bg-color-alpha, 100%);
  --sand-checkbox-color: var(--sand-alert-overlay-checkbox-color, #e6e6e6);
  --sand-checkbox-disabled-selected-text-color: var(--sand-alert-overlay-checkbox-disabled-selected-text-color, #4c5059);
  --sand-formcheckboxitem-focus-text-color: var(--sand-alert-overlay-formcheckboxitem-focus-text-color, var(--sand-alert-overlay-focus-text-color, #ffffff));
  --sand-item-disabled-focus-bg-color: var(--sand-alert-overlay-item-disabled-focus-bg-color, #e6e6e6);
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0), 95%);
  box-shadow: 0 0.75rem 0.75rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.popup:global(.game) {
  background-color: var(--sand-fullscreen-bg-color, var(--sand-bg-color, #000000));
}
.popup:global(.game).overlay {
  margin-bottom: 7.5rem;
  border-radius: 0;
  /* Override colors inside overlay type Alert */
  --sand-bg-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0));
  --sand-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 255, 255, 255);
  --sand-text-sub-color: var(--sand-alert-overlay-text-sub-color, #2e3239);
  --sand-focus-text-color: var(--sand-alert-overlay-focus-text-color, #575e66);
  --sand-disabled-selected-color: var(--sand-alert-overlay-disabled-selected-color, #ffffff);
  --sand-disabled-selected-bg-color: var(--sand-alert-overlay-disabled-selected-bg-color, #788688);
  --sand-disabled-selected-focus-color: var(--sand-alert-overlay-disabled-selected-focus-color, #e6e6e6);
  --sand-disabled-selected-focus-bg-color: var(--sand-alert-overlay-disabled-selected-focus-bg-color, #4c5059);
  --sand-progress-color-rgb: var(--sand-alert-overlay-progress-color-rgb, 55, 58, 65);
  --sand-progress-bg-color-rgb: var(--sand-alert-overlay-progress-bg-color-rgb, 161, 161, 161);
  --sand-progress-bg-color-alpha: var(--sand-alert-overlay-progress-bg-color-alpha, 40%);
  --sand-checkbox-color: var(--sand-alert-overlay-checkbox-color, #858b92);
  --sand-checkbox-disabled-selected-text-color: var(--sand-alert-overlay-checkbox-disabled-selected-text-color, #ffffff);
  --sand-formcheckboxitem-focus-text-color: var(--sand-alert-overlay-formcheckboxitem-focus-text-color, var(--sand-alert-overlay-focus-text-color, #575e66));
  --sand-item-disabled-focus-bg-color: var(--sand-alert-overlay-item-disabled-focus-bg-color, #989ca2);
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0), 75%);
  box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(162, 115, 200, 0.75);
}
:global(.green) .popup:global(.game) {
  background-color: var(--sand-fullscreen-bg-color, var(--sand-bg-color, #000000));
}
:global(.green) .popup:global(.game).overlay {
  margin-bottom: 7.5rem;
  border-radius: 0;
  /* Override colors inside overlay type Alert */
  --sand-bg-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0));
  --sand-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 255, 255, 255);
  --sand-text-sub-color: var(--sand-alert-overlay-text-sub-color, #2e3239);
  --sand-focus-text-color: var(--sand-alert-overlay-focus-text-color, #575e66);
  --sand-disabled-selected-color: var(--sand-alert-overlay-disabled-selected-color, #ffffff);
  --sand-disabled-selected-bg-color: var(--sand-alert-overlay-disabled-selected-bg-color, #788688);
  --sand-disabled-selected-focus-color: var(--sand-alert-overlay-disabled-selected-focus-color, #e6e6e6);
  --sand-disabled-selected-focus-bg-color: var(--sand-alert-overlay-disabled-selected-focus-bg-color, #4c5059);
  --sand-progress-color-rgb: var(--sand-alert-overlay-progress-color-rgb, 55, 58, 65);
  --sand-progress-bg-color-rgb: var(--sand-alert-overlay-progress-bg-color-rgb, 161, 161, 161);
  --sand-progress-bg-color-alpha: var(--sand-alert-overlay-progress-bg-color-alpha, 40%);
  --sand-checkbox-color: var(--sand-alert-overlay-checkbox-color, #858b92);
  --sand-checkbox-disabled-selected-text-color: var(--sand-alert-overlay-checkbox-disabled-selected-text-color, #ffffff);
  --sand-formcheckboxitem-focus-text-color: var(--sand-alert-overlay-formcheckboxitem-focus-text-color, var(--sand-alert-overlay-focus-text-color, #575e66));
  --sand-item-disabled-focus-bg-color: var(--sand-alert-overlay-item-disabled-focus-bg-color, #989ca2);
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0), 75%);
  box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 255, 194, 0.75);
}
:global(.orange) .popup:global(.game) {
  background-color: var(--sand-fullscreen-bg-color, var(--sand-bg-color, #000000));
}
:global(.orange) .popup:global(.game).overlay {
  margin-bottom: 7.5rem;
  border-radius: 0;
  /* Override colors inside overlay type Alert */
  --sand-bg-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0));
  --sand-text-color-rgb: var(--sand-alert-overlay-text-color-rgb, 255, 255, 255);
  --sand-text-sub-color: var(--sand-alert-overlay-text-sub-color, #2e3239);
  --sand-focus-text-color: var(--sand-alert-overlay-focus-text-color, #575e66);
  --sand-disabled-selected-color: var(--sand-alert-overlay-disabled-selected-color, #ffffff);
  --sand-disabled-selected-bg-color: var(--sand-alert-overlay-disabled-selected-bg-color, #788688);
  --sand-disabled-selected-focus-color: var(--sand-alert-overlay-disabled-selected-focus-color, #e6e6e6);
  --sand-disabled-selected-focus-bg-color: var(--sand-alert-overlay-disabled-selected-focus-bg-color, #4c5059);
  --sand-progress-color-rgb: var(--sand-alert-overlay-progress-color-rgb, 55, 58, 65);
  --sand-progress-bg-color-rgb: var(--sand-alert-overlay-progress-bg-color-rgb, 161, 161, 161);
  --sand-progress-bg-color-alpha: var(--sand-alert-overlay-progress-bg-color-alpha, 40%);
  --sand-checkbox-color: var(--sand-alert-overlay-checkbox-color, #858b92);
  --sand-checkbox-disabled-selected-text-color: var(--sand-alert-overlay-checkbox-disabled-selected-text-color, #ffffff);
  --sand-formcheckboxitem-focus-text-color: var(--sand-alert-overlay-formcheckboxitem-focus-text-color, var(--sand-alert-overlay-focus-text-color, #575e66));
  --sand-item-disabled-focus-bg-color: var(--sand-alert-overlay-item-disabled-focus-bg-color, #989ca2);
  background-color: rgb(var(--sand-alert-overlay-bg-color-rgb, 0, 0, 0), 75%);
  box-shadow: 0 0.75rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(235, 94, 0, 0.75);
}