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.
880 lines
17 KiB
CSS
880 lines
17 KiB
CSS
/* ── Onboarding wizard ──────────────────────────────────────────── */
|
|
|
|
.onboarding-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(ellipse at top, rgba(62, 207, 142, 0.04) 0%, transparent 50%),
|
|
var(--bg-color);
|
|
padding: 24px 16px 48px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.onboarding-shell {
|
|
width: 100%;
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
/* Progress bar */
|
|
|
|
.onboarding-progress-bar {
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: var(--card-color);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.onboarding-progress-fill {
|
|
height: 100%;
|
|
background-color: var(--accent-color);
|
|
border-radius: 2px;
|
|
transition: width 0.4s ease;
|
|
width: 20%;
|
|
}
|
|
|
|
/* Step indicator dots */
|
|
|
|
.onboarding-steps-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.onboarding-step-dot {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background-color: var(--card-color);
|
|
border: 2px solid var(--border-color);
|
|
color: var(--text-dim);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
|
|
}
|
|
|
|
.onboarding-step-dot.active {
|
|
background-color: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
color: #04220f;
|
|
}
|
|
|
|
.onboarding-step-dot.completed {
|
|
background-color: var(--green);
|
|
border-color: var(--green);
|
|
color: #04220f;
|
|
}
|
|
|
|
.onboarding-step-connector {
|
|
flex: 1;
|
|
height: 2px;
|
|
background-color: var(--border-color);
|
|
min-width: 24px;
|
|
max-width: 80px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
/* Panel wrapper and panels */
|
|
|
|
.onboarding-panel-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.onboarding-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
animation: panel-fade-in 0.25s ease-out;
|
|
}
|
|
|
|
@keyframes panel-fade-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Hero / welcome section */
|
|
|
|
.onboarding-hero {
|
|
text-align: center;
|
|
padding: 16px 0 4px;
|
|
}
|
|
|
|
.onboarding-logo {
|
|
margin-bottom: 16px;
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.onboarding-logo-img {
|
|
height: 90px;
|
|
width: auto;
|
|
}
|
|
|
|
.onboarding-title {
|
|
font-size: 1.6rem;
|
|
font-weight: 800;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.onboarding-subtitle {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Cards */
|
|
|
|
.onboarding-card {
|
|
background-color: rgba(18, 24, 20, 0.65);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
border-radius: var(--radius-card);
|
|
padding: 24px 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Body text */
|
|
|
|
.onboarding-body-text {
|
|
font-size: 0.92rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.onboarding-body-text--dim {
|
|
color: var(--text-dim);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Role row */
|
|
|
|
.onboarding-role-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
background-color: var(--card-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.onboarding-role-label {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.onboarding-role-badge {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
color: var(--accent-color);
|
|
background-color: rgba(62, 207, 142, 0.10);
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(62, 207, 142, 0.25);
|
|
}
|
|
|
|
/* Step header */
|
|
|
|
.onboarding-step-header {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.onboarding-step-icon {
|
|
font-size: 2rem;
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.onboarding-step-title {
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.onboarding-step-desc {
|
|
font-size: 0.88rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Footer / navigation */
|
|
|
|
.onboarding-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-top: 24px;
|
|
padding-bottom: 24px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.onboarding-btn-next {
|
|
/* inherits from .btn.btn-primary */
|
|
}
|
|
|
|
.onboarding-btn-back {
|
|
/* inherits from .btn.btn-close-modal */
|
|
}
|
|
|
|
/* Domain configuration (Step 2) */
|
|
|
|
.onboarding-domain-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.onboarding-domain-group:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.onboarding-domain-group--email {
|
|
/* email-specific variant */
|
|
}
|
|
|
|
.onboarding-domain-label {
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.onboarding-domain-label--sub {
|
|
font-size: 0.78rem;
|
|
font-weight: 400;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.onboarding-domain-input,
|
|
.domain-field-input {
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-btn);
|
|
background-color: var(--card-color);
|
|
color: var(--text-primary);
|
|
font-size: 0.88rem;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.onboarding-domain-input:focus,
|
|
.domain-field-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.onboarding-hint {
|
|
font-size: 0.78rem;
|
|
color: var(--text-dim);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.onboarding-hint--inline {
|
|
display: inline;
|
|
}
|
|
|
|
/* Port forwarding (Step 3) */
|
|
|
|
.onboarding-port-note {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.onboarding-port-ip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
background-color: var(--card-color);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.onboarding-port-ip-label {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.onboarding-port-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.onboarding-port-section-title {
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.onboarding-port-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.onboarding-port-table thead th {
|
|
text-align: left;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 6px 8px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.onboarding-port-table td {
|
|
padding: 8px 8px;
|
|
border-bottom: 1px solid rgba(30, 45, 39, 0.5);
|
|
color: var(--text-secondary);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.onboarding-port-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.onboarding-port-totals {
|
|
padding: 10px 14px;
|
|
background-color: var(--card-color);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.onboarding-port-warn {
|
|
padding: 10px 14px;
|
|
background-color: rgba(233, 182, 74, 0.1);
|
|
border: 1px solid rgba(233, 182, 74, 0.35);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
color: var(--yellow);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.onboarding-port-details {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.onboarding-port-details-summary {
|
|
cursor: pointer;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.onboarding-port-details-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.onboarding-port-details-summary::before {
|
|
content: '▶ ';
|
|
font-size: 0.65em;
|
|
}
|
|
|
|
.onboarding-port-details[open] .onboarding-port-details-summary::before {
|
|
content: '▼ ';
|
|
}
|
|
|
|
/* Credentials (Step 4) */
|
|
|
|
.onboarding-creds-notice {
|
|
padding: 12px 16px;
|
|
background-color: rgba(62, 207, 142, 0.08);
|
|
border: 1px solid rgba(62, 207, 142, 0.20);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.onboarding-creds-category {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.onboarding-creds-category:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.onboarding-creds-category-title {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.onboarding-creds-service {
|
|
background-color: var(--card-color);
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.onboarding-creds-service-name {
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.onboarding-cred-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.onboarding-cred-label {
|
|
color: var(--text-dim);
|
|
font-size: 0.78rem;
|
|
min-width: 80px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.onboarding-cred-value {
|
|
color: var(--text-primary);
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
font-size: 0.82rem;
|
|
word-break: break-all;
|
|
flex: 1;
|
|
}
|
|
|
|
.onboarding-cred-secret {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
}
|
|
|
|
.onboarding-cred-hidden {
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
font-size: 0.82rem;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.onboarding-cred-real {
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
font-size: 0.82rem;
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
display: none;
|
|
}
|
|
|
|
.onboarding-cred-reveal-btn {
|
|
font-size: 0.72rem;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
background-color: rgba(62, 207, 142, 0.08);
|
|
border: 1px solid rgba(62, 207, 142, 0.20);
|
|
color: var(--accent-color);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.onboarding-cred-reveal-btn:hover {
|
|
background-color: rgba(62, 207, 142, 0.15);
|
|
}
|
|
|
|
/* Completion checklist (Step 5) */
|
|
|
|
.onboarding-checklist {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.onboarding-checklist li {
|
|
font-size: 0.92rem;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Status & feedback */
|
|
|
|
.onboarding-loading {
|
|
font-size: 0.88rem;
|
|
color: var(--text-dim);
|
|
text-align: center;
|
|
padding: 16px 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.onboarding-error {
|
|
font-size: 0.85rem;
|
|
color: var(--red);
|
|
padding: 10px 14px;
|
|
background-color: rgba(224, 27, 36, 0.1);
|
|
border: 1px solid rgba(224, 27, 36, 0.3);
|
|
border-radius: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.onboarding-save-status {
|
|
font-size: 0.85rem;
|
|
min-height: 1.2em;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.onboarding-save-status--ok {
|
|
color: var(--green);
|
|
}
|
|
|
|
.onboarding-save-status--error {
|
|
color: var(--red);
|
|
}
|
|
|
|
.onboarding-save-status--info {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ── Timezone / Locale step (Step 2) ────────────────────────────── */
|
|
|
|
.onboarding-tz-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.onboarding-tz-search {
|
|
width: 100%;
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-btn);
|
|
background-color: var(--card-color);
|
|
color: var(--text-primary);
|
|
font-size: 0.88rem;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.onboarding-tz-search:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.onboarding-tz-select {
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-btn);
|
|
background-color: var(--card-color);
|
|
color: var(--text-primary);
|
|
font-size: 0.88rem;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
transition: border-color 0.15s;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.onboarding-tz-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.onboarding-tz-select option {
|
|
padding: 4px 8px;
|
|
background-color: var(--card-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.onboarding-locale-select {
|
|
height: auto;
|
|
size: auto;
|
|
}
|
|
|
|
/* ── Password step (Step 3) ─────────────────────────────────────── */
|
|
|
|
.onboarding-password-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.onboarding-password-input-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.onboarding-password-input {
|
|
flex: 1;
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-btn);
|
|
background-color: var(--card-color);
|
|
color: var(--text-primary);
|
|
font-size: 0.88rem;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.onboarding-password-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.onboarding-password-toggle {
|
|
padding: 6px 10px;
|
|
background-color: var(--card-color);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-btn);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
transition: background-color 0.15s, border-color 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.onboarding-password-toggle:hover {
|
|
background-color: rgba(62, 207, 142, 0.10);
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.onboarding-password-hint {
|
|
font-size: 0.78rem;
|
|
color: var(--text-dim);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.onboarding-password-warning {
|
|
padding: 10px 14px;
|
|
background-color: rgba(233, 182, 74, 0.1);
|
|
border: 1px solid rgba(233, 182, 74, 0.35);
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
color: var(--yellow);
|
|
line-height: 1.5;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.onboarding-password-success {
|
|
padding: 12px 16px;
|
|
background-color: rgba(62, 207, 142, 0.10);
|
|
border: 1px solid rgba(62, 207, 142, 0.30);
|
|
border-radius: 8px;
|
|
font-size: 0.92rem;
|
|
color: var(--green);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.onboarding-password-optional {
|
|
margin-top: 12px;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.onboarding-password-optional > summary {
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--accent-color);
|
|
list-style: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.onboarding-password-optional > summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.onboarding-password-optional > summary::before {
|
|
content: '▶ ';
|
|
font-size: 0.65em;
|
|
}
|
|
|
|
.onboarding-password-optional[open] > summary::before {
|
|
content: '▼ ';
|
|
}
|
|
|
|
/* ── Reboot overlay ─────────────────────────────────────────────── */
|
|
|
|
.reboot-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(6, 8, 7, 0.7);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
z-index: 999;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.reboot-overlay.visible {
|
|
display: flex;
|
|
}
|
|
|
|
.reboot-card {
|
|
background-color: rgba(18, 24, 20, 0.8);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 20px;
|
|
padding: 48px 56px;
|
|
text-align: center;
|
|
max-width: 480px;
|
|
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
|
|
animation: reboot-fade-in 0.4s ease-out;
|
|
}
|
|
|
|
@keyframes reboot-fade-in {
|
|
from { opacity: 0; transform: scale(0.92) translateY(12px); }
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
|
|
.reboot-icon {
|
|
font-size: 3rem;
|
|
color: var(--accent-color);
|
|
margin-bottom: 16px;
|
|
animation: reboot-spin 2s linear infinite;
|
|
display: inline-block;
|
|
}
|
|
|
|
@keyframes reboot-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.reboot-title {
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.reboot-message {
|
|
font-size: 0.92rem;
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.reboot-dots {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.reboot-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--accent-color);
|
|
animation: reboot-bounce 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.reboot-dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.reboot-dot:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes reboot-bounce {
|
|
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
40% { opacity: 1; transform: scale(1.2); }
|
|
}
|
|
|
|
.reboot-submessage {
|
|
font-size: 0.82rem;
|
|
color: var(--text-dim);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Responsive ─────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
overflow: auto;
|
|
}
|
|
.main-content {
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
}
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 14px 12px;
|
|
}
|
|
#tiles-area {
|
|
height: auto;
|
|
overflow-y: visible;
|
|
padding: 16px 12px 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.header-bar {
|
|
padding: 10px 14px;
|
|
gap: 10px;
|
|
}
|
|
.header-bar .title {
|
|
font-size: 0.95rem;
|
|
}
|
|
.ip-bar {
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
padding: 8px 14px;
|
|
}
|
|
.tiles-grid {
|
|
justify-content: center;
|
|
}
|
|
.service-tile {
|
|
width: 140px;
|
|
min-height: 130px;
|
|
}
|
|
.reboot-card {
|
|
padding: 36px 28px;
|
|
margin: 0 16px;
|
|
}
|
|
.creds-dialog {
|
|
margin: 0 12px;
|
|
}
|
|
.creds-qr-img {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|