Add welcome dashboard as default view
Replace the All Services grid as the landing view with a Nextcloud-style welcome dashboard: - Greeting (time-of-day), "Welcome to Your Sovereign Digital & Financial Life" headline, version + role meta line - Status cards: Systems Operational, Network (LAN/WAN/hostname), Bitcoin sync progress with ETA, and available-updates card - Calm drifting orb background animation (transform-only, disabled under prefers-reduced-motion) - Services grid stays mounted but hidden until the user browses (Browse button, search, or a nav category); Dashboard nav item returns to the welcome view - Move role badge and autolaunch preference out of the sidebar; autolaunch toggle now lives in the Systems Operational modal - Remove LAN/WAN chip from the topbar; IPs live on the Network card
This commit is contained in:
@@ -56,49 +56,6 @@
|
||||
|
||||
.search-box input::placeholder { color: var(--text-3); }
|
||||
|
||||
/* ── Network chip — LAN + WAN always on one line ────────────────── */
|
||||
|
||||
.net-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 17px;
|
||||
border-radius: 99px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.73rem;
|
||||
color: var(--text-3);
|
||||
white-space: nowrap;
|
||||
order: 4;
|
||||
}
|
||||
|
||||
.net-chip svg { width: 15px; height: 15px; color: var(--text-3); flex-shrink: 0; }
|
||||
.net-chip .int-wrap, .net-chip .ext-wrap { display: inline-flex; align-items: center; gap: 7px; }
|
||||
|
||||
.net-chip .ip-label {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-3);
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.net-chip .ip-value {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.net-separator {
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
background: var(--border-strong);
|
||||
margin: 0 3px;
|
||||
flex-shrink: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.top-actions {
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
@@ -106,17 +63,6 @@
|
||||
order: 5;
|
||||
}
|
||||
|
||||
/* Below 1160px the chip wraps to its own full-width topbar row —
|
||||
it never stacks LAN over WAN and never hides the external IP. */
|
||||
@media (max-width: 1160px) {
|
||||
.topbar { flex-wrap: wrap; row-gap: 10px; }
|
||||
.net-chip {
|
||||
order: 6;
|
||||
flex-basis: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Legacy badges (still used inside dialogs) ──────────────────── */
|
||||
|
||||
.role-badge {
|
||||
|
||||
@@ -204,30 +204,131 @@
|
||||
|
||||
.sidebar-spacer { flex: 1; min-height: 18px; }
|
||||
|
||||
.sidebar-footer {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 14px;
|
||||
/* ── Welcome dashboard (default view) ───────────────────────────── */
|
||||
|
||||
.welcome {
|
||||
position: relative;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
padding: 44px 8px 24px;
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.host-note {
|
||||
text-align: center;
|
||||
font-size: 0.66rem;
|
||||
/* 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; }
|
||||
}
|
||||
|
||||
.welcome-inner {
|
||||
position: relative;
|
||||
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);
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
/* ── Widgets row (dashboard.js) ─────────────────────────────────── */
|
||||
.welcome-meta-sep { margin: 0 8px; opacity: 0.6; }
|
||||
|
||||
.widgets {
|
||||
.welcome-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1.45fr;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.widgets { grid-template-columns: 1fr; }
|
||||
/* 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 {
|
||||
@@ -275,6 +376,10 @@
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -1505,6 +1505,15 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.sysprefs {
|
||||
padding: 0 24px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.sysprefs .autolaunch-section .feature-card { padding: 2px 0 0; }
|
||||
|
||||
.sysfineprint {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-3);
|
||||
|
||||
Reference in New Issue
Block a user