|
|
@@ -1,4 +1,83 @@
|
|
|
+@import "./login/index.css";
|
|
|
+
|
|
|
+/*
|
|
|
+Background layers
|
|
|
+
|
|
|
+--bg-base: #14171c — app background
|
|
|
+--bg-surface: #1c2027 — cards/panels
|
|
|
+--bg-surface-raised: #262b34 — modals, dropdowns, hover states
|
|
|
+--bg-inset: #0e1014 — sunken elements (input fields, code blocks)
|
|
|
+
|
|
|
+Text
|
|
|
+
|
|
|
+--text-primary: #eef1f5
|
|
|
+--text-secondary: #9aa3af
|
|
|
+--text-tertiary: #5c6470
|
|
|
+
|
|
|
+Accent (interactive/brand)
|
|
|
+
|
|
|
+--accent: #4f9cf9 — primary actions, active toggles, links
|
|
|
+--accent-hover: #6bacfa
|
|
|
+--accent-muted: #2a3b52 — subtle backgrounds for selected/active rows
|
|
|
+
|
|
|
+Borders
|
|
|
+
|
|
|
+--border-subtle: #2a2f38
|
|
|
+--border-strong: #3a4049
|
|
|
+Semantic / device-state colors
|
|
|
+
|
|
|
+These matter a lot for a HA UI since you're constantly showing on/off, alerts, and sensor readings:
|
|
|
+
|
|
|
+--state-on: #f5b942 — entity "on" (warm amber reads well as "light is on," avoids clashing with accent blue)
|
|
|
+--state-off: #4a5058 — entity "off" (neutral gray, not red — off isn't an error)
|
|
|
+--success: #4caf7d — armed, locked, connected, healthy
|
|
|
+--warning: #e8a33d — low battery, unavailable-but-not-critical
|
|
|
+--danger: #e5484d — alarm triggered, offline, critical sensor
|
|
|
+--info: #4f9cf9 — same as accent, reuse for info badges
|
|
|
+*/
|
|
|
+
|
|
|
+:root {
|
|
|
+ /* Backgrounds */
|
|
|
+ --bg-base: #14171c;
|
|
|
+ --bg-surface: #1c2027;
|
|
|
+ --bg-surface-raised: #262b34;
|
|
|
+ --bg-inset: #0e1014;
|
|
|
+
|
|
|
+ /* Text */
|
|
|
+ --text-primary: #eef1f5;
|
|
|
+ --text-secondary: #9aa3af;
|
|
|
+ --text-tertiary: #5c6470;
|
|
|
+
|
|
|
+ /* Accent */
|
|
|
+ --accent: #4f9cf9;
|
|
|
+ --accent-hover: #6bacfa;
|
|
|
+ --accent-muted: #2a3b52;
|
|
|
+
|
|
|
+ /* Borders */
|
|
|
+ --border-subtle: #2a2f38;
|
|
|
+ --border-strong: #3a4049;
|
|
|
+
|
|
|
+ /* Semantic / device state */
|
|
|
+ --state-on: #f5b942;
|
|
|
+ --state-off: #4a5058;
|
|
|
+ --success: #4caf7d;
|
|
|
+ --warning: #e8a33d;
|
|
|
+ --danger: #e5484d;
|
|
|
+ --info: #4f9cf9;
|
|
|
+}
|
|
|
+
|
|
|
+*{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+body, html{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
body{
|
|
|
- background: orange;
|
|
|
- color: black;
|
|
|
+ background: var(--bg-base);
|
|
|
+ color: var(--text-primary);
|
|
|
}
|
