mtfyun/reader
1
0 Fork 0
mirror of https://github.com/hectorqin/reader.git synced 2026-11-13 14:31:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(media): align desktop video playback with theme

Browse Source
This commit is contained in:
hectorqin committed 2026-10-01 13:46:53 +08:00
1 parent 358d6005d1
commit 49edc895b9
2 files changed
+41
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/media/presentation.css
+7
View File
@@ -553,6 +553,13 @@ body:has(>#app>.media-screen) { background: #faf9f5; }
.media-person-detail>.media-detail-actions {position:absolute;top:0;right:0;margin:0}
.media-screen .media-person-detail .media-detail-favorite {width:44px;padding:10px;background:transparent}
@media(min-width:701px){
/* The desktop brand belongs to the channel landing page. Hide it on
secondary/detail pages where the page header already identifies the view. */
body:has(.media-screen.media-secondary-page) .media-channel-entry .media-brand,
body:has(.media-screen.media-playback-page) .media-channel-entry .media-brand,
body:has(.media-screen.media-chapters-page) .media-channel-entry .media-brand,
body:has(.media-screen.media-metadata-workspace) .media-channel-entry .media-brand,
body:has(.media-screen>.media-detail-page) .media-channel-entry .media-brand {display:none}
body:has(.media-screen.media-playback-page) .media-channel-entry a,
body:has(.media-screen.media-chapters-page) .media-channel-entry a,
body:has(.media-screen.media-metadata-workspace) .media-channel-entry a,
web/src/media/v2.css
+34
View File
@@ -182,6 +182,40 @@
.media-episode-rail .media-video-episodes button>span:nth-child(2) {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-episode-rail .media-video-episodes small {margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media-episode-rail .media-video-episodes>div {display:contents}
/* Video playback is a themed surface around a deliberately dark video
viewport. Keep the header, metadata and episode list on the active media
palette even when the reader's global dark-mode selector is also present. */
body[data-media-theme] .media-screen.media-video-page,
body[data-media-theme] .media-player.media-player-expanded {
background:var(--media-theme-background)!important;
color:var(--media-theme-text)!important;
}
body[data-media-theme] .media-screen.media-video-page>.media-heading {
background:var(--media-theme-background)!important;
color:var(--media-theme-text)!important;
border-color:var(--media-theme-border)!important;
}
body[data-media-theme] .media-video-workspace,
body[data-media-theme] .media-video-controls,
body[data-media-theme] .media-episode-rail {
color:var(--media-theme-text);
}
body[data-media-theme] .media-episode-rail {
background:var(--media-theme-paper);
border-color:var(--media-theme-border);
box-shadow:0 8px 24px color-mix(in srgb,var(--media-theme-text) 12%,transparent);
}
body[data-media-theme] .media-episode-rail header {background:var(--media-theme-paper)}
body[data-media-theme] .media-episode-rail .media-video-episodes button[aria-current=true] {
background:var(--media-theme-selection);
color:var(--media-theme-accent);
}
body[data-media-theme] .media-video-stage .plyr {
--plyr-color-main:var(--media-theme-accent);
--plyr-menu-background:var(--media-theme-paper);
--plyr-menu-color:var(--media-theme-text);
}
.searchable-select {position:relative;display:inline-flex;flex-direction:column;min-width:190px;max-width:100%}
.searchable-select-label {display:block;margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:600}
.searchable-select-native {position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}