diff --git a/.gitignore b/.gitignore index 215c4db808..7a53ecf416 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,4 @@ dist-ssr extension/ extension-firefox/ node_modules +web-ext-profile diff --git a/docs/CONTRIBUTING-cmn_CN.md b/docs/CONTRIBUTING-cmn_CN.md index d244f2f7d8..f10f27c028 100644 --- a/docs/CONTRIBUTING-cmn_CN.md +++ b/docs/CONTRIBUTING-cmn_CN.md @@ -11,6 +11,28 @@ ### 开发 (Chrome or Edge) +#### Chrome 或 Edge 的第一种方法 （推荐） + +1. 运行 pnpm 命令 + +```bash +# 安装依赖 +pnpm install + +# 创建一个用于存储登录状态的扩展程序文件夹 +mkdir web-ext-profile + +# 运行项目 +pnpm dev + +# 打完这条指令之后，会自动打开一个新的 Chrome 窗口并打开 BiliBili 网站 +pnpm start:chromium +``` + +2. 每次修改扩展程序，它都会重新加载，您可以通过刷新网页来查看更改 + +#### Chrome 或 Edge 的另外一种方法 + 1. 运行 pnpm 命令 ```bash @@ -45,6 +67,28 @@ pnpm build ### 开发 (Firefox) +#### Firefox 的第一种方法 （推荐） + +1. 运行 pnpm 命令 + +```bash +# 安装依赖 +pnpm install + +# 创建一个用于存储登录状态的扩展程序文件夹 +mkdir web-ext-profile + +# 运行项目 +pnpm dev + +# 打完这条指令之后，会自动打开一个新的 Firefox 窗口并打开 BiliBili 网站 +pnpm start:firefox +``` + +2. 每次修改扩展程序，它都会重新加载，您可以通过刷新网页来查看更改 + +#### Firefox 的另外一种方法 + 1. 运行 pnpm 命令 ```bash diff --git a/docs/CONTRIBUTING-cmn_TW.md b/docs/CONTRIBUTING-cmn_TW.md index b9b1db1fd8..18aee82143 100644 --- a/docs/CONTRIBUTING-cmn_TW.md +++ b/docs/CONTRIBUTING-cmn_TW.md @@ -10,6 +10,28 @@ ### 開發（Chrome 或 Edge） +#### Chrome 或 Edge 的第一種方法 （推薦） + +1. 執行 pnpm 指令 + +```bash +# 安裝依賴 +pnpm install + +# 建立一個用戶的帳戶資料夾，用於擴充功能存儲登入狀態 +mkdir web-ext-profile + +# 運行專案 +pnpm dev + +# 打完這條指令之後，會自動開啓一個新的 Chrome 視窗並打開 BiliBili 網站 +pnpm start:chromium +``` + +2. 之後每次修改擴充功能，他都會重新載入內容，你可以透過重新整理頁面來查看變更內容 + +#### Chrome 或 Edge 的另外一種方法 + 1. 執行 pnpm 指令 ```bash @@ -44,6 +66,28 @@ pnpm build ### 開發（Firefox） +#### Firefox 的第一種方法 （推薦） + +1. 執行 pnpm 命令 + +```bash +# 安裝依賴 +pnpm install + +# 建立一個用戶的帳戶資料夾，用於擴充功能存儲登入狀態 +mkdir web-ext-profile + +# 運行專案 +pnpm dev + +# 打完這條指令之後，會自動開啓一個新的 Firefox 視窗並打開 BiliBili 網站 +pnpm start:firefox +``` + +2. 之後每次修改擴充功能，它都會重新加載，你可以透過重新整理頁面來查看變更內容 + +#### Firefox 的另一種方法 + 1. 執行 pnpm 命令 ```bash diff --git a/docs/CONTRIBUTING-jyut.md b/docs/CONTRIBUTING-jyut.md index d9f31a4d00..0a8b8348a5 100644 --- a/docs/CONTRIBUTING-jyut.md +++ b/docs/CONTRIBUTING-jyut.md @@ -10,6 +10,28 @@ ### 開發（Chrome 或 Edge） +#### Chrome 或 Edge 嘅第一種方法 （推介） + +1. 執行 pnpm 指令 + +```bash +# 安裝依賴 +pnpm install + +# 建立一個用家帳戶資料夾，用於延伸功能存儲登入狀態 +mkdir web-ext-profile + +# 運行專案 +pnpm dev + +# 打完呢條指令之後，會自動開啓一個新嘅 Chrome 視窗並且打開 BiliBili 網站 +pnpm start:chromium +``` + +2. 之後每次修改延伸功能，佢會重新載入，你可以 refresh 個網頁睇吓改變之後嘅效果 + +#### Chrome 或 Edge 嘅另外一種方法 + 1. 執行 pnpm 指令 ```bash @@ -32,9 +54,9 @@ pnpm dev 每一次執過 code 之後，你都要撳 [Extensions Reloader](https://chromewebstore.google.com/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid) 粒掣，然之後 refresh 個 page，確保係有效果。 -#### 建立（Chrome 或 Edge） +#### 建置（Chrome 或 Edge） -建置延新功能，要執行下底嘅指令 +建置延伸功能，要執行下底嘅指令 ```bash pnpm build @@ -44,6 +66,28 @@ pnpm build ### 開發（Firefox） +#### Firefox 嘅第一種方法 （推介） + +1. 執行 pnpm 指令 + +```bash +# 安裝依賴 +pnpm install + +# 建立一個用家帳戶資料夾，用於延伸功能存儲登入狀態 +mkdir web-ext-profile + +# 運行專案 +pnpm dev + +# 打完呢條指令之後，會自動開啓一個新嘅 Firefox 視窗並且打開 BiliBili 網站 +pnpm start:firefox +``` + +2. 之後每次修改延伸功能，佢會重新載入，你可以 refresh 個網頁睇吓改變之後嘅效果 + +#### Firefox 嘅另外一種方法 + 1. 執行 pnpm 指令 ```bash @@ -62,7 +106,7 @@ pnpm dev #### 建立（Firefox） -建置延新功能，要執行下底嘅指令 +建置延伸功能，要執行下底嘅指令 ```bash pnpm build-firefox diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 216a086f27..3407c2358b 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -10,6 +10,28 @@ This project is built using [Vite](https://vitejs.dev/), please make sure you ha ### Development (Chrome or Edge) +#### The First Method for Chrome or Edge (RECOMMENDED) + +1. Run the pnpm command + +```bash +# Install dependencies +pnpm install + +# Create a profile folder for the extension to store the login status +mkdir web-ext-profile + +# Run the project +pnpm dev + +# After typing this commend, it will automatically open a new Chrome window that opens BiliBili website +pnpm start:chromium +``` + +2. Every time you change the extension, it will reload, and you can see the changes by refreshing the webpage + +#### The Alternative Method for Chrome or Edge + 1. Run the pnpm command ```bash @@ -44,6 +66,28 @@ Then package it to the `extension` folder ### Development (Firefox) +#### The First Method for Firefox (RECOMMENDED) + +1. Run the pnpm command + +```bash +# Install dependencies +pnpm install + +# Create a profile folder for the extension to store the login status +mkdir web-ext-profile + +# Run the project +pnpm dev + +# After typing this commend, it will automatically open a new Firefox window that opens BiliBili website +pnpm start:firefox +``` + +2. Every time you change the extension, it will reload, and you can see the changes by refreshing the webpage + +#### The Alternative Method for Firefox + 1. Run the pnpm command ```bash diff --git a/knip.json b/knip.json index 36013b496b..a569834737 100644 --- a/knip.json +++ b/knip.json @@ -5,6 +5,7 @@ "src/background/index.ts", "src/options/main.ts", "src/popup/main.ts", + "src/components/**", "scripts/*.ts", "*.config.*" ], diff --git a/package.json b/package.json index ab983f99c7..1239f717d1 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.3", "private": true, "packageManager": "pnpm@9.5.0", "description": "Just make a few small changes to your Bilibili homepage.", @@ -104,5 +104,15 @@ }, "lint-staged": { "*": "eslint --fix" + }, + "webExt": { + "run": { + "keepProfileChanges": true, + "firefoxProfile": "./web-ext-profile", + "chromiumProfile": "./web-ext-profile", + "startUrl": [ + "https://www.bilibili.com/" + ] + } } } diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 70cc4475b7..4f040fafc6 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -176,6 +176,15 @@ settings: contributors: 贡献者 just_wanna_change_the_job: 我只想换一份好一点的工作... + just_wanna_change_the_job_hint: |- + Let's just consider this a piece of performance art. + + Now I'm still working at my old company, which has started to gradually appreciate my contributes. I work on both front-end & back-end there. + I'm not foolish enough to mess up in the current situation; Instead, I will try to create my own environment and gradually become a versatile person. + The Logos for BewlyBewly, whether they are new or old, or even the VTuber style of logo, are all designed and made by me. I have always been working hard to develop my ability to produce independent projects. + + Additionally, I am very grateful for the people who have contracted me by email or other means during this time, whether they ending up helping me or not. + However, I particularly want to wish a certain product manager who lured people into working for free while boasting about his own capabilities, thinking I would stupidly believe everything he said? I wish you a lifetime of only managing products you dislike for other companies. just_wanna_change_the_job_desc: |- 首先十分抱歉在这里打扰您，我是一名前端开发者，坐标广州，我想换一份好一点的工作 BewlyBewly 其实是我在找工作的时候做的一个项目，那时试过有快半年是完全没有工作的状态，面试时一直刁难要么就是被礼貌拒绝 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index 7b93ddbd28..6c92da1c58 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -179,6 +179,15 @@ settings: contributors: 貢獻者 just_wanna_change_the_job: 我只想換一份好一點的工作... + just_wanna_change_the_job_hint: |- + Let's just consider this a piece of performance art. + + Now I'm still working at my old company, which has started to gradually appreciate my contributes. I work on both front-end & back-end there. + I'm not foolish enough to mess up in the current situation; Instead, I will try to create my own environment and gradually become a versatile person. + The Logos for BewlyBewly, whether they are new or old, or even the VTuber style of logo, are all designed and made by me. I have always been working hard to develop my ability to produce independent projects. + + Additionally, I am very grateful for the people who have contracted me by email or other means during this time, whether they ending up helping me or not. + However, I particularly want to wish a certain product manager who lured people into working for free while boasting about his own capabilities, thinking I would stupidly believe everything he said? I wish you a lifetime of only managing products you dislike for other companies. just_wanna_change_the_job_desc: |- 首先十分抱歉在这里打扰您，我是一名前端开发者，坐标广州，我想换一份好一点的工作 BewlyBewly 其实是我在找工作的时候做的一个项目，那时试过有快半年是完全没有工作的状态，面试时一直刁难要么就是被礼貌拒绝 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 8cb6de7977..992abd9cc8 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -177,6 +177,15 @@ settings: contributors: Contributors just_wanna_change_the_job: i just wanna switch to a better job... + just_wanna_change_the_job_hint: |- + Let's just consider this a piece of performance art. + + Now I'm still working at my old company, which has started to gradually appreciate my contributes. I work on both front-end & back-end there. + I'm not foolish enough to mess up in the current situation; Instead, I will try to create my own environment and gradually become a versatile person. + The Logos for BewlyBewly, whether they are new or old, or even the VTuber style of logo, are all designed and made by me. I have always been working hard to develop my ability to produce independent projects. + + Additionally, I am very grateful for the people who have contracted me by email or other means during this time, whether they ending up helping me or not. + However, I particularly want to wish a certain product manager who lured people into working for free while boasting about his own capabilities, thinking I would stupidly believe everything he said? I wish you a lifetime of only managing products you dislike for other companies. just_wanna_change_the_job_desc: |- 首先十分抱歉在这里打扰您，我是一名前端开发者，坐标广州，我想换一份好一点的工作 BewlyBewly 其实是我在找工作的时候做的一个项目，那时试过有快半年是完全没有工作的状态，面试时一直刁难要么就是被礼貌拒绝 diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 4b3fa3f9f9..0aedb54a7b 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -179,6 +179,15 @@ settings: contributors: 貢獻者 just_wanna_change_the_job: 我淨係想搵份好啲嘅工做... + just_wanna_change_the_job_hint: |- + Let's just consider this a piece of performance art. + + Now I'm still working at my old company, which has started to gradually appreciate my contributes. I work on both front-end & back-end there. + I'm not foolish enough to mess up in the current situation; Instead, I will try to create my own environment and gradually become a versatile person. + The Logos for BewlyBewly, whether they are new or old, or even the VTuber style of logo, are all designed and made by me. I have always been working hard to develop my ability to produce independent projects. + + Additionally, I am very grateful for the people who have contracted me by email or other means during this time, whether they ending up helping me or not. + However, I particularly want to wish a certain product manager who lured people into working for free while boasting about his own capabilities, thinking I would stupidly believe everything he said? I wish you a lifetime of only managing products you dislike for other companies. just_wanna_change_the_job_desc: |- 首先十分抱歉在这里打扰您，我是一名前端开发者，坐标广州，我想换一份好一点的工作 BewlyBewly 其实是我在找工作的时候做的一个项目，那时试过有快半年是完全没有工作的状态，面试时一直刁难要么就是被礼貌拒绝 diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue index eb3ed9da27..f0336c1181 100644 --- a/src/components/AppBackground.vue +++ b/src/components/AppBackground.vue @@ -1,9 +1,12 @@ 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/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 @@ @@ -301,7 +301,7 @@ async function checkGitHubRelease() { } .title { - --uno: "text-base fw-bold mb-2"; + --uno: "fw-bold mb-2"; } .link-card { diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue index 1253c0bba7..915b58094b 100644 --- a/src/components/Settings/components/Appearance.vue +++ b/src/components/Settings/components/Appearance.vue @@ -2,7 +2,6 @@ import { useThrottleFn } from '@vueuse/core' import { useI18n } from 'vue-i18n' -import Select from '~/components/Select.vue' import { settings } from '~/logic' import ChangeWallpaper from './ChangeWallpaper.vue' @@ -116,6 +115,10 @@ function changeWallpaper(url: string) { + + + + diff --git a/src/components/Settings/components/ChangeWallpaper.vue b/src/components/Settings/components/ChangeWallpaper.vue index d939d48b81..420f219677 100644 --- a/src/components/Settings/components/ChangeWallpaper.vue +++ b/src/components/Settings/components/ChangeWallpaper.vue @@ -1,8 +1,4 @@ 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) } diff --git a/src/logic/storage.ts b/src/logic/storage.ts index 80f48f8e1e..a5e591f3e1 100644 --- a/src/logic/storage.ts +++ b/src/logic/storage.ts @@ -30,6 +30,7 @@ export interface Settings { theme: 'light' | 'dark' | 'auto' themeColor: string + useLinearGradientThemeColorBackground: boolean wallpaperMode: 'buildIn' | 'byUrl' wallpaper: string enableWallpaperMasking: boolean @@ -83,10 +84,11 @@ export const settings = useStorageLocal('settings', ref({ reduceFrostedGlassBlur: false, dockItemVisibilityList: [], disableLightDarkModeSwitcherOnDock: false, - moveBackToTopOrRefreshButtonToDock: false, + moveBackToTopOrRefreshButtonToDock: true, theme: 'auto', themeColor: '#00a1d6', + useLinearGradientThemeColorBackground: false, wallpaperMode: 'buildIn', wallpaper: '', enableWallpaperMasking: false, 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. diff --git a/src/styles/adaptedStyles/pages/searchPage.scss b/src/styles/adaptedStyles/pages/searchPage.scss index 4cb57e9ea3..c686843a40 100644 --- a/src/styles/adaptedStyles/pages/searchPage.scss +++ b/src/styles/adaptedStyles/pages/searchPage.scss @@ -1,7 +1,7 @@ .bewly-design.searchPage { - // .search-input-container .search-fixed-header.search-sticky-header { - // display: none;; - // } + body { + background-color: var(--bew-bg) !important; + } // .dark, .search-layout { 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; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9736253510..1b9df114b1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -7,7 +7,7 @@ --bew-radius: 12px; --bew-radius-half: calc(var(--bew-radius) / 2); - --bew-top-bar-height: 70px; + --bew-top-bar-height: 68px; // #region Filters // Use this in all components (except dialogs) if you want to add a frosted glass effect