dohertj2/scadalink-design
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(centralui): rebrand web UI to ScadaBridge + technical-light theme

Browse Source 
Rename the user-facing product name from ScadaLink to ScadaBridge across
the six display strings (browser title, sidebar brand, login + not-authorized
headings, dashboard welcome/subtitle). Namespaces, assemblies, config keys,
and _content/ScadaLink.CentralUI asset routes are unchanged.

Apply the technical-light design system: vendor theme.css + IBM Plex fonts
into the CentralUI RCL, include theme.css globally (after Bootstrap so its
--bs-* token overrides win), and restyle the layout chrome to a light
sidebar — white surface, hairline rules, ink text, accent-blue active item,
the brand accent mark. Page markup stays Bootstrap and inherits the warm
paper background, Plex type, accent, and hairline borders via the tokens.

Tests: build 0 warnings; bUnit 542 passed; Playwright 64 passed.
This commit is contained in:
Joseph Doherty
2026-05-22 07:03:46 -04:00
parent b628b869fa
commit b07f43a308
14 changed files with 416 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/ScadaLink.CentralUI/wwwroot/css/site.css
View File

@@ -5,7 +5,8 @@
min-width: 220px;
max-width: 220px;
height: 100vh;
background-color: var(--bs-dark);
background: var(--card);
border-right: 1px solid var(--rule-strong);
}
/* Keep the sidebar pinned to the viewport on lg+ so it stays visible even
@@ -22,40 +23,47 @@
}
.sidebar .nav-link {
color: var(--bs-gray-500);
color: var(--ink-soft);
padding: 0.4rem 1rem;
font-size: 0.9rem;
}
.sidebar .nav-link:hover {
color: var(--bs-white);
background-color: var(--bs-gray-700);
color: var(--ink);
background-color: var(--paper);
}
.sidebar .nav-link.active {
color: var(--bs-white);
background-color: var(--bs-primary);
color: var(--accent-deep);
background-color: var(--paper);
font-weight: 600;
/* Left accent so active state isn't carried by color alone. */
border-left: 3px solid var(--bs-primary);
border-left: 3px solid var(--accent);
padding-left: calc(1rem - 3px);
}
.sidebar .nav-section-header {
color: var(--bs-gray-600);
font-size: 0.75rem;
color: var(--ink-faint);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
letter-spacing: 0.07em;
padding: 0.75rem 1rem 0.25rem;
margin-top: 0.5rem;
}
.sidebar .brand {
color: var(--bs-white);
color: var(--ink);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 1rem;
border-bottom: 1px solid var(--bs-gray-700);
border-bottom: 1px solid var(--rule);
}
/* The single accent glyph in the brand mark. */
.sidebar .brand .mark {
color: var(--accent);
}
/* When the sidebar is collapsed under <lg viewports the Bootstrap collapse