diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index fac965fd..2fc5f2a3 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -37,6 +37,7 @@ settings: # Settings group group_common: 通用 + group_performance: 性能 group_topbar: 顶栏 group_dock: Dock 栏 group_color: 颜色 @@ -68,6 +69,8 @@ settings: enable_video_ctrl_bar_on_video_card: 在视频卡片上显示视频控制栏 hover_video_card_delayed: 将鼠标悬停在视频卡片上时延迟视频预览 block_ads: 屏蔽广告 + disable_frosted_glass: 禁用毛玻璃效果 + reduce_frosted_glass_blur: 降低毛玻璃模糊强度 auto_hide_topbar: 自动隐藏顶栏 dock_position: Dock 栏位置 dock_position_desc: 在屏幕中摆放位置 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index 1f2ed227..965e809a 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -37,6 +37,7 @@ settings: # Settings group group_common: 通用 + group_performance: 效能 group_topbar: 頂欄 group_dock: Dock group_color: 顏色 @@ -68,6 +69,8 @@ settings: enable_video_ctrl_bar_on_video_card: 在影片卡片上顯示影片控制欄 hover_video_card_delayed: 將滑鼠懸停在影片卡片上時延遲影片預覽 block_ads: 封鎖廣告 + disable_frosted_glass: 停用毛玻璃效果 + reduce_frosted_glass_blur: 降低毛玻璃模糊強度 auto_hide_topbar: 自動隱藏頂欄 dock_position: Dock 位置 dock_position_desc: 螢幕上的位置 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 23cd12d2..74506388 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -37,6 +37,7 @@ settings: # Settings group group_common: Common + group_performance: Performance group_topbar: Top Bar group_dock: Dock group_color: Color @@ -68,6 +69,8 @@ settings: enable_video_ctrl_bar_on_video_card: Display the video control bar on the video card hover_video_card_delayed: Delayed video preview on hover over the video card block_ads: Block ads + disable_frosted_glass: Disable frosted glass effect + reduce_frosted_glass_blur: Reduce the intensity of the frosted glass blur auto_hide_topbar: Automatically hide the top bar dock_position: Dock position dock_position_desc: Position on screen diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 7b6631e7..d8d6f6ad 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -37,6 +37,7 @@ settings: # Settings group group_common: 通用 + group_performance: 效能 group_topbar: 頂欄 group_dock: Dock group_color: 顏色 @@ -68,6 +69,8 @@ settings: enable_video_ctrl_bar_on_video_card: 喺影片卡片上顯示影片控制欄 hover_video_card_delayed: 滑鼠停留喺影片卡片嗰陣遲啲進行影片預覽 block_ads: 封鎖廣告 + disable_frosted_glass: 閂咗毛玻璃效果 + reduce_frosted_glass_blur: 降低毛玻璃模糊強度 auto_hide_topbar: 自動收埋頂欄 dock_position: Dock 放位 dock_position_desc: 放喺螢幕邊度 diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue index 147279fe..45920b40 100644 --- a/src/components/Settings/Settings.vue +++ b/src/components/Settings/Settings.vue @@ -158,7 +158,7 @@ function setCurrentTitle() {
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue index 9b4500de..16f7a958 100644 --- a/src/components/Settings/components/ChildSettingsDialog.vue +++ b/src/components/Settings/components/ChildSettingsDialog.vue @@ -20,26 +20,19 @@ function handleClose() { @click="handleClose" />
- -
-

{{ title }} diff --git a/src/components/Settings/components/General.vue b/src/components/Settings/components/General.vue index e1129fda..3e27ffb4 100644 --- a/src/components/Settings/components/General.vue +++ b/src/components/Settings/components/General.vue @@ -109,10 +109,19 @@ function handleToggleDockItem(dockItem: any) { + + + + + + + + + - diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index 45c8dc15..3522a803 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -279,9 +279,12 @@ defineExpose({

{ const isTopBarFixed = computed(() => { if ( isHomePage() - // // search page - // || /https?:\/\/search.bilibili.com\/.*$/.test(location.href) // video page || /https?:\/\/(www.)?bilibili.com\/(video|list)\/.*/.test(location.href) // anime playback & movie page @@ -98,10 +96,20 @@ watch(() => settings.value.blockAds, () => { handleBlockAds() }) +watch(() => settings.value.disableFrostedGlass, () => { + handleDisableFrostedGlass() +}) + +watch(() => settings.value.reduceFrostedGlassBlur, () => { + handleReduceFrostedGlassBlur() +}) + onBeforeMount(() => { - handleBlockAds() setAppThemeColor() handleAdaptToOtherPageStylesChange() + handleBlockAds() + handleDisableFrostedGlass() + handleReduceFrostedGlassBlur() }) onMounted(() => { @@ -252,6 +260,38 @@ function handleBlockAds() { document.documentElement.classList.remove('block-ads') } +function handleDisableFrostedGlass() { + const bewlyElement = document.querySelector('#bewly') as HTMLElement + if (settings.value.disableFrostedGlass) { + if (bewlyElement) + bewlyElement.classList.add('disable-frosted-glass') + + document.documentElement.classList.add('disable-frosted-glass') + } + else { + if (bewlyElement) + bewlyElement.classList.remove('disable-frosted-glass') + + document.documentElement.classList.remove('disable-frosted-glass') + } +} + +function handleReduceFrostedGlassBlur() { + const bewlyElement = document.querySelector('#bewly') as HTMLElement + if (settings.value.reduceFrostedGlassBlur) { + if (bewlyElement) + bewlyElement.classList.add('reduce-frosted-glass-blur') + + document.documentElement.classList.add('reduce-frosted-glass-blur') + } + else { + if (bewlyElement) + bewlyElement.classList.remove('reduce-frosted-glass-blur') + + document.documentElement.classList.remove('reduce-frosted-glass-blur') + } +} + // fix #166 https://github.com/hakadao/BewlyBewly/issues/166 // function openVideoPageIfBvidExists() { // Assume the URL is https://www.bilibili.com/?bvid=BV1be41127ft&spm_id_from=333.788.seo.out diff --git a/src/logic/storage.ts b/src/logic/storage.ts index d8d287eb..2e5bc1a5 100644 --- a/src/logic/storage.ts +++ b/src/logic/storage.ts @@ -15,6 +15,8 @@ export interface Settings { hoverVideoCardDelayed: boolean autoHideTopBar: boolean blockAds: boolean + disableFrostedGlass: boolean + reduceFrostedGlassBlur: boolean dockPosition: 'left' | 'right' | 'bottom' autoHideDock: boolean dockItemVisibilityList: { page: AppPage, visible: boolean }[] @@ -60,6 +62,8 @@ export const settings = useStorageLocal('settings', ref({ dockPosition: 'right', autoHideDock: false, blockAds: false, + disableFrostedGlass: false, + reduceFrostedGlassBlur: false, dockItemVisibilityList: [], theme: 'auto', diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 0ca18633..e4b96be0 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -5,8 +5,7 @@ --bew-filter-glass-1: blur(20px) saturate(180%); --bew-filter-glass-2: blur(40px) saturate(180%); - --bew-filter-icon-glow: saturate(0) brightness(2) - drop-shadow(0 0 0.2px white) + --bew-filter-icon-glow: saturate(0) brightness(2) drop-shadow(0 0 0.2px white) drop-shadow(0 0 0.5px var(--bew-theme-color)) drop-shadow(0 0 0.5px var(--bew-theme-color)) drop-shadow(0 0 0.5px var(--bew-theme-color)) @@ -59,16 +58,16 @@ --bew-success-color-80: rgba(110 231 183 / 0.8); --bew-success-color-90: rgba(110 231 183 / 0.9); - --bew-warning-color: rgb(250 204 21); - --bew-warning-color-10: rgba(250 204 21 / 0.1); - --bew-warning-color-20: rgba(250 204 21 / 0.2); - --bew-warning-color-30: rgba(250 204 21 / 0.3); - --bew-warning-color-40: rgba(250 204 21 / 0.4); - --bew-warning-color-50: rgba(250 204 21 / 0.5); - --bew-warning-color-60: rgba(250 204 21 / 0.6); - --bew-warning-color-70: rgba(250 204 21 / 0.7); - --bew-warning-color-80: rgba(250 204 21 / 0.8); - --bew-warning-color-90: rgba(250 204 21 / 0.9); + --bew-warning-color: rgb(217 178 22); + --bew-warning-color-10: rgba(217 178 22 / 0.1); + --bew-warning-color-20: rgba(217 178 22 / 0.2); + --bew-warning-color-30: rgba(217 178 22 / 0.3); + --bew-warning-color-40: rgba(217 178 22 / 0.4); + --bew-warning-color-50: rgba(217 178 22 / 0.5); + --bew-warning-color-60: rgba(217 178 22 / 0.6); + --bew-warning-color-70: rgba(217 178 22 / 0.7); + --bew-warning-color-80: rgba(217 178 22 / 0.8); + --bew-warning-color-90: rgba(217 178 22 / 0.9); --bew-error-color: rgb(219 65 108); --bew-error-color-10: rgba(219 65 108 / 0.1); @@ -128,6 +127,19 @@ --bew-page-max-width: 2280px; } +:host(.disable-frosted-glass), +:root.disable-frosted-glass { + --bew-content-opacity: 1; + --bew-filter-glass-1: none; + --bew-filter-glass-2: none; +} + +:host(.reduce-frosted-glass-blur), +:root.reduce-frosted-glass-blur { + --bew-filter-glass-1: blur(10px) saturate(180%); + --bew-filter-glass-2: blur(20px) saturate(180%); +} + :host(.dark), :root.dark { // dark mode