From cdce43f98f3de095dda19e800b22b6e43bb2bee2 Mon Sep 17 00:00:00 2001 From: hectorqin Date: Fri, 30 Oct 2026 03:59:39 +0000 Subject: [PATCH] refactor(web): remove ~320 lines of media CSS for classes nothing renders MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- web/src/features/media/styles/favorites.css | 6 - web/src/features/media/styles/media.css | 14 +- .../features/media/styles/presentation.css | 148 ++------------ web/src/features/media/styles/v2.css | 184 ++---------------- web/test/media-css-classes.test.ts | 26 +++ 5 files changed, 57 insertions(+), 321 deletions(-) create mode 100644 web/test/media-css-classes.test.ts diff --git a/web/src/features/media/styles/favorites.css b/web/src/features/media/styles/favorites.css index 0af9247..42afcdf 100644 --- a/web/src/features/media/styles/favorites.css +++ b/web/src/features/media/styles/favorites.css @@ -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)}} diff --git a/web/src/features/media/styles/media.css b/web/src/features/media/styles/media.css index 57018ff..d1c520d 100644 --- a/web/src/features/media/styles/media.css +++ b/web/src/features/media/styles/media.css @@ -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} diff --git a/web/src/features/media/styles/presentation.css b/web/src/features/media/styles/presentation.css index 702e929..5c48316 100644 --- a/web/src/features/media/styles/presentation.css +++ b/web/src/features/media/styles/presentation.css @@ -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} diff --git a/web/src/features/media/styles/v2.css b/web/src/features/media/styles/v2.css index 3e72957..a95c31f 100644 --- a/web/src/features/media/styles/v2.css +++ b/web/src/features/media/styles/v2.css @@ -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)} diff --git a/web/test/media-css-classes.test.ts b/web/test/media-css-classes.test.ts new file mode 100644 index 0000000..1717035 --- /dev/null +++ b/web/test/media-css-classes.test.ts @@ -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([]); +});