yumoqing/dashboard_for_sage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tabular row selection visibility - CSS specificity fix for dark/light themes

Browse Source 
- Dark theme: .tabular-cell color was overriding .tabular-row-selected color
  due to same specificity and later position. Added !important and combined
  selector .tabular-row-selected .tabular-cell to fix.
- Added background-color change for selected rows (both themes)
- Added cursor:pointer on .tabular-row for better UX
- Light theme: added blue-tinted background + darker text for selected rows
This commit is contained in:
yumoqing 2026-05-29 13:44:46 +08:00
parent 37b648da0e
commit d8ec4e7142
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
wwwroot/shell_theme.css
View File

@ -385,6 +385,10 @@ body {
}
/* ===== DataViewer Overrides for theme ===== */
.tabular-row {
cursor: pointer;
}
[data-theme="dark"] .dataviewer-toolbar,
[data-theme="dark"] .tabular,
[data-theme="dark"] .data-row,
@ -412,7 +416,20 @@ body {
}
[data-theme="dark"] .tabular-row-selected {
color: var(--sage-brand);
background-color: var(--sage-bg-hover) !important;
}
[data-theme="dark"] .tabular-row-selected,
[data-theme="dark"] .tabular-row-selected .tabular-cell {
color: var(--sage-brand) !important;
}
/* Light theme selected row */
[data-theme="light"] .tabular-row-selected {
background-color: #E0F2FE !important;
}
[data-theme="light"] .tabular-row-selected,
[data-theme="light"] .tabular-row-selected .tabular-cell {
color: #0369A1 !important;
}
[data-theme="dark"] .tabular-cell {