/* ============================================================ Slideshow layout + overlays (inline version) ------------------------------------------------------------ This block controls: - overall slideshow layout + sizing - title/count styling - in-image controls (prev/next/close) - compact “more info…” panel - full-screen “More info” overlay panel NOTE: ui.css is also loaded in . This block overrides/extends it. ============================================================ */ /* ---------- Tunable sizing knobs (change these first) ---------- */ :root{ /* Max rendered width of the slideshow image/frame */ --img-max-w: 1200px; /* Max rendered height of the image/frame (relative to viewport) */ --img-max-h: 78vh; } /* Remove default browser margin so the stage can align flush */ body{ margin:0; } /* Stage is the page-level flex column: topbar + content */ .stage{ min-height: 100%; display: flex; flex-direction: column; } /* Content area centers the frame within the viewport */ .content{ flex: 1; /* fill remaining height under topbar */ padding: 12px 16px 28px; /* breathing room around the frame */ display: flex; justify-content: center; /* center frame-wrap horizontally */ } /* Frame-wrap constrains overall width and centers title + frame */ .frame-wrap{ position: relative; width: 100%; max-width: var(--img-max-w); margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; /* center title + frame */ } /* Slide title line above the image */ .slide-title{ width: 100%; color: rgba(255,255,255,0.82); margin: 0 0 14px 0; text-align: center; font-size: 1.3rem; font-weight: 550; letter-spacing: 0.02em; line-height: 1.15; } /* Count span within the title (eg “3 / 27”) */ .slide-count{ font-weight: 400; font-size: 0.9rem; color: var(--muted); /* from ui.css */ margin-left: 10px; white-space: nowrap; } /* Frame is a centering box that sets max width/height for the image */ .frame{ position: relative; width: 100%; max-width: var(--img-max-w); max-height: var(--img-max-h); display:flex; align-items:center; justify-content:center; } /* img-wrap is the positioning context for controls layered over the image */ .img-wrap{ position: relative; /* anchors absolute-positioned buttons/panels */ display: inline-block; line-height: 0; /* removes inline gap below images */ max-width: 100%; max-height: var(--img-max-h); } /* The slide image itself */ .img-wrap img{ display: block; max-width: 100%; max-height: var(--img-max-h); width: auto; height: auto; border-radius: var(--radius); /* from ui.css */ box-shadow: 0 18px 60px rgba(0,0,0,0.55); background: rgba(255,255,255,0.03); position: relative; z-index: 1; /* image sits under controls */ cursor: pointer; } /* ============================================================ INFO OVERLAY (compact panel that sits on top of the image) ============================================================ */ /* “more info…” pill location (top-left over image) */ .info-toggle{ position:absolute; top:14px; left:14px; z-index:4; /* above image + nav buttons */ } /* “more info…” pill styling */ .info-toggle a{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff; text-decoration:none; font-weight:600; font-size:13px; backdrop-filter: blur(6px); } .info-toggle a:hover{ background:rgba(0,0,0,.65); } /* Compact info panel (hidden by default; JS toggles .open) */ .info-panel{ position:absolute; top:54px; /* below the pill */ left:14px; right:14px; z-index:4; display:none; /* hidden until .open */ max-width: 65ch; /* keeps lines readable */ max-height: min(60vh, calc(var(--img-max-h) - 80px)); overflow-y: auto; /* scroll long descriptions */ padding:14px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.55); backdrop-filter: blur(8px); } /* JS adds/removes .open */ .info-panel.open{ display:block; } /* Reset line-height because .img-wrap uses line-height:0 */ .info-toggle, .info-panel{ line-height: 1.35; } /* Info title inside the compact panel */ .info-title{ margin: 0 0 6px 0; font-weight: 700; font-size: 15px; line-height: 1.2; color: rgba(255,255,255,.92); } /* Info description inside the compact panel */ .info-desc{ margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.82); white-space: pre-wrap; /* preserve line breaks from metadata */ } /* ============================================================ EMBED MODE ------------------------------------------------------------ When slideshow is embedded (body.embed), hide topbar + adjust padding ============================================================ */ body.embed .topbar{ display:none; } body.embed .content{ padding-top: 18px; } /* ============================================================ NAV BUTTONS + CLOSE BUTTON (layered over image) ============================================================ */ /* Shared style for prev/next circular buttons */ .nav-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; /* above image, below info-panel */ width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff; font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); } .nav-btn:hover{ background:rgba(0,0,0,.65); } /* Position buttons outside the image edges */ .nav-prev{ left: -64px; } .nav-next{ right: -64px; } /* Close “X” button (top-right over image) */ .close-btn{ position:absolute; top:14px; right:14px; z-index:4; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff; font-size:20px; cursor:pointer; } .close-btn:hover{ background:rgba(0,0,0,.65); } /* Fullscreen button (bottom-right over image) */ .fullscreen-btn{ position: absolute; bottom: 14px; right: 14px; z-index: 4; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.15s; backdrop-filter: blur(6px); } .img-wrap:hover .fullscreen-btn{ opacity: 1; } .fullscreen-btn:hover{ background: rgba(0,0,0,.65); } /* When the page enters fullscreen, centre the image on a black background. Rules must be separate — mixing :-webkit-full-screen and :fullscreen in one block causes the entire rule to be dropped by browsers that don't know one. */ :fullscreen #slideImage { position:fixed; inset:0; margin:auto; max-width:100vw; max-height:100vh; width:auto; height:auto; border-radius:0; box-shadow:none; z-index:99999; } :-webkit-full-screen #slideImage { position:fixed; inset:0; margin:auto; max-width:100vw; max-height:100vh; width:auto; height:auto; border-radius:0; box-shadow:none; z-index:99999; } :fullscreen { background:#000; } :-webkit-full-screen { background:#000; } /* ============================================================ MORE INFO OVERLAY (full-screen overlay + panel + iframe/content) ============================================================ */ /* Full-screen overlay backdrop (hidden by default; JS toggles .active) */ .more-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: flex-start; padding-top: 80px; /* pushes panel down from top */ opacity: 0; /* hidden */ pointer-events: none; /* clicks pass through */ transition: opacity 250ms ease; z-index: 9999; /* above everything */ } /* JS adds .active when open */ .more-overlay.active{ opacity: 1; pointer-events: auto; } /* The floating panel inside the overlay (THIS is the panel box) */ .more-panel{ width: min(980px, calc(100vw - 36px)); max-height: calc(100vh - 120px); overflow: hidden; /* panel itself doesn't scroll; inner content does */ background: rgba(0,0,0,.33); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 25px 60px rgba(0,0,0,.6); padding: 18px; /* tighter padding works better with iframe */ position: relative; /* anchors close button */ } /* Close button */ .more-close{ position: absolute; top: 16px; right: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #ccc; font-size: 14px; padding: 6px 12px; cursor: pointer; } .more-close:hover{ background: rgba(255,255,255,.18); color: #fff; } /* Content area inside the panel: - For iframe mode: fixed height + hidden overflow (iframe handles scrolling internally) - For injected HTML mode: make overflow auto instead of hidden */ #moreContent{ width: 100%; height: min(78vh, 760px); overflow: auto; /* IMPORTANT for fragments */ -webkit-overflow-scrolling: touch; border-radius: 12px; background: rgba(0,0,0,0.55); /* fix your malformed rgba */ padding: 14px 16px; /* gives fragments breathing room */ } /* Typography (only affects injected HTML, not iframe contents) */ #moreContent p, #moreContent li{ color: rgba(255,255,255,0.65); } #moreContent h1, #moreContent h2{ color: rgba(255,255,255,0.75); font-weight: 500; } /* Override more.css fixed-height crop when viewed inside the overlay */ #moreContent .doc-figure img, #moreContent figure.doc-figure img { height: auto !important; width: auto !important; max-width: 100% !important; object-fit: unset !important; } /* more.css body max-width doesn't apply to fragments — constrain here instead */ #moreContent h1, #moreContent .two-col, #moreContent h2, #moreContent p, #moreContent blockquote, #moreContent .sources, #moreContent .heritage-links-section, #moreContent .cc-notice { max-width: 860px; margin-left: auto; margin-right: auto; }