AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add zebra-striping to grid rows with theme support

Browse Source 
Introduced --grid-stripe-bg CSS variable for both light and dark themes to enable zebra-striping in dxbl-grid components. Applied background color to even-numbered grid rows for improved readability.
This commit is contained in:
OlgunR
2026-03-27 14:13:16 +01:00
parent ea1b2ea6e4
commit d422d841ff
1 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
DbFirst.BlazorWebApp/wwwroot/app.css
View File

@@ -12,6 +12,7 @@ html, body {
--band-editor-bg: #f8f9fa; --band-editor-bg: #f8f9fa;
--band-editor-border: #dee2e6; --band-editor-border: #dee2e6;
--band-toggle-hover-bg: #e9ecef; --band-toggle-hover-bg: #e9ecef;
--grid-stripe-bg: rgba(0, 0, 0, 0.03);
} }
.app-dark { .app-dark {
@@ -20,6 +21,7 @@ html, body {
--band-editor-bg: #2d2d2d; --band-editor-bg: #2d2d2d;
--band-editor-border: #444444; --band-editor-border: #444444;
--band-toggle-hover-bg: #3a3a3a; --band-toggle-hover-bg: #3a3a3a;
--grid-stripe-bg: rgba(255, 255, 255, 0.04);
} }
a, .btn-link { a, .btn-link {
@@ -141,6 +143,11 @@ h1:focus {
margin-top: 4px; margin-top: 4px;
} }
/* Grid Zebra-Striping */
dxbl-grid tbody tr:nth-child(even) td {
background-color: var(--grid-stripe-bg) !important;
}
/* MassData-spezifisch */ /* MassData-spezifisch */
.page-size-selector { .page-size-selector {
display: flex; display: flex;