f7b10f2ff7
ConfirmDialog locks body scroll via IJSRuntime + Bootstrap's modal-open class on show, restores on hide. Escape key now closes the dialog; default ConfirmButtonClass flipped from btn-danger to btn-primary so non-destructive confirms aren't red. Destructive callsites (Delete, Discard) get explicit ConfirmButtonClass="btn-danger". ToastNotification adds aria-live="polite" + aria-atomic="true" on the container and an optional autoDismissMs parameter on every Show* method. LoadingSpinner text-muted -> text-secondary for contrast. DataTable gains a clear (x) button on the search input and applies disabled / aria-disabled directly to the pagination buttons. NewFolderDialog splits backdrop and modal markup to match ConfirmDialog. NavMenu wraps the nav list in an overflow-y scroll container so the username/sign-out footer stays anchored, and section headers convert from <li> to <div role="presentation">. MainLayout adds a hamburger toggle for <lg viewports; sidebar collapses via Bootstrap collapse data attributes. App.razor extracts inline <style> block to a shared site.css; adds a left-border accent on the active nav link; switches the reconnect modal to modal-dialog-centered. Login uses d-flex / min-vh-100 centering. NotAuthorizedView gets the same centered layout plus the ScadaLink brand heading. Sites.razor: only the new ConfirmButtonClass="btn-danger" follow-up.
76 lines
1.6 KiB
CSS
76 lines
1.6 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: #212529;
|
||
}
|
||
|
||
.sidebar .nav-link {
|
||
color: #adb5bd;
|
||
padding: 0.4rem 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.sidebar .nav-link:hover {
|
||
color: #fff;
|
||
background-color: #343a40;
|
||
}
|
||
|
||
.sidebar .nav-link.active {
|
||
color: #fff;
|
||
background-color: #0d6efd;
|
||
/* Left accent so active state isn't carried by color alone. */
|
||
border-left: 3px solid #0d6efd;
|
||
padding-left: calc(1rem - 3px);
|
||
}
|
||
|
||
.sidebar .nav-section-header {
|
||
color: #6c757d;
|
||
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: #fff;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
padding: 1rem;
|
||
border-bottom: 1px solid #343a40;
|
||
}
|
||
|
||
/* 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: #fff;
|
||
border-radius: 0.5rem;
|
||
}
|