Joseph Doherty
eb1d6872ef
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.
76 lines
1.7 KiB
CSS
76 lines
1.7 KiB
CSS
/* ScadaLink Central UI – global styles. Loaded from Host App.razor as
|
||
`_content/ScadaLink.CentralUI/css/site.css`. */
|
||
|
||
.sidebar {
|
||
min-width: 220px;
|
||
max-width: 220px;
|
||
min-height: 100vh;
|
||
background-color: var(--bs-dark);
|
||
}
|
||
|
||
.sidebar .nav-link {
|
||
color: var(--bs-gray-500);
|
||
padding: 0.4rem 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.sidebar .nav-link:hover {
|
||
color: var(--bs-white);
|
||
background-color: var(--bs-gray-700);
|
||
}
|
||
|
||
.sidebar .nav-link.active {
|
||
color: var(--bs-white);
|
||
background-color: var(--bs-primary);
|
||
/* Left accent so active state isn't carried by color alone. */
|
||
border-left: 3px solid var(--bs-primary);
|
||
padding-left: calc(1rem - 3px);
|
||
}
|
||
|
||
.sidebar .nav-section-header {
|
||
color: var(--bs-gray-600);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
padding: 0.75rem 1rem 0.25rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
.sidebar .brand {
|
||
color: var(--bs-white);
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
padding: 1rem;
|
||
border-bottom: 1px solid var(--bs-gray-700);
|
||
}
|
||
|
||
/* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
|
||
container removes the fixed width; restore full width on mobile. */
|
||
@media (max-width: 991.98px) {
|
||
.sidebar {
|
||
min-width: 100%;
|
||
max-width: 100%;
|
||
min-height: auto;
|
||
}
|
||
}
|
||
|
||
#reconnect-modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 9999;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
#reconnect-modal .modal-content {
|
||
max-width: 400px;
|
||
padding: 2rem;
|
||
text-align: center;
|
||
background: var(--bs-white);
|
||
border-radius: 0.5rem;
|
||
}
|