diff --git a/controller/internal/setup/handlers.go b/controller/internal/setup/handlers.go index 91cbfff..099e995 100644 --- a/controller/internal/setup/handlers.go +++ b/controller/internal/setup/handlers.go @@ -561,40 +561,40 @@ func isError(err, target error) bool { return err != nil && strings.Contains(err.Error(), target.Error()) } -// Minimal CSS for when the main stylesheet can't be loaded +// Minimal CSS for when the main stylesheet can't be loaded (v2 tokens) const minimalCSS = ` -:root { --bg-primary: #0d1117; --bg-card: #1c2128; --text-primary: #e6edf3; --text-secondary: #8b949e; --accent-blue: #0088cc; --border: #30363d; --green: #238636; --red: #da3633; } +:root { --bg-primary: #0A1220; --bg-card: #0F1B2E; --text-primary: #EDF2F9; --text-secondary: #94A6BF; --accent-blue: #0083D8; --border: #22344F; --green: #0083D8; --red: #E5534B; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg-primary); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .setup-container { max-width: 700px; margin: 0 auto; padding: 2rem 1.5rem; } .setup-header { text-align: center; margin-bottom: 2rem; } .setup-header img { width: 120px; margin-bottom: 1rem; } .setup-header h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } -.setup-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; cursor: pointer; transition: border-color 0.2s; } +.setup-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; padding: 1.5rem; margin-bottom: 1rem; cursor: pointer; transition: border-color 0.2s; } .setup-card:hover { border-color: var(--accent-blue); } .setup-card h3 { margin-bottom: 0.5rem; } .setup-card p { color: var(--text-secondary); font-size: 0.9rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; color: var(--text-secondary); } -.form-control { width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 0.9rem; } -.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.5rem; border-radius: 6px; border: none; font-size: 0.9rem; font-weight: 500; cursor: pointer; text-decoration: none; } +.form-control { width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 2px; color: var(--text-primary); font-size: 0.9rem; } +.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.5rem; border-radius: 2px; border: none; font-size: 0.9rem; font-weight: 500; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--green); color: #fff; } -.btn-primary:hover { background: #2ea043; } +.btn-primary:hover { background: #2EA8F5; } .btn-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); } -.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; } -.alert-error { background: rgba(218,54,51,0.15); color: #f85149; border: 1px solid rgba(218,54,51,0.3); } -.alert-info { background: rgba(0,136,204,0.15); color: #58a6ff; border: 1px solid rgba(0,136,204,0.3); } -.info-box { background: rgba(0,136,204,0.1); border: 1px solid rgba(0,136,204,0.2); border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-secondary); } +.alert { padding: 0.75rem 1rem; border-radius: 2px; margin-bottom: 1rem; font-size: 0.9rem; } +.alert-error { background: rgba(229,83,75,.12); color: #E5534B; border: 1px solid rgba(229,83,75,.3); } +.alert-info { background: rgba(0,131,216,.13); color: #2EA8F5; border: 1px solid rgba(0,131,216,.3); } +.info-box { background: rgba(0,131,216,.13); border: 1px solid rgba(0,131,216,.2); border-radius: 2px; padding: 0.75rem 1rem; margin-bottom: 1.5rem; font-size: 0.85rem; color: var(--text-secondary); } table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 0.5rem 0.75rem; color: var(--text-secondary); font-size: 0.85rem; border-bottom: 1px solid var(--border); } td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; } .badge-ok { background: rgba(63,185,80,0.15); color: var(--green); } -.badge-error { background: rgba(218,54,51,0.15); color: var(--red); } +.badge-error { background: rgba(229,83,75,.12); color: var(--red); } .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .section { margin-bottom: 1.5rem; } -.section-header { cursor: pointer; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; } +.section-header { cursor: pointer; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 2px; display: flex; justify-content: space-between; align-items: center; } .section-body { padding: 1rem; border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; } .step-list { list-style: none; } .step-list li { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; } diff --git a/controller/internal/web/funcmap.go b/controller/internal/web/funcmap.go index a8e2807..a1735c0 100644 --- a/controller/internal/web/funcmap.go +++ b/controller/internal/web/funcmap.go @@ -49,20 +49,29 @@ func (s *Server) templateFuncMap() template.FuncMap { loc := getTimezone() return template.FuncMap{ + // stateColor maps container states to design-system-v2 semantic tokens, + // consumed as class suffixes (tag-run, stack-state-run, state-text-run...). + // Exception-color principle: a customer-stopped app is neutral, NOT red — + // genuine failures surface via unhealthy state + the alert system. "stateColor": func(state stacks.ContainerState) string { switch state { case stacks.StateRunning: - return "green" + return "run" case stacks.StateStarting, stacks.StateDeploying: - return "orange" + return "progress" case stacks.StateUnhealthy: - return "yellow" - case stacks.StateStopped, stacks.StateExited: - return "red" + return "warn" case stacks.StateRestarting: - return "yellow" + // a restart loop is a problem, not progress + return "warn" + case stacks.StateStopped, stacks.StateExited: + return "neutral" + case stacks.StatePaused: + return "neutral" + case stacks.StateNotDeployed: + return "off" default: - return "gray" + return "off" } }, "stateLabel": func(state stacks.ContainerState) string { @@ -126,14 +135,15 @@ func (s *Server) templateFuncMap() template.FuncMap { "appPageURL": func(slug string) string { return s.cfg.AppPageURL(slug) }, + // usageColor: capacity meters are blue below 70%, amber 70–85, red ≥85 (v2). "usageColor": func(percent float64) string { if percent >= 85 { - return "red" + return "crit" } if percent >= 70 { - return "yellow" + return "warn" } - return "green" + return "nominal" }, "fmtMB": func(mb uint64) string { if mb >= 1024 { @@ -171,14 +181,15 @@ func (s *Server) templateFuncMap() template.FuncMap { } return result }, + // tempColor: thresholds unchanged; outputs remapped to v2 tokens. "tempColor": func(celsius float64) string { if celsius > 75 { - return "red" + return "crit" } if celsius >= 60 { - return "yellow" + return "warn" } - return "green" + return "nominal" }, "fmtTemp": func(celsius float64) string { return fmt.Sprintf("%.0f°C", celsius) diff --git a/controller/internal/web/funcmap_test.go b/controller/internal/web/funcmap_test.go new file mode 100644 index 0000000..df5181c --- /dev/null +++ b/controller/internal/web/funcmap_test.go @@ -0,0 +1,113 @@ +package web + +import ( + "testing" + + "gitea.dooplex.hu/admin/felhom-controller/internal/stacks" +) + +// TASK-D0 §8 truth tables. These are the semantic contract of the v2 re-skin: +// every class suffix the templates key on comes from these three functions. + +func TestStateColorTruthTable(t *testing.T) { + s := &Server{} + fm := s.templateFuncMap() + stateColor := fm["stateColor"].(func(stacks.ContainerState) string) + + cases := []struct { + state stacks.ContainerState + want string + }{ + {stacks.StateRunning, "run"}, + {stacks.StateStarting, "progress"}, + {stacks.StateDeploying, "progress"}, + {stacks.StateUnhealthy, "warn"}, + {stacks.StateRestarting, "warn"}, // a restart loop is a problem, not progress + {stacks.StateStopped, "neutral"}, // deliberately NOT red — customer-stopped is not an emergency + {stacks.StateExited, "neutral"}, + {stacks.StatePaused, "neutral"}, + {stacks.StateNotDeployed, "off"}, + {stacks.ContainerState("bogus"), "off"}, + } + for _, c := range cases { + if got := stateColor(c.state); got != c.want { + t.Errorf("stateColor(%q) = %q, want %q", c.state, got, c.want) + } + } +} + +func TestUsageColorTruthTable(t *testing.T) { + s := &Server{} + fm := s.templateFuncMap() + usageColor := fm["usageColor"].(func(float64) string) + + cases := []struct { + percent float64 + want string + }{ + {0, "nominal"}, + {69.9, "nominal"}, + {70, "warn"}, + {84.9, "warn"}, + {85, "crit"}, + {100, "crit"}, + } + for _, c := range cases { + if got := usageColor(c.percent); got != c.want { + t.Errorf("usageColor(%v) = %q, want %q", c.percent, got, c.want) + } + } +} + +func TestTempColorTruthTable(t *testing.T) { + s := &Server{} + fm := s.templateFuncMap() + tempColor := fm["tempColor"].(func(float64) string) + + // thresholds unchanged from v1: >75 crit, >=60 warn, else nominal + cases := []struct { + celsius float64 + want string + }{ + {40, "nominal"}, + {59.9, "nominal"}, + {60, "warn"}, + {75, "warn"}, + {75.1, "crit"}, + {90, "crit"}, + } + for _, c := range cases { + if got := tempColor(c.celsius); got != c.want { + t.Errorf("tempColor(%v) = %q, want %q", c.celsius, got, c.want) + } + } +} + +// TestStateLabelUnchanged guards the Hungarian copy against accidental edits +// during the re-skin — labels must stay byte-identical to pre-D0. +func TestStateLabelUnchanged(t *testing.T) { + s := &Server{} + fm := s.templateFuncMap() + stateLabel := fm["stateLabel"].(func(stacks.ContainerState) string) + + cases := []struct { + state stacks.ContainerState + want string + }{ + {stacks.StateRunning, "Fut"}, + {stacks.StateStarting, "Indulás..."}, + {stacks.StateDeploying, "Telepítés..."}, + {stacks.StateUnhealthy, "Nem egészséges"}, + {stacks.StateStopped, "Leállítva"}, + {stacks.StateExited, "Leállítva"}, + {stacks.StateRestarting, "Újraindítás..."}, + {stacks.StateNotDeployed, "Nincs telepítve"}, + {stacks.StatePaused, "Szüneteltetve"}, + {stacks.ContainerState("bogus"), "Ismeretlen"}, + } + for _, c := range cases { + if got := stateLabel(c.state); got != c.want { + t.Errorf("stateLabel(%q) = %q, want %q", c.state, got, c.want) + } + } +} diff --git a/controller/internal/web/templates/dashboard.html b/controller/internal/web/templates/dashboard.html index 5beed38..cd430cf 100644 --- a/controller/internal/web/templates/dashboard.html +++ b/controller/internal/web/templates/dashboard.html @@ -7,15 +7,15 @@
- +
{{.RunningCount}}
Futó alkalmazás
 - +
{{.StoppedCount}}
Leállítva
 - +
{{.TotalCount}}
Összes alkalmazás
 @@ -24,65 +24,66 @@ {{if .SystemInfo.TotalMemMB}}
-
+
Memória {{fmtMB .SystemInfo.UsedMemMB}} / {{fmtMB .SystemInfo.TotalMemMB}} ({{printf "%.0f" .SystemInfo.MemPercent}}%)
-
-
+
+
-
+
CPU {{printf "%.0f" .SystemInfo.CPUPercent}}%
-
-
+
+
Load: {{fmtLoad .SystemInfo.LoadAvg1}} / {{fmtLoad .SystemInfo.LoadAvg5}} / {{fmtLoad .SystemInfo.LoadAvg15}}
{{if .SystemInfo.TemperatureCelsius}}
- Hőmérséklet - - - {{fmtTemp .SystemInfo.TemperatureCelsius}} - + Hőmérséklet + {{fmtTemp .SystemInfo.TemperatureCelsius}}
{{end}}
-
+ {{$duc := usageColor .SystemInfo.DiskPercent}} +
Rendszer (/) {{fmtGB .SystemInfo.DiskUsedGB}} / {{fmtGB .SystemInfo.DiskTotalGB}} ({{printf "%.0f" .SystemInfo.DiskPercent}}%)
-
-
+
+
+ {{if eq $duc "warn"}}
Fogyóban a hely
{{else if eq $duc "crit"}}
Kritikusan kevés hely
{{end}}
{{range .StorageBars}} {{if .Disconnected}} -
+
{{.Label}} - Leválasztva + — Leválasztva
-
+
{{else}} -
+ {{$uc := usageColor .Percent}} +
{{.Label}} {{fmtGB .UsedGB}} / {{fmtGB .TotalGB}} ({{printf "%.0f" .Percent}}%)
-
-
+
+
+ {{if eq $uc "warn"}}
Fogyóban a hely
{{else if eq $uc "crit"}}
Kritikusan kevés hely
{{end}}
{{end}} {{end}} @@ -117,7 +118,7 @@ Utolsó mentés: {{if .BackupStatus.Success}} - {{.BackupStatus.LastRun.Format "2006-01-02 15:04"}} + {{.BackupStatus.LastRun.Format "2006-01-02 15:04"}} {{else}} Sikertelen {{end}} @@ -155,27 +156,27 @@
- {{stateLabel .State}} - {{if .Orphaned}}Elavult{{end}} - {{$ms := index $.MissingStorage .Name}}{{if $ms}}⚠ Hiányzó tárhely: {{$ms}}{{end}} - {{$nw := index $.NetworkWarnings .Name}}{{if $nw}}⚠ Hálózati tárhely nem elérhető: {{$nw}}{{end}} - {{if and .Deployed (routeUnpublished .State)}}⚠ URL nem elérhető{{end}} + {{stateLabel .State}} + {{if .Orphaned}}Elavult{{end}} + {{$ms := index $.MissingStorage .Name}}{{if $ms}}Hiányzó tárhely: {{$ms}}{{end}} + {{$nw := index $.NetworkWarnings .Name}}{{if $nw}}Hálózati tárhely nem elérhető: {{$nw}}{{end}} + {{if and .Deployed (routeUnpublished .State)}}URL nem elérhető{{end}} {{if .Protected}} - Védett + Védett {{if isOperational .State}} - + {{end}} {{else if not .Deployed}} Telepítés {{else}} {{if isOperational .State}} {{$subdomain := index $.Subdomains .Name}} - {{if $subdomain}}Megnyitás ↗{{end}} - - + {{if $subdomain}}Megnyitás {{end}} + + {{else}} - + {{if not .Orphaned}}{{end}} {{end}} Napló diff --git a/controller/internal/web/templates/layout.html b/controller/internal/web/templates/layout.html index 984e2bb..5e80847 100644 --- a/controller/internal/web/templates/layout.html +++ b/controller/internal/web/templates/layout.html @@ -21,14 +21,14 @@ {{.CustomerName}}
- ⚙ Beállítások + Beállítások
{{.Version}} {{if .AuthEnabled}}Kijelentkezés ↗{{end}} @@ -41,7 +41,7 @@ {{range .Alerts}} {{if and (not .Inline) (or (not .PageOnly) (pageMatch .PageOnly $.Page))}}
- {{if eq .Level "error"}}🔴{{else if eq .Level "warning"}}🟡{{else}}ℹ️{{end}} + {{if eq .Level "error"}}{{else if eq .Level "warning"}}{{else}}{{end}} {{.Message}} {{if .Link}}{{.LinkText}} →{{end}}
diff --git a/controller/internal/web/templates/stacks.html b/controller/internal/web/templates/stacks.html index 551b610..4f1c902 100644 --- a/controller/internal/web/templates/stacks.html +++ b/controller/internal/web/templates/stacks.html @@ -31,27 +31,27 @@ {{$subdomain}}.{{$.Domain}} ↗ {{if and .Deployed (routeUnpublished .State)}} - ⚠ URL nem elérhető – útvonal nincs publikálva + URL nem elérhető – útvonal nincs publikálva {{end}} {{end}}
- {{stateLabel .State}} - {{if .Orphaned}}Elavult{{end}} - {{$ms := index $.MissingStorage .Name}}{{if $ms}}⚠ Hiányzó tárhely: {{$ms}}{{end}} - {{$nw := index $.NetworkWarnings .Name}}{{if $nw}}⚠ Hálózati tárhely nem elérhető: {{$nw}}{{end}} + {{stateLabel .State}} + {{if .Orphaned}}Elavult{{end}} + {{$ms := index $.MissingStorage .Name}}{{if $ms}}Hiányzó tárhely: {{$ms}}{{end}} + {{$nw := index $.NetworkWarnings .Name}}{{if $nw}}Hálózati tárhely nem elérhető: {{$nw}}{{end}}
{{if .Meta.Description}}

{{.Meta.Description}}

{{end}} -
- {{if .Meta.Resources.MemRequest}}~{{.Meta.Resources.MemRequest}}{{end}} - {{if .Meta.Resources.PiCompatible}}Pi kompatibilis{{end}} - {{if .Meta.Resources.NeedsHDD}}HDD szükséges{{end}} - {{if .Meta.Resources.HungarianUI}}Magyar felület{{end}} - {{if and .Deployed (index $.StorageLabels .Name)}}💾 {{index $.StorageLabels .Name}}{{end}} +
+ {{if .Meta.Resources.MemRequest}}~{{.Meta.Resources.MemRequest}}{{end}} + {{if .Meta.Resources.PiCompatible}}Pi kompatibilis{{end}} + {{if .Meta.Resources.NeedsHDD}}HDD szükséges{{end}} + {{if .Meta.Resources.HungarianUI}}Magyar felület{{end}} + {{if and .Deployed (index $.StorageLabels .Name)}}{{index $.StorageLabels .Name}}{{end}}
{{if .Containers}} @@ -67,7 +67,7 @@
{{if .Protected}} - Védett rendszerkomponens + Védett rendszerkomponens {{if isOperational .State}} {{end}} diff --git a/controller/internal/web/templates/style.css b/controller/internal/web/templates/style.css index ef092bb..ef6f112 100644 --- a/controller/internal/web/templates/style.css +++ b/controller/internal/web/templates/style.css @@ -34,70 +34,59 @@ } :root { - --bg-primary: #0d1117; - --bg-secondary: #161b22; - --bg-card: #1c2128; - --text-primary: #e6edf3; - --text-secondary: #8b949e; - --text-muted: #6e7681; - --accent-blue: #0088cc; - --accent-light: #00aaff; - --accent-glow: rgba(0, 136, 204, 0.3); - --border-color: #30363d; - --green: #238636; - --green-bg: rgba(35, 134, 54, 0.15); - --red: #da3633; - --red-bg: rgba(218, 54, 51, 0.15); - --yellow: #d29922; - --yellow-bg: rgba(210, 153, 34, 0.15); - --orange: #db6d28; - --orange-bg: rgba(219, 109, 40, 0.15); - --gray: #6e7681; - --gray-bg: rgba(110, 118, 129, 0.15); - --radius: 12px; - --shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + --bg-0: #0A1220; --bg-1: #0F1B2E; --bg-2: #16263F; + --line: #22344F; --line-soft: #1A2A42; + --text-1: #EDF2F9; --text-2: #94A6BF; --text-3: #5E7392; + --blue: #0083D8; --blue-bright: #2EA8F5; --blue-dim: rgba(0,131,216,.13); + --warn: #E0A93E; --warn-dim: rgba(224,169,62,.12); + --crit: #E5534B; --crit-dim: rgba(229,83,75,.12); + --radius: 2px; + --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; + --font-data: 'JetBrains Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { - font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; - background: var(--bg-primary); - color: var(--text-primary); + font-family: var(--font-ui); + background: var(--bg-0); + color: var(--text-1); display: flex; min-height: 100vh; line-height: 1.6; } -body::before { - content: ''; - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - background-image: - linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px); - background-size: 50px 50px; - pointer-events: none; - z-index: -1; +/* Focus visibility on all interactive elements (design system v2). */ +:focus-visible { + outline: 2px solid var(--blue-bright); + outline-offset: 1px; } +/* Inline icon (vendored Lucide sprite, stroke = currentColor) */ +.ico { + width: 16px; + height: 16px; + flex-shrink: 0; + vertical-align: -0.18em; +} +.ico-sm { width: 14px; height: 14px; } + /* Sidebar */ .sidebar { width: 240px; - background: var(--bg-secondary); - color: var(--text-primary); + background: var(--bg-2); + color: var(--text-1); display: flex; flex-direction: column; position: fixed; height: 100vh; overflow-y: auto; - border-right: 1px solid var(--border-color); + border-right: 1px solid var(--line); } .sidebar-header { padding: 1.5rem; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--line); } .sidebar-logo { width: 140px; @@ -114,7 +103,7 @@ body::before { .customer-name { display: block; font-size: .85rem; - color: var(--text-secondary); + color: var(--text-2); margin-top: .25rem; } .nav-links { @@ -123,34 +112,36 @@ body::before { flex: 1; } .nav-links a { - display: block; + display: flex; + align-items: center; + gap: .6rem; padding: .75rem 1.5rem; - color: var(--text-secondary); + color: var(--text-2); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; } .nav-links a:hover { - color: var(--accent-light); - background: rgba(0, 136, 204, 0.08); + color: var(--blue-bright); + background: var(--blue-dim); } .nav-links a.active { - color: var(--accent-light); - background: rgba(0, 136, 204, 0.12); - border-left: 3px solid var(--accent-blue); + color: var(--blue-bright); + background: var(--blue-dim); + border-left: 3px solid var(--blue); } .sidebar-footer { padding: 1rem 1.5rem; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: .8rem; } -.version { color: var(--text-muted); } -.logout-link { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; } -.logout-link:hover { color: var(--accent-light); } +.version { color: var(--text-3); } +.logout-link { color: var(--text-3); text-decoration: none; transition: color 0.2s ease; } +.logout-link:hover { color: var(--blue-bright); } /* Main content */ .content { @@ -168,64 +159,59 @@ body::before { .page-header h2 { font-size: 1.5rem; font-weight: 600; - color: var(--text-primary); + color: var(--text-1); } .domain-badge { - background: rgba(0, 136, 204, 0.15); - color: var(--accent-light); - padding: .25rem .75rem; - border-radius: 999px; + border: 1px solid var(--line); + color: var(--text-2); + padding: .2rem .6rem; + border-radius: var(--radius); font-size: .8rem; font-weight: 500; + font-family: var(--font-data); } h3 { font-size: 1.1rem; font-weight: 600; - color: var(--text-primary); + color: var(--text-1); margin-bottom: 1rem; } -/* Stats grid */ +/* Stats — boxless figures, 1px right hairline dividers (v2). */ .stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 1rem; + display: flex; + flex-wrap: wrap; margin-bottom: 2rem; } .stat-card { - background: var(--bg-card); - border-radius: var(--radius); - padding: 1.25rem; - border: 1px solid var(--border-color); - border-left: 4px solid var(--gray); - transition: border-color 0.3s ease; + flex: 1; + min-width: 140px; + padding: .35rem 1.5rem; + border-right: 1px solid var(--line); } -.stat-running { border-left-color: var(--green); } -.stat-stopped { border-left-color: var(--red); } -.stat-total { border-left-color: var(--accent-blue); } +.stat-card:first-child { padding-left: 0; } +.stat-card:last-child { border-right: none; } .stat-value { - font-size: 2rem; - font-weight: 700; - background: linear-gradient(135deg, var(--accent-light), var(--accent-blue)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-family: var(--font-data); + font-size: 1.9rem; + font-weight: 500; + color: var(--text-1); } -.stat-running .stat-value { background: var(--green); -webkit-background-clip: text; background-clip: text; } -.stat-stopped .stat-value { background: var(--red); -webkit-background-clip: text; background-clip: text; } +.stat-zero .stat-value { color: var(--text-3); } +.stat-warn .stat-value { color: var(--warn); } .stat-label { - color: var(--text-secondary); + color: var(--text-2); font-size: .85rem; margin-top: .25rem; } /* System info bar */ .system-info-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1rem 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 2rem; } .system-info-items { @@ -246,86 +232,90 @@ h3 { .system-info-label { font-size: .8rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; } .system-info-value { font-size: .8rem; - color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; + color: var(--text-3); + font-family: var(--font-data); } -.system-bar { +/* Meter — hairline capacity readout. Nominal fill is blue; amber/red appear + only past the 70%/85% thresholds (exception-color principle). The threshold + ticks are neutral hairlines baked into the track. */ +.meter-track { + position: relative; width: 100%; - height: 10px; - border-radius: 5px; - position: relative; - background: linear-gradient(to right, - rgba(35, 134, 54, 0.10) 0%, rgba(35, 134, 54, 0.10) 70%, - rgba(210, 153, 34, 0.18) 70%, rgba(210, 153, 34, 0.18) 85%, - rgba(218, 54, 51, 0.18) 85%, rgba(218, 54, 51, 0.18) 100% - ); + height: 3px; + background: var(--line-soft); } -.system-bar::before { +.meter-track::before, +.meter-track::after { content: ''; position: absolute; - left: 70%; - top: -1px; - bottom: -1px; - width: 2px; - background: var(--yellow); - border-radius: 1px; - opacity: 0.5; + top: -2px; + bottom: -2px; + width: 1px; + background: var(--line); z-index: 2; } -.system-bar::after { - content: ''; +.meter-track::before { left: 70%; } +.meter-track::after { left: 85%; } +.meter-track.no-ticks::before, +.meter-track.no-ticks::after { display: none; } +.meter-fill { position: absolute; - left: 85%; - top: -1px; - bottom: -1px; - width: 2px; - background: var(--red); - border-radius: 1px; - opacity: 0.5; - z-index: 2; -} -.system-bar-fill { - height: 100%; - border-radius: 5px; - position: relative; + left: 0; top: 0; bottom: 0; + background: var(--blue); z-index: 1; transition: width 0.3s ease; - min-width: 3px; } -.system-bar-green { background: var(--green); box-shadow: 0 0 6px rgba(35, 134, 54, 0.4); } -.system-bar-yellow { background: var(--yellow); box-shadow: 0 0 6px rgba(210, 153, 34, 0.4); } -.system-bar-red { background: var(--red); box-shadow: 0 0 6px rgba(218, 54, 51, 0.4); } +.meter.warn .meter-fill { background: var(--warn); } +.meter.crit .meter-fill { background: var(--crit); } +.meter-flag { + display: inline-flex; + align-items: center; + gap: .4rem; + margin-top: .5rem; + padding: .2rem .55rem; + font-size: .75rem; + font-weight: 500; + border-radius: var(--radius); +} +.meter.warn .meter-flag { color: var(--warn); background: var(--warn-dim); } +.meter.crit .meter-flag { color: var(--crit); background: var(--crit-dim); } +.meter-flag .ico { width: 13px; height: 13px; } -/* Stack list (dashboard) */ +/* Stack list (dashboard) — one panel, hairline-separated rows, 2px state edge. */ .stack-list { - display: flex; - flex-direction: column; - gap: .5rem; + background: var(--bg-1); + border: 1px solid var(--line); + border-radius: var(--radius); } .stack-card { - background: var(--bg-card); - border-radius: var(--radius); - padding: 1rem 1.25rem; - border: 1px solid var(--border-color); - border-left: 4px solid var(--border-color); + position: relative; + padding: .85rem 1.25rem; + border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; - transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; + transition: background 0.15s ease; } +.stack-card:first-child { border-top: none; } .stack-card:hover { - border-color: var(--accent-blue); + background: rgba(0,131,216,.04); } -.stack-card.stack-state-green { - border-left-color: var(--accent-blue); - box-shadow: 0 0 12px rgba(0, 136, 204, 0.1); +.stack-card::before { + content: ''; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 2px; + background: transparent; } +.stack-card.stack-state-run::before, +.stack-card.stack-state-progress::before { background: var(--blue); } +.stack-card.stack-state-warn::before { background: var(--warn); } .stack-info { display: flex; align-items: center; @@ -334,21 +324,21 @@ h3 { .stack-logo { width: 32px; height: 32px; - border-radius: 6px; + border-radius: var(--radius); object-fit: contain; - background: var(--bg-secondary); + background: var(--bg-2); padding: 4px; } .stack-logo-lg { width: 48px; height: 48px; - border-radius: 8px; + border-radius: var(--radius); object-fit: contain; - background: var(--bg-secondary); + background: var(--bg-2); padding: 6px; } .stack-name { font-size: 1rem; font-weight: 500; } -.stack-desc { display: block; font-size: .8rem; color: var(--text-secondary); } +.stack-desc { display: block; font-size: .8rem; color: var(--text-2); } .stack-actions { display: flex; align-items: center; @@ -356,7 +346,7 @@ h3 { } .stack-state-label { font-size: .8rem; - color: var(--text-secondary); + color: var(--text-2); margin-right: .5rem; } @@ -367,26 +357,31 @@ h3 { gap: 1rem; } .stack-detail-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.25rem; - border: 1px solid var(--border-color); - transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + border: 1px solid var(--line); + transition: border-color 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; } .stack-detail-card:hover { - border-color: var(--accent-blue); + border-color: var(--blue); transform: translateY(-2px); } -.stack-detail-card.stack-state-green { - border-color: rgba(0, 136, 204, 0.25); - box-shadow: 0 0 16px rgba(0, 136, 204, 0.12), 0 0 4px rgba(0, 136, 204, 0.08); +.stack-detail-card { + position: relative; } -.stack-detail-card.stack-state-green:hover { - border-color: var(--accent-blue); - box-shadow: 0 0 20px rgba(0, 136, 204, 0.2), 0 0 6px rgba(0, 136, 204, 0.12); +.stack-detail-card::before { + content: ''; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 2px; + background: transparent; } +.stack-detail-card.stack-state-run::before, +.stack-detail-card.stack-state-progress::before { background: var(--blue); } +.stack-detail-card.stack-state-warn::before { background: var(--warn); } .stack-detail-header { display: flex; justify-content: space-between; @@ -402,61 +397,102 @@ h3 { } .subdomain-link { font-size: .8rem; - color: var(--accent-light); + color: var(--blue-bright); text-decoration: none; transition: color 0.2s ease; } .subdomain-link:hover { text-decoration: underline; } -.stack-state-badge { - padding: .2rem .6rem; - border-radius: 999px; +/* Tag — square 2px state chip with a 6px dot. Color only on deviation: + run/progress are blue (nominal), warn/crit amber/red, neutral/off gray. */ +.tag { + display: inline-flex; + align-items: center; + gap: .45rem; + padding: .15rem .55rem; + border: 1px solid var(--line); + border-radius: var(--radius); font-size: .75rem; font-weight: 600; + color: var(--text-2); white-space: nowrap; flex-shrink: 0; } -.state-green { background: rgba(0, 136, 204, 0.12); color: var(--accent-light); } -.state-red { background: var(--red-bg); color: var(--red); } -.state-yellow { background: var(--yellow-bg); color: var(--yellow); } -.state-orange { background: var(--orange-bg); color: var(--orange); } -.state-gray { background: var(--gray-bg); color: var(--gray); } -.state-text-green { color: var(--accent-light); } -.state-text-red { color: var(--red); } -.state-text-orange { color: var(--orange); } -.state-text-yellow { color: var(--yellow); } +.tag .dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--text-3); + flex-shrink: 0; +} +.tag-run { border-color: rgba(0,131,216,.45); color: var(--blue-bright); } +.tag-run .dot { background: var(--blue); } +.tag-progress { border-color: rgba(0,131,216,.45); color: var(--blue-bright); } +.tag-progress .dot { background: var(--blue); animation: tag-pulse 1.2s ease-in-out infinite; } +.tag-warn { border-color: var(--warn); color: var(--warn); background: var(--warn-dim); } +.tag-warn .dot { background: var(--warn); } +.tag-crit { border-color: var(--crit); color: var(--crit); background: var(--crit-dim); } +.tag-crit .dot { background: var(--crit); } +.tag-neutral .dot, .tag-off .dot { background: transparent; border: 1px solid var(--text-3); } +@keyframes tag-pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.25; } +} +@media (prefers-reduced-motion: reduce) { + .tag-progress .dot { animation: none; } +} +/* State text colors — funcmap emits run/progress/warn/neutral/off (stateColor) + and nominal/warn/crit (usageColor/tempColor). */ +.state-text-run { color: var(--blue-bright); } +.state-text-progress { color: var(--blue-bright); } +.state-text-nominal { color: var(--text-1); } +.state-text-warn { color: var(--warn); } +.state-text-crit { color: var(--crit); } +.state-text-neutral, .state-text-off { color: var(--text-3); } .stack-detail-desc { - color: var(--text-secondary); + color: var(--text-2); font-size: .85rem; margin-bottom: .75rem; } -.stack-meta-badges { +/* Metadata rows — icon + text, NO container (replaces informational pills). */ +.metarows { display: flex; flex-wrap: wrap; - gap: .4rem; + gap: .3rem 1rem; margin: .5rem 0; } +.metarow { + display: inline-flex; + align-items: center; + gap: .4rem; + font-size: .78rem; + color: var(--text-2); +} +.metarow .ico { + width: 14px; + height: 14px; + color: var(--text-3); +} +.metarow .mono { font-family: var(--font-data); font-size: .75rem; } +/* Legacy informational pill — restyled flat until the Phase-4 sweep replaces the markup. */ .meta-badge { - background: rgba(0, 136, 204, 0.1); - color: var(--text-secondary); - padding: .15rem .5rem; - border-radius: 6px; - font-size: .75rem; + color: var(--text-2); + padding: .1rem 0; + font-size: .78rem; } .meta-badge-ok { - background: var(--green-bg); - color: var(--green); + color: var(--text-2); } .container-list { margin: .75rem 0; } -.container-list h4 { font-size: .8rem; color: var(--text-muted); margin-bottom: .4rem; } +.container-list h4 { font-size: .8rem; color: var(--text-3); margin-bottom: .4rem; } .container-row { display: flex; justify-content: space-between; font-size: .8rem; padding: .3rem 0; - border-bottom: 1px solid rgba(48, 54, 61, 0.5); + border-bottom: 1px solid var(--line-soft); } .container-row:last-child { border-bottom: none; } -.container-name { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); } +.container-name { font-family: var(--font-data); color: var(--text-2); } .container-status { font-size: .75rem; } .stack-detail-actions { display: flex; @@ -472,76 +508,76 @@ h3 { align-items: center; gap: .3rem; padding: .5rem 1rem; - border: none; - border-radius: 8px; + border: 1px solid var(--line); + border-radius: var(--radius); font-size: .85rem; font-weight: 600; cursor: pointer; - transition: all 0.2s ease; + transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; text-decoration: none; - color: #fff; + color: var(--text-1); font-family: inherit; - background: rgba(255,255,255,0.1); + background: var(--bg-2); } -.btn:hover { transform: translateY(-1px); } -.btn:active { transform: scale(.97); } +.btn:hover { border-color: var(--blue); } +.btn:active { opacity: .85; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn.loading { opacity: .6; } .btn-sm { padding: .3rem .6rem; font-size: .8rem; } .btn-lg { padding: .65rem 1.5rem; font-size: 1rem; } .btn-full { width: 100%; justify-content: center; } .btn-primary { - background: linear-gradient(135deg, var(--accent-blue), var(--accent-light)); - box-shadow: 0 4px 12px var(--accent-glow); + background: var(--blue); + border-color: var(--blue); + color: #fff; } -.btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow); } +.btn-primary:hover { background: var(--blue-bright); border-color: var(--blue-bright); } .btn-success { - background: linear-gradient(135deg, var(--accent-blue), var(--accent-light)); - box-shadow: 0 4px 12px var(--accent-glow); + background: var(--blue); + border-color: var(--blue); + color: #fff; } -.btn-success:hover { box-shadow: 0 6px 20px var(--accent-glow); } +.btn-success:hover { background: var(--blue-bright); border-color: var(--blue-bright); } .btn-warning { background: transparent; - border: 1px solid var(--border-color); - color: var(--text-secondary); + border: 1px solid var(--line); + color: var(--text-2); } .btn-warning:hover { - border-color: var(--accent-blue); - color: var(--accent-light); - background: rgba(0, 136, 204, 0.08); + border-color: var(--blue); + color: var(--blue-bright); + background: var(--blue-dim); } .btn-danger { background: transparent; - border: 1px solid var(--border-color); - color: var(--text-secondary); + border: 1px solid var(--crit); + color: var(--crit); } .btn-danger:hover { - border-color: var(--red); - color: var(--red); - background: var(--red-bg); + background: var(--crit-dim); } .btn-outline { background: transparent; - border: 1px solid var(--border-color); - color: var(--text-secondary); + border: 1px solid var(--line); + color: var(--text-2); } .btn-outline:hover { - border-color: var(--accent-blue); - color: var(--accent-light); - background: rgba(0, 136, 204, 0.08); + border-color: var(--blue); + color: var(--blue-bright); + background: var(--blue-dim); } .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; - border-radius: 999px; + border-radius: var(--radius); font-size: .75rem; font-weight: 500; } .badge-protected { - background: var(--gray-bg); - color: var(--text-muted); + background: var(--bg-2); + color: var(--text-3); } /* Deploy page */ @@ -550,43 +586,43 @@ h3 { display: flex; gap: 1rem; align-items: flex-start; - background: var(--bg-card); + background: var(--bg-1); padding: 1.25rem; border-radius: var(--radius); - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .deploy-logo { width: 64px; height: 64px; - border-radius: 12px; + border-radius: var(--radius); object-fit: contain; - background: var(--bg-secondary); + background: var(--bg-2); padding: 8px; flex-shrink: 0; } .deploy-info h3 { font-size: 1.2rem; margin-bottom: .25rem; } -.deploy-info p { color: var(--text-secondary); font-size: .9rem; } +.deploy-info p { color: var(--text-2); font-size: .9rem; } .deploy-form { - background: var(--bg-card); + background: var(--bg-1); padding: 1.5rem; border-radius: var(--radius); - border: 1px solid var(--border-color); + border: 1px solid var(--line); } .form-section { margin-bottom: 1.5rem; } -.form-section h4 { font-size: 1rem; margin-bottom: .5rem; color: var(--text-primary); } -.form-section-desc { color: var(--text-secondary); font-size: .85rem; margin-bottom: .75rem; } +.form-section h4 { font-size: 1rem; margin-bottom: .5rem; color: var(--text-1); } +.form-section-desc { color: var(--text-2); font-size: .85rem; margin-bottom: .75rem; } .form-group { margin-bottom: 1rem; } -.form-group label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; color: var(--text-primary); } +.form-group label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4rem; color: var(--text-1); } .form-group-auto { padding: .5rem .75rem; - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 8px; + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: var(--radius); } .form-group-auto label { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; } -.form-group-auto .form-control[readonly] { background: var(--bg-primary); } -.auto-generated-badge { color: var(--green); font-size: .75rem; font-weight: normal; } +.form-group-auto .form-control[readonly] { background: var(--bg-0); } +.auto-generated-badge { color: var(--blue); font-size: .75rem; font-weight: normal; } .checkbox-group { display: flex; flex-direction: column; @@ -603,7 +639,7 @@ h3 { } .form-hint { font-size: .85rem; - color: var(--text-muted); + color: var(--text-3); } .form-actions { display: flex; @@ -613,48 +649,47 @@ h3 { .form-control { width: 100%; padding: .55rem .75rem; - border: 1px solid var(--border-color); - border-radius: 8px; + border: 1px solid var(--line); + border-radius: var(--radius); font-size: .9rem; - background: var(--bg-secondary); - color: var(--text-primary); + background: var(--bg-2); + color: var(--text-1); font-family: inherit; - transition: border-color 0.2s ease, box-shadow 0.2s ease; + transition: border-color 0.2s ease; } .form-control:focus { outline: none; - border-color: var(--accent-blue); - box-shadow: 0 0 0 3px var(--accent-glow); + border-color: var(--blue); } .form-control:disabled { - background: var(--bg-primary); - color: var(--text-muted); + background: var(--bg-0); + color: var(--text-3); cursor: not-allowed; } select.form-control { appearance: auto; } -select.form-control option { background: var(--bg-secondary); color: var(--text-primary); } +select.form-control option { background: var(--bg-2); color: var(--text-1); } .input-with-button { display: flex; gap: .5rem; } .input-with-button .form-control { flex: 1; } .subdomain-input-group { display: flex; align-items: center; gap: .5rem; } .subdomain-input-group .subdomain-input { width: 8rem; } .subdomain-input-group .subdomain-suffix { - color: var(--text-secondary); font-size: .95rem; white-space: nowrap; + color: var(--text-2); font-size: .95rem; white-space: nowrap; } -.form-hint { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .25rem; } -.required { color: var(--red); } -.locked-hint { font-size: .75rem; color: var(--text-muted); font-weight: 400; margin-left: .5rem; } +.form-hint { display: block; font-size: .8rem; color: var(--text-3); margin-top: .25rem; } +.required { color: var(--crit); } +.locked-hint { font-size: .75rem; color: var(--text-3); font-weight: 400; margin-left: .5rem; } .deploy-actions { display: flex; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); } /* Deploy progress */ .deploy-progress { - background: var(--bg-card); - border: 1px solid var(--border-color); + background: var(--bg-1); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } @@ -670,22 +705,22 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- gap: 0.75rem; padding: 0.5rem 0; font-size: .95rem; - color: var(--text-muted); + color: var(--text-3); } .deploy-step.active { - color: var(--text-primary); + color: var(--text-1); } .deploy-step.done { - color: var(--text-primary); + color: var(--text-1); } .deploy-step.done .step-icon { - color: var(--green); + color: var(--blue); } .deploy-step.error .step-icon { - color: var(--red); + color: var(--crit); } .deploy-step.warn .step-icon { - color: var(--yellow); + color: var(--warn); } .step-icon { font-size: 1.1rem; @@ -694,38 +729,38 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- flex-shrink: 0; } .deploy-elapsed { - color: var(--text-muted); + color: var(--text-3); font-size: .85rem; margin-top: 0.5rem; } /* Toggle switch */ .toggle { cursor: pointer; display: flex; align-items: center; gap: .5rem; } -.toggle input[type="checkbox"] { accent-color: var(--accent-blue); } -.toggle-label { font-size: .9rem; color: var(--text-secondary); } +.toggle input[type="checkbox"] { accent-color: var(--blue); } +.toggle-label { font-size: .9rem; color: var(--text-2); } /* Alerts */ .alert { padding: .75rem 1rem; - border-radius: 8px; + border-radius: var(--radius); margin-bottom: 1rem; font-size: .85rem; border: 1px solid; } .alert-error { - background: var(--red-bg); - color: var(--red); - border-color: rgba(218, 54, 51, 0.3); + background: var(--crit-dim); + color: var(--crit); + border-color: var(--crit-dim); } .alert-info { - background: rgba(0, 136, 204, 0.1); - color: var(--accent-light); - border-color: rgba(0, 136, 204, 0.3); + background: var(--blue-dim); + color: var(--blue-bright); + border-color: rgba(0,131,216,.35); } .alert-warning { - background: var(--yellow-bg); - color: var(--yellow); - border-color: rgba(210, 153, 34, 0.3); + background: var(--warn-dim); + color: var(--warn); + border-color: var(--warn-dim); } /* Dashboard alert banners */ @@ -735,25 +770,25 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; - border-radius: 8px; + border-radius: var(--radius); margin-bottom: 0.5rem; font-size: 0.9rem; border: 1px solid; } .alert-banner-error { - background: rgba(248, 113, 113, 0.1); - border-color: rgba(248, 113, 113, 0.3); - color: #f87171; + background: var(--crit-dim); + border-color: var(--crit-dim); + color: var(--crit); } .alert-banner-warning { - background: rgba(250, 204, 21, 0.1); - border-color: rgba(250, 204, 21, 0.3); - color: #facc15; + background: var(--warn-dim); + border-color: var(--warn-dim); + color: var(--warn); } .alert-banner-info { - background: rgba(96, 165, 250, 0.1); - border-color: rgba(96, 165, 250, 0.3); - color: #60a5fa; + background: var(--blue-dim); + border-color: var(--blue-dim); + color: var(--blue-bright); } .alert-icon { flex-shrink: 0; } .alert-message { flex: 1; } @@ -768,17 +803,17 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- padding: 0.4rem 0.75rem; margin-top: 0.25rem; font-size: 0.8rem; - border-radius: 6px; + border-radius: var(--radius); } .inline-warning-warning { - color: var(--yellow); - background: rgba(250, 204, 21, 0.06); - border: 1px solid rgba(250, 204, 21, 0.15); + color: var(--warn); + background: var(--warn-dim); + border: 1px solid var(--warn-dim); } .inline-warning-error { - color: var(--red); - background: rgba(218, 54, 51, 0.06); - border: 1px solid rgba(218, 54, 51, 0.15); + color: var(--crit); + background: var(--crit-dim); + border: 1px solid var(--crit-dim); } .inline-warning-dot { font-size: 0.6rem; flex-shrink: 0; } .inline-warning-text { flex: 1; } @@ -792,14 +827,14 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- /* Memory summary on deploy page */ .memory-summary { - background: var(--bg-card); - border: 1px solid var(--border-color); + background: var(--bg-1); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; } .memory-blocked { - border-color: rgba(218, 54, 51, 0.5); + border-color: var(--crit-dim); } .memory-summary-header { display: flex; @@ -810,26 +845,26 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- .memory-summary-label { font-size: .8rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; } .memory-summary-value { font-size: .8rem; - color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; + color: var(--text-3); + font-family: var(--font-data); } .memory-bar-stacked { width: 100%; height: 10px; - border-radius: 5px; + border-radius: var(--radius); display: flex; overflow: hidden; position: relative; background: linear-gradient(to right, - rgba(35, 134, 54, 0.10) 0%, rgba(35, 134, 54, 0.10) 70%, - rgba(210, 153, 34, 0.18) 70%, rgba(210, 153, 34, 0.18) 85%, - rgba(218, 54, 51, 0.18) 85%, rgba(218, 54, 51, 0.18) 100% + var(--blue-dim) 0%, var(--blue-dim) 70%, + var(--warn-dim) 70%, var(--warn-dim) 85%, + var(--crit-dim) 85%, var(--crit-dim) 100% ); } .memory-bar-stacked::before { @@ -839,8 +874,8 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- top: -1px; bottom: -1px; width: 2px; - background: var(--yellow); - border-radius: 1px; + background: var(--warn); + border-radius: 0; opacity: 0.5; z-index: 2; } @@ -851,8 +886,8 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- top: -1px; bottom: -1px; width: 2px; - background: var(--red); - border-radius: 1px; + background: var(--crit); + border-radius: 0; opacity: 0.5; z-index: 2; } @@ -866,14 +901,13 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- min-width: 3px; } .memory-bar-committed { - background: var(--green); - box-shadow: 0 0 6px rgba(35, 134, 54, 0.4); - border-radius: 5px 0 0 5px; + background: var(--blue); + border-radius: 0; } .memory-bar-new { - background: rgba(35, 134, 54, 0.45); - border-right: 2px solid #4edf72; - border-radius: 0 5px 5px 0; + background: var(--blue-dim); + border-right: 2px solid var(--blue-bright); + border-radius: 0; } .memory-bar-legend { display: flex; @@ -886,49 +920,49 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- align-items: center; gap: 0.35rem; font-size: .75rem; - color: var(--text-secondary); + color: var(--text-2); white-space: nowrap; } .memory-legend-dot { display: inline-block; width: 10px; height: 10px; - border-radius: 3px; + border-radius: var(--radius); flex-shrink: 0; } .memory-legend-committed { - background: var(--green); + background: var(--blue); } .memory-legend-new { - background: rgba(35, 134, 54, 0.45); - border: 1px solid #4edf72; + background: var(--blue-dim); + border: 1px solid var(--blue-bright); } .memory-dist-bar { width: 100%; height: 14px; - border-radius: 7px; + border-radius: var(--radius); display: flex; overflow: hidden; - background: var(--bg-secondary); - border: 1px solid var(--border-color); + background: var(--bg-2); + border: 1px solid var(--line); } .memory-dist-bar .memory-bar-segment:first-child { - border-radius: 6px 0 0 6px; + border-radius: 0; } .memory-dist-bar .memory-bar-segment:last-child { - border-radius: 0 6px 6px 0; + border-radius: 0; } .memory-dist-header { font-size: .85rem; - color: var(--text-secondary); + color: var(--text-2); margin-bottom: .5rem; - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); } /* Logs */ .logs-container { - background: var(--bg-secondary); - border: 1px solid var(--border-color); + background: var(--bg-2); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; @@ -937,8 +971,8 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- margin-bottom: 1rem; } .logs-output { - color: var(--text-primary); - font-family: 'JetBrains Mono', 'Fira Code', monospace; + color: var(--text-1); + font-family: var(--font-data); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; @@ -956,18 +990,18 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- gap: .35rem; font-size: .8rem; font-weight: 600; - color: var(--green); + color: var(--blue); margin-right: .5rem; } .logs-live-indicator.logs-live-paused { - color: var(--text-muted); + color: var(--text-3); } .logs-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; - background: var(--green); + background: var(--blue); animation: logs-pulse 1.5s ease-in-out infinite; } @keyframes logs-pulse { @@ -978,21 +1012,21 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- /* Sync toast */ .sync-toast { padding: .6rem 1rem; - border-radius: 8px; + border-radius: var(--radius); font-size: .85rem; margin-bottom: 1rem; border: 1px solid; transition: opacity 0.3s ease; } .sync-toast-ok { - background: var(--green-bg); - color: var(--green); - border-color: rgba(35, 134, 54, 0.3); + background: var(--blue-dim); + color: var(--blue); + border-color: var(--blue-dim); } .sync-toast-err { - background: var(--red-bg); - color: var(--red); - border-color: rgba(218, 54, 51, 0.3); + background: var(--crit-dim); + color: var(--crit); + border-color: var(--crit-dim); } /* --- Filter bar --- */ @@ -1005,10 +1039,10 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- .filter-btn { padding: 0.4rem 1rem; - border-radius: 20px; - border: 1px solid var(--border-color); - background: var(--bg-secondary); - color: var(--text-secondary); + border-radius: var(--radius); + border: 1px solid var(--line); + background: var(--bg-2); + color: var(--text-2); cursor: pointer; font-size: 0.85rem; font-family: inherit; @@ -1016,13 +1050,13 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- } .filter-btn:hover { - border-color: var(--accent-blue); - color: var(--text-primary); + border-color: var(--blue); + color: var(--text-1); } .filter-btn.active { - background: var(--accent-blue); - border-color: var(--accent-blue); + background: var(--blue); + border-color: var(--blue); color: #fff; } @@ -1035,18 +1069,17 @@ select.form-control option { background: var(--bg-secondary); color: var(--text- a.stat-card { text-decoration: none; color: inherit; - transition: transform 0.15s, box-shadow 0.15s; + transition: transform 0.15s; } a.stat-card:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } /* Clickable cards */ [data-href] { cursor: pointer; } -.empty-state { text-align: center; padding: 3rem; color: var(--text-muted); } +.empty-state { text-align: center; padding: 3rem; color: var(--text-3); } /* Login page */ .login-body { @@ -1054,26 +1087,13 @@ a.stat-card:hover { justify-content: center; align-items: center; min-height: 100vh; - background: var(--bg-primary); -} -.login-body::before { - content: ''; - position: fixed; - top: 0; left: 0; - width: 100%; height: 100%; - background-image: - linear-gradient(rgba(0, 136, 204, 0.03) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 136, 204, 0.03) 1px, transparent 1px); - background-size: 50px 50px; - pointer-events: none; - z-index: 0; + background: var(--bg-0); } .login-card { - background: var(--bg-card); + background: var(--bg-1); padding: 2.5rem; - border-radius: 16px; - border: 1px solid var(--border-color); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); + border-radius: var(--radius); + border: 1px solid var(--line); width: 100%; max-width: 380px; text-align: center; @@ -1085,20 +1105,20 @@ a.stat-card:hover { margin-bottom: 0.5rem; } .login-subtitle { - color: var(--text-secondary); + color: var(--text-2); margin-bottom: 1.5rem; } .login-footer { margin-top: 1.5rem; font-size: .75rem; - color: var(--text-muted); + color: var(--text-3); } .login-footer a { - color: var(--accent-light); + color: var(--blue-bright); text-decoration: none; transition: color 0.2s ease; } -.login-footer a:hover { color: var(--accent-blue); } +.login-footer a:hover { color: var(--blue); } /* --- App Info Page --- */ .app-info-hero { @@ -1106,9 +1126,9 @@ a.stat-card:hover { align-items: center; gap: 1.5rem; padding: 1.5rem; - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .app-info-logo { @@ -1118,16 +1138,16 @@ a.stat-card:hover { min-height: 80px; max-width: 80px; max-height: 80px; - border-radius: 12px; + border-radius: var(--radius); object-fit: contain; - background: var(--bg-secondary); + background: var(--bg-2); padding: 10px; flex-shrink: 0; overflow: hidden; } .app-info-tagline { font-size: 1.1rem; - color: var(--text-primary); + color: var(--text-1); margin: 0 0 .75rem 0; } .app-screenshots { @@ -1140,7 +1160,7 @@ a.stat-card:hover { .app-screenshot { max-height: 220px; border-radius: var(--radius); - border: 1px solid var(--border-color); + border: 1px solid var(--line); object-fit: cover; } .app-info-grid { @@ -1150,50 +1170,50 @@ a.stat-card:hover { margin-bottom: 1.5rem; } .app-info-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); } .app-info-card h3 { margin: 0 0 .75rem 0; font-size: .95rem; - color: var(--text-primary); + color: var(--text-1); } .app-info-list { margin: 0; padding-left: 1.25rem; - color: var(--text-secondary); + color: var(--text-2); font-size: .9rem; line-height: 1.6; } .app-info-creds { font-family: monospace; font-size: 1rem; - color: var(--accent-light); - background: var(--bg-secondary); + color: var(--blue-bright); + background: var(--bg-2); padding: .5rem .75rem; - border-radius: 4px; + border-radius: var(--radius); display: inline-block; margin: 0 0 .5rem 0; } .app-info-creds-warn { - color: var(--orange); + color: var(--warn); font-size: .85rem; margin: 0; } .app-info-link { - color: var(--accent-light); + color: var(--blue-bright); text-decoration: none; } .app-info-link:hover { text-decoration: underline; } /* Optional config section */ .app-optional-config { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.5rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .app-optional-config h3 { @@ -1206,10 +1226,10 @@ a.stat-card:hover { .config-group h4 { margin: 0 0 .5rem 0; font-size: .95rem; - color: var(--text-primary); + color: var(--text-1); } .config-group-desc { - color: var(--text-secondary); + color: var(--text-2); font-size: .85rem; margin: 0 0 1rem 0; } @@ -1226,25 +1246,25 @@ a.stat-card:hover { .config-field label { font-size: .85rem; font-weight: 500; - color: var(--text-primary); + color: var(--text-1); } .config-field-help { font-size: .8rem; - color: var(--text-secondary); + color: var(--text-2); margin: 0; line-height: 1.4; } .config-field-help a { - color: var(--accent-light); + color: var(--blue-bright); text-decoration: none; } .config-field-help a:hover { text-decoration: underline; } .config-input { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 4px; + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: var(--radius); padding: .5rem .75rem; - color: var(--text-primary); + color: var(--text-1); font-size: .9rem; font-family: monospace; width: 100%; @@ -1252,7 +1272,7 @@ a.stat-card:hover { } .config-input:focus { outline: none; - border-color: var(--accent-blue); + border-color: var(--blue); } .config-actions { display: flex; @@ -1264,45 +1284,45 @@ a.stat-card:hover { font-size: .9rem; transition: opacity .3s; } -.config-save-ok { color: var(--green); } -.config-save-err { color: var(--red); } +.config-save-ok { color: var(--blue); } +.config-save-err { color: var(--crit); } .meta-badge-storage { - background: rgba(0, 136, 204, 0.12); - color: var(--accent-light); + background: var(--blue-dim); + color: var(--blue-bright); } .meta-badge-warn { - background: rgba(255, 152, 0, 0.1) !important; - color: var(--orange) !important; + background: var(--warn-dim) !important; + color: var(--warn) !important; } .meta-badge-ok { - background: rgba(76, 175, 80, 0.1) !important; - color: var(--green) !important; + background: var(--blue-dim) !important; + color: var(--blue) !important; } /* Orphan badge */ .badge-orphaned { - background: var(--orange-bg); - color: var(--orange); + background: var(--warn-dim); + color: var(--warn); } /* B2b: a deployed app whose data drive was decommissioned/disconnected — distinct warning, not error-spam. */ .badge-missing-storage { - background: var(--orange-bg); - color: var(--orange); + background: var(--warn-dim); + color: var(--warn); white-space: nowrap; } /* F5: an unhealthy/restarting deployed app has its public route withheld by Traefik (404 at the URL). */ .badge-route-unpublished { - background: var(--orange-bg); - color: var(--orange); + background: var(--warn-dim); + color: var(--warn); white-space: nowrap; } .route-unpublished { display: inline-block; margin-top: 2px; font-size: 0.8em; - color: var(--orange); + color: var(--warn); white-space: nowrap; } @@ -1318,31 +1338,30 @@ a.stat-card:hover { z-index: 1000; } .modal-card { - background: var(--bg-card); - border: 1px solid var(--border-color); + background: var(--bg-1); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } .modal-card h3 { margin-bottom: .75rem; } .modal-hdd-info { - background: var(--bg-secondary); - border-radius: 8px; + background: var(--bg-2); + border-radius: var(--radius); padding: .75rem 1rem; margin: .75rem 0; font-size: .85rem; - color: var(--text-secondary); + color: var(--text-2); } .modal-hdd-path { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: .8rem; - color: var(--text-muted); + color: var(--text-3); padding: .2rem 0; } .modal-checkbox { @@ -1351,15 +1370,15 @@ a.stat-card:hover { gap: .5rem; margin: .75rem 0; padding: .75rem 1rem; - background: var(--red-bg); - border: 1px solid rgba(218, 54, 51, 0.3); - border-radius: 8px; + background: var(--crit-dim); + border: 1px solid var(--crit-dim); + border-radius: var(--radius); font-size: .85rem; - color: var(--red); + color: var(--crit); cursor: pointer; } .modal-checkbox input[type="checkbox"] { - accent-color: var(--red); + accent-color: var(--crit); } .modal-actions { display: flex; @@ -1371,35 +1390,17 @@ a.stat-card:hover { /* Load average text */ .system-load-avg { font-size: .7rem; - color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; + color: var(--text-3); + font-family: var(--font-data); margin-top: .25rem; } -/* Temperature dot */ -.temp-dot { - display: inline-block; - width: 11px; - height: 11px; - border-radius: 50%; - margin-right: .25rem; - vertical-align: middle; -} -.temp-dot-green { background: var(--green); box-shadow: 0 0 5px rgba(35, 134, 54, 0.6); } -.temp-dot-yellow { background: var(--yellow); box-shadow: 0 0 5px rgba(210, 153, 34, 0.6); } -.temp-dot-red { background: var(--red); box-shadow: 0 0 5px rgba(218, 54, 51, 0.6); } - -/* Temperature value pill */ -.temp-value-pill { - display: inline-block; - padding: 1px 7px; - border-radius: 4px; - font-weight: 600; +/* Temperature — plain mono value; color only on warn/crit (v2). */ +.temp-value { + font-family: var(--font-data); font-size: .85rem; + font-weight: 600; } -.temp-pill-green { background: rgba(35,134,54,0.18); color: var(--green); } -.temp-pill-yellow { background: rgba(210,153,34,0.18); color: var(--yellow); } -.temp-pill-red { background: rgba(218,54,51,0.18); color: var(--red); } .system-info-item-compact { flex: 0 1 auto; @@ -1408,10 +1409,10 @@ a.stat-card:hover { /* Backup status card */ .backup-status-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1rem 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 2rem; } .backup-status-card h3 { @@ -1425,25 +1426,25 @@ a.stat-card:hover { font-size: .85rem; } .backup-label { - color: var(--text-secondary); + color: var(--text-2); } .backup-value { - color: var(--text-primary); - font-family: 'JetBrains Mono', monospace; + color: var(--text-1); + font-family: var(--font-data); font-size: .8rem; } -.backup-status-ok { color: var(--green); } -.backup-status-fail { color: var(--red); } -.backup-status-none { color: var(--text-muted); } +.backup-status-ok { color: var(--blue); } +.backup-status-fail { color: var(--crit); } +.backup-status-none { color: var(--text-3); } /* Dashboard backup card link */ .backup-card-link { - color: var(--text-primary); + color: var(--text-1); text-decoration: none; transition: color 0.2s; } .backup-card-link:hover { - color: var(--accent-light); + color: var(--blue-bright); } /* --- Backup page --- */ @@ -1454,9 +1455,9 @@ a.stat-card:hover { .backup-empty-state { text-align: center; padding: 4rem 2rem; - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); - border: 1px solid var(--border-color); + border: 1px solid var(--line); } .backup-empty-icon { font-size: 3rem; @@ -1466,16 +1467,16 @@ a.stat-card:hover { margin-bottom: .5rem; } .backup-empty-state p { - color: var(--text-secondary); + color: var(--text-2); font-size: .9rem; line-height: 1.6; } .schedule-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .schedule-card h3 { @@ -1490,26 +1491,26 @@ a.stat-card:hover { gap: 1rem; padding: .4rem 0; font-size: .85rem; - border-bottom: 1px solid rgba(48, 54, 61, 0.5); + border-bottom: 1px solid var(--line-soft); } .schedule-row:last-child { border-bottom: none; } .schedule-task { - color: var(--text-primary); + color: var(--text-1); font-weight: 500; min-width: 160px; } .schedule-time { - color: var(--accent-light); - font-family: 'JetBrains Mono', monospace; + color: var(--blue-bright); + font-family: var(--font-data); font-size: .8rem; min-width: 80px; } .schedule-next { - color: var(--text-secondary); + color: var(--text-2); font-size: .8rem; } .schedule-summary { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); padding-top: .75rem; margin-bottom: .75rem; } @@ -1519,11 +1520,11 @@ a.stat-card:hover { align-items: center; padding: .25rem 0; font-size: .85rem; - color: var(--text-secondary); + color: var(--text-2); } .schedule-summary-value { - color: var(--text-primary); - font-family: 'JetBrains Mono', monospace; + color: var(--text-1); + font-family: var(--font-data); font-size: .8rem; } .schedule-actions { @@ -1531,10 +1532,10 @@ a.stat-card:hover { } .backup-section-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .backup-section-card h3 { @@ -1553,69 +1554,69 @@ a.stat-card:hover { .db-table th, .snapshot-table th { text-align: left; padding: .5rem .75rem; - color: var(--text-muted); + color: var(--text-3); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--line); } .db-table td, .snapshot-table td { padding: .5rem .75rem; - color: var(--text-primary); - border-bottom: 1px solid rgba(48, 54, 61, 0.3); + color: var(--text-1); + border-bottom: 1px solid var(--line-soft); } .db-table tr:nth-child(even), .snapshot-table tr:nth-child(even) { - background: var(--bg-secondary); + background: var(--bg-2); } .db-table tr:nth-child(odd), .snapshot-table tr:nth-child(odd) { - background: var(--bg-card); + background: var(--bg-1); } .db-table td.mono, .snapshot-table td.mono { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: .8rem; } .db-type-badge { display: inline-block; padding: .1rem .5rem; - border-radius: 999px; + border-radius: var(--radius); font-size: .75rem; font-weight: 500; } .db-type-postgres { - background: rgba(0, 136, 204, 0.15); - color: var(--accent-light); + background: var(--blue-dim); + color: var(--blue-bright); } .db-type-mariadb { - background: rgba(210, 153, 34, 0.15); - color: var(--yellow); + background: var(--warn-dim); + color: var(--warn); } .validation-badge { display: inline-block; padding: .1rem .5rem; - border-radius: 999px; + border-radius: var(--radius); font-size: .75rem; font-weight: 500; } .validation-ok { - background: var(--green-bg); - color: var(--green); + background: var(--blue-dim); + color: var(--blue); } .validation-fail { - background: var(--red-bg); - color: var(--red); + background: var(--crit-dim); + color: var(--crit); cursor: help; } .validation-na { - color: var(--text-muted); + color: var(--text-3); } .col-subtitle { font-size: .7rem; font-weight: 400; - color: var(--text-muted); + color: var(--text-3); text-transform: none; letter-spacing: 0; margin-left: .25rem; @@ -1625,21 +1626,21 @@ a.stat-card:hover { .snapshot-footer { padding: .75rem .75rem 0; font-size: .8rem; - color: var(--text-secondary); + color: var(--text-2); } .backup-table-empty { padding: 1.5rem; text-align: center; - color: var(--text-muted); + color: var(--text-3); font-size: .85rem; } .repo-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .repo-card h3 { @@ -1656,17 +1657,17 @@ a.stat-card:hover { font-size: .85rem; } .repo-label { - color: var(--text-secondary); + color: var(--text-2); } .repo-value { - color: var(--text-primary); + color: var(--text-1); } .repo-value.mono { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: .8rem; } .repo-paths { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); padding-top: .75rem; margin-bottom: .75rem; } @@ -1676,17 +1677,17 @@ a.stat-card:hover { margin-top: .5rem; } .repo-path-list li { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: .8rem; - color: var(--text-secondary); + color: var(--text-2); padding: .15rem 0; } .repo-remote { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); padding-top: .75rem; } .repo-tier { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; } @@ -1698,7 +1699,7 @@ a.stat-card:hover { .repo-tier-title { font-size: .85rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .3px; @@ -1712,7 +1713,7 @@ a.stat-card:hover { /* Details tier (collapsible sections in Részletek) */ .details-tier { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); margin-top: .5rem; } .details-tier:first-child { @@ -1732,7 +1733,7 @@ a.stat-card:hover { } .details-tier-header .expand-icon { font-size: .7rem; - color: var(--text-muted); + color: var(--text-3); min-width: 1rem; text-align: center; } @@ -1743,7 +1744,7 @@ a.stat-card:hover { padding-bottom: .75rem; } .drive-detail-card { - background: var(--bg-secondary); + background: var(--bg-2); border-radius: var(--radius); padding: .75rem; margin-bottom: .5rem; @@ -1751,7 +1752,7 @@ a.stat-card:hover { .drive-detail-header { font-size: .85rem; font-weight: 600; - color: var(--text-primary); + color: var(--text-1); margin-bottom: .5rem; } .method-group { @@ -1760,26 +1761,26 @@ a.stat-card:hover { .method-group-label { font-size: .8rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); margin-bottom: .25rem; } .tier-empty-state { font-size: .85rem; - color: var(--text-muted); + color: var(--text-3); padding: .5rem 0; } .relative-time { - color: var(--text-muted); + color: var(--text-3); font-size: .8rem; } /* --- Monitoring page --- */ .monitor-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.25rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .monitor-card h3 { @@ -1787,34 +1788,34 @@ a.stat-card:hover { } .monitoring-banner { padding: .75rem 1rem; - border-radius: 8px; + border-radius: var(--radius); font-size: .9rem; border: 1px solid; } .monitoring-banner-green { - background: var(--green-bg); - color: var(--green); - border-color: rgba(35, 134, 54, 0.3); + background: var(--blue-dim); + color: var(--blue); + border-color: var(--blue-dim); } .monitoring-banner-yellow { - background: var(--yellow-bg); - color: var(--yellow); - border-color: rgba(210, 153, 34, 0.3); + background: var(--warn-dim); + color: var(--warn); + border-color: var(--warn-dim); } .monitoring-banner-red { - background: var(--orange-bg); - color: var(--orange); - border-color: rgba(219, 109, 40, 0.3); + background: var(--warn-dim); + color: var(--warn); + border-color: var(--warn-dim); } .monitoring-banner-warn { - background: rgba(255, 193, 7, 0.15); - border-left: 4px solid var(--yellow); - color: var(--yellow); + background: var(--warn-dim); + border-left: 4px solid var(--warn); + color: var(--warn); } -.ping-status-ok { color: var(--green); } -.ping-status-warn { color: var(--yellow); } +.ping-status-ok { color: var(--blue); } +.ping-status-warn { color: var(--warn); } .ping-schedule { - color: var(--text-muted); + color: var(--text-3); font-size: .85rem; margin-left: .75rem; } @@ -1844,20 +1845,20 @@ a.stat-card:hover { justify-content: space-between; align-items: baseline; padding: .5rem .75rem; - border-bottom: 1px solid rgba(48, 54, 61, 0.3); + border-bottom: 1px solid var(--line-soft); font-size: .9rem; gap: 1rem; } .sysinfo-row:last-child { border-bottom: none; } .sysinfo-label { - color: var(--text-secondary); + color: var(--text-2); font-weight: 500; white-space: nowrap; flex-shrink: 0; } .sysinfo-value { - color: var(--text-primary); - font-family: 'JetBrains Mono', monospace; + color: var(--text-1); + font-family: var(--font-data); font-size: .85rem; font-weight: 600; text-align: right; @@ -1872,10 +1873,10 @@ a.stat-card:hover { grid-template-columns: 1fr 1fr; } .chart-box { - background: var(--bg-secondary); - border-radius: 8px; + background: var(--bg-2); + border-radius: var(--radius); padding: .75rem; - border: 1px solid rgba(48, 54, 61, 0.5); + border: 1px solid var(--line-soft); min-width: 0; overflow: hidden; } @@ -1886,7 +1887,7 @@ a.stat-card:hover { .chart-title { font-size: .8rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .3px; @@ -1913,7 +1914,7 @@ a.stat-card:hover { .chart-empty { text-align: center; padding: 2rem; - color: var(--text-muted); + color: var(--text-3); font-size: .9rem; } .storage-bars { @@ -1933,27 +1934,27 @@ a.stat-card:hover { .storage-label { font-size: .85rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); } .storage-value { font-size: .8rem; - color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; + color: var(--text-3); + font-family: var(--font-data); } /* --- Settings page --- */ .settings-card { - background: var(--bg-card); + background: var(--bg-1); border-radius: var(--radius); padding: 1.5rem; - border: 1px solid var(--border-color); + border: 1px solid var(--line); margin-bottom: 1.5rem; } .settings-card h3 { margin-bottom: .5rem; } .settings-card-desc { - color: var(--text-secondary); + color: var(--text-2); font-size: .85rem; margin-bottom: 1rem; } @@ -1966,24 +1967,24 @@ a.stat-card:hover { justify-content: space-between; align-items: center; padding: .5rem .75rem; - border-bottom: 1px solid rgba(48, 54, 61, 0.3); + border-bottom: 1px solid var(--line-soft); font-size: .9rem; gap: 1rem; } .settings-row:last-child { border-bottom: none; } .settings-label { - color: var(--text-secondary); + color: var(--text-2); font-weight: 500; white-space: nowrap; flex-shrink: 0; } .settings-value { - color: var(--text-primary); + color: var(--text-1); text-align: right; word-break: break-word; } .settings-value.mono { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: .85rem; } .settings-value-truncate { @@ -1996,25 +1997,27 @@ a.stat-card:hover { /* Sidebar bottom section */ .sidebar-bottom { margin-top: auto; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); } .sidebar-settings-link { - display: block; + display: flex; + align-items: center; + gap: .6rem; padding: .75rem 1.5rem; - color: var(--text-secondary); + color: var(--text-2); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; } .sidebar-settings-link:hover { - color: var(--accent-light); - background: rgba(0, 136, 204, 0.08); + color: var(--blue-bright); + background: var(--blue-dim); } .sidebar-settings-link.active { - color: var(--accent-light); - background: rgba(0, 136, 204, 0.12); - border-left: 3px solid var(--accent-blue); + color: var(--blue-bright); + background: var(--blue-dim); + border-left: 3px solid var(--blue); } /* --- Backup page: Storage overview grid --- */ @@ -2037,15 +2040,15 @@ a.stat-card:hover { font-size: .85rem; } .storage-stat-label { - color: var(--text-secondary); + color: var(--text-2); } .storage-stat-value { - color: var(--text-primary); + color: var(--text-1); } /* --- Backup page: App backup status (read-only) --- */ .backup-section-desc { - color: var(--text-secondary); + color: var(--text-2); font-size: .85rem; margin-bottom: 1rem; } @@ -2056,9 +2059,9 @@ a.stat-card:hover { margin-bottom: 1rem; } .app-backup-item { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 8px; + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: var(--radius); padding: .75rem 1rem; } .app-backup-header { @@ -2069,11 +2072,11 @@ a.stat-card:hover { .app-backup-name-link { font-weight: 500; font-size: .9rem; - color: var(--text-primary); + color: var(--text-1); text-decoration: none; } .app-backup-name-link:hover { - color: var(--accent-blue); + color: var(--blue); text-decoration: underline; } .app-backup-status-row { @@ -2083,7 +2086,7 @@ a.stat-card:hover { } .app-backup-size { font-size: .8rem; - color: var(--text-muted); + color: var(--text-3); } .app-backup-status { font-size: .8rem; @@ -2101,23 +2104,22 @@ a.stat-card:hover { flex-shrink: 0; } .app-backup-active { - color: var(--green); + color: var(--blue); } .app-backup-active::before { - background: var(--green); - box-shadow: 0 0 4px rgba(35, 134, 54, 0.4); + background: var(--blue); } .app-backup-inactive { - color: var(--text-muted); + color: var(--text-3); } .app-backup-inactive::before { - border: 1px solid var(--text-muted); + border: 1px solid var(--text-3); background: transparent; width: 6px; height: 6px; } .app-backup-na { - color: var(--text-muted); + color: var(--text-3); } .app-backup-na::before { content: '—'; @@ -2126,13 +2128,12 @@ a.stat-card:hover { border-radius: 0; background: none; border: none; - box-shadow: none; font-size: .8rem; } /* --- Backup page: Encryption key --- */ .repo-encryption { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); padding-top: .75rem; margin-bottom: .75rem; } @@ -2144,34 +2145,34 @@ a.stat-card:hover { margin-bottom: .5rem; } .restic-pw-field { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 6px; + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: var(--radius); padding: .4rem .6rem; - color: var(--text-primary); + color: var(--text-1); font-size: .85rem; width: 340px; max-width: 100%; } .repo-encryption-warn { font-size: .8rem; - color: var(--yellow); + color: var(--warn); line-height: 1.4; } /* --- Backup page: Restore type info banners --- */ .restore-info { padding: 0.5rem 0.75rem; - border-radius: 6px; + border-radius: var(--radius); font-size: 0.85rem; - background: rgba(59, 130, 246, 0.1); - border: 1px solid rgba(59, 130, 246, 0.3); - color: #93c5fd; + background: var(--blue-dim); + border: 1px solid var(--blue-dim); + color: var(--blue-bright); } .restore-info-partial { - background: rgba(251, 191, 36, 0.1); - border-color: rgba(251, 191, 36, 0.3); - color: #fcd34d; + background: var(--warn-dim); + border-color: var(--warn-dim); + color: var(--warn); } /* --- Backup page: Restore section --- */ @@ -2187,39 +2188,39 @@ a.stat-card:hover { } .restore-label { font-size: .85rem; - color: var(--text-secondary); + color: var(--text-2); min-width: 110px; } .restore-select { flex: 1; max-width: 400px; padding: .4rem .6rem; - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 6px; - color: var(--text-primary); + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: var(--radius); + color: var(--text-1); font-size: .85rem; font-family: inherit; } .restore-select option { - background: var(--bg-secondary); - color: var(--text-primary); + background: var(--bg-2); + color: var(--text-1); } .restore-paths { padding: .5rem 0; } .restore-warning { - background: var(--red-bg); - border: 1px solid rgba(218, 54, 51, 0.3); - border-radius: 8px; + background: var(--crit-dim); + border: 1px solid var(--crit-dim); + border-radius: var(--radius); padding: .75rem 1rem; font-size: .85rem; - color: var(--red); + color: var(--crit); line-height: 1.5; } .restore-confirm { font-size: .85rem; - color: var(--text-secondary); + color: var(--text-2); } .restore-confirm label { display: flex; @@ -2228,7 +2229,7 @@ a.stat-card:hover { cursor: pointer; } .restore-confirm input[type="checkbox"] { - accent-color: var(--red); + accent-color: var(--crit); } .restore-actions { padding-top: .25rem; @@ -2237,20 +2238,20 @@ a.stat-card:hover { /* --- Flash messages --- */ .flash { padding: .75rem 1rem; - border-radius: 8px; + border-radius: var(--radius); margin-bottom: 1rem; font-size: .85rem; border: 1px solid; } .flash-success { - background: var(--green-bg); - color: var(--green); - border-color: rgba(35, 134, 54, 0.3); + background: var(--blue-dim); + color: var(--blue); + border-color: var(--blue-dim); } .flash-error { - background: var(--red-bg); - color: var(--red); - border-color: rgba(218, 54, 51, 0.3); + background: var(--crit-dim); + color: var(--crit); + border-color: var(--crit-dim); } /* --- Settings page: Storage paths --- */ @@ -2260,9 +2261,9 @@ a.stat-card:hover { gap: .75rem; } .storage-path-item { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 8px; + background: var(--bg-2); + border: 1px solid var(--line); + border-radius: var(--radius); padding: 1rem; } .storage-path-header { @@ -2282,9 +2283,9 @@ a.stat-card:hover { font-size: .95rem; } .storage-path-path { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: .8rem; - color: var(--text-muted); + color: var(--text-3); } .storage-path-badges { display: flex; @@ -2304,7 +2305,7 @@ a.stat-card:hover { } .storage-path-meta { font-size: .8rem; - color: var(--text-muted); + color: var(--text-3); } .storage-path-actions { display: flex; @@ -2315,25 +2316,25 @@ a.stat-card:hover { .btn-xs { padding: .2rem .5rem; font-size: .75rem; - border-radius: 6px; + border-radius: var(--radius); } .btn-ghost { background: transparent; border: none; - color: var(--text-muted); + color: var(--text-3); padding: .1rem .3rem; } .btn-ghost:hover { - color: var(--accent-light); + color: var(--blue-bright); } .btn-danger-outline { background: transparent; - border: 1px solid rgba(218, 54, 51, 0.5); - color: var(--red); + border: 1px solid var(--crit-dim); + color: var(--crit); } .btn-danger-outline:hover { - background: var(--red-bg); - border-color: var(--red); + background: var(--crit-dim); + border-color: var(--crit); } .storage-app-details summary { font-size: .85rem; @@ -2352,7 +2353,7 @@ a.stat-card:hover { font-size: .85rem; } .storage-app-link { - color: var(--accent-light); + color: var(--blue-bright); text-decoration: none; } .storage-app-link:hover { @@ -2361,12 +2362,12 @@ a.stat-card:hover { /* Badge variants */ .badge-warn { - background: rgba(250, 204, 21, 0.15); - color: #facc15; + background: var(--warn-dim); + color: var(--warn); } .badge-error { - background: rgba(239, 68, 68, 0.15); - color: #ef4444; + background: var(--crit-dim); + color: var(--crit); } /* Disconnected storage path card */ @@ -2376,7 +2377,7 @@ a.stat-card:hover { } .storage-decommissioned { opacity: 0.6; - border-color: var(--border-color); + border-color: var(--line); } .storage-disconnected .storage-disconnected-info, .storage-decommissioned .storage-disconnected-info { @@ -2392,32 +2393,22 @@ a.stat-card:hover { margin-bottom: .5rem; } -/* Disconnected bar on dashboard/monitoring */ -.system-bar-disconnected { - background: repeating-linear-gradient( - -45deg, - rgba(239, 68, 68, 0.15), - rgba(239, 68, 68, 0.15) 5px, - transparent 5px, - transparent 10px - ); - height: 100%; - border-radius: 4px; -} +/* Disconnected/unknown metric — empty track, no fill, no color (v2). */ +.meter-empty .meter-fill { display: none; } /* Task progress bar (storage init — not disk usage zone gradient) */ .progress-bar-task { height: 8px; - background: var(--border-color); - border-radius: 4px; + background: var(--line); + border-radius: var(--radius); overflow: hidden; width: 100%; } .progress-bar-task .progress-fill { height: 100%; - background: var(--accent-blue); - border-radius: 4px; + background: var(--blue); + border-radius: var(--radius); transition: width 0.3s ease; } @@ -2438,10 +2429,10 @@ a.stat-card:hover { /* Responsive */ @media(max-width: 768px) { - .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--border-color); } + .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--line); } .nav-links { display: flex; padding: 0; overflow-x: auto; } .nav-links a { padding: .5rem 1rem; white-space: nowrap; } - .nav-links a.active { border-left: none; border-bottom: 2px solid var(--accent-blue); } + .nav-links a.active { border-left: none; border-bottom: 2px solid var(--blue); } .content { margin-left: 0; padding: 1rem; } body { flex-direction: column; } .stack-card { flex-direction: column; align-items: flex-start; gap: .75rem; } @@ -2475,10 +2466,10 @@ a.stat-card:hover { align-items: center; gap: .75rem; padding: .5rem .75rem; - border-radius: 8px; - color: var(--text-secondary); + border-radius: var(--radius); + color: var(--text-2); font-size: .9rem; - background: var(--bg-primary); + background: var(--bg-0); } .disk-step-icon { @@ -2487,13 +2478,13 @@ a.stat-card:hover { } .disk-step.disk-step-done { - color: var(--text-primary); + color: var(--text-1); } .disk-step.disk-step-active { - background: rgba(0, 136, 204, 0.08); - color: var(--accent-light); - border: 1px solid rgba(0, 136, 204, 0.2); + background: var(--blue-dim); + color: var(--blue-bright); + border: 1px solid var(--blue-dim); } .disk-progress-bar-wrap { @@ -2502,13 +2493,11 @@ a.stat-card:hover { gap: 1rem; } -.disk-progress-bar-wrap .system-bar { - flex: 1; -} +.disk-progress-bar-wrap .meter { flex: 1; } .deploy-storage-info { - background: var(--bg-primary); - border: 1px solid var(--border-color); + background: var(--bg-0); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; @@ -2517,7 +2506,7 @@ a.stat-card:hover { .deploy-storage-info h4 { font-size: .95rem; font-weight: 600; - color: var(--text-secondary); + color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; @@ -2531,7 +2520,7 @@ a.stat-card:hover { } .storage-app-link { - color: var(--accent-light); + color: var(--blue-bright); text-decoration: none; font-size: .9rem; } @@ -2541,8 +2530,8 @@ a.stat-card:hover { } /* Stale data cleanup */ .deploy-stale-data { - background: var(--card-bg); - border: 1px solid var(--orange); + background: var(--bg-1); + border: 1px solid var(--warn); border-radius: var(--radius); padding: 1.5rem; margin-top: 1rem; @@ -2551,12 +2540,12 @@ a.stat-card:hover { .deploy-stale-data h4 { margin: 0 0 0.5rem 0; - color: var(--orange); + color: var(--warn); } .stale-data-item { padding: 1rem; - background: rgba(255, 165, 0, 0.05); + background: var(--warn-dim); border-radius: var(--radius); margin-bottom: 0.75rem; } @@ -2567,20 +2556,20 @@ a.stat-card:hover { /* Red-filled danger buttons inside modal confirmation dialogs */ .modal-actions .btn-danger { - background: var(--red); + background: var(--crit); color: white; - border-color: var(--red); + border-color: var(--crit); } .modal-actions .btn-danger:hover { opacity: 0.85; - background: var(--red); + background: var(--crit); color: white; } /* Cross-drive backup card on deploy page */ .deploy-cross-drive { - background: var(--bg-secondary); - border: 1px solid var(--border-color); + background: var(--bg-2); + border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-top: 1rem; @@ -2589,7 +2578,7 @@ a.stat-card:hover { .deploy-cross-drive h4 { margin: 0 0 1rem 0; - color: var(--text-primary); + color: var(--text-1); } .cross-drive-nightly { @@ -2604,7 +2593,7 @@ a.stat-card:hover { } .cross-drive-item { - background: var(--bg-secondary); + background: var(--bg-2); border-radius: var(--radius); padding: .75rem 1rem; } @@ -2619,13 +2608,13 @@ a.stat-card:hover { .cross-drive-name { font-weight: 500; - color: var(--text-primary); + color: var(--text-1); text-decoration: none; } .cross-drive-name:hover { text-decoration: underline; - color: var(--accent-blue); + color: var(--blue); } .cross-drive-meta { @@ -2657,8 +2646,8 @@ a.stat-card:hover { width: 16px; height: 16px; border-radius: 50%; - border: 1px solid var(--text-muted); - color: var(--text-muted); + border: 1px solid var(--text-3); + color: var(--text-3); font-size: .65rem; font-weight: 700; font-style: italic; @@ -2674,14 +2663,13 @@ a.stat-card:hover { transform: translateX(-50%); width: 320px; padding: .75rem 1rem; - background: var(--bg-primary); - border: 1px solid var(--border-color); + background: var(--bg-0); + border: 1px solid var(--line); border-radius: var(--radius); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: .8rem; font-weight: 400; line-height: 1.5; - color: var(--text-secondary); + color: var(--text-2); z-index: 100; white-space: normal; } @@ -2699,7 +2687,7 @@ a.stat-card:hover { left: 50%; transform: translateX(-50%); border: 6px solid transparent; - border-top-color: var(--border-color); + border-top-color: var(--line); } /* Nightly backup status indicator (non-interactive) */ @@ -2718,33 +2706,32 @@ a.stat-card:hover { } .nightly-enabled { - background: var(--green); - box-shadow: 0 0 4px rgba(35, 134, 54, 0.4); + background: var(--blue); } .nightly-disabled { - background: var(--text-muted); + background: var(--text-3); opacity: 0.5; } /* meta-badge-fail */ .meta-badge-fail { - background: var(--red-bg); - color: var(--red); + background: var(--crit-dim); + color: var(--crit); } /* ─── Unified App Backup Rows ──────────────────────────────────────── */ .app-backup-row { - border: 1px solid var(--border-color); - border-radius: 6px; + border: 1px solid var(--line); + border-radius: var(--radius); margin-bottom: .5rem; - background: var(--bg-secondary); + background: var(--bg-2); overflow: hidden; } -.app-backup-row[data-status="red"] { border-left: 3px solid var(--red); } -.app-backup-row[data-status="yellow"] { border-left: 3px solid var(--yellow); } -.app-backup-row[data-status="green"] { border-left: 3px solid var(--green); } -.app-backup-row[data-status="auto"] { border-left: 3px solid var(--text-muted); } +.app-backup-row[data-status="red"] { border-left: 3px solid var(--crit); } +.app-backup-row[data-status="yellow"] { border-left: 3px solid var(--warn); } +.app-backup-row[data-status="green"] { border-left: 3px solid var(--blue); } +.app-backup-row[data-status="auto"] { border-left: 3px solid var(--text-3); } .app-backup-row-header { display: flex; @@ -2768,7 +2755,7 @@ a.stat-card:hover { gap: .5rem; } .expand-icon { - color: var(--text-muted); + color: var(--text-3); font-size: .75rem; flex-shrink: 0; } @@ -2781,14 +2768,14 @@ a.stat-card:hover { flex-shrink: 0; display: inline-block; } -.status-dot.status-green { background: var(--green); box-shadow: 0 0 0 2px rgba(76,175,80,.2); } -.status-dot.status-yellow { background: var(--yellow); box-shadow: 0 0 0 2px rgba(255,193,7,.2); } -.status-dot.status-red { background: var(--red); box-shadow: 0 0 0 2px rgba(244,67,54,.2); } -.status-dot.status-auto { background: var(--text-muted); opacity: .6; } +.status-dot.status-green { background: var(--blue); } +.status-dot.status-yellow { background: var(--warn); } +.status-dot.status-red { background: var(--crit); } +.status-dot.status-auto { background: var(--text-3); opacity: .6; } /* Expanded detail */ .app-backup-row-detail { - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); padding: .75rem 1rem; } .backup-layers { @@ -2810,44 +2797,44 @@ a.stat-card:hover { .layer-label { font-weight: 500; min-width: 14rem; - color: var(--text-secondary); + color: var(--text-2); } .layer-badge { - background: rgba(0,136,204,.1); - color: var(--accent-light); + background: var(--blue-dim); + color: var(--blue-bright); padding: .1rem .45rem; - border-radius: 3px; + border-radius: var(--radius); font-size: .75rem; } .layer-na { - color: var(--text-muted); + color: var(--text-3); font-style: italic; font-size: .82rem; } .layer-method { - color: var(--text-secondary); + color: var(--text-2); font-size: .82rem; } .layer-dest { - color: var(--text-secondary); + color: var(--text-2); font-size: .82rem; } .layer-schedule { - color: var(--text-muted); + color: var(--text-3); font-size: .8rem; } .layer-last { - color: var(--text-muted); + color: var(--text-3); font-size: .8rem; margin-left: .25rem; } .layer-auto-ok { - color: var(--green); + color: var(--blue); font-size: .85rem; margin-right: .5rem; } .layer-unconfigured { - color: var(--yellow); + color: var(--warn); font-weight: 500; font-size: .85rem; } @@ -2859,38 +2846,38 @@ a.stat-card:hover { .btn-xs { padding: .15rem .5rem; font-size: .75rem; - border-radius: 3px; + border-radius: var(--radius); } .layer-warnings { margin-top: .5rem; padding-top: .5rem; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); } .backup-layer-warning { font-size: .82rem; - color: var(--yellow); + color: var(--warn); padding: .2rem 0; } -.text-ok { color: var(--green); } -.text-error { color: var(--red); } -.text-muted { color: var(--text-muted); } +.text-ok { color: var(--blue); } +.text-error { color: var(--crit); } +.text-muted { color: var(--text-3); } .tier-label { font-weight: 600; min-width: 5rem; - color: var(--text); + color: var(--text-1); } .tier-location { - color: var(--text-muted); + color: var(--text-3); font-size: .85rem; } .tier-contents { - color: var(--text-muted); + color: var(--text-3); font-size: .8rem; font-style: italic; margin-left: .25rem; } .tier-size { - color: var(--text-muted); + color: var(--text-3); font-size: .8rem; margin-left: .25rem; } @@ -2902,22 +2889,22 @@ a.stat-card:hover { /* ── Debug page ────────────────────────────────────────── */ .debug-banner { - background: rgba(255, 152, 0, 0.12); - border: 1px solid rgba(255, 152, 0, 0.35); + background: var(--warn-dim); + border: 1px solid var(--warn-dim); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.5rem; - color: var(--yellow); + color: var(--warn); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; } -.debug-banner strong { color: var(--orange); } +.debug-banner strong { color: var(--warn); } .debug-section { - background: var(--bg-card); - border: 1px solid var(--border-color); + background: var(--bg-1); + border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden; @@ -2935,11 +2922,11 @@ a.stat-card:hover { .debug-section-header h3 { font-size: 0.95rem; font-weight: 600; - color: var(--text-primary); + color: var(--text-1); margin: 0; } .debug-section-toggle { - color: var(--text-muted); + color: var(--text-3); font-size: 0.8rem; transition: transform .2s; } @@ -2947,7 +2934,7 @@ a.stat-card:hover { .debug-section-body { display: none; padding: 0 1rem 1rem; - border-top: 1px solid var(--border-color); + border-top: 1px solid var(--line); } .debug-section.open .debug-section-body { display: block; } @@ -2962,24 +2949,24 @@ a.stat-card:hover { .debug-result { font-size: 0.8rem; padding: 0.5rem 0.75rem; - border-radius: 6px; + border-radius: var(--radius); margin-top: 0.5rem; - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); } .debug-result-ok { - color: var(--green); - background: var(--green-bg); - border: 1px solid rgba(35, 134, 54, 0.3); + color: var(--blue); + background: var(--blue-dim); + border: 1px solid var(--blue-dim); } .debug-result-error { - color: var(--red); - background: var(--red-bg); - border: 1px solid rgba(218, 54, 51, 0.3); + color: var(--crit); + background: var(--crit-dim); + border: 1px solid var(--crit-dim); } .debug-result-pending { - color: var(--yellow); - background: var(--yellow-bg); - border: 1px solid rgba(210, 153, 34, 0.3); + color: var(--warn); + background: var(--warn-dim); + border: 1px solid var(--warn-dim); } .debug-kv-grid { @@ -2989,8 +2976,8 @@ a.stat-card:hover { font-size: 0.85rem; margin-bottom: 0.75rem; } -.debug-kv-grid dt { color: var(--text-muted); font-weight: 500; white-space: nowrap; } -.debug-kv-grid dd { color: var(--text-primary); margin: 0; } +.debug-kv-grid dt { color: var(--text-3); font-weight: 500; white-space: nowrap; } +.debug-kv-grid dd { color: var(--text-1); margin: 0; } .debug-table { width: 100%; @@ -3000,37 +2987,37 @@ a.stat-card:hover { } .debug-table th { text-align: left; - color: var(--text-muted); + color: var(--text-3); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.35rem 0.5rem; - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--line); } .debug-table td { padding: 0.35rem 0.5rem; - color: var(--text-primary); - border-bottom: 1px solid rgba(48, 54, 61, 0.4); + color: var(--text-1); + border-bottom: 1px solid var(--line-soft); } .debug-table tr:last-child td { border-bottom: none; } .debug-log-viewer { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 6px; + background: var(--bg-0); + border: 1px solid var(--line); + border-radius: var(--radius); padding: 0.5rem; max-height: 400px; overflow-y: auto; - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-data); font-size: 0.75rem; line-height: 1.5; } .debug-log-entry { white-space: pre-wrap; word-break: break-all; } -.debug-log-debug { color: var(--text-muted); } -.debug-log-info { color: var(--text-primary); } -.debug-log-warn { color: var(--yellow); } -.debug-log-error { color: var(--red); } +.debug-log-debug { color: var(--text-3); } +.debug-log-info { color: var(--text-1); } +.debug-log-warn { color: var(--warn); } +.debug-log-error { color: var(--crit); } .debug-log-controls { display: flex; @@ -3044,52 +3031,51 @@ a.stat-card:hover { padding: 0.25rem 0.5rem; } .debug-log-controls .btn.active { - background: var(--accent-blue); + background: var(--blue); color: #fff; } .debug-log-count { font-size: 0.75rem; - color: var(--text-muted); + color: var(--text-3); margin-left: auto; } .debug-confirm-input { - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 6px; + background: var(--bg-0); + border: 1px solid var(--line); + border-radius: var(--radius); padding: 0.4rem 0.75rem; - color: var(--text-primary); - font-family: 'JetBrains Mono', monospace; + color: var(--text-1); + font-family: var(--font-data); font-size: 0.85rem; width: 120px; } .debug-confirm-input:focus { outline: none; - border-color: var(--red); - box-shadow: 0 0 0 2px rgba(218, 54, 51, 0.2); + border-color: var(--crit); } /* Debug page: red-filled danger buttons for destructive debug actions */ .debug-section .btn-danger { - background: var(--red); + background: var(--crit); color: #fff; border: none; - border-radius: 6px; + border-radius: var(--radius); padding: 0.4rem 0.85rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: background .15s, opacity .15s; } -.debug-section .btn-danger:hover { background: #e5534b; } +.debug-section .btn-danger:hover { background: var(--crit); } .debug-section .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } .debug-spinner { display: inline-block; width: 14px; height: 14px; - border: 2px solid var(--text-muted); - border-top-color: var(--accent-blue); + border: 2px solid var(--text-3); + border-top-color: var(--blue); border-radius: 50%; animation: debug-spin 0.6s linear infinite; vertical-align: middle; @@ -3102,47 +3088,47 @@ a.stat-card:hover { .geo-selected-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; } .geo-tag { display: inline-flex; align-items: center; gap: 0.3rem; - background: rgba(0,136,204,0.15); color: var(--accent-light); - padding: 0.25rem 0.55rem; border-radius: 4px; font-size: 0.85rem; + background: var(--blue-dim); color: var(--blue-bright); + padding: 0.25rem 0.55rem; border-radius: var(--radius); font-size: 0.85rem; white-space: nowrap; } -.geo-tag-hu { background: rgba(35,134,54,0.2); color: var(--green); } +.geo-tag-hu { background: var(--blue-dim); color: var(--blue); } .geo-tag-sm { font-size: 0.75rem; padding: 0.15rem 0.4rem; } .geo-tag-remove { cursor: pointer; opacity: 0.7; font-size: 1.1em; line-height: 1; } .geo-tag-remove:hover { opacity: 1; } .geo-country-list { - position: absolute; z-index: 10; background: var(--bg-card); - border: 1px solid var(--border-color); border-radius: 6px; + position: absolute; z-index: 10; background: var(--bg-1); + border: 1px solid var(--line); border-radius: var(--radius); max-height: 220px; overflow-y: auto; width: 100%; margin-top: 2px; display: none; } .geo-country-option { padding: 0.4rem 0.75rem; cursor: pointer; font-size: 0.9rem; - color: var(--text-primary); + color: var(--text-1); } -.geo-country-option:hover { background: rgba(0,136,204,0.1); } -.geo-country-option small { color: var(--text-muted); } +.geo-country-option:hover { background: var(--blue-dim); } +.geo-country-option small { color: var(--text-3); } .geo-app-override-row { display: flex; align-items: center; gap: 0.5rem; - padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); + padding: 0.5rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } -.geo-app-override-row strong { min-width: 120px; color: var(--text-primary); } +.geo-app-override-row strong { min-width: 120px; color: var(--text-1); } .geo-edit-overlay { - background: var(--bg-secondary); border: 1px solid var(--border-color); - border-radius: 8px; padding: 1rem; margin-top: 0.5rem; + background: var(--bg-2); border: 1px solid var(--line); + border-radius: var(--radius); padding: 1rem; margin-top: 0.5rem; } .geo-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.2rem; max-height: 250px; overflow-y: auto; margin-top: 0.5rem; } -.geo-edit-item { font-size: 0.85rem; cursor: pointer; padding: 0.15rem 0; color: var(--text-primary); } +.geo-edit-item { font-size: 0.85rem; cursor: pointer; padding: 0.15rem 0; color: var(--text-1); } .geo-edit-item input { margin-right: 0.3rem; } .btn-danger-outline { - background: transparent; color: var(--red); border: 1px solid var(--red); - border-radius: 6px; padding: 0.2rem 0.5rem; cursor: pointer; font-size: 0.8rem; + background: transparent; color: var(--crit); border: 1px solid var(--crit); + border-radius: var(--radius); padding: 0.2rem 0.5rem; cursor: pointer; font-size: 0.8rem; } -.btn-danger-outline:hover { background: var(--red-bg); } +.btn-danger-outline:hover { background: var(--crit-dim); } /* ============================================================================ Agent drive lists (overview + init/attach selector) — storage authz redesign. @@ -3150,53 +3136,53 @@ a.stat-card:hover { ============================================================================ */ .drive-list { display: flex; flex-direction: column; gap: .6rem; margin-top: .25rem; } .drive-card { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-left: 4px solid var(--gray, #6e7681); - border-radius: 12px; + background: var(--bg-1); + border: 1px solid var(--line); + border-left: 4px solid var(--text-3); + border-radius: var(--radius); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .55rem; } -.drive-card.role-user-data { border-left-color: var(--accent-blue); } +.drive-card.role-user-data { border-left-color: var(--blue); } .drive-card.role-system, -.drive-card.role-backup { border-left-color: var(--yellow); } +.drive-card.role-backup { border-left-color: var(--warn); } .drive-card.is-selectable { cursor: pointer; transition: border-color .15s, background .15s; } -.drive-card.is-selectable:hover { border-color: var(--accent-light); } -.drive-card.is-picked { border-color: var(--accent-light); background: rgba(0, 136, 204, 0.06); } +.drive-card.is-selectable:hover { border-color: var(--blue-bright); } +.drive-card.is-picked { border-color: var(--blue-bright); background: var(--blue-dim); } .drive-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .drive-id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } -.drive-name { font-size: .95rem; font-weight: 600; color: var(--text-primary); } +.drive-name { font-size: .95rem; font-weight: 600; color: var(--text-1); } .drive-sub { - font-size: .78rem; color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; word-break: break-all; + font-size: .78rem; color: var(--text-3); + font-family: var(--font-data); word-break: break-all; } .drive-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end; } .drive-cap { display: flex; flex-direction: column; gap: .3rem; } -.drive-cap .system-bar { height: 8px; } -.drive-cap-label { font-size: .75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; } +.drive-cap .meter-track { height: 3px; } +.drive-cap-label { font-size: .75rem; color: var(--text-3); font-family: var(--font-data); } .drive-actions { display: flex; flex-wrap: wrap; gap: .4rem; } .drive-select { display: flex; align-items: center; gap: .5rem; } /* badges missing from the global sheet */ -.badge-ok { background: rgba(35, 134, 54, 0.18); color: #3fb950; } -.badge-neutral { background: rgba(139, 148, 158, 0.18); color: #8b949e; } -.badge-lock { background: rgba(210, 153, 34, 0.18); color: var(--yellow); } -.badge-muted { background: rgba(110, 118, 129, 0.18); color: var(--text-muted); } -.badge-info { background: rgba(0, 136, 204, 0.18); color: var(--accent-light); } +.badge-ok { background: var(--blue-dim); color: var(--blue); } +.badge-neutral { background: var(--bg-2); color: var(--text-2); } +.badge-lock { background: var(--warn-dim); color: var(--warn); } +.badge-muted { background: var(--bg-2); color: var(--text-3); } +.badge-info { background: var(--blue-dim); color: var(--blue-bright); } /* Backup-page tier divider between the whole-guest section and the per-app section. */ .backup-tier-divider { margin: 2rem 0 0.25rem; padding-top: 1.25rem; - border-top: 1px solid var(--border-color); font-size: 1.05rem; + border-top: 1px solid var(--line); font-size: 1.05rem; } /* Per-card storage purpose description + the tiering one-liner above the drive list. */ -.drive-purpose { font-size: .8rem; color: var(--text-secondary); line-height: 1.4; } +.drive-purpose { font-size: .8rem; color: var(--text-2); line-height: 1.4; } .drive-tiering-note { - font-size: .8rem; color: var(--text-secondary); line-height: 1.4; + font-size: .8rem; color: var(--text-2); line-height: 1.4; margin: 0 0 .75rem; padding: .5rem .75rem; - background: rgba(0, 136, 204, 0.06); border-left: 3px solid var(--accent-blue); border-radius: 6px; + background: var(--blue-dim); border-left: 3px solid var(--blue); border-radius: var(--radius); } .badge .lock-ico { margin-right: .25rem; } -span.mono, .mono { font-family: 'JetBrains Mono', monospace; } +span.mono, .mono { font-family: var(--font-data); } /* Type-to-confirm modal (destructive user-data eject/wipe) */ .confirm-overlay { @@ -3204,11 +3190,65 @@ span.mono, .mono { font-family: 'JetBrains Mono', monospace; } display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .confirm-box { - background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; - max-width: 480px; width: 100%; padding: 1.4rem; box-shadow: 0 12px 40px rgba(0,0,0,.5); + background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); + max-width: 480px; width: 100%; padding: 1.4rem; } .confirm-box h3 { margin: 0 0 .75rem; font-size: 1.05rem; } .confirm-box .confirm-apps { margin: .5rem 0; padding-left: 1.1rem; } .confirm-box .confirm-apps li { margin: .15rem 0; } .confirm-box .confirm-input { margin: .9rem 0 .4rem; } .confirm-box .form-actions { display: flex; gap: .6rem; margin-top: 1rem; } + +/* =================================================================== + Design system v2 primitives (TASK-D0) + =================================================================== */ + +/* Panel — flat surface: bg-1, hairline border, 2px radius, no shadow. */ +.panel { + background: var(--bg-1); + border: 1px solid var(--line); + border-radius: var(--radius); +} + +/* Boxless section header: h3 + right-aligned muted hint over a hairline. */ +.section-h { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 1rem; + border-bottom: 1px solid var(--line); + padding-bottom: .5rem; + margin: 1.75rem 0 1rem; +} +.section-h h3 { margin-bottom: 0; } +.section-h .hint { + font-size: .78rem; + color: var(--text-3); +} + +/* List — one panel, rows separated by soft hairlines, 2px left state edge. */ +.list { + background: var(--bg-1); + border: 1px solid var(--line); + border-radius: var(--radius); +} +.list .row { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + padding: .85rem 1.25rem; + border-top: 1px solid var(--line-soft); +} +.list .row:first-child { border-top: none; } +.list .row::before { + content: ''; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 2px; + background: transparent; +} +.list .row.state-run::before, +.list .row.state-progress::before { background: var(--blue); } +.list .row.state-warn::before { background: var(--warn); }