mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-10 21:11:08 +08:00
refactor(web): remove ~320 lines of media CSS for classes nothing renders
The media styles grew in layers and replaced screens left their rules behind (old channel switcher, details-based menus, manager tabs/toolbar, match confirm box, resume cover, settings groups, …). 56 class names had no reference in the source; rules naming only them are gone, and dead members of :is()/:where() lists are dropped while the live ones stay. Screenshots of every ui:review scene match the previous build apart from timing noise. media-css-classes.test.ts now fails when a media stylesheet names a class the source never renders. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
hectorqinandClaude Opus 5.5 committed
1 parent
d73b987de9
commit
cdce43f98f
5 files changed
+57
-321
No files matched your search
@@ -6,12 +6,6 @@
|
||||
.media-screen .media-favorite-filter-menu>summary::-webkit-details-marker {display:none}
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen .media-favorite-filter-menu>summary:hover {color:var(--text)}}
|
||||
.media-screen .media-favorite-filter-menu>summary:focus-visible {outline:2px solid var(--media-accent);outline-offset:3px;border-radius:var(--radius-xs)}
|
||||
.media-screen .media-favorite-filter-options {position:absolute;z-index:40;top:calc(100% + 4px);right:0;display:grid;min-width:148px;padding:5px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--media-paper,var(--surface));box-shadow:0 8px 24px #0002}
|
||||
.media-screen .media-favorite-filter-options button {display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:40px;padding:9px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:inherit;font-size:var(--text-meta);line-height:1.4;text-align:left;cursor:pointer}
|
||||
.media-screen .media-favorite-filter-options button:focus-visible {background:var(--media-selection);color:var(--media-accent);outline:0}
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen .media-favorite-filter-options button:hover {background:var(--media-selection);color:var(--media-accent);outline:0}}
|
||||
.media-screen .media-favorite-filter-options button[aria-selected=true] {color:var(--media-accent);font-weight:600}
|
||||
.media-screen .media-favorite-filter-options button svg {flex:none;color:var(--media-accent)}
|
||||
.media-screen .media-favorites .media-favorite-list {max-width:none}
|
||||
.media-screen .media-favorites .media-favorite-row {display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;text-align:left;color:var(--text)}
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen .media-favorites .media-favorite-row:hover {background:var(--surface)}}
|
||||
|
||||
@@ -8,11 +8,7 @@
|
||||
.media-heading-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
|
||||
.media-screen .media-icon-button{padding:10px;border:0;background:transparent;width:44px;height:44px}
|
||||
.media-icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
|
||||
.media-actions{position:relative}.media-actions summary{list-style:none;cursor:pointer;padding:10px 12px;min-height:44px;box-sizing:border-box}.media-actions summary::-webkit-details-marker{display:none}
|
||||
.media-actions nav{position:absolute;right:0;top:100%;z-index:90;min-width:150px;padding:6px;background:var(--surface,#f0f0e8);border:1px solid var(--border,#dce2d4);border-radius:var(--radius-md);box-shadow:0 6px 22px #0002;display:grid;gap:3px}
|
||||
.media-actions nav button{text-align:left;border:0;background:transparent}
|
||||
.media-screen .media-toolbar{margin:8px 0 12px;font-size:var(--text-meta)}.media-toolbar select{max-width:75%;min-width:0}
|
||||
.media-loading{font-size:var(--text-meta);opacity:.7;min-height:20px}
|
||||
.media-library-row{flex-wrap:wrap;gap:8px}.media-library-row>span{flex-basis:100%}.media-library-row button{flex:1}
|
||||
.media-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.media-history-row>div{min-width:0;padding:6px 0;line-height:1.5}.media-history-row>button:not(:first-child){white-space:nowrap;min-width:60px}
|
||||
.media-personal-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:inherit;text-decoration:none;font-size:var(--text-label);font-weight:500;line-height:1.5}.media-history-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font-size:var(--text-meta);line-height:1.5}.media-history-unavailable{color:var(--media-error-ink);white-space:normal!important}
|
||||
@@ -22,14 +18,13 @@
|
||||
.media-chapter-filter{display:flex;align-items:center;gap:12px;font-size:var(--text-label)}.media-chapter-filter label{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.media-chapter-filter input{width:100%;min-width:0}.media-chapter-filter>span{white-space:nowrap}.media-edition-resources{margin:16px 0;font-size:var(--text-label)}.media-edition-resources>summary{cursor:pointer;padding:10px 0}
|
||||
.media-player:is(.media-player-audio,.media-player-native-video){position:fixed;bottom:80px;left:24px;right:24px;z-index:75;max-width:680px;padding:8px 12px;border:1px solid var(--border,#dce2d4);border-radius:var(--radius-md);background:var(--surface,#f0f0e8);color:var(--text,#30392c);box-shadow:0 4px 20px #0002}
|
||||
.media-audio-controls{display:grid;gap:4px}.media-audio-controls input{min-width:0;accent-color:var(--media-accent);min-height:28px;width:100%;margin:0}.media-audio-controls label{display:flex;align-items:center;gap:10px;font-size:var(--text-meta)}.media-audio-controls label input{max-width:120px}.media-player-expanded:is(.media-player-audio,.media-player-native-video) .media-mini-progress{display:none}.media-mini button:disabled{opacity:.45;cursor:default}
|
||||
.media-search-filters{flex-wrap:wrap;gap:8px}.media-search-filters label{display:grid;gap:4px;font-size:var(--text-meta);min-width:0;flex:1}.media-search-filters select{min-width:0;width:100%}.media-search-filters>span{font-size:var(--text-meta);white-space:nowrap}
|
||||
.media-job-result-filters{flex-wrap:wrap}.media-job-result-filters label{min-width:0;font-size:var(--text-label)}.media-job-result-filters select{max-width:100%}
|
||||
.media-task-history>h3{margin:12px 0;font-size:var(--text-body)}.media-task-history>details{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;margin:8px 0}.media-task-history>details>summary{cursor:pointer;overflow-wrap:anywhere}.media-task-create{margin:14px 0;border-top:1px solid var(--border);padding-top:12px}.media-task-create>summary{cursor:pointer;color:var(--media-accent)}
|
||||
.media-manager .media-user-option{display:flex;align-items:center;gap:10px;padding:8px 0;min-width:0;max-width:100%;box-sizing:border-box}.media-manager .media-user-option>span{min-width:0;overflow-wrap:anywhere}.media-manager .media-user-option>input{flex-shrink:0}
|
||||
.media-mini{display:flex;align-items:center;gap:8px;min-height:44px}.media-mini button{font:inherit;color:inherit;background:transparent;border:0;min-height:44px;padding:8px;cursor:pointer}.media-mini-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.media-mini button:last-child{min-width:44px;font-size:var(--text-display)}
|
||||
:is(.media-player-audio,.media-player-native-video):not(.media-player-expanded)>audio,:is(.media-player-audio,.media-player-native-video):not(.media-player-expanded)>label,:is(.media-player-audio,.media-player-native-video):not(.media-player-expanded)>div:not(.media-mini){display:none}.media-screen{padding-bottom:230px}
|
||||
@media(max-width:600px){.media-player:is(.media-player-audio,.media-player-native-video){bottom:calc(66px + env(safe-area-inset-bottom));left:10px;right:10px;padding:4px 8px;border-radius:var(--radius-md)}.media-screen{padding-bottom:240px}}
|
||||
.media-mini{flex-wrap:wrap;gap:0 8px}.media-mini .media-mini-toggle{min-width:44px;font-size:var(--text-display)}.media-mini-time{font-size:var(--text-meta);opacity:.7;font-variant-numeric:tabular-nums;flex-basis:100%;padding:0 8px 5px}.media-mini-progress{width:100%;height:3px;border:0;accent-color:var(--media-accent)}.media-mini-progress::-webkit-progress-bar{background:var(--border,#dce2d4)}.media-mini-progress::-webkit-progress-value{background:var(--media-fill)}.media-playback-support{font-size:var(--text-meta);line-height:1.6}.media-playback-support summary{cursor:pointer;padding:6px 0}
|
||||
.media-mini{flex-wrap:wrap;gap:0 8px}.media-mini .media-mini-toggle{min-width:44px;font-size:var(--text-display)}.media-mini-time{font-size:var(--text-meta);opacity:.7;font-variant-numeric:tabular-nums;flex-basis:100%;padding:0 8px 5px}.media-mini-progress{width:100%;height:3px;border:0;accent-color:var(--media-accent)}.media-mini-progress::-webkit-progress-bar{background:var(--border,#dce2d4)}.media-mini-progress::-webkit-progress-value{background:var(--media-fill)}
|
||||
.media-current-playlist{min-width:0}.media-current-playlist summary{cursor:pointer;padding:8px 0}.media-current-playlist label{display:grid;gap:6px;margin:10px 0}.media-current-playlist input{min-width:0;width:100%;box-sizing:border-box}.media-current-playlist ol{list-style:none;padding:0;max-height:320px;overflow:auto}.media-current-playlist li button{width:100%;text-align:left;margin:3px 0;overflow-wrap:anywhere}.media-current-playlist button[aria-current]{background:var(--media-selection);color:var(--media-accent)}.media-current-playlist nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
||||
.media-continue{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 12px;margin:8px 0;border:1px solid var(--border,#dce2d4);border-radius:var(--radius-md)}.media-continue>div{min-width:0;display:grid;gap:3px}.media-continue small,.media-continue span{font-size:var(--text-meta);opacity:.7}.media-continue strong,.media-continue span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.media-continue strong{font-size:var(--text-ui)}.media-continue progress{width:100%;height:3px;accent-color:var(--media-accent)}.media-continue>p{grid-column:1/-1;margin:0;font-size:var(--text-meta)}
|
||||
.media-player:not(.media-player-expanded){position:fixed;bottom:80px;left:24px;right:24px;z-index:75;max-width:680px;padding:8px 12px;border:1px solid var(--border,#dce2d4);border-radius:var(--radius-md);background:var(--surface,#f0f0e8);color:var(--text,#30392c);box-shadow:0 4px 20px #0002}.media-player:not(.media-player-expanded)>:not(.media-mini){display:none}@media(max-width:600px){.media-player:not(.media-player-expanded){bottom:calc(66px + env(safe-area-inset-bottom));left:10px;right:10px;padding:4px 8px;border-radius:var(--radius-md)}}
|
||||
@@ -43,14 +38,13 @@
|
||||
.media-current-playlist .media-playlist-edit{display:flex;gap:6px}.media-current-playlist .media-playlist-edit button{width:auto;font-size:var(--text-meta);flex:1;text-align:center}
|
||||
.media-lyrics{min-width:0}.media-lyrics .media-toolbar{font-size:var(--text-meta);gap:8px}.media-lyrics-lines{position:relative;height:280px;overflow-y:auto;overscroll-behavior:contain;padding:80px 8px;box-sizing:border-box;text-align:center}.media-lyrics-lines button{display:block;width:100%;border:0;background:transparent;padding:12px 4px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;opacity:.55}.media-lyrics-lines button[aria-current=true]{opacity:1;color:var(--media-accent);font-weight:700}.media-lyrics-lines p{white-space:pre-wrap;overflow-wrap:anywhere;padding:8px 0;line-height:1.7}
|
||||
.media-folder-path{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}.media-folder-path button{font-size:var(--text-meta);max-width:100%;overflow-wrap:anywhere}.media-folders>small{display:block;margin:8px 0;color:var(--muted)}.media-folders>.media-row>button{flex:1;text-align:left;min-width:0;overflow-wrap:anywhere}.media-folders h2,.media-folders h3{overflow-wrap:anywhere;min-width:0}.media-folders .media-toolbar{flex-wrap:wrap}
|
||||
.media-settings{max-width:640px;margin:0 auto}.media-settings section{padding:12px 0;border-top:1px solid var(--border)}.media-settings h2{font-size:var(--text-title)}.media-settings p{font-size:var(--text-meta);line-height:1.6}.media-settings .media-settings-check{display:flex;align-items:center;gap:10px}.media-settings-check input{width:auto;min-height:24px;accent-color:var(--media-accent)}.media-settings-links{display:flex;flex-wrap:wrap;gap:8px}.media-settings>section>button{max-width:100%;white-space:normal}.media-density-comfortable .media-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}@media(max-width:600px){.media-density-comfortable .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
|
||||
.media-settings{max-width:640px;margin:0 auto}.media-settings section{padding:12px 0;border-top:1px solid var(--border)}.media-settings h2{font-size:var(--text-title)}.media-settings p{font-size:var(--text-meta);line-height:1.6}.media-settings .media-settings-check{display:flex;align-items:center;gap:10px}.media-settings-check input{width:auto;min-height:24px;accent-color:var(--media-accent)}.media-settings>section>button{max-width:100%;white-space:normal}
|
||||
/* Keep mixed image/fallback cards aligned even when their captions have different lengths. */
|
||||
.media-hero>div{min-width:0;overflow-wrap:anywhere}.media-hero{align-items:flex-start}
|
||||
.media-screen h1,.media-screen h2,.media-screen h3,.media-screen h4,.media-screen p,.media-screen summary{overflow-wrap:anywhere}
|
||||
.media-cover-title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:100%}
|
||||
.media-hero .media-cover{flex-shrink:0}
|
||||
.media-grid{align-items:start}
|
||||
.media-track-sort{display:flex;align-items:center;gap:8px;font-size:var(--text-meta);margin:8px 0}.media-track-sort select{min-width:0}
|
||||
.media-track-list{display:grid;gap:0}.media-screen .media-track-entry{display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:9px 0}
|
||||
.media-track-entry .media-cover{width:44px;height:44px;min-width:44px;flex:0 0 44px;box-sizing:border-box;padding:4px;font-size:var(--text-micro);border-radius:var(--radius-xs)}.media-track-entry .media-cover-title{-webkit-line-clamp:2}
|
||||
.media-track-copy{min-width:0;flex:1}.media-track-copy strong{display:block;font-size:var(--text-ui);font-weight:500;overflow-wrap:anywhere}.media-track-copy small{display:block;font-size:var(--text-meta);color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
|
||||
@@ -64,17 +58,15 @@
|
||||
}
|
||||
.media-cover.media-cover-failed{box-sizing:border-box;padding:6px;flex-direction:column;gap:4px}.media-cover-failed .media-cover-title{font-size:var(--text-ui);line-height:1.25;-webkit-line-clamp:1}.media-cover-retry{display:grid;gap:4px;font:var(--text-meta)/1.5 system-ui}.media-screen .media-cover-retry button{font:var(--text-meta)/1.4 system-ui;min-height:40px;padding:6px}
|
||||
.media-artist-info dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;font-size:var(--text-label);line-height:1.6}.media-artist-info dt{opacity:.65}.media-artist-info dd{margin:0;overflow-wrap:anywhere}
|
||||
.media-detail-heading{min-width:0;display:grid;gap:8px;overflow-wrap:anywhere}.media-screen .media-detail-heading h1{margin:0;line-height:1.35}.media-detail-heading .media-detail-credit{margin:0;font-size:var(--text-ui);line-height:1.5}.media-detail-kind,.media-detail-year{font-size:var(--text-meta);opacity:.7}
|
||||
.media-detail-heading{min-width:0;display:grid;gap:8px;overflow-wrap:anywhere}.media-screen .media-detail-heading h1{margin:0;line-height:1.35}.media-detail-heading .media-detail-credit{margin:0;font-size:var(--text-ui);line-height:1.5}.media-detail-kind{font-size:var(--text-meta);opacity:.7}
|
||||
.media-library-editor dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 14px;margin:0;font-size:var(--text-label);line-height:1.6}.media-library-editor dt{opacity:.7}.media-library-editor dd{margin:0;overflow-wrap:anywhere}.media-library-editor>p{font-size:var(--text-meta);line-height:1.6;margin:0}
|
||||
.media-grid .media-search-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
|
||||
.media-edition{margin-top:20px;border-top:1px solid var(--border);padding-top:4px}.media-edition>h2{overflow-wrap:anywhere;margin-bottom:8px}.media-edition>.media-toolbar{font-size:var(--text-meta);margin:8px 0}.media-edition>.media-row>span{font-size:var(--text-ui);line-height:1.5}.media-edition>.media-row small{font-variant-numeric:tabular-nums;margin-top:3px}.media-edition>.media-row>button{color:var(--media-accent);background:var(--media-selection);border-color:transparent;min-width:64px;font-size:var(--text-label)}.media-edition-admin{margin:20px 0 8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:12px}.media-edition-admin>summary{font-size:var(--text-label);font-weight:500;cursor:pointer;padding:2px 0}.media-edition-admin[open]>summary{margin-bottom:8px}.media-edition-admin>details>summary{padding:10px 0;font-size:var(--text-label);cursor:pointer}.media-edition-admin>button{margin-top:8px;font-size:var(--text-label)}.media-edition-admin .media-toolbar{flex-wrap:wrap}
|
||||
.media-manager-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 16px}.media-manager-heading h1{margin:0}.media-manager-heading>span{font-size:var(--text-meta);opacity:.65;white-space:nowrap}
|
||||
.media-manager .media-library-row{padding:14px;border:1px solid var(--border,#dce2d4);border-radius:var(--radius-md);background:var(--surface,#f0f0e8);gap:8px}.media-library-row strong{font-size:var(--text-body);font-weight:600}.media-library-row small{margin-top:5px}.media-manager .media-library-row button{background:color-mix(in srgb,var(--surface) 96%,var(--text));min-height:40px;font-size:var(--text-label)}
|
||||
.media-manager .media-library-create,.media-manager .media-library-editor{border:1px solid var(--border,#dce2d4);border-radius:var(--radius-md);padding:16px;margin:18px 0;background:var(--surface,#f0f0e8);box-sizing:border-box;max-width:100%}.media-manager .media-library-create h2,.media-manager .media-library-editor h2{margin:0 0 14px;font-size:var(--text-title)}.media-manager .media-form{max-width:100%;margin:0;gap:12px}.media-manager .media-form label{font-size:var(--text-label);gap:6px}.media-manager .media-form input,.media-manager .media-form select{width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--surface) 96%,var(--text));min-width:0}.media-manager .media-form small{font-size:var(--text-meta);line-height:1.6;opacity:.7}.media-manager .media-form button[type=submit]{background:var(--media-fill);color:var(--media-on-accent);border-color:var(--media-fill);font-weight:600}
|
||||
@media(min-width:760px){.media-manager .media-library-row>span{flex-basis:auto}.media-manager .media-library-row button{flex:0 0 auto;min-width:66px}.media-manager .media-library-create,.media-manager .media-library-editor{max-width:720px}.media-manager .media-library-create .media-permission-fields{grid-template-columns:1fr 1fr;gap:14px 18px}.media-manager .media-library-create label:nth-child(2){grid-column:1/-1;grid-row:2}.media-manager .media-form button[type=submit]{justify-self:start;min-width:150px}}
|
||||
.media-album-playback .media-album-summary>button{font-size:var(--text-meta);padding:4px 8px}.media-album-playback .media-album-actions>.media-primary{background:var(--media-primary);color:var(--media-on-primary);border-color:var(--media-primary)}
|
||||
.media-album-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--text-meta);min-height:24px}.media-album-summary>button{font-size:var(--text-meta);padding:4px 8px}.media-album-actions{justify-content:flex-start;gap:8px}.media-album-start{font-size:var(--text-meta);line-height:1.5}.media-album-playback .media-season-list{gap:0}.media-album-playback .media-album-disc{font-size:var(--text-meta);margin:18px 0 4px;color:var(--muted);font-weight:500}.media-album-playback .media-season-row{padding:2px 0;gap:4px}.media-album-playback .media-season-row[data-selected=true]{background:var(--media-selection);border-radius:var(--radius-sm)}.media-album-playback .media-album-track-link{display:flex;align-items:center;gap:8px;min-width:0;background:transparent;border:0;padding:8px 6px;min-height:44px}.media-album-number{flex:0 0 22px;text-align:center;font-size:var(--text-meta);color:var(--muted);font-variant-numeric:tabular-nums}.media-album-track-title{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--text-ui)}.media-album-track-title>small{display:block;font-size:var(--text-meta);color:var(--muted);margin-top:3px}.media-album-duration{flex-shrink:0;font-size:var(--text-meta);font-variant-numeric:tabular-nums;color:var(--muted)}
|
||||
.media-grid.media-season-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.media-season-picker .media-tile{display:grid;grid-template-columns:42px minmax(0,1fr);align-content:center;align-items:center;column-gap:10px;padding:8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-height:80px}.media-season-picker .media-cover{grid-row:1 / span 3;width:42px;height:63px;min-width:42px;padding:3px;box-sizing:border-box;font-size:var(--text-micro);line-height:1.4}.media-season-picker .media-cover-title{-webkit-line-clamp:3}.media-season-picker .media-tile>strong{margin:0;white-space:normal;overflow-wrap:anywhere;font-size:var(--text-label)}.media-season-picker .media-tile>small{grid-column:2;margin-top:4px;min-width:0}.media-season-picker .media-tile>small:empty{display:none}@media(max-width:700px){.media-grid.media-season-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
|
||||
.media-season-playback .media-toolbar>button{flex-shrink:0;white-space:nowrap}.media-season-playback .media-toolbar>span{min-width:0;overflow-wrap:anywhere}
|
||||
.media-screen-error>strong{display:block;font-size:var(--text-body)}.media-screen-error>p{margin:8px 0;overflow-wrap:anywhere;line-height:1.6}.media-screen-error-actions{display:flex;flex-wrap:wrap;gap:8px}.media-screen-error-actions>button{white-space:nowrap}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
brand *text* (links, selected icons, outlines); --media-fill is a brand-filled
|
||||
control and --media-on-accent what sits on it. Dialogs and confirmations opened
|
||||
from media read the same names. */
|
||||
.media-screen, .media-player, .media-channel-entry, .media-modal {
|
||||
.media-screen,.media-player,.media-modal {
|
||||
--text: var(--color-ink);
|
||||
--muted: var(--color-muted);
|
||||
--surface: var(--color-surface-2);
|
||||
@@ -21,7 +21,7 @@
|
||||
--reader-paper: var(--media-paper); --reader-surface: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
.media-screen, .media-player, .media-channel-entry {
|
||||
.media-screen,.media-player {
|
||||
font: var(--text-ui)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
@@ -30,7 +30,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
/* The shared sheet's header and footer use the app's own buttons, not media's. */
|
||||
.media-screen button:not(:where(.sheet-header *, .sheet-footer *, .sheet-list *, .action-menu *, .action-menu-trigger)) { border:0; background:transparent; border-radius:var(--radius-sm); min-height:38px; padding:9px 12px; }
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen button:not(:where(.sheet-header *, .sheet-footer *, .sheet-list *, .action-menu *, .action-menu-trigger)):hover:not(:disabled) { background:var(--surface); }}
|
||||
.media-screen button:focus-visible, .media-channel-entry a:focus-visible { outline:2px solid var(--media-accent); outline-offset:3px; }
|
||||
.media-screen button:focus-visible { outline:2px solid var(--media-accent); outline-offset:3px; }
|
||||
.media-screen input:not([type=range]):not([type=checkbox]):not([type=radio]), .media-screen textarea {
|
||||
background:var(--media-paper); border:1px solid var(--border); border-radius:var(--radius-sm);
|
||||
}
|
||||
@@ -43,8 +43,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-screen .media-tabs button {font-size:var(--text-ui);color:var(--muted);padding:13px 0;min-height:49px;border-radius:0}
|
||||
.media-screen .media-tabs button[aria-current=page] {color:var(--media-accent);font-weight:600}
|
||||
.media-screen .media-heading-actions {gap:4px}
|
||||
.media-actions summary {display:grid;place-items:center;width:40px;height:44px;padding:10px}
|
||||
.media-actions nav {background:var(--media-paper)}
|
||||
.media-screen .media-browse-tools {margin:15px 0 12px;justify-content:flex-start;gap:8px;color:var(--muted)}
|
||||
.media-browse-tools>span {margin-right:auto;font-size:var(--text-meta);white-space:nowrap}
|
||||
.media-browse-actions {display:flex;align-items:center;gap:7px;min-width:0}
|
||||
@@ -82,15 +80,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-skeleton-copy>i {height:10px;width:85%}
|
||||
.media-skeleton-copy>i:last-child {width:55%;height:8px}
|
||||
.media-skeleton-list {display:grid;gap:0}
|
||||
.media-read-loading-list .media-skeleton-entry {display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
|
||||
.media-read-loading-list .media-skeleton-cover {width:44px;flex-shrink:0}
|
||||
.media-read-loading-list .media-skeleton-copy {width:65%;gap:12px;margin:0}
|
||||
.media-read-loading-tracks .media-skeleton-entry {display:flex;align-items:center;gap:12px;min-height:69px;padding:10px 0;border-bottom:1px solid var(--border)}
|
||||
.media-read-loading-tracks .media-skeleton-cover {width:25px;height:12px;aspect-ratio:auto;flex-shrink:0}
|
||||
.media-read-loading-tracks .media-skeleton-copy {width:70%;margin:0}
|
||||
.media-read-loading-episodes .media-skeleton-list {grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px}
|
||||
.media-read-loading-episodes .media-skeleton-cover {height:40px;aspect-ratio:auto}
|
||||
.media-read-loading-episodes .media-skeleton-copy {display:none}
|
||||
.media-read-loading-detail .media-skeleton-entry {display:flex;gap:26px;align-items:center;margin-top:24px}
|
||||
.media-detail-loading-hero{display:flex;gap:26px;align-items:flex-start;margin-top:24px}
|
||||
.media-detail-loading-cover{display:block;width:170px;aspect-ratio:2/3;flex:none;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--text) 7%,var(--media-paper));animation:media-skeleton-breathe 1.8s ease-in-out infinite alternate}
|
||||
@@ -120,13 +109,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-screen .media-continue {background:var(--surface);border:0;border-radius:var(--radius-sm);padding:11px 14px;margin-top:18px}
|
||||
|
||||
/* Desktop keeps channel links; mobile switches channels beside the catalog title. */
|
||||
.media-channel-entry {position:fixed;z-index:80;top:0;left:0;right:0;height:62px;display:flex;align-items:center;gap:5px;padding:0 max(24px,calc((100vw - 1060px)/2));background:var(--media-background);border-bottom:1px solid var(--border)}
|
||||
.media-channel-entry[hidden] {display:none}
|
||||
.media-brand {font:600 24px Georgia,serif;letter-spacing:-1px;color:var(--media-accent);margin-right:25px}
|
||||
.media-channel-entry a {color:inherit;text-decoration:none;padding:8px 14px;font-size:var(--text-ui);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;white-space:nowrap}
|
||||
.media-channel-entry .media-channel-icon {display:none}
|
||||
.media-channel-entry a[aria-current=page] {background:var(--media-selection);color:var(--media-accent);font-weight:500}
|
||||
@media (hover: hover) and (pointer: fine) { .media-channel-entry a:hover {background:var(--surface)}}
|
||||
|
||||
/* Audio player: the prototype's 420px column, square cover and 58px play control. */
|
||||
.media-playback-page {max-width:1120px}
|
||||
@@ -141,17 +123,13 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-now-playing small {display:block;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-now-playing strong {overflow-wrap:anywhere}
|
||||
.media-playing-artwork {display:grid;justify-items:center;min-width:0;text-align:center}
|
||||
.media-playing-eyebrow {font-size:var(--text-meta);letter-spacing:1px;color:var(--media-accent);margin-bottom:8px}
|
||||
.media-playing-artwork .media-cover, .media-artwork-placeholder {width:260px;max-width:100%;aspect-ratio:1;margin:0 auto 25px;border-radius:var(--radius-md);padding:28px;box-sizing:border-box;box-shadow:0 3px 9px #00000015}
|
||||
.media-playing-artwork .media-cover.has-image {padding:0}
|
||||
.media-playing-artwork .media-cover-title {font-size:32px;letter-spacing:4px;line-height:1.5;font-weight:400}
|
||||
.media-artwork-placeholder {background:var(--surface);display:grid;place-items:center;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-screen .media-playing-title {font-size:var(--text-display);font-weight:600;line-height:1.4;margin:0 0 8px;overflow-wrap:anywhere;max-width:100%}
|
||||
.media-playing-artwork p {font-size:var(--text-meta);line-height:1.75;color:var(--muted);margin:0 0 8px}
|
||||
.media-playing-artwork p,.media-playing-eyebrow,.media-lyrics-heading p {max-width:100%;overflow-wrap:anywhere}
|
||||
.media-artwork-tabs {display:flex;justify-content:center;gap:4px;margin:0 0 12px}
|
||||
.media-screen .media-artwork-tabs button {font-size:var(--text-meta);color:var(--muted);min-height:34px;padding:6px 12px}
|
||||
.media-screen .media-artwork-tabs button[aria-pressed=true] {color:var(--media-accent)}
|
||||
.media-playing-artwork p,.media-lyrics-heading p {max-width:100%;overflow-wrap:anywhere}
|
||||
.media-inline-timeline {margin-top:8px;min-width:0}
|
||||
.media-inline-timeline .media-audio-controls {display:block}
|
||||
.media-inline-timeline input[type=range] {min-height:20px;height:20px;padding:0;border:0;background:transparent;width:100%;accent-color:var(--media-accent)}
|
||||
@@ -176,13 +154,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
|
||||
@media(max-width:700px) {
|
||||
.media-screen {padding:0 14px calc(24px + env(safe-area-inset-bottom))}
|
||||
.media-channel-entry {display:none}
|
||||
.media-brand {display:none}
|
||||
.media-channel-entry a {flex-direction:column;gap:4px;padding:6px;min-height:48px;font-size:var(--text-meta);border-radius:var(--radius-xs)}
|
||||
.media-channel-entry .media-channel-icon {display:flex}
|
||||
.media-channel-entry svg {width:19px;height:19px;stroke-width:1.65}
|
||||
.media-channel-entry a[aria-current=page] {background:transparent;font-weight:600}
|
||||
.media-channel-entry a[aria-current=page] svg {stroke-width:2.2}
|
||||
.media-screen .media-tabs {gap:22px;min-height:49px}
|
||||
.media-screen .media-tabs button {padding:10px 0;min-height:49px}
|
||||
.media-screen .media-grid {gap:17px 12px}
|
||||
@@ -197,12 +168,10 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-screen .media-transport {gap:25px}
|
||||
}
|
||||
@media(min-width:701px) {
|
||||
body:has(.media-screen .media-mobile-title) .media-channel-entry a:first-of-type {margin-left:auto}
|
||||
body:has(.media-screen .media-mobile-title) .media-channel-entry a:last-child {margin-right:clamp(84px,20vw,250px)}
|
||||
.media-screen .media-mobile-title {display:flex;align-items:center;position:fixed;z-index:81;top:0;left:max(140px,calc((100vw - 1060px)/2 + 110px));height:62px;margin:0;font-size:var(--text-title)}
|
||||
.media-heading:has(.media-mobile-title) .media-heading-actions {position:fixed;z-index:81;top:9px;right:max(24px,calc((100vw - 1060px)/2));height:44px}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce) {.media-screen *, .media-channel-entry * {transition:none!important}}
|
||||
@media(prefers-reduced-motion:reduce) {.media-screen * {transition:none!important}}
|
||||
.media-inline-timeline .media-time-separator {display:none}
|
||||
.media-inline-timeline input[type=range] {appearance:none;cursor:pointer;height:20px;background:transparent}
|
||||
.media-inline-timeline input[type=range]::-webkit-slider-runnable-track {height:3px;border-radius:var(--radius-xs);background:linear-gradient(to right,var(--media-fill) var(--media-progress,0%),var(--border) var(--media-progress,0%))}
|
||||
@@ -213,7 +182,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-screen .media-transport:has(.media-skip) {gap:10px}
|
||||
.media-mobile-title {display:none}
|
||||
.media-screen .media-continue {grid-template-columns:39px minmax(0,1fr) auto;gap:12px;align-items:center}
|
||||
.media-continue .media-resume-cover {display:grid;place-items:center;width:39px;height:55px;padding:6px;background:linear-gradient(145deg,#79866a,#455c49);color:#f7f0da;border-radius:var(--radius-xs);font:12px/1.4 Georgia,SimSun,serif;overflow:hidden;overflow-wrap:anywhere}
|
||||
.media-continue>.media-cover {width:39px;min-width:39px;height:55px;padding:6px;opacity:1;font-size:var(--text-meta)}
|
||||
.media-continue>.media-cover.has-image {padding:0}
|
||||
.media-continue>.media-cover .media-cover-title {font-size:var(--text-meta)}
|
||||
@@ -285,26 +253,13 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
}
|
||||
|
||||
.media-mobile-title {gap:3px;font-size:var(--text-title);min-width:0}
|
||||
.media-channel-switcher {position:relative;font-weight:400;display:none}
|
||||
.media-channel-switcher>summary {display:grid;place-items:center;width:36px;height:44px;cursor:pointer;list-style:none;border-radius:var(--radius-sm);color:var(--muted)}
|
||||
.media-channel-switcher>summary::-webkit-details-marker {display:none}
|
||||
.media-channel-switcher[open]>summary {background:var(--media-selection);color:var(--media-accent)}
|
||||
.media-channel-switcher nav {position:absolute;left:-60px;top:46px;z-index:100;width:176px;padding:6px;background:var(--media-paper);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 8px 28px #0002}
|
||||
.media-channel-switcher a {display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);font-size:var(--text-ui)}
|
||||
.media-channel-switcher a span {flex:1}
|
||||
.media-channel-switcher a[aria-current=page] {background:var(--media-selection);color:var(--media-accent)}
|
||||
@media (hover: hover) and (pointer: fine) { .media-channel-switcher a:hover {background:var(--media-selection);color:var(--media-accent)}}
|
||||
.media-channel-switcher :focus-visible {outline:2px solid var(--media-accent);outline-offset:2px}
|
||||
.media-page-context {font-size:var(--text-meta);color:var(--muted);font-weight:400;margin-left:8px;white-space:nowrap}
|
||||
.media-heading-actions[hidden] {display:none!important}
|
||||
@media(max-width:700px){
|
||||
.media-channel-switcher {display:block}
|
||||
.media-player:not(.media-player-expanded),.media-player:is(.media-player-audio,.media-player-native-video):not(.media-player-expanded) {bottom:calc(10px + env(safe-area-inset-bottom))}
|
||||
body:has(.media-player:not([hidden]):not(.media-player-expanded)) .media-screen {padding-bottom:calc(96px + env(safe-area-inset-bottom))}
|
||||
.media-screen.media-playback-page:not(.media-video-page) {padding-bottom:calc(24px + env(safe-area-inset-bottom))}
|
||||
}
|
||||
@media(min-width:701px){
|
||||
body:has(.media-secondary-page) .media-channel-entry a {display:none}
|
||||
.media-screen.media-secondary-page>.media-heading {position:fixed;z-index:90;top:0;left:max(140px,calc((100vw - 1060px)/2 + 110px));right:max(24px,calc((100vw - 1060px)/2));height:62px;min-height:62px;margin:0;border:0;background:var(--media-background);box-shadow:inset 0 -1px var(--border)}
|
||||
}
|
||||
|
||||
@@ -315,37 +270,21 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-library-empty p {font-size:var(--text-label);line-height:1.85;color:var(--muted);margin:0;max-width:300px}
|
||||
.media-screen .media-library-empty>button {display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 18px;margin:24px 0 12px}
|
||||
.media-library-empty>small {font-size:var(--text-meta);color:var(--muted);line-height:1.8}
|
||||
.media-library-onboarding {max-width:560px;margin:18px auto}
|
||||
.media-library-onboarding>.media-library-create>.media-form>button {background:var(--media-fill);color:var(--media-on-accent);min-height:44px}
|
||||
|
||||
/* Settings follows the prototype's grouped, flat navigation rows. */
|
||||
.media-screen:has(>.media-settings)>.media-heading {display:none}
|
||||
.media-settings {max-width:none;margin:0 auto}
|
||||
.media-settings-heading {display:flex;align-items:center;gap:4px;min-height:49px;margin:0 0 6px}
|
||||
.media-settings-heading h1 {margin:0}
|
||||
.media-settings .media-settings-group {border:0;padding:0;margin:16px 0 25px}
|
||||
.media-screen .media-settings-group h2 {font-size:var(--text-meta);font-weight:500;color:var(--muted);margin:0 0 3px}
|
||||
.media-screen .media-setting-row {display:flex;align-items:center;width:100%;gap:12px;min-height:54px;padding:14px 0;border-radius:0;border-bottom:1px solid var(--border);text-align:left}
|
||||
.media-setting-row>svg {flex-shrink:0}
|
||||
.media-setting-row>span {flex:1;min-width:0}
|
||||
.media-setting-row>small {font-size:var(--text-meta);color:var(--muted);text-align:right}
|
||||
.media-setting-row>svg:last-child {color:var(--muted)}
|
||||
.media-settings .media-settings-panel {border:0;padding:0;margin:18px 0;max-width:none}
|
||||
.media-settings-panel>p {color:var(--muted);line-height:1.8}
|
||||
.media-settings .media-setting-field,.media-settings .media-settings-check {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);font-size:var(--text-ui)}
|
||||
.media-settings .media-setting-field select {width:auto;max-width:60%;margin:0}
|
||||
.media-settings .media-settings-check input {margin:0;width:18px;height:18px;min-height:18px;flex-shrink:0}
|
||||
.media-settings-footer {display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:20px}
|
||||
.media-settings-idle {display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:64px auto;max-width:300px;color:var(--muted)}
|
||||
.media-settings-idle h2,.media-settings-idle p {margin:0}
|
||||
.media-settings-idle h2 {color:var(--text)}
|
||||
@media(max-width:700px){.media-settings-heading h1 {font-size:var(--text-title)}.media-setting-row {font-size:var(--text-label)}.media-setting-row>small {font-size:var(--text-meta);max-width:46%}}
|
||||
@media(max-width:700px){.media-settings-heading h1 {font-size:var(--text-title)}}
|
||||
|
||||
.media-manager-tabs {display:flex;gap:24px;border-bottom:1px solid var(--border);margin-bottom:16px}
|
||||
.media-screen .media-manager-tabs button {border-radius:0;padding:10px 0;color:var(--muted)}
|
||||
.media-screen .media-manager-tabs button[aria-current=page] {color:var(--media-accent);box-shadow:inset 0 -2px var(--media-accent)}
|
||||
.media-manager-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;color:var(--muted);font-size:var(--text-meta)}
|
||||
.media-manager-toolbar button,.media-task-library>button {display:flex;align-items:center;gap:6px}
|
||||
.media-task-library>button {display:flex;align-items:center;gap:6px}
|
||||
.media-manager .media-library-row {display:flex;align-items:center;gap:12px;padding:14px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
|
||||
.media-library-row>svg {flex-shrink:0}
|
||||
.media-library-row>span {flex:1;min-width:0;overflow-wrap:anywhere}
|
||||
@@ -364,9 +303,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-manager .media-library-actions button {text-align:left;background:transparent;border-radius:var(--radius-xs);padding:10px 12px}
|
||||
@media (hover: hover) and (pointer: fine) { .media-manager .media-library-actions button:hover {background:var(--surface)}}
|
||||
.media-manager-note {padding:12px 14px;background:var(--surface);border-radius:var(--radius-sm);color:var(--muted);font-size:var(--text-meta);line-height:1.8;margin:20px 0}
|
||||
.media-connection-row {display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
|
||||
.media-connection-row>span {flex:1;font-size:var(--text-label)}
|
||||
.media-connection-row small {display:block;color:var(--muted);font-size:var(--text-meta);margin-top:3px}
|
||||
.media-task-library {display:flex;gap:8px;align-items:end;flex-wrap:wrap}
|
||||
.media-task-library>label {display:grid;gap:6px;color:var(--muted);font-size:var(--text-meta);flex:1;min-width:140px}
|
||||
.media-task-library select {width:100%;max-width:100%}
|
||||
@@ -388,7 +324,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
@media(prefers-reduced-motion:reduce){.media-task-progress:indeterminate{animation:none}}
|
||||
.media-task-note {grid-column:1/-1;color:var(--muted);font-size:var(--text-meta);line-height:1.7;margin:2px 0 0;overflow-wrap:anywhere}
|
||||
.media-screen .media-task-icon {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border:0;padding:8px;background:transparent}
|
||||
.media-manager-scraping {margin-top:20px}
|
||||
.media-manager .media-task-section-title {font-size:var(--text-ui);margin:18px 0 10px;color:var(--muted);font-weight:500}
|
||||
.media-task-history>details.media-scrape-job {border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;padding:0}
|
||||
.media-scrape-job>summary {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:14px 0;list-style:none}
|
||||
@@ -420,16 +355,11 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-manager .media-library-editor {max-width:720px;border:0;background:transparent;padding:0;margin:20px 0}
|
||||
.media-page-heading {display:flex;align-items:center;gap:4px;min-width:0}
|
||||
.media-screen .media-page-heading h1 {font-size:var(--text-title);margin:0;line-height:1.4}
|
||||
.media-screen:has(>.media-manager)>.media-heading,.media-screen:has(>.media-library-onboarding)>.media-heading {border:0}
|
||||
.media-library-onboarding .media-library-create>h2 {display:none}
|
||||
.media-manager-tabs {margin-top:8px}
|
||||
.media-screen:has(>.media-manager)>.media-heading {border:0}
|
||||
|
||||
.media-search-scopes {display:flex;align-items:center;gap:8px;margin:14px 0}
|
||||
.media-screen .media-search-scopes button {min-height:36px;padding:7px 13px;color:var(--muted);font-size:var(--text-label);white-space:nowrap}
|
||||
.media-screen .media-search-scopes button[aria-pressed=true] {background:var(--media-selection);color:var(--media-accent)}
|
||||
.media-search-filters label {display:flex;align-items:center;gap:10px;flex:initial}
|
||||
.media-search-filters select {width:auto;max-width:170px}
|
||||
.media-search-filters>span {margin-left:auto;color:var(--muted)}
|
||||
.media-screen .media-search-group h2 {font-size:var(--text-body);margin:22px 0 6px;font-weight:500}
|
||||
.media-screen .media-search-result {display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0}
|
||||
.media-search-group h2>small {font-size:var(--text-meta);font-weight:400;color:var(--muted)}
|
||||
@@ -445,7 +375,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-search-empty p {font-size:var(--text-label);line-height:1.8;margin:0}
|
||||
@media(max-width:700px){.media-screen .media-search-scopes button {font-size:var(--text-meta);padding:7px 12px}.media-search-result {gap:9px}.media-search-copy strong {font-size:var(--text-meta)}}
|
||||
|
||||
.media-personal-summary {font-size:var(--text-meta);color:var(--muted);margin:18px 0}
|
||||
.media-personal-empty {display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted);margin:64px auto;padding:0 20px;max-width:340px;text-align:center}
|
||||
.media-personal-empty p {font-size:var(--text-label);line-height:1.8;margin:0}
|
||||
.media-screen .media-history-date {font-size:var(--text-ui);font-weight:500;margin:24px 0 8px}
|
||||
@@ -494,7 +423,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-detail-page .media-hero {align-items:flex-start;margin:22px 0 18px;gap:26px}
|
||||
.media-detail-page .media-detail-heading {padding-top:8px;gap:9px}
|
||||
.media-detail-page .media-detail-kind {color:var(--media-accent);opacity:1;font-size:var(--text-meta)}
|
||||
.media-detail-page .media-detail-credit,.media-detail-page .media-detail-year {color:var(--muted);font-size:var(--text-meta)}
|
||||
.media-detail-page .media-detail-credit {color:var(--muted);font-size:var(--text-meta)}
|
||||
.media-detail-facts {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:3px}
|
||||
.media-detail-facts>span {padding:3px 7px;background:var(--surface);border-radius:var(--radius-xs);color:var(--muted);font-size:var(--text-meta);max-width:100%;overflow-wrap:anywhere}
|
||||
.media-missing-edition {display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--muted);padding:32px 12px;margin:14px 0;overflow-wrap:anywhere}
|
||||
@@ -511,7 +440,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-edition-picker select {max-width:240px;min-width:0}
|
||||
.media-detail-description {margin:24px 0}
|
||||
.media-detail-description p {font-size:var(--text-ui);line-height:1.9;white-space:pre-line;overflow-wrap:anywhere;color:var(--muted);max-width:800px}
|
||||
.media-detail-page .media-detail-description h2,.media-detail-management>h2 {font-size:var(--text-body);margin-bottom:10px}
|
||||
.media-detail-page .media-detail-description h2 {font-size:var(--text-body);margin-bottom:10px}
|
||||
.media-edition-content {min-width:0}
|
||||
.media-edition-content>h2 {overflow-wrap:anywhere;margin:14px 0 8px;font-size:var(--text-body)}
|
||||
.media-edition-content>.media-toolbar {font-size:var(--text-meta);color:var(--muted);margin:8px 0}
|
||||
@@ -539,10 +468,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-person-toolbar button {display:grid;place-items:center;width:40px;padding:8px}
|
||||
.media-person-toolbar>span {margin-right:auto}
|
||||
.media-person-toolbar select {font-size:var(--text-meta);max-width:180px}
|
||||
.media-person-search {display:flex;gap:8px;align-items:end;margin:16px 0}
|
||||
.media-person-search label {flex:1;min-width:0;display:grid;gap:6px;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-person-search input {width:100%}
|
||||
.media-person-search button {flex-shrink:0;font-size:var(--text-meta)}
|
||||
.media-screen:has(.media-narrators:not([data-view=directory]))>.media-heading,
|
||||
.media-screen:has(.media-narrators:not([data-view=directory]))>.media-browse-tools {display:none}
|
||||
.media-narrator-heading {min-height:49px;border-bottom:1px solid var(--border)}
|
||||
@@ -561,24 +486,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
@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,
|
||||
body:has(.media-screen>.media-read-loading-detail) .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,
|
||||
body:has(.media-screen>.media-detail-page) .media-channel-entry a,
|
||||
body:has(.media-screen>.media-read-loading-detail) .media-channel-entry a,
|
||||
body:has(.media-narrators:not([data-view=directory])) .media-channel-entry a {display:none}
|
||||
.media-screen.media-playback-page>.media-heading,
|
||||
.media-screen.media-chapters-page>.media-heading,
|
||||
.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,
|
||||
.media-screen:has(>.media-detail-page)>.media-heading,
|
||||
.media-screen:has(>.media-read-loading-detail)>.media-heading,
|
||||
.media-narrators:not([data-view=directory])>.media-narrator-heading {position:fixed;z-index:90;top:0;left:max(140px,calc((100vw - 1060px)/2 + 110px));right:max(24px,calc((100vw - 1060px)/2));height:62px;min-height:62px;margin:0;border:0;background:var(--media-background);box-shadow:inset 0 -1px var(--border)}
|
||||
.media-screen.media-playback-page>.media-heading,.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,.media-screen:has(>.media-detail-page)>.media-heading,.media-screen:has(>.media-read-loading-detail)>.media-heading,.media-narrators:not([data-view=directory])>.media-narrator-heading {position:fixed;z-index:90;top:0;left:max(140px,calc((100vw - 1060px)/2 + 110px));right:max(24px,calc((100vw - 1060px)/2));height:62px;min-height:62px;margin:0;border:0;background:var(--media-background);box-shadow:inset 0 -1px var(--border)}
|
||||
}
|
||||
@media(max-width:700px){.media-person-placeholder .media-cover-title {font-size:var(--text-display)}.media-narrators .media-person-hero {gap:16px;margin-top:17px}.media-person-hero .media-cover {width:105px;min-width:105px}.media-person-hero .media-detail-heading {padding:0}.media-person-hero .media-detail-heading h1 {font-size:var(--text-display)}.media-person-copy {padding:0}}
|
||||
.media-edition-tools {min-width:0}
|
||||
@@ -586,8 +494,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-edition-tools>.media-edition-resources {border-bottom:1px solid var(--border);padding:14px 0}
|
||||
.media-edition-tools>details>summary {cursor:pointer;font-size:var(--text-label);font-weight:500}
|
||||
.media-detail-page .media-edition {border:0;margin-top:14px;padding-top:0}
|
||||
.media-detail-management {border-top:1px solid var(--border);margin-top:28px;padding-top:10px}
|
||||
.media-detail-management>details>summary {font-size:var(--text-label);padding:12px 0;cursor:pointer}
|
||||
.media-detail-children {margin-top:24px}
|
||||
.media-series-seasons {margin:24px 0}
|
||||
.media-series-seasons>.media-toolbar {justify-content:space-between}
|
||||
@@ -601,7 +507,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-episode-selection {display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-episode-selection>span {flex:1;min-width:0;overflow-wrap:anywhere}
|
||||
.media-episode-selection select {max-width:100%;font-size:var(--text-meta)}
|
||||
.media-screen .media-episode-selection button,.media-screen .media-season-detail-link {font-size:var(--text-meta);color:var(--media-accent)}
|
||||
.media-screen .media-episode-selection button {font-size:var(--text-meta);color:var(--media-accent)}
|
||||
.media-series-playback {font-size:var(--text-label);margin:22px 0}
|
||||
.media-series-playback>summary {cursor:pointer;padding:12px 0;border-bottom:1px solid var(--border)}
|
||||
@media(max-width:700px){.media-episode-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.media-series-seasons .media-season-playback>.media-toolbar>span {flex-basis:100%}}
|
||||
@@ -635,10 +541,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-metadata-footer button {font-size:var(--text-label)}
|
||||
.media-screen .media-metadata-footer button:not(.media-primary) {background:var(--surface);border:1px solid var(--border)}
|
||||
.media-metadata-mode {font-size:var(--text-meta)!important;color:var(--media-accent)!important}
|
||||
.media-metadata-notice,.media-unsaved-notice {padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 0 18px}
|
||||
.media-unsaved-notice p {font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-metadata-entries {display:flex;flex-wrap:wrap;gap:2px 12px;margin:8px 0}
|
||||
.media-screen .media-metadata-entries button {font-size:var(--text-meta);color:var(--media-accent);padding:6px 0}
|
||||
.media-metadata-notice {padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 0 18px}
|
||||
.media-match-intro>p {font-size:var(--text-meta);color:var(--media-accent);margin:0 0 6px}
|
||||
.media-match-intro h1 {font-size:var(--text-display);line-height:1.5;margin:0 0 12px;overflow-wrap:anywhere}
|
||||
.media-metadata-matcher[data-layout=page]>p {font-size:var(--text-meta);color:var(--muted)}
|
||||
@@ -669,9 +572,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-match-unavailable p {font-size:var(--text-meta);margin:0}
|
||||
.media-screen .media-match-unavailable button {padding:6px 0;font-size:var(--text-meta);color:var(--media-accent)}
|
||||
.media-screen .media-match-candidate>button {font-size:var(--text-meta);white-space:nowrap;background:var(--surface);border:1px solid var(--border)}
|
||||
.media-match-confirm {margin:20px 0;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow-wrap:anywhere}
|
||||
.media-match-confirm h3 {font-size:var(--text-body);font-weight:500;margin:0}
|
||||
.media-match-confirm p {font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-metadata-matcher[data-layout=page]>small {display:block;font-size:var(--text-meta);color:var(--muted);line-height:1.8;margin-top:24px}
|
||||
@media(max-width:700px){.media-metadata-page {margin-top:18px}.media-metadata-fields {grid-template-columns:1fr;gap:14px}.media-metadata-page .media-match-search {grid-template-columns:1fr}.media-match-placeholder {width:40px;min-width:40px;height:58px}}
|
||||
.media-chapter-heading {display:flex;align-items:center;justify-content:space-between;gap:12px}
|
||||
@@ -695,8 +595,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-detail-sidebar h2 {color:var(--text);font-size:var(--text-title);margin:24px 0 12px}
|
||||
.media-detail-sidebar p {line-height:1.85;overflow-wrap:anywhere;margin:8px 0}
|
||||
.media-detail-sidebar small {font-size:var(--text-meta);line-height:1.8}
|
||||
.media-detail-sidebar .media-detail-management {margin:12px 0 0;padding:0;border:0}
|
||||
.media-detail-sidebar .media-detail-management>details {border-bottom:1px solid var(--border)}
|
||||
.media-detail-sidebar .media-form {max-width:none}
|
||||
.media-detail-sidebar input,.media-detail-sidebar select {min-width:0;max-width:100%}
|
||||
.media-detail-sidebar .media-toolbar {flex-wrap:wrap}
|
||||
@@ -755,8 +653,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-video-workspace .media-video-icon,.media-video-sheet .media-video-icon {display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:10px}
|
||||
.media-video-toolbar select,.media-video-sheet select {background:var(--surface);border:1px solid var(--border);min-width:0;max-width:100%;padding:6px;font-size:var(--text-label)}
|
||||
.media-video-toolbar.media-video-tools {margin-top:8px;font-size:var(--text-label)}
|
||||
.media-video-timeline {margin:0}
|
||||
.media-video-timeline .media-mini-time {color:#b9c5b1}
|
||||
.media-video-caption {display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);margin:0;padding:12px 0;font-size:var(--text-label)}
|
||||
.media-video-caption>div {min-width:0;flex:1}
|
||||
.media-video-caption strong {font-weight:500;overflow-wrap:anywhere}
|
||||
@@ -773,7 +669,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-video-controls .media-screen-error-actions {display:flex;gap:8px}
|
||||
.media-video-sheet .sheet-body {font-size:var(--text-ui);line-height:1.6}
|
||||
.media-video-sheet p {font-size:var(--text-meta);line-height:1.75;color:var(--muted);overflow-wrap:anywhere}
|
||||
.media-video-sheet .media-volume,.media-video-sleep {display:flex;align-items:center;justify-content:space-between;gap:16px}
|
||||
.media-video-sheet .media-volume {display:flex;align-items:center;justify-content:space-between;gap:16px}
|
||||
.media-video-sheet .media-volume input {flex:1;width:100%;min-width:0;accent-color:var(--media-accent);padding:0}
|
||||
.media-video-sheet .media-subtitle-controls {flex-wrap:wrap}
|
||||
.media-video-sheet .media-subtitle-controls select {flex:1;max-width:100%;width:100%;font-size:var(--text-label)}
|
||||
@@ -805,14 +701,12 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-video-toolbar>div>select {border:0;background:transparent}
|
||||
.media-video-tools>div {flex:1;justify-content:space-between}
|
||||
.media-video-sheet .media-video-end {display:flex;align-items:center;gap:10px;padding-left:0}
|
||||
@media(max-width:700px){body:has(.media-screen.media-video-page) .media-channel-entry {display:none}.media-screen.media-video-page {padding-top:0}.media-screen.media-video-page>.media-heading {margin:0 -4px}}
|
||||
@media(max-width:700px){.media-screen.media-video-page {padding-top:0}.media-screen.media-video-page>.media-heading {margin:0 -4px}}
|
||||
.media-screen.media-video-page>.media-heading {background:var(--media-background);color:var(--text);border-color:var(--border)}
|
||||
|
||||
/* Settings and library forms share the prototype's single page heading. */
|
||||
.media-utility-host[hidden] {display:none}
|
||||
.media-utility-workspace .media-settings-heading {margin:0;min-height:49px}
|
||||
.media-utility-workspace .media-settings-heading h1 {font-size:var(--text-title);line-height:1.4}
|
||||
.media-utility-workspace .media-library-onboarding {max-width:none;margin:0}
|
||||
.media-utility-workspace .media-library-create>.media-form,.media-utility-workspace .media-library-editor,.media-utility-workspace .media-permissions-form {max-width:none;margin:24px 0 0;gap:16px}
|
||||
.media-library-fields {display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
|
||||
.media-library-fields>div,.media-library-field {display:grid;gap:7px;min-width:0}
|
||||
@@ -840,7 +734,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-permission-pagination {font-size:var(--text-meta);color:var(--muted);margin:0}
|
||||
.media-user-option>span {min-width:0;overflow-wrap:anywhere;line-height:1.6}
|
||||
.media-user-option>input {flex-shrink:0}
|
||||
.media-status-badge {display:inline-block;font-size:var(--text-micro);background:var(--media-selection);color:var(--media-accent);padding:3px 6px;border-radius:var(--radius-xs);white-space:nowrap}
|
||||
.media-account-panel {max-width:640px;margin:32px auto}
|
||||
.media-account-avatar {display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--media-selection);color:var(--media-accent);font-size:26px}
|
||||
.media-account-panel h2 {font-size:var(--text-display);margin:16px 0 4px;overflow-wrap:anywhere}
|
||||
@@ -854,9 +747,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-settings-playing small {font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-settings-playing svg {flex-shrink:0;color:var(--media-accent)}
|
||||
.media-screen .media-settings-playing button {font-size:var(--text-meta);white-space:nowrap}
|
||||
.media-setting-row>span {overflow-wrap:anywhere}
|
||||
@media(min-width:701px){
|
||||
body:has(.media-utility-workspace) .media-channel-entry a,body:has(.media-manager-workspace) .media-channel-entry a {display:none}
|
||||
.media-utility-workspace .media-settings-heading,.media-manager-workspace>.media-heading {position:fixed;z-index:90;top:0;left:max(140px,calc((100vw - 1060px)/2 + 110px));right:max(24px,calc((100vw - 1060px)/2));height:62px;min-height:62px;margin:0;border:0;background:var(--media-background);box-shadow:inset 0 -1px var(--border)}
|
||||
}
|
||||
@media(max-width:700px){
|
||||
@@ -868,7 +759,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
}
|
||||
|
||||
.media-permission-fields input[type=checkbox] {accent-color:var(--media-accent)}
|
||||
.media-status-badge[data-configured=false] {background:var(--surface);color:var(--muted)}
|
||||
|
||||
/* Detail information follows the saved prototype's hero, actions, content and resources. */
|
||||
.media-detail-hero-copy {flex:1;min-width:0}
|
||||
@@ -881,15 +771,10 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-person-detail .media-detail-children>h2 {font-size:var(--text-title);font-weight:600;margin:24px 0 12px}
|
||||
.media-person-detail .media-detail-sidebar[hidden] {display:none}
|
||||
|
||||
.media-version-notice {background:var(--surface);border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0;font-size:var(--text-meta);color:var(--muted);line-height:1.7}
|
||||
|
||||
/* Keep the tab baseline identical in every state. */
|
||||
.media-screen .media-tabs button {border-bottom:3px solid transparent;line-height:20px;display:flex;align-items:center;justify-content:center}
|
||||
.media-screen .media-tabs button[aria-current=page] {border-bottom-color:var(--media-accent)}
|
||||
.media-channel-switcher>summary {display:flex;width:auto;gap:10px;padding:0 4px;color:var(--text)}
|
||||
.media-channel-switcher>summary strong {font-size:var(--text-title);font-weight:600}
|
||||
.media-channel-switcher>summary svg {color:var(--muted)}
|
||||
.media-channel-switcher nav {left:0}
|
||||
.media-mini .media-mini-toggle,.media-mini .media-mini-close {display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:8px;border-radius:50%}
|
||||
.media-mini .media-mini-toggle {background:var(--media-fill);color:var(--media-on-accent)}
|
||||
.media-mini .media-mini-close {color:var(--muted)}
|
||||
@@ -898,7 +783,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
.media-resource-panel>header {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px}
|
||||
.media-screen .media-resource-panel>header h2 {margin:0;font-size:var(--text-title)}
|
||||
.media-resource-panel>p {font-size:var(--text-meta);line-height:1.8;color:var(--muted);margin:8px 0 20px}
|
||||
.media-resource-panel .media-actions nav button {display:flex;align-items:center;gap:8px}
|
||||
.media-resource-dialog {overflow-wrap:anywhere;font-size:var(--text-label);line-height:1.8}
|
||||
.media-resource-expanded {padding:16px 0;border-bottom:1px solid var(--border)}
|
||||
.media-resource-expanded:last-child {border-bottom:0}
|
||||
@@ -916,8 +800,6 @@ body:has(>#app>.media-screen) { background: var(--color-bg); }
|
||||
@media(max-width:700px){
|
||||
.media-task-tabs{display:flex;width:100%;box-sizing:border-box;overflow-x:auto;margin-bottom:20px}
|
||||
.media-task-tabs button{flex:1 0 auto;padding-inline:12px}
|
||||
.media-manager-toolbar{align-items:flex-start;flex-wrap:wrap}
|
||||
.media-manager-toolbar>span{flex:1 1 12rem}
|
||||
.media-task-library{align-items:stretch}
|
||||
.media-task-library>label{flex-basis:100%}
|
||||
.media-task-library>button{flex:1;justify-content:center}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
/* Approved v2 visual contract. Media-only selectors keep reading isolated.
|
||||
DPlayer owns the video controls; this sheet only lays out its stage. */
|
||||
.media-screen {padding:68px 32px 96px;font-size:var(--text-ui);scrollbar-width:thin}
|
||||
.media-channel-entry {height:68px;padding-inline:max(32px,calc((100vw - 1056px)/2))}
|
||||
.media-screen button:not(:where(.sheet-header *, .sheet-footer *, .sheet-list *, .action-menu *, .action-menu-trigger)) {min-height:44px;border-radius:var(--radius-sm)}
|
||||
.media-screen :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select) {min-height:44px}
|
||||
.media-screen :is(.media-heading,.media-settings-heading,.media-narrator-heading) {min-height:56px}
|
||||
.media-screen :is(.media-page-heading h1,.media-page-heading h2,.media-heading>strong,.media-settings-heading h1) {font-size:var(--text-title);font-weight:650;line-height:1.4}
|
||||
.media-screen :is(.media-icon-button,.media-back-button,.media-track-detail,.media-album-track-detail),.media-actions summary {width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;display:inline-flex;align-items:center;justify-content:center}
|
||||
.media-screen :is(.media-icon-button,.media-back-button,.media-track-detail,.media-album-track-detail) {width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;display:inline-flex;align-items:center;justify-content:center}
|
||||
.media-screen .media-tabs {min-height:44px;height:44px;gap:24px;align-items:stretch}
|
||||
.media-screen .media-tabs button {min-height:44px;height:44px;padding:0;display:flex;align-items:center;border-radius:0;line-height:1.4;border-bottom-width:2px}
|
||||
.media-screen .media-tabs button[aria-current=page] {color:var(--text);font-weight:650}
|
||||
@@ -85,17 +84,6 @@
|
||||
.media-search-copy strong {font-size:var(--text-label);font-weight:550}
|
||||
.media-search-copy small {font-size:var(--text-meta)}
|
||||
.media-screen .media-settings {max-width:760px;margin-inline:auto}
|
||||
.media-settings-intro {display:flex;align-items:center;gap:12px;background:var(--media-paper);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-top:18px}
|
||||
.media-settings-intro .media-account-avatar {width:42px;height:42px;font-size:var(--text-title);margin:0}
|
||||
.media-settings-intro strong {display:block;font-size:var(--text-ui)}
|
||||
.media-settings-intro small {display:block;color:var(--muted);font-size:var(--text-meta);margin-top:3px}
|
||||
.media-settings .media-settings-group {margin:23px 0 0;padding:0}
|
||||
.media-screen .media-settings-group>h2 {font-size:var(--text-meta);color:var(--muted);font-weight:500;margin:0 0 8px 2px}
|
||||
.media-screen .media-setting-row {background:var(--media-paper);border:1px solid var(--border);border-top:0;border-radius:0;min-height:56px;padding:10px 12px;gap:12px;font-size:var(--text-label)}
|
||||
.media-screen .media-setting-row:nth-child(2) {border-top:1px solid var(--border);border-radius:var(--radius-md) var(--radius-md) 0 0}
|
||||
.media-screen .media-setting-row:last-child {border-radius:0 0 var(--radius-md) var(--radius-md)}
|
||||
.media-screen .media-setting-row:nth-child(2):last-child {border-radius:var(--radius-md)}
|
||||
.media-setting-row small {font-size:var(--text-meta)}
|
||||
.media-screen .media-settings-panel,.media-screen .media-form {max-width:760px;margin-inline:auto}
|
||||
.media-screen .media-setting-field,.media-screen .media-settings-check {min-height:56px;padding:12px 0;border-bottom:1px solid var(--border)}
|
||||
/* Boolean preferences wear the same switch as the reader's sheets (.sheet .switch): one control for "on/off" app-wide. */
|
||||
@@ -126,12 +114,10 @@
|
||||
.media-resource-facts dd {margin:0;overflow-wrap:anywhere}
|
||||
.media-resource-info details>summary {min-height:44px;cursor:pointer;font-size:var(--text-meta)}
|
||||
.media-resource-info li {margin-bottom:12px;line-height:1.8;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-screen :is(.media-empty-library,.media-personal-empty,.media-search-empty,.media-screen-error.is-page) {padding:32px 16px;max-width:460px;margin:48px auto;text-align:center}
|
||||
.media-screen :is(.media-empty-library h1,.media-empty-library h2,.media-search-empty h2,.media-screen-error.is-page>strong) {font-size:var(--text-display);line-height:1.5}
|
||||
.media-screen .media-empty-library p {font-size:var(--text-label);line-height:1.9;color:var(--muted)}
|
||||
.media-screen :is(.media-personal-empty,.media-search-empty,.media-screen-error.is-page) {padding:32px 16px;max-width:460px;margin:48px auto;text-align:center}
|
||||
.media-screen :is(.media-search-empty h2,.media-screen-error.is-page>strong) {font-size:var(--text-display);line-height:1.5}
|
||||
.media-screen .media-playback-status[data-panel=main],.media-screen .media-playback-status[data-panel=lyrics] {max-width:940px;padding:32px 12px 20px;margin:0 auto;border:0;background:transparent;min-height:calc(100dvh - 156px)}
|
||||
.media-playing-artwork .media-cover,.media-artwork-placeholder {width:264px;max-width:100%;margin-bottom:24px}
|
||||
.media-playing-eyebrow {display:none}
|
||||
.media-playing-artwork {text-align:left;justify-items:start}
|
||||
.media-playing-artwork .media-playing-title {font-size:var(--text-display);font-weight:650;margin:0 0 6px}
|
||||
.media-playing-artwork p {font-size:var(--text-meta)}
|
||||
@@ -265,16 +251,8 @@
|
||||
@media(min-width:701px){
|
||||
.media-screen>.media-heading:has(.media-tabs:not([hidden])) {display:block;height:auto;min-height:0;margin:0;border:0;padding:0}
|
||||
.media-screen .media-mobile-title {display:none}
|
||||
.media-channel-entry {gap:24px}
|
||||
.media-channel-entry a {height:68px;min-height:68px;border-radius:0;padding:0;border-bottom:2px solid transparent}
|
||||
body:has(.media-screen .media-mobile-title) .media-channel-entry a:first-of-type {margin-left:0}
|
||||
body:has(.media-screen .media-mobile-title) .media-channel-entry a:last-child {margin-right:0}
|
||||
.media-channel-entry a[aria-current=page] {background:transparent;border-bottom-color:var(--media-accent);color:var(--text);font-weight:650}
|
||||
.media-screen:is(.media-secondary-page,.media-utility-workspace,.media-playback-page) .media-heading,.media-utility-workspace .media-settings-heading {height:68px;min-height:68px}
|
||||
.media-screen:is(.media-secondary-page,.media-playback-page,.media-chapters-page,.media-manager-workspace)>.media-heading,
|
||||
.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,
|
||||
.media-screen:has(>.media-detail-page)>.media-heading,
|
||||
.media-utility-workspace .media-settings-heading {left:max(24px,calc((100vw - 1060px)/2))}
|
||||
.media-screen:is(.media-secondary-page,.media-playback-page,.media-manager-workspace)>.media-heading,.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,.media-screen:has(>.media-detail-page)>.media-heading,.media-utility-workspace .media-settings-heading {left:max(24px,calc((100vw - 1060px)/2))}
|
||||
.media-screen .media-mobile-title {height:68px;left:max(145px,calc((100vw - 1056px)/2 + 110px))}
|
||||
.media-heading:has(.media-mobile-title) .media-heading-actions {top:12px}
|
||||
.media-screen .media-playback-status[data-panel=main] {display:grid;grid-template-columns:360px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:64px;min-height:540px;align-content:center}
|
||||
@@ -383,49 +361,11 @@
|
||||
font-size: var(--text-meta);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-sort-control {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-browse-actions .media-icon-button,
|
||||
.media-screen.media-catalog-page .media-browse-actions .media-icon-button svg {
|
||||
color: var(--muted) !important;
|
||||
stroke: currentColor;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-actions nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen.media-catalog-page .media-actions nav a:hover { background: var(--surface); }}
|
||||
.media-screen.media-catalog-page .media-catalog-actions nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--text-label);
|
||||
}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.media-screen.media-catalog-page .media-catalog-actions nav a:hover {
|
||||
background: var(--media-selection);
|
||||
color: var(--media-accent);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width:700px){
|
||||
.media-screen.media-catalog-page > .media-heading {
|
||||
@@ -463,18 +403,6 @@
|
||||
top: auto;
|
||||
right: auto;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-mobile-title .media-channel-switcher {
|
||||
display: block;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-mobile-title .media-channel-switcher > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
width: auto;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
.media-screen.media-catalog-page .media-heading-actions {
|
||||
margin: 0;
|
||||
gap: 0;
|
||||
@@ -492,9 +420,6 @@
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-action-label {
|
||||
display: none;
|
||||
}
|
||||
.media-screen.media-catalog-page .media-tabs {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@@ -518,12 +443,6 @@
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.media-screen .media-context-label {
|
||||
margin: 0 0 8px;
|
||||
color: var(--muted);
|
||||
font-size: var(--text-meta);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.media-screen .media-page-heading .media-heading-context {
|
||||
margin-left: 4px;
|
||||
color: var(--muted);
|
||||
@@ -570,7 +489,6 @@
|
||||
.media-screen .media-heading:has(.media-mobile-title) {grid-template-rows:56px 44px;min-height:100px}
|
||||
.media-screen .media-mobile-title {height:56px;font-size:var(--text-title)}
|
||||
.media-screen .media-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
|
||||
.media-screen.media-density-comfortable .media-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
|
||||
.media-detail-page .media-hero {gap:20px}
|
||||
.media-detail-page .media-hero>.media-cover {width:106px;min-width:106px}
|
||||
.media-detail-page .media-detail-heading h1 {font-size:var(--text-display)}
|
||||
@@ -600,10 +518,7 @@
|
||||
.media-openlist-credentials legend {padding:0;margin-bottom:12px;font-size:var(--text-ui);font-weight:600}
|
||||
.media-form label.media-credential-clear {display:flex;align-items:center;gap:8px;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-screen .media-heading svg,.media-screen .media-settings-heading svg {stroke-width:1.7}
|
||||
.media-screen .media-heading :is(.media-icon-button,.media-back-button,.media-actions summary) {border-radius:50%;background:transparent}
|
||||
.media-screen .media-channel-switcher>summary {gap:7px;padding:0}
|
||||
.media-screen .media-channel-switcher>summary strong {font-size:var(--text-title);font-weight:700;color:var(--text)}
|
||||
.media-screen .media-channel-switcher>summary>svg {width:15px;height:20px;color:var(--muted)}
|
||||
.media-screen .media-heading :is(.media-icon-button,.media-back-button) {border-radius:50%;background:transparent}
|
||||
.media-screen .media-browse-tools,.media-screen .media-person-toolbar {height:44px;margin:6px 0 12px;gap:4px;justify-content:flex-start}
|
||||
.media-browse-tools>span,.media-person-toolbar>span {margin-right:auto;font-size:var(--text-meta);white-space:nowrap;color:var(--muted)}
|
||||
.media-library-filter {position:relative;display:inline-flex;align-items:center;max-width:55%;flex:none}
|
||||
@@ -614,8 +529,8 @@
|
||||
.media-screen .media-detail-favorite {background:transparent;border-radius:50%}
|
||||
|
||||
.media-ai-jobs{margin-top:28px;border-top:1px solid var(--border);padding-top:18px}.media-ai-job-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-top:10px}.media-ai-batches{margin-top:10px;padding-left:10px}.media-ai-batch{border-top:1px solid var(--border);padding:8px 0}.media-ai-batch-toggle{display:flex;align-items:center;gap:5px;background:transparent;border:0;padding:4px;color:inherit}.media-ai-batch-detail{padding:8px 20px;font-size:var(--text-label)}.media-ai-batch-detail pre{max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:color-mix(in srgb,var(--text) 5%,var(--media-paper));padding:10px}
|
||||
.media-task-tabs{display:inline-flex;align-items:center;gap:3px;margin:8px 0 28px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-muted,#f3f4ef);box-shadow:inset 0 1px 2px rgba(31,42,34,.06)}.media-task-tabs button{min-height:36px;border:0;border-radius:var(--radius-sm);background:transparent;padding:0 18px;color:var(--muted);font-size:var(--text-ui);font-weight:500;white-space:nowrap;transition:background .15s ease,color .15s ease,box-shadow .15s ease}@media (hover: hover) and (pointer: fine) { .media-task-tabs button:hover{color:var(--text);background:rgba(255,255,255,.65)}}.media-task-tabs button[aria-current=page]{background:var(--surface,#fff);color:var(--text);font-weight:650;box-shadow:0 1px 3px rgba(31,42,34,.14)}.media-task-actions{display:flex;gap:6px}.media-task-actions .media-task-icon{position:static}
|
||||
.media-manager-toolbar>span,.media-task-library>label{min-width:0}
|
||||
.media-task-tabs{display:inline-flex;align-items:center;gap:3px;margin:8px 0 28px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-muted,#f3f4ef);box-shadow:inset 0 1px 2px rgba(31,42,34,.06)}.media-task-tabs button{min-height:36px;border:0;border-radius:var(--radius-sm);background:transparent;padding:0 18px;color:var(--muted);font-size:var(--text-ui);font-weight:500;white-space:nowrap;transition:background .15s ease,color .15s ease,box-shadow .15s ease}@media (hover: hover) and (pointer: fine) { .media-task-tabs button:hover{color:var(--text);background:rgba(255,255,255,.65)}}.media-task-tabs button[aria-current=page]{background:var(--surface,#fff);color:var(--text);font-weight:650;box-shadow:0 1px 3px rgba(31,42,34,.14)}
|
||||
.media-task-library>label{min-width:0}
|
||||
.media-ai-jobs .media-scan-job>.media-task-copy{width:auto;min-width:0}
|
||||
.media-ai-jobs .media-scan-job{grid-template-columns:minmax(0,1fr) auto 40px}
|
||||
.media-ai-jobs .media-task-state{justify-self:end;width:auto}
|
||||
@@ -642,7 +557,6 @@
|
||||
.media-narrators .media-person-tile>.media-cover:before,.media-narrators .media-person-tile>.media-cover:after {display:none}
|
||||
.media-narrators .media-person-tile .media-cover-title {writing-mode:horizontal-tb;font-size:var(--text-display);letter-spacing:0}
|
||||
.media-screen .media-detail-main .media-edition-content>.media-row {min-height:60px;margin:0;padding:0;gap:12px}
|
||||
.media-detail-main .media-edition-content>.media-row>.media-actions>summary {width:44px;height:44px;padding:0;display:grid;place-items:center}
|
||||
|
||||
.media-screen :is(.media-library-empty,.media-screen-error.is-page,.media-state-page) {box-sizing:border-box;min-height:calc((100dvh - 80px)*.65);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100%;max-width:360px;margin:0 auto;padding:34px 18px;gap:0;border:0;background:transparent;color:var(--text)}
|
||||
.media-screen :is(.media-empty-emblem,.media-state-icon) {display:grid;place-items:center;flex:none;width:72px;height:72px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);color:var(--media-accent);margin:0 0 22px}
|
||||
@@ -650,8 +564,6 @@
|
||||
.media-screen :is(.media-library-empty p,.media-screen-error.is-page>p,.media-state-page p) {font-size:var(--text-label);line-height:1.9;margin:0 0 24px;max-width:none;color:var(--muted)}
|
||||
.media-screen :is(.media-library-empty,.media-state-page)>.media-primary,.media-screen-error.is-page .media-screen-error-actions {margin:0}
|
||||
.media-screen .media-state-link {font-size:var(--text-meta);color:var(--media-accent);margin-top:6px}
|
||||
.media-missing-resources .media-detail-sidebar>.media-resource-panel>header,.media-missing-resources .media-detail-sidebar>.media-resource-panel>p,.media-missing-resources .media-metadata-sources {display:none}
|
||||
.media-missing-resources .media-resource-panel {margin:0;padding:0;border:0}
|
||||
|
||||
.media-screen.media-playback-page:not(.media-video-page) .media-playback-status[data-panel=main],.media-screen.media-playback-page:not(.media-video-page) .media-playback-status[data-panel=lyrics] {box-sizing:border-box;display:flex;flex-direction:column;min-height:calc(100dvh - 80px);max-width:600px;width:100%;padding:24px 12px 0;margin:auto;gap:0}
|
||||
.media-screen .media-playback-status[data-panel=main] .media-playing-artwork {display:contents}
|
||||
@@ -702,11 +614,7 @@
|
||||
.media-screen .media-tabs {gap:30px;margin:5px 0 16px;border-bottom:1px solid var(--border);width:100%;overflow-y:hidden}
|
||||
.media-screen .media-browse-tools {margin-bottom:16px}
|
||||
.media-screen.media-secondary-page>.media-heading {left:max(148px,calc((100vw - 1120px)/2 + 148px));right:max(32px,calc((100vw - 1120px)/2 + 32px));gap:4px}
|
||||
.media-screen.media-playback-page>.media-heading,
|
||||
.media-screen.media-chapters-page>.media-heading,
|
||||
.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,
|
||||
.media-screen:has(>.media-detail-page)>.media-heading,
|
||||
.media-screen.media-secondary-page>.media-heading {left:max(32px,calc((100vw - 1120px)/2));right:max(32px,calc((100vw - 1120px)/2));}
|
||||
.media-screen.media-playback-page>.media-heading,.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,.media-screen:has(>.media-detail-page)>.media-heading,.media-screen.media-secondary-page>.media-heading {left:max(32px,calc((100vw - 1120px)/2));right:max(32px,calc((100vw - 1120px)/2));}
|
||||
.media-screen .media-detail-page {padding-top:28px}
|
||||
.media-screen .media-episode-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
|
||||
.media-screen :is(.media-library-empty,.media-screen-error.is-page,.media-state-page) {min-height:calc((100dvh - 96px)*.8)}
|
||||
@@ -769,7 +677,6 @@
|
||||
.media-screen .media-grid:not(.media-season-picker) .media-tile strong {white-space:normal;min-height:3em}
|
||||
.media-screen .media-grid .media-tile {text-decoration:none;color:inherit;display:block}
|
||||
.media-screen .media-browse-tools {height:auto;flex-wrap:wrap}
|
||||
.media-loading-status {color:var(--muted);font-size:var(--text-label);min-height:24px}
|
||||
.media-scan-job .media-task-retry {grid-column:1/-1;justify-self:start;min-height:44px}
|
||||
.media-player .media-playback-problem .media-primary {background:var(--media-primary);color:var(--media-on-primary)}
|
||||
.media-player .dplayer-host .dplayer-bar-wrap .dplayer-played,.media-player .dplayer-host .dplayer-volume-bar-inner {background:var(--media-fill)!important}
|
||||
@@ -783,26 +690,15 @@
|
||||
.media-scrape-manager>.media-task-create{margin-top:0}.media-scrape-manager>.media-task-history{margin-top:28px}
|
||||
@media(max-width:520px){.media-screen .media-folder-operation{align-items:stretch;flex-direction:column}.media-folder-operation>button{align-self:flex-start}}
|
||||
|
||||
.media-resource-hidden{display:none!important}.media-menu-submenu{position:relative}.media-menu-submenu>summary{list-style:none;cursor:pointer}.media-menu-submenu>summary::-webkit-details-marker{display:none}.media-menu-submenu>nav{display:none;position:absolute;right:100%;top:-6px;min-width:150px;padding:6px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.12)}.media-menu-submenu[open]>nav{display:grid;gap:3px}.media-menu-submenu>nav button{text-align:left}.media-folder-actions{display:flex;justify-content:flex-end;margin:8px 0}.media-folder-actions>nav{display:grid;gap:4px}.media-task-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 0 20px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-muted,#f3f4ef)}.media-task-intro h2{margin:0;font-size:var(--text-display);color:var(--text)}.media-task-intro p{margin:6px 0 0;color:var(--muted);font-size:var(--text-label)}.media-task-intro .media-task-actions{display:flex;flex-wrap:wrap;gap:8px}.media-task-intro button{min-height:40px}.media-screen .media-task-tabs{border-radius:var(--radius-md);background:var(--surface-muted,#f3f4ef);padding:5px}.media-screen .media-task-tabs button[aria-current=page]{background:var(--media-selection);color:var(--media-accent);box-shadow:none}.media-screen .media-task-tabs button{font-weight:650}.media-screen .media-folder-actions>summary{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}.media-screen .media-folder-actions[open]>summary{border-color:var(--media-accent)}
|
||||
@media(max-width:640px){.media-task-intro{align-items:stretch;flex-direction:column;gap:14px;margin-bottom:16px;padding:15px}.media-task-intro h2{font-size:var(--text-title)}.media-task-intro .media-task-actions{display:grid;grid-template-columns:1fr}.media-task-intro .media-task-actions button,.media-task-intro>button{width:100%}.media-screen .media-task-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;box-sizing:border-box}.media-screen .media-task-tabs button{padding-inline:5px;font-size:var(--text-label)}.media-menu-submenu>nav{right:0;top:100%}}
|
||||
.media-resource-hidden{display:none!important}.media-folder-actions{display:flex;justify-content:flex-end;margin:8px 0}.media-folder-actions>nav{display:grid;gap:4px}.media-screen .media-task-tabs{border-radius:var(--radius-md);background:var(--surface-muted,#f3f4ef);padding:5px}.media-screen .media-task-tabs button[aria-current=page]{background:var(--media-selection);color:var(--media-accent);box-shadow:none}.media-screen .media-task-tabs button{font-weight:650}.media-screen .media-folder-actions>summary{padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}.media-screen .media-folder-actions[open]>summary{border-color:var(--media-accent)}
|
||||
@media(max-width:640px){.media-screen .media-task-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;box-sizing:border-box}.media-screen .media-task-tabs button{padding-inline:5px;font-size:var(--text-label)}}
|
||||
|
||||
/* Keep task navigation quiet and aligned with the rest of the theme. */
|
||||
.media-screen .media-task-tabs{display:flex;gap:26px;margin:8px 0 24px;padding:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;overflow-x:auto}
|
||||
.media-screen .media-task-tabs button{flex:0 0 auto;min-height:44px;padding:0 2px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-weight:550}
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen .media-task-tabs button:hover{background:transparent;color:var(--text)}}
|
||||
.media-screen .media-task-tabs button[aria-current=page]{background:transparent;color:var(--media-accent);border-bottom-color:var(--media-accent);box-shadow:none;font-weight:700}
|
||||
.media-task-intro{margin:0 0 24px;padding:0 0 18px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent}
|
||||
.media-task-intro h2{font-size:var(--text-title);letter-spacing:-.01em}
|
||||
.media-task-intro p{margin-top:4px}
|
||||
.media-task-intro .media-task-actions{gap:8px}
|
||||
.media-task-intro button{min-height:40px}
|
||||
.media-item-actions>nav{min-width:184px;padding:7px}
|
||||
.media-item-actions>nav>button,.media-item-actions>nav>.media-menu-submenu>summary{box-sizing:border-box;width:100%;min-height:40px;padding:9px 10px;border-radius:var(--radius-sm);text-align:left;line-height:1.4;white-space:nowrap}
|
||||
@media (hover: hover) and (pointer: fine) { .media-item-actions>nav>button:hover,.media-item-actions>nav>.media-menu-submenu>summary:hover{background:var(--media-selection)}}
|
||||
.media-menu-submenu>summary{display:block!important;width:100%!important;min-width:0!important;height:auto!important;min-height:40px!important;padding:9px 10px!important;box-sizing:border-box!important;justify-content:flex-start!important;white-space:nowrap!important}
|
||||
.media-menu-submenu>nav{right:calc(100% + 8px);top:-7px;min-width:160px;padding:7px;background:var(--media-paper,var(--surface));border-color:var(--border);box-shadow:0 10px 26px #0002}
|
||||
.media-menu-submenu>nav button{width:100%;min-height:40px;padding:9px 10px;border-radius:var(--radius-sm);white-space:nowrap}
|
||||
@media(max-width:640px){.media-screen .media-task-tabs{display:flex;gap:20px}.media-screen .media-task-tabs button{font-size:var(--text-label)}.media-task-intro{padding-bottom:16px}.media-menu-submenu>nav{right:0;top:calc(100% + 4px)}}
|
||||
@media(max-width:640px){.media-screen .media-task-tabs{display:flex;gap:20px}.media-screen .media-task-tabs button{font-size:var(--text-label)}}
|
||||
|
||||
/* Library cards keep the directory, summary and action areas visually compact. */
|
||||
.media-screen .media-manager .media-library-list{gap:12px}
|
||||
@@ -835,8 +731,6 @@
|
||||
/* Detail queries render the shell before the detail article exists. Hide the
|
||||
channel masthead during that state so loading and loaded headers occupy the
|
||||
same row. */
|
||||
body:has(.media-screen.media-detail-shell) .media-channel-entry .media-brand,
|
||||
body:has(.media-screen.media-detail-shell) .media-channel-entry a { display:none; }
|
||||
.media-screen.media-detail-shell>.media-heading {
|
||||
position:fixed;
|
||||
z-index:90;
|
||||
@@ -869,38 +763,6 @@
|
||||
}
|
||||
|
||||
/* Explicit menu styling keeps links and buttons on the themed palette. */
|
||||
.media-screen .media-actions nav {
|
||||
min-width:196px;
|
||||
padding:7px;
|
||||
gap:2px;
|
||||
background:var(--media-paper,var(--surface));
|
||||
color:var(--text);
|
||||
border-color:var(--border);
|
||||
box-shadow:0 10px 28px #0003;
|
||||
}
|
||||
.media-screen .media-actions nav :is(a,button) {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
width:100%;
|
||||
min-height:40px;
|
||||
box-sizing:border-box;
|
||||
padding:9px 10px;
|
||||
border:0;
|
||||
border-radius:var(--radius-sm);
|
||||
background:transparent;
|
||||
color:var(--text);
|
||||
font:inherit;
|
||||
line-height:1.4;
|
||||
text-align:left;
|
||||
text-decoration:none;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.media-screen .media-actions nav :is(a,button):focus-visible { background:var(--media-selection); color:var(--media-accent); }
|
||||
@media (hover: hover) and (pointer: fine) { .media-screen .media-actions nav :is(a,button):hover:not(:disabled) { background:var(--media-selection); color:var(--media-accent); }}
|
||||
.media-screen .media-actions nav :is(a,button) svg {flex:none;stroke:currentColor}
|
||||
.media-screen .media-library-management-actions>summary {color:var(--text)}
|
||||
.media-screen .media-library-management-actions[open]>summary {background:var(--media-selection);color:var(--media-accent)}
|
||||
.search-split{position:relative;isolation:isolate}
|
||||
.sources-search .search-menu{right:0;left:auto;min-width:260px;box-sizing:border-box}
|
||||
@media(max-width:640px){.sources-search .search-menu{right:0;min-width:min(290px,calc(100vw - 32px))}}
|
||||
@@ -927,33 +789,14 @@
|
||||
|
||||
/* Secondary routes own the page chrome. The channel rail belongs to catalogue
|
||||
landing pages and must not remain visible behind a secondary title row. */
|
||||
body:has(.media-screen.media-secondary-page) .media-channel-entry,
|
||||
body:has(.media-screen.media-manager-workspace) .media-channel-entry,
|
||||
body:has(.media-screen.media-utility-workspace) .media-channel-entry,
|
||||
body:has(.media-screen.media-playback-page) .media-channel-entry,
|
||||
body:has(.media-screen.media-chapters-page) .media-channel-entry,
|
||||
body:has(.media-screen.media-metadata-workspace) .media-channel-entry,
|
||||
body:has(.media-screen.media-detail-shell) .media-channel-entry,
|
||||
body:has(.media-screen>.media-detail-page) .media-channel-entry,
|
||||
body:has(.media-narrators:not([data-view=directory])) .media-channel-entry {
|
||||
display:none!important;
|
||||
}
|
||||
|
||||
.media-screen:is(.media-secondary-page,.media-manager-workspace,.media-playback-page,.media-chapters-page,.media-detail-shell)>.media-heading,
|
||||
.media-screen:has(>.media-detail-page)>.media-heading,
|
||||
.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,
|
||||
.media-utility-workspace .media-settings-heading,
|
||||
.media-narrators:not([data-view=directory])>.media-narrator-heading {
|
||||
.media-screen:is(.media-secondary-page,.media-manager-workspace,.media-playback-page,.media-detail-shell)>.media-heading,.media-screen:has(>.media-detail-page)>.media-heading,.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,.media-utility-workspace .media-settings-heading,.media-narrators:not([data-view=directory])>.media-narrator-heading {
|
||||
border-bottom:1px solid var(--border)!important;
|
||||
box-shadow:none!important;
|
||||
}
|
||||
|
||||
@media(min-width:701px){
|
||||
.media-screen:is(.media-secondary-page,.media-manager-workspace,.media-playback-page,.media-chapters-page,.media-detail-shell)>.media-heading,
|
||||
.media-screen:has(>.media-detail-page)>.media-heading,
|
||||
.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,
|
||||
.media-utility-workspace .media-settings-heading,
|
||||
.media-narrators:not([data-view=directory])>.media-narrator-heading {
|
||||
.media-screen:is(.media-secondary-page,.media-manager-workspace,.media-playback-page,.media-detail-shell)>.media-heading,.media-screen:has(>.media-detail-page)>.media-heading,.media-screen.media-metadata-workspace>.media-metadata-host>.media-heading,.media-utility-workspace .media-settings-heading,.media-narrators:not([data-view=directory])>.media-narrator-heading {
|
||||
height:68px;
|
||||
min-height:68px;
|
||||
}
|
||||
@@ -980,7 +823,6 @@ body:has(.media-narrators:not([data-view=directory])) .media-channel-entry {
|
||||
.media-screen .media-sleep-actions .media-sleep-off span {flex:none}
|
||||
.media-sleep-note {margin:10px 0 0;font-size:var(--text-meta);color:var(--muted)}
|
||||
.media-task-panel{display:flex;flex-direction:column;gap:16px}
|
||||
.media-task-intro .media-task-actions{display:flex;flex-wrap:wrap}
|
||||
.media-text-link{color:var(--media-accent);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
|
||||
.media-icon-button>.icon{font-size:var(--text-display)}
|
||||
.media-manager-card{display:grid;gap:12px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { readdirSync, readFileSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import { expect, it } from 'vitest';
|
||||
|
||||
/**
|
||||
* The media stylesheets grew by layering (media → presentation → v2 → manager), and
|
||||
* screens that were replaced left their rules behind: ~300 lines styled class names no
|
||||
* component renders any more. A rule for a class nothing uses is not harmless — it is
|
||||
* where the next change gets made, to no effect. Every class the media styles name must
|
||||
* appear somewhere in the source; DPlayer's own classes are its markup, not ours.
|
||||
*/
|
||||
const src = join(import.meta.dirname, '..', 'src');
|
||||
const files = (dir: string): string[] => readdirSync(dir, { withFileTypes: true }).flatMap(entry =>
|
||||
entry.isDirectory() ? files(join(dir, entry.name)) : [join(dir, entry.name)]);
|
||||
|
||||
it('styles only classes that the source renders (media stylesheets)', () => {
|
||||
const code = files(src).filter(file => /\.tsx?$/.test(file)).map(file => readFileSync(file, 'utf8')).join('\n');
|
||||
const styles = join(src, 'features', 'media', 'styles');
|
||||
const unused = readdirSync(styles).filter(name => name.endsWith('.css')).flatMap(name => {
|
||||
// A class inside :not() is matched by its absence, so it need not exist.
|
||||
const css = readFileSync(join(styles, name), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '').replace(/:not\([^)]*\)/g, '');
|
||||
const names = new Set([...css.matchAll(/\.(-?[a-zA-Z_][\w-]*)/g)].map(match => match[1]!));
|
||||
return [...names].filter(cls => !cls.startsWith('dplayer') && !code.includes(cls)).map(cls => `${name}: .${cls}`);
|
||||
});
|
||||
expect(unused).toEqual([]);
|
||||
});
|
||||
Reference in new issue
Block a user