@enact/sandstone/Panels/Header.module.css

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

.header {
  position: relative;
  max-width: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top left;
  box-sizing: border-box;
}
.header .titlesRow {
  padding-bottom: 84px;
}
.header .titlesRow .subtitle {
  position: absolute;
  right: 0;
  left: 0;
}
.header .titlesRow .back {
  margin-inline-start: 0;
}
.header .titlesRow .back:global(.largeText) {
  font-family: "Sandstone";
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  font-kerning: normal;
  height: 2.25rem;
  line-height: 2rem;
  min-width: 2.25rem;
}
:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
  font-family: "Sandstone";
}
:global(.enact-locale-non-latin) .header .titlesRow .back:global(.largeText) {
  font-family: "Sandstone";
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
}
.header .titlesRow .close {
  margin-inline-end: 0;
}
.header.wizard .titlesRow {
  padding-bottom: 168px;
}
.header .slotBefore,
.header .slotAfter,
.header .slotSizer {
  white-space: nowrap;
}
.header .slotSizer {
  display: inline-block;
}
.header.centered .slotAbove,
.header.centered .slotBelow {
  text-align: center;
}
.header .title,
.header .subtitle {
  margin: 0;
}
.header .slotAbove {
  margin: 0 -0.75rem 0.625rem -0.75rem;
}
.header .slotAfter {
  text-align: right;
}
:global(.enact-locale-right-to-left) .header .slotAfter {
  text-align: left;
}
.header .slotBelow {
  margin: 0.375rem -0.75rem 0 -0.75rem;
}
.header .standard .slotBefore > *:first-child,
.header .compact .slotBefore > *:first-child,
.header .mini .slotBefore > *:first-child {
  margin-inline-start: 0;
}
.header .standard .slotAfter > *:last-child,
.header .compact .slotAfter > *:last-child,
.header .mini .slotAfter > *:last-child {
  margin-inline-end: 0;
}
.header.standard {
  margin: 0;
  padding: 2.11042rem 3.125rem 1.52083rem 3.125rem;
}
.header.standard .subtitle,
.header.standard .title {
  padding: 0;
}
.header.standard .subtitle {
  margin: 0.08958rem 0 0 0;
}
.header.compact {
  margin: 0;
  padding: 0.78125rem 1.25rem 0.78125rem 1.25rem;
}
.header.compact .title {
  padding: 0;
}
.header.compact .subtitle {
  padding: 0;
}
.header.compact .title {
  font-size: 1.875rem;
}
:global(.enact-locale-non-latin) .header.compact .title {
  font-size: 1.875rem;
}
.header.wizard {
  margin: 0;
  padding: 2.06042rem 3.125rem 1.375rem 3.125rem;
}
.header.wizard.noSubtitle {
  padding-bottom: 0.875rem;
}
.header.wizard .titleContainer:nth-child(2) {
  top: 0;
  position: absolute;
  width: 100%;
}
.header.wizard .title {
  font-size: 3rem;
  padding: 0;
}
:global(.enact-locale-non-latin) .header.wizard .title {
  font-size: 3rem;
}
.header.wizard .subtitle {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0;
}
.header.wizard.centered .subtitle {
  text-align: center;
}
.header.mini {
  margin: 0 0 0.75rem 0;
  padding: 0.86458rem 1.25rem 0.55208rem 1.25rem;
}
.header.mini .titlesRow {
  padding: 0;
}
.header.mini .titleCell {
  width: auto;
}
.header.mini .title {
  font-size: 1.875rem;
}
:global(.enact-locale-non-latin) .header.mini .title {
  font-size: 1.875rem;
}
.header.mini.withSubtitle:not(.noSubtitle) .titlesRow {
  padding-bottom: 84px;
}
.header.noSubtitle .titlesRow {
  padding-bottom: 0;
}
.header:global(.neutral).shadowed .subtitle,
.header:global(.neutral).shadowed .title {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.enact-a11y-high-contrast) .header:global(.neutral):global(.highContrast).shadowed .subtitle,
:global(.enact-a11y-high-contrast) .header:global(.neutral):global(.highContrast).shadowed .title {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.header:global(.light).shadowed .subtitle,
.header:global(.light).shadowed .title {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
.header:global(.game).shadowed .subtitle,
.header:global(.game).shadowed .title {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.green) .header:global(.game).shadowed .subtitle,
:global(.green) .header:global(.game).shadowed .title {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}
:global(.orange) .header:global(.game).shadowed .subtitle,
:global(.orange) .header:global(.game).shadowed .title {
  text-shadow: 0.125rem 0.25rem 0.25rem rgb(var(--sand-shadow-color-rgb, 0, 0, 0), 30%);
}