/* Uppercut One — theme hooks. Colours and fonts are applied at runtime by theme.js as CSS variables on , so this file stays small: shared bits for the theme picker and for venue logos. Page palettes remain in each page; theme.js overrides them per venue. */ .uc-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .uc-preset { border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 40px; } .uc-theme-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .uc-theme-row label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted, #a8a8a8); } .uc-theme-row input[type="color"] { width: 40px; height: 32px; border: 1px solid var(--line, #3a3a3a); border-radius: 6px; background: var(--bg, #121212); padding: 2px; cursor: pointer; } .uc-theme-row select { background: var(--bg, #121212); color: var(--text, #fff); border: 1px solid var(--line, #3a3a3a); border-radius: 6px; padding: 6px 8px; font: inherit; } /* `hidden` means hidden, everywhere. --------------------------------------------------------------------------- The browser styles [hidden] `display: none` from its OWN stylesheet, which any author rule setting display outranks. That is not a theoretical trap: theme.js hides the text wordmark when the venue has a logo, and the till's phone layout sets `.topbar .brand .mark { display: block }` - so below 820px The Golf Lounge printed its name twice while a desktop showed it once. The element was hidden and visible at the same time. It was patched once, narrowly, for the logo image on the line below this one. A narrow patch per element is a bug per element nobody has hit yet: `.header-logo { display: block }` on the calendar page is the same trap waiting. So the rule is stated once, for everything. Nothing in this product deliberately shows a [hidden] element - checked - and anything that wanted to should drop the attribute rather than out-specify it. */ [hidden] { display: none !important; } /* A modal inside a framed screen (see pages/embed-modals.js). --------------------------------------------------------------------------- The frames the till draws do not scroll - each is made as tall as its contents - so `position: fixed` inside one pins to the whole frame rather than to the window, and a popup opened near the bottom of a long day lands off the screen and scrolls further away. The parent measures the band of the frame that is on screen and sends it down; this puts the overlay there. !important because each overlay carries its own `position: fixed` in its own stylesheet, and those are right everywhere else. */ /* A framed page given the window's height, scrolling its own contents. --------------------------------------------------------------------------- Docked, a frame is made as tall as its contents and never scrolls, which is what keeps the till's scroll the only one - but it costs the page a real viewport: `sticky` sticks to the frame's top edge, which scrolls away, and `fixed` pins to the whole frame. Full screen the frame IS the window, so it gets the window's height and scrolls itself, and both work as written. */ html.is-embedded.is-embedded-fills, html.is-embedded.is-embedded-fills body { height: 100%; overflow: auto; } /* Nothing is pinned in that mode - the page's own positioning is correct. */ html.is-embedded.is-embedded-fills .uc-embed-pinned { position: fixed !important; top: 0 !important; bottom: 0 !important; height: auto !important; align-items: center !important; } html.is-embedded.is-embedded-fills .uc-embed-pinned > * { max-height: 85vh !important; margin: 0 !important; } html.is-embedded .uc-embed-pinned { position: absolute !important; top: var(--uc-vis-top, 0px) !important; bottom: auto !important; height: var(--uc-vis-h, 100vh) !important; /* Taller than the band it has been given: scroll inside the band rather than spill out of it, where the frame's own page has no scroll to reach it with. */ overflow-y: auto !important; /* `align-items: center` on a box whose child is taller than it puts the top of that child ABOVE the box, where nothing can scroll to it. `margin: auto` on the child centres it while it fits and stops at the edge when it does not, which is what centring was meant to do. */ align-items: flex-start !important; } /* `vh` is a lie inside a frame: it is the FRAME's height, not the window's. A modal saying `max-height: 85vh` was therefore sized against whatever the frame happened to be - 85% of a 3000px day is 2550px, so it overflowed the visible band and sat off-screen, and 85% of a short bookings list is a few hundred pixels, so the same modal came out cramped on a large monitor with room to spare. Both were reported. The band is the real window, so the modal is sized against that instead - less the overlay's own padding. */ html.is-embedded .uc-embed-pinned > * { /* border-box so the cap is the height the modal actually occupies. Under content-box a 560px cap plus 20px of padding each side renders 600 and overflows the band it was measured against. The pages that use this all set `* { box-sizing: border-box }`, but a rule in the shared stylesheet should not depend on the page having a reset. */ box-sizing: border-box !important; max-height: calc(var(--uc-vis-h, 100vh) - 40px) !important; overflow-y: auto; margin: auto !important; } img[data-venue="logo"] { max-height: 34px; width: auto; display: inline-block; vertical-align: middle; } /* One word of a venue's name in its accent colour — see venue.accent_word. */ .uc-accent-word { font-style: normal; color: var(--accent, var(--color-accent, currentColor)); } /* Nothing that names a venue paints until the venue is known - see theme.js. Covers the data-venue fields, the marketing-site header on the booking page, the admin and calendar header logos, and the menu's masthead. */ html.uc-venue-pending [data-venue], html.uc-venue-pending .site-header, html.uc-venue-pending .header-logo-wrap, html.uc-venue-pending .menu-header { visibility: hidden !important; } /* The same idea for words rather than brand: a page whose wording comes from the venue ("Book a Bay" at a range, "Book a Table" at a cafe) must not show its markup defaults first and correct itself a second later. The page adds uc-wording-pending at parse and removes it the moment the venue is known - from the cached copy that is usually there, so in practice nothing is ever hidden for longer than a frame. [data-venue-text] keeps its space; [data-venue-block] takes none, for a whole section that may not apply. */ html.uc-wording-pending [data-venue-text] { visibility: hidden !important; } html.uc-wording-pending [data-venue-block] { display: none !important; } /* Venues without a logo image show their name instead. Shared by every page with a header-logo-wrap; the calendar page defined it first. */ .header-wordmark { font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.15rem; color: var(--color-text, var(--text, #fff)); letter-spacing: -.01em; display: none; } .header-logo-wrap img[hidden] + .header-wordmark { display: inline-block; }