From 8338f1a9d145e18207c34f758e8e7e348b2b6e98 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 3 Sep 2023 13:46:44 +0800 Subject: [PATCH] feat: adapt to dark theme for moments page * refactor: separate styles for comments section --- src/background/index.ts | 2 + src/contentScripts/index.ts | 2 + src/contentScripts/views/App.vue | 1 + src/manifest.ts | 2 +- src/styles/adaptedStyles/comments.scss | 46 +++++++++++++++++ src/styles/adaptedStyles/index.ts | 19 ++------ src/styles/adaptedStyles/moments-page.scss | 57 ++++++++++++++++++++++ src/styles/adaptedStyles/video-page.scss | 45 ----------------- src/styles/variables.scss | 4 +- 9 files changed, 116 insertions(+), 62 deletions(-) create mode 100644 src/styles/adaptedStyles/comments.scss create mode 100644 src/styles/adaptedStyles/moments-page.scss diff --git a/src/background/index.ts b/src/background/index.ts index ad38fd26..4a9380f8 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -68,6 +68,8 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(`${tab.url}`) // search page || /https?:\/\/search.bilibili.com\.*/.test(`${tab.url}`) + // moments page + || /https?:\/\/t.bilibili.com\.*/.test(`${tab.url}`) ) { if (changInfo.status === 'loading') { // browser.scripting.insertCSS({ diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 02633a70..08208e0c 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -80,6 +80,8 @@ function injectApp() { || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl) // search page || /https?:\/\/search.bilibili.com\.*/.test(currentUrl) + // moments + || /https?:\/\/t.bilibili.com\.*/.test(currentUrl) ) { // const originalPageContent = document.querySelector('#i_cecream') // if (originalPageContent) diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue index b854cb2a..9fdc74d8 100644 --- a/src/contentScripts/views/App.vue +++ b/src/contentScripts/views/App.vue @@ -140,6 +140,7 @@ onMounted(() => { document.body.style.setProperty('background-color', 'unset', 'important') document.documentElement.style.setProperty('background-color', 'unset', 'important') } + document.documentElement.style.setProperty('font-size', '14px') if (mainAppRef.value) { mainAppRef.value.addEventListener('scroll', () => { diff --git a/src/manifest.ts b/src/manifest.ts index 1646a163..2aece28c 100644 --- a/src/manifest.ts +++ b/src/manifest.ts @@ -39,7 +39,7 @@ export async function getManifest() { host_permissions: ['*://*.bilibili.com/*', '*://*.mcbbs.net/*'], content_scripts: [ { - matches: ['*://www.bilibili.com/*', '*://search.bilibili.com/*'], + matches: ['*://www.bilibili.com/*', '*://search.bilibili.com/*', '*://t.bilibili.com/*'], js: ['./dist/contentScripts/index.global.js'], run_at: 'document_start', match_about_blank: true, diff --git a/src/styles/adaptedStyles/comments.scss b/src/styles/adaptedStyles/comments.scss new file mode 100644 index 00000000..5ea4634a --- /dev/null +++ b/src/styles/adaptedStyles/comments.scss @@ -0,0 +1,46 @@ +.dark { + // 評論人用戶名 + .reply-item .root-reply-container .content-warp .user-info .user-name, + .sub-reply-item .sub-user-info .sub-user-name { + // --520c991b: var(--bew-theme-color); + color: var(--bew-text-1); + } + + // UP主觉得很赞 + .reply-item + .root-reply-container + .content-warp + .root-reply + .reply-tag-list + .reply-tag-item { + color: var(--bew-text-2) !important; + background-color: var(--bew-fill-1) !important; + } + + // Like & dislike icon + .like-icon, + .dislike-icon, + .sub-like-icon, + .sub-dislike-icon { + color: var(--bew-text-3) !important; + } + + .like-icon:hover, + .like-icon.liked, + .dislike-icon:hover, + .dislike-icon.disliked, + .sub-like-icon:hover, + .sub-like-icon.liked, + .sub-dislike-icon:hover, + .sub-dislike-icon.disliked { + color: var(--bew-theme-color) !important; + } + + .reply-operation .operation-icon:hover { + color: var(--bew-theme-color); + } + + .bili-comment.browser-pc * a:hover { + color: var(--bew-theme-color-80); + } +} diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts index 65951643..34155b8a 100644 --- a/src/styles/adaptedStyles/index.ts +++ b/src/styles/adaptedStyles/index.ts @@ -1,15 +1,4 @@ -import('./video-page.scss') -import('./search-page.scss') -// const currentUrl = document.URL -// if ( -// // video page -// /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl) -// // watch later playlist -// || /https?:\/\/(www.)?bilibili.com\/list\/watchlater.*/.test(currentUrl) -// // favorite playlist -// || /https?:\/\/(www.)?bilibili.com\/list\/ml.*/.test(currentUrl) -// ) -// else if ( -// // search page -// /https?:\/\/search.bilibili.com\.*/.test(currentUrl) -// ) +import './comments.scss' +import './search-page.scss' +import './video-page.scss' +import './moments-page.scss' diff --git a/src/styles/adaptedStyles/moments-page.scss b/src/styles/adaptedStyles/moments-page.scss new file mode 100644 index 00000000..f064551d --- /dev/null +++ b/src/styles/adaptedStyles/moments-page.scss @@ -0,0 +1,57 @@ +.bili-dyn-home--member { + margin-top: 10px; +} + +#app .bg { + z-index: unset; +} + +.bili-dyn-home--member { + z-index: 1; + position: relative; +} + +// #region Old moments page +.international-header { + visibility: hidden; + margin-bottom: 10px; +} + +aside section.sticky { + top: 80px; +} +// #endregion + +.dark { + .dyn-orig-author__following.following-icon:before { + filter: saturate(0) brightness(2); + } + + #app .bg { + opacity: 0.2; + } + + #app .bgc { + background-color: var(--bew-bg); + } + + .bili-dyn-home--member { + // --bg1: var(--bew-content-solid-1); + // --bg2: var(--bew-bg); + } + + .bili-dyn-topic__card { + color: var(--bew-theme-color); + } + + // #region Old moments page + // .bili-rich-text__content { + // color: var(--bew-text-1); + // } + + // .bili-dyn-my-info, + // .bili-dyn-my-info--skeleton { + // background-color: var(--bew-bg); + // } + // #endregion +} diff --git a/src/styles/adaptedStyles/video-page.scss b/src/styles/adaptedStyles/video-page.scss index d05286db..e17c9e1b 100644 --- a/src/styles/adaptedStyles/video-page.scss +++ b/src/styles/adaptedStyles/video-page.scss @@ -79,49 +79,4 @@ .copy-link:hover { background-color: var(--bew-theme-color-80); } - - // 評論人用戶名 - .reply-item .root-reply-container .content-warp .user-info .user-name, - .sub-reply-item .sub-user-info .sub-user-name { - // --520c991b: var(--bew-theme-color); - color: var(--bew-text-1); - } - - // UP主觉得很赞 - .reply-item - .root-reply-container - .content-warp - .root-reply - .reply-tag-list - .reply-tag-item { - color: var(--bew-text-2) !important; - background-color: var(--bew-fill-1) !important; - } - - // Like & dislike icon - .like-icon, - .dislike-icon, - .sub-like-icon, - .sub-dislike-icon { - color: var(--bew-text-3) !important; - } - - .like-icon:hover, - .like-icon.liked, - .dislike-icon:hover, - .dislike-icon.disliked, - .sub-like-icon:hover, - .sub-like-icon.liked, - .sub-dislike-icon:hover, - .sub-dislike-icon.disliked { - color: var(--bew-theme-color) !important; - } - - .reply-operation .operation-icon:hover { - color: var(--bew-theme-color); - } - - .bili-comment.browser-pc * a:hover { - color: var(--bew-theme-color-80); - } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 83fa8556..9c4b9145 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -238,13 +238,15 @@ // --bpx-primary-color: var(--bew-theme-color); // --bpx-fn-color: var(--bew-theme-color); // --bpx-fn-hover-color: var(--bew-theme-color); - + --brand_pink_hover: var(--bew-theme-color-80); --brand_pink_active: var(--bew-theme-color); --brand_pink_disabled: var(--bew-theme-color-60); --brand_blue_hover: var(--bew-theme-color-80); --brand_blue_active: var(--bew-theme-color); --brand_blue_disabled: var(--bew-theme-color-60); + + --graph_bg_thin_rgb: 13, 14, 17; } :root.dark {