@museumwnf/viewer-layout 3.2.2 → 3.4.0

package/src/styles/dxa-gallery.css

@@ -0,0 +1,589 @@
+/*
+ * The DXA gallery family's stylesheet: what every gallery shares beyond the
+ * components — its fonts, its page reset, its theme as a function of the
+ * palette, and the page column and menu legacy's galleries all had.
+ *
+ * A gallery imports it after the package's own stylesheet and before its
+ * theme, so that the theme's values win:
+ *
+ *   import '@museumwnf/viewer-layout/style.css'
+ *   import '@museumwnf/viewer-layout/dxa/gallery.css'
+ *   import '../theme/tokens.css'
+ *   import '../theme/overrides.css'
+ *
+ * The gallery's theme/tokens.css sets the palette — legacy's five colours,
+ * from inventory-app's .legacy-code/dxa-client/src/sites/<code>/_variables.scss:
+ *
+ *   --theme-dark          banner, header, footer
+ *   --theme-medium-dark   dark menu items
+ *   --theme-medium        text background, search button
+ *   --theme-light         light menu items
+ *   --background-color    page background
+ *
+ * Every token below can be set again in the gallery's theme/tokens.css; the
+ * gallery's value wins. Legacy drew white text on both menu shades and on the
+ * header buttons whatever the palette, and so does this file.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
+
+/* ── Theme: the family's tokens, read from the palette ───────────────────── */
+:root {
+  /* ---------- Global ---------- */
+  --mwnf-font-body: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
+  --mwnf-font-heading: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
+  --mwnf-line-height: 1.4;
+  --mwnf-weight-heading: 700;
+  --mwnf-color-text: #1a1a1a;
+  --mwnf-color-background: var(--background-color);
+  --mwnf-color-accent: var(--theme-dark);
+  --mwnf-color-muted: #555555;
+  --mwnf-color-border: var(--theme-medium);
+  --mwnf-content-width: 100%;
+  --mwnf-content-padding: 0rem;
+  --mwnf-space: 0.75rem;
+  --mwnf-radius: 0;
+  --mwnf-section-border: none;
+  --mwnf-section-title-size: 1rem;
+
+  /* ---------- Header ---------- */
+  --mwnf-header-padding: 0;
+  --mwnf-header-background: var(--theme-dark);
+  --mwnf-header-text: #ffffff;
+  --mwnf-header-title-size: 1.75rem;
+  --mwnf-header-subtitle-size: 0.875rem;
+  --mwnf-header-subtitle-color: #ffffff;
+
+  /* ---------- Banner ---------- */
+  --mwnf-banner-padding: 0;
+  --mwnf-banner-background: var(--theme-dark);
+  --mwnf-banner-text-color: #ffffff;
+  --mwnf-banner-text-size: 1.25rem;
+  --mwnf-banner-max-height: 28rem;
+
+  /* ---------- Navigation ---------- */
+  --mwnf-nav-padding: 0;
+  --mwnf-nav-background: var(--theme-dark);
+  --mwnf-nav-border: none;
+  --mwnf-nav-gap: 0px;
+  --mwnf-nav-link-color: #ffffff;
+  --mwnf-nav-link-active-color: #ffffff;
+  --mwnf-nav-link-weight: 400;
+
+  /* ---------- Content ---------- */
+  --mwnf-content-padding-block: 0;
+  --mwnf-content-background: var(--background-color);
+
+  /* ---------- Hyperlinks ---------- */
+  --mwnf-hyperlinks-padding: 1rem;
+  --mwnf-hyperlinks-background: transparent;
+  --mwnf-hyperlinks-link-color: #0000ff;
+
+  /* ---------- Sponsors ---------- */
+  --mwnf-sponsors-padding: 1rem;
+  --mwnf-sponsors-background: transparent;
+  --mwnf-sponsors-gap: 1.5rem;
+  --mwnf-sponsors-logo-height: 2.5rem;
+
+  /* ---------- Footer ---------- */
+  --mwnf-footer-padding: 0.5rem;
+  --mwnf-footer-background: var(--theme-dark);
+  --mwnf-footer-text-color: #ffffff;
+  --mwnf-footer-text-size: 0.875rem;
+  --mwnf-footer-justify: center;
+  --mwnf-footer-gap: 0.5rem;
+  --mwnf-footer-link-color: #ffffff;
+
+  /* ---------- Header: mark, title cell, links, search, switcher ---------- */
+  --mwnf-header-gap: 0.875rem;
+  --mwnf-header-eyebrow-size: 0.875rem;
+  --mwnf-header-title-line-height: 1.05;
+  --mwnf-header-tools-size: 0.875rem;
+  --mwnf-header-link-color: #ffffff;
+  --mwnf-header-links-separator: "|";
+  --mwnf-header-control-border: 2px solid #ffffff;
+  --mwnf-header-control-background: #ffffff;
+  --mwnf-header-control-text: #1a1a1a;
+  --mwnf-header-button-border: 2px solid var(--theme-medium);
+  --mwnf-header-button-background: var(--theme-medium);
+  --mwnf-header-button-text: #ffffff;
+  --mwnf-header-button-active-background: var(--theme-medium);
+  --mwnf-header-button-active-text: #ffffff;
+
+  /* ---------- Banner: the tall home strip and the narrow section strip ---------- */
+  --mwnf-banner-media-background: var(--theme-dark);
+  --mwnf-banner-fallback: linear-gradient(160deg, var(--theme-dark), var(--theme-medium));
+  --mwnf-banner-strip-height: 45vh;
+  --mwnf-banner-strip-max-height: 450px;
+  --mwnf-banner-strip-eyebrow-size: 30px;
+  --mwnf-banner-strip-title-size: 70px;
+  --mwnf-banner-overlay-text: #ffffff;
+  --mwnf-banner-overlay-background: color-mix(in srgb, var(--theme-dark) 60%, transparent);
+  --mwnf-banner-caption-background: rgba(0, 0, 0, 0.6);
+  --mwnf-banner-caption-text: rgba(255, 255, 255, 0.85);
+  --mwnf-banner-section-height: 20vh;
+  --mwnf-banner-section-max-height: 150px;
+  --mwnf-banner-section-title-size: 190%;
+
+  /* ---------- Content: the record page ---------- */
+  /* The sheet as the legacy gallery set it: bold labels in the text colour over
+     plain values, no cell borders, the photo gallery on the page ground. */
+  --mwnf-sheet-text-size: 0.9375rem;
+  --mwnf-sheet-label-size: 0.9375rem;
+  --mwnf-sheet-label-weight: 700;
+  --mwnf-sheet-label-color: inherit;
+  --mwnf-sheet-gap: 0.75rem;
+  --mwnf-sheet-toggle-color: var(--theme-dark);
+  --mwnf-sheet-term-color: var(--theme-medium-dark);
+  --mwnf-sheet-term-underline: var(--theme-medium-dark);
+  --mwnf-sheet-section-border: 1px solid var(--theme-light);
+  --mwnf-sheet-heading-size: 1rem;
+  --mwnf-sheet-heading-color: var(--theme-dark);
+  --mwnf-credits-border: 1px solid var(--theme-light);
+  --mwnf-credits-size: 0.875rem;
+  --mwnf-credits-color: #1a1a1a;
+  --mwnf-languages-gap: 0.125rem;
+  --mwnf-languages-button-border: 1px solid var(--theme-medium);
+  --mwnf-languages-button-text: var(--theme-dark);
+  --mwnf-languages-button-size: 0.8125rem;
+  --mwnf-languages-active-background: var(--theme-medium-dark);
+  --mwnf-languages-active-text: #ffffff;
+  --mwnf-media-background: var(--background-color);
+  --mwnf-media-thumb-active-border: 2px solid var(--theme-medium-dark);
+  --mwnf-media-caption-color: #555555;
+  --mwnf-popover-border: 2px solid var(--theme-medium-dark);
+  --mwnf-popover-title-background: var(--theme-dark);
+  --mwnf-grid-card-background: color-mix(in srgb, var(--theme-dark) 93%, transparent);
+
+  /* ---------- Content: the lists ---------- */
+  /* The tile grid, the "filter further by" column, the summary line and the
+     page links as the legacy gallery drew them: white controls with the grey
+     border on the page-ground panel, the active page in the dark tone. */
+  --mwnf-grid-columns: 3;
+  --mwnf-grid-gap: 4px;
+  --mwnf-grid-tile-background: #ffffff;
+  --mwnf-grid-card-text: #ffffff;
+  --mwnf-filter-padding: 14px;
+  --mwnf-filter-border: none;
+  --mwnf-filter-background: var(--background-color);
+  --mwnf-filter-gap: 10px;
+  --mwnf-filter-title-size: 1rem;
+  --mwnf-filter-title-color: #1a1a1a;
+  --mwnf-filter-control-border: 1px solid #999999;
+  --mwnf-filter-control-background: #ffffff;
+  --mwnf-filter-control-padding: 5px;
+  --mwnf-filter-reset-background: var(--theme-medium-dark);
+  --mwnf-filter-reset-text: #ffffff;
+  --mwnf-summary-size: 0.9375rem;
+  --mwnf-summary-color: #1a1a1a;
+  --mwnf-summary-value-color: #1a1a1a;
+  --mwnf-summary-border: none;
+  --mwnf-summary-padding: 0;
+  --mwnf-pagination-size: 0.8125rem;
+  --mwnf-pagination-button-border: 1px solid var(--theme-medium);
+  --mwnf-pagination-button-background: #ffffff;
+  --mwnf-pagination-button-text: var(--theme-dark);
+  --mwnf-pagination-button-hover-background: var(--background-color);
+  --mwnf-pagination-active-background: var(--theme-medium-dark);
+  --mwnf-pagination-active-text: #ffffff;
+
+  /* ---------- Navigation: the menu button and the standing notice ---------- */
+  --mwnf-nav-toggle-background: var(--theme-dark);
+  --mwnf-nav-toggle-color: #ffffff;
+  --mwnf-nav-notice-margin: 0;
+  --mwnf-nav-notice-padding: 5px 15px;
+  --mwnf-nav-notice-size: 90%;
+  --mwnf-nav-notice-background: var(--theme-dark);
+  --mwnf-nav-notice-color: #ffffff;
+
+  /* ---------- Content classes ---------- */
+  /* The partner profile's "View objects" button and the loading message, in
+     legacy's own `.legacy-button`/`.loader` colours. */
+  --mwnf-button-background: var(--theme-medium-dark);
+  --mwnf-button-text: #ffffff;
+  --mwnf-button-hover-background: var(--theme-dark);
+  --mwnf-loader-text: var(--theme-dark);
+
+  /* ---------- Links ---------- */
+  /* Legacy's `$link-blue` for the content links (About, Credits, the search
+     how-to, the partner profile, the search results), and black for the
+     controls it drew as text: the Back button and the item sheet's museum and
+     catalogue links. */
+  --mwnf-link-text: #0000ff;
+  --mwnf-back-link-color: #000000;
+  --mwnf-dxa-item-link: #000000;
+
+  /* ---------- Content: PartnerListView ---------- */
+  /* The country-group heading, in the dark tone over a medium rule. */
+  --mwnf-partner-list-group-title-color: var(--theme-dark);
+  --mwnf-partner-list-group-border: 2px solid var(--theme-medium);
+
+  /* ---------- The family pages ---------- */
+  /* The partner profile's tab strip and headings in the dark tone; the bands
+     (language switcher, tab-strip surround, "Timeline for this Search" box)
+     on the page ground. */
+  --mwnf-dxa-heading-color: var(--theme-dark);
+  --mwnf-dxa-band-background: var(--background-color);
+  /* The item sheet's Related Content sidebar: white on the light tone, its
+     headings underlined in the dark tone (legacy's `$theme-light`). */
+  --mwnf-dxa-related-background: var(--theme-light);
+  --mwnf-dxa-related-text: #ffffff;
+  --mwnf-dxa-related-heading-color: var(--theme-dark);
+}
+
+/* ── Page reset ──────────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--background-color);
+  color: var(--mwnf-color-text);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow-x: hidden;
+}
+
+html[dir='rtl'] body { direction: rtl; }
+
+a { color: inherit; }
+
+/* ── The page column and the menu ────────────────────────────────────────── */
+/* The legacy gallery is a fixed-width page column with edge-to-edge chrome
+   inside it, a six-column menu bar, and an upper-cased title and menu. What
+   a token cannot express is set here, on PageShell's own classes. */
+
+/* A 1350px column centred on the viewport, with a drop shadow marking its
+   edges. */
+.mwnf-page {
+  width: 1350px;
+  max-width: 100vw;
+  box-shadow: 0 2px 8px 2px #707070;
+}
+
+/* The header stays put while the page scrolls; the navigation does not,
+   because the language switcher makes the header's height variable. */
+.mwnf-header {
+  position: sticky;
+  top: 0;
+  z-index: 90;
+}
+.mwnf-nav {
+  z-index: 89;
+}
+
+/* The header row: the mark, the centred title cell, the tools at the end. */
+.mwnf-header__inner {
+  min-height: 80px;
+  padding-inline: 14px 12px;
+}
+.mwnf-header__title {
+  text-transform: uppercase;
+}
+.mwnf-header__search-input {
+  margin-inline-end: 5px;
+}
+
+/* The menu: one equal column per entry, alternating the two menu shades,
+   upper-cased in CSS so each entry is stored in its natural case — the only
+   form a translator can work with, and the only form that means anything in
+   Arabic. */
+.mwnf-nav__bar {
+  display: block;
+}
+.mwnf-nav__links {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  width: 100%;
+}
+.mwnf-nav__links li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 28px;
+}
+.mwnf-nav__links li:nth-child(odd) { background: var(--theme-medium-dark); }
+.mwnf-nav__links li:nth-child(even) { background: var(--theme-light); }
+.mwnf-nav__link {
+  width: 100%;
+  text-align: center;
+  padding: 2px 4px;
+  text-transform: uppercase;
+}
+.mwnf-nav__link--active {
+  background: rgba(0, 0, 0, 0.18);
+  text-decoration: none;
+}
+.mwnf-nav__notice-title {
+  font-weight: 700;
+}
+
+/* The banner is edge to edge inside the column. */
+.mwnf-banner {
+  padding-inline: 0;
+}
+.mwnf-banner--strip .mwnf-banner__title {
+  font-weight: 700;
+}
+.mwnf-banner--strip .mwnf-banner__enter {
+  text-decoration: none;
+}
+
+/* The footer: one centred line of links and the copyright. */
+.mwnf-footer {
+  justify-content: center;
+  text-align: center;
+}
+
+@media only screen and (max-width: 974px) {
+  .mwnf-nav__links { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media only screen and (max-width: 599px) {
+  .mwnf-header__inner { min-height: 65px; }
+  .mwnf-header__lockup { flex-basis: 100%; order: 3; }
+  .mwnf-nav__links { display: none; }
+  .mwnf-nav--open .mwnf-nav__links { display: grid; grid-template-columns: 1fr; }
+  .mwnf-nav__toggle { width: 100%; justify-content: center; font-size: 20px; }
+}
+
+/* ── The header mark and tools, the footer's icons (inventory-app#2233) ──── */
+
+/* The tools keep to the row's end whether or not a title cell sits between
+   them and the mark (the home page has none). Legacy's logo is drawn at its
+   own size. */
+.mwnf-header__tools {
+  margin-inline-start: auto;
+}
+.mwnf-header__brand-logo {
+  height: auto;
+}
+.mwnf-footer__social-link {
+  color: #ffffff;
+}
+
+/* ── The home page: legacy's FeaturedPartners, LogosComponent and
+   FeaturedGalleries ───────────────────────────────────────────────────── */
+
+/* Featured Partners: white on the medium tone, the picture and the text
+   side by side in the middle 60% of the column, the bullets under them. */
+.mwnf-dxa-home .mwnf-featured-partners {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  background: var(--theme-medium);
+  color: #ffffff;
+}
+.mwnf-dxa-home .mwnf-featured-partners__heading {
+  width: calc(60% + 20px);
+  margin: 40px 0 20px;
+  font-size: 125%;
+  font-weight: 400;
+  color: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__carousel {
+  width: calc(60% + 20px);
+  height: 32vh;
+  max-height: 275px;
+  min-height: 0;
+}
+.mwnf-dxa-home .mwnf-featured-partners__card {
+  height: 100%;
+  gap: 20px;
+}
+.mwnf-dxa-home .mwnf-featured-partners__image {
+  flex: 0 0 calc(50% - 10px);
+  height: 100%;
+}
+.mwnf-dxa-home .mwnf-featured-partners__logo {
+  height: 100%;
+}
+.mwnf-dxa-home .mwnf-featured-partners__body {
+  flex: 1;
+  gap: 0;
+  height: 100%;
+}
+.mwnf-dxa-home .mwnf-featured-partners__name {
+  font-size: inherit;
+  color: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__location {
+  font-size: inherit;
+  font-style: italic;
+  color: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__description {
+  height: 6em;
+  overflow: hidden;
+  margin-top: 20px;
+  line-height: 1.2em;
+  font-size: inherit;
+}
+.mwnf-dxa-home .mwnf-featured-partners__more {
+  margin-top: 5px;
+  text-align: end;
+  color: #ffffff;
+  text-decoration: none;
+}
+.mwnf-dxa-home .mwnf-featured-partners__more + .mwnf-featured-partners__more {
+  margin-top: 0;
+}
+.mwnf-dxa-home .mwnf-featured-partners__more:hover {
+  text-decoration: underline;
+}
+.mwnf-dxa-home .mwnf-featured-partners__controls {
+  justify-content: flex-start;
+  width: calc(60% + 20px);
+  margin: 20px 0 40px;
+  padding: 0;
+  gap: 18px;
+}
+.mwnf-dxa-home .mwnf-featured-partners__bullet {
+  width: 14px;
+  height: 14px;
+  background: var(--theme-dark);
+}
+.mwnf-dxa-home .mwnf-featured-partners__bullet--active {
+  background: var(--theme-light);
+}
+
+/* The logos strip (Glass's "Set up on the occasion of"). */
+.mwnf-dxa-home-logos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 50px;
+  background: #ffffff;
+}
+.mwnf-dxa-home-logos__label {
+  font-weight: 700;
+  color: var(--theme-dark);
+}
+.mwnf-dxa-home-logos__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+}
+.mwnf-dxa-home-logos__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  min-height: 90px;
+  margin: 10px 20px;
+}
+.mwnf-dxa-home-logos__logo img {
+  max-width: 100%;
+  object-fit: contain;
+}
+
+/* Visit MWNF Galleries and Other Virtual Museums, side by side on white:
+   four tiles named in capitals on a dark band over the picture, and the
+   three virtual museums' picture banners, each named in its colour. */
+.mwnf-dxa-home .mwnf-sibling-galleries {
+  display: grid;
+  grid-template-columns: 75% 25%;
+  background: #ffffff;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__galleries,
+.mwnf-dxa-home .mwnf-sibling-galleries__museums {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 30px;
+  background: transparent;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__header {
+  margin-bottom: 12px;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__heading,
+.mwnf-dxa-home .mwnf-sibling-galleries__see-more {
+  align-self: flex-start;
+  margin-bottom: 12px;
+  padding: 2px 0;
+  border-bottom: 1px solid var(--theme-medium-dark);
+  font-size: 115%;
+  font-weight: 400;
+  color: var(--theme-medium-dark);
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__header .mwnf-sibling-galleries__heading,
+.mwnf-dxa-home .mwnf-sibling-galleries__see-more {
+  margin-bottom: 0;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__grid {
+  gap: 24px;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__gallery {
+  position: relative;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__image {
+  height: auto;
+  aspect-ratio: 1;
+  margin: 0;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__name {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3em;
+  padding: 0 4px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  font-weight: 400;
+  font-size: inherit;
+  text-align: center;
+  text-transform: uppercase;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museums-grid {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+  gap: 10px;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum {
+  position: relative;
+  flex: 1;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum-image--picture {
+  height: 100%;
+  background: none;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum-image--picture img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.mwnf-dxa-home .mwnf-sibling-galleries__museum-image--picture + .mwnf-sibling-galleries__museum-name {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-size: 150%;
+  font-weight: 700;
+  color: var(--mwnf-museum-bg);
+  text-shadow: 0 0 10px var(--mwnf-museum-text);
+}
+
+@media only screen and (max-width: 974px) {
+  .mwnf-dxa-home .mwnf-sibling-galleries {
+    display: flex;
+    flex-direction: column;
+  }
+  .mwnf-dxa-home .mwnf-sibling-galleries__museums-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 24px;
+  }
+  .mwnf-dxa-home .mwnf-featured-partners__heading,
+  .mwnf-dxa-home .mwnf-featured-partners__carousel,
+  .mwnf-dxa-home .mwnf-featured-partners__controls {
+    width: calc(80% + 20px);
+  }
+}