Skip to content

Commit a821d63

Browse files
authored
修正暗色模式下影片/番劇頁背景圖片載入前閃白問題 (#87)
* 在视频播放页也能显示遮罩背景 * 添加UI开关:在视频页使用背景遮罩 Introduce a new setting to control the background mask on video playback pages. Added locale strings for the menu/group/label in en, cmn-CN, cmn-TW and jyut; created a Video settings component (VideoPage.vue) and added the Video entry to BewlyPages list and BewlyPage enum. Persisted the new showVideoPageBackground flag in settings (default true) and updated the content script to respect this setting via a new showBackground computed property. * 格式化代码 * 通过注入为评论区添加毛玻璃效果 Remove static SCSS rules for the bottom comments blur and instead inject them at runtime into the comments' shadow DOM. Adds injectBottomCommentStyle() which polls for the #commentapp > bili-comments and its header renderer, injects a style tag (id: bewly-bottom-comment-style) to apply transparent + backdrop-filter styling, and stops polling after success or 10s. Also calls injectBottomCommentStyle() from injectApp so the style is applied when the comments component loads. This ensures the blur style applies inside the shadowRoot where global CSS cannot reach. * Handle Conflict * 动画/视频页使用全局样式强制透明 * 或许10秒内没有拖动到下方评论区的部分,但之后也许会拖动到 * 调整 弹幕列表 和 视频合集 为 毛玻璃样式 * 分别控制 background danmaku-list video-pod 样式类 * 添加 弹幕列表 和 视频合集 样式选项UI Introduce two new settings (videoPageDanmakuStyle, videoPageVideoPodStyle) with defaults set to 'auto' and UI controls in the VideoPage settings. Add corresponding locale strings (cmn-CN, cmn-TW, en, jyut). Update content script to toggle CSS classes (has-transparent-danmaku-list, has-transparent-video-pod) reactively based on these settings and the global background; remove the previous page-reload watcher for showVideoPageBackground. * 修正暗色模式下影片/番劇頁背景圖片載入前閃白問題
1 parent 81dd1af commit a821d63

2 files changed

Lines changed: 21 additions & 9 deletions

File tree

src/styles/adaptedStyles/pages/animePlayback&MoviePage.scss

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,21 @@
1515
}
1616

1717
// 使视频页和番剧页的底层元素背景透明,以显示 Bewly 背景
18-
&,
19-
body,
20-
#app,
21-
.bili-app,
22-
#bili-app,
23-
.video-container-v1 {
24-
background: transparent !important;
25-
background-color: transparent !important;
18+
&.has-custom-background {
19+
// html 保留 var(--bew-bg) 作为底色,避免暗色模式下图片加载前闪白
20+
& {
21+
background: var(--bew-bg) !important;
22+
background-color: var(--bew-bg) !important;
23+
}
24+
25+
body,
26+
#app,
27+
.bili-app,
28+
#bili-app,
29+
.video-container-v1 {
30+
background: transparent !important;
31+
background-color: transparent !important;
32+
}
2633
}
2734

2835
// #region new anime playback & movie page

src/styles/adaptedStyles/pages/videoPage.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,12 @@
2222

2323
// 使视频页和番剧页的底层元素背景透明,以显示 Bewly 背景
2424
&.has-custom-background {
25-
&,
25+
// html 保留 var(--bew-bg) 作为底色,避免暗色模式下图片加载前闪白
26+
& {
27+
background: var(--bew-bg) !important;
28+
background-color: var(--bew-bg) !important;
29+
}
30+
2631
body,
2732
#app,
2833
.bili-app,

0 commit comments

Comments
 (0)