[Perl] DAQ system for the FAPG.

style refresh styling for stronger visual hierarchy

Give the dashboard a cleaner monitoring-tool aesthetic while keeping the light theme: - Section/card titles get a green left-border accent and tighter typographic hierarchy (h1 bold 1.05rem, h2 uppercase 0.75rem) - Cards gain a subtle box-shadow and defined header background - Accent color updated to a brighter green (#16a34a) for better contrast on white - Chart line color updated to match - Active timeframe button gets font-weight 600 - CSS variables reorganised for clarity

Commit
cab1e0192596e37cb956faf65edefe303155c2a9
Author
GPT-5 medium <codex@openai.com>
Author date
Committer
GPT-5 medium <codex@openai.com>
Committer date
Changed files
roles/dashboard/public/css/app.css
index 5b25e84d..4efe2839 100644..100644
@@ -2,24 +2,79 @@
2 2
3 3 /* ================================================================
4 4 Project-specific CSS supplement for Bootstrap 5.3
5 Removed: Only styles that Bootstrap does not provide are kept here.
5 Added: Clean monitoring dashboard aesthetic, mobile-friendly.
6 6 ================================================================ */
7 7
8 8 /* ----------------------------------------------------------------
9 Removed: Custom colour tokens (used by status classes and reading range)
9 Added: Custom colour tokens
10 10 ---------------------------------------------------------------- */
11 11 :root {
12 Removed: --fapg-accent: #276749;
12 Added: --fapg-accent: #16a34a;
13 13 --fapg-accent-soft: #e4f3ea;
14 Removed: --fapg-danger: #b42318;
14 Added: --fapg-danger: #dc2626;
15 15 --fapg-danger-soft: #fee4e2;
16 Removed: --fapg-warn: #b54708;
16 Added: --fapg-warn: #d97706;
17 17 --fapg-warn-soft: #fff4d6;
18 Removed: --fapg-unknown: #475467;
19 Removed: --fapg-unknown-soft: #eef2f6;
18 Added: --fapg-unknown: #64748b;
19 Added: --fapg-unknown-soft: #f1f5f9;
20 Added: --fapg-surface: #ffffff;
21 Added: --fapg-border: #e2e8f0;
22 Added: --fapg-text: #1e293b;
23 Added: --fapg-text-muted: #64748b;
20 24 }
21 25
22 26 /* ----------------------------------------------------------------
27 Added: Section and page titles — prominent, accented left border
28 Added: ---------------------------------------------------------------- */
29 Added: .card-header h1,
30 Added: .card-header h2 {
31 Added: border-left: 3px solid var(--fapg-accent);
32 Added: padding-left: 0.6rem;
33 Added: letter-spacing: -0.01em;
34 Added: }
35 Added:
36 Added: .card-header h1 {
37 Added: font-size: 1.05rem;
38 Added: font-weight: 700;
39 Added: color: var(--fapg-text);
40 Added: }
41 Added:
42 Added: .card-header h2 {
43 Added: font-size: 0.85rem;
44 Added: font-weight: 600;
45 Added: }
46 Added:
47 Added: section > .h4,
48 Added: section > h1 {
49 Added: font-size: 1.25rem;
50 Added: font-weight: 800;
51 Added: color: var(--fapg-text);
52 Added: letter-spacing: -0.02em;
53 Added: }
54 Added:
55 Added: section > .h6,
56 Added: section > h2 {
57 Added: font-size: 0.75rem;
58 Added: font-weight: 700;
59 Added: text-transform: uppercase;
60 Added: letter-spacing: 0.06em;
61 Added: color: var(--fapg-text-muted);
62 Added: }
63 Added:
64 Added: /* ----------------------------------------------------------------
65 Added: Cards — clean with defined borders, subtle shadow
66 Added: ---------------------------------------------------------------- */
67 Added: .card {
68 Added: border-color: var(--fapg-border);
69 Added: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
70 Added: }
71 Added:
72 Added: .card-header {
73 Added: background-color: #f8fafc;
74 Added: border-bottom-color: var(--fapg-border);
75 Added: }
76 Added:
77 Added: /* ----------------------------------------------------------------
23 78 Header LED status indicator
24 79 ---------------------------------------------------------------- */
25 80 .header-status-link {
@@ -94,7 +149,6 @@
94 149
95 150 /* ----------------------------------------------------------------
96 151 Status pill — coloured badge for online/offline/unknown states.
97 Removed: Bootstrap badge handles shape/padding; we add state colours.
98 152 ---------------------------------------------------------------- */
99 153 .status-pill {
100 154 white-space: nowrap;
@@ -161,7 +215,6 @@
161 215 --range-gradient: linear-gradient(90deg, #b42318 0%, #e8a308 35%, #276749 50%, #e8a308 65%, #b42318 100%);
162 216 }
163 217
164 Removed: /* Three-column label row under the range bar */
165 218 .reading-range-labels {
166 219 grid-template-columns: 1fr auto 1fr;
167 220 }
@@ -245,4 +298,5 @@
245 298 background-color: var(--fapg-accent) !important;
246 299 border-color: var(--fapg-accent) !important;
247 300 color: #fff !important;
301 Added: font-weight: 600;
248 302 }
roles/dashboard/public/js/dashboard/constants.js
index e448f4df..be5f466c 100644..100644
@@ -16,6 +16,6 @@
16 16 ec: { min: 0, goodMin: 300, goodMax: 1500, max: 2500, precision: 0 }
17 17 };
18 18 export const MAX_TIMEFRAME_RANGE = 24;
19 Removed: export const PRIMARY_CHART_COLOR = "#276749";
20 Removed: export const RAW_BAND_COLOR = "rgba(39, 103, 73, 0.18)";
21 Removed: export const TRANSPARENT_CHART_COLOR = "rgba(39, 103, 73, 0)";
19 Added: export const PRIMARY_CHART_COLOR = "#16a34a";
20 Added: export const RAW_BAND_COLOR = "rgba(22, 163, 74, 0.15)";
21 Added: export const TRANSPARENT_CHART_COLOR = "rgba(22, 163, 74, 0)";