/* * shared-base.css — cross-site base guards for the haugnes-family sites. * * Symlinked into each site's www/css/ (like js/hjs.js) and linked FIRST in the page * , so a site's own stylesheet can still override anything here. Keep it MINIMAL * and defensive — only rules that are safe on every site. This is the home for the * "solve it once, everywhere" fixes so we don't re-solve them per site. * * Edit in place here → commit in the PHP-FUNCTIONS repo → pull on other servers. */ /* --- iPhone / narrow-screen "table breakout" ------------------------------------ * * Symptom: a table (or any wide block) is wider than the phone viewport, so the whole * page scrolls sideways and content bleeds off the right edge. * * Fix, in two static rules — no per-table markup, no JS, no DOM changes: * 1. The page can never scroll sideways. `clip` (NOT `hidden`) because clip does not * create a scroll container, so position:sticky headers/sub-navs keep working. * 2. A wide table scrolls inside its own box instead of being clipped away. * display:block is what lets a honour overflow-x. * Covers every current, future, and AJAX-rendered table automatically. */ html, body { overflow-x: clip; } @media (max-width: 640px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* --- Clearable search inputs ------------------------------------------------------ * * A small "×" that appears at the right of any search/filter box once it has text; * clicking it empties the box and re-fires the page's own filter. The wrapper and * button are injected at runtime by hjs.js (HJS.clearable) — pages need no markup * change. See that file for which inputs qualify and how flex/width is preserved. */ .hjs-clearable { position: relative; display: inline-block; } .hjs-clearable > input { box-sizing: border-box; } .hjs-clear { position: absolute; top: 50%; right: .3em; transform: translateY(-50%); display: none; /* shown via .has-value on the wrapper */ padding: 0 .18em; margin: 0; border: 0; background: none; color: var(--c-text-faint, #9ca3af); font-size: 1.15em; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; } .hjs-clearable.has-value > .hjs-clear { display: block; } .hjs-clear:hover { color: var(--c-text, #111827); } /* Suppress the native WebKit search "×" so it isn't doubled up with ours. */ .hjs-clearable > input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* --------------------------------------------------------------------------- "Send to WhatsApp" button —