naturallaw777
bbf53d089a
Systems Operational on roles with no enabled domain services (a
fresh Desktop-only install, or everything turned off) rendered no
Router card but still showed a "Who uses these ports" note listing
services the machine does not have. Any role with no enabled domain
service now gets the calm "No router setup needed yet" card with
role-appropriate wording, and the who-uses note only appears when
a domain service is actually enabled.
Narrow viewports (phones, half-screen RDP) had no layout at all:
the sidebar and topbar forced ~900px of horizontal scroll on every
role. The sidebar now collapses to a 76px icon rail below 920px,
the topbar wraps its search onto a second row below 640px, and the
welcome column reflows to one card per row. Legacy pre-redesign
media rules in onboarding.css (which targeted the old DOM and set
.sidebar{width:100%}) are removed — they silently overrode the new
layout, and one shrank the Zeus QR to 200px; QR codes keep their
repo-original 240px at every width.
831 lines
17 KiB
CSS
831 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 ─────────────────────────────────────────────────── */
|
|
|
|
/* Legacy pre-redesign narrow-screen rules removed: they targeted the old
|
|
DOM (.main-content, .header-bar, .ip-bar) and their .sidebar /
|
|
#tiles-area / .service-tile / .creds-qr-img overrides fought the new
|
|
responsive layout in layout.css (sidebar icon rail, wrapping topbar).
|
|
Narrow-viewport behavior now lives in layout.css + header.css. */
|