feat(settings): add option to disable shadows

src/_locales/cmn-CN.yml

@@ -129,6 +129,7 @@ settings:
 
   disable_frosted_glass: 禁用毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊强度
+  disable_shadow: 禁用阴影
 
   link_opening_behavior_opt:
     current_tab: 当前标签页

src/_locales/cmn-TW.yml

@@ -129,6 +129,7 @@ settings:
 
   disable_frosted_glass: 停用毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊強度
+  disable_shadow: 停用陰影
 
   link_opening_behavior_opt:
     current_tab: 目前索引標籤

src/_locales/en.yml

@@ -131,6 +131,7 @@ settings:
 
   disable_frosted_glass: Disable frosted glass effect
   reduce_frosted_glass_blur: Reduce the intensity of the frosted glass blur
+  disable_shadow: Disable shadow
 
   link_opening_behavior_opt:
     current_tab: Current tab

src/_locales/jyut.yml

@@ -128,6 +128,7 @@ settings:
 
   disable_frosted_glass: 閂咗毛玻璃效果
   reduce_frosted_glass_blur: 降低毛玻璃模糊強度
+  disable_shadow: 閂咗陰影
 
   link_opening_behavior_opt:
     current_tab: 目前分頁

src/components/Settings/General/General.vue

@@ -138,6 +138,9 @@ watch(() => settings.value.language, (newValue) => {
       >
         <Radio v-model="settings.reduceFrostedGlassBlur" />
       </SettingsItem>
+      <SettingsItem :title="$t('settings.disable_shadow')">
+        <Radio v-model="settings.disableShadow" />
+      </SettingsItem>
     </SettingsItemGroup>
 
     <SettingsItemGroup :title="$t('settings.group_link_opening_behavior')">

src/contentScripts/views/necessarySettingsWatchers.ts

@@ -161,6 +161,22 @@ export function setupNecessarySettingsWatchers() {
     { immediate: true },
   )
 
+  watch(() => settings.value.disableShadow, (newValue) => {
+    const bewlyElement = document.querySelector('#bewly') as HTMLElement
+    if (newValue) {
+      if (bewlyElement)
+        bewlyElement.classList.add('disable-shadow')
+
+      document.documentElement.classList.add('disable-shadow')
+    }
+    else {
+      if (bewlyElement)
+        bewlyElement.classList.remove('disable-shadow')
+
+      document.documentElement.classList.remove('disable-shadow')
+    }
+  }, { immediate: true })
+
   watch(() => settings.value.blockAds, () => {
     // Do not use the "ads" keyword. AdGuard, AdBlock, and some ad-blocking extensions will
     // detect and remove it when the class name contains "ads"

src/logic/storage.ts

@@ -16,8 +16,10 @@ export interface Settings {
   fontFamily: string
   overrideDanmakuFont: boolean
   removeTheIndentFromChinesePunctuation: boolean
+
   disableFrostedGlass: boolean
   reduceFrostedGlassBlur: boolean
+  disableShadow: boolean
 
   enableVideoPreview: boolean
 
@@ -122,6 +124,7 @@ export const originalSettings: Settings = {
 
   disableFrostedGlass: true,
   reduceFrostedGlassBlur: false,
+  disableShadow: false,
 
   // Link Opening Behavior
   videoCardLinkOpenMode: 'newTab',

src/styles/variables.scss

@@ -280,6 +280,13 @@
   --bew-filter-glass-2: blur(20px) saturate(180%);
 }
 
+:host(.disable-shadow),
+:root.disable-shadow {
+  --bew-shadow-1: 0 0 0 transparent;
+  --bew-shadow-2: 0 0 0 transparent;
+  --bew-shadow-3: 0 0 0 transparent;
+  --bew-shadow-4: 0 0 0 transparent;
+}
 :root.bewly-design,
 :root.bewly-design * {
   --brand_pink: var(--bew-theme-color);