From cfb97cd3b096865a26bc43d2314fa06b8da6ff69 Mon Sep 17 00:00:00 2001 From: Konv Suu <2583695112@qq.com> Date: Sun, 28 Jul 2024 21:16:18 +0800 Subject: [PATCH 01/28] feat: add web-ext to develop (#930) --- package.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/package.json b/package.json index ab983f99c7..2f327a69c8 100644 --- a/package.json +++ b/package.json @@ -104,5 +104,13 @@ }, "lint-staged": { "*": "eslint --fix" + }, + "webExt": { + "sourceDir": "extension", + "run": { + "startUrl": [ + "https://www.bilibili.com/" + ] + } } } From e901eb2f36d42ab437be02906aea368732a5ece3 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 28 Jul 2024 21:26:10 +0800 Subject: [PATCH 02/28] chore: remove unused "sourceDir" property from webExt configuration --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 2f327a69c8..e536d852da 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,6 @@ "*": "eslint --fix" }, "webExt": { - "sourceDir": "extension", "run": { "startUrl": [ "https://www.bilibili.com/" From 960244014c0dd142d087a329af3b11ef69c904c8 Mon Sep 17 00:00:00 2001 From: Konv Suu <2583695112@qq.com> Date: Sun, 28 Jul 2024 21:39:30 +0800 Subject: [PATCH 03/28] fix(adapted-styles): adapt remove watched videos button style on watch later page (#926) * style(adapted-styles): add `d-btn` style * update * chore: update --------- Co-authored-by: Hakadao --- src/styles/adaptedStyles/pages/watchLaterPage.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/styles/adaptedStyles/pages/watchLaterPage.scss b/src/styles/adaptedStyles/pages/watchLaterPage.scss index c984e28ef9..cc10800373 100644 --- a/src/styles/adaptedStyles/pages/watchLaterPage.scss +++ b/src/styles/adaptedStyles/pages/watchLaterPage.scss @@ -52,13 +52,19 @@ color: var(--bew-text-2); } + .watch-later-list header .d-btn { + color: var(--bew-text-3); + } + .watch-later-list .list-box .av-item .av-about, .bili-dialog .con header, - .bili-dialog .con .btn-box .btn-cancel { + .bili-dialog .con .btn-box .btn-cancel, + .watch-later-list header .d-btn { border-color: var(--bew-border-color); } - .watch-later-list header .s-btn { + .watch-later-list header .s-btn, + .watch-later-list header .d-btn { background-color: transparent; } From debad946f777558533a0f664ee3b22d08eb6c63e Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 28 Jul 2024 21:44:55 +0800 Subject: [PATCH 04/28] feat(top-bar): adjust unread number dot style --- src/components/TopBar/TopBar.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue index b50086b4ef..213a394155 100644 --- a/src/components/TopBar/TopBar.vue +++ b/src/components/TopBar/TopBar.vue @@ -921,8 +921,7 @@ defineExpose({ } .unread-num-dot { - --uno: "absolute top--2px left-1/2"; - --uno: "translate-x--1/2"; + --uno: "absolute top--2px right--4px"; --uno: "important:px-1 rounded-full"; --uno: "text-xs leading-0 z-6 min-w-14px h-14px"; --uno: "grid place-items-center"; From 58d9965fe398aac9ec8b507a29c8f49698adf793 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 28 Jul 2024 21:51:22 +0800 Subject: [PATCH 05/28] fix(old-top-bar): popups cause horizontal scroll bar to appear (#931) close #931 --- src/components/TopBar/OldTopBar.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/TopBar/OldTopBar.vue b/src/components/TopBar/OldTopBar.vue index 056dc51482..1ad858a2d5 100644 --- a/src/components/TopBar/OldTopBar.vue +++ b/src/components/TopBar/OldTopBar.vue @@ -714,6 +714,7 @@ defineExpose({ v-if="popupVisible.favorites" ref="favoritesPopRef" class="bew-popover" + ml--20px /> @@ -734,7 +735,11 @@ defineExpose({ - + @@ -753,7 +758,11 @@ defineExpose({ - + From 59885e15766c2938fd8a15543a7f10a00c660d9e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 28 Jul 2024 13:53:43 +0000 Subject: [PATCH 06/28] chore: release v0.27.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e536d852da..ee1f038883 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "bewly-bewly", "displayName": "BewlyBewly", "type": "module", - "version": "0.27.1", + "version": "0.27.2", "private": true, "packageManager": "pnpm@9.5.0", "description": "Just make a few small changes to your Bilibili homepage.", From 615c9de1bd8931076f96910d98a45f7a1c859fe9 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 29 Jul 2024 12:30:23 +0800 Subject: [PATCH 07/28] refactor: global import common components && remove useless imports --- .../RightSideButtons/RightSideButtons.vue | 1 - src/components/Settings/Settings.vue | 1 - src/components/Settings/components/About.vue | 3 --- src/components/Settings/components/Appearance.vue | 1 - .../Settings/components/ChangeWallpaper.vue | 4 ---- .../Settings/components/Compatibility.vue | 1 - src/components/Settings/components/General.vue | 3 --- src/components/Settings/components/Home.vue | 4 ---- src/components/Settings/components/SearchPage.vue | 2 -- src/components/TopBar/OldTopBar.vue | 1 - src/components/TopBar/TopBar.vue | 1 - src/components/index.ts | 13 +++++++++++++ src/contentScripts/views/Anime/Anime.vue | 6 ------ src/contentScripts/views/App.vue | 8 -------- src/contentScripts/views/Favorites/Favorites.vue | 7 ------- src/contentScripts/views/History/History.vue | 3 --- src/contentScripts/views/Home/Home.vue | 2 -- .../views/Home/components/Following.vue | 3 --- src/contentScripts/views/Home/components/ForYou.vue | 4 ---- .../views/Home/components/Ranking.vue | 5 ----- .../views/Home/components/SubscribedSeries.vue | 3 --- .../views/Home/components/Trending.vue | 1 - src/contentScripts/views/Search/Search.vue | 2 -- src/contentScripts/views/WatchLater/WatchLater.vue | 3 --- src/logic/common-setup.ts | 2 ++ 25 files changed, 15 insertions(+), 69 deletions(-) create mode 100644 src/components/index.ts diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue index 0004964bd1..20e93ba1d7 100644 --- a/src/components/RightSideButtons/RightSideButtons.vue +++ b/src/components/RightSideButtons/RightSideButtons.vue @@ -1,7 +1,6 @@ diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue index 029e9df4f7..6593751c9d 100644 --- a/src/contentScripts/views/WatchLater/WatchLater.vue +++ b/src/contentScripts/views/WatchLater/WatchLater.vue @@ -2,9 +2,6 @@ import { useDateFormat } from '@vueuse/core' import { useI18n } from 'vue-i18n' -import Button from '~/components/Button.vue' -import Empty from '~/components/Empty.vue' -import Progress from '~/components/Progress.vue' import { useApiClient } from '~/composables/api' import { useBewlyApp } from '~/composables/useAppProvider' import type { List as VideoItem, WatchLaterResult } from '~/models/video/watchLater' diff --git a/src/logic/common-setup.ts b/src/logic/common-setup.ts index 21f18c6b4c..6013dc4837 100644 --- a/src/logic/common-setup.ts +++ b/src/logic/common-setup.ts @@ -5,6 +5,7 @@ import type { App } from 'vue' import Toast, { POSITION } from 'vue-toastification' import { getCurrentContext } from 'webext-bridge' +import components from '~/components' import { i18n } from '~/utils/i18n' const pinia = createPinia() @@ -29,5 +30,6 @@ export async function setupApp(app: App) { newestOnTop: true, position: POSITION.TOP_RIGHT, }) + app.use(components) app.use(pinia) } From b5449da64dfde33d8e4472adc68b853985d0a048 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 29 Jul 2024 12:39:17 +0800 Subject: [PATCH 08/28] fix: lint --- .../adaptedStyles/adaptedStyles-cmn_CN.md | 152 +++++++++--------- .../adaptedStyles/adaptedStyles-cmn_TW.md | 152 +++++++++--------- .../adaptedStyles/adaptedStyles-jyut.md | 152 +++++++++--------- src/styles/adaptedStyles/adaptedStyles.md | 152 +++++++++--------- 4 files changed, 304 insertions(+), 304 deletions(-) diff --git a/src/styles/adaptedStyles/adaptedStyles-cmn_CN.md b/src/styles/adaptedStyles/adaptedStyles-cmn_CN.md index c4d1b16071..51e73c910f 100644 --- a/src/styles/adaptedStyles/adaptedStyles-cmn_CN.md +++ b/src/styles/adaptedStyles/adaptedStyles-cmn_CN.md @@ -1,76 +1,76 @@ -# Adapted Styles - -这里放置暗色模式的 CSS 或更改主题颜色。 - -在 `index.ts` 中，我们将编写一些正则表达式，以匹配特定页面上使用的样式。 - -## 样式文件编写风格 - -``` scss -.bewly-design.pageName { - // 实现对页面的特定修改，例如微调布局，将这些样式放在这里 - .right-side-bar .catalog { - line-height: 3em; - } - - // ... - - // #region theme color adaption part - // 通过在 `:not()` 中编写一个不存在的选择器来增加内部样式的优先级。 - :not(foobar) { - a, - b, - c { - color: var(--bew-theme-color); - } - - d, - e, - f { - // 请注意，使用 `!important` 应该是最后万不得已的手段 - color: var(--bew-theme-color) !important; - } - - g, - h, - i { - background-color: var(--bew-theme-color); - } - - j, - k, - l { - background-color: var(--bew-theme-color) !important; - } - - // ... - } - // #endregion - - // #region dark mode adaption part - &.dark { - aa, - bb, - cc { - color: var(--bew-text-1); - } - - dd, - ee, - ff { - color: var(--bew-text-1) !important; - } - - // ... - } - // #endregion -} -``` - -## 为什么要使用上述的编写风格？ - -也许你会对为什么应该遵循建议的编写风格感到困惑，所以在这里我们将解释一下。 -由于这并不是按照页面特定的初始样式编写的，并且页面已经有了原始样式，你不能简单地写入像 `xxx {border: 1px solid white; color: black}` 这样的 CSS。 -遵循前面的这种编写风格会使得维护暗模式样式变得困难。这是因为暗色模式主要需要改变文本颜色、背景颜色或边框颜色。 - -根据字体颜色、背景颜色和边框颜色高效地进行分组，并通过将适当的选择器放在一起统一方法，以便进行轻松维护。在必要时，只需调整相应样式中的相应选择器。 +# Adapted Styles + +这里放置暗色模式的 CSS 或更改主题颜色。 + +在 `index.ts` 中，我们将编写一些正则表达式，以匹配特定页面上使用的样式。 + +## 样式文件编写风格 + +``` scss +.bewly-design.pageName { + // 实现对页面的特定修改，例如微调布局，将这些样式放在这里 + .right-side-bar .catalog { + line-height: 3em; + } + + // ... + + // #region theme color adaption part + // 通过在 `:not()` 中编写一个不存在的选择器来增加内部样式的优先级。 + :not(foobar) { + a, + b, + c { + color: var(--bew-theme-color); + } + + d, + e, + f { + // 请注意，使用 `!important` 应该是最后万不得已的手段 + color: var(--bew-theme-color) !important; + } + + g, + h, + i { + background-color: var(--bew-theme-color); + } + + j, + k, + l { + background-color: var(--bew-theme-color) !important; + } + + // ... + } + // #endregion + + // #region dark mode adaption part + &.dark { + aa, + bb, + cc { + color: var(--bew-text-1); + } + + dd, + ee, + ff { + color: var(--bew-text-1) !important; + } + + // ... + } + // #endregion +} +``` + +## 为什么要使用上述的编写风格？ + +也许你会对为什么应该遵循建议的编写风格感到困惑，所以在这里我们将解释一下。 +由于这并不是按照页面特定的初始样式编写的，并且页面已经有了原始样式，你不能简单地写入像 `xxx {border: 1px solid white; color: black}` 这样的 CSS。 +遵循前面的这种编写风格会使得维护暗模式样式变得困难。这是因为暗色模式主要需要改变文本颜色、背景颜色或边框颜色。 + +根据字体颜色、背景颜色和边框颜色高效地进行分组，并通过将适当的选择器放在一起统一方法，以便进行轻松维护。在必要时，只需调整相应样式中的相应选择器。 diff --git a/src/styles/adaptedStyles/adaptedStyles-cmn_TW.md b/src/styles/adaptedStyles/adaptedStyles-cmn_TW.md index 492f94eac5..63d046690c 100644 --- a/src/styles/adaptedStyles/adaptedStyles-cmn_TW.md +++ b/src/styles/adaptedStyles/adaptedStyles-cmn_TW.md @@ -1,76 +1,76 @@ -# Adapted Styles - -在這裡放置深色模式的 CSS 或更改主題顏色。 - -在 `index.ts` 中，我們將編寫一些正規表達式來匹配特定頁面上使用的樣式。 - -## 樣式表檔案撰寫風格 - -``` scss -.bewly-design.pageName { - // 在此處實施對頁面的特定修改，例如調整佈局，並將那些樣式放在這裡。 - .right-side-bar .catalog { - line-height: 3em; - } - - // ... - - // #region theme color adaption part - // 透過在 `:not()` 中寫入一個不存在的選取器來提高內部樣式的優先級。 - :not(foobar) { - a, - b, - c { - color: var(--bew-theme-color); - } - - d, - e, - f { - // 請注意，使用 `!important` 應該是最後萬不得已的手段 - color: var(--bew-theme-color) !important; - } - - g, - h, - i { - background-color: var(--bew-theme-color); - } - - j, - k, - l { - background-color: var(--bew-theme-color) !important; - } - - // ... - } - // #endregion - - // #region dark mode adaption part - &.dark { - aa, - bb, - cc { - color: var(--bew-text-1); - } - - dd, - ee, - ff { - color: var(--bew-text-1) !important; - } - - // ... - } - // #endregion -} -``` - -## 何解使用上述之撰寫風格？ - -您可能會對為什麼應該遵循建議的撰寫風格感到困惑，因此我們在這裡稍作解釋。 -由於這並非以該頁面特有的起始样式所撰寫，而且該頁面已經有了原始樣式，您不能僅僅像這樣寫 CSS `xxx {border: 1px solid white; color: black}`。 -遵循前面的這種撰寫風格使得維持暗模式風格變得困難。這是因為深色模式主要需要更改字型色彩、背景色彩或框線色彩。 - -根據字型色彩、背景色彩和框線色彩將顏色進行分組是非常高效的，且透過將相應的選取器放在一起以統一方法便於維護。必要時，只需調整相應樣式中的相應選取器即可。 +# Adapted Styles + +在這裡放置深色模式的 CSS 或更改主題顏色。 + +在 `index.ts` 中，我們將編寫一些正規表達式來匹配特定頁面上使用的樣式。 + +## 樣式表檔案撰寫風格 + +``` scss +.bewly-design.pageName { + // 在此處實施對頁面的特定修改，例如調整佈局，並將那些樣式放在這裡。 + .right-side-bar .catalog { + line-height: 3em; + } + + // ... + + // #region theme color adaption part + // 透過在 `:not()` 中寫入一個不存在的選取器來提高內部樣式的優先級。 + :not(foobar) { + a, + b, + c { + color: var(--bew-theme-color); + } + + d, + e, + f { + // 請注意，使用 `!important` 應該是最後萬不得已的手段 + color: var(--bew-theme-color) !important; + } + + g, + h, + i { + background-color: var(--bew-theme-color); + } + + j, + k, + l { + background-color: var(--bew-theme-color) !important; + } + + // ... + } + // #endregion + + // #region dark mode adaption part + &.dark { + aa, + bb, + cc { + color: var(--bew-text-1); + } + + dd, + ee, + ff { + color: var(--bew-text-1) !important; + } + + // ... + } + // #endregion +} +``` + +## 何解使用上述之撰寫風格？ + +您可能會對為什麼應該遵循建議的撰寫風格感到困惑，因此我們在這裡稍作解釋。 +由於這並非以該頁面特有的起始样式所撰寫，而且該頁面已經有了原始樣式，您不能僅僅像這樣寫 CSS `xxx {border: 1px solid white; color: black}`。 +遵循前面的這種撰寫風格使得維持暗模式風格變得困難。這是因為深色模式主要需要更改字型色彩、背景色彩或框線色彩。 + +根據字型色彩、背景色彩和框線色彩將顏色進行分組是非常高效的，且透過將相應的選取器放在一起以統一方法便於維護。必要時，只需調整相應樣式中的相應選取器即可。 diff --git a/src/styles/adaptedStyles/adaptedStyles-jyut.md b/src/styles/adaptedStyles/adaptedStyles-jyut.md index ca9afd2b8c..d9f96ee6f6 100644 --- a/src/styles/adaptedStyles/adaptedStyles-jyut.md +++ b/src/styles/adaptedStyles/adaptedStyles-jyut.md @@ -1,76 +1,76 @@ -# Adapted Styles - -喺呢度會擺啲深色模式同埋變更佈景色嘅 CSS - -喺 `index.ts`，我哋會寫一啲正則表達式令到寫嘅樣式夾返特定嘅頁面。 - -## 樣式檔書寫風格 - -``` scss -.bewly-design.pageName { - // 喺當前嘅頁面進行特別嘅修改，就好似你係噉以執吓個佈局，將嗰啲嘢擺晒落呢度 - .right-side-bar .catalog { - line-height: 3em; - } - - // ... - - // #region theme color adaption part - // 用 `:not()` 選取選取唔存在嘅元素愛嚟提高喺呢度入邊嘅優先權 - :not(foobar) { - a, - b, - c { - color: var(--bew-theme-color); - } - - d, - e, - f { - // 請注意用 `!important` 係你最後嘅選擇 - color: var(--bew-theme-color) !important; - } - - g, - h, - i { - background-color: var(--bew-theme-color); - } - - j, - k, - l { - background-color: var(--bew-theme-color) !important; - } - - // ... - } - // #endregion - - // #region dark mode adaption part - &.dark { - aa, - bb, - cc { - color: var(--bew-text-1); - } - - dd, - ee, - ff { - color: var(--bew-text-1) !important; - } - - // ... - } - // #endregion -} -``` - -## 點解要用上高嘅書寫風格？ - -你可能唔係幾明點解要跟住建議嘅書寫風格，所以而家我哋慢慢解釋。 -事關你唔係用呢個網頁最初嘅樣式嚟寫，而呢個網頁不溜就已經有咗自己嘅樣式，所以你唔可以直接噉寫 CSS 就好似 `xxx {border: 1px solid white; color: black}` 噉。 -學似啱啱嘅書寫風格後續會勁難維護深色模式。因為深色模式主要係改文本顏色、背景顏色或者邊框顏色呢啲嚟達到效果。 - -將啲顏色按照字體顏色、背景顏色同埋邊框顏色噉樣分類，再將適合嘅選取器擺埋一齊，用統一嘅處理手法嚟管理，噉樣做會提高效率同埋易啲維護。之後需要執吓佢嗰陣，淨係需要就住相對應嘅樣式風格嚟調整返相對應嘅選取器就得嘞。 +# Adapted Styles + +喺呢度會擺啲深色模式同埋變更佈景色嘅 CSS + +喺 `index.ts`，我哋會寫一啲正則表達式令到寫嘅樣式夾返特定嘅頁面。 + +## 樣式檔書寫風格 + +``` scss +.bewly-design.pageName { + // 喺當前嘅頁面進行特別嘅修改，就好似你係噉以執吓個佈局，將嗰啲嘢擺晒落呢度 + .right-side-bar .catalog { + line-height: 3em; + } + + // ... + + // #region theme color adaption part + // 用 `:not()` 選取選取唔存在嘅元素愛嚟提高喺呢度入邊嘅優先權 + :not(foobar) { + a, + b, + c { + color: var(--bew-theme-color); + } + + d, + e, + f { + // 請注意用 `!important` 係你最後嘅選擇 + color: var(--bew-theme-color) !important; + } + + g, + h, + i { + background-color: var(--bew-theme-color); + } + + j, + k, + l { + background-color: var(--bew-theme-color) !important; + } + + // ... + } + // #endregion + + // #region dark mode adaption part + &.dark { + aa, + bb, + cc { + color: var(--bew-text-1); + } + + dd, + ee, + ff { + color: var(--bew-text-1) !important; + } + + // ... + } + // #endregion +} +``` + +## 點解要用上高嘅書寫風格？ + +你可能唔係幾明點解要跟住建議嘅書寫風格，所以而家我哋慢慢解釋。 +事關你唔係用呢個網頁最初嘅樣式嚟寫，而呢個網頁不溜就已經有咗自己嘅樣式，所以你唔可以直接噉寫 CSS 就好似 `xxx {border: 1px solid white; color: black}` 噉。 +學似啱啱嘅書寫風格後續會勁難維護深色模式。因為深色模式主要係改文本顏色、背景顏色或者邊框顏色呢啲嚟達到效果。 + +將啲顏色按照字體顏色、背景顏色同埋邊框顏色噉樣分類，再將適合嘅選取器擺埋一齊，用統一嘅處理手法嚟管理，噉樣做會提高效率同埋易啲維護。之後需要執吓佢嗰陣，淨係需要就住相對應嘅樣式風格嚟調整返相對應嘅選取器就得嘞。 diff --git a/src/styles/adaptedStyles/adaptedStyles.md b/src/styles/adaptedStyles/adaptedStyles.md index 3e3ec7a2e5..2e1991fe8e 100644 --- a/src/styles/adaptedStyles/adaptedStyles.md +++ b/src/styles/adaptedStyles/adaptedStyles.md @@ -1,76 +1,76 @@ -# Adapted Styles - -Here, place the CSS for dark mode or change the theme color. - -In `index.ts`, we will write some regex rules to match the style used on a specific page. - -## Style File Writing Style - -``` scss -.bewly-design.pageName { - // Implement specific modifications to the page, like tweaking the layout, and place those styles here - .right-side-bar .catalog { - line-height: 3em; - } - - // ... - - // #region theme color adaption part - // Increase the priority of the style inside by writing a non-existent selector in `:not()` - :not(foobar) { - a, - b, - c { - color: var(--bew-theme-color); - } - - d, - e, - f { - // PLEASE NOTE THAT USING `!important` SHOULD BE A LAST RESORT - color: var(--bew-theme-color) !important; - } - - g, - h, - i { - background-color: var(--bew-theme-color); - } - - j, - k, - l { - background-color: var(--bew-theme-color) !important; - } - - // ... - } - // #endregion - - // #region dark mode adaption part - &.dark { - aa, - bb, - cc { - color: var(--bew-text-1); - } - - dd, - ee, - ff { - color: var(--bew-text-1) !important; - } - - // ... - } - // #endregion -} -``` - -## Why use the above writing style? - -You might be confused about why you should follow the suggested writing style, so here we will explain a bit. -Since this isn't written in a pure style specific to the page, and the page already has an original style, you can't simply write CSS like `xxx {border: 1px solid white; color: black}`. -Following this writing style makes it hard to maintain the dark mode style. This is because dark mode primarily requires changes to the text color, background color, or border color. - -It's efficient to group colors according to font color, background color, and border color, and to unify the approach by placing the appropriate selectors together for easy maintenance. When necessary, just adjust the corresponding selectors in the corresponding styles. +# Adapted Styles + +Here, place the CSS for dark mode or change the theme color. + +In `index.ts`, we will write some regex rules to match the style used on a specific page. + +## Style File Writing Style + +``` scss +.bewly-design.pageName { + // Implement specific modifications to the page, like tweaking the layout, and place those styles here + .right-side-bar .catalog { + line-height: 3em; + } + + // ... + + // #region theme color adaption part + // Increase the priority of the style inside by writing a non-existent selector in `:not()` + :not(foobar) { + a, + b, + c { + color: var(--bew-theme-color); + } + + d, + e, + f { + // PLEASE NOTE THAT USING `!important` SHOULD BE A LAST RESORT + color: var(--bew-theme-color) !important; + } + + g, + h, + i { + background-color: var(--bew-theme-color); + } + + j, + k, + l { + background-color: var(--bew-theme-color) !important; + } + + // ... + } + // #endregion + + // #region dark mode adaption part + &.dark { + aa, + bb, + cc { + color: var(--bew-text-1); + } + + dd, + ee, + ff { + color: var(--bew-text-1) !important; + } + + // ... + } + // #endregion +} +``` + +## Why use the above writing style? + +You might be confused about why you should follow the suggested writing style, so here we will explain a bit. +Since this isn't written in a pure style specific to the page, and the page already has an original style, you can't simply write CSS like `xxx {border: 1px solid white; color: black}`. +Following this writing style makes it hard to maintain the dark mode style. This is because dark mode primarily requires changes to the text color, background color, or border color. + +It's efficient to group colors according to font color, background color, and border color, and to unify the approach by placing the appropriate selectors together for easy maintenance. When necessary, just adjust the corresponding selectors in the corresponding styles. From 10ad269e92da519730fc41ab2ae80d89b0a1f3b6 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Mon, 29 Jul 2024 13:22:22 +0800 Subject: [PATCH 09/28] fix: lint --- src/components/Dock/Dock.vue | 9 +++++++-- src/contentScripts/views/App.vue | 2 +- src/contentScripts/views/Favorites/Favorites.vue | 4 ++-- src/contentScripts/views/Home/components/ForYou.vue | 4 ++-- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue index 935d1b41ca..69670a01f0 100644 --- a/src/components/Dock/Dock.vue +++ b/src/components/Dock/Dock.vue @@ -15,8 +15,13 @@ defineProps<{ activatedPage: AppPage }>() -const emit = defineEmits(['changePage', 'settingsVisibilityChange', 'refresh', 'backToTop']) - +// const emit = defineEmits(['changePage', 'settingsVisibilityChange', 'refresh', 'backToTop']) +const emit = defineEmits<{ + (e: 'changePage', page: AppPage): void + (e: 'settingsVisibilityChange'): void + (e: 'refresh'): void + (e: 'backToTop'): void +}>() const mainStore = useMainStore() const { isDark, toggleDark } = useDark() const { reachTop } = useBewlyApp() diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index deea1868f9..87498f9020 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -282,7 +282,7 @@ provide('BEWLY_APP', { v-if="isHomePage() && !settings.useOriginalBilibiliHomepage" pointer-events-auto :activated-page="activatedPage" - @change-page="pageName => changeActivatePage(pageName)" + @change-page="(page: AppPage) => changeActivatePage(page)" @settings-visibility-change="toggleSettings" @refresh="handleThrottledPageRefresh" @back-to-top="handleThrottledBackToTop" diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue index dbef183e42..f60a938dfd 100644 --- a/src/contentScripts/views/Favorites/Favorites.vue +++ b/src/contentScripts/views/Favorites/Favorites.vue @@ -27,7 +27,7 @@ const keyword = ref('') const { handlePageRefresh, handleReachBottom, haveScrollbar } = useBewlyApp() const isLoading = ref(false) const isFullPageLoading = ref(false) -const noMoreContent = ref() +const noMoreContent = ref(false) onMounted(async () => { await getFavoriteCategories() @@ -195,7 +195,7 @@ function isMusic(item: FavoriteResource) { bg="$bew-elevated-solid" rounded="$bew-radius" shadow="$bew-shadow-2" mt--2 transition="all 300 ease-in-out" :class="{ hide: shouldMoveCtrlBarUp }" > -