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

refactor(ui/shared): migrate sidebar CSS to Bootstrap variables

Browse Source 
Replaces hardcoded sidebar / nav-link hex colors with Bootstrap CSS
custom properties (var(--bs-dark), var(--bs-primary), var(--bs-gray-*),
var(--bs-white)). Visual parity preserved; rebrand/dark-mode work
later can override the variables without touching this file.

Only the reconnect overlay rgba(0,0,0,0.5) is left as a literal —
Bootstrap doesn't ship a backdrop-overlay token.
This commit is contained in:
Joseph Doherty
2026-05-12 03:57:45 -04:00
parent 8038aa7cb5
commit eb1d6872ef
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,30 +5,30 @@
min-width: 220px; min-width: 220px;
max-width: 220px; max-width: 220px;
min-height: 100vh; min-height: 100vh;
background-color: #212529; background-color: var(--bs-dark);
} }
.sidebar .nav-link { .sidebar .nav-link {
color: #adb5bd; color: var(--bs-gray-500);
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
.sidebar .nav-link:hover { .sidebar .nav-link:hover {
color: #fff; color: var(--bs-white);
background-color: #343a40; background-color: var(--bs-gray-700);
} }
.sidebar .nav-link.active { .sidebar .nav-link.active {
color: #fff; color: var(--bs-white);
background-color: #0d6efd; background-color: var(--bs-primary);
/* Left accent so active state isn't carried by color alone. */ /* Left accent so active state isn't carried by color alone. */
border-left: 3px solid #0d6efd; border-left: 3px solid var(--bs-primary);
padding-left: calc(1rem - 3px); padding-left: calc(1rem - 3px);
} }
.sidebar .nav-section-header { .sidebar .nav-section-header {
color: #6c757d; color: var(--bs-gray-600);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
@@ -38,11 +38,11 @@
} }
.sidebar .brand { .sidebar .brand {
color: #fff; color: var(--bs-white);
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid #343a40; border-bottom: 1px solid var(--bs-gray-700);
} }
/* When the sidebar is collapsed under <lg viewports the Bootstrap collapse /* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
@@ -70,6 +70,6 @@
max-width: 400px; max-width: 400px;
padding: 2rem; padding: 2rem;
text-align: center; text-align: center;
background: #fff; background: var(--bs-white);
border-radius: 0.5rem; border-radius: 0.5rem;
} }