diff --git a/src/assets/css/stream-stats.styl b/src/assets/css/stream-stats.styl index f585fc4..860a37f 100755 --- a/src/assets/css/stream-stats.styl +++ b/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); } diff --git a/src/enums/pref-keys.ts b/src/enums/pref-keys.ts index a17260e..7f8d29e 100755 --- a/src/enums/pref-keys.ts +++ b/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 = 'stats.opacity', + STATS_OPACITY_ALL = 'stats.opacity.all', + STATS_OPACITY_BACKGROUND = 'stats.opacity.background', STATS_CONDITIONAL_FORMATTING = 'stats.colors', REMOTE_PLAY_ENABLED = 'xhome.enabled', diff --git a/src/modules/stream/stream-stats.ts b/src/modules/stream/stream-stats.ts index 4d54e21..4417dc6 100755 --- a/src/modules/stream/stream-stats.ts +++ b/src/modules/stream/stream-stats.ts @@ -193,12 +193,21 @@ export class StreamStats { refreshStyles() { const PREF_ITEMS = getPref(PrefKey.STATS_ITEMS); + const PREF_OPACITY_BG = getPref(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); } diff --git a/src/modules/ui/dialog/settings-dialog.ts b/src/modules/ui/dialog/settings-dialog.ts index 48fd64d..37ed87d 100755 --- a/src/modules/ui/dialog/settings-dialog.ts +++ b/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, diff --git a/src/utils/settings-storages/global-settings-storage.ts b/src/utils/settings-storages/global-settings-storage.ts index 5ae38af..e634ce7 100755 --- a/src/utils/settings-storages/global-settings-storage.ts +++ b/src/utils/settings-storages/global-settings-storage.ts @@ -829,11 +829,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage { '1.1rem': t('large'), }, }, - [PrefKey.STATS_TRANSPARENT]: { - label: t('transparent-background'), - default: false, - }, - [PrefKey.STATS_OPACITY]: { + [PrefKey.STATS_OPACITY_ALL]: { 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, diff --git a/src/utils/translation.ts b/src/utils/translation.ts index 76b5d68..6ff90da 100755 --- a/src/utils/translation.ts +++ b/src/utils/translation.ts @@ -27,6 +27,7 @@ export const SUPPORTED_LANGUAGES = { }; const Texts = { + "background-opacity": "Background opacity", "notifications": "Notifications", "invites": "Invites", "achievements": "Achievements",