/* ===================================================================== Amrich UI — Theme Engine (frontend only) Loaded last in so theme variables win over page-level defaults. Purely presentational: no layout is re-flowed, nothing is repositioned. ===================================================================== */ :root { --th-accent: #2563eb; --th-accent2: #1d4ed8; --th-accent3: #60a5fa; --th-bg1: #eef2f7; --th-bg2: #f8fafc; --th-bg3: #e6edf6; --th-ink: #1e293b; --th-card: #ffffff; --th-glow: rgba(37, 99, 235, .28); --th-radius: 14px; --th-speed: 1; --th-ease: cubic-bezier(.22, .61, .36, 1); } /* ---- Bridge: re-tint the variable names the existing pages already use ---- */ html[data-th-accent="on"] { --primary: var(--th-accent); --primary-color: var(--th-accent); --primary-hover: var(--th-accent2); --secondary-color: var(--th-accent3); --bs-primary: var(--th-accent); --bs-link-color: var(--th-accent); --bs-link-hover-color: var(--th-accent2); } /* ---- Background --------------------------------------------------------- This used to say: html[data-th-bg="on"] body { background-color: transparent !important; background-image: none !important; } — i.e. throw away whatever background the page designed for itself, and paint the theme's over the top. On a page built light that is invisible. On a page built DARK it is a disaster: the dark surface is erased, the theme's light gradient shows through behind the dark cards, and every piece of light-coloured text on the page ends up light-on-light. That is what the dashboard and the app home screen were showing. It also defeated the portal's own dark mode, which sets `body { background-color: var(--bg) !important }` at the same specificity — and lost, because ui-theme.php is included last. A page's own background is now left completely alone. The theme's backdrop is a fixed layer BEHIND it, so it only ever shows on pages that never had a background of their own, and theme-engine.js hides even that once it has confirmed the page owns its look. ------------------------------------------------------------------------ */ html[data-th-bg="on"] { min-height: 100%; } .th-fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } .th-fx-fg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9990; pointer-events: none; opacity: .6; } /* A large-radius blurred element animating forever is extremely expensive to composite — it was the main cause of general sluggishness. The same soft colour wash is baked into a gradient instead. That gradient used to sit on with `background-attachment: fixed`, which is one of the most expensive things you can ask a mobile browser to do: a fixed background cannot be handed to the compositor, so the browser repaints it — three stacked gradients, two of them radial and vmax-sized — on every single scroll frame. In an Android WebView that alone is enough to make a page feel like it is dragging. It is now one fixed, composited layer that the scroll never touches. */ html[data-th-bg="on"]:not(.th-own-bg) { background-color: var(--th-bg2); } /* Hidden the moment theme-engine.js sees that the page has a background of its own. It sits at z-index -2, so even before that it is underneath the page's own surface and cannot show through it. */ html.th-own-bg[data-th-bg="on"]::before { display: none; } html[data-th-bg="on"]::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(58vmax 46vmax at 8% -6%, color-mix(in srgb, var(--th-accent) 26%, transparent), transparent 70%), radial-gradient(52vmax 44vmax at 96% 104%, color-mix(in srgb, var(--th-accent3) 26%, transparent), transparent 70%), linear-gradient(160deg, var(--th-bg1) 0%, var(--th-bg2) 45%, var(--th-bg3) 100%); } @supports not (background: color-mix(in srgb, red 50%, blue)) { html[data-th-bg="on"]::before { background: linear-gradient(160deg, var(--th-bg1) 0%, var(--th-bg2) 45%, var(--th-bg3) 100%); } } /* ===================================================================== 1. PAGE TRANSITIONS ===================================================================== */ #thTransition { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0; visibility: hidden; background: linear-gradient(135deg, var(--th-accent) 0%, var(--th-accent2) 55%, var(--th-accent3) 100%); transform: translateY(100%); transition: transform .42s var(--th-ease), opacity .3s ease, visibility .3s; } #thTransition.th-cover { opacity: 1; visibility: visible; transform: translateY(0); } #thTransition .th-trans-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: .3px; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); } #thTransition .th-trans-ring { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: thSpin .8s linear infinite; } @keyframes thSpin { to { transform: rotate(360deg); } } /* Entry animation. This used to be `body > *`, i.e. every top-level element on the page — on a dashboard that is dozens of simultaneous opacity animations, each one promoted to its own layer, all firing during the busiest moment of the load. One fade on the document is indistinguishable and costs one layer. */ html.th-enter body { animation: thPageIn .28s ease both; } @keyframes thPageIn { from { opacity: 0; } to { opacity: 1; } } html[data-th-lite="1"].th-enter body, html[data-th-app="1"].th-enter body { animation: none; } /* Staggered reveal for cards / rows / panels */ .th-reveal { opacity: 0; transform: translateY(18px); } .th-reveal.th-in { opacity: 1; transform: none; transition: opacity .55s var(--th-ease), transform .55s var(--th-ease); } /* Top loading bar */ #thProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2147483001; background: linear-gradient(90deg, var(--th-accent), var(--th-accent3), var(--th-accent2)); box-shadow: 0 0 12px var(--th-glow); transition: width .3s ease, opacity .35s ease; opacity: 0; pointer-events: none; } #thProgress.th-on { opacity: 1; } /* ===================================================================== 2. GENTLE POLISH — hover lift, focus glow, ripple Applied only to interactive elements; never changes box size. ===================================================================== */ html[data-th-polish="on"] button, html[data-th-polish="on"] .btn, html[data-th-polish="on"] input[type="submit"], html[data-th-polish="on"] input[type="button"] { transition: transform .16s var(--th-ease), box-shadow .16s var(--th-ease); } html[data-th-polish="on"] button:hover:not(:disabled), html[data-th-polish="on"] .btn:hover:not(:disabled), html[data-th-polish="on"] input[type="submit"]:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 18px -8px var(--th-glow); } html[data-th-polish="on"] button:active:not(:disabled), html[data-th-polish="on"] .btn:active:not(:disabled) { transform: translateY(0) scale(.98); } html[data-th-polish="on"] input:focus, html[data-th-polish="on"] select:focus, html[data-th-polish="on"] textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--th-glow); border-color: var(--th-accent) !important; transition: box-shadow .2s ease, border-color .2s ease; } /* NOTE: never transform a table row. A transform creates a stacking context, which traps any tooltip a page positions inside a cell and lets later rows paint over it. Rows get colour and an inset bar only. */ html[data-th-polish="on"] tbody tr { transition: background-color .18s ease, box-shadow .18s ease; } html[data-th-polish="on"] tbody tr:hover > td { box-shadow: inset 2px 0 0 var(--th-accent); } /* Ripple pulse injected by JS on click */ .th-ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .55); animation: thRipple .6s ease-out forwards; pointer-events: none; mix-blend-mode: overlay; } @keyframes thRipple { to { transform: scale(3.4); opacity: 0; } } /* ===================================================================== 3. THEME BADGE / QUICK SWITCHER ===================================================================== */ #thThemeDock { position: fixed; right: 16px; bottom: 16px; z-index: 2147482000; /* the container itself is click-through so the gaps between buttons never swallow a click meant for the page underneath */ pointer-events: none; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; font-family: 'Inter', system-ui, sans-serif; } #thThemeDock > * { pointer-events: auto; } #thThemeDock .th-dock-btn { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--th-accent), var(--th-accent2)); box-shadow: 0 8px 22px -6px var(--th-glow), 0 0 0 3px rgba(255, 255, 255, .55); display: grid; place-items: center; transition: transform .25s var(--th-ease), box-shadow .25s ease; } #thThemeDock .th-dock-btn:hover { transform: rotate(-12deg) scale(1.08); } #thThemeDock .th-dock-panel { background: var(--th-card); color: var(--th-ink); border-radius: 16px; padding: 12px; width: 250px; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .35); border: 1px solid rgba(125, 125, 125, .18); display: none; transform-origin: bottom right; animation: thPop .28s var(--th-ease); } #thThemeDock.th-open .th-dock-panel { display: block; } @keyframes thPop { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } } #thThemeDock .th-dock-title { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; opacity: .6; margin: 2px 4px 8px; font-weight: 700; } #thThemeDock .th-dock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 190px; overflow-y: auto; } #thThemeDock .th-swatch { aspect-ratio: 1; border-radius: 11px; border: 2px solid transparent; cursor: pointer; font-size: 17px; display: grid; place-items: center; transition: transform .18s var(--th-ease), border-color .18s ease; } #thThemeDock .th-swatch:hover { transform: translateY(-3px) scale(1.06); } #thThemeDock .th-swatch.th-active { border-color: var(--th-accent); } #thThemeDock .th-dock-link { display: block; margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 600; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--th-accent), var(--th-accent2)); padding: 9px; border-radius: 10px; } #thThemeDock .th-dock-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } #thThemeDock .th-mini { flex: 1 1 auto; font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(125,125,125,.28); background: transparent; color: inherit; cursor: pointer; } #thThemeDock .th-mini[aria-pressed="true"] { background: var(--th-accent); border-color: var(--th-accent); color: #fff; } /* ===================================================================== 4. MASCOT ===================================================================== */ /* The mascot's own styling now lives in assets/mascot.css, which is loaded straight after this file. It was moved out because the leg rig needed per-limb pivots that do not belong in a general theme stylesheet, and because the emotion set is large enough to deserve its own file. */ /* Mascot picker strip inside the dock */ #thThemeDock .th-pets { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 9px; } #thThemeDock .th-pet { aspect-ratio: 1; border-radius: 9px; border: 2px solid transparent; background: color-mix(in srgb, var(--th-accent) 8%, transparent); cursor: pointer; font-size: 15px; display: grid; place-items: center; transition: transform .18s var(--th-ease), border-color .18s ease; } #thThemeDock .th-pet:hover { transform: translateY(-3px) scale(1.1); } #thThemeDock .th-pet.th-active { border-color: var(--th-accent); } /* #thBubble is styled in assets/mascot.css */ /* ===================================================================== 5. LOGIN SHELL — opt-in animated frame for auth pages Activated by JS only when the page looks like a login screen. ===================================================================== */ html[data-th-login="on"] body { position: relative; min-height: 100vh; } html[data-th-login="on"] .th-login-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } html[data-th-login="on"] .th-login-bg span { position: absolute; display: block; border-radius: 32%; background: linear-gradient(135deg, var(--th-accent), var(--th-accent3)); opacity: .13; animation: thFloatUp linear infinite; } @keyframes thFloatUp { 0% { transform: translateY(12vh) rotate(0deg) scale(.7); opacity: 0; } 12% { opacity: .16; } 88% { opacity: .16; } 100% { transform: translateY(-115vh) rotate(520deg) scale(1.25); opacity: 0; } } /* Shine sweep across the login card */ html[data-th-login="on"] .th-login-card-fx { position: relative; overflow: hidden; isolation: isolate; } html[data-th-login="on"] .th-login-card-fx::after { content: ""; position: absolute; top: -60%; left: -140%; width: 60%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: rotate(16deg); animation: thShine 5.5s ease-in-out infinite; pointer-events: none; z-index: 3; } @keyframes thShine { 0%, 62% { left: -140%; } 100% { left: 150%; } } html[data-th-login="on"] .th-login-card-fx { animation: thCardIn .7s var(--th-ease) both; box-shadow: 0 26px 60px -28px var(--th-glow), 0 2px 0 rgba(255,255,255,.5) inset; } @keyframes thCardIn { from { opacity: 0; transform: translateY(34px) scale(.94) rotateX(6deg); } to { opacity: 1; transform: none; } } /* Field-by-field entry inside login forms */ html[data-th-login="on"] .th-field-in { animation: thFieldIn .5s var(--th-ease) both; } @keyframes thFieldIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } /* Shake on failed login (JS adds .th-shake to any .error/.alert-danger) */ .th-shake { animation: thShake .45s cubic-bezier(.36, .07, .19, .97) both; } @keyframes thShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } /* ===================================================================== 6. WORK-COUNT / REPORT PAGE UPGRADE (opt-in class: th-report) ===================================================================== */ .th-report .dashboard-container, .th-report .table-wrapper, .th-report .table-container, .th-report .controls-container, .th-report .controls-wrapper { border-radius: var(--th-radius) !important; border: 1px solid rgba(125, 125, 125, .16) !important; box-shadow: 0 18px 42px -30px rgba(15, 23, 42, .55), 0 1px 2px rgba(15, 23, 42, .05) !important; background-color: var(--th-card) !important; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .th-report .header-title, .th-report h2 { background: linear-gradient(92deg, var(--th-accent), var(--th-accent2) 55%, var(--th-accent3)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } } .th-report .header-title { border-left-color: var(--th-accent) !important; } .th-report h2::before { background: linear-gradient(180deg, var(--th-accent), var(--th-accent3)) !important; } /* Sticky, gradient table head */ .th-report thead th { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, color-mix(in srgb, var(--th-accent) 12%, var(--th-card)), color-mix(in srgb, var(--th-accent) 4%, var(--th-card))) !important; color: color-mix(in srgb, var(--th-ink) 80%, var(--th-accent)) !important; border-bottom: 2px solid color-mix(in srgb, var(--th-accent) 35%, transparent) !important; } /* Row zebra + hover glow */ .th-report tbody tr:nth-child(even) > td { background-color: color-mix(in srgb, var(--th-accent) 3%, transparent); } .th-report tbody tr:hover > td { background-color: color-mix(in srgb, var(--th-accent) 9%, transparent) !important; box-shadow: inset 3px 0 0 var(--th-accent); } /* A page's own hover popups must always win. IMPORTANT: only the cell being hovered is raised. Giving every popup wrapper a high z-index put them all on the same layer, so wrappers in later rows painted straight over an open tooltip — which is exactly the overlap that showed up on the AG Office sheet. */ .th-report td { position: relative; } .th-report td:hover { z-index: 500; } .th-report td:hover .tooltip-box, .th-report td:hover [class*="tooltip"] { z-index: 501; } /* Numeric cells get a subtle count-up ready look */ .th-report td.th-num { font-variant-numeric: tabular-nums; font-weight: 600; } /* KPI strip injected by JS above the table */ .th-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin: 0 0 20px; } .th-kpi { position: relative; overflow: hidden; padding: 16px 18px; border-radius: var(--th-radius); background: linear-gradient(140deg, color-mix(in srgb, var(--th-card) 92%, transparent), color-mix(in srgb, var(--th-accent) 8%, var(--th-card))); border: 1px solid color-mix(in srgb, var(--th-accent) 22%, transparent); box-shadow: 0 16px 34px -26px var(--th-glow); transition: transform .25s var(--th-ease), box-shadow .25s ease; } .th-kpi:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px var(--th-glow); } .th-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--th-accent), var(--th-accent3)); } .th-kpi-label { font: 700 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .6; color: var(--th-ink); } .th-kpi-value { margin-top: 8px; font: 800 27px/1 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--th-ink); } .th-kpi-sub { margin-top: 5px; font: 500 11.5px/1.3 'Inter', system-ui, sans-serif; opacity: .62; color: var(--th-ink); } .th-kpi-spark { position: absolute; right: 10px; bottom: 8px; opacity: .35; } /* Scrollbars */ html[data-th-polish="on"] ::-webkit-scrollbar { width: 11px; height: 11px; } html[data-th-polish="on"] ::-webkit-scrollbar-track { background: transparent; } html[data-th-polish="on"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--th-accent) 45%, transparent); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } html[data-th-polish="on"] ::-webkit-scrollbar-thumb:hover { background: var(--th-accent); background-clip: content-box; } /* Toast used by the theme manager and dock */ #thToast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 24px); z-index: 2147483002; background: linear-gradient(135deg, var(--th-accent), var(--th-accent2)); color: #fff; font: 600 13px/1 'Inter', system-ui, sans-serif; padding: 12px 20px; border-radius: 99px; box-shadow: 0 18px 34px -16px var(--th-glow); opacity: 0; pointer-events: none; transition: opacity .28s ease, transform .28s var(--th-ease); } #thToast.th-show { opacity: 1; transform: translate(-50%, 0); } /* ===================================================================== 7. ACCESSIBILITY ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .th-fx-canvas, .th-fx-fg { display: none !important; } } html[data-th-motion="off"] *, html[data-th-motion="off"] *::before, html[data-th-motion="off"] *::after { animation: none !important; transition: none !important; } html[data-th-motion="off"] .th-fx-canvas, html[data-th-motion="off"] .th-fx-fg, html[data-th-motion="off"] #thMascot { display: none !important; } @media print { #thTransition, #thProgress, #thThemeDock, #thMascot, #thBubble, .th-fx-canvas, .th-fx-fg, #thToast { display: none !important; } html[data-th-bg="on"] { background: #fff !important; } } @media (max-width: 640px) { #thThemeDock { right: 12px; bottom: 12px; } #thThemeDock .th-dock-panel { width: 220px; } } /* ===================================================================== 8. GRACEFUL DEGRADATION Everything above uses modern CSS where it improves the look. These blocks give older engines (Safari < 16.2, Firefox < 113, Chrome < 111, older Edge) a solid, correct-looking fallback so no page ever renders with an invisible or transparent surface. ===================================================================== */ /* --- Browsers without color-mix() --- */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .th-report .dashboard-container, .th-report .table-wrapper, .th-report .table-container, .th-report .controls-container, .th-report .controls-wrapper { background-color: var(--th-card) !important; border: 1px solid rgba(128, 128, 128, .2) !important; } .th-report thead th { background: var(--th-bg2) !important; color: var(--th-ink) !important; border-bottom: 2px solid var(--th-accent) !important; } .th-report tbody tr:nth-child(even) > td { background-color: rgba(128, 128, 128, .045); } .th-report tbody tr:hover > td { background-color: rgba(128, 128, 128, .09) !important; } .th-kpi { background: var(--th-card); border: 1px solid rgba(128, 128, 128, .22); } html[data-th-polish="on"] ::-webkit-scrollbar-thumb { background: var(--th-accent3); background-clip: content-box; } #thThemeDock .th-pet { background: rgba(128, 128, 128, .12); } } /* --- Browsers without backdrop-filter --- */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .th-report .dashboard-container, .th-report .table-wrapper, .th-report .table-container, .th-report thead th { background-color: var(--th-card) !important; } } /* --- Browsers without `inset` shorthand (Safari < 14.1) --- */ @supports not (inset: 0) { .th-fx-canvas, .th-fx-fg, #thTransition, #thTransition .th-trans-inner, html[data-th-login="on"] .th-login-bg { top: 0; right: 0; bottom: 0; left: 0; } } /* --- Browsers without aspect-ratio --- */ @supports not (aspect-ratio: 1) { #thThemeDock .th-swatch, #thThemeDock .th-pet { height: 40px; } } /* --- Browsers without flex/grid `gap` (Safari < 14.1) --- */ @supports not (gap: 10px) { #thThemeDock > * + * { margin-bottom: 10px; } #thThemeDock .th-dock-toggles > * { margin: 0 4px 4px 0; } } /* ===================================================================== 9. MASCOT Every mascot rule now lives in assets/mascot.css. ===================================================================== */ /* Icons render at their container size, aligned to the text baseline */ .th-ico { display: block; width: 1em; height: 1em; } #thThemeDock .th-dock-btn .th-ico, #thThemeDock .th-swatch .th-ico, #thThemeDock .th-pet .th-ico { width: 22px; height: 22px; } #thThemeDock .th-pet .th-ico { width: 20px; height: 20px; color: var(--th-accent); } /* ===================================================================== 10. LITE MODE Set automatically when the frame rate on this device cannot keep up, and available as a manual toggle in the dock. Everything that costs something on an ongoing basis stops; the theme colours all remain. ===================================================================== */ html[data-th-lite="1"] .th-fx-canvas, html[data-th-lite="1"] .th-fx-fg, html[data-th-lite="1"] .th-fx-click { display: none !important; } html[data-th-lite="1"] #thMascot svg * { animation: none !important; } html[data-th-lite="1"] .th-topbar, html[data-th-lite="1"] .th-report .dashboard-container, html[data-th-lite="1"] .th-report .table-wrapper, html[data-th-lite="1"] .th-report .table-container, html[data-th-lite="1"] .th-report thead th { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-th-lite="1"] .th-topbar .th-brandmark, html[data-th-lite="1"] #thFestBtn, html[data-th-lite="1"] .ap-halo, html[data-th-lite="1"] .ap-chal, html[data-th-lite="1"] .ap-lamp-glow, html[data-th-lite="1"] .ap-rangoli, html[data-th-lite="1"] .th-balloon { animation: none !important; } html[data-th-lite="1"][data-th-bg="on"] { background-attachment: scroll; } html[data-th-lite="1"] .th-reveal { opacity: 1 !important; transform: none !important; } html[data-th-lite="1"] .th-report tbody tr.th-rowin { animation: none !important; } html[data-th-lite="1"] .th-login-card-fx::after { display: none !important; } html[data-th-lite="1"] .th-login-bg { display: none !important; } /* Wide dock buttons (Lite mode) */ #thThemeDock .th-mini-wide { flex: 1 1 100%; } /* ===================================================================== 11. SCREENSHOT MODE Applied to and for the duration of an html2canvas capture, and to the cloned document it renders. html2canvas 1.x cannot read modern colour functions, cannot place sticky elements, and cannot see into scroll containers — so for the length of the capture all three go away and every surface falls back to a plain colour. Nothing here is visible during normal use. ===================================================================== */ html.th-capturing, html.th-capturing body { background-image: none !important; background-attachment: scroll !important; } /* sticky and fixed elements land in the wrong place in a capture */ .th-capturing thead th, .th-capturing tfoot th, .th-capturing tfoot td, .th-capturing .th-topbar, .th-capturing .agc-head, .th-capturing .agc-table thead th, .th-capturing .agc-table tfoot th, .th-capturing .agc-table tfoot td, .th-capturing .agc-table .agc-c-sl, .th-capturing .agc-table .agc-c-name { position: static !important; } /* let the full table into the frame */ .th-capturing .table-container, .th-capturing .table-wrapper, .th-capturing .table-card, .th-capturing .agc-sheet, .th-capturing #capture_area { overflow: visible !important; max-height: none !important; } /* flatten everything html2canvas renders badly or not at all */ .th-capturing *, .th-capturing *::before, .th-capturing *::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important; } /* overlays never belong in a screenshot */ .th-capturing #thMascot, .th-capturing #thBubble, .th-capturing #thThemeDock, .th-capturing #thFestBtn, .th-capturing #thToast, .th-capturing #thTransition, .th-capturing #thProgress, .th-capturing #thTop, .th-capturing #agcPop, .th-capturing .th-gate, .th-capturing .th-pop, .th-capturing .th-fx-canvas, .th-capturing .th-fx-fg, .th-capturing .th-fx-click { display: none !important; } /* Plain colours for every surface the theme normally tints with color-mix(). These mirror the @supports fallbacks above. */ .th-capturing .th-report .dashboard-container, .th-capturing .th-report .table-wrapper, .th-capturing .th-report .table-container, .th-capturing .th-report .controls-container, .th-capturing .th-report .controls-wrapper { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; } .th-capturing .th-report thead th { background: #f8fafc !important; color: #334155 !important; border-bottom: 2px solid #cbd5e1 !important; } .th-capturing .th-report tbody tr:nth-child(even) > td { background-color: #fbfcfe !important; } .th-capturing .th-report tbody tr:hover > td { background-color: transparent !important; } .th-capturing .th-report tfoot tr td, .th-capturing .th-report tr.total-row td { background: #f1f5f9 !important; } .th-capturing .th-kpi { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } .th-capturing .th-report td.th-bar::before { display: none !important; } /* gradient headings must become solid text or they capture as invisible */ .th-capturing .th-report .header-title, .th-capturing .th-report h2, .th-capturing .agc-stat.is-accent dd { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: #1e293b !important; } /* ===================================================================== 12. THE WEATHER SECTION IN THE DOCK The weather half is automatic, so this is mostly a readout — what was detected and where — with a row of chips for anyone who wants to pin it. ===================================================================== */ #thThemeDock .th-wx-auto { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 20px; background: color-mix(in srgb, var(--th-accent) 16%, transparent); color: var(--th-accent); vertical-align: 1px; } #thThemeDock .th-wx-auto.th-wx-manual { background: rgba(125, 125, 125, .2); color: inherit; } #thThemeDock .th-wx-now { font-size: 11.5px; line-height: 1.45; opacity: .75; margin: 2px 0 8px; } #thThemeDock .th-wx-pick { display: flex; flex-wrap: wrap; gap: 4px; } #thThemeDock .th-wx-chip { font: 600 10.5px/1 'Inter', system-ui, sans-serif; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent; background: rgba(125, 125, 125, .12); color: inherit; cursor: pointer; transition: background .16s ease, border-color .16s ease; } #thThemeDock .th-wx-chip:hover { background: rgba(125, 125, 125, .22); } #thThemeDock .th-wx-chip.th-active { border-color: var(--th-accent); background: color-mix(in srgb, var(--th-accent) 14%, transparent); color: var(--th-accent); } @supports not (background: color-mix(in srgb, red 50%, blue)) { #thThemeDock .th-wx-auto, #thThemeDock .th-wx-chip.th-active { background: rgba(125, 125, 125, .22); } } #thThemeDock .th-wx-geo { margin-top: 8px; }