From 96a85047daab0a66d88af4cfe28e6fb115316320 Mon Sep 17 00:00:00 2001 From: hakadao Date: Sun, 31 Mar 2024 04:31:31 +0800 Subject: [PATCH] feat: support dark mode for watch later, 404 page && adjust the regex rules --- src/contentScripts/index.ts | 34 ++++++++------- src/styles/adaptedStyles/error404Page.scss | 35 +++++++++++++++ src/styles/adaptedStyles/footer.scss | 40 ++++++++++++++--- src/styles/adaptedStyles/index.ts | 45 ++++++++++++-------- src/styles/adaptedStyles/watchLaterPage.scss | 45 ++++++++++++++++++++ 5 files changed, 159 insertions(+), 40 deletions(-) create mode 100644 src/styles/adaptedStyles/error404Page.scss create mode 100644 src/styles/adaptedStyles/watchLaterPage.scss diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index b5e27929..6d7f17a1 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -30,36 +30,40 @@ function isSupportedPages() { // homepage isHomePage() // fix #166 https://github.com/hakadao/BewlyBewly/issues/166 - || /https?:\/\/www.bilibili.com\/\?bvid=.*$/.test(currentUrl) + || /https?:\/\/www\.bilibili\.com\/\?bvid=.*$/.test(currentUrl) // video page - || /https?:\/\/(www.)?bilibili.com\/(video|list)\/.*/.test(currentUrl) + || /https?:\/\/(www.)?bilibili\.com\/(video|list)\/.*/.test(currentUrl) // anime playback & movie page - || /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/bangumi\/play\/.*/.test(currentUrl) // watch later playlist - || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/list\/watchlater.*/.test(currentUrl) // favorite playlist - || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/list\/ml.*/.test(currentUrl) // search page - || /https?:\/\/search.bilibili.com\.*/.test(currentUrl) + || /https?:\/\/search\.bilibili\.com\.*/.test(currentUrl) // moments - || /https?:\/\/t.bilibili.com\.*/.test(currentUrl) + || /https?:\/\/t\.bilibili\.com\.*/.test(currentUrl) // moment detail - || /https?:\/\/www.bilibili.com\/opus\/.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/opus\/.*/.test(currentUrl) // history page - || /https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/account\/history.*/.test(currentUrl) + // watcher later page + || /https?:\/\/(www\.)?bilibili\.com\/watchlater\/#\/list.*/.test(currentUrl) // user space page - || /https?:\/\/space.bilibili.com\.*/.test(currentUrl) + || /https?:\/\/space\.bilibili\.com\.*/.test(currentUrl) // notifications page - || /https?:\/\/message.bilibili.com\.*/.test(currentUrl) + || /https?:\/\/message\.bilibili\.com\.*/.test(currentUrl) // bilibili channel page b站分区页面 - || /https?:\/\/www.bilibili.com\/v\/(?!popular).*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/v\/(?!popular).*/.test(currentUrl) // anime page & chinese anime page - || /https?:\/\/www.bilibili.com\/(anime|guochuang).*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/(anime|guochuang).*/.test(currentUrl) // channel page e.g. tv shows, movie, variety shows, mooc page - || /https?:\/\/(www.)?bilibili.com\/(tv|movie|variety|mooc|documentary).*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/(tv|movie|variety|mooc|documentary).*/.test(currentUrl) // article page - || /https?:\/\/(www.)?bilibili.com\/(read).*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/(read).*/.test(currentUrl) + // 404 page + || /^https?:\/\/(www\.)?bilibili\.com\/404.*$/.test(currentUrl) ) return true else diff --git a/src/styles/adaptedStyles/error404Page.scss b/src/styles/adaptedStyles/error404Page.scss new file mode 100644 index 00000000..6ea38d97 --- /dev/null +++ b/src/styles/adaptedStyles/error404Page.scss @@ -0,0 +1,35 @@ +.bewly-design.error404Page { + .error-manga img { + background-color: white; + border-top: 20px solid white; + border-bottom: 20px solid white; + border-radius: 4px; + } + + body { + background-color: var(--bew-homepage-bg); + } + + // #region theme color adaption part + // Increase the priority of the style inside by writing a non-existent selector in :not() + :not(fdjslfds) { + .error-panel .rollback-btn, + .error-manga .change-img-btn { + background-color: var(--bew-theme-color); + } + + .error-panel .rollback-btn:hover, + .error-manga .change-img-btn:hover { + background-color: var(--bew-theme-color-80); + } + } + // #endregion + + // #region dark mode adaption part + &.dark { + .error-container { + background-color: var(--bew-content-solid-1); + } + } + // #endregion +} diff --git a/src/styles/adaptedStyles/footer.scss b/src/styles/adaptedStyles/footer.scss index b3c05adf..c4cf404a 100644 --- a/src/styles/adaptedStyles/footer.scss +++ b/src/styles/adaptedStyles/footer.scss @@ -1,17 +1,43 @@ .bewly-design { - .bili-footer { - color: var(--bew-text-2); - - .footer-wrp { - background-color: var(--bew-content-solid-1); + // #region theme color adaption part + // Increase the priority of the style inside by writing a non-existent selector in :not() + :not(fdjslfds) { + .bili-footer a:hover, + .international-footer a:hover, + .international-footer .partner a:hover, + .international-footer .link-box .link-item.link-c a:hover p { + color: var(--bew-theme-color); } + } + // #endregion - a { + // #region dark mode adaption part + &.dark { + .bili-footer a, + .international-footer a, + .international-footer .link-box .link-item.link-c p { color: var(--bew-text-1); } - .boston-postcards li { + .bili-footer, + .international-footer .link-box .link-item .bt { + color: var(--bew-text-2); + } + + .international-footer .partner, + .international-footer .partner a { + color: var(--bew-text-3); + } + + .bili-footer .footer-wrp, + .international-footer { + background-color: var(--bew-content-solid-1); + } + + .bili-footer .boston-postcards li, + .international-footer .link-box .link-item { border-color: var(--bew-border-color); } } + // #endregion } diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts index a0fb5aef..a4a751d3 100644 --- a/src/styles/adaptedStyles/index.ts +++ b/src/styles/adaptedStyles/index.ts @@ -5,22 +5,19 @@ import './modal.scss' import './btn.scss' import './userCard.scss' import './videoPlayer.scss' +import { isHomePage } from '~/utils/main' async function setupStyles() { const currentUrl = document.URL // homepage 首页 - if (/https?:\/\/bilibili.com\/?$/.test(currentUrl) - || /https?:\/\/www.bilibili.com\/?$/.test(currentUrl) - || /https?:\/\/www.bilibili.com\/index.html$/.test(currentUrl) - || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(currentUrl) - || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(currentUrl)) { + if (isHomePage()) { await import('./homePage.scss') document.documentElement.classList.add('homePage') } // notifications page 消息页 - else if (/https?:\/\/message.bilibili.com\.*/.test(currentUrl)) { + else if (/https?:\/\/message\.bilibili\.com\.*/.test(currentUrl)) { await import('./notificationsPage.scss') document.documentElement.classList.add('notificationsPage') } @@ -28,38 +25,44 @@ async function setupStyles() { // moments page 动态页 else if ( // moments - /https?:\/\/t.bilibili.com\.*/.test(currentUrl) + /https?:\/\/t\.bilibili\.com\.*/.test(currentUrl) // moment detail - || /https?:\/\/www.bilibili.com\/opus\/.*/.test(currentUrl)) { + || /https?:\/\/www\.bilibili\.com\/opus\/.*/.test(currentUrl)) { await import('./momentsPage.scss') document.documentElement.classList.add('momentsPage') } // history page 历史记录页 - else if (/https?:\/\/(www.)?bilibili.com\/account\/history.*/.test(currentUrl)) { + else if (/https?:\/\/(www\.)?bilibili\.com\/account\/history.*/.test(currentUrl)) { await import('./historyPage.scss') document.documentElement.classList.add('historyPage') } + // watch later page 稍候再看页 + else if (/https?:\/\/(www\.)?bilibili\.com\/watchlater\/#\/list.*/.test(currentUrl)) { + await import('./watchLaterPage.scss') + document.documentElement.classList.add('watchLaterPage') + } + // user space page 空间页 - else if (/https?:\/\/space.bilibili.com\.*/.test(currentUrl)) { + else if (/https?:\/\/space.bilibili\.com\.*/.test(currentUrl)) { await import('./userSpacePage.scss') document.documentElement.classList.add('userSpacePage') } // search page 搜索结果页 - else if (/https?:\/\/search.bilibili.com\.*/.test(currentUrl)) { + else if (/https?:\/\/search.bilibili\.com\.*/.test(currentUrl)) { await import('./searchPage.scss') document.documentElement.classList.add('searchPage') } // video page 视频页 else if ( - /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl) + /https?:\/\/(www\.)?bilibili\.com\/video\/.*/.test(currentUrl) // watch later playlist 稍候再看播放页 - || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/list\/watchlater.*/.test(currentUrl) // favorite playlist 收藏播放页 - || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl) + || /https?:\/\/(www\.)?bilibili\.com\/list\/ml.*/.test(currentUrl) ) { await import('./videoPage.scss') document.documentElement.classList.add('videoPage') @@ -67,7 +70,7 @@ async function setupStyles() { else if ( // anime playback & movie page 番剧播放页与电影播放页 - /https?:\/\/(www.)?bilibili.com\/bangumi\/play\/.*/.test(currentUrl) + /https?:\/\/(www\.)?bilibili\.com\/bangumi\/play\/.*/.test(currentUrl) ) { await import('./animePlayback&MoviePage.scss') document.documentElement.classList.add('animePlaybackAndMoviePage') @@ -75,23 +78,29 @@ async function setupStyles() { // anime page & chinese anime page 番剧页 与 国创动漫 else if ( - /https?:\/\/(www.)?bilibili.com\/(anime|guochuang).*/.test(currentUrl)) { + /https?:\/\/(www\.)?bilibili\.com\/(anime|guochuang).*/.test(currentUrl)) { await import('./animePage.scss') document.documentElement.classList.add('animePage') } // channel page e.g. tv shows, movie, variety shows, mooc page 分区页 else if ( - /https?:\/\/(www.)?bilibili.com\/(tv|movie|variety|mooc|documentary).*/.test(currentUrl)) { + /https?:\/\/(www\.)?bilibili\.com\/(tv|movie|variety|mooc|documentary).*/.test(currentUrl)) { await import('./channelPage.scss') document.documentElement.classList.add('channelPage') } // articles page 专栏页 - else if (/https?:\/\/(www.)?bilibili.com\/read.*/.test(currentUrl)) { + else if (/https?:\/\/(www\.)?bilibili\.com\/read.*/.test(currentUrl)) { await import('./articlesPage.scss') document.documentElement.classList.add('articlesPage') } + + // 404 page 404页 + else if (/^https?:\/\/(www\.)?bilibili\.com\/404.*$/.test(currentUrl)) { + await import('./error404Page.scss') + document.documentElement.classList.add('error404Page') + } } setupStyles() diff --git a/src/styles/adaptedStyles/watchLaterPage.scss b/src/styles/adaptedStyles/watchLaterPage.scss new file mode 100644 index 00000000..4acbe321 --- /dev/null +++ b/src/styles/adaptedStyles/watchLaterPage.scss @@ -0,0 +1,45 @@ +.bewly-design.watchLaterPage { + // #region theme color adaption part + // Increase the priority of the style inside by writing a non-existent selector in :not() + :not(fdjslfds) { + .watch-later-list header .s-btn { + border-color: var(--bew-theme-color); + } + + .watch-later-list header .s-btn, + .watch-later-list .list-box .av-item .av-about .t:hover, + .watch-later-list .list-box .av-item .av-about .info .user:hover { + color: var(--bew-theme-color); + } + + .watch-later-list header .s-btn:hover { + color: white; + } + + .watch-later-list header .s-btn:hover { + background-color: var(--bew-theme-color); + } + } + // #endregion + + // #region dark mode adaption part + &.dark { + .watch-later-list .list-box .av-item .key, + .watch-later-list .list-box .av-item .av-about .t { + color: var(--bew-text-1); + } + + .watch-later-list .list-box .av-item .av-about .info .user { + color: var(--bew-text-2); + } + + .watch-later-list .list-box .av-item .av-about { + border-color: var(--bew-border-color); + } + + .watch-later-list header .s-btn { + background-color: transparent; + } + } + // #endregion +}