naturallaw777
4476a5e0e2
Loading indicator: - Branded boot splash (Hub logo inside an accent spinner ring, "Starting The Hub") covers the shell while the first services data loads, then fades out once the welcome dashboard has rendered; never blocks longer than 25s and reassures the user after 8s (message about post-reboot delays) - Fire the network and update checks before the first services render so the dashboard cards are current at first paint - Sidebar Update button now adopts the last known update state when built (order-independent), and the welcome dashboard re-renders when the update state changes Icons: - New monochrome g-pulse glyph (activity line) for Systems Operational: welcome card, dialog header, and System Status section — the shield no longer doubles as Security - Tech Support / Security dialog header gets a standard chip; Security shows the shield chip with a plain "Security" title (no emoji), and the shared dialog title now resets correctly when reopening Tech Support after Security
637 lines
13 KiB
CSS
637 lines
13 KiB
CSS
/* ── App shell: sidebar + main column ───────────────────────────── */
|
|
|
|
.app {
|
|
display: flex;
|
|
height: 100vh;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 26px 30px 70px;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ── Sidebar ────────────────────────────────────────────────────── */
|
|
|
|
.sidebar {
|
|
width: 250px;
|
|
flex-shrink: 0;
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20px 14px 14px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 2px 8px 20px;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 42px;
|
|
height: 42px;
|
|
flex-shrink: 0;
|
|
filter: drop-shadow(0 4px 14px rgba(28, 196, 120, 0.25));
|
|
}
|
|
|
|
.brand-text { display: flex; flex-direction: column; min-width: 0; }
|
|
|
|
.brand-title {
|
|
font-size: 1.02rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.brand-title em { font-style: normal; color: var(--accent); }
|
|
|
|
.brand-sub {
|
|
font-size: 0.7rem;
|
|
color: var(--text-3);
|
|
font-family: var(--mono);
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.nav-label {
|
|
font-size: 0.66rem;
|
|
font-weight: 750;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--text-3);
|
|
padding: 14px 10px 7px;
|
|
}
|
|
|
|
/* Category nav (dashboard.js) */
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--text-2);
|
|
font-size: 0.87rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
|
|
|
|
.nav-item:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: var(--text);
|
|
box-shadow: inset 2.5px 0 0 var(--accent);
|
|
}
|
|
|
|
.nav-text {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.nav-count {
|
|
margin-left: auto;
|
|
font-size: 0.67rem;
|
|
font-weight: 750;
|
|
flex-shrink: 0;
|
|
color: var(--text-3);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 2px 8px;
|
|
border-radius: 99px;
|
|
}
|
|
|
|
.nav-item.active .nav-count {
|
|
background: rgba(255, 255, 255, 0.10);
|
|
color: var(--text-2);
|
|
}
|
|
|
|
/* System items (tiles.js renders these as .sidebar-support-btn) */
|
|
.sidebar-support-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--text-2);
|
|
font-size: 0.87rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.sidebar-support-btn:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--text);
|
|
}
|
|
|
|
.sidebar-support-btn + .sidebar-support-btn {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sidebar-support-icon {
|
|
font-size: 1rem;
|
|
width: 17px;
|
|
height: 17px;
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-support-icon svg { width: 17px; height: 17px; }
|
|
|
|
.sidebar-support-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sidebar-support-title {
|
|
font-size: 0.87rem;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sidebar-support-hint {
|
|
font-size: 0.68rem;
|
|
font-weight: 650;
|
|
color: var(--text-3);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 14px 0 0;
|
|
}
|
|
|
|
.sidebar-spacer { flex: 1; min-height: 18px; }
|
|
|
|
/* ── Welcome dashboard (default view) ───────────────────────────── */
|
|
|
|
.welcome {
|
|
position: relative;
|
|
/* Full-bleed: cancel .content's padding so the glow reaches
|
|
every edge of the panel (sidebar border, topbar, viewport). */
|
|
margin: -26px -30px -70px;
|
|
padding: 70px 38px 70px;
|
|
overflow: hidden;
|
|
min-height: calc(100% + 96px);
|
|
}
|
|
|
|
/* Soft drifting glow — calm, GPU-cheap (transforms only) */
|
|
.welcome-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
will-change: transform;
|
|
}
|
|
|
|
.orb-a {
|
|
width: 560px; height: 560px;
|
|
left: -140px; top: -180px;
|
|
background: radial-gradient(circle, rgba(62, 207, 142, 0.10), transparent 70%);
|
|
animation: orb-drift-a 26s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.orb-b {
|
|
width: 680px; height: 680px;
|
|
right: -200px; top: 20%;
|
|
background: radial-gradient(circle, rgba(120, 174, 237, 0.07), transparent 70%);
|
|
animation: orb-drift-b 34s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.orb-c {
|
|
width: 460px; height: 460px;
|
|
left: 34%; bottom: -200px;
|
|
background: radial-gradient(circle, rgba(66, 243, 154, 0.06), transparent 70%);
|
|
animation: orb-drift-c 42s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes orb-drift-a { to { transform: translate(70px, 50px) scale(1.14); } }
|
|
@keyframes orb-drift-b { to { transform: translate(-60px, -70px) scale(1.10); } }
|
|
@keyframes orb-drift-c { to { transform: translate(50px, -40px) scale(1.18); } }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.orb { animation: none; }
|
|
.welcome-inner { animation: none; }
|
|
}
|
|
|
|
/* ── Boot splash ────────────────────────────────────────────────── */
|
|
/* Covers the shell while the first services/config data loads; the
|
|
inline script in index.html lifts it (window.__liftAppSplash). */
|
|
#app-splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2000;
|
|
background: var(--bg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.45s ease;
|
|
}
|
|
|
|
#app-splash.done { opacity: 0; pointer-events: none; }
|
|
|
|
.splash-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 24px;
|
|
}
|
|
|
|
.splash-ring {
|
|
position: relative;
|
|
width: 96px;
|
|
height: 96px;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.splash-ring img { width: 60px; height: 60px; opacity: 0.95; }
|
|
|
|
.splash-ring-arc {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
border: 3px solid rgba(255, 255, 255, 0.10);
|
|
border-top-color: var(--accent);
|
|
animation: splash-spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes splash-spin { to { transform: rotate(360deg); } }
|
|
|
|
.splash-title {
|
|
font-size: 1.02rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
}
|
|
|
|
.splash-sub {
|
|
font-size: 0.84rem;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.splash-ring-arc { animation-duration: 2.5s; }
|
|
}
|
|
|
|
.welcome-inner {
|
|
position: relative;
|
|
max-width: 1040px;
|
|
margin: 0 auto;
|
|
animation: welcome-in 0.5s ease both;
|
|
}
|
|
|
|
@keyframes welcome-in {
|
|
from { opacity: 0; transform: translateY(14px); }
|
|
}
|
|
|
|
.welcome-greeting {
|
|
font-size: 0.98rem;
|
|
font-weight: 650;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.welcome-title {
|
|
margin-top: 6px;
|
|
font-size: clamp(1.7rem, 2.8vw, 2.25rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.18;
|
|
}
|
|
|
|
.welcome-title em { font-style: normal; color: var(--accent); }
|
|
|
|
.welcome-meta {
|
|
margin-top: 12px;
|
|
font-size: 0.8rem;
|
|
color: var(--text-3);
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.welcome-meta-sep { margin: 0 8px; opacity: 0.6; }
|
|
|
|
.welcome-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
/* wrappers whose children become grid items */
|
|
.welcome-dyn { display: contents; }
|
|
|
|
.w-network .net-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin-top: 6px;
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
.w-network .net-k {
|
|
font-size: 0.6rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
color: var(--text-3);
|
|
width: 30px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.w-network .ip-value {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.w-network .sub { margin-top: 8px; }
|
|
|
|
.welcome-browse {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.widget {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 20px;
|
|
padding: 17px 19px;
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: center;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), var(--shadow-card);
|
|
transition: border-color 0.18s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.widget:hover { border-color: var(--border-strong); }
|
|
|
|
.widget.clickable { cursor: pointer; }
|
|
.widget.clickable:focus-visible {
|
|
outline: 2px solid rgba(66, 243, 154, 0.45);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.widget-chip {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 14px;
|
|
flex-shrink: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.widget-chip svg { width: 22px; height: 22px; }
|
|
.widget-chip img { width: 46px; height: 46px; display: block; object-fit: contain; }
|
|
|
|
.widget-chip.chip-green {
|
|
background: linear-gradient(160deg, #2f9f6b, #17683f);
|
|
}
|
|
|
|
.widget-chip.chip-btc {
|
|
background: linear-gradient(160deg, #f7931a, #b96a0a);
|
|
}
|
|
|
|
.widget-chip.chip-amber {
|
|
background: linear-gradient(160deg, #b98426, #8a5f16);
|
|
}
|
|
|
|
.widget-chip.chip-sovran {
|
|
background: linear-gradient(160deg, #42f39a, #1aa45d);
|
|
}
|
|
|
|
.widget-chip.chip-neutral {
|
|
background: linear-gradient(160deg, #2e333a, #23272c);
|
|
}
|
|
|
|
.w-body { min-width: 0; }
|
|
|
|
.widget h3 {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.005em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.widget .sub {
|
|
margin-top: 4px;
|
|
font-size: 0.78rem;
|
|
color: var(--text-2);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.widget .sub b { color: var(--text); font-weight: 650; }
|
|
.widget .sub .good { color: var(--accent); font-weight: 650; }
|
|
.widget .sub .warn { color: var(--amber); font-weight: 650; }
|
|
|
|
.w-bar {
|
|
height: 7px;
|
|
border-radius: 99px;
|
|
background: rgba(255, 255, 255, 0.07);
|
|
overflow: hidden;
|
|
margin: 8px 0 7px;
|
|
}
|
|
|
|
.w-bar-fill {
|
|
height: 100%;
|
|
border-radius: 99px;
|
|
background: linear-gradient(90deg, #42f39a, #1aa45d);
|
|
transition: width 0.6s cubic-bezier(0.3, 0.7, 0.3, 1);
|
|
}
|
|
|
|
.w-chev {
|
|
margin-left: auto;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--text-3);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.w-chev svg { width: 15px; height: 15px; }
|
|
.widget.clickable:hover .w-chev {
|
|
color: var(--text-2);
|
|
background: rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
/* ── Tiles area ─────────────────────────────────────────────────── */
|
|
|
|
#tiles-area {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding: 72px 24px;
|
|
color: var(--text-3);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dashboard-loading-spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
border: 2.5px solid rgba(255, 255, 255, 0.12);
|
|
border-top-color: var(--accent);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
|
|
/* ── Category sections ──────────────────────────────────────────── */
|
|
|
|
.category-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
font-size: 0.72rem;
|
|
font-weight: 750;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.section-divider {
|
|
border: none;
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--border), transparent);
|
|
margin: 0;
|
|
}
|
|
|
|
.tiles-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
/* ── Empty state ────────────────────────────────────────────────── */
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 64px 24px;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: 1rem;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ── Upgrade modal (kept from previous layout) ──────────────────── */
|
|
|
|
.upgrade-dialog {
|
|
max-width: 480px;
|
|
}
|
|
|
|
.upgrade-info-box {
|
|
background: rgba(0, 0, 0, 0.16);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: 16px;
|
|
padding: 14px 16px;
|
|
margin: 14px 0;
|
|
}
|
|
|
|
.upgrade-info-title {
|
|
font-size: 0.88rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.upgrade-info-list {
|
|
padding-left: 20px;
|
|
font-size: 0.85rem;
|
|
color: var(--text-2);
|
|
line-height: 1.7;
|
|
margin: 0;
|
|
}
|
|
|
|
.upgrade-info-list a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.upgrade-rebuild-note {
|
|
font-style: italic;
|
|
color: var(--text-3);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
/* ── First-login security banner (inside .content) ──────────────── */
|
|
|
|
.security-first-login-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: rgba(233, 182, 74, 0.08);
|
|
border: 1px solid rgba(233, 182, 74, 0.30);
|
|
border-radius: 16px;
|
|
padding: 12px 16px;
|
|
color: var(--text-2);
|
|
font-size: 0.85rem;
|
|
margin-bottom: 24px;
|
|
}
|