diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 761987a8c25..5afb784c452 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -1543,8 +1543,18 @@ describe('AnalyticalTable', () => {
cy.mount();
cy.get('[data-component-name="AnalyticalTableLoadingPlaceholder"]').should('be.visible');
cy.get('.ui5-busy-indicator-busy-area').should('not.exist');
+ cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
+ 'not.have.css',
+ 'opacity',
+ '0.4',
+ );
cy.mount();
cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('be.visible');
+ cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class*="busyIndicator"])').should(
+ 'have.css',
+ 'opacity',
+ '0.4',
+ );
cy.mount();
cy.get('.ui5-busy-indicator-busy-area', { timeout: 2000 }).should('not.exist');
cy.mount();
@@ -1895,8 +1905,22 @@ describe('AnalyticalTable', () => {
});
it('overlay', (done) => {
+ cy.mount();
+ cy.findByRole('region').should('not.exist');
+ cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class^="overlay"])').should(
+ 'not.have.css',
+ 'opacity',
+ '0.4',
+ );
+ cy.findByText('A').click();
+
cy.mount();
- cy.findByRole('region').should('be.visible').should('have.css', 'opacity', '0.8');
+ cy.findByRole('region').should('be.visible');
+ cy.get('[data-component-name="AnalyticalTableContainerWithScrollbar"] > :not([class^="overlay"])').should(
+ 'have.css',
+ 'opacity',
+ '0.4',
+ );
cy.findByText('A').shouldNotBeClickable(done);
});
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
index d6e7cd76999..5568c688d84 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -12,6 +12,22 @@
}
}
+.tableContainerWithScrollBar {
+ position: relative;
+
+ &:has(> .overlay) {
+ > :not(.overlay) {
+ opacity: var(--sapContent_DisabledOpacity);
+ }
+ }
+
+ &:has(> .busyIndicator) {
+ > :not(.busyIndicator) {
+ opacity: var(--sapContent_DisabledOpacity);
+ }
+ }
+}
+
.table {
position: relative;
width: 100%;
@@ -37,10 +53,6 @@
}
}
-.tableContainerWithScrollBar {
- position: relative;
-}
-
.busyIndicator {
position: absolute;
z-index: 1;
@@ -52,8 +64,6 @@
position: absolute;
z-index: 1;
inset: 0;
- background: var(--sapGroup_ContentBackground);
- opacity: 0.8;
&:focus {
outline-offset: calc(-1 * var(--sapContent_FocusWidth));
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 158a5d6b24e..a89e60eaca7 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -756,12 +756,8 @@ const AnalyticalTable = forwardRef
- {/*todo: This is necessary; otherwise, the overlay bg color will not be applied. https://github.com/SAP/ui5-webcomponents/issues/9723 */}
-
-
+ />
)}
- {/*todo: use global CSS once --sapBlockLayer_Opacity is available*/}
{showOverlay && (
<>