From 09986179de45b5f1837ddf891ee641068b7b47da Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sat, 30 Sep 2023 14:28:18 +0800 Subject: [PATCH] feat: add config for adapting to other page styles --- src/_locales/cmn-CN.yml | 2 + src/_locales/cmn-TW.yml | 2 + src/_locales/en.yml | 2 + src/_locales/jyut.yml | 2 + .../Settings/components/Appearance.vue | 3 + src/contentScripts/views/App.vue | 12 + src/logic/storage.ts | 1 + src/models/models.ts | 1 + .../animePlayback&MoviePage.scss | 810 ++++++++--------- src/styles/adaptedStyles/btn.scss | 80 +- src/styles/adaptedStyles/comments.scss | 477 +++++----- src/styles/adaptedStyles/common.scss | 30 +- src/styles/adaptedStyles/footer.scss | 22 +- src/styles/adaptedStyles/historyPage.scss | 212 ++--- src/styles/adaptedStyles/modal.scss | 2 +- src/styles/adaptedStyles/momentsPage.scss | 646 +++++++------- .../adaptedStyles/notificationsPage.scss | 501 +++++------ src/styles/adaptedStyles/searchPage.scss | 50 +- src/styles/adaptedStyles/userCard.scss | 78 +- src/styles/adaptedStyles/userSpacePage.scss | 832 +++++++++--------- src/styles/adaptedStyles/videoPage.scss | 139 ++- src/styles/adaptedStyles/videoPlayer.scss | 10 +- src/styles/main.scss | 28 +- src/styles/variables.scss | 94 +- 24 files changed, 2029 insertions(+), 2007 deletions(-) diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index e54a824f..6a412acc 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -69,6 +69,8 @@ settings: theme_color: 主题色 follow_bilibili_evolved_color: 使用 Bilibili Evolved 主题色 follow_bilibili_evolved_color_desc: 每次选完 Bilibili Evolved 主题色时，记得重新选中这一选项以更新配置 + adapt_to_other_page_styles: 适应其他页面样式 + adapt_to_other_page_styles_desc: 适应一些常见页面，以与 BewlyBewly 主题相匹配 wallpaper_mode: 背景图片模式 wallpaper_mode_desc: '由 URL: 直接用网上图片的 URL 来设置背景图片。' wallpaper_mode_opt: diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index 366d19b3..5ced4c48 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -69,6 +69,8 @@ settings: theme_color: 主題色 follow_bilibili_evolved_color: 使用 Bilibili Evolved 主題色 follow_bilibili_evolved_color_desc: 每次變更 Bilibili Evolved 主題色後，記得重新選取此選項以更新配置 + adapt_to_other_page_styles: 適應其他頁面風格 + adapt_to_other_page_styles_desc: 適應一些常見頁面，以配合 BewlyBewly 主題 wallpaper_mode: 背景圖片模式 wallpaper_mode_desc: '由 URL: 直接用網上圖片的 URL 來設定背景圖片。' wallpaper_mode_opt: diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 453e73df..68be5e59 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -70,6 +70,8 @@ settings: theme_color: Theme color follow_bilibili_evolved_color: Follow the Bilibili Evolved theme color follow_bilibili_evolved_color_desc: After changing the theme color in Bilibili Evolved, you will need to re-select this option in order to update the theme color. + adapt_to_other_page_styles: Adapt to other page styles + adapt_to_other_page_styles_desc: Adapt to some common pages to match with the BewlyBewly theme wallpaper_mode: Wallpaper mode wallpaper_mode_desc: 'By URL: Choose an image from the Internet and use its URL to set it as the wallpaper.' wallpaper_mode_opt: diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 893e9cd2..f60f6a44 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -69,6 +69,8 @@ settings: theme_color: 佈景色 follow_bilibili_evolved_color: 跟返 Bilibili Evolved 佈景色 follow_bilibili_evolved_color_desc: 每次換完 Bilibili Evolved 佈景色嗰陣，記得揀多一次呢個選項愛嚟更新佈置 + adapt_to_other_page_styles: 適應其他版面風格 + adapt_to_other_page_styles_desc: 執執啲常用嘅版面，襯返 BewlyBewly 主題風格 wallpaper_mode: 背景圖片模式 wallpaper_mode_desc: '由 URL: 直接用網上圖片嘅 URL 嚟到設定背景圖片。' wallpaper_mode_opt: diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue index 9eb66d86..c4daae46 100644 --- a/src/components/Settings/components/Appearance.vue +++ b/src/components/Settings/components/Appearance.vue @@ -107,6 +107,9 @@ function changeWallpaper(url: string) { @click="changeThemeColor(bilibiliEvolvedThemeColor)" /> + + +
activatedPage.value, (newValue, oldValue) => { setAppWallpaperMaskingOpacity() }) +watch(() => settings.value.adaptToOtherPageStyles, () => { + handleAdaptToOtherPageStylesChange() +}) + onMounted(() => { nextTick(() => { setTimeout(() => { @@ -195,6 +199,7 @@ onMounted(() => { setAppLanguage() setAppThemeColor() setAppWallpaperMaskingOpacity() + handleAdaptToOtherPageStylesChange() }) function handleChangeAccessKey() { @@ -306,6 +311,13 @@ function handleRefresh() { function handleBackToTop() { smoothScrollToTop(mainAppRef.value, 300) } + +function handleAdaptToOtherPageStylesChange() { + if (settings.value.adaptToOtherPageStyles) + document.documentElement.classList.add('bewly-design') + else + document.documentElement.classList.remove('bewly-design') +}