/* =========================================================================== * PORTAL EXTENSIONS * * Loaded after site.css. Everything here is either (a) a class the shared * design system references but never defines, or (b) a pattern specific to a * records-search portal that the payments app has no use for. * * Rule of thumb: if a style would also make sense in CISARKANSAS PAY, it * belongs upstream in site.css — not here. * =========================================================================== */ /* --------------------------------------------------------------------------- * Gaps in the shared system. * _Layout.cshtml applies .main-shell but no stylesheet defines it; the toast * dismiss animation in site.js references a keyframe that site.css omits. * Both are reported upstream — defined here so the portal behaves correctly * in the meantime. * ------------------------------------------------------------------------ */ .main-shell { flex: 1 0 auto; padding-top: 1.5rem; padding-bottom: 2.5rem; } @keyframes toast-out { to { opacity: 0; transform: translateX(100%); } } /* --------------------------------------------------------------------------- * Page shell * site.css sets `body { margin-bottom: 60px }` for a fixed footer. This portal * uses a natural flow footer pinned by flexbox instead, so that margin would * leave a gap below it. * ------------------------------------------------------------------------ */ body { min-height: 100vh; margin-bottom: 0; } .topbar-title { /* Longer than the payments app's title; keep it from crowding the logo. */ line-height: 1.25; } /* --------------------------------------------------------------------------- * Empty state * Lifted from admin.css, which the portal does not load (it is the back-office * design system and collides with site.css on badges, tokens and .btn-danger). * This is the one pattern from it the portal genuinely needs. * ------------------------------------------------------------------------ */ .empty-state { text-align: center; padding: 3rem 1.25rem; color: var(--gray-primary); } .empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; opacity: 0.3; } .empty-state p { font-size: 0.9375rem; margin: 0; } .empty-state .empty-state-hint { font-size: 0.8125rem; margin-top: 0.5rem; opacity: 0.8; } /* --------------------------------------------------------------------------- * Document links * These open a scanned PDF in a new tab. site.css deliberately has no * .btn-danger — red is reserved for destructive actions — so a neutral, * icon-sized affordance is used instead of Bootstrap's red button. * ------------------------------------------------------------------------ */ .pdf-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; border: 1px solid var(--navy-primary); border-radius: 0.375rem; color: var(--navy-primary); background: transparent; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .pdf-link:hover, .pdf-link:focus-visible { background: var(--navy-primary); color: var(--white); } .pdf-link i { font-size: 1rem; } /* Shown in place of .pdf-link when a record's image is withheld from public view (tblLicense.HideImage). Communicates "deliberately unavailable" rather than "missing". */ .pdf-unavailable { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; color: var(--gray-primary); opacity: 0.55; } /* --------------------------------------------------------------------------- * Result tables * The marriage table pairs groom and bride column groups; a faint tint keeps * the two readable across a wide row without adding borders. * ------------------------------------------------------------------------ */ .groom-header, .groom-col { background-color: rgba(0, 102, 204, 0.05); } .bride-header, .bride-col { background-color: rgba(0, 31, 63, 0.05); } .table .wrap-header { white-space: normal; word-break: break-word; } /* Action cells hold a single icon control; keep them tight and centred. */ .table .action-cell { width: 1%; white-space: nowrap; text-align: center; } /* Result count / summary line above a table. */ .result-summary { font-size: 0.875rem; color: var(--gray-primary); margin-bottom: 0.75rem; } /* --------------------------------------------------------------------------- * County footer * The per-county logo is fetched from that county's S3 bucket and its * dimensions are not under our control, so constrain it explicitly. * ------------------------------------------------------------------------ */ .county-logo { width: auto; max-width: 150px; max-height: 90px; object-fit: contain; } .county-footer-contact { font-size: 0.875rem; line-height: 1.5; } /* --------------------------------------------------------------------------- * Blazor infrastructure * ------------------------------------------------------------------------ */ #blazor-error-ui { background: #f8d7da; color: #721c24; border-top: 2px solid #f5c6cb; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; font-weight: 500; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; color: #721c24; font-size: 1.2rem; } .validation-message { color: #dc3545; font-size: 0.875rem; } /* --------------------------------------------------------------------------- * Print * Searches are routinely printed as proof of record; drop the chrome and the * controls, keep the results. * ------------------------------------------------------------------------ */ @media print { .filter-card, .pdf-link, #blazor-error-ui { display: none !important; } .county-logo { max-width: 110px; } } /* --------------------------------------------------------------------------- * Reconnect overlay * Blazor toggles these classes on #components-reconnect-modal. Providing the * element and its styles ourselves keeps the framework from injecting an inline *