renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: adapt to dark theme for moments page

Browse Source 
* refactor: separate styles for comments section
This commit is contained in:
Hakadao
2023-09-03 13:46:44 +08:00
parent 9c7a1560d9
commit 8338f1a9d1
9 changed files with 116 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/background/index.ts
View File

@@ -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({

2
src/contentScripts/index.ts
View File

@@ -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)

1
src/contentScripts/views/App.vue
View File

@@ -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', () => {

2
src/manifest.ts
View File

@@ -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,

46
src/styles/adaptedStyles/comments.scss Normal file
View File

@@ -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);
}
}

19
src/styles/adaptedStyles/index.ts
View File

@@ -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'

57
src/styles/adaptedStyles/moments-page.scss Normal file
View File

@@ -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
}

45
src/styles/adaptedStyles/video-page.scss
View File

@@ -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);
}
}

4
src/styles/variables.scss
View File

@@ -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 {