fix(ui5-busyindicator): Set bigger opacity for IE (#2010)

Fixes: #2005

Author: ilhan007

packages/main/src/BusyIndicator.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-busyindicator-root">
+<div class="{{classes.root}}">
 	<div class="ui5-busyindicator-wrapper">
 		{{#if active}}
 			<div class="ui5-busyindicator-dynamic-content" role="progressbar" aria-valuemin="0" aria-valuemax="100" title="{{ariaTitle}}">

packages/main/src/BusyIndicator.js

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 import Label from "./Label.js";
@@ -159,6 +160,15 @@ class BusyIndicator extends UI5Element {
 		return this.i18nBundle.getText(BUSY_INDICATOR_TITLE);
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-busyindicator-root": true,
+				"ui5-busyindicator-root--ie": isIE(),
+			},
+		};
+	}
+
 	_preventEvent(event) {
 		if (this.active) {
 			event.stopImmediatePropagation();

packages/main/src/themes/BusyIndicator.css

@@ -11,12 +11,16 @@
 	pointer-events: none;
 }
 
+
+:host([active]) :not(.ui5-busyindicator-root--ie) ::slotted(:not([class^="ui5-busyindicator-"])) {
+	opacity: 0.6;
+}
+
 /**
- * IE fix: using just the "*" all selector in IE,
- * will set the opacity=0.6 to busy indicator internal elements
+ * IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
  */
-:host([active]) ::slotted(:not([class^="ui5-busyindicator-"])) {
-	opacity: 0.6;
+:host([active]) .ui5-busyindicator-root--ie ::slotted(:not([class^="ui5-busyindicator-"])) {
+	opacity: 0.95;
 }
 
 :host([size="Small"]) .ui5-busyindicator-root {