Add stat's background opacity

src/assets/css/stream-stats.styl

@@ -144,7 +144,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
         border-radius: 0 0 4px 4px;
     }
 
-    &[data-transparent=true] {
+    &[data-shadow=true] {
         background: none;
         filter: drop-shadow(1px 0 0 #000000f0) drop-shadow(-1px 0 0 #000000f0) drop-shadow(0 1px 0 #000000f0) drop-shadow(0 -1px 0 #000000f0);
     }

src/enums/pref-keys.ts

@@ -103,8 +103,8 @@ export const enum PrefKey {
     STATS_QUICK_GLANCE_ENABLED = 'stats.quickGlance.enabled',
     STATS_POSITION = 'stats.position',
     STATS_TEXT_SIZE = 'stats.textSize',
-    STATS_TRANSPARENT = 'stats.transparent',
+    STATS_OPACITY_ALL = 'stats.opacity.all',
-    STATS_OPACITY = 'stats.opacity',
+    STATS_OPACITY_BACKGROUND = 'stats.opacity.background',
     STATS_CONDITIONAL_FORMATTING = 'stats.colors',
 
     REMOTE_PLAY_ENABLED = 'xhome.enabled',

src/modules/stream/stream-stats.ts

@@ -193,12 +193,21 @@ export class StreamStats {
 
     refreshStyles() {
         const PREF_ITEMS = getPref<StreamStat[]>(PrefKey.STATS_ITEMS);
+        const PREF_OPACITY_BG = getPref<number>(PrefKey.STATS_OPACITY_BACKGROUND);
 
         const $container = this.$container;
         $container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
         $container.dataset.position = getPref(PrefKey.STATS_POSITION);
-        $container.dataset.transparent = getPref(PrefKey.STATS_TRANSPARENT);
+
-        $container.style.opacity = getPref(PrefKey.STATS_OPACITY) + '%';
+        if (PREF_OPACITY_BG === 0) {
+            $container.style.removeProperty('background-color');
+            $container.dataset.shadow = 'true';
+        } else {
+            delete $container.dataset.shadow;
+            $container.style.backgroundColor = `rgba(0, 0, 0, ${PREF_OPACITY_BG}%)`;
+        }
+
+        $container.style.opacity = getPref(PrefKey.STATS_OPACITY_ALL) + '%';
         $container.style.fontSize = getPref(PrefKey.STATS_TEXT_SIZE);
     }
 

src/modules/ui/dialog/settings-dialog.ts

@@ -630,10 +630,10 @@ export class SettingsDialog extends NavigationDialog {
                 pref: PrefKey.STATS_TEXT_SIZE,
                 onChange: StreamStats.refreshStyles,
             }, {
-                pref: PrefKey.STATS_OPACITY,
+                pref: PrefKey.STATS_OPACITY_ALL,
                 onChange: StreamStats.refreshStyles,
             }, {
-                pref: PrefKey.STATS_TRANSPARENT,
+                pref: PrefKey.STATS_OPACITY_BACKGROUND,
                 onChange: StreamStats.refreshStyles,
             }, {
                 pref: PrefKey.STATS_CONDITIONAL_FORMATTING,

src/utils/settings-storages/global-settings-storage.ts

@@ -829,11 +829,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 '1.1rem': t('large'),
             },
         },
-        [PrefKey.STATS_TRANSPARENT]: {
+        [PrefKey.STATS_OPACITY_ALL]: {
-            label: t('transparent-background'),
-            default: false,
-        },
-        [PrefKey.STATS_OPACITY]: {
             label: t('opacity'),
             default: 80,
             min: 50,
@@ -844,6 +840,17 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
                 ticks: 10,
             },
         },
+        [PrefKey.STATS_OPACITY_BACKGROUND]: {
+            label: t('background-opacity'),
+            default: 100,
+            min: 0,
+            max: 100,
+            params: {
+                steps: 10,
+                suffix: '%',
+                ticks: 10,
+            },
+        },
         [PrefKey.STATS_CONDITIONAL_FORMATTING]: {
             label: t('conditional-formatting'),
             default: false,

src/utils/translation.ts

@@ -27,6 +27,7 @@ export const SUPPORTED_LANGUAGES = {
 };
 
 const Texts = {
+    "background-opacity": "Background opacity",
     "notifications": "Notifications",
     "invites": "Invites",
     "achievements": "Achievements",