/* Shared across all pages: htmx request indicator, disabled-button state, the top-of-page loading bar shown during htmx requests (including hx-boost navigation), and the app-wide font-size scale. */ :root { --nt93-font-size-xs: 0.7rem; /* 11.2px — hints, timestamps, small badges */ --nt93-font-size-sm: 0.85rem; /* 13.6px — table rows, form/panel body text */ --nt93-font-size-md: 1rem; /* 16px — default body text */ --nt93-font-size-lg: 1.125rem; /* 18px — subheadings */ --nt93-font-size-xl: 1.5rem; /* 24px — headings */ } .htmx-indicator { display: none; } .htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display: inline-block; } button[disabled] { cursor: not-allowed; opacity: 0.7; } /* Bootstrap's .badge defaults to font-size: .75em (relative to its context, so it shrinks along with the smaller table/panel font-size). Use an absolute size from the scale instead so badges stay legible everywhere. */ .badge { font-size: var(--nt93-font-size-sm); } /* Small uppercase page-label/status chip (header page name, "BETA" tag, etc.) */ .nt93-badge { font-size: var(--nt93-font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid #333; color: #9ca3af; padding: 2px 6px; border-radius: 2px; } #nt93-loading-bar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000; pointer-events: none; } #nt93-loading-bar .bar { height: 100%; width: 0%; opacity: 0; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); transform-origin: left; } #nt93-loading-bar.is-loading .bar { opacity: 1; width: 85%; transition: width 6s cubic-bezier(0.1, 0.7, 1, 0.1); } #nt93-loading-bar.is-done .bar { width: 100%; opacity: 0; transition: width 200ms ease-out, opacity 300ms ease-out 150ms; } /* Shared confirm dialog (partials/ui/confirm-modal.ejs), replacing the native window.confirm() that hx-confirm="..." would otherwise trigger — see app.js's htmx:confirm listener for the JS side. */ .nt93-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .nt93-modal { width: 100%; max-width: 420px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } body.nt93-modal-open { overflow: hidden; } /* confirm-modal.ejs's own panel/border classes — dark by design regardless of the page it's shown over (a light-page confirm dialog is still fine as a dark overlay), so these live here rather than only on dark-theme pages. */ .panel-dark-custom { background-color: #0a0a0a; border: 1px solid #222; border-radius: 6px; } .border-custom { border-color: #222 !important; } /* Dark theme — ported from nt93-user-services-graphql's public/css/login.css (the original OIDC provider's own login page) plus dashboard.css (session rows, panel), used by views/auth/{login,register,forgot-password, reset-password}.ejs and views/account/{connected-apps,sessions}.ejs. Applied by giving the `nt93-bg` class (see layouts/main.ejs's `bodyClass` local) — light-theme pages (Connected Apps' own light equivalent doesn't exist; every self-service/auth page in this app is dark) don't load any of this by omitting that class. */ .nt93-bg { background-color: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .nt93-top-nav { padding: 2rem; } .nt93-btn-close, .nt93-btn-header { font-size: 0.75rem; padding: 0.375rem 1rem; background-color: #111; border: 1px solid #222; border-radius: 4px; color: #d1d5db; transition: background-color 0.2s; } .nt93-btn-close:hover, .nt93-btn-header:hover { background-color: #222; color: #fff; } .nt93-dot { display: inline-block; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; margin-left: 2px; } .nt93-text-gray { color: #888; font-size: 13px; line-height: 1.6; } .nt93-label { font-size: 11px; color: #777; margin-bottom: 0.5rem; display: block; } .nt93-input { width: 100%; padding: 0.625rem 0.75rem; background-color: #141414; border: 1px solid transparent; border-radius: 4px; font-size: 0.875rem; color: #fff; transition: border-color 0.2s; } .nt93-input::placeholder { color: #555; } .nt93-input:focus { border-color: #333; outline: none; background-color: #141414; color: #fff; box-shadow: none; } .nt93-terms { font-size: 10px; color: #666; line-height: 1.6; } .nt93-terms a { color: #666; text-decoration: underline; } .nt93-terms a:hover { color: #999; } .nt93-btn-submit { padding: 0.5rem 2rem; background-color: #fff; color: #000; font-size: 13px; font-weight: 500; border-radius: 4px; border: none; transition: background-color 0.2s; } .nt93-btn-submit:hover { background-color: #e5e7eb; } .nt93-login-tab { font-size: 12px; padding: 0.375rem 0.875rem; background-color: transparent; border: 1px solid #222; border-radius: 4px; color: #888; transition: all 0.2s; } .nt93-login-tab:hover { color: #ccc; border-color: #333; } .nt93-login-tab.active { background-color: #fff; color: #000; border-color: #fff; } .nt93-right-col { border-left: 1px solid #222; } @media (max-width: 768px) { .nt93-right-col { border-left: none; padding-top: 2rem; } } /* Account nav (partials/account/header.ejs) — top-of-page link row between the self-service pages (Connected Apps / Sessions). Same interaction shape as a tab, not a sidebar item — this app never grows a sidebar. */ .nt93-account-nav-link { font-size: var(--nt93-font-size-sm); color: #888; text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; } .nt93-account-nav-link:hover { color: #ccc; } .nt93-account-nav-link.active { color: #fff; border-bottom-color: #fff; } /* Session/device row — shared shape between /account/sessions and /account/connected-apps (both are "a row per thing you can revoke"). */ .nt93-session-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #1a1a1a; } .nt93-session-row:last-child { border-bottom: none; } .nt93-session-title { font-weight: 500; color: #d1d5db; display: flex; align-items: center; gap: 0.5rem; } .nt93-session-badge-current { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: #000; background-color: #fff; padding: 1px 6px; border-radius: 2px; } .nt93-session-meta { color: #666; font-size: var(--nt93-font-size-xs); margin-top: 3px; } .nt93-session-revoke { flex-shrink: 0; background: transparent; border: 1px solid #2a1414; color: #b45454; border-radius: 4px; padding: 0.3rem 0.7rem; font-size: var(--nt93-font-size-xs); transition: all 0.15s ease; } .nt93-session-revoke:hover { background-color: #2a1414; border-color: #4a1f1f; color: #ff8080; } /* Empty-state line for the two lists above ("No connected apps." / "No active sessions."). */ .nt93-empty { color: #666; }