/* Built-in auth and system pages. Covers legacy nk-* template classes without depending on Dashlite. */ /* Auth-page accent. Grey by default for a clean/professional look; opt into the blue accent with [data-auth-theme="blue"] on . */ :root { --auth-accent: #6c6e7a; --auth-accent-strong: #8a8c98; --auth-accent-soft: rgba(108, 110, 122, 0.18); --auth-accent-contrast: #ffffff; } [data-auth-theme="blue"] { --auth-accent: #3b82f6; --auth-accent-strong: #60a5fa; --auth-accent-soft: rgba(59, 130, 246, 0.18); --auth-accent-contrast: #ffffff; } /* Auth/system pages run on a neutral dark-grey palette instead of the app-wide blue-tinted tokens (--page-bg: #07111f, --surface: #0d1726, etc.). Custom-property overrides cascade to every descendant so the glass card, inputs and borders all read grey without needing per-rule rewrites. The override is scoped to body classes so the rest of the platform keeps its blue palette. Opt back into the blue palette with [data-auth-theme="blue"] on . */ body.nk-body, body.auth-page, body.error-page { /* Palette ported verbatim from the original Go-core login design (commit 31ea097, web/login.html). Pure neutral greys — no blue tint — so the page reads clean and professional. The liquid-glass treatment is layered on top of these colours (card uses an alpha overlay + backdrop-blur for the glass effect). */ --page-bg: #191919; --surface: #333333; --surface-2: #2a2a2a; --surface-3: #4a4a4a; --hover: #333333; --active: #3a3a3a; --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.3); /* Typography overrides — design-system.css's text tokens are Tailwind slate (cool blue tint). Auth pages use pure white with opacity, like the original Feb 27 design. */ --text: #ffffff; --text-2: rgba(255, 255, 255, 0.85); --muted: rgba(255, 255, 255, 0.55); --faint: rgba(255, 255, 255, 0.35); /* Original design had no focus glow — just a brighter border. Drop the ring entirely on auth pages so focus reads clean. */ --focus-ring: none; min-height: 100vh; color: var(--text); background: var(--page-bg); } [data-auth-theme="blue"] body.nk-body, [data-auth-theme="blue"] body.auth-page, [data-auth-theme="blue"] body.error-page { --page-bg: #07111f; --surface: #0d1726; --surface-2: #121f31; --surface-3: #17263b; --hover: #162236; --active: #112544; --border: #263244; --border-strong: #344056; } .nk-app-root, .nk-main, .nk-wrap { min-height: 100vh; } .nk-content { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-3); } .nk-auth-body { width: 100%; display: grid; gap: var(--space-2); } .nk-auth-body.wide-xs { max-width: 30rem; } .nk-auth-body.wide-lg { max-width: 72rem; } .nk-block-head + .nk-block-head { margin-top: var(--space-3); } .nk-block-head-content { position: relative; } /* Liquid-glass surface used by nk-template auth cards. Mirrors .auth-card: translucent + backdrop-blur, with the conic specular rim drawn by the shared ::before / ::after rule above. */ .card.card-bordered { position: relative; background-color: rgba(30, 30, 30, 0.78); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: none; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); isolation: isolate; } .card-inner { padding: var(--space-2); } .card-inner-lg { padding: var(--space-3); } .nk-block-title { margin: 0; color: var(--text); } .nk-block-des { margin-top: var(--space-1); color: var(--muted); } .nk-block-des p { margin-bottom: var(--space-1); } .form-label-group { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); margin-bottom: var(--space-0-5); } .form-label { color: var(--text-2); } .form-group { margin-bottom: var(--space-2); } .form-group:last-child { margin-bottom: 0; } .form-control, .custom-select { min-height: var(--control-h); color: var(--text); background-color: var(--surface-2); border-color: var(--border); border-radius: var(--radius-sm); } .form-control-lg { min-height: 2.75rem; } .form-control:hover, .custom-select:hover { border-color: var(--border-strong); } .form-control:focus, .custom-select:focus { color: var(--text); background-color: var(--surface); border-color: var(--border-strong); box-shadow: var(--focus-ring); } .form-control::placeholder { color: var(--faint); } select.form-control, .custom-select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 0.75rem 0.75rem; } .btn { border-radius: var(--radius-sm); } /* Liquid-glass primary action. Original Feb 27 palette (#4a4a4a base, #555 hover, #3a3a3a active) wrapped in glass: translucent surface over a backdrop-blur, 1px translucent border, an inset highlight on the top edge, and a soft drop shadow that lifts the button off the card. A blue variant is available via [data-auth-theme="blue"] on (defined below). */ .btn-primary { position: relative; color: #ffffff; background-color: rgba(74, 74, 74, 0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .btn-primary:hover:not(:disabled), .btn-primary:focus:not(:disabled) { color: #ffffff; background-color: rgba(85, 85, 85, 0.88); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 0.625rem 1.5rem rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-primary:active:not(:disabled) { transform: translateY(1px); background-color: rgba(58, 58, 58, 0.85); box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .btn-primary:disabled, .btn-primary.disabled { background-color: rgba(42, 42, 42, 0.75); border-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.3); box-shadow: none; cursor: not-allowed; } /* Secondary auth action — ghost variant with a 1px translucent rim and the same glass blur, but no fill. Used for "Sign in using Email" alongside the primary password CTA. */ .btn-secondary { position: relative; color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.04); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-secondary:hover:not(:disabled), .btn-secondary:focus:not(:disabled) { color: #ffffff; background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); } .btn-secondary:active:not(:disabled) { background-color: rgba(255, 255, 255, 0.06); } .btn-secondary:disabled, .btn-secondary.disabled { background-color: transparent; border-color: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.25); cursor: not-allowed; } /* Blue variant — opt-in via [data-auth-theme="blue"] on or any ancestor of the button. */ [data-auth-theme="blue"] .btn-primary { background: linear-gradient( 135deg, rgba(96, 165, 250, 0.92) 0%, rgba(59, 130, 246, 0.92) 100% ); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 0.5rem 1.5rem rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); } [data-auth-theme="blue"] .btn-primary:hover, [data-auth-theme="blue"] .btn-primary:focus { background: linear-gradient( 135deg, rgba(118, 178, 252, 0.96) 0%, rgba(79, 145, 247, 0.96) 100% ); border-color: rgba(255, 255, 255, 0.24); box-shadow: 0 0.625rem 1.75rem rgba(59, 130, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.26); } [data-auth-theme="blue"] .btn-primary:active:not(:disabled) { box-shadow: 0 0.375rem 1rem rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-dark { color: var(--text); background-color: var(--surface-2); border-color: var(--border); } .btn-dark:hover, .btn-dark:focus { color: var(--text); background-color: var(--hover); border-color: var(--border-strong); } .link, .link-primary { color: var(--primary); } .text-danger { color: var(--danger) !important; } .mg-b-20 { margin-bottom: var(--space-2) !important; } .mg-l-5 { margin-left: var(--space-0-5) !important; } .mg-t-5 { margin-top: var(--space-0-5) !important; } .pt-1 { padding-top: var(--space-0-5) !important; } .pt-2 { padding-top: var(--space-1) !important; } .pt-4 { padding-top: var(--space-3) !important; } .mt-2 { margin-top: var(--space-1) !important; } .mt-4 { margin-top: var(--space-3) !important; } .g-gs { row-gap: var(--space-3); } .table.table-tranx { color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .table.table-tranx thead th { color: var(--muted); background: var(--surface-2); border-bottom-color: var(--border); } .table.table-tranx tbody { background: var(--surface) !important; } .table.table-tranx td, .table.table-tranx th { border-top-color: var(--divider); } [data-system="qrImage"] { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .auth-card, .error-card { position: relative; width: 100%; max-width: 30rem; padding: var(--space-4); color: var(--text); /* Liquid-glass surface — original #1e1e1e palette with the alpha dropped so the backdrop-blur reveals the page underneath, plus the conic specular rim drawn by ::before / ::after below. */ background-color: rgba(30, 30, 30, 0.78); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); isolation: isolate; animation: authCardFadeIn 0.25s ease-out; } .auth-card { margin: auto; } /* Specular rim — primary diagonal (top-left → bottom-right "light"). */ .auth-card::before, .error-card::before, .card.card-bordered::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient( from 135deg at 50% 50%, rgba(255, 255, 255, 0.22) 0deg, rgba(255, 255, 255, 0.06) 60deg, rgba(255, 255, 255, 0.01) 120deg, rgba(255, 255, 255, 0.01) 180deg, rgba(255, 255, 255, 0.01) 240deg, rgba(255, 255, 255, 0.06) 300deg, rgba(255, 255, 255, 0.22) 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } /* Specular rim — opposite diagonal (subtler second highlight). */ .auth-card::after, .error-card::after, .card.card-bordered::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient( from 315deg at 50% 50%, rgba(255, 255, 255, 0.14) 0deg, rgba(255, 255, 255, 0.04) 60deg, rgba(255, 255, 255, 0.01) 120deg, rgba(255, 255, 255, 0.01) 180deg, rgba(255, 255, 255, 0.01) 240deg, rgba(255, 255, 255, 0.04) 300deg, rgba(255, 255, 255, 0.14) 360deg ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } @keyframes authCardFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } body.auth-page { min-height: 100vh; height: auto; align-items: flex-start; padding: var(--space-3); overflow-y: auto; } .logo-section { text-align: center; margin-bottom: var(--space-4); } .subtitle { color: var(--muted); } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; width: 1rem; height: 1rem; color: var(--muted); transform: translateY(-50%); pointer-events: none; } .input-field { width: 100%; min-height: 2.75rem; padding: 0.75rem 1rem 0.75rem 2.75rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; } .input-field:hover { background: var(--hover); border-color: rgba(255, 255, 255, 0.15); } .input-field:focus { outline: 0; background: var(--surface); border-color: var(--border-strong); box-shadow: var(--focus-ring); } .input-field::placeholder { color: var(--faint); } .remember-row, .lang-row { color: var(--muted); } .remember-row { display: flex; align-items: center; gap: var(--space-1); } .remember-row input[type="checkbox"] { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; } .remember-row label { display: inline-flex; align-items: center; min-height: 1rem; margin: 0; } /* Liquid-glass "continue as" card — same translucent + backdrop-blur recipe as the button, sized to act as a chip-like row inside the parent auth-card. */ .continue-card { color: var(--text); background-color: rgba(42, 42, 42, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background-color 0.15s ease, border-color 0.15s ease; } .continue-card:hover { color: var(--text); background-color: rgba(51, 51, 51, 0.82); border-color: rgba(255, 255, 255, 0.16); } .continue-avatar { color: var(--auth-accent-contrast); background: var(--auth-accent); } .continue-name { color: var(--text); } .continue-label, .continue-arrow { color: var(--muted); } .error-msg { color: var(--text-2); background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: var(--radius-sm); } .error-msg .error-icon, .error-text-wrap h3 { color: var(--danger); } .footer { color: var(--muted); } .footer a { color: var(--auth-accent-strong); } body.error-page { display: flex; align-items: center; justify-content: center; padding: var(--space-3); } .security-shell, .system-page { width: 100%; margin: 0 auto; padding: var(--space-3); } .security-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } .security-eyebrow { margin: 0 0 var(--space-0-5); color: var(--primary); } .security-stack { display: block; width: 100%; } .security-stack > .security-panel + .security-panel, .security-stack > .card + .card, [data-system="wrapperOverview"] > .security-panel + .security-panel, [data-system="wrapperOverview"] > .card + .card { margin-top: var(--space-2); } [data-system="wrapperOverview"] + .security-panel, [data-system="wrapperOverview"] + .security-grid, .security-flow-panel, .security-flow-grid { margin-top: var(--space-2); } .security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .card.card-bordered.security-panel, .security-panel { overflow: hidden; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); } .security-narrow { max-width: 34rem; margin: 0 auto; } .security-flow-panel { max-width: none; } .security-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } .security-card-subtitle { margin: var(--space-0-5) 0 0; color: var(--muted); } .security-table-wrap { margin: var(--space-2) calc(var(--space-3) * -1) calc(var(--space-3) * -1); width: calc(100% + var(--space-3) * 2); } .security-table { margin: 0; width: 100%; border: 0 !important; border-radius: 0 !important; table-layout: auto; } .security-table th, .security-table td { height: 2.375rem; padding: 0.375rem var(--space-1-5); vertical-align: middle; } .security-table thead th { height: 2.5rem; padding: 0.625rem var(--space-1-5); color: var(--muted); vertical-align: middle !important; background: var(--surface-2); border-top: 0 !important; border-bottom: 1px solid var(--border) !important; } .security-table thead th > *, .security-table tbody td > * { vertical-align: middle; } .security-table th:last-child, .security-table td:last-child { width: 1%; text-align: right; white-space: nowrap; } .security-table .security-empty-state td { height: 3.25rem; width: auto; color: var(--muted); text-align: center; white-space: normal; background: var(--surface); } .security-choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); } .security-choice { display: flex; align-items: center; gap: var(--space-1); width: 100%; min-height: 3.25rem; padding: var(--space-1) var(--space-1-5); color: var(--text); text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .security-choice:hover, .security-choice:focus { background: var(--hover); border-color: var(--border-strong); } .security-choice-icon { display: none; } .security-flow-panel .form-group, .security-flow-grid .form-group, .security-flow-panel .btn-block, .security-flow-grid .btn-block { max-width: 34rem; } .security-flow-panel .btn-block, .security-flow-grid .btn-block { width: auto; min-width: 8rem; } .security-step + .security-step { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); } .security-qr { display: grid; width: 13rem; min-height: 13rem; place-items: center; margin: var(--space-3) 0 0; padding: var(--space-1); background: #ffffff; border-radius: var(--radius-sm); } .security-qr img { width: 100%; height: auto; } [data-system="btnSecurity"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-0-5); float: none !important; width: auto; height: auto; min-height: var(--control-h); padding: 0 var(--space-1-5); margin-left: 0; white-space: nowrap; } [data-system="btnSecurity"]::before { content: none; } [data-system="btnSecurity"] em { display: none; } .security-panel .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 var(--space-1-5); white-space: nowrap; } .security-panel .btn-sm, .security-panel .btn-xs { min-height: var(--control-sm-h); padding: 0 var(--space-1); } .security-panel .btn-block { width: 100%; } .security-flow-panel .btn-block, .security-flow-grid .btn-block { width: auto; min-width: 8rem; } .security-panel .btn-info { color: var(--primary-contrast); background: var(--info); border-color: var(--info); } .security-panel .btn-danger { color: var(--primary-contrast); background: var(--danger); border-color: var(--danger); } .security-table .btn, .security-table button, .security-table [role="button"] { display: inline-flex; align-items: center; justify-content: center; min-width: auto; min-height: 1.625rem; height: 1.625rem; padding: 0 var(--space-1); gap: var(--space-0-5); line-height: 1; vertical-align: middle; white-space: nowrap; } .security-table .btn-icon, .security-table .btn-icon.btn, .security-table .btn em:only-child, .security-table button em:only-child { width: 1.625rem; min-width: 1.625rem; padding-right: 0; padding-left: 0; } .security-table .btn em:empty, .security-table button em:empty { display: none; } .security-table .btn em:empty + span, .security-table button em:empty + span { margin-left: 0; } .system-page { display: grid; min-height: calc(100vh - var(--space-4) * 2); place-items: center; } .system-panel { width: min(36rem, 100%); padding: var(--space-4); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); } .system-mark { margin: 0 auto var(--space-2); } .system-actions { margin-top: var(--space-3); } .error-card { text-align: center; } @media (max-width: 48rem) { .nk-content { padding: var(--space-2); } .card-inner-lg, .auth-card, .error-card { padding: var(--space-2); } .security-shell, .system-page { padding: var(--space-2); } .security-hero, .security-card-header { align-items: stretch; flex-direction: column; } .security-grid { grid-template-columns: 1fr; } .security-choice-list { grid-template-columns: 1fr; } .security-table-wrap { margin-right: calc(var(--space-2) * -1); margin-left: calc(var(--space-2) * -1); width: calc(100% + var(--space-2) * 2); } .system-panel { padding: var(--space-2); } }