@enact/moonstone/Popup/Popup.module.css

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

.popup {
  font-family: "Moonstone";
  font-weight: normal;
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding: 0.375rem 0.375rem 0.625rem 0.375rem;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  box-sizing: border-box;
  pointer-events: auto;
}
:global(.enact-locale-non-latin) .popup {
  font-family: "Moonstone";
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.7em;
}
:global(.enact-locale-right-to-left) .popup {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.popup .body {
  margin: 0.625rem 1.125rem 0.375rem 1.125rem;
  margin-left: 1.125rem;
  margin-right: 1.125rem;
}
:global(.enact-locale-right-to-left) .popup .body {
  margin-left: 1.125rem;
  margin-right: 1.125rem;
}
:global(.enact-locale-ja) .popup .body {
  line-break: strict;
}
.popup .closeContainer {
  margin-left: 0.375rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .popup .closeContainer {
  margin-left: 0;
  margin-right: 0.375rem;
}
.popup .closeButton {
  margin: 0;
}
.popup.reserveClose .body {
  margin-left: 1.125rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .popup.reserveClose .body {
  margin-left: 0;
  margin-right: 1.125rem;
}
.popup:global(.moonstone) {
  background-color: rgba(77, 77, 77, 0.95);
}
.popup:global(.moonstone) .closeButton {
  color: #fff;
}
:global(.enact-a11y-high-contrast) .popup:global(.moonstone.highContrast) {
  background-color: rgba(77, 77, 77, 0.95);
}
:global(.enact-a11y-high-contrast) .popup:global(.moonstone.highContrast) .closeButton {
  color: #fff;
}
.popup:global(.moonstone-light) {
  background-color: rgba(237, 237, 237, 0.95);
}
.popup:global(.moonstone-light) .closeButton {
  color: #4d4d4d;
}
:global(.enact-a11y-high-contrast) .popup:global(.moonstone-light.highContrast) {
  background-color: rgba(237, 237, 237, 0.95);
}
:global(.enact-a11y-high-contrast) .popup:global(.moonstone-light.highContrast) .closeButton {
  color: #4d4d4d;
}
.popupTransitionContainer {
  position: absolute;
  bottom: 0;
  width: 100%;
  pointer-events: none;
}