QT/bigcapital
0
0
Fork 0
Code Issues Pull Requests 1 Actions 6 Packages Projects Releases Wiki Activity

feat(webapp): add blurry background to sticky data table cells

Browse Source 
Add backdrop-filter blur effect to sticky column cells in financial reports
to prevent content from showing through during horizontal scrolling.
The effect only applies when rows are not hovered to preserve hover
background interactions.
This commit is contained in:
Ahmed Bouhuolia
2026-02-05 15:27:45 +02:00
parent 1b7d513adf
commit afab02a053
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/webapp/src/style/components/DataTable/DataTable.scss
View File

@@ -385,6 +385,20 @@
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
body.bp4-dark & {
background: rgba(28, 33, 39, 0.6);
}
}
}
// Sticky cells in table body: blurred transparent background so content doesn't show through
.bigcapital-datatable.has-sticky {
&.table-constrant .table .tbody .tr:not(:hover) .td[data-sticky-td],
&.table--constrant .table .tbody .tr:not(:hover) .td[data-sticky-td] {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
body.bp4-dark & {
background: rgba(28, 33, 39, 0.6);
}