/* ============================================================================ * portal.css — shared portal look & feel * * Load AFTER assets/css/theme.min.css so we can override Around-theme defaults * where they hurt readability in light mode. Every portal page links this. * * Scope: visual polish + contrast fixes ONLY. Page-specific styles still live * inline on their page. * ========================================================================= */ /* ------- Cross-page loading overlay ------- * The portal is a multi-page static site (each HTML file is its own page * load), so every navigation has a brief window where the browser has * painted raw HTML but Vue hasn't compiled the template yet. Without * intervention the user sees: * - `{{ variables }}` mustache syntax flash before Vue mounts * - Blank / half-rendered tiles while initial API calls return * * Strategy: scope the scrim to JUST the content column (.col-lg-9 inside * .page-wrapper), so the header and sidebar stay visible while the body * loads. Makes navigation feel anchored instead of whole-page flashing. * portal-common.js adds `.portal-ready` to when ready, and the * scrim fades out. min-height on the column during the loading state * stops the scrim collapsing to 0 before Vue renders any content. * * Fallback: pages without the standard .page-wrapper layout (first-time * setup, signin, marketing templates) don't get a scrim here. They're * light enough that the portal-common.js auto-hide is enough on its own. * * [v-cloak] covers the mustache flash specifically — any Vue element * with v-cloak will be invisible until Vue strips the attribute at mount. * ---------------------------------------------------------------------- */ .page-wrapper .col-lg-9 { position: relative; } /* Reserve vertical space while loading so the scrim has something to * cover — otherwise an empty column before Vue compile shows 0-height * pseudo-elements. Removed once .portal-ready lands, so the column * snaps back to its natural height. */ body:not(.portal-ready) .page-wrapper .col-lg-9 { min-height: 70vh; } /* White scrim + spinner, anchored inside the content column */ .page-wrapper .col-lg-9::before { content: ''; position: absolute; inset: 0; background: var(--ar-body-bg, #ffffff); z-index: 10; opacity: 1; transition: opacity .25s ease-out, visibility .25s ease-out; visibility: visible; pointer-events: none; } .page-wrapper .col-lg-9::after { content: ''; position: absolute; top: 40%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 3px solid rgba(0, 0, 0, .08); border-top-color: var(--ar-primary, #4c82f7); border-radius: 50%; animation: portal-spin .8s linear infinite; z-index: 11; opacity: 1; transition: opacity .25s ease-out, visibility .25s ease-out; visibility: visible; pointer-events: none; } body.portal-ready .page-wrapper .col-lg-9::before, body.portal-ready .page-wrapper .col-lg-9::after { opacity: 0; visibility: hidden; } @keyframes portal-spin { to { transform: rotate(360deg); } } /* Hide Vue elements until compiled — prevents {{ var }} flash. Pages * can opt in by adding `v-cloak` to any Vue-bound element. No-op on * pages that don't add the attribute. */ [v-cloak] { visibility: hidden; } /* Auto-hide cursor after inactivity. Class is toggled on by * portal-common.js after CURSOR_HIDE_AFTER_MS of no mouse / keyboard * activity, removed instantly on the next input event. * * Why descendant selector + !important: Bootstrap and browser defaults * set explicit `cursor: pointer` on ,