naturallaw777
2013df55bd
Apply the approved "The Hub" redesign to the web admin while keeping every existing mechanic intact (polling, service-detail modals, Matrix and system password management, NWC wallet manager, update/rebuild/backup/security/ reboot flows, feature manager, onboarding, role handling). Layout (templates/index.html): - Old header bar + IP bar replaced by a sidebar + topbar app shell. Sidebar carries the brand (The Hub / Sovran_SystemsOS version), category navigation with live counts, the System actions (Update System, Tech Support, Manual Backup, Security, node-only Upgrade), Feature Manager / Preferences, and the role badge. - Topbar carries the page title, a service search box, the LAN | WAN network chip (external IP always visible, one line), Reboot and Sign Out. - New widgets row: Systems Operational summary (opens the new Systems Operational modal) and Bitcoin Core sync progress with block/ETA. - New Systems Operational modal: service counts, router port-forwarding steps (80/443 to this machine's LAN IP), the live domain diagnostics checklist, and which services use those ports. New static/js/dashboard.js (namespaced IIFE, no new globals) renders the nav, search filtering, widgets, and the Systems Operational modal; it is driven by the existing /api/services payloads via a window.dashboardServicesUpdated() hook called from buildTiles/updateTiles. Visual design (static/css/*): - New token set (softer dark surfaces, lifted contrast, Sovran green reserved for status and actions) with legacy variable names aliased so every secondary sheet re-skins automatically. - Tiles, dialogs, buttons, inputs, toggles, tables, forms, overlays and the login page restyled to the GNOME/libadwaita-flavored surfaces: 20px cards, 26px dialogs, pill buttons, libadwaita switches, mono value pills with Copy buttons, consistent modal anatomy. - Inline SVG symbol set for chrome/nav icons (monochrome, currentColor); service icons still load from /static/icons/*.svg as before. - Sidebar system buttons now use vector glyphs instead of emoji. Behavioral details: - Service detail modal header gains a status pill next to the version chip; credentials render with pre-wrap for multiline values. - First-login security banner now renders as a card inside the content area instead of a full-width strip above the app. - Search + category filtering hide/show sections and tiles without touching the polling or update logic. Onboarding and login pages rebranded to "The Hub" with aligned palette.
1422 lines
28 KiB
CSS
1422 lines
28 KiB
CSS
/* ── Modal shells ─────────────────────────────────────────────────
|
|
One dialog anatomy for every modal: elevated surface, 26px radius,
|
|
header (icon + title + chips), scrollable body, right-aligned foot. */
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(8, 12, 10, 0.62);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 26px;
|
|
z-index: 200;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.22s, visibility 0.22s;
|
|
}
|
|
|
|
.modal-overlay.open {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.modal-dialog,
|
|
.creds-dialog {
|
|
width: 100%;
|
|
max-width: 570px;
|
|
max-height: min(86vh, 780px);
|
|
background: var(--elevated);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-dialog);
|
|
box-shadow: var(--shadow-pop);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform: translateY(16px) scale(0.965);
|
|
transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.25, 1.15);
|
|
}
|
|
|
|
.modal-overlay.open .modal-dialog,
|
|
.modal-overlay.open .creds-dialog {
|
|
transform: none;
|
|
}
|
|
|
|
.creds-dialog--wide { max-width: 760px; }
|
|
.domain-narrow-dialog { max-width: 480px; }
|
|
|
|
/* ── Update / Rebuild modal internals ───────────────────────────── */
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 20px 24px 0;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.13rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.modal-status {
|
|
margin-left: auto;
|
|
font-size: 0.78rem;
|
|
font-weight: 650;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.modal-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
border: 2.5px solid rgba(255, 255, 255, 0.14);
|
|
border-top-color: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.modal-spinner.spinning { animation: spin 0.8s linear infinite; }
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
.modal-log {
|
|
background: var(--inset);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 13px 16px;
|
|
margin: 16px 24px 0;
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.85;
|
|
color: var(--text-2);
|
|
max-height: 260px;
|
|
min-height: 120px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
padding: 18px 24px 22px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── Creds / service-detail modal internals ─────────────────────── */
|
|
|
|
.creds-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 22px 24px 0;
|
|
}
|
|
|
|
.creds-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
font-size: 1.13rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.creds-title-icon {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 16px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.creds-title-version-badge {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-2);
|
|
font-family: var(--mono);
|
|
font-size: 0.66rem;
|
|
font-weight: 600;
|
|
padding: 2px 9px;
|
|
border-radius: 99px;
|
|
border: 1px solid var(--border);
|
|
letter-spacing: 0.02em;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.creds-title-status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.69rem;
|
|
font-weight: 700;
|
|
padding: 3px 10px;
|
|
border-radius: 99px;
|
|
letter-spacing: 0.01em;
|
|
white-space: nowrap;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text-2);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.creds-title-status-pill.st-active { background: var(--accent-dim); color: var(--accent); border-color: rgba(66, 243, 154, 0.3); }
|
|
.creds-title-status-pill.st-needs-attention { background: rgba(233, 182, 74, 0.10); color: var(--amber); border-color: rgba(233, 182, 74, 0.3); }
|
|
.creds-title-status-pill.st-failed { background: rgba(246, 97, 81, 0.10); color: var(--red); border-color: rgba(246, 97, 81, 0.3); }
|
|
.creds-title-status-pill.st-syncing,
|
|
.creds-title-status-pill.st-loading,
|
|
.creds-title-status-pill.st-checking-reachability { background: rgba(120, 174, 237, 0.10); color: var(--blue); border-color: rgba(120, 174, 237, 0.3); }
|
|
|
|
.creds-close-btn {
|
|
margin-left: auto;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-2);
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.creds-close-btn:hover {
|
|
border-color: var(--border-strong);
|
|
color: var(--text);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.creds-body {
|
|
padding: 19px 24px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.creds-loading,
|
|
.creds-empty {
|
|
color: var(--text-3);
|
|
font-size: 0.88rem;
|
|
padding: 24px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Sections → titled cards */
|
|
.svc-detail-section {
|
|
margin-top: 14px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.svc-detail-section:first-child { margin-top: 0; }
|
|
|
|
.svc-detail-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.92rem;
|
|
font-weight: 750;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.svc-detail-desc {
|
|
font-size: 0.82rem;
|
|
color: var(--text-2);
|
|
line-height: 1.62;
|
|
}
|
|
|
|
.svc-detail-desc + .svc-detail-desc { margin-top: 8px; }
|
|
|
|
.svc-detail-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.svc-detail-troubleshoot {
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.svc-detail-troubleshoot strong { color: var(--text); }
|
|
|
|
.svc-detail-troubleshoot + .svc-detail-troubleshoot { margin-top: 10px; }
|
|
|
|
.svc-detail-domain-btn { margin-top: 10px; }
|
|
.svc-detail-restart-btn { margin-top: 8px; }
|
|
|
|
.svc-detail-addon-status {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.svc-detail-related-feature-btn:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.svc-detail-addon-row,
|
|
.svc-detail-option-card .svc-detail-addon-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.addon-status--on { color: var(--accent); font-weight: 700; font-size: 0.82rem; }
|
|
.addon-status--off { color: var(--text-3); font-weight: 700; font-size: 0.82rem; }
|
|
|
|
.svc-detail-option-list {
|
|
margin: 8px 0 0;
|
|
padding-left: 20px;
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.svc-detail-option-privacy {
|
|
margin-top: 10px;
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(66, 243, 154, 0.22);
|
|
border-radius: 12px;
|
|
padding: 9px 13px;
|
|
}
|
|
|
|
.svc-detail-restart-section {
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.svc-detail-restart-result {
|
|
margin-top: 10px;
|
|
font-size: 0.82rem;
|
|
font-weight: 650;
|
|
color: var(--accent);
|
|
display: none;
|
|
}
|
|
|
|
.svc-detail-restart-result.error { color: var(--amber); }
|
|
.svc-detail-restart-result.visible { display: block; }
|
|
|
|
/* ── Credential rows → label + value pill + Copy ────────────────── */
|
|
|
|
.creds-row {
|
|
margin-top: 11px;
|
|
}
|
|
|
|
.creds-row:first-child { margin-top: 0; }
|
|
|
|
.creds-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
color: var(--text-2);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.creds-value-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
background: var(--inset);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 6px 7px 6px 12px;
|
|
}
|
|
|
|
.creds-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
color: var(--text);
|
|
text-align: left;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.creds-value.creds-value--pre {
|
|
white-space: pre-line;
|
|
word-break: normal;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.creds-link {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.creds-link:hover { text-decoration: underline; }
|
|
|
|
.creds-copy-btn {
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: 1px solid var(--border-strong);
|
|
color: var(--text-2);
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
padding: 3px 11px;
|
|
border-radius: 99px;
|
|
cursor: pointer;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.creds-copy-btn:hover,
|
|
.creds-copy-btn.copied {
|
|
color: var(--accent);
|
|
border-color: rgba(66, 243, 154, 0.5);
|
|
background: rgba(66, 243, 154, 0.08);
|
|
}
|
|
|
|
/* QR */
|
|
.creds-qr-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.creds-qr-img {
|
|
width: 150px;
|
|
height: 150px;
|
|
padding: 10px;
|
|
background: #edf4ef;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.creds-qr-hint {
|
|
margin-top: 10px;
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
text-align: center;
|
|
line-height: 1.55;
|
|
max-width: 420px;
|
|
}
|
|
|
|
/* ── Matrix / system password forms ─────────────────────────────── */
|
|
|
|
.matrix-form-group { margin-top: 13px; }
|
|
.matrix-form-group:first-child { margin-top: 0; }
|
|
|
|
.matrix-form-label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
font-weight: 650;
|
|
color: var(--text-2);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.matrix-form-input {
|
|
width: 100%;
|
|
background: var(--inset);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 12px;
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: 0.88rem;
|
|
padding: 9px 14px;
|
|
outline: 0;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.matrix-form-input:focus { border-color: rgba(66, 243, 154, 0.5); }
|
|
|
|
.matrix-form-checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.matrix-form-checkbox-row input {
|
|
width: 15px;
|
|
height: 15px;
|
|
accent-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.matrix-form-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.matrix-form-back {
|
|
background: none;
|
|
border: 1px solid var(--border-strong);
|
|
color: var(--text-2);
|
|
border-radius: 99px;
|
|
padding: 8px 18px;
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.matrix-form-back:hover {
|
|
color: var(--text);
|
|
border-color: rgba(255, 255, 255, 0.26);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.matrix-form-submit {
|
|
background: linear-gradient(180deg, #3fd68e, #1ea263);
|
|
color: #04220f;
|
|
border-radius: 99px;
|
|
padding: 8px 18px;
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(35, 199, 124, 0.22);
|
|
}
|
|
|
|
.matrix-form-submit:hover:not(:disabled) { filter: brightness(1.08); }
|
|
|
|
.matrix-form-result {
|
|
display: none;
|
|
margin-top: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: 650;
|
|
padding: 9px 13px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.matrix-form-result.success {
|
|
display: block;
|
|
color: var(--accent);
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(66, 243, 154, 0.25);
|
|
}
|
|
|
|
.matrix-form-result.error {
|
|
display: block;
|
|
color: var(--amber);
|
|
background: rgba(233, 182, 74, 0.07);
|
|
border: 1px solid rgba(233, 182, 74, 0.3);
|
|
}
|
|
|
|
.matrix-actions-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 14px 0 0;
|
|
}
|
|
|
|
.matrix-actions-row {
|
|
display: flex;
|
|
gap: 9px;
|
|
flex-wrap: wrap;
|
|
margin-top: 13px;
|
|
}
|
|
|
|
.matrix-action-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-strong);
|
|
color: var(--text-2);
|
|
border-radius: 99px;
|
|
padding: 6px 14px;
|
|
font-size: 0.77rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.matrix-action-btn:hover {
|
|
color: var(--text);
|
|
border-color: rgba(255, 255, 255, 0.26);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
/* System password change */
|
|
.sys-chpw-header { margin-bottom: 12px; }
|
|
|
|
.sys-chpw-title {
|
|
font-size: 0.98rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.sys-chpw-desc {
|
|
margin-top: 6px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.pw-input-wrap { position: relative; }
|
|
|
|
.pw-toggle-btn {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: 0;
|
|
color: var(--text-3);
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
padding: 4px 6px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.pw-toggle-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
|
|
|
|
.pw-hint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-3);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.pw-credentials-note {
|
|
margin-top: 14px;
|
|
font-size: 0.78rem;
|
|
color: var(--amber);
|
|
background: rgba(233, 182, 74, 0.07);
|
|
border: 1px solid rgba(233, 182, 74, 0.3);
|
|
border-radius: 12px;
|
|
padding: 10px 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ── Port requirements ──────────────────────────────────────────── */
|
|
|
|
.port-req-table,
|
|
.svc-detail-port-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 10px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.port-req-table th,
|
|
.svc-detail-port-table th {
|
|
text-align: left;
|
|
font-size: 0.68rem;
|
|
font-weight: 750;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-3);
|
|
padding: 7px 10px;
|
|
border-bottom: 1px solid var(--border-strong);
|
|
}
|
|
|
|
.port-req-table td,
|
|
.svc-detail-port-table td {
|
|
padding: 9px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
color: var(--text-2);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.port-req-table tr:last-child td,
|
|
.svc-detail-port-table tr:last-child td { border-bottom: 0; }
|
|
|
|
.port-req-port,
|
|
.port-req-internal-ip {
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
color: var(--text);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.port-req-intro,
|
|
.port-req-hint,
|
|
.svc-detail-port-note {
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.port-req-steps {
|
|
margin-top: 6px;
|
|
margin-bottom: 10px;
|
|
font-size: 0.76rem;
|
|
color: var(--text-3);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.port-proto-badge {
|
|
display: inline-block;
|
|
font-size: 0.66rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.06em;
|
|
padding: 2px 9px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.port-proto-badge--tcp { background: rgba(120, 174, 237, 0.12); color: var(--blue); }
|
|
.port-proto-badge--udp { background: rgba(66, 243, 154, 0.12); color: var(--accent); }
|
|
.port-proto-badge--both { background: rgba(233, 182, 74, 0.12); color: var(--amber); }
|
|
|
|
.port-proto-note {
|
|
display: block;
|
|
font-size: 0.66rem;
|
|
color: var(--text-3);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.port-status-closed,
|
|
.port-status-closed-note {
|
|
margin-top: 10px;
|
|
font-size: 0.78rem;
|
|
color: var(--amber);
|
|
background: rgba(233, 182, 74, 0.07);
|
|
border: 1px solid rgba(233, 182, 74, 0.3);
|
|
border-radius: 12px;
|
|
padding: 9px 13px;
|
|
}
|
|
|
|
/* ── Domain setup fields ────────────────────────────────────────── */
|
|
|
|
.domain-setup-intro {
|
|
font-size: 0.85rem;
|
|
color: var(--text-2);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.domain-setup-intro p { margin-top: 8px; }
|
|
.domain-setup-intro p:first-child { margin-top: 0; }
|
|
.domain-setup-intro strong { color: var(--text); }
|
|
.domain-setup-intro a { color: var(--accent); }
|
|
|
|
.domain-field-group { margin-top: 13px; }
|
|
|
|
.domain-field-label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
font-weight: 650;
|
|
color: var(--text-2);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.domain-field-input {
|
|
width: 100%;
|
|
background: var(--inset);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 12px;
|
|
color: var(--text);
|
|
font: inherit;
|
|
font-size: 0.88rem;
|
|
padding: 9px 14px;
|
|
outline: 0;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.domain-field-input:focus { border-color: rgba(66, 243, 154, 0.5); }
|
|
|
|
.domain-field-hint {
|
|
font-size: 0.7rem;
|
|
color: var(--text-3);
|
|
margin-top: 5px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.domain-field-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.domain-nwc-warning {
|
|
margin-top: 14px;
|
|
font-size: 0.78rem;
|
|
color: var(--amber);
|
|
background: rgba(233, 182, 74, 0.07);
|
|
border: 1px solid rgba(233, 182, 74, 0.3);
|
|
border-radius: 12px;
|
|
padding: 10px 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.onboarding-port-warn {
|
|
margin-top: 14px;
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
background: rgba(0, 0, 0, 0.16);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 12px;
|
|
padding: 10px 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ── Restart confirm / support shared ───────────────────────────── */
|
|
|
|
.support-desc {
|
|
font-size: 0.85rem;
|
|
color: var(--text-2);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.support-desc + .support-desc { margin-top: 10px; }
|
|
.support-desc strong { color: var(--text); }
|
|
|
|
.restart-conflict-box {
|
|
background: rgba(246, 97, 81, 0.08);
|
|
border: 1px solid rgba(246, 97, 81, 0.3);
|
|
border-radius: 12px;
|
|
padding: 12px 15px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.restart-conflict-title {
|
|
font-size: 0.88rem;
|
|
font-weight: 750;
|
|
color: #f8a39b;
|
|
}
|
|
|
|
.restart-conflict-desc {
|
|
margin-top: 4px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* ── NWC wallet manager ─────────────────────────────────────────── */
|
|
|
|
.nwc-tabs { display: block; }
|
|
|
|
.nwc-tabs-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.nwc-tabs-btns { display: flex; gap: 9px; flex-wrap: wrap; }
|
|
|
|
.nwc-tab-btn {
|
|
padding: 7px 16px;
|
|
border-radius: 99px;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-strong);
|
|
background: none;
|
|
color: var(--text-2);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
transition: 0.15s;
|
|
}
|
|
|
|
.nwc-tab-btn:hover { color: var(--text); }
|
|
|
|
.nwc-tab-btn.active {
|
|
background: var(--accent-dim);
|
|
border-color: rgba(66, 243, 154, 0.4);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.nwc-tab-panel { display: none; }
|
|
.nwc-tab-panel.active { display: block; }
|
|
|
|
.nwc-header-chips {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nwc-header-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-family: var(--mono);
|
|
font-size: 0.66rem;
|
|
font-weight: 600;
|
|
color: var(--text-2);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--border);
|
|
padding: 2px 9px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.nwc-tab-intro { margin-bottom: 14px; }
|
|
|
|
.nwc-tab-intro-title {
|
|
font-size: 0.98rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.nwc-tab-intro-desc {
|
|
margin-top: 5px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.nwc-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.nwc-toolbar-count {
|
|
font-size: 0.78rem;
|
|
color: var(--text-3);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.nwc-toolbar-actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 9px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nwc-wallet-list { display: flex; flex-direction: column; }
|
|
|
|
.nwc-wallet-card {
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.nwc-wallet-card + .nwc-wallet-card { margin-top: 13px; }
|
|
|
|
.nwc-wallet-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nwc-wallet-card-title { font-size: 0.95rem; font-weight: 750; }
|
|
|
|
.nwc-wallet-chips {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nwc-wallet-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 0.66rem;
|
|
font-weight: 750;
|
|
padding: 2px 9px;
|
|
border-radius: 99px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.nwc-wallet-chip--balance { color: var(--accent); border-color: rgba(66, 243, 154, 0.3); }
|
|
.nwc-wallet-chip--pending { color: var(--amber); border-color: rgba(233, 182, 74, 0.3); }
|
|
|
|
.nwc-wallet-address {
|
|
font-family: var(--mono);
|
|
font-size: 0.72rem;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.nwc-wallet-actions {
|
|
display: flex;
|
|
gap: 9px;
|
|
flex-wrap: wrap;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.nwc-wallet-actions-spacer { flex: 1; }
|
|
|
|
.nwc-wallet-danger-btn { color: #f2c45e !important; border-color: rgba(233, 182, 74, 0.35) !important; }
|
|
|
|
.nwc-header-chip--domain { font-family: var(--mono); }
|
|
|
|
.nwc-header-chip--warn {
|
|
color: var(--amber);
|
|
border-color: rgba(233, 182, 74, 0.3);
|
|
background: rgba(233, 182, 74, 0.08);
|
|
}
|
|
|
|
.nwc-lnurl-value {
|
|
font-family: var(--mono);
|
|
font-size: 0.74rem;
|
|
color: var(--text);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.nwc-toolbar-refresh,
|
|
.nwc-domain-required-btn { margin-top: 12px; }
|
|
|
|
.nwc-intro-header { margin-bottom: 14px; }
|
|
|
|
.nwc-benefit-content strong {
|
|
display: block;
|
|
font-size: 0.82rem;
|
|
color: var(--text);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.nwc-benefit-content p {
|
|
margin: 0;
|
|
font-size: 0.76rem;
|
|
color: var(--text-2);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* Generic numbered-step circle (NWC guides) */
|
|
.step-num {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.nwc-rtl-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* NWC Liquidity Guide (collapsible) */
|
|
.nwc-liquidity-details {
|
|
margin-top: 20px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.nwc-liquidity-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 13px 15px;
|
|
cursor: pointer;
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.nwc-liquidity-icon { font-size: 1.25rem; }
|
|
|
|
.nwc-liquidity-title { flex: 1; min-width: 0; }
|
|
|
|
.nwc-liquidity-subtitle {
|
|
display: block;
|
|
margin-top: 2px;
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.nwc-liquidity-chevron { transition: transform 0.2s; color: var(--text-3); }
|
|
|
|
.nwc-liquidity-details[open] .nwc-liquidity-chevron { transform: rotate(90deg); }
|
|
|
|
.nwc-liquidity-body {
|
|
font-size: 0.82rem;
|
|
line-height: 1.6;
|
|
color: var(--text-2);
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.nwc-empty-state,
|
|
.nwc-disabled-state { text-align: center; padding: 26px 10px; }
|
|
|
|
.nwc-empty-icon,
|
|
.nwc-disabled-icon { font-size: 1.8rem; margin-bottom: 8px; }
|
|
|
|
.nwc-empty-title,
|
|
.nwc-disabled-title { font-size: 1rem; font-weight: 750; }
|
|
|
|
.nwc-empty-desc,
|
|
.nwc-disabled-desc {
|
|
margin-top: 6px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
max-width: 420px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Connect guide (Zeus) — numbered steps with green circles */
|
|
.nwc-connect-guide {
|
|
margin-top: 17px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.nwc-connect-guide-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.92rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.nwc-connect-guide-intro {
|
|
margin-top: 7px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.62;
|
|
}
|
|
|
|
.nwc-connect-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.nwc-connect-step {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
font-size: 0.82rem;
|
|
color: var(--text-2);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.nwc-connect-step strong { color: var(--text); }
|
|
|
|
.nwc-step-num {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.nwc-connect-note {
|
|
margin-top: 13px;
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
background: rgba(233, 182, 74, 0.06);
|
|
border: 1px solid rgba(233, 182, 74, 0.28);
|
|
border-radius: 12px;
|
|
padding: 10px 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.nwc-secret-warning {
|
|
margin-top: 14px;
|
|
font-size: 0.78rem;
|
|
color: var(--amber);
|
|
background: rgba(233, 182, 74, 0.07);
|
|
border: 1px solid rgba(233, 182, 74, 0.3);
|
|
border-radius: 12px;
|
|
padding: 10px 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* NWC benefits / liquidity education cards */
|
|
.nwc-benefits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.nwc-benefit-item {
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.nwc-benefit-icon { font-size: 1.1rem; margin-bottom: 6px; }
|
|
|
|
.nwc-liquidity-guide-card {
|
|
margin-top: 14px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.nwc-liquidity-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.nwc-liquidity-step {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
font-size: 0.82rem;
|
|
color: var(--text-2);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.nwc-liquidity-step strong { color: var(--text); }
|
|
|
|
.nwc-liquidity-step-desc { margin-top: 2px; font-size: 0.77rem; color: var(--text-3); }
|
|
|
|
.nwc-liquidity-action { margin-top: 12px; }
|
|
|
|
.nwc-liquidity-analogy {
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.nwc-share-actions {
|
|
display: flex;
|
|
gap: 9px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.nwc-share-formats-hint {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.nwc-domain-required {
|
|
text-align: center;
|
|
padding: 22px 10px;
|
|
}
|
|
|
|
.nwc-domain-required-body p {
|
|
font-size: 0.82rem;
|
|
color: var(--text-2);
|
|
line-height: 1.6;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* ── Reboot / security-reset fullscreen overlays ────────────────── */
|
|
|
|
.reboot-overlay,
|
|
.security-reset-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 300;
|
|
background: radial-gradient(1000px 640px at 50% 18%, #17211c, #0b100d 72%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 26px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.4s, visibility 0.4s;
|
|
}
|
|
|
|
.reboot-overlay.visible,
|
|
.security-reset-overlay.visible { opacity: 1; visibility: visible; }
|
|
|
|
.reboot-card {
|
|
text-align: center;
|
|
max-width: 470px;
|
|
background: var(--elevated);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-dialog);
|
|
box-shadow: var(--shadow-pop);
|
|
padding: 38px 36px;
|
|
}
|
|
|
|
.reboot-icon {
|
|
width: 68px;
|
|
height: 68px;
|
|
margin: 0 auto 24px;
|
|
border-radius: 50%;
|
|
border: 4px solid rgba(66, 243, 154, 0.14);
|
|
border-top-color: var(--accent);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.reboot-title {
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.reboot-message {
|
|
color: var(--text-2);
|
|
font-size: 0.9rem;
|
|
line-height: 1.7;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.reboot-dots {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.reboot-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
animation: reboot-dot-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
.reboot-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.reboot-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes reboot-dot-pulse {
|
|
0%, 100% { opacity: 0.25; transform: scale(0.85); }
|
|
50% { opacity: 1; transform: scale(1.1); }
|
|
}
|
|
|
|
.reboot-submessage {
|
|
margin-top: 20px;
|
|
font-family: var(--mono);
|
|
font-size: 0.74rem;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.reboot-error-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
/* ── Systems Operational modal (dashboard.js) ───────────────────── */
|
|
|
|
.sysmodal-card {
|
|
margin-top: 14px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 16px;
|
|
background: rgba(0, 0, 0, 0.16);
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.sysmodal-card:first-child { margin-top: 0; }
|
|
|
|
.sysmodal-card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.92rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.sysmodal-card-title svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: var(--text-2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sysstep {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
margin-top: 11px;
|
|
}
|
|
|
|
.sysnum {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background: var(--accent-dim);
|
|
color: var(--accent);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.sysstep-x { flex: 1; min-width: 0; }
|
|
|
|
.sysstep-t {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.sysstep-sub {
|
|
font-weight: 400;
|
|
color: var(--text-3);
|
|
font-size: 0.77rem;
|
|
}
|
|
|
|
.sysval {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 7px;
|
|
min-width: 0;
|
|
background: var(--inset);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.sysval-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: var(--mono);
|
|
font-size: 0.76rem;
|
|
color: var(--text);
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sysnote {
|
|
margin-top: 13px;
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 12px;
|
|
padding: 10px 13px;
|
|
background: rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.sysnote-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.sysnote-title svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
color: var(--text-2);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sysnote-desc {
|
|
font-size: 0.8rem;
|
|
color: var(--text-2);
|
|
line-height: 1.62;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sysfineprint {
|
|
font-size: 0.72rem;
|
|
color: var(--text-3);
|
|
margin-top: 10px;
|
|
line-height: 1.5;
|
|
}
|