From 81ec4ba6bc97af9d99c20d9d23da44fef2aabcc4 Mon Sep 17 00:00:00 2001 From: hectorqin Date: Thu, 22 Oct 2026 13:10:31 +0800 Subject: [PATCH] refactor(web): seven role-named type sizes replace ~50 literal font sizes ui.md's four type roles only governed the reading side; the media sheets used every integer from 8 to 24px plus dozens of rem values. Every font size up to 24px now reads one of --text-display/title/body/ui/label/meta/micro. - --text-ui (14px) is the media list/settings body; --text-display (22px) the page hero; --text-micro (10px) only for cover/icon badges. - --text-meta moves 0.72rem -> 0.75rem, so the 200+ media 12px lines land on it unchanged and the reading side's meta grows by half a pixel. - Inputs that were 16px land on --text-title (16.8px), keeping the iOS focus-zoom floor; ui.md says so explicitly. - Sizes above 24px (player initials, hero numerals) and the decorative serif shorthands stay literal; the token test rejects literals <= 24px. Co-Authored-By: Claude Opus 5.5 --- docs/ui.md | 21 +- web/src/app/shell.css | 14 +- web/src/features/account/styles/mine.css | 14 +- web/src/features/home/styles/home.css | 28 +- web/src/features/media/styles/dplayer.css | 2 +- web/src/features/media/styles/favorites.css | 10 +- .../media/styles/folder-recognition.css | 6 +- web/src/features/media/styles/media.css | 70 +-- .../features/media/styles/presentation.css | 576 +++++++++--------- web/src/features/media/styles/select.css | 10 +- web/src/features/media/styles/v2.css | 214 +++---- web/src/features/search/styles/search.css | 10 +- web/src/features/sources/styles/plugins.css | 2 +- web/src/styles/business-settings.css | 2 +- web/src/styles/notifications.css | 2 +- web/src/styles/pwa.css | 2 +- web/src/styles/reader.css | 267 ++++---- web/src/styles/sheet.css | 2 +- web/test/design-tokens.test.ts | 11 + 19 files changed, 644 insertions(+), 619 deletions(-) diff --git a/docs/ui.md b/docs/ui.md index 06a67a9..182f69c 100644 --- a/docs/ui.md +++ b/docs/ui.md @@ -37,14 +37,25 @@ ### 2.2 字号：按角色 ``` ---text-title 1.05rem 屏幕标题 ---text-body 0.95rem 正文与按钮 ---text-label 0.82rem 字段标签、区块标题 ---text-meta 0.72rem 标题下方的元信息 +--text-display 1.375rem 页面大标题、空状态标题 +--text-title 1.05rem 屏幕标题、卡片标题；也是输入框的下限（见下） +--text-body 0.95rem 阅读侧正文与按钮 +--text-ui 0.875rem 应用界面的列表行、设置行（影音正文） +--text-label 0.82rem 字段标签、区块标题、次要按钮 +--text-meta 0.75rem 标题下方的元信息：数量、时间、来源 +--text-micro 0.625rem 封面与图标上的角标，别处不用 ``` 按角色命名而非按尺寸，因为尺寸会变、角色不会：`--text-meta` 永远是「标题下面 -那行」，无论今天是 0.72rem 还是明天 0.75rem。 +那行」，无论今天是 0.72rem 还是明天 0.75rem。（它确实从 0.72rem 改成了 0.75rem： +影音界面 200 多处 12px 的元信息因此原样落档，阅读侧的元信息只大了半个像素。） + +迁移前四档只约束了阅读侧，影音样式表里 8–24px 每个整数都用过。现在 24px 以下的字号 +必须用令牌，`web/test/design-tokens.test.ts` 会拒绝字面量；24px 以上是装饰性大字 +（播放页的首字、大数字），保留字面量。 + +**输入框至少 16px**：更小的字号会让 iOS Safari 在聚焦时放大视口。需要这条下限的输入框 +用 `--text-title`，不要退到 `--text-body`。 ### 2.3 动效：一个时长、一条曲线 diff --git a/web/src/app/shell.css b/web/src/app/shell.css index 2fbc745..30fd29d 100644 --- a/web/src/app/shell.css +++ b/web/src/app/shell.css @@ -33,7 +33,7 @@ .app-nav-brand, .app-nav-sub, .app-nav-user, .app-nav-search { display: none; } .app-nav-list { display: flex; flex: 1; } .app-nav-list > li { flex: 1; min-width: 0; } - .app-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; font-size: 11px; font-weight: 500; color: var(--nav-muted); } + .app-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 52px; font-size: var(--text-meta); font-weight: 500; color: var(--nav-muted); } .app-nav-item[aria-current='page'] { color: var(--nav-accent); font-weight: 600; } .app-nav-item .app-nav-icon { width: 52px; height: 30px; border-radius: var(--radius-pill); } .app-nav-item[aria-current='page'] .app-nav-icon { background: var(--nav-soft); } @@ -45,7 +45,7 @@ /* After the page in the DOM (so the phone bar follows the content), before it on screen. */ .app-nav { order: -1; display: flex; flex-direction: column; width: var(--app-nav-width); padding: 24px 14px; border-right: 1px solid var(--nav-line); overflow-y: auto; } .app-nav-brand { padding: 0 14px 22px; font-family: 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif; font-size: 26px; font-weight: 700; color: var(--nav-accent); } - .app-nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: var(--radius-md); font-size: 15px; color: var(--nav-ink); } + .app-nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: var(--radius-md); font-size: var(--text-body); color: var(--nav-ink); } /* ui.md §2.5: hover only where a pointer can hover, or a tap leaves the item looking selected. */ @media (hover: hover) and (pointer: fine) { .app-nav-item:hover:not([aria-current='page']), @@ -53,7 +53,7 @@ } .app-nav-item[aria-current='page'] { background: var(--nav-soft); color: var(--nav-accent); font-weight: 600; } .app-nav-sub { margin-top: 2px; } - .app-nav-subitem { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px 0 46px; border-radius: var(--radius-md); font-size: 14px; color: var(--nav-muted); } + .app-nav-subitem { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px 0 46px; border-radius: var(--radius-md); font-size: var(--text-ui); color: var(--nav-muted); } .app-nav-subitem i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ch-video); } .app-nav-subitem[data-channel='music'] i { background: var(--color-ch-music); } .app-nav-subitem[data-channel='audiobook'] i { background: var(--color-ch-audio); } @@ -62,13 +62,13 @@ .app-nav-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand); color: var(--color-on-brand); font-weight: 600; } .app-nav-user-text { min-width: 0; } .app-nav-user-text strong, .app-nav-user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .app-nav-user-text strong { font-size: 14px; } - .app-nav-user-text small { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--nav-muted); } + .app-nav-user-text strong { font-size: var(--text-ui); } + .app-nav-user-text small { display: flex; align-items: center; gap: 5px; font-size: var(--text-meta); color: var(--nav-muted); } .app-nav-status { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ch-audio); } .app-nav-status[data-state='offline'] { background: var(--nav-muted); } .app-nav-status[data-state='error'] { background: var(--color-danger); } .app-nav-search { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0 12px; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--nav-muted); } - .app-nav-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--nav-ink); font: inherit; font-size: 13px; outline: none; } + .app-nav-search input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; color: var(--nav-ink); font: inherit; font-size: var(--text-label); outline: none; } .app-nav-search input::-webkit-search-cancel-button { display: none; } .app-nav-search:focus-within { box-shadow: 0 0 0 2px var(--nav-accent); } } @@ -185,7 +185,7 @@ body { /* ---- phone: the channel switch is three segments in the page header ---- */ .media-channel-segments { display: flex; flex: 1; gap: 2px; padding: 4px; border-radius: var(--radius-lg); background: var(--media-surface, var(--surface)); } -.media-channel-segments a { flex: 1; display: grid; place-items: center; min-height: 36px; border-radius: var(--radius-md); color: var(--muted); font-size: 14px; text-decoration: none; } +.media-channel-segments a { flex: 1; display: grid; place-items: center; min-height: 36px; border-radius: var(--radius-md); color: var(--muted); font-size: var(--text-ui); text-decoration: none; } .media-channel-segments a[aria-current='page'] { background: var(--media-paper, #fff); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px color-mix(in srgb, var(--color-ink) 18%, transparent); } .media-channel-segments a:focus-visible { outline: 2px solid var(--media-accent); outline-offset: 2px; } @media (min-width: 701px) { .media-mobile-title { display: none !important; } } diff --git a/web/src/features/account/styles/mine.css b/web/src/features/account/styles/mine.css index 054f1bb..661adae 100644 --- a/web/src/features/account/styles/mine.css +++ b/web/src/features/account/styles/mine.css @@ -23,15 +23,15 @@ border-radius: 50%; background: var(--color-brand); color: var(--color-on-brand); - font-size: 22px; + font-size: var(--text-display); font-weight: 700; box-shadow: 0 0 0 3px var(--color-surface); } .mine-profile-text { min-width: 0; } -.mine-profile-text strong { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; } -.mine-role { flex: none; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-brand-text); font-size: 11px; font-weight: 600; line-height: 20px; } -.mine-profile-text small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; } +.mine-profile-text strong { display: flex; align-items: center; gap: 8px; font-size: var(--text-title); font-weight: 600; overflow-wrap: anywhere; } +.mine-role { flex: none; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-brand-text); font-size: var(--text-meta); font-weight: 600; line-height: 20px; } +.mine-profile-text small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-meta); color: var(--color-muted); overflow-wrap: anywhere; } .mine-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand-text); } /* Narrow: one list in reading order. Wide: two independent columns. */ @@ -43,7 +43,7 @@ } .mine-group { margin: 24px 0 0; } -.mine-group > h2 { margin: 0 0 8px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-muted); } +.mine-group > h2 { margin: 0 0 8px 6px; font-size: var(--text-meta); font-weight: 600; letter-spacing: 0.08em; color: var(--color-muted); } .mine-card { overflow: hidden; @@ -94,8 +94,8 @@ color: var(--color-brand-text); } -.mine-row-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; } -.mine-row-value { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--color-muted); } +.mine-row-label { flex: 1; min-width: 0; font-size: var(--text-body); font-weight: 500; } +.mine-row-value { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-label); color: var(--color-muted); } .mine-row-chevron { flex: none; color: var(--color-muted); opacity: .7; } .mine-page .mine-row.is-danger { color: var(--media-error-ink); } diff --git a/web/src/features/home/styles/home.css b/web/src/features/home/styles/home.css index 9f649f0..8043701 100644 --- a/web/src/features/home/styles/home.css +++ b/web/src/features/home/styles/home.css @@ -1,7 +1,7 @@ /* 首页: continue where you left off. Uses the shared theme tokens only: * continue cards sit on ch-*-soft with ink text, brand fills carry on-brand text. */ .home-header h1 { margin: 6px 0 0; font-family: 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', serif; font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--color-ink); } -.home-header p { margin: 6px 0 0; font-size: 14px; color: var(--color-muted); } +.home-header p { margin: 6px 0 0; font-size: var(--text-ui); color: var(--color-muted); } .home-progress { display: block; height: 4px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--color-ink) 10%, transparent); overflow: hidden; } .home-progress > i { display: block; height: 100%; min-width: 4px; border-radius: var(--radius-xs); background: var(--color-brand); } @@ -39,21 +39,21 @@ box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 12%, transparent), 0 10px 22px color-mix(in srgb, var(--color-ink) 16%, transparent); } .home-hero-cover img { width: 100%; height: 100%; object-fit: cover; } -.home-hero-cover b { padding: 10px; font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0.05em; text-align: center; overflow-wrap: anywhere; } +.home-hero-cover b { padding: 10px; font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: var(--text-body); font-weight: 600; line-height: 1.35; letter-spacing: 0.05em; text-align: center; overflow-wrap: anywhere; } .home-hero-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } -.home-hero-text strong { margin-top: 8px; font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } -.home-hero-text small { font-size: 13px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.home-hero-text strong { margin-top: 8px; font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: var(--text-display); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } +.home-hero-text small { font-size: var(--text-label); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: auto; padding-top: 14px; } -.home-hero-action { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand); font-size: 14px; font-weight: 600; } +.home-hero-action { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 38px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand); font-size: var(--text-ui); font-weight: 600; } .home-hero-meter { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 140px; max-width: 320px; } .home-hero-meter .home-progress { flex: 1; } -.home-hero-percent { flex: none; font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; } +.home-hero-percent { flex: none; font-size: var(--text-meta); color: var(--color-muted); font-variant-numeric: tabular-nums; } .home-empty { flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; min-height: 120px; } -.home-empty strong { font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: 18px; } -.home-empty a { display: inline-flex; align-items: center; color: var(--color-ch-read-text); font-size: 14px; font-weight: 600; text-decoration: none; } +.home-empty strong { font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: var(--text-title); } +.home-empty a { display: inline-flex; align-items: center; color: var(--color-ch-read-text); font-size: var(--text-ui); font-weight: 600; text-decoration: none; } .home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-content: start; } @media (min-width: 64rem) { @@ -76,15 +76,15 @@ .home-card:hover { border-color: var(--ch); } .home-card-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--ch-soft); color: var(--ch-text); } .home-card-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } -.home-card-label { font-size: 12px; font-weight: 600; color: var(--ch-text); } -.home-card strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.home-card small { margin-bottom: 6px; font-size: 12px; color: var(--color-muted); } +.home-card-label { font-size: var(--text-meta); font-weight: 600; color: var(--ch-text); } +.home-card strong { font-size: var(--text-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.home-card small { margin-bottom: 6px; font-size: var(--text-meta); color: var(--color-muted); } .home-card .home-progress > i { background: var(--ch); } .home-card-chevron { flex: none; color: var(--color-muted); } .home-section { display: flex; align-items: baseline; margin: 32px 0 12px; } -.home-section h2 { flex: 1; margin: 0; font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: 19px; font-weight: 600; } -.home-section a { display: inline-flex; align-items: center; color: var(--color-muted); font-size: 13px; text-decoration: none; } +.home-section h2 { flex: 1; margin: 0; font-family: 'Songti SC', 'Noto Serif SC', serif; font-size: var(--text-title); font-weight: 600; } +.home-section a { display: inline-flex; align-items: center; color: var(--color-muted); font-size: var(--text-label); text-decoration: none; } .home-section a:hover { color: var(--color-brand-text); } .home-shelf-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .home-shelf-row .book-card { flex: none; width: 112px; } @@ -92,6 +92,6 @@ @media (max-width: 480px) { .home-hero { gap: 14px; padding: 16px; } .home-hero-cover { width: 80px; } - .home-hero-text strong { font-size: 19px; } + .home-hero-text strong { font-size: var(--text-title); } .home-hero-meter { max-width: none; } } diff --git a/web/src/features/media/styles/dplayer.css b/web/src/features/media/styles/dplayer.css index 1c176ce..c4fdaa0 100644 --- a/web/src/features/media/styles/dplayer.css +++ b/web/src/features/media/styles/dplayer.css @@ -1 +1 @@ -.dplayer-host{position:relative;width:100%;height:100%;background:#050705;overflow:hidden}.dplayer-host .dplayer-video-wrap{height:100%}.dplayer-host video{display:block;width:100%;height:100%;object-fit:contain}.dplayer-host .dplayer-controller{font-family:inherit}.dplayer-host .dplayer-controller-mask{background:linear-gradient(transparent,#050705cc)}.dplayer-host .dplayer-icons{color:#f4f6ee}.dplayer-host .dplayer-bar-wrap .dplayer-played,.dplayer-host .dplayer-volume-bar-inner{background:#b9d98a!important}.dplayer-host .dplayer-setting-box{background:#182017;color:#f4f6ee}.dplayer-host .dplayer-setting-item{color:#f4f6ee}.dplayer-host .dplayer-setting-item:hover{background:#2a3829}.dplayer-host .dplayer-controller .dplayer-time{font-size:11px} +.dplayer-host{position:relative;width:100%;height:100%;background:#050705;overflow:hidden}.dplayer-host .dplayer-video-wrap{height:100%}.dplayer-host video{display:block;width:100%;height:100%;object-fit:contain}.dplayer-host .dplayer-controller{font-family:inherit}.dplayer-host .dplayer-controller-mask{background:linear-gradient(transparent,#050705cc)}.dplayer-host .dplayer-icons{color:#f4f6ee}.dplayer-host .dplayer-bar-wrap .dplayer-played,.dplayer-host .dplayer-volume-bar-inner{background:#b9d98a!important}.dplayer-host .dplayer-setting-box{background:#182017;color:#f4f6ee}.dplayer-host .dplayer-setting-item{color:#f4f6ee}.dplayer-host .dplayer-setting-item:hover{background:#2a3829}.dplayer-host .dplayer-controller .dplayer-time{font-size:var(--text-meta)} diff --git a/web/src/features/media/styles/favorites.css b/web/src/features/media/styles/favorites.css index 2cfa002..b8baa3e 100644 --- a/web/src/features/media/styles/favorites.css +++ b/web/src/features/media/styles/favorites.css @@ -1,13 +1,13 @@ .media-screen .media-favorites {width:100%;max-width:850px;margin:0 auto} .media-favorites .media-favorite-tools {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px} -.media-favorites .media-favorite-tools p {margin:0;font-size:12px;color:var(--muted)} -.media-screen .media-favorite-filter-menu {position:relative;display:inline-block;color:var(--media-accent);font-size:12px} +.media-favorites .media-favorite-tools p {margin:0;font-size:var(--text-meta);color:var(--muted)} +.media-screen .media-favorite-filter-menu {position:relative;display:inline-block;color:var(--media-accent);font-size:var(--text-meta)} .media-screen .media-favorite-filter-menu>summary {display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;cursor:pointer;list-style:none;white-space:nowrap} .media-screen .media-favorite-filter-menu>summary::-webkit-details-marker {display:none} .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:12px;line-height:1.4;text-align:left;cursor:pointer} +.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:hover,.media-screen .media-favorite-filter-options button:focus-visible {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)} @@ -18,6 +18,6 @@ .media-screen .media-favorites .media-favorite-row>.media-portrait {width:44px;min-width:44px;height:44px;border-radius:50%} .media-favorites .media-favorite-row>.media-cover:not(.has-image) .media-cover-title {writing-mode:vertical-rl;white-space:normal;letter-spacing:.08em;line-height:1.4} .media-favorites .media-favorite-copy {flex:1;min-width:0;padding:9px 0} -.media-favorites .media-favorite-copy strong {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.5;font-weight:550;margin:0} -.media-favorites .media-favorite-copy small {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;line-height:1.5;color:var(--muted);margin-top:3px} +.media-favorites .media-favorite-copy strong {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-label);line-height:1.5;font-weight:550;margin:0} +.media-favorites .media-favorite-copy small {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-meta);line-height:1.5;color:var(--muted);margin-top:3px} .media-favorites .media-favorite-row>svg {flex:none;color:var(--muted)} diff --git a/web/src/features/media/styles/folder-recognition.css b/web/src/features/media/styles/folder-recognition.css index 0651ef6..937b033 100644 --- a/web/src/features/media/styles/folder-recognition.css +++ b/web/src/features/media/styles/folder-recognition.css @@ -5,11 +5,11 @@ .media-recognition-form input[type=checkbox]{width:18px;min-width:18px;height:18px;min-height:18px;max-height:18px;padding:0;margin:3px 0 0;flex:0 0 18px;box-sizing:border-box;accent-color:var(--media-accent)} .media-recognition-form .media-recognition-check{line-height:24px} .media-recognition-bulk{position:sticky;top:-16px;z-index:2;background:var(--reader-paper);padding:10px 0;border-bottom:1px solid var(--border)} -.media-recognition-bulk p{margin:0;font-size:13px} +.media-recognition-bulk p{margin:0;font-size:var(--text-label)} .media-recognition-row strong{line-height:24px} .media-recognition-preview{border-top:1px solid var(--border);padding-top:16px} -.media-recognition-preview>p{font-size:13px;line-height:1.6;opacity:.8} +.media-recognition-preview>p{font-size:var(--text-label);line-height:1.6;opacity:.8} .media-recognition-form .media-recognition-row{display:flex;flex-direction:row;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border)} .media-recognition-row>span{min-width:0;display:grid;gap:5px;overflow-wrap:anywhere} -.media-recognition-row small{font-size:12px;opacity:.75} +.media-recognition-row small{font-size:var(--text-meta);opacity:.75} .media-recognition-row b{font-weight:500} diff --git a/web/src/features/media/styles/media.css b/web/src/features/media/styles/media.css index dddea06..57018ff 100644 --- a/web/src/features/media/styles/media.css +++ b/web/src/features/media/styles/media.css @@ -1,5 +1,5 @@ /* Theme aliases live in presentation.css; reading tokens are consumed, never overwritten. */ -.media-screen{max-width:1100px;margin:0 auto;padding:20px 24px 100px;color:var(--text,#30392c)}.media-screen button,.media-screen input,.media-screen select,.media-screen textarea{font:inherit;color:inherit;background:var(--surface,#f0f0e8);border:1px solid var(--border,#dce2d4);border-radius:var(--radius-sm);padding:9px 12px;min-height:40px}.media-screen button{cursor:pointer}.media-screen button:disabled{opacity:.45;cursor:default}.media-screen h1{font-size:23px}.media-screen h2{font-size:17px;margin-top:24px}.media-heading,.media-toolbar,.media-search,.media-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:12px 0}.media-heading h1{margin:0}.media-search input{flex:1;min-width:0}.media-tabs{display:flex;gap:20px;border-bottom:1px solid var(--border,#dce2d4);margin:18px 0}.media-tabs button{border:0;background:transparent;border-radius:0}.media-tabs button[aria-current=page]{border-bottom:3px solid var(--media-accent);color:var(--media-accent)}.media-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 17px}.media-grid .media-tile{padding:0;border:0;background:transparent;text-align:left;min-width:0}.media-cover{display:flex;aspect-ratio:2/3;background:linear-gradient(145deg,#6b8060,#384d43);border-radius:var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs);align-items:center;justify-content:center;padding:15px;color:#f5f0df;font:22px/1.7 Georgia,serif;overflow-wrap:anywhere;text-align:center}.media-cover.square{aspect-ratio:1}.media-tile strong,.media-tile small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:7px}.media-tile strong{font-weight:500;font-size:13px}.media-tile small,.media-row small{font-size:12px;opacity:.65;display:block}.media-hero{display:flex;gap:24px;align-items:center}.media-hero .media-cover{width:140px;min-width:140px}.media-row{border-bottom:1px solid var(--border,#dce2d4);padding:10px 0}.media-row>span{flex:1;min-width:0;overflow-wrap:anywhere}.media-form{display:grid;gap:14px;max-width:560px;margin:20px 0}.media-form label{display:grid;gap:7px}.media-form textarea{min-height:110px}.media-empty{padding:60px 15px;text-align:center;opacity:.7}.media-error{padding:12px;background:var(--media-error-background);color:var(--media-error-ink);border-radius:var(--radius-sm)}.media-player{max-width:1100px;margin:0 auto;padding:10px 20px 80px}.media-player[hidden]{display:none}.media-player audio{width:100%}.media-player video{width:100%;max-height:65vh;background:#101510}.media-player [hidden]{display:none}@media(max-width:600px){.media-screen{padding:16px 14px 80px}.media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 12px}.media-cover{font-size:18px}.media-hero .media-cover{width:105px;min-width:105px}.media-hero{gap:15px}} +.media-screen{max-width:1100px;margin:0 auto;padding:20px 24px 100px;color:var(--text,#30392c)}.media-screen button,.media-screen input,.media-screen select,.media-screen textarea{font:inherit;color:inherit;background:var(--surface,#f0f0e8);border:1px solid var(--border,#dce2d4);border-radius:var(--radius-sm);padding:9px 12px;min-height:40px}.media-screen button{cursor:pointer}.media-screen button:disabled{opacity:.45;cursor:default}.media-screen h1{font-size:var(--text-display)}.media-screen h2{font-size:var(--text-title);margin-top:24px}.media-heading,.media-toolbar,.media-search,.media-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:12px 0}.media-heading h1{margin:0}.media-search input{flex:1;min-width:0}.media-tabs{display:flex;gap:20px;border-bottom:1px solid var(--border,#dce2d4);margin:18px 0}.media-tabs button{border:0;background:transparent;border-radius:0}.media-tabs button[aria-current=page]{border-bottom:3px solid var(--media-accent);color:var(--media-accent)}.media-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 17px}.media-grid .media-tile{padding:0;border:0;background:transparent;text-align:left;min-width:0}.media-cover{display:flex;aspect-ratio:2/3;background:linear-gradient(145deg,#6b8060,#384d43);border-radius:var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs);align-items:center;justify-content:center;padding:15px;color:#f5f0df;font:22px/1.7 Georgia,serif;overflow-wrap:anywhere;text-align:center}.media-cover.square{aspect-ratio:1}.media-tile strong,.media-tile small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-top:7px}.media-tile strong{font-weight:500;font-size:var(--text-label)}.media-tile small,.media-row small{font-size:var(--text-meta);opacity:.65;display:block}.media-hero{display:flex;gap:24px;align-items:center}.media-hero .media-cover{width:140px;min-width:140px}.media-row{border-bottom:1px solid var(--border,#dce2d4);padding:10px 0}.media-row>span{flex:1;min-width:0;overflow-wrap:anywhere}.media-form{display:grid;gap:14px;max-width:560px;margin:20px 0}.media-form label{display:grid;gap:7px}.media-form textarea{min-height:110px}.media-empty{padding:60px 15px;text-align:center;opacity:.7}.media-error{padding:12px;background:var(--media-error-background);color:var(--media-error-ink);border-radius:var(--radius-sm)}.media-player{max-width:1100px;margin:0 auto;padding:10px 20px 80px}.media-player[hidden]{display:none}.media-player audio{width:100%}.media-player video{width:100%;max-height:65vh;background:#101510}.media-player [hidden]{display:none}@media(max-width:600px){.media-screen{padding:16px 14px 80px}.media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 12px}.media-cover{font-size:var(--text-title)}.media-hero .media-cover{width:105px;min-width:105px}.media-hero{gap:15px}} .media-cover.has-image{padding:0;overflow:hidden}.media-cover img{width:100%;height:100%;object-fit:cover;display:block} .media-cover.media-portrait{aspect-ratio:1;border-radius:50%;overflow:hidden} .media-screen .media-heading{margin:0 0 8px;min-height:44px;gap:8px;border-bottom:1px solid var(--border,#dce2d4)} @@ -11,49 +11,49 @@ .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:12px}.media-toolbar select{max-width:75%;min-width:0} -.media-loading{font-size:12px;opacity:.7;min-height:20px} +.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:13px;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:11px;line-height:1.5}.media-history-unavailable{color:var(--media-error-ink);white-space:normal!important} -.media-permission-fields{border:0;padding:0;margin:0;display:grid;gap:12px;min-width:0}.media-permission-fields p{font-size:12px;opacity:.7;margin:0}.media-permission-users{max-height:350px;overflow-y:auto}.media-form .media-user-option{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border,#dce2d4)}.media-user-option input{width:20px;min-height:20px;margin:0}.media-user-option small{display:block;opacity:.65;margin-top:3px} +.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} +.media-permission-fields{border:0;padding:0;margin:0;display:grid;gap:12px;min-width:0}.media-permission-fields p{font-size:var(--text-meta);opacity:.7;margin:0}.media-permission-users{max-height:350px;overflow-y:auto}.media-form .media-user-option{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border,#dce2d4)}.media-user-option input{width:20px;min-height:20px;margin:0}.media-user-option small{display:block;opacity:.65;margin-top:3px} @media(max-width:600px){.media-screen{padding:8px 14px 100px}.media-grid{gap:15px 10px}.media-screen .media-toolbar select{padding:5px 8px;min-height:34px}.media-tile strong{margin-top:5px}.media-tile small{margin-top:3px}} -.media-subtitle-controls{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:13px}.media-subtitle-controls select{max-width:65%;font:inherit;padding:6px}.media-subtitle-controls span{font-size:12px} -.media-chapter-filter{display:flex;align-items:center;gap:12px;font-size:13px}.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:13px}.media-edition-resources>summary{cursor:pointer;padding:10px 0} +.media-subtitle-controls{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:var(--text-label)}.media-subtitle-controls select{max-width:65%;font:inherit;padding:6px}.media-subtitle-controls span{font-size:var(--text-meta)} +.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:12px}.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:12px;min-width:0;flex:1}.media-search-filters select{min-width:0;width:100%}.media-search-filters>span{font-size:12px;white-space:nowrap} -.media-job-result-filters{flex-wrap:wrap}.media-job-result-filters label{min-width:0;font-size:13px}.media-job-result-filters select{max-width:100%} -.media-task-history>h3{margin:12px 0;font-size:15px}.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-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:20px} +.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:20px}.media-mini-time{font-size:11px;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:12px;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-playback-support{font-size:var(--text-meta);line-height:1.6}.media-playback-support summary{cursor:pointer;padding:6px 0} .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:11px;opacity:.7}.media-continue strong,.media-continue span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.media-continue strong{font-size:14px}.media-continue progress{width:100%;height:3px;accent-color:var(--media-accent)}.media-continue>p{grid-column:1/-1;margin:0;font-size:12px} +.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)}} .media-screen{width:100%;box-sizing:border-box} -.media-player-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--muted,#66715f);font-size:14px}.media-player-empty p{margin:0 0 14px}.media-player-empty button{border:0;background:transparent;padding:6px 10px;min-height:36px} +.media-player-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--muted,#66715f);font-size:var(--text-ui)}.media-player-empty p{margin:0 0 14px}.media-player-empty button{border:0;background:transparent;padding:6px 10px;min-height:36px} .media-screen{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} .media-screen.media-video-page{overflow:hidden;padding-bottom:0}.media-player select,.media-player input,.media-player button{color:inherit}.media-player select{background:var(--surface);border:1px solid var(--border)} -.media-season-list{display:grid;gap:6px}.media-season-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:center;border-bottom:1px solid var(--border);padding:6px 0}.media-season-row>button{text-align:left;overflow-wrap:anywhere}.media-season-row>select{grid-column:2;min-width:0;width:100%;font-size:12px}.media-season-row>input{min-height:24px;accent-color:var(--media-accent)}.media-season-notice{font-size:12px;line-height:1.5} +.media-season-list{display:grid;gap:6px}.media-season-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px;align-items:center;border-bottom:1px solid var(--border);padding:6px 0}.media-season-row>button{text-align:left;overflow-wrap:anywhere}.media-season-row>select{grid-column:2;min-width:0;width:100%;font-size:var(--text-meta)}.media-season-row>input{min-height:24px;accent-color:var(--media-accent)}.media-season-notice{font-size:var(--text-meta);line-height:1.5} .media-series-playback{margin:16px 0}.media-series-playback>summary{cursor:pointer;padding:10px 0;font-weight:600} .media-edition-organizer>label{display:grid;gap:6px;margin:10px 0}.media-edition-organizer>label.media-row{display:flex;justify-content:flex-start}.media-edition-organizer input:not([type=checkbox]),.media-edition-organizer select{width:100%;min-width:0;box-sizing:border-box}.media-edition-organizer .media-row span{min-width:0;overflow-wrap:anywhere} -.media-current-playlist .media-playlist-edit{display:flex;gap:6px}.media-current-playlist .media-playlist-edit button{width:auto;font-size:12px;flex:1;text-align:center} -.media-lyrics{min-width:0}.media-lyrics .media-toolbar{font-size:12px;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:12px;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:16px}.media-settings p{font-size:12px;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-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))}} /* 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:12px;margin:8px 0}.media-track-sort select{min-width:0} +.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:10px;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:14px;font-weight:500;overflow-wrap:anywhere}.media-track-copy small{display:block;font-size:12px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere} +.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} .media-settings .media-form{gap:12px;margin:16px 0}.media-settings .media-form h2,.media-settings .media-form p{margin:0}.media-settings section h2{margin:4px 0 12px} /* Desktop media navigation has its own top row; reading routes still hide this root. */ @media(min-width:900px) and (min-height:600px){ @@ -62,20 +62,20 @@ } -.media-cover.media-cover-failed{box-sizing:border-box;padding:6px;flex-direction:column;gap:4px}.media-cover-failed .media-cover-title{font-size:14px;line-height:1.25;-webkit-line-clamp:1}.media-cover-retry{display:grid;gap:4px;font:12px/1.5 system-ui}.media-screen .media-cover-retry button{font:12px/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:13px;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:14px;line-height:1.5}.media-detail-kind,.media-detail-year{font-size:12px;opacity:.7} -.media-library-editor dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 14px;margin:0;font-size:13px;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:12px;line-height:1.6;margin:0} +.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-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:12px;margin:8px 0}.media-edition>.media-row>span{font-size:14px;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:13px}.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:13px;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:13px;cursor:pointer}.media-edition-admin>button{margin-top:8px;font-size:13px}.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:12px;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:15px;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:13px} -.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:16px}.media-manager .media-form{max-width:100%;margin:0;gap:12px}.media-manager .media-form label{font-size:13px;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:12px;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-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:12px;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:12px;min-height:24px}.media-album-summary>button{font-size:12px;padding:4px 8px}.media-album-actions{justify-content:flex-start;gap:8px}.media-album-start{font-size:12px;line-height:1.5}.media-album-playback .media-season-list{gap:0}.media-album-playback .media-album-disc{font-size:12px;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:12px;color:var(--muted);font-variant-numeric:tabular-nums}.media-album-track-title{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}.media-album-track-title>small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.media-album-duration{flex-shrink:0;font-size:12px;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:10px;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:13px}.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-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:15px}.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} +.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} .media-player select {appearance:none;-webkit-appearance:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 28px 7px 10px;min-height:38px;color-scheme:inherit} diff --git a/web/src/features/media/styles/presentation.css b/web/src/features/media/styles/presentation.css index 41b4494..79d5930 100644 --- a/web/src/features/media/styles/presentation.css +++ b/web/src/features/media/styles/presentation.css @@ -22,7 +22,7 @@ color: var(--text); } .media-screen, .media-player, .media-channel-entry { - font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; + font: var(--text-ui)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; } body:has(>#app>.media-screen) { background: var(--color-bg); } .media-screen { max-width:1120px; padding:62px 30px 150px; background:var(--media-background); } @@ -35,18 +35,18 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } background:var(--media-paper); border:1px solid var(--border); border-radius:var(--radius-sm); } .media-screen select { background:var(--media-background); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; min-height:34px; } -.media-screen h1 {font-size:23px;font-weight:600;line-height:1.4} -.media-screen h2 {font-size:16px;font-weight:600} +.media-screen h1 {font-size:var(--text-display);font-weight:600;line-height:1.4} +.media-screen h2 {font-size:var(--text-title);font-weight:600} .media-screen .media-heading { min-height:49px; margin:0; border-bottom:1px solid var(--border); background:var(--media-background); } -.media-screen .media-heading>strong {font-size:17px;font-weight:600} +.media-screen .media-heading>strong {font-size:var(--text-title);font-weight:600} .media-screen .media-tabs {gap:25px;min-height:49px} -.media-screen .media-tabs button {font-size:14px;color:var(--muted);padding:13px 0;min-height:49px;border-radius:0} +.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:12px;white-space:nowrap} +.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} .media-screen .media-browse-actions>button,.media-browse-filters>summary {display:grid;place-items:center;width:40px;min-width:40px;height:42px;padding:10px;list-style:none;cursor:pointer} .media-browse-filters>summary::-webkit-details-marker {display:none} @@ -55,25 +55,25 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-browse-filters[open]>summary {background:var(--media-selection);color:var(--media-accent)} .media-browse-filters i {position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--media-fill)} .media-browse-filter-panel {position:absolute;z-index:10;right:0;top:46px;width:280px;max-width:calc(100vw - 32px);padding:16px;background:var(--media-paper);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px #0002;color:var(--text)} -.media-browse-filter-panel>label {display:grid;gap:8px;font-size:12px} -.media-browse-filter-panel .media-form {margin:14px 0 0;font-size:12px} +.media-browse-filter-panel>label {display:grid;gap:8px;font-size:var(--text-meta)} +.media-browse-filter-panel .media-form {margin:14px 0 0;font-size:var(--text-meta)} .media-browse-filter-panel .media-form>div {display:flex;justify-content:flex-end} .media-screen .media-browse-filter-panel select {width:100%;max-width:none} .media-screen .media-track-entry {padding:12px 0;min-height:69px} -.media-track-number {flex:0 0 25px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)} +.media-track-number {flex:0 0 25px;text-align:center;font-size:var(--text-meta);font-variant-numeric:tabular-nums;color:var(--muted)} .media-screen button.media-track-copy {text-align:left;padding:0;min-width:0} -.media-track-copy strong {font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} -.media-track-copy small {font-size:11px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} +.media-track-copy strong {font-size:var(--text-label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} +.media-track-copy small {font-size:var(--text-meta);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .media-screen .media-track-detail {display:grid;place-items:center;width:40px;min-width:40px;height:44px;padding:10px} .media-track-copy[aria-current=true] {color:var(--media-accent)} -.media-screen .media-browse-tools button {display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 8px;min-height:34px} -.media-screen .media-browse-tools select {font-size:12px;max-width:200px} +.media-screen .media-browse-tools button {display:flex;align-items:center;gap:6px;font-size:var(--text-meta);padding:6px 8px;min-height:34px} +.media-screen .media-browse-tools select {font-size:var(--text-meta);max-width:200px} .media-screen .media-grid {gap:22px 17px} .media-screen .media-tile:hover {background:transparent} -.media-tile strong {font-size:13px;margin-top:8px;font-weight:500} -.media-tile small {color:var(--muted);opacity:1;font-size:11px;margin-top:3px} +.media-tile strong {font-size:var(--text-label);margin-top:8px;font-weight:500} +.media-tile small {color:var(--muted);opacity:1;font-size:var(--text-meta);margin-top:3px} .media-read-loading {margin:18px 0 24px} -.media-read-loading>p {font-size:12px;color:var(--muted);margin:0 0 18px} +.media-read-loading>p {font-size:var(--text-meta);color:var(--muted);margin:0 0 18px} .media-skeleton-entry {min-width:0} .media-skeleton-cover,.media-skeleton-copy>i {display:block;background:var(--surface);border-radius:var(--radius-xs);animation:media-skeleton-breathe 1.8s ease-in-out infinite alternate} .media-skeleton-cover {aspect-ratio:2/3} @@ -101,12 +101,12 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-read-loading>p {margin:0 0 18px;color:var(--muted);line-height:1.6} .media-skeleton-cover,.media-skeleton-copy>i {background:color-mix(in srgb,var(--text) 7%,var(--media-paper));} .media-screen .media-screen-error.is-page {display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:transparent;color:var(--muted);max-width:460px;margin:60px auto;padding:12px 18px} -.media-screen-error.is-page>strong {font-size:20px;font-weight:550;color:var(--text)} -.media-screen-error.is-page>p {margin:0;font-size:13px;line-height:1.8;max-width:100%} +.media-screen-error.is-page>strong {font-size:var(--text-display);font-weight:550;color:var(--text)} +.media-screen-error.is-page>p {margin:0;font-size:var(--text-label);line-height:1.8;max-width:100%} .media-screen-error.is-page .media-screen-error-actions {justify-content:center;margin-top:6px} @keyframes media-skeleton-breathe {to{opacity:.45}} @media(prefers-reduced-motion:reduce){.media-skeleton-cover,.media-skeleton-copy>i{animation:none}} -@media(max-width:700px){.media-read-loading-detail .media-skeleton-cover{width:105px}.media-read-loading-detail .media-skeleton-entry{gap:15px}.media-detail-loading-hero{gap:16px;margin-top:17px}.media-detail-loading-cover{width:105px;border-radius:var(--radius-sm)}.media-detail-loading-copy{gap:8px;padding-top:2px}.media-detail-loading-title{height:22px!important;width:100%}.media-detail-loading-actions{margin-top:16px}.media-detail-loading-actions i:first-child{width:120px;height:40px}.media-detail-loading-actions i:last-child{width:40px}.media-detail-loading-description{margin-top:32px}.media-screen-error.is-page>strong{font-size:18px}} +@media(max-width:700px){.media-read-loading-detail .media-skeleton-cover{width:105px}.media-read-loading-detail .media-skeleton-entry{gap:15px}.media-detail-loading-hero{gap:16px;margin-top:17px}.media-detail-loading-cover{width:105px;border-radius:var(--radius-sm)}.media-detail-loading-copy{gap:8px;padding-top:2px}.media-detail-loading-title{height:22px!important;width:100%}.media-detail-loading-actions{margin-top:16px}.media-detail-loading-actions i:first-child{width:120px;height:40px}.media-detail-loading-actions i:last-child{width:40px}.media-detail-loading-description{margin-top:32px}.media-screen-error.is-page>strong{font-size:var(--text-title)}} @media(max-width:430px){.media-read-loading-detail .media-skeleton-entry{align-items:flex-start}.media-read-loading-detail .media-skeleton-copy{min-width:0}.media-read-loading-detail .media-skeleton-copy>i{max-width:100%}} .media-cover {box-shadow:0 3px 9px #00000015;border-radius:var(--radius-xs) var(--radius-sm) var(--radius-sm) var(--radius-xs)} .media-cover.square {border-radius:var(--radius-sm)} @@ -114,7 +114,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-hero .media-cover {width:170px;min-width:170px} .media-screen .media-primary {background:var(--media-primary);color:var(--media-on-primary)} .media-screen button.media-primary:hover:not(:disabled) {background:var(--media-primary);color:var(--media-on-primary);filter:brightness(.94)} -.media-task-retry {display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-selection);color:var(--media-accent);font-size:12px;font-weight:600} +.media-task-retry {display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-selection);color:var(--media-accent);font-size:var(--text-meta);font-weight:600} .media-task-retry:disabled {opacity:.5} @media(max-width:430px){.media-task-retry span{display:inline}.media-task-retry{min-width:64px}.media-scan-job .media-task-icon{min-width:40px}} .media-screen .media-continue {background:var(--surface);border:0;border-radius:var(--radius-sm);padding:11px 14px;margin-top:18px} @@ -123,7 +123,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .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:14px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;white-space:nowrap} +.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-channel-entry a:hover {background:var(--surface)} @@ -132,30 +132,30 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-playback-page {max-width:1120px} .media-playback-page .media-heading {position:relative;top:auto;justify-content:flex-start;gap:6px;z-index:4;border:0} .media-screen .media-back-button {width:40px;min-width:40px;height:44px;display:grid;place-items:center;padding:10px;color:inherit} -.media-back-button>.icon {font-size:1.25rem} +.media-back-button>.icon {font-size:var(--text-display)} .media-playback-status {display:grid;gap:14px;padding:18px;max-width:600px;margin:24px auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)} .media-playback-status p {margin:0} .media-playback-page:not(.media-video-page) .media-playback-status {max-width:420px;gap:0;padding:25px 25px 35px;margin:0 auto;border:0;background:transparent} .media-playback-page:not(.media-video-page) {padding-bottom:90px} .media-now-playing {display:flex;align-items:center;justify-content:space-between;gap:12px} -.media-now-playing small {display:block;font-size:11px;color:var(--muted)} +.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:11px;letter-spacing:1px;color:var(--media-accent);margin-bottom:8px} +.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:12px;color:var(--muted)} -.media-screen .media-playing-title {font-size:22px;font-weight:600;line-height:1.4;margin:0 0 8px;overflow-wrap:anywhere;max-width:100%} -.media-playing-artwork p {font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 8px} +.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:12px;color:var(--muted);min-height:34px;padding:6px 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-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)} -.media-inline-timeline .media-mini-time {display:flex;justify-content:space-between;gap:8px;padding:0;font-size:11px;line-height:1.5;color:var(--muted);opacity:1} +.media-inline-timeline .media-mini-time {display:flex;justify-content:space-between;gap:8px;padding:0;font-size:var(--text-meta);line-height:1.5;color:var(--muted);opacity:1} .media-inline-timeline .media-volume {display:none} .media-inline-timeline [hidden] {display:none} .media-player-expanded.media-player-audio {display:none} @@ -165,11 +165,11 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-screen .media-toggle-play:hover {background:var(--media-fill);filter:brightness(.95)} .media-toggle-play svg {width:25px;height:25px} .media-screen .media-skip {position:relative} -.media-skip small {position:absolute;inset:18px 0 auto;text-align:center;font-size:8px;font-weight:600} +.media-skip small {position:absolute;inset:18px 0 auto;text-align:center;font-size:var(--text-micro);font-weight:600} .media-playback-options {display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 8px} -.media-playback-options label {display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:var(--muted);font-size:12px} -.media-screen .media-playback-options select {border:0;background:transparent;padding:0;min-height:26px;max-width:95px;width:auto;font-size:12px;text-align:center} -.media-current-playlist {font-size:12px} +.media-playback-options label {display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:var(--muted);font-size:var(--text-meta)} +.media-screen .media-playback-options select {border:0;background:transparent;padding:0;min-height:26px;max-width:95px;width:auto;font-size:var(--text-meta);text-align:center} +.media-current-playlist {font-size:var(--text-meta)} .media-current-playlist>summary {color:var(--muted)} .media-playback-page .media-lyrics {padding-top:10px} .media-lyrics-lines {height:320px;padding:65px 8px;overflow-anchor:none} @@ -178,7 +178,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .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:11px;border-radius:var(--radius-xs)} + .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} @@ -186,7 +186,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .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} - .media-tile strong {font-size:12px;margin-top:6px} + .media-tile strong {font-size:var(--text-meta);margin-top:6px} .media-screen .media-browse-tools select {max-width:160px} .media-hero {gap:16px;margin-top:17px} .media-hero .media-cover {width:105px;min-width:105px} @@ -199,7 +199,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } @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:17px} + .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}} @@ -214,68 +214,68 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .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:12px} +.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:12px} +.media-continue>.media-cover .media-cover-title {font-size:var(--text-meta)} .media-continue small {overflow:hidden;white-space:nowrap;text-overflow:ellipsis} -.media-continue>div {gap:3px}.media-continue strong {font-size:13px;font-weight:500} +.media-continue>div {gap:3px}.media-continue strong {font-size:var(--text-label);font-weight:500} .media-continue progress {position:absolute;width:1px;height:1px;clip-path:inset(50%)} -.media-screen .media-continue>button {font-size:12px;min-height:42px} -.media-screen .media-lyrics-toggle {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--muted);padding:0;min-width:44px;min-height:48px} +.media-screen .media-continue>button {font-size:var(--text-meta);min-height:42px} +.media-screen .media-lyrics-toggle {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:var(--text-meta);color:var(--muted);padding:0;min-width:44px;min-height:48px} .media-screen .media-lyrics-toggle[aria-pressed=true] {color:var(--media-accent)} .media-playback-page:not(.media-video-page) .media-playback-status[data-panel=queue] {max-width:900px;padding:6px 0 35px} -.media-playlist-toolbar {display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;margin-bottom:12px} +.media-playlist-toolbar {display:flex;align-items:center;gap:4px;color:var(--muted);font-size:var(--text-meta);margin-bottom:12px} .media-playlist-toolbar>span {margin-right:auto} .media-screen .media-playlist-toolbar button {display:grid;place-items:center;width:40px;height:44px;padding:10px} .media-playlist-toolbar button[aria-pressed=true] {background:var(--media-selection);color:var(--media-accent)} .media-playlist-search {display:flex;align-items:end;gap:10px;margin:10px 0 18px} -.media-playlist-search label {flex:1;min-width:0;margin:0;font-size:12px;color:var(--muted)} -.media-playlist-search>button {font-size:12px;white-space:nowrap} -.media-current-playlist>p {font-size:12px;color:var(--muted);line-height:1.8} +.media-playlist-search label {flex:1;min-width:0;margin:0;font-size:var(--text-meta);color:var(--muted)} +.media-playlist-search>button {font-size:var(--text-meta);white-space:nowrap} +.media-current-playlist>p {font-size:var(--text-meta);color:var(--muted);line-height:1.8} .media-current-playlist ol {margin:0;padding:0;max-height:none;overflow:visible} .media-current-playlist li {display:flex;align-items:center;gap:4px;min-height:64px;border-bottom:1px solid var(--border)} -.media-screen .media-current-playlist li .media-playlist-select {display:flex;align-items:center;gap:12px;flex:1;min-width:0;width:auto;margin:0;padding:12px 0;background:transparent;border:0;line-height:1.5;font-size:13px;color:var(--text)} -.media-current-playlist .media-playlist-number {display:grid;place-items:center;flex:0 0 25px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)} +.media-screen .media-current-playlist li .media-playlist-select {display:flex;align-items:center;gap:12px;flex:1;min-width:0;width:auto;margin:0;padding:12px 0;background:transparent;border:0;line-height:1.5;font-size:var(--text-label);color:var(--text)} +.media-current-playlist .media-playlist-number {display:grid;place-items:center;flex:0 0 25px;font-size:var(--text-meta);font-variant-numeric:tabular-nums;color:var(--muted)} .media-playlist-select>span:last-child {min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} -.media-playlist-select small {display:block;font-size:11px;color:var(--muted);margin-top:4px} +.media-playlist-select small {display:block;font-size:var(--text-meta);color:var(--muted);margin-top:4px} .media-screen .media-current-playlist button[aria-current=true] {color:var(--media-accent);opacity:1} .media-current-playlist button[aria-current=true] .media-playlist-number {color:var(--media-accent)} .media-screen .media-current-playlist li .media-playlist-remove,.media-screen .media-current-playlist .media-playlist-edit button {display:grid;place-items:center;flex:0 0 40px;width:40px;min-width:40px;min-height:44px;padding:10px;margin:0;color:var(--muted)} .media-current-playlist .media-playlist-edit {flex-shrink:0;gap:0} .media-lyrics-heading {text-align:center;margin:20px 0 8px} -.media-screen .media-lyrics-heading .media-playing-title {font-size:18px;margin:0 0 6px} -.media-lyrics-heading p {font-size:12px;color:var(--muted);margin:0} +.media-screen .media-lyrics-heading .media-playing-title {font-size:var(--text-title);margin:0 0 6px} +.media-lyrics-heading p {font-size:var(--text-meta);color:var(--muted);margin:0} .media-lyrics-toolbar {color:var(--muted);margin:0} .media-screen .media-lyrics-toolbar button {display:grid;place-items:center;width:40px;height:44px;padding:10px} .media-lyrics-toolbar button[aria-pressed=true] {color:var(--media-accent)} .media-playback-status[data-panel=lyrics] .media-lyrics-lines {height:clamp(260px,43vh,440px);padding:65px 8px} -.media-playback-status[data-panel=lyrics] .media-lyrics-lines button {font-size:14px;font-weight:400;line-height:2.2;color:var(--muted);opacity:1;padding:10px 4px} -.media-playback-status[data-panel=lyrics] .media-lyrics-lines button[aria-current=true] {font-size:18px;font-weight:500;color:var(--text)} -.media-playback-status[data-panel=lyrics] .media-lyrics-lines button[data-secondary=true] {font-size:13px;line-height:1.8;padding-top:0;color:var(--muted);font-weight:400} -.media-audio-heading>strong {flex:1;font-size:14px;text-align:left} +.media-playback-status[data-panel=lyrics] .media-lyrics-lines button {font-size:var(--text-ui);font-weight:400;line-height:2.2;color:var(--muted);opacity:1;padding:10px 4px} +.media-playback-status[data-panel=lyrics] .media-lyrics-lines button[aria-current=true] {font-size:var(--text-title);font-weight:500;color:var(--text)} +.media-playback-status[data-panel=lyrics] .media-lyrics-lines button[data-secondary=true] {font-size:var(--text-label);line-height:1.8;padding-top:0;color:var(--muted);font-weight:400} +.media-audio-heading>strong {flex:1;font-size:var(--text-ui);text-align:left} .media-playback-favorite {position:static} .media-playback-favorite .media-lyrics-toggle {border:0;background:transparent} -.media-favorite-error {position:absolute;left:14px;right:14px;z-index:8;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-paper);font-size:12px;color:var(--media-error-ink);line-height:1.7;box-shadow:0 4px 16px #0002} +.media-favorite-error {position:absolute;left:14px;right:14px;z-index:8;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-paper);font-size:var(--text-meta);color:var(--media-error-ink);line-height:1.7;box-shadow:0 4px 16px #0002} .media-playback-status .media-favorite-error p {margin-bottom:8px} -.media-lyrics-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:clamp(260px,43vh,440px);text-align:center;color:var(--muted);font-size:13px;line-height:1.7;overflow-wrap:anywhere} -.media-lyrics-empty h3 {margin:0;font-size:16px;font-weight:500;color:var(--text)} +.media-lyrics-empty {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:clamp(260px,43vh,440px);text-align:center;color:var(--muted);font-size:var(--text-label);line-height:1.7;overflow-wrap:anywhere} +.media-lyrics-empty h3 {margin:0;font-size:var(--text-title);font-weight:500;color:var(--text)} .media-lyrics-loading i {display:block;width:65%;height:12px;background:var(--border);border-radius:var(--radius-xs);opacity:.5} .media-lyrics-loading i:nth-last-child(2) {width:80%} -.media-audio-sheet .sheet-body {font-size:14px;line-height:1.6} -.media-audio-sheet .media-volume,.media-audio-speed>label {display:flex;align-items:center;gap:12px;font-size:13px;min-height:48px} +.media-audio-sheet .sheet-body {font-size:var(--text-ui);line-height:1.6} +.media-audio-sheet .media-volume,.media-audio-speed>label {display:flex;align-items:center;gap:12px;font-size:var(--text-label);min-height:48px} .media-audio-sheet input[type=range] {flex:1;min-width:0;width:100%;accent-color:var(--media-accent);padding:0;border:0;background:transparent} .media-audio-speed select {flex:1;min-width:0} .media-audio-shortcuts {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0} .media-audio-shortcuts button,.media-audio-sheet .media-end-playback {display:flex;gap:8px;align-items:center;justify-content:center} .media-audio-sheet .sheet-body>[aria-label="保存播放列表"] {margin:12px 0} .media-audio-sheet .sheet-body>[aria-label="保存播放列表"] button {margin:4px 6px 4px 0} -.media-audio-sheet p {font-size:12px;line-height:1.7;overflow-wrap:anywhere} +.media-audio-sheet p {font-size:var(--text-meta);line-height:1.7;overflow-wrap:anywhere} .media-audio-sheet .media-audio-support {color:var(--muted);margin:12px 0} .media-audio-versions {display:grid;gap:8px} .media-audio-versions button {display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left} .media-audio-versions strong {min-width:0;font-weight:500;overflow-wrap:anywhere} -.media-audio-versions small {flex-shrink:0;font-size:12px;color:var(--muted)} +.media-audio-versions small {flex-shrink:0;font-size:var(--text-meta);color:var(--muted)} .media-audio-versions button[aria-current=true] {border-color:var(--media-accent);background:var(--media-selection);opacity:1} @media(max-width:700px){ .media-screen .media-heading:has(.media-mobile-title) {display:grid;grid-template-columns:1fr auto;gap:0;border:0} @@ -284,17 +284,17 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-heading:has(.media-mobile-title) .media-tabs {grid-row:2;grid-column:1/-1;border-bottom:1px solid var(--border);margin-bottom:0} } -.media-mobile-title {gap:3px;font-size:17px;min-width:0} +.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:14px} +.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:hover,.media-channel-switcher a[aria-current=page] {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:12px;color:var(--muted);font-weight:400;margin-left:8px;white-space:nowrap} +.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} @@ -310,10 +310,10 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } /* Empty libraries offer one meaningful action, without empty filters. */ .media-library-empty {display:flex;flex-direction:column;align-items:center;text-align:center;max-width:390px;margin:clamp(48px,10vh,100px) auto 32px;padding:0 20px} .media-empty-emblem {display:grid;place-items:center;width:68px;height:68px;border-radius:var(--radius-xl);background:var(--media-selection);color:var(--media-accent);margin-bottom:22px} -.media-screen .media-library-empty h2 {font-size:20px;line-height:1.4;font-weight:600;margin:0 0 10px} -.media-library-empty p {font-size:13px;line-height:1.85;color:var(--muted);margin:0;max-width:300px} +.media-screen .media-library-empty h2 {font-size:var(--text-display);line-height:1.4;font-weight:600;margin:0 0 10px} +.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:11px;color:var(--muted);line-height:1.8} +.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} @@ -323,36 +323,36 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .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:12px;font-weight:500;color:var(--muted);margin:0 0 3px} +.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:12px;color:var(--muted);text-align:right} +.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:14px} +.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:18px}.media-setting-row {font-size:13px}.media-setting-row>small {font-size:11px;max-width:46%}} +@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-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:12px} +.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-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} -.media-library-row strong {display:block;font-size:14px;font-weight:500} -.media-library-row small {display:block;font-size:11px;color:var(--muted)} -.media-library-kind {display:inline-block;vertical-align:middle;font-style:normal;font-size:10px;font-weight:400;color:var(--muted);background:var(--surface);border-radius:var(--radius-xs);padding:2px 6px;margin-left:4px} +.media-library-row strong {display:block;font-size:var(--text-ui);font-weight:500} +.media-library-row small {display:block;font-size:var(--text-meta);color:var(--muted)} +.media-library-kind {display:inline-block;vertical-align:middle;font-style:normal;font-size:var(--text-micro);font-weight:400;color:var(--muted);background:var(--surface);border-radius:var(--radius-xs);padding:2px 6px;margin-left:4px} .media-library-row .media-library-directory {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:5px 0 3px;line-height:1.6} -.media-library-find {display:flex;align-items:end;gap:12px;margin:14px 0;color:var(--muted);font-size:12px} +.media-library-find {display:flex;align-items:end;gap:12px;margin:14px 0;color:var(--muted);font-size:var(--text-meta)} .media-library-find label {display:grid;gap:6px;flex:1;min-width:0} .media-library-find input {width:100%;margin:0} .media-library-find>small {white-space:nowrap;padding-bottom:10px} @@ -362,19 +362,19 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-library-actions>nav {position:absolute;z-index:10;right:0;top:42px;display:grid;min-width:150px;padding:6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-paper);box-shadow:0 5px 18px #0002} .media-manager .media-library-actions button {text-align:left;background:transparent;border-radius:var(--radius-xs);padding:10px 12px} .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:12px;line-height:1.8;margin:20px 0} +.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:13px} -.media-connection-row small {display:block;color:var(--muted);font-size:11px;margin-top:3px} +.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:12px;flex:1;min-width:140px} +.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%} .media-scan-job {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;border-bottom:1px solid var(--border);padding:14px 0} .media-scan-job.is-running {border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin:12px 0} .media-task-copy {min-width:0;overflow-wrap:anywhere} -.media-task-copy strong {display:block;font-size:14px;font-weight:550;line-height:1.5} -.media-task-copy small {display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-top:4px} -.media-task-state {font-size:11px;padding:4px 8px;border-radius:var(--radius-xs);background:var(--media-selection);color:var(--media-accent);white-space:nowrap} +.media-task-copy strong {display:block;font-size:var(--text-ui);font-weight:550;line-height:1.5} +.media-task-copy small {display:block;color:var(--muted);font-size:var(--text-meta);line-height:1.6;margin-top:4px} +.media-task-state {font-size:var(--text-meta);padding:4px 8px;border-radius:var(--radius-xs);background:var(--media-selection);color:var(--media-accent);white-space:nowrap} .media-task-state:is([data-state=failed],[data-state=review]) {color:var(--media-error-ink);background:var(--media-error-background)} .media-task-state:is([data-state=cancelled],[data-state=interrupted]) {background:var(--surface);color:var(--muted)} .media-task-state[data-state=queued] {background:var(--surface);color:var(--muted)} @@ -385,72 +385,72 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-task-progress:indeterminate::-webkit-progress-bar {background:transparent} @keyframes media-scan-progress {to{background-position:-200% 0}} @media(prefers-reduced-motion:reduce){.media-task-progress:indeterminate{animation:none}} -.media-task-note {grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.7;margin:2px 0 0;overflow-wrap:anywhere} +.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:14px;margin:18px 0 10px;color:var(--muted);font-weight:500} +.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} .media-scrape-job>summary::-webkit-details-marker {display:none} .media-scrape-job[open] .media-task-chevron {transform:rotate(180deg)} -.media-scrape-job>p {font-size:12px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere} +.media-scrape-job>p {font-size:var(--text-meta);line-height:1.7;color:var(--muted);overflow-wrap:anywhere} .media-job-results {padding:6px 12px 10px;background:color-mix(in srgb,var(--surface) 96%,var(--text));border-radius:var(--radius-sm);margin:12px 0} -.media-job-results .media-task-result {margin:0;font-size:13px;padding:10px 0;gap:8px} +.media-job-results .media-task-result {margin:0;font-size:var(--text-label);padding:10px 0;gap:8px} .media-task-result small {opacity:1;color:var(--muted);margin-top:4px;line-height:1.6} .media-scrape-manager>.media-task-create {margin-top:16px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px} -.media-task-create>summary {padding:12px 0;font-size:13px} -.media-task-create>p {font-size:12px;line-height:1.7;color:var(--muted)} +.media-task-create>summary {padding:12px 0;font-size:var(--text-label)} +.media-task-create>p {font-size:var(--text-meta);line-height:1.7;color:var(--muted)} .media-task-create>button:last-child {margin:0 0 12px} -.media-saved-queue-toolbar {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted)} +.media-saved-queue-toolbar {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--text-meta);color:var(--muted)} .media-saved-queue-toolbar>div {display:flex;gap:2px} .media-saved-queue-toolbar button[aria-pressed=true] {color:var(--media-accent);background:var(--media-selection)} -.media-saved-queue-note {font-size:12px;color:var(--muted);line-height:1.6;margin:4px 0 12px} +.media-saved-queue-note {font-size:var(--text-meta);color:var(--muted);line-height:1.6;margin:4px 0 12px} .media-saved-queue-search {width:100%;box-sizing:border-box;margin:6px 0} .media-saved-queue-list {padding:0;margin:0;list-style:none} .media-saved-queue-row {display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--border);padding:7px 0} -.media-saved-queue-number {width:22px;flex:0 0 22px;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} +.media-saved-queue-number {width:22px;flex:0 0 22px;text-align:center;font-size:var(--text-meta);color:var(--muted);font-variant-numeric:tabular-nums} .media-screen .media-saved-queue-title {flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:6px 0;line-height:1.5} -.media-saved-queue-title strong {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;font-size:14px;overflow-wrap:anywhere} -.media-saved-queue-title small {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px;color:var(--muted);margin-top:3px} -.media-saved-queue-duration {font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} +.media-saved-queue-title strong {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;font-size:var(--text-ui);overflow-wrap:anywhere} +.media-saved-queue-title small {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:var(--text-meta);color:var(--muted);margin-top:3px} +.media-saved-queue-duration {font-size:var(--text-meta);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .media-screen .media-saved-queue-detail,.media-saved-queue-row .media-queue-actions button {display:flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;padding:8px;border:0;background:transparent} .media-saved-queue-row .media-queue-actions {display:flex;flex:0 0 auto;gap:0} @media(max-width:400px){.media-saved-queue-list.is-editing .media-saved-queue-number{display:none}.media-saved-queue-row{gap:6px}} .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:17px;margin:0;line-height:1.4} +.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-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:13px;white-space:nowrap} +.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:15px;margin:22px 0 6px;font-weight:500} +.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:11px;font-weight:400;color:var(--muted)} -.media-search-result .media-cover {width:44px;min-width:44px;height:66px;flex-shrink:0;padding:4px;border-radius:var(--radius-xs);box-sizing:border-box;box-shadow:none;font-size:10px;line-height:1.4} +.media-search-group h2>small {font-size:var(--text-meta);font-weight:400;color:var(--muted)} +.media-search-result .media-cover {width:44px;min-width:44px;height:66px;flex-shrink:0;padding:4px;border-radius:var(--radius-xs);box-sizing:border-box;box-shadow:none;font-size:var(--text-micro);line-height:1.4} .media-search-result .media-cover.square {height:44px} -.media-search-result .media-cover-title {font-size:10px;letter-spacing:0} +.media-search-result .media-cover-title {font-size:var(--text-micro);letter-spacing:0} .media-search-copy {flex:1;min-width:0} -.media-search-copy strong {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;font-weight:500;overflow-wrap:anywhere} -.media-search-copy small {display:block;font-size:11px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere;line-height:1.5} +.media-search-copy strong {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-label);font-weight:500;overflow-wrap:anywhere} +.media-search-copy small {display:block;font-size:var(--text-meta);color:var(--muted);margin-top:4px;overflow-wrap:anywhere;line-height:1.5} .media-search-result>svg {flex-shrink:0;color:var(--muted)} .media-search-empty {display:flex;flex-direction:column;align-items:center;gap:12px;max-width:340px;margin:64px auto;text-align:center;color:var(--muted);padding:0 15px} -.media-screen .media-search-empty h2 {font-size:18px;margin:0;color:var(--text)} -.media-search-empty p {font-size:13px;line-height:1.8;margin:0} -@media(max-width:700px){.media-screen .media-search-scopes button {font-size:12px;padding:7px 12px}.media-search-result {gap:9px}.media-search-copy strong {font-size:12px}} +.media-screen .media-search-empty h2 {font-size:var(--text-title);margin:0;color:var(--text)} +.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:12px;color:var(--muted);margin:18px 0} +.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:13px;line-height:1.8;margin:0} -.media-screen .media-history-date {font-size:14px;font-weight:500;margin:24px 0 8px} +.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} .media-screen .media-history-row {margin:0;padding:9px 0;min-height:62px;gap:12px} -.media-history-row .media-personal-title {font-size:13px;font-weight:500;line-height:1.5} -.media-history-row>button:first-child small {font-size:11px;color:var(--muted);opacity:1;margin-top:4px} +.media-history-row .media-personal-title {font-size:var(--text-label);font-weight:500;line-height:1.5} +.media-history-row>button:first-child small {font-size:var(--text-meta);color:var(--muted);opacity:1;margin-top:4px} .media-history-row>button:first-child .media-history-unavailable {color:var(--media-error-ink)} .media-screen .media-row>.media-history-play {display:grid;place-items:center;width:44px;min-width:44px;min-height:44px;padding:10px;background:transparent;color:var(--media-accent)} /* An unplayable row must not wear the accent: the disabled button reads as idle, not as "tap me". */ @@ -460,65 +460,65 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-screen .media-folder-row {margin:0;padding:0} .media-screen .media-folder-row>button {display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;min-height:68px;background:transparent;border:0;border-radius:0} .media-folder-row>button>span {flex:1;min-width:0;overflow-wrap:anywhere} -.media-folder-row strong {font-size:13px;font-weight:500} -.media-folder-row small {font-size:11px;color:var(--muted);opacity:1;margin-top:4px} +.media-folder-row strong {font-size:var(--text-label);font-weight:500} +.media-folder-row small {font-size:var(--text-meta);color:var(--muted);opacity:1;margin-top:4px} .media-folder-row svg {flex-shrink:0;color:var(--muted)} -.media-screen .media-folder-back {display:flex;align-items:center;gap:4px;font-size:12px;padding:6px 0} -.media-folder-note {font-size:12px;line-height:1.8;color:var(--muted);background:var(--surface);padding:12px 14px;border-radius:var(--radius-sm);margin:20px 0} -.media-folder-path {font-size:12px;color:var(--muted)} -.media-screen .media-folder-path button {padding:6px 0;min-height:36px;font-size:12px} +.media-screen .media-folder-back {display:flex;align-items:center;gap:4px;font-size:var(--text-meta);padding:6px 0} +.media-folder-note {font-size:var(--text-meta);line-height:1.8;color:var(--muted);background:var(--surface);padding:12px 14px;border-radius:var(--radius-sm);margin:20px 0} +.media-folder-path {font-size:var(--text-meta);color:var(--muted)} +.media-screen .media-folder-path button {padding:6px 0;min-height:36px;font-size:var(--text-meta)} .media-folder-path {display:flex;align-items:center;flex-wrap:wrap;gap:0 5px} .media-folder-path button {max-width:100%;text-align:left;overflow-wrap:anywhere} .media-folder-file-heading {display:flex;align-items:center;gap:14px;margin:20px 0 28px} .media-folder-file-heading svg {flex-shrink:0;color:var(--media-accent)} .media-folder-file-heading>div {min-width:0} -.media-screen .media-folder-file-heading h2 {font-size:18px;line-height:1.6;margin:0;overflow-wrap:anywhere} -.media-folder-file-heading small {display:block;font-size:11px;color:var(--muted);margin-top:5px} +.media-screen .media-folder-file-heading h2 {font-size:var(--text-title);line-height:1.6;margin:0;overflow-wrap:anywhere} +.media-folder-file-heading small {display:block;font-size:var(--text-meta);color:var(--muted);margin-top:5px} .media-folder-file-layout {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:36px} .media-folder-file-layout>div,.media-folder-file-resources {min-width:0} .media-folder-work {margin-bottom:28px} .media-folder-work-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0} -.media-folder-work-heading h3 {font-size:16px;font-weight:500;overflow-wrap:anywhere;margin:0;min-width:0} -.media-screen .media-folder-work-heading>button {display:flex;align-items:center;gap:3px;padding:6px 0;white-space:nowrap;font-size:12px;color:var(--media-accent);flex-shrink:0} -.media-folder-work .media-edition-picker {font-size:12px;margin:12px 0;flex-wrap:wrap} +.media-folder-work-heading h3 {font-size:var(--text-title);font-weight:500;overflow-wrap:anywhere;margin:0;min-width:0} +.media-screen .media-folder-work-heading>button {display:flex;align-items:center;gap:3px;padding:6px 0;white-space:nowrap;font-size:var(--text-meta);color:var(--media-accent);flex-shrink:0} +.media-folder-work .media-edition-picker {font-size:var(--text-meta);margin:12px 0;flex-wrap:wrap} .media-folder-work .media-edition-picker select {flex:1;max-width:100%} -.media-folder-file-resources>h2 {font-size:16px;margin:14px 0} -.media-folder-file-resources .media-resource-info {overflow-wrap:anywhere;font-size:12px} +.media-folder-file-resources>h2 {font-size:var(--text-title);margin:14px 0} +.media-folder-file-resources .media-resource-info {overflow-wrap:anywhere;font-size:var(--text-meta)} .media-folder-unlinked {padding:30px 12px;text-align:center;color:var(--muted)} -.media-folder-unlinked h3 {color:var(--text);font-size:16px} -.media-folder-unlinked p {font-size:12px;line-height:1.8} -@media(max-width:700px){.media-folder-file-layout {grid-template-columns:minmax(0,1fr);gap:12px}.media-folder-file-heading {margin:16px 0 22px}.media-screen .media-folder-file-heading h2 {font-size:16px}} +.media-folder-unlinked h3 {color:var(--text);font-size:var(--text-title)} +.media-folder-unlinked p {font-size:var(--text-meta);line-height:1.8} +@media(max-width:700px){.media-folder-file-layout {grid-template-columns:minmax(0,1fr);gap:12px}.media-folder-file-heading {margin:16px 0 22px}.media-screen .media-folder-file-heading h2 {font-size:var(--text-title)}} -.media-screen .media-page-heading h2 {font-size:17px;margin:0;line-height:1.4} +.media-screen .media-page-heading h2 {font-size:var(--text-title);margin:0;line-height:1.4} .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:11px} -.media-detail-page .media-detail-credit,.media-detail-page .media-detail-year {color:var(--muted);font-size:12px} +.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-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:11px;max-width:100%;overflow-wrap:anywhere} +.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} -.media-screen .media-missing-edition h2 {font-size:18px;color:var(--text);margin:0} -.media-missing-edition p {max-width:420px;margin:0;font-size:13px;line-height:1.8} +.media-screen .media-missing-edition h2 {font-size:var(--text-title);color:var(--text);margin:0} +.media-missing-edition p {max-width:420px;margin:0;font-size:var(--text-label);line-height:1.8} .media-missing-edition>div {display:flex;justify-content:center;flex-wrap:wrap;gap:8px} -.media-missing-edition>small {max-width:100%;font-size:11px;line-height:1.8} +.media-missing-edition>small {max-width:100%;font-size:var(--text-meta);line-height:1.8} .media-detail-actions,.media-album-actions {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0} .media-detail-actions:empty {display:none} .media-detail-actions>button,.media-album-actions>button {display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;white-space:nowrap} .media-screen .media-detail-favorite {background:var(--surface);color:var(--text)} .media-detail-favorite[aria-pressed=true] {color:var(--media-accent)} -.media-edition-picker {display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--muted)} +.media-edition-picker {display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--text-meta);color:var(--muted)} .media-edition-picker select {max-width:240px;min-width:0} .media-detail-description {margin:24px 0} -.media-detail-description p {font-size:14px;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:15px;margin-bottom:10px} +.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-edition-content {min-width:0} -.media-edition-content>h2 {overflow-wrap:anywhere;margin:14px 0 8px;font-size:15px} -.media-edition-content>.media-toolbar {font-size:12px;color:var(--muted);margin:8px 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} .media-edition-content>.media-row {margin:0;padding:8px 0;min-height:54px} -.media-edition-content>.media-row>span {font-size:13px;line-height:1.6} -.media-edition-content>.media-row small {font-size:11px;color:var(--muted);opacity:1;font-variant-numeric:tabular-nums} -.media-edition-content>.media-row>button {font-size:12px;color:var(--media-accent);background:transparent;min-width:56px;white-space:nowrap} -.media-edition-content>.media-row>.media-part-number {flex:0 0 26px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums} +.media-edition-content>.media-row>span {font-size:var(--text-label);line-height:1.6} +.media-edition-content>.media-row small {font-size:var(--text-meta);color:var(--muted);opacity:1;font-variant-numeric:tabular-nums} +.media-edition-content>.media-row>button {font-size:var(--text-meta);color:var(--media-accent);background:transparent;min-width:56px;white-space:nowrap} +.media-edition-content>.media-row>.media-part-number {flex:0 0 26px;color:var(--muted);font-size:var(--text-meta);font-variant-numeric:tabular-nums} .media-edition-content>.media-row>.media-part-copy {flex:1;min-width:0} .media-edition-content>.media-row>button {display:grid;place-items:center;min-width:44px;min-height:44px} .media-visually-hidden {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} @@ -532,26 +532,26 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-screen .media-person-tile {padding:0;border:0;background:transparent;text-align:left;min-width:0;display:block} .media-screen .media-person-tile:hover {background:transparent} .media-person-tile strong,.media-person-tile small {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} -.media-person-tile strong {font-weight:500;font-size:13px;margin-top:8px} -.media-person-tile small {color:var(--muted);font-size:11px;margin-top:3px} -.media-person-toolbar {color:var(--muted);font-size:12px;margin:15px 0 12px} +.media-person-tile strong {font-weight:500;font-size:var(--text-label);margin-top:8px} +.media-person-tile small {color:var(--muted);font-size:var(--text-meta);margin-top:3px} +.media-person-toolbar {color:var(--muted);font-size:var(--text-meta);margin:15px 0 12px} .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:12px;max-width:180px} +.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:12px;color:var(--muted)} +.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:12px} +.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)} .media-narrators .media-person-hero {align-items:flex-start;margin:24px 0 28px;gap:26px} .media-person-hero .media-detail-heading {padding-top:5px;gap:9px} -.media-person-count {display:inline-block;align-self:flex-start;width:max-content;max-width:100%;padding:3px 7px;border-radius:var(--radius-xs);background:var(--surface);font-size:11px;color:var(--muted)} -.media-screen .media-person-works-heading {margin:24px 0 12px;font-size:16px} +.media-person-count {display:inline-block;align-self:flex-start;width:max-content;max-width:100%;padding:3px 7px;border-radius:var(--radius-xs);background:var(--surface);font-size:var(--text-meta);color:var(--muted)} +.media-screen .media-person-works-heading {margin:24px 0 12px;font-size:var(--text-title)} .media-person-copy {min-width:0;flex:1;padding-top:5px} .media-person-copy .media-detail-heading {padding:0} -.media-person-bio {font-size:12px;line-height:1.9;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere;max-width:720px;margin:10px 0} +.media-person-bio {font-size:var(--text-meta);line-height:1.9;color:var(--muted);white-space:pre-line;overflow-wrap:anywhere;max-width:720px;margin:10px 0} .media-person-copy>.media-person-count {margin-top:10px} .media-person-detail {position:relative} .media-person-detail .media-person-copy {padding-right:48px} @@ -579,109 +579,109 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .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:20px}.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:21px}.media-person-copy {padding:0}} +@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} .media-edition-tools>.media-edition-admin {background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:14px 0;margin:0} .media-edition-tools>.media-edition-resources {border-bottom:1px solid var(--border);padding:14px 0} -.media-edition-tools>details>summary {cursor:pointer;font-size:13px;font-weight:500} +.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:13px;padding:12px 0;cursor:pointer} +.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} .media-series-seasons>.media-toolbar h2 {margin:0} -.media-series-seasons>.media-toolbar select {max-width:65%;font-size:12px} -.media-series-seasons .media-season-playback>.media-toolbar {font-size:12px;color:var(--muted)} -.media-season-playback .media-primary {display:flex;align-items:center;gap:6px;font-size:12px} +.media-series-seasons>.media-toolbar select {max-width:65%;font-size:var(--text-meta)} +.media-series-seasons .media-season-playback>.media-toolbar {font-size:var(--text-meta);color:var(--muted)} +.media-season-playback .media-primary {display:flex;align-items:center;gap:6px;font-size:var(--text-meta)} .media-episode-grid {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;margin:18px 0} -.media-screen .media-episode-grid button {border:1px solid var(--border);min-height:44px;font-size:13px;font-variant-numeric:tabular-nums} +.media-screen .media-episode-grid button {border:1px solid var(--border);min-height:44px;font-size:var(--text-label);font-variant-numeric:tabular-nums} .media-screen .media-episode-grid button[aria-pressed=true] {background:var(--media-selection);border-color:var(--media-accent);color:var(--media-accent)} -.media-episode-selection {display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)} +.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:12px} -.media-screen .media-episode-selection button,.media-screen .media-season-detail-link {font-size:12px;color:var(--media-accent)} -.media-series-playback {font-size:13px;margin:22px 0} +.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-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%}} @media(min-width:900px){.media-edition-detail {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:36px}.media-edition-detail>.media-edition-tools {padding-top:14px}.media-detail-page .media-album-playback {max-width:800px}} -@media(max-width:700px){.media-detail-page .media-hero {gap:16px;margin-top:17px}.media-detail-page .media-hero .media-cover {width:105px;min-width:105px}.media-detail-page .media-detail-heading {padding:0;gap:6px}.media-detail-page .media-detail-heading h1 {font-size:21px}.media-detail-actions,.media-album-actions {gap:7px}.media-detail-actions>button,.media-album-actions>button {font-size:12px;padding:9px 11px}.media-edition-picker {max-width:100%}.media-edition-picker select {max-width:190px}.media-detail-description p {font-size:13px}.media-edition-tools {margin-top:18px}} +@media(max-width:700px){.media-detail-page .media-hero {gap:16px;margin-top:17px}.media-detail-page .media-hero .media-cover {width:105px;min-width:105px}.media-detail-page .media-detail-heading {padding:0;gap:6px}.media-detail-page .media-detail-heading h1 {font-size:var(--text-display)}.media-detail-actions,.media-album-actions {gap:7px}.media-detail-actions>button,.media-album-actions>button {font-size:var(--text-meta);padding:9px 11px}.media-edition-picker {max-width:100%}.media-edition-picker select {max-width:190px}.media-detail-description p {font-size:var(--text-label)}.media-edition-tools {margin-top:18px}} .media-detail-main,.media-detail-sidebar {min-width:0} .media-metadata-host[hidden] {display:none} -.media-metadata-page {margin:24px 0 0;font-size:13px;line-height:1.75} +.media-metadata-page {margin:24px 0 0;font-size:var(--text-label);line-height:1.75} .media-metadata-page p {overflow-wrap:anywhere} .media-metadata-page .media-form {max-width:none;margin:0;gap:12px} -.media-metadata-page h2 {margin:0 0 6px;font-size:22px} -.media-metadata-page .media-metadata-editor>p {color:var(--muted);font-size:12px;margin:0 0 10px} +.media-metadata-page h2 {margin:0 0 6px;font-size:var(--text-display)} +.media-metadata-page .media-metadata-editor>p {color:var(--muted);font-size:var(--text-meta);margin:0 0 10px} .media-metadata-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .media-metadata-field {min-width:0;order:3} .media-metadata-field.media-metadata-wide {grid-column:1/-1} .media-metadata-field.media-metadata-title {order:0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm)} .media-metadata-field:has([aria-label="年份"]) {order:1} .media-metadata-field:has(textarea) {order:4} -.media-metadata-field label {font-size:12px} +.media-metadata-field label {font-size:var(--text-meta)} .media-metadata-field-label {display:flex;align-items:center;justify-content:space-between;gap:8px} -.media-metadata-priority {font-size:10px;padding:2px 6px;border-radius:var(--radius-xs);background:var(--media-selection);color:var(--media-accent)} -.media-metadata-kind {display:flex;flex-direction:column;gap:7px;order:2;min-width:0;font-size:12px} +.media-metadata-priority {font-size:var(--text-micro);padding:2px 6px;border-radius:var(--radius-xs);background:var(--media-selection);color:var(--media-accent)} +.media-metadata-kind {display:flex;flex-direction:column;gap:7px;order:2;min-width:0;font-size:var(--text-meta)} .media-metadata-kind strong {border:1px solid var(--border);border-radius:var(--radius-sm);min-height:40px;padding:9px 12px;background:var(--surface);font-weight:400} -.media-metadata-field small,.media-metadata-kind small {display:block;font-size:11px;color:var(--muted);line-height:1.8;margin-top:4px} +.media-metadata-field small,.media-metadata-kind small {display:block;font-size:var(--text-meta);color:var(--muted);line-height:1.8;margin-top:4px} .media-metadata-field-source {display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;margin-top:5px} .media-metadata-field-source small {margin-top:0} -.media-metadata-original {font-size:11px;color:var(--muted);margin:2px 0;overflow-wrap:anywhere;max-height:5.4em;overflow:auto} -.media-screen .media-metadata-field-source>button {font-size:11px;min-height:34px;color:var(--media-accent);padding:6px 0;margin-left:auto} +.media-metadata-original {font-size:var(--text-meta);color:var(--muted);margin:2px 0;overflow-wrap:anywhere;max-height:5.4em;overflow:auto} +.media-screen .media-metadata-field-source>button {font-size:var(--text-meta);min-height:34px;color:var(--media-accent);padding:6px 0;margin-left:auto} .media-metadata-footer {display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:8px;border-top:1px solid var(--border);margin-top:6px;padding-top:16px} -.media-metadata-footer button {font-size:13px} +.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:12px!important;color:var(--media-accent)!important} +.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:12px;color:var(--muted)} +.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:12px;color:var(--media-accent);padding:6px 0} -.media-match-intro>p {font-size:11px;color:var(--media-accent);margin:0 0 6px} -.media-match-intro h1 {font-size:22px;line-height:1.5;margin:0 0 12px;overflow-wrap:anywhere} -.media-metadata-matcher[data-layout=page]>p {font-size:12px;color:var(--muted)} +.media-screen .media-metadata-entries button {font-size:var(--text-meta);color:var(--media-accent);padding:6px 0} +.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)} .media-metadata-page .media-match-search {margin:20px 0;grid-template-columns:minmax(110px,.6fr) minmax(0,1.4fr);align-items:end} -.media-match-search label {min-width:0;font-size:12px} +.media-match-search label {min-width:0;font-size:var(--text-meta)} .media-metadata-page .media-match-search input,.media-metadata-page .media-match-search select {width:100%;min-width:0;max-width:100%} .media-metadata-page .media-match-search label:first-child {display:flex;align-items:center;gap:12px;grid-column:1/-1} .media-metadata-page .media-match-search label:first-child select {width:auto;flex:1;max-width:280px} .media-match-search label:has([aria-label="刮削搜索词"]) {grid-column:1/-1} .media-match-search label:has([aria-label="刮削艺人限定"]) {grid-column:1/-1} -.media-match-search>button {justify-self:start;font-size:12px} -.media-auto-match {grid-column:1/-1;font-size:12px;color:var(--muted)} +.media-match-search>button {justify-self:start;font-size:var(--text-meta)} +.media-auto-match {grid-column:1/-1;font-size:var(--text-meta);color:var(--muted)} .media-auto-match summary {cursor:pointer;min-height:36px;padding:8px 0} -.media-auto-match small {display:block;font-size:11px;line-height:1.8;margin-top:6px} -.media-metadata-page .media-metadata-matcher>h2 {font-size:16px;margin:24px 0 8px} +.media-auto-match small {display:block;font-size:var(--text-meta);line-height:1.8;margin-top:6px} +.media-metadata-page .media-metadata-matcher>h2 {font-size:var(--text-title);margin:24px 0 8px} .media-screen .media-match-candidate {gap:12px;align-items:center;margin:0;padding:14px 0} .media-match-placeholder {width:46px;min-width:46px;height:64px;display:grid;place-items:center;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs)} -.media-match-candidate strong {font-size:13px;font-weight:500} -.media-match-candidate small {font-size:11px;line-height:1.7;opacity:1;color:var(--muted)} +.media-match-candidate strong {font-size:var(--text-label);font-weight:500} +.media-match-candidate small {font-size:var(--text-meta);line-height:1.7;opacity:1;color:var(--muted)} .media-match-copy {flex:1;min-width:0;overflow-wrap:anywhere} .media-match-copy .media-match-excerpt {display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .media-match-copy:has(.media-match-description[open]) .media-match-excerpt {display:none} -.media-match-description {font-size:11px;margin-top:6px;color:var(--muted)} +.media-match-description {font-size:var(--text-meta);margin-top:6px;color:var(--muted)} .media-match-description summary {cursor:pointer;color:var(--media-accent);padding:6px 0;min-height:30px} .media-match-description p {max-height:240px;overflow:auto;white-space:pre-wrap;line-height:1.8;margin:0} .media-match-unavailable {display:grid;justify-items:start;gap:8px;padding:18px;background:var(--surface);border-radius:var(--radius-sm);margin:20px 0;color:var(--muted)} -.media-match-unavailable strong {font-size:14px;color:var(--text)} -.media-match-unavailable p {font-size:12px;margin:0} -.media-screen .media-match-unavailable button {padding:6px 0;font-size:12px;color:var(--media-accent)} -.media-screen .media-match-candidate>button {font-size:12px;white-space:nowrap;background:var(--surface);border:1px solid var(--border)} +.media-match-unavailable strong {font-size:var(--text-ui);color:var(--text)} +.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:15px;font-weight:500;margin:0} -.media-match-confirm p {font-size:12px;color:var(--muted)} -.media-metadata-matcher[data-layout=page]>small {display:block;font-size:11px;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-metadata-page .media-form input,.media-metadata-page .media-form textarea {font-size:13px}.media-match-placeholder {width:40px;min-width:40px;height:58px}} +.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-metadata-page .media-form input,.media-metadata-page .media-form textarea {font-size:var(--text-label)}.media-match-placeholder {width:40px;min-width:40px;height:58px}} .media-chapter-heading {display:flex;align-items:center;justify-content:space-between;gap:12px} .media-chapter-heading h2 {margin:16px 0} -.media-screen .media-chapter-heading>button {font-size:12px;color:var(--media-accent);padding:6px 0;white-space:nowrap} +.media-screen .media-chapter-heading>button {font-size:var(--text-meta);color:var(--media-accent);padding:6px 0;white-space:nowrap} .media-chapters-context {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px 0 16px} .media-chapters-context>div {min-width:0;line-height:1.8;overflow-wrap:anywhere} -.media-chapters-context strong {font-size:14px;font-weight:500} -.media-chapters-context small {display:block;font-size:12px;color:var(--muted)} -.media-screen .media-chapters-context>button {display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;min-height:42px} -.media-screen .media-chapters-version {display:block;max-width:100%;min-width:0;font-size:12px;color:var(--muted);margin:3px 0 0;padding:3px 0;border:0;background:transparent} +.media-chapters-context strong {font-size:var(--text-ui);font-weight:500} +.media-chapters-context small {display:block;font-size:var(--text-meta);color:var(--muted)} +.media-screen .media-chapters-context>button {display:flex;align-items:center;gap:6px;font-size:var(--text-meta);white-space:nowrap;min-height:42px} +.media-screen .media-chapters-version {display:block;max-width:100%;min-width:0;font-size:var(--text-meta);color:var(--muted);margin:3px 0 0;padding:3px 0;border:0;background:transparent} .media-chapter-toolbar>div {display:flex;align-items:center;gap:4px} .media-screen .media-chapter-icon {display:grid;place-items:center;width:40px;min-height:44px;padding:10px;color:var(--muted)} .media-chapter-filter label,label.media-chapter-filter {white-space:nowrap} @@ -690,10 +690,10 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-audiobook-chapters .media-edition {border:0;margin-top:0;padding-top:0} .media-screen .media-part-copy[aria-current=true] {color:var(--media-accent)} .media-detail-actions:empty {display:none} -.media-detail-sidebar {font-size:12px;color:var(--muted)} -.media-detail-sidebar h2 {color:var(--text);font-size:16px;margin:24px 0 12px} +.media-detail-sidebar {font-size:var(--text-meta);color:var(--muted)} +.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:12px;line-height:1.8} +.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} @@ -701,39 +701,39 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-detail-sidebar .media-toolbar {flex-wrap:wrap} .media-edition-tools {display:flex;flex-direction:column} .media-edition-tools>.media-edition-admin {order:1} -.media-edition-admin {font-size:12px;line-height:1.75;overflow-wrap:anywhere} -.media-edition-admin :is(h3,h4) {font-size:13px;font-weight:550;margin:12px 0 8px} +.media-edition-admin {font-size:var(--text-meta);line-height:1.75;overflow-wrap:anywhere} +.media-edition-admin :is(h3,h4) {font-size:var(--text-label);font-weight:550;margin:12px 0 8px} .media-edition-admin :is(input:not([type=checkbox]),select),.media-parent-editor :is(input,select) {width:100%;min-width:0;max-width:100%;box-sizing:border-box} .media-edition-admin label:not(.media-row):has(input:not([type=checkbox])),.media-parent-editor label {display:grid;gap:6px;margin:10px 0} .media-edition-admin form>label {min-width:0;flex:1 1 100%} .media-edition-admin .media-row {gap:8px;margin:0;padding:10px 0;align-items:center} -.media-edition-admin .media-row>button {flex-shrink:0;font-size:12px;padding:8px} +.media-edition-admin .media-row>button {flex-shrink:0;font-size:var(--text-meta);padding:8px} .media-order-actions {display:flex;flex-shrink:0;gap:2px} .media-edition-order>label {display:flex;align-items:center;gap:8px;margin:12px 0} .media-edition-order>label input {margin:0;flex-shrink:0;min-height:0} .media-screen .media-order-actions button {display:grid;place-items:center;width:36px;min-height:44px;padding:8px} .media-edition-admin section[aria-label^="确认"],.media-parent-preview {background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin:12px 0;overflow-wrap:anywhere} -.media-edition-admin section[aria-label^="确认"]>button,.media-parent-preview>button {margin:4px 6px 0 0;font-size:12px} -.media-parent-editor {font-size:12px;line-height:1.75;overflow-wrap:anywhere} +.media-edition-admin section[aria-label^="确认"]>button,.media-parent-preview>button {margin:4px 6px 0 0;font-size:var(--text-meta)} +.media-parent-editor {font-size:var(--text-meta);line-height:1.75;overflow-wrap:anywhere} .media-parent-editor>.media-search,.media-parent-editor .media-search {flex-wrap:wrap;gap:8px} .media-parent-editor .media-search input {flex:1 1 160px} -.media-parent-editor .media-search button {flex-shrink:0;font-size:12px} -.media-parent-editor .media-row>button {flex-shrink:0;font-size:12px} +.media-parent-editor .media-search button {flex-shrink:0;font-size:var(--text-meta)} +.media-parent-editor .media-row>button {flex-shrink:0;font-size:var(--text-meta)} @media(min-width:900px){.media-detail-columns:has(.media-edition-admin[open],.media-parent-editor h2){grid-template-columns:minmax(0,1fr) minmax(320px,400px)}} -.media-resource-summary {font-size:12px;color:var(--muted);line-height:1.8;overflow-wrap:anywhere} +.media-resource-summary {font-size:var(--text-meta);color:var(--muted);line-height:1.8;overflow-wrap:anywhere} .media-album-playback .media-season-row {grid-template-columns:25px minmax(0,1fr) auto 40px;gap:12px;min-height:69px;padding:10px 0} .media-album-playback .media-season-row[data-selected=true] {background:transparent;border-radius:0} .media-album-playback .media-season-row[data-selected=true] .media-album-number,.media-album-playback .media-season-row[data-selected=true] .media-album-track-title {color:var(--media-accent)} .media-album-playback .media-album-track-link {padding:0;grid-column:2;min-height:44px} -.media-album-track-title {font-size:13px;line-height:1.5} +.media-album-track-title {font-size:var(--text-label);line-height:1.5} .media-album-track-title>small {white-space:nowrap;overflow:hidden;text-overflow:ellipsis} -.media-album-playback .media-album-duration {grid-column:3;font-size:12px} +.media-album-playback .media-album-duration {grid-column:3;font-size:var(--text-meta)} .media-screen .media-album-track-detail {grid-column:4;width:40px;min-width:40px;height:44px;padding:10px;display:grid;place-items:center;color:var(--muted)} .media-album-playback .media-season-row>select {grid-column:2/-1} .media-album-summary {margin:15px 0 8px;color:var(--muted)} .media-screen .media-edition-content>.media-row>.media-part-copy {flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;white-space:normal;padding:8px 0;min-width:0;color:var(--text)} -.media-part-copy strong {font-size:13px;font-weight:500;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} -.media-edition-content>.media-row>.media-part-duration {flex:0 0 auto;white-space:nowrap;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} +.media-part-copy strong {font-size:var(--text-label);font-weight:500;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} +.media-edition-content>.media-row>.media-part-duration {flex:0 0 auto;white-space:nowrap;font-size:var(--text-meta);color:var(--muted);font-variant-numeric:tabular-nums} @media(min-width:900px){.media-detail-columns {display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:30px;align-items:start}.media-person-detail .media-detail-columns {display:block}.media-person-detail .media-detail-sidebar {max-width:640px}.media-detail-sidebar .media-edition-tools {margin-top:0}.media-detail-main>.media-series-seasons {margin-top:18px}} /* A permanent video stage and its controls scroll as one surface. */ @@ -752,30 +752,30 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-video-toolbar,.media-video-toolbar>div {display:flex;align-items:center;gap:6px;min-width:0} .media-video-toolbar {justify-content:space-between;margin:5px 0} .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:13px} -.media-video-toolbar.media-video-tools {margin-top:8px;font-size:13px} +.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:13px} +.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} -.media-video-caption small {display:block;color:var(--muted);font-size:11px;margin-top:4px;overflow-wrap:anywhere} -.media-video-caption>button {font-size:12px} -.media-video-controls .media-video-description {margin-top:20px;font-size:12px;color:var(--muted);line-height:1.75;overflow-wrap:anywhere;white-space:pre-wrap} +.media-video-caption small {display:block;color:var(--muted);font-size:var(--text-meta);margin-top:4px;overflow-wrap:anywhere} +.media-video-caption>button {font-size:var(--text-meta)} +.media-video-controls .media-video-description {margin-top:20px;font-size:var(--text-meta);color:var(--muted);line-height:1.75;overflow-wrap:anywhere;white-space:pre-wrap} .media-playback-problem {display:grid;justify-items:center;gap:10px;text-align:center;margin:18px 0;padding:22px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);overflow-wrap:anywhere} -.media-playback-problem>strong {font-size:16px;font-weight:500;color:var(--text)} -.media-playback-problem>p {font-size:12px;line-height:1.8;margin:0;max-width:480px} +.media-playback-problem>strong {font-size:var(--text-title);font-weight:500;color:var(--text)} +.media-playback-problem>p {font-size:var(--text-meta);line-height:1.8;margin:0;max-width:480px} .media-playback-problem>div {display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:4px} -.media-playback-problem button {font-size:12px} +.media-playback-problem button {font-size:var(--text-meta)} .media-video-workspace .media-playback-problem .media-primary {background:var(--media-primary);color:var(--media-on-primary)} -.media-video-controls .media-screen-error {margin:18px 0;font-size:12px} +.media-video-controls .media-screen-error {margin:18px 0;font-size:var(--text-meta)} .media-video-controls .media-screen-error-actions {display:flex;gap:8px} -.media-video-sheet .sheet-body {font-size:14px;line-height:1.6} -.media-video-sheet p {font-size:12px;line-height:1.75;color:var(--muted);overflow-wrap:anywhere} +.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 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:13px} +.media-video-sheet .media-subtitle-controls select {flex:1;max-width:100%;width:100%;font-size:var(--text-label)} .media-video-sheet .media-subtitle-controls span {flex-basis:100%;overflow-wrap:anywhere} .media-video-track-host:has(>label:not([hidden]))+.media-video-empty-track {display:none} .media-video-episodes {display:grid;gap:0} @@ -783,9 +783,9 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-video-episodes button span {overflow-wrap:anywhere;min-width:0} .media-video-episodes button span:nth-child(2) {flex:1} .media-video-episodes button[aria-current=true] {color:var(--media-accent);opacity:1} -.media-video-episodes small {font-size:11px;color:var(--muted);margin-left:auto;flex-shrink:0} -.media-video-sheet nav {display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:12px;font-size:12px} -.media-video-search {display:grid;gap:6px;font-size:12px} +.media-video-episodes small {font-size:var(--text-meta);color:var(--muted);margin-left:auto;flex-shrink:0} +.media-video-sheet nav {display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:12px;font-size:var(--text-meta)} +.media-video-search {display:grid;gap:6px;font-size:var(--text-meta)} .media-video-search input {width:100%;min-width:0;background:var(--surface);border:1px solid var(--border)} .media-video-seek {display:flex;justify-content:space-between;margin-bottom:12px} .media-player.media-player-expanded:fullscreen {inset:0;max-width:none;margin:0;height:100%;width:100%} @@ -810,24 +810,24 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } /* 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:17px;line-height:1.4} +.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} -.media-library-fields span,.media-library-field>span,.media-library-editor>label,.media-library-create label {font-size:12px} +.media-library-fields span,.media-library-field>span,.media-library-editor>label,.media-library-create label {font-size:var(--text-meta)} .media-library-fields>label {margin:0} .media-library-fields select {width:100%;box-sizing:border-box} -.media-readonly-field {border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:var(--radius-sm);padding:10px 12px;min-height:42px;box-sizing:border-box;font-size:13px;line-height:1.6;margin:0;overflow-wrap:anywhere} +.media-readonly-field {border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:var(--radius-sm);padding:10px 12px;min-height:42px;box-sizing:border-box;font-size:var(--text-label);line-height:1.6;margin:0;overflow-wrap:anywhere} .media-library-path {font-family:ui-monospace,Consolas,monospace;white-space:pre-wrap} -.media-library-field>small {font-size:11px;color:var(--muted)} -.media-library-editor .media-manager-note,.media-library-create .media-manager-note {margin:0;font-size:12px} +.media-library-field>small {font-size:var(--text-meta);color:var(--muted)} +.media-library-editor .media-manager-note,.media-library-create .media-manager-note {margin:0;font-size:var(--text-meta)} .media-form-footer {display:flex;align-items:center;justify-content:flex-end;gap:8px;border-top:1px solid var(--border);padding-top:16px;margin:8px 0 0} .media-form-footer>button {flex:none} -.media-permissions-intro h2 {font-size:23px;margin:0 0 8px} -.media-permissions-intro p {font-size:12px;color:var(--muted);line-height:1.8;margin:0} -.media-permissions-form .media-permission-fields>label:first-child {max-width:480px;font-size:12px} -.media-permissions-form .media-permission-fields>p,.media-permissions-form small {font-size:12px;color:var(--muted)} +.media-permissions-intro h2 {font-size:var(--text-display);margin:0 0 8px} +.media-permissions-intro p {font-size:var(--text-meta);color:var(--muted);line-height:1.8;margin:0} +.media-permissions-form .media-permission-fields>label:first-child {max-width:480px;font-size:var(--text-meta)} +.media-permissions-form .media-permission-fields>p,.media-permissions-form small {font-size:var(--text-meta);color:var(--muted)} .media-permissions-form .media-user-search {display:flex;align-items:center;gap:8px;max-width:480px} .media-user-search svg {color:var(--muted);flex-shrink:0} .media-user-search input {width:100%;min-width:0;box-sizing:border-box} @@ -836,23 +836,23 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-permissions-form .media-user-option>span {min-width:0;overflow-wrap:anywhere} .media-permissions-form .media-user-option>input {flex-shrink:0} .media-permission-users {scroll-margin-top:65px} -.media-permission-pagination {font-size:12px;color:var(--muted);margin:0} +.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:10px;background:var(--media-selection);color:var(--media-accent);padding:3px 6px;border-radius:var(--radius-xs);white-space:nowrap} +.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:23px;margin:16px 0 4px;overflow-wrap:anywhere} -.media-account-panel p {font-size:13px;color:var(--muted);overflow-wrap:anywhere} -.media-account-panel dl {font-size:12px;line-height:1.8} +.media-account-panel h2 {font-size:var(--text-display);margin:16px 0 4px;overflow-wrap:anywhere} +.media-account-panel p {font-size:var(--text-label);color:var(--muted);overflow-wrap:anywhere} +.media-account-panel dl {font-size:var(--text-meta);line-height:1.8} .media-account-panel dd {margin:8px 0;overflow-wrap:anywhere} .media-settings-playing {display:flex;align-items:center;gap:12px;background:var(--surface);padding:14px;border-radius:var(--radius-sm);margin-bottom:8px} .media-settings-playing>span {flex:1;min-width:0} .media-settings-playing small,.media-settings-playing strong {display:block;overflow-wrap:anywhere} -.media-settings-playing strong {font-size:13px;font-weight:500} -.media-settings-playing small {font-size:11px;color:var(--muted)} +.media-settings-playing strong {font-size:var(--text-label);font-weight:500} +.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:12px;white-space:nowrap} +.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} @@ -872,21 +872,21 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } /* Detail information follows the saved prototype's hero, actions, content and resources. */ .media-detail-hero-copy {flex:1;min-width:0} .media-detail-hero-copy>.media-detail-facts {margin-top:12px} -.media-resource-compact {margin:12px 0;font-size:12px;line-height:1.8;overflow-wrap:anywhere} +.media-resource-compact {margin:12px 0;font-size:var(--text-meta);line-height:1.8;overflow-wrap:anywhere} .media-resource-compact>strong {display:block;font-weight:500} .media-resource-compact>small {display:block;color:var(--muted);margin:4px 0 8px} -.media-album-summary {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px} -.media-album-summary>button {display:flex;align-items:center;gap:6px;font-size:12px} -.media-person-detail .media-detail-children>h2 {font-size:16px;font-weight:600;margin:24px 0 12px} +.media-album-summary {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--text-meta)} +.media-album-summary>button {display:flex;align-items:center;gap:6px;font-size:var(--text-meta)} +.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:12px;color:var(--muted);line-height:1.7} +.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:18px;font-weight:600} +.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%} @@ -895,16 +895,16 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-mini .media-mini-close:hover {background:var(--border)} .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:16px} -.media-resource-panel>p {font-size:12px;line-height:1.8;color:var(--muted);margin:8px 0 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:13px;line-height:1.8} +.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} -.media-resource-expanded h3 {font-size:14px;margin:0 0 12px} +.media-resource-expanded h3 {font-size:var(--text-ui);margin:0 0 12px} .media-resource-expanded ul {padding-left:20px;color:var(--muted)} .media-resource-dialog .media-edition-admin {margin-top:0} -.media-search-count {font-size:12px;color:var(--muted);margin:12px 0} +.media-search-count {font-size:var(--text-meta);color:var(--muted);margin:12px 0} /* Resource dialogs: one compact header, with a separately scrolling body. */ .media-resource-dialog {padding:4px 18px 16px;overflow-y:auto;min-height:0;overscroll-behavior:contain} @@ -928,16 +928,16 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-scrape-manager .media-task-create{padding-inline:10px} .media-scrape-selection-toolbar{display:grid!important;gap:10px} .media-scrape-selection-toolbar>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} - .media-scrape-selection-toolbar>div button{min-width:0;padding-inline:6px;font-size:12px} + .media-scrape-selection-toolbar>div button{min-width:0;padding-inline:6px;font-size:var(--text-meta)} } /* Keep lyric scrolling usable without a permanent scrollbar beside the text. */ .media-lyrics-lines {scrollbar-width:none;-ms-overflow-style:none} .media-lyrics-lines::-webkit-scrollbar {display:none;width:0;height:0} -.media-sleep-options>p {font-size:13px;color:var(--muted);margin:0 0 18px} +.media-sleep-options>p {font-size:var(--text-label);color:var(--muted);margin:0 0 18px} .media-sleep-presets {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} -.media-screen .media-sleep-presets>button,.media-video-sheet .media-sleep-presets>button {display:flex;justify-content:center;align-items:baseline;gap:5px;min-height:58px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:20px;color:var(--text)} -.media-sleep-presets small {font-size:11px;color:var(--muted)} +.media-screen .media-sleep-presets>button,.media-video-sheet .media-sleep-presets>button {display:flex;justify-content:center;align-items:baseline;gap:5px;min-height:58px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--text-display);color:var(--text)} +.media-sleep-presets small {font-size:var(--text-meta);color:var(--muted)} .media-screen .media-sleep-off,.media-video-sheet .media-sleep-off {display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 4px;text-align:left;min-height:44px;color:var(--text)} .media-sleep-off span {flex:1} .media-video-stage .dplayer-host {width:100%;background:#080b0e} @@ -959,22 +959,22 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } /* 外观与主题 (V3.1, prototype 23). */ .theme-settings {max-width:640px;margin:16px auto} -.theme-settings h2 {margin:22px 0 10px;font-size:13px;font-weight:600;color:var(--muted)} +.theme-settings h2 {margin:22px 0 10px;font-size:var(--text-label);font-weight:600;color:var(--muted)} .theme-settings-card {overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--media-paper)} .media-screen .theme-follow {display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:14px;border-radius:0;text-align:left;color:var(--text)} .theme-follow-icon {display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--radius-md);background:var(--media-selection);color:var(--media-accent)} .theme-follow-text {flex:1;min-width:0} .theme-follow-text strong,.theme-follow-text small {display:block} -.theme-follow-text strong {font-size:15px;font-weight:600} -.theme-follow-text small {margin-top:2px;font-size:12px;color:var(--muted)} +.theme-follow-text strong {font-size:var(--text-body);font-weight:600} +.theme-follow-text small {margin-top:2px;font-size:var(--text-meta);color:var(--muted)} .theme-switch {position:relative;flex:none;width:44px;height:26px;border-radius:var(--radius-pill);background:var(--color-surface-2);box-shadow:inset 0 0 0 1px var(--border)} .theme-switch::after {content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--color-surface);box-shadow:0 1px 2px color-mix(in srgb,var(--color-ink) 25%,transparent);transition:left var(--motion-duration) var(--motion-ease)} .theme-follow[aria-pressed=true] .theme-switch {background:var(--media-fill);box-shadow:none} .theme-follow[aria-pressed=true] .theme-switch::after {left:21px} -.theme-settings-row {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:48px;padding:8px 14px;border-top:1px solid var(--border);font-size:14px} +.theme-settings-row {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:48px;padding:8px 14px;border-top:1px solid var(--border);font-size:var(--text-ui)} .theme-settings-row>span {flex:1;color:var(--muted)} .theme-chips {display:flex;gap:2px;padding:3px;border-radius:var(--radius-md);background:var(--surface)} -.media-screen .theme-chips button {min-height:34px;padding:0 12px;border-radius:var(--radius-sm);color:var(--muted);font-size:13px} +.media-screen .theme-chips button {min-height:34px;padding:0 12px;border-radius:var(--radius-sm);color:var(--muted);font-size:var(--text-label)} .media-screen .theme-chips button[aria-pressed=true] {background:var(--media-paper);color:var(--text);font-weight:600;box-shadow:0 1px 3px color-mix(in srgb,var(--color-ink) 18%,transparent)} .theme-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .media-screen .theme-card {display:block;min-width:0;padding:10px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--media-paper);color:var(--text);text-align:left} @@ -985,37 +985,37 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .theme-preview-title {display:block;width:28px;height:6px;border-radius:var(--radius-xs)} .theme-preview-chips {display:flex;gap:4px;margin-top:10px} .theme-preview-chips i {width:16px;height:16px;border-radius:var(--radius-xs)} -.theme-card-label {display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px;font-size:14px} +.theme-card-label {display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px;font-size:var(--text-ui)} .theme-card-label strong {font-weight:600} .theme-card-label svg {color:var(--media-accent)} -.theme-card>small {display:block;font-size:12px;color:var(--muted)} -.theme-settings-note {margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted)} -.theme-settings>p[role] {margin:12px 0 0;font-size:12px} +.theme-card>small {display:block;font-size:var(--text-meta);color:var(--muted)} +.theme-settings-note {margin:12px 0 0;font-size:var(--text-meta);line-height:1.6;color:var(--muted)} +.theme-settings>p[role] {margin:12px 0 0;font-size:var(--text-meta)} .theme-papers {display:flex;flex-wrap:wrap;gap:12px 8px;justify-content:space-between} -.media-screen .theme-papers>button {display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding:0;font-size:12px;color:var(--text)} -.theme-papers>button>span {display:grid;place-items:center;width:48px;height:48px;box-sizing:border-box;border:1px solid var(--border);border-radius:50%;font-family:'Songti SC','Noto Serif SC','Source Han Serif SC',serif;font-size:18px;font-weight:700} +.media-screen .theme-papers>button {display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;padding:0;font-size:var(--text-meta);color:var(--text)} +.theme-papers>button>span {display:grid;place-items:center;width:48px;height:48px;box-sizing:border-box;border:1px solid var(--border);border-radius:50%;font-family:'Songti SC','Noto Serif SC','Source Han Serif SC',serif;font-size:var(--text-title);font-weight:700} .theme-papers>button[aria-pressed=true]>span {border:3px solid var(--media-accent)} .theme-paper-follow {margin-top:12px} /* ---- 字幕与音轨 sheet (prototype 12) ---- */ .media-video-tabs {display:flex;gap:2px;padding:4px;margin:0 0 14px;border-radius:var(--radius-lg);background:var(--surface)} -.media-video-sheet .media-video-tabs button {flex:1;min-height:36px;border-radius:var(--radius-md);color:var(--muted);font-size:14px} +.media-video-sheet .media-video-tabs button {flex:1;min-height:36px;border-radius:var(--radius-md);color:var(--muted);font-size:var(--text-ui)} .media-video-sheet .media-video-tabs button[aria-selected=true] {background:var(--media-paper);color:var(--text);font-weight:600;box-shadow:0 1px 3px color-mix(in srgb,var(--color-ink) 18%,transparent)} .media-subtitle-panel {display:grid;gap:12px} .media-subtitle-list {display:grid;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden} .media-video-sheet .media-subtitle-list button {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:8px 14px;border-radius:0;border-top:1px solid var(--border);text-align:left;color:var(--text)} .media-video-sheet .media-subtitle-list button:first-child {border-top:0} -.media-subtitle-list strong {display:block;font-size:14px;font-weight:500} -.media-subtitle-list small {display:block;margin-top:2px;font-size:12px;color:var(--muted)} +.media-subtitle-list strong {display:block;font-size:var(--text-ui);font-weight:500} +.media-subtitle-list small {display:block;margin-top:2px;font-size:var(--text-meta);color:var(--muted)} .media-subtitle-list button[aria-checked=true] strong {font-weight:600} .media-subtitle-list svg {flex:none;color:var(--media-accent)} .media-video-sheet .media-subtitle-add {display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--media-accent)} -.media-subtitle-row {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px} +.media-subtitle-row {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--text-ui)} .media-subtitle-steps,.media-subtitle-sizes,.media-video-speeds {display:flex;gap:2px;padding:3px;border-radius:var(--radius-md);background:var(--surface)} -.media-video-sheet :is(.media-subtitle-steps,.media-subtitle-sizes,.media-video-speeds) button {min-height:34px;min-width:52px;padding:0 10px;border-radius:var(--radius-sm);font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)} +.media-video-sheet :is(.media-subtitle-steps,.media-subtitle-sizes,.media-video-speeds) button {min-height:34px;min-width:52px;padding:0 10px;border-radius:var(--radius-sm);font-size:var(--text-label);font-variant-numeric:tabular-nums;color:var(--muted)} .media-video-sheet :is(.media-subtitle-sizes,.media-video-speeds) button[aria-pressed=true] {background:var(--media-paper);color:var(--text);font-weight:600;box-shadow:0 1px 3px color-mix(in srgb,var(--color-ink) 18%,transparent)} .media-video-speeds {flex-wrap:wrap} -.media-subtitle-status,.media-subtitle-hint,.media-video-more-label {margin:0;font-size:12px;color:var(--muted)} +.media-subtitle-status,.media-subtitle-hint,.media-video-more-label {margin:0;font-size:var(--text-meta);color:var(--muted)} /* 字号: relative to the picture's width (the stage is an inline-size container). */ .media-video-stage {container-type:inline-size} .media-player[data-subtitle-size='small'] .media-video-stage video::cue {font-size:2.2cqw} @@ -1031,9 +1031,9 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-video-landscape {position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 28px max(16px,env(safe-area-inset-left));background:linear-gradient(rgb(0 0 0 / .62),transparent);color:#fff;pointer-events:none;transition:opacity var(--motion-duration) var(--motion-ease)} .media-video-landscape>* {pointer-events:auto} .media-video-landscape-title {display:flex;align-items:center;gap:8px;min-width:0} -.media-video-landscape-title strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px} +.media-video-landscape-title strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-body)} .media-video-landscape-tools {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px} -.media-video-landscape button {display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:rgb(255 255 255 / .12);color:inherit;font:inherit;font-size:13px;cursor:pointer} +.media-video-landscape button {display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:rgb(255 255 255 / .12);color:inherit;font:inherit;font-size:var(--text-label);cursor:pointer} .media-video-landscape button[aria-pressed=true] {background:rgb(255 255 255 / .28)} .media-video-landscape button:focus-visible {outline:2px solid #fff;outline-offset:2px} /* Hide with DPlayer's own controller after a few idle seconds. */ @@ -1052,7 +1052,7 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-libraries-layout {display:grid;gap:20px;align-items:start} @media (min-width:1100px) {.media-libraries-layout {grid-template-columns:minmax(0,1fr) 320px}} .media-library-footer {flex-wrap:wrap;row-gap:8px} -.media-library-scan {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-left:auto;font-size:12px;color:var(--muted)} +.media-library-scan {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-left:auto;font-size:var(--text-meta);color:var(--muted)} .media-library-scan[data-state='running'] {flex:1 1 100%;color:var(--text)} .media-library-scan[data-state='running']>span {flex:none} .media-library-progress {flex:1;min-width:120px;height:6px;appearance:none;border:0;border-radius:var(--radius-xs);background:var(--surface);overflow:hidden} @@ -1065,14 +1065,14 @@ body:has(>#app>.media-screen) { background: var(--color-bg); } .media-library-scan-actions {display:flex;gap:8px;margin-left:auto} .media-screen .media-library-details {border:0;background:transparent;color:var(--media-accent);padding-inline:4px} .media-scan-settings {padding:16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--media-paper)} -.media-screen .media-scan-settings h2 {margin:0 0 8px;font-size:15px} +.media-screen .media-scan-settings h2 {margin:0 0 8px;font-size:var(--text-body)} .media-scan-settings-list {display:grid} .media-screen .media-scan-settings-list button {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:8px 0;border:0;border-top:1px solid var(--border);border-radius:0;background:transparent;text-align:left;color:var(--text)} .media-screen .media-scan-settings-list button:first-child {border-top:0} -.media-scan-settings-list strong {display:block;font-size:14px;font-weight:500} -.media-scan-settings-list small {display:block;margin-top:2px;font-size:11px;line-height:1.5;color:var(--muted)} +.media-scan-settings-list strong {display:block;font-size:var(--text-ui);font-weight:500} +.media-scan-settings-list small {display:block;margin-top:2px;font-size:var(--text-meta);line-height:1.5;color:var(--muted)} .media-scan-switch {position:relative;flex:none;width:44px;height:26px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)} .media-scan-switch::after {content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--media-paper);box-shadow:0 1px 2px color-mix(in srgb,var(--color-ink) 25%,transparent);transition:left var(--motion-duration) var(--motion-ease)} [aria-checked=true]>.media-scan-switch {background:var(--media-fill);box-shadow:none} [aria-checked=true]>.media-scan-switch::after {left:21px} -.media-scan-settings-note {margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted)} +.media-scan-settings-note {margin:10px 0 0;font-size:var(--text-meta);line-height:1.6;color:var(--muted)} diff --git a/web/src/features/media/styles/select.css b/web/src/features/media/styles/select.css index 9063499..407aebf 100644 --- a/web/src/features/media/styles/select.css +++ b/web/src/features/media/styles/select.css @@ -8,15 +8,15 @@ .media-select-trigger[aria-expanded=true]>svg {transform:rotate(180deg)} .media-select-control .media-select-trigger:focus-visible {outline:2px solid var(--media-accent);outline-offset:3px} .media-select-control .media-select-trigger:disabled {opacity:.45;cursor:default} -.media-select-error {display:block;margin-top:5px;font-size:12px;color:var(--media-error-ink,#943c32)} +.media-select-error {display:block;margin-top:5px;font-size:var(--text-meta);color:var(--media-error-ink,#943c32)} .media-select-control[data-variant=plain] {width:auto} -.media-select-control[data-variant=plain]>.media-select-trigger {border:0;background:transparent;padding:0 2px;font-size:12px;gap:8px} -.media-select-menu {position:fixed;inset:auto;box-sizing:border-box;margin:0;padding:5px;min-width:0;max-width:calc(100vw - 16px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border,#dfe5d9) transparent;border:1px solid var(--border,#dfe5d9);border-radius:var(--radius-md);background:var(--media-paper,#fff);color:var(--text,#202b24);box-shadow:0 8px 30px #23332224;z-index:1000;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color-scheme:inherit} +.media-select-control[data-variant=plain]>.media-select-trigger {border:0;background:transparent;padding:0 2px;font-size:var(--text-meta);gap:8px} +.media-select-menu {position:fixed;inset:auto;box-sizing:border-box;margin:0;padding:5px;min-width:0;max-width:calc(100vw - 16px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border,#dfe5d9) transparent;border:1px solid var(--border,#dfe5d9);border-radius:var(--radius-md);background:var(--media-paper,#fff);color:var(--text,#202b24);box-shadow:0 8px 30px #23332224;z-index:1000;font:var(--text-ui)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color-scheme:inherit} .media-select-menu::backdrop {background:transparent;pointer-events:none} .media-select-option {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;box-sizing:border-box;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;overflow-wrap:anywhere} .media-select-option>span {min-width:0} .media-select-option>svg {flex-shrink:0;color:var(--media-accent,#466638)} -.media-select-option small {display:block;font-size:11px;color:var(--muted,#66715f)} +.media-select-option small {display:block;font-size:var(--text-meta);color:var(--muted,#66715f)} .media-select-option[data-active=true] {background:var(--surface,#edf0e8)} .media-select-option[aria-selected=true] {background:var(--media-selection,#e6eddf);color:var(--media-accent,#466638);font-weight:550} .media-select-option[aria-disabled=true] {opacity:.4;cursor:default} @@ -24,6 +24,6 @@ .media-setting-field>.media-select-control {max-width:60%;width:auto} .media-form .media-setting-field>.media-select-control {max-width:100%;width:100%} .media-screen .media-playback-options .media-select-control {width:auto} -.media-screen .media-playback-options .media-select-trigger {min-height:24px;height:24px;padding:0 3px;border:0;background:transparent;font-size:11px;gap:3px;color:var(--muted)} +.media-screen .media-playback-options .media-select-trigger {min-height:24px;height:24px;padding:0 3px;border:0;background:transparent;font-size:var(--text-meta);gap:3px;color:var(--muted)} .media-screen .media-playback-options .media-select-trigger>svg {width:12px;height:12px} @media(prefers-reduced-motion:reduce){.media-select-trigger>svg{transition:none}} diff --git a/web/src/features/media/styles/v2.css b/web/src/features/media/styles/v2.css index 31e2bbe..405ffff 100644 --- a/web/src/features/media/styles/v2.css +++ b/web/src/features/media/styles/v2.css @@ -1,11 +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:14px;scrollbar-width:thin} +.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:16px;font-weight:650;line-height:1.4} +.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 .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} @@ -15,30 +15,30 @@ .media-screen .media-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} .media-screen .media-tile {padding:0;text-align:left;border-radius:0;min-width:0} /* Same weight as the shelf's .book-card .title, so a cover title reads the same in every channel. */ -.media-screen .media-tile strong {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:13px;font-weight:520;line-height:1.5;margin-top:8px} -.media-screen .media-tile small {display:block;font-size:11px;line-height:1.5;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.media-screen .media-tile strong {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-label);font-weight:520;line-height:1.5;margin-top:8px} +.media-screen .media-tile small {display:block;font-size:var(--text-meta);line-height:1.5;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .media-screen .media-cover {border-radius:var(--radius-sm);box-shadow:0 3px 8px #15211714} .media-screen .media-cover:not(.has-image):not(.media-portrait) {background:var(--surface);color:var(--muted);border:1px solid var(--border)} /* Per-title tint, as on the shelf (ui/cover-tint.ts, ui.md §2.7). */ .media-screen .media-cover:not(.has-image):not(.media-portrait)[style*='--cover-hue'] {background:linear-gradient(150deg,color-mix(in oklab,hsl(var(--cover-hue) 55% 55%) 18%,var(--media-paper)),color-mix(in oklab,hsl(var(--cover-hue) 55% 55%) 10%,var(--surface)));border-color:color-mix(in oklab,hsl(var(--cover-hue) 55% 55%) 14%,var(--border))} -.media-screen .media-cover:not(.has-image):not(.media-portrait) .media-cover-title {font-family:inherit;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.08em;writing-mode:horizontal-tb} +.media-screen .media-cover:not(.has-image):not(.media-portrait) .media-cover-title {font-family:inherit;font-size:var(--text-label);font-weight:500;line-height:1.5;letter-spacing:.08em;writing-mode:horizontal-tb} .media-screen .media-detail-page {padding-top:26px} .media-detail-page .media-hero {align-items:center;gap:28px;margin:0} .media-detail-page .media-hero>.media-cover {width:158px;min-width:158px} .media-detail-page .media-detail-heading {padding:0;gap:8px} .media-detail-page .media-detail-hero-copy{min-width:0;display:flex;align-items:flex-start} .media-detail-page .media-detail-heading{gap:5px;max-width:560px} -.media-detail-page .media-detail-heading .media-detail-kind{font-size:12px;line-height:1.4;letter-spacing:.02em} +.media-detail-page .media-detail-heading .media-detail-kind{font-size:var(--text-meta);line-height:1.4;letter-spacing:.02em} .media-detail-page .media-detail-heading h1{margin:1px 0 2px;line-height:1.2} .media-detail-page .media-detail-heading .media-detail-credit{margin:0;color:var(--muted);line-height:1.6} .media-detail-page .media-detail-heading .media-detail-facts{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:2px} .media-detail-page .media-detail-heading h1 {font-size:32px;line-height:1.3;letter-spacing:-.025em;margin:0} -.media-detail-page .media-detail-kind {color:var(--muted);font-size:11px} -.media-detail-page .media-detail-credit {font-size:12px;line-height:1.8} -.media-detail-artist {margin:0;font-size:13px;color:var(--media-accent)} +.media-detail-page .media-detail-kind {color:var(--muted);font-size:var(--text-meta)} +.media-detail-page .media-detail-credit {font-size:var(--text-meta);line-height:1.8} +.media-detail-artist {margin:0;font-size:var(--text-label);color:var(--media-accent)} .media-detail-artist a {display:inline-flex;gap:8px;align-items:center;color:inherit;text-decoration:none;min-height:32px} .media-detail-facts {gap:10px;margin:0} -.media-detail-facts>span {padding:0;background:transparent;font-size:12px} +.media-detail-facts>span {padding:0;background:transparent;font-size:var(--text-meta)} .media-detail-actions,.media-album-actions {gap:10px;margin:20px 0 10px} .media-screen :is(.media-detail-actions,.media-album-actions)>.media-primary {min-height:44px;padding:10px 18px;min-width:180px;border-radius:var(--radius-sm)} .media-screen .media-detail-favorite {width:44px;min-width:44px;height:44px;min-height:44px;padding:10px} @@ -46,28 +46,28 @@ .media-detail-sidebar {max-width:none} .media-detail-page .media-detail-description {margin:20px 0} .media-detail-page > .media-detail-actions {margin-top:20px} -.media-detail-description p {font-size:13px;line-height:1.9;margin:8px 0} +.media-detail-description p {font-size:var(--text-label);line-height:1.9;margin:8px 0} .media-detail-page .media-resource-panel {margin:22px 0 0;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)} .media-resource-panel>header {min-height:50px;margin:0} -.media-detail-page .media-resource-panel>header>h2 {font-size:13px;margin:0} -.media-detail-page .media-resource-panel>p {font-size:11px;margin:0;padding:0 0 14px} -.media-detail-page .media-metadata-sources {font-size:11px;margin:16px 0;color:var(--muted)} +.media-detail-page .media-resource-panel>header>h2 {font-size:var(--text-label);margin:0} +.media-detail-page .media-resource-panel>p {font-size:var(--text-meta);margin:0;padding:0 0 14px} +.media-detail-page .media-metadata-sources {font-size:var(--text-meta);margin:16px 0;color:var(--muted)} .media-screen .media-album-playback .media-season-row {min-height:60px;padding:0;grid-template-columns:20px minmax(0,1fr) auto 44px;gap:12px} -.media-album-playback .media-album-summary {margin:16px 0 4px;min-height:32px;font-size:12px} +.media-album-playback .media-album-summary {margin:16px 0 4px;min-height:32px;font-size:var(--text-meta)} .media-album-playback .media-album-actions {margin-top:26px} .media-album-columns>div {min-width:0} .media-detail-heading .media-detail-artist {margin:0;line-height:1.5} .media-detail-heading .media-detail-artist a {min-height:24px} -.media-album-summary>strong {font-size:16px;font-weight:650;margin-right:auto;color:var(--text)} -.media-album-playback .media-album-number,.media-album-playback .media-album-duration {font-size:11px} +.media-album-summary>strong {font-size:var(--text-title);font-weight:650;margin-right:auto;color:var(--text)} +.media-album-playback .media-album-number,.media-album-playback .media-album-duration {font-size:var(--text-meta)} .media-screen .media-track-entry,.media-screen .media-current-playlist li {min-height:60px;padding:0} .media-screen .media-track-copy {min-height:44px} .media-track-copy strong {font-weight:550} .media-person-detail .media-hero>.media-cover,.media-person-hero>.media-cover {width:126px;min-width:126px;border-radius:50%} .media-person-detail .media-detail-columns {max-width:none} -.media-screen .media-person-count {padding:0;background:transparent;line-height:1.8;font-size:12px} +.media-screen .media-person-count {padding:0;background:transparent;line-height:1.8;font-size:var(--text-meta)} .media-person-detail>.media-detail-actions {top:20px} -.media-screen .media-person-bio {margin:0 0 24px;font-size:13px;line-height:1.9;max-width:760px} +.media-screen .media-person-bio {margin:0 0 24px;font-size:var(--text-label);line-height:1.9;max-width:760px} .media-screen .media-continue {grid-template-columns:48px minmax(0,1fr) 44px;gap:12px;background:var(--media-paper);border:1px solid var(--border);padding:10px;border-radius:var(--radius-md);margin:0 0 16px} .media-continue>.media-cover {width:48px;min-width:48px;height:48px;aspect-ratio:1} .media-screen .media-continue>button {padding:10px;border-radius:50%;min-width:44px;height:44px;background:var(--media-selection);color:var(--media-accent)} @@ -82,20 +82,20 @@ .media-search-results,.media-current-playlist,.media-audiobook-chapters {max-width:820px;margin-inline:auto} .media-screen .media-search-result {min-height:72px;padding:10px 0;gap:12px} .media-screen .media-search-result .media-cover {width:42px;min-width:42px} -.media-search-copy strong {font-size:13px;font-weight:550} -.media-search-copy small {font-size:11px} +.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:18px;margin:0} -.media-settings-intro strong {display:block;font-size:14px} -.media-settings-intro small {display:block;color:var(--muted);font-size:11px;margin-top:3px} +.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:11px;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:13px} +.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:11px} +.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. */ @@ -110,39 +110,39 @@ .media-screen .media-library-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:12px 0;} .media-screen .media-library-row {display:grid;grid-template-columns:24px minmax(0,1fr) 44px;gap:10px;padding:16px;margin:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--media-paper);align-items:start} .media-library-row>svg {margin-top:8px;color:var(--media-accent)} -.media-library-row strong {font-size:14px} -.media-library-row .media-library-directory {margin-top:12px;font-size:11px;white-space:normal;overflow-wrap:anywhere} -.media-library-footer {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:8px;font-size:11px;color:var(--muted)} -.media-library-footer button {font-size:12px;color:var(--media-accent)} -.media-screen .media-manager .media-library-footer button {background:transparent;flex:none;min-height:44px;font-size:12px;padding:0 4px} +.media-library-row strong {font-size:var(--text-ui)} +.media-library-row .media-library-directory {margin-top:12px;font-size:var(--text-meta);white-space:normal;overflow-wrap:anywhere} +.media-library-footer {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--border);padding-top:8px;font-size:var(--text-meta);color:var(--muted)} +.media-library-footer button {font-size:var(--text-meta);color:var(--media-accent)} +.media-screen .media-manager .media-library-footer button {background:transparent;flex:none;min-height:44px;font-size:var(--text-meta);padding:0 4px} .media-screen .media-library-empty {padding:32px 16px;max-width:460px;margin:48px auto;text-align:center} -.media-screen .media-library-empty h2 {font-size:21px;line-height:1.5} -.media-screen .media-library-empty p {font-size:13px;line-height:1.9;color:var(--muted)} +.media-screen .media-library-empty h2 {font-size:var(--text-display);line-height:1.5} +.media-screen .media-library-empty p {font-size:var(--text-label);line-height:1.9;color:var(--muted)} .media-empty-emblem {width:72px;height:72px;border-radius:var(--radius-xl)} .media-screen .media-metadata-editor>h2 {display:none} .media-screen .media-metadata-title {border:0;background:transparent;padding:0} -.media-resource-facts {display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;margin:16px 0;font-size:13px} +.media-resource-facts {display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;margin:16px 0;font-size:var(--text-label)} .media-resource-facts dt {color:var(--muted)} .media-resource-facts dd {margin:0;overflow-wrap:anywhere} -.media-resource-info details>summary {min-height:44px;cursor:pointer;font-size:12px} -.media-resource-info li {margin-bottom:12px;line-height:1.8;font-size:12px;color:var(--muted)} +.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:21px;line-height:1.5} -.media-screen .media-empty-library p {font-size:13px;line-height:1.9;color:var(--muted)} +.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 .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:21px;font-weight:650;margin:0 0 6px} -.media-playing-artwork p {font-size:12px} +.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)} .media-screen .media-toggle-play {width:64px;height:64px;min-height:64px} .media-toggle-play svg {width:28px;height:28px} .media-screen .media-transport {gap:35px;margin:20px 0 18px} .media-playback-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} -.media-screen .media-lyrics-toggle {font-size:11px;min-height:48px} +.media-screen .media-lyrics-toggle {font-size:var(--text-meta);min-height:48px} .media-playback-status[data-panel=lyrics] .media-lyrics-lines {height:clamp(160px,calc(100dvh - 400px),490px);padding:22px 4px;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)} -.media-playback-status[data-panel=lyrics] .media-lyrics-lines button {font-size:15px;min-height:44px;padding:8px 4px} -.media-playback-status[data-panel=lyrics] .media-lyrics-lines button[aria-current=true] {font-size:19px;font-weight:650} +.media-playback-status[data-panel=lyrics] .media-lyrics-lines button {font-size:var(--text-body);min-height:44px;padding:8px 4px} +.media-playback-status[data-panel=lyrics] .media-lyrics-lines button[aria-current=true] {font-size:var(--text-title);font-weight:650} .media-screen .media-playback-status[data-panel=lyrics] {height:calc(100dvh - 96px);min-height:0;display:flex;flex-direction:column;box-sizing:border-box} .media-playback-status[data-panel=lyrics] .media-lyrics {display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden} .media-playback-status[data-panel=lyrics] .media-lyrics-lines {height:auto;flex:1;min-height:0} @@ -157,8 +157,8 @@ .media-mini-title .media-cover img {width:100%;height:100%;object-fit:cover} .media-mini-artwork {display:grid;place-items:center;background:var(--surface);color:var(--muted)} .media-mini-copy {min-width:0;flex:1} -.media-mini-copy strong {font-size:12px;font-weight:550;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} -.media-mini-copy small {font-size:10px;color:var(--muted);display:block;margin-top:3px} +.media-mini-copy strong {font-size:var(--text-meta);font-weight:550;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} +.media-mini-copy small {font-size:var(--text-micro);color:var(--muted);display:block;margin-top:3px} .media-mini>.media-mini-time {display:none} .media-mini {min-height:56px;flex-wrap:nowrap;position:relative} .media-mini>.media-mini-progress {position:absolute;bottom:-4px;left:0;right:0;height:2px} @@ -166,22 +166,22 @@ .media-video-workspace {background:var(--media-background);color:var(--text);max-width:960px;margin:auto;position:relative} .media-video-stage {aspect-ratio:16/9} .media-video-workspace .media-video-controls {padding:16px 24px 30px} -.media-video-caption {border:0;padding:0;font-size:18px} +.media-video-caption {border:0;padding:0;font-size:var(--text-title)} .media-video-caption strong {font-weight:650} -.media-video-caption small {font-size:12px} +.media-video-caption small {font-size:var(--text-meta)} .media-video-toolbar.media-video-tools {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(84px,100%),1fr));margin:16px 0;border-block:1px solid var(--border)} -.media-video-tools>button {display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;font-size:11px} +.media-video-tools>button {display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;font-size:var(--text-meta)} .media-video-description summary {min-height:44px;cursor:pointer;display:flex;align-items:center} .media-episode-rail {padding:16px;background:var(--media-paper);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);margin-top:20px} .media-episode-rail header {display:flex;align-items:center;justify-content:space-between;gap:12px} .media-episode-rail header h2 {flex:none;white-space:nowrap} .media-episode-rail header .media-select-control {flex:1;min-width:0;max-width:200px} -.media-episode-rail header select {max-width:180px;font-size:12px} -.media-episode-rail nav {display:flex;align-items:center;justify-content:space-between;font-size:11px} -.media-episode-rail .media-video-episodes small {display:block;margin:4px 0 0;font-size:11px} -.media-episode-rail h2 {font-size:15px;margin:0} +.media-episode-rail header select {max-width:180px;font-size:var(--text-meta)} +.media-episode-rail nav {display:flex;align-items:center;justify-content:space-between;font-size:var(--text-meta)} +.media-episode-rail .media-video-episodes small {display:block;margin:4px 0 0;font-size:var(--text-meta)} +.media-episode-rail h2 {font-size:var(--text-body);margin:0} .media-episode-rail .media-video-episodes {max-height:430px;overflow:auto;scrollbar-width:thin} -.media-episode-rail .media-video-episodes button {font-size:12px;min-height:60px} +.media-episode-rail .media-video-episodes button {font-size:var(--text-meta);min-height:60px} .media-episode-rail {box-shadow:0 10px 30px #0002} .media-episode-rail header {position:sticky;top:0;z-index:1;padding-bottom:12px;background:var(--media-paper)} .media-episode-rail .media-video-episodes button {display:grid;grid-template-columns:32px minmax(0,1fr) 18px;gap:10px;align-items:center;padding:10px 8px;border:0;border-radius:var(--radius-sm);color:var(--text);background:transparent} @@ -197,10 +197,10 @@ readable on desktop instead of inheriting the generic two-column form. */ .media-screen .media-metadata-page {max-width:820px;margin:24px auto 80px} .media-screen .media-metadata-page .media-match-intro {margin-bottom:22px} -.media-screen .media-metadata-page .media-match-intro>p {margin:0 0 5px;color:var(--media-accent);font-size:12px} +.media-screen .media-metadata-page .media-match-intro>p {margin:0 0 5px;color:var(--media-accent);font-size:var(--text-meta)} .media-screen .media-metadata-page .media-match-intro h1 {margin:0;font-size:26px;line-height:1.35} .media-screen .media-metadata-page .media-match-search {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;align-items:end;margin:18px 0 26px} -.media-screen .media-metadata-page .media-match-search>label {display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;min-width:0;font-size:12px} +.media-screen .media-metadata-page .media-match-search>label {display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;min-width:0;font-size:var(--text-meta)} .media-screen .media-metadata-page .media-match-search>label:first-child {grid-column:1/-1;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center} .media-screen .media-metadata-page .media-match-search>label:has([aria-label="刮削艺人限定"]) {grid-column:1/-1} .media-screen .media-metadata-page .media-match-search>label small {grid-column:2} @@ -208,7 +208,7 @@ .media-screen .media-metadata-page .media-auto-match {grid-column:1/-1;margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-paper)} .media-screen .media-metadata-page .media-auto-match summary {font-weight:600;color:var(--text)} .media-screen .media-metadata-page .media-auto-match button {margin-top:8px;background:var(--surface);border:1px solid var(--border)} -.media-screen .media-metadata-page .media-metadata-matcher>h2 {margin:30px 0 8px;font-size:18px} +.media-screen .media-metadata-page .media-metadata-matcher>h2 {margin:30px 0 8px;font-size:var(--text-title)} .media-screen .media-metadata-page .media-match-candidate {border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin:8px 0;background:var(--media-paper)} .media-screen .media-metadata-page .media-match-candidate>button {flex:none} .media-screen .media-metadata-page .media-metadata-matcher>small {display:block;margin-top:32px;color:var(--muted)} @@ -247,7 +247,7 @@ } :root body .media-video-stage .dplayer-host { color-scheme:dark; } .searchable-select {position:relative;display:inline-flex;flex-direction:column;min-width:190px;max-width:100%} -.searchable-select-label {display:block;margin:0 0 5px;color:var(--muted);font-size:12px;font-weight:600} +.searchable-select-label {display:block;margin:0 0 5px;color:var(--muted);font-size:var(--text-meta);font-weight:600} .searchable-select-native {position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important} .searchable-select-trigger {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font:inherit;text-align:left} .searchable-select-trigger:disabled {opacity:.55} @@ -258,7 +258,7 @@ .searchable-select-options {max-height:260px;overflow:auto;padding-top:4px} .searchable-select-options button {display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:38px;padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);text-align:left} .searchable-select-options button:hover,.searchable-select-options button[aria-selected=true] {background:var(--media-selection);color:var(--media-accent)} -.searchable-select-options p {padding:12px;color:var(--muted);font-size:12px} +.searchable-select-options p {padding:12px;color:var(--muted);font-size:var(--text-meta)} @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} @@ -370,7 +370,7 @@ .media-screen.media-catalog-page .media-catalog-count { flex: 0 0 auto; color: var(--muted); - font-size: 11px; + font-size: var(--text-meta); white-space: nowrap; } .media-screen.media-catalog-page .media-sort-control { @@ -408,7 +408,7 @@ color: var(--text); text-decoration: none; border-radius: var(--radius-sm); - font-size: 13px; + font-size: var(--text-label); } .media-screen.media-catalog-page .media-catalog-actions nav a:hover { background: var(--media-selection); @@ -509,13 +509,13 @@ .media-screen .media-context-label { margin: 0 0 8px; color: var(--muted); - font-size: 12px; + font-size: var(--text-meta); line-height: 1.5; } .media-screen .media-page-heading .media-heading-context { margin-left: 4px; color: var(--muted); - font-size: 12px; + font-size: var(--text-meta); font-weight: 400; line-height: 1.4; white-space: nowrap; @@ -556,12 +556,12 @@ .media-screen {padding:0 16px calc(24px + env(safe-area-inset-bottom))} .media-screen.media-catalog-page .media-heading:has(.media-mobile-title) {display:flex;grid-template-rows:none;min-height:56px;height:56px} .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:19px} + .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:24px} + .media-detail-page .media-detail-heading h1 {font-size:var(--text-display)} .media-person-detail .media-hero>.media-cover,.media-person-hero>.media-cover {width:92px;min-width:92px} .media-screen :is(.media-detail-actions,.media-album-actions)>.media-primary {flex:1;min-width:0} .media-detail-actions .media-edition-picker {flex-basis:100%;margin-top:8px} @@ -585,24 +585,24 @@ .media-screen .media-tabs button {box-sizing:border-box;flex-shrink:0} .media-screen :is(.media-library-create,.media-library-workspace)>.media-form {max-width:700px;margin:24px auto} .media-openlist-credentials {display:grid;gap:12px} -.media-openlist-credentials legend {padding:0;margin-bottom:12px;font-size:14px;font-weight:600} -.media-form label.media-credential-clear {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)} +.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:19px;font-weight:700;color:var(--text)} +.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-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:11px;white-space:nowrap;color:var(--muted)} +.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} -.media-screen .media-library-filter select {appearance:none;border:0;border-radius:0;background:transparent;font-size:12px;padding:0 21px 0 0;max-width:100%;height:44px;color:var(--text)} +.media-screen .media-library-filter select {appearance:none;border:0;border-radius:0;background:transparent;font-size:var(--text-meta);padding:0 21px 0 0;max-width:100%;height:44px;color:var(--text)} .media-library-filter>svg {position:absolute;right:3px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)} .media-screen .media-browse-actions {margin-left:auto;gap:4px} .media-screen .media-browse-actions>button,.media-screen .media-browse-filters>summary {width:44px;min-width:44px;height:44px;padding:12px;box-sizing:border-box;border-radius:50%} .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:13px}.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:14px;font-weight:500;white-space:nowrap;transition:background .15s ease,color .15s ease,box-shadow .15s ease}.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-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-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-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} @@ -616,28 +616,28 @@ .media-detail-description p {margin:0;line-height:1.9} .media-series-seasons .media-toolbar {margin:16px 0 8px;min-height:44px} .media-series-seasons h2 {margin:0} -.media-screen .media-series-seasons select {border:0;background:transparent;font-size:12px;padding:0 4px;max-width:160px} +.media-screen .media-series-seasons select {border:0;background:transparent;font-size:var(--text-meta);padding:0 4px;max-width:160px} .media-screen .media-episode-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0} .media-screen .media-episode-grid>button {border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;text-align:left;min-height:74px;background:var(--media-paper);color:var(--text)} -.media-episode-grid strong {display:block;font-size:13px;font-weight:600} -.media-episode-grid small {display:block;font-size:11px;margin-top:5px;color:var(--muted)} +.media-episode-grid strong {display:block;font-size:var(--text-label);font-weight:600} +.media-episode-grid small {display:block;font-size:var(--text-meta);margin-top:5px;color:var(--muted)} .media-screen .media-episode-grid>button[aria-pressed=true] {background:var(--media-selection);border-color:var(--media-accent)} .media-screen .media-narrators[data-view=directory] .media-people-grid {display:block} .media-screen .media-narrators .media-person-tile {display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center;text-align:left;width:100%;min-height:70px;border-bottom:1px solid var(--border);padding:10px 0} -.media-narrators .media-person-tile>.media-cover {grid-row:1/3;width:44px;height:44px;aspect-ratio:1;margin:0;font-size:20px} +.media-narrators .media-person-tile>.media-cover {grid-row:1/3;width:44px;height:44px;aspect-ratio:1;margin:0;font-size:var(--text-display)} .media-narrators .media-person-tile :is(strong,small) {margin:0;text-align:left} .media-narrators .media-person-tile>.media-cover {padding:0;box-shadow:none} .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:20px;letter-spacing:0} +.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} -.media-screen :is(.media-library-empty h2,.media-screen-error.is-page>strong,.media-state-page h2) {font-size:21px;line-height:1.3;font-weight:650;margin:0 0 10px;color:var(--text)} -.media-screen :is(.media-library-empty p,.media-screen-error.is-page>p,.media-state-page p) {font-size:13px;line-height:1.9;margin:0 0 24px;max-width:none;color:var(--muted)} +.media-screen :is(.media-library-empty h2,.media-screen-error.is-page>strong,.media-state-page h2) {font-size:var(--text-display);line-height:1.3;font-weight:650;margin:0 0 10px;color:var(--text)} +.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:12px;color:var(--media-accent);margin-top:6px} +.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} @@ -647,9 +647,9 @@ .media-screen .media-playback-status[data-panel=main][data-channel=audiobook] .media-playing-artwork>.media-cover {width:135px;aspect-ratio:2/3;margin:10px auto 22px} .media-screen .media-playing-copy {display:flex;width:100%;align-items:center;gap:8px;margin:0 0 16px;text-align:left} .media-playing-copy>div {flex:1;min-width:0} -.media-screen .media-playing-copy .media-playing-title {font-size:21px;font-weight:650;line-height:1.3;margin:0} -.media-screen .media-playing-copy p {font-size:12px;line-height:1.5;color:var(--muted);margin:6px 0 0} -.media-screen .media-playing-chapter {font-size:12px;color:var(--muted);text-align:center;margin:0 0 12px} +.media-screen .media-playing-copy .media-playing-title {font-size:var(--text-display);font-weight:650;line-height:1.3;margin:0} +.media-screen .media-playing-copy p {font-size:var(--text-meta);line-height:1.5;color:var(--muted);margin:6px 0 0} +.media-screen .media-playing-chapter {font-size:var(--text-meta);color:var(--muted);text-align:center;margin:0 0 12px} .media-screen .media-audio-bottom {width:100%;margin-top:auto;padding-top:18px;padding-bottom:14px;flex:none} .media-screen .media-audio-bottom .media-inline-timeline {margin-top:0;padding-top:0} .media-screen .media-inline-timeline input[type=range] {height:24px;min-height:44px;margin:0;display:block} @@ -657,25 +657,25 @@ .media-inline-timeline input[type=range]::-webkit-slider-thumb {width:12px;height:12px;margin-top:-4px} .media-screen .media-inline-timeline .media-mini-time {margin-top:3px} .media-screen .media-playback-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} -.media-screen .media-playback-options>:is(button,label) {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:48px;padding:0;color:var(--muted);font-size:11px} -.media-screen .media-playback-options select {appearance:none;border:0;min-height:0;height:16px;padding:0;background:transparent;font-size:11px;text-align:center} +.media-screen .media-playback-options>:is(button,label) {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:48px;padding:0;color:var(--muted);font-size:var(--text-meta)} +.media-screen .media-playback-options select {appearance:none;border:0;min-height:0;height:16px;padding:0;background:transparent;font-size:var(--text-meta);text-align:center} .media-screen .media-playback-options {margin:0;align-items:stretch} .media-screen .media-transport:has(.media-skip) {gap:35px} .media-screen .media-playback-status[data-channel] .media-playback-options select {min-height:16px} .media-screen.media-playback-page:not(.media-video-page) .media-playback-status[data-panel=queue] {width:100%;max-width:850px;margin:auto;padding:0;border:0;background:transparent;display:block} .media-playlist-toolbar {display:flex;align-items:center;gap:8px;min-height:44px;margin:16px 0 8px;position:relative} -.media-playlist-toolbar h2 {margin:0;flex:1;font-size:16px;font-weight:650} +.media-playlist-toolbar h2 {margin:0;flex:1;font-size:var(--text-title);font-weight:650} .media-screen .media-playlist-toolbar h2 {color:var(--text)} -.media-playlist-toolbar>small {font-size:11px;color:var(--muted)} +.media-playlist-toolbar>small {font-size:var(--text-meta);color:var(--muted)} .media-playlist-tools {position:fixed;top:6px;right:8px;z-index:92} .media-playlist-tools>summary {width:44px;height:44px;display:grid;place-items:center;box-sizing:border-box} .media-playback-page:has(.media-current-playlist) .media-audio-heading>.media-icon-button {visibility:hidden} .media-screen .media-current-playlist li {gap:12px;min-height:60px} .media-screen .media-current-playlist li .media-playlist-select {gap:12px;padding:9px 0} -.media-current-playlist .media-playlist-number {flex-basis:20px;font-size:11px} -.media-playlist-select strong {display:block;font-size:13px;font-weight:550;line-height:1.5} -.media-playlist-select small {font-size:11px;margin-top:3px} -.media-current-playlist time {font-size:11px;color:var(--muted);white-space:nowrap} +.media-current-playlist .media-playlist-number {flex-basis:20px;font-size:var(--text-meta)} +.media-playlist-select strong {display:block;font-size:var(--text-label);font-weight:550;line-height:1.5} +.media-playlist-select small {font-size:var(--text-meta);margin-top:3px} +.media-current-playlist time {font-size:var(--text-meta);color:var(--muted);white-space:nowrap} .media-screen .media-current-playlist li .media-playlist-more {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0} @media(max-width:700px){ .media-screen>.media-heading:not(:has(.media-mobile-title)),.media-screen .media-settings-heading {box-sizing:border-box;height:56px;min-height:56px;padding:0 8px 0 4px;margin:0 -16px;gap:4px;border-bottom:1px solid var(--border)} @@ -714,7 +714,7 @@ .media-screen .media-playback-status[data-panel=main][data-channel=music] .media-audio-bottom {grid-row:2} .media-playlist-tools {top:12px;right:max(32px,calc((100vw - 1120px)/2 + 32px))} } -.media-task-icon-placeholder{width:36px;height:36px;display:block}.media-scrape-selection-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:16px 0 10px}.media-scrape-selection-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.media-scrape-search{display:grid;gap:6px;min-width:min(360px,100%);font-size:13px;color:var(--muted)}.media-scrape-search input{min-height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--surface)}.media-scrape-item-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;max-height:460px;overflow:auto;padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-muted,#f8f9f6)}.media-scrape-item-list .media-user-option{min-width:0;border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent);padding:10px 4px}.media-scrape-item-list .media-user-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-scrape-selection-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0}.media-scrape-selection-footer span{color:var(--muted);font-size:13px} +.media-task-icon-placeholder{width:36px;height:36px;display:block}.media-scrape-selection-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:16px 0 10px}.media-scrape-selection-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.media-scrape-search{display:grid;gap:6px;min-width:min(360px,100%);font-size:var(--text-label);color:var(--muted)}.media-scrape-search input{min-height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--surface)}.media-scrape-item-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;max-height:460px;overflow:auto;padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-muted,#f8f9f6)}.media-scrape-item-list .media-user-option{min-width:0;border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent);padding:10px 4px}.media-scrape-item-list .media-user-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-scrape-selection-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0}.media-scrape-selection-footer span{color:var(--muted);font-size:var(--text-label)} /* Shared media interaction tokens also cover layers outside the screen. */ :root body {--surface-muted:var(--color-surface-2)} @@ -741,7 +741,7 @@ border-radius:0; background:transparent; color:var(--muted); - font-size:13px; + font-size:var(--text-label); font-weight:500; transition:color .15s ease,border-color .15s ease; } @@ -757,7 +757,7 @@ .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:13px;min-height:24px} +.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} @@ -765,14 +765,14 @@ .media-player .dplayer-host .dplayer-setting-item:hover {background:var(--media-selection)} .media-screen .media-folder-operation{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin:10px 0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)} -.media-folder-operation>span{display:grid;gap:5px;font-size:14px}.media-folder-operation small{color:var(--muted);font-size:12px} +.media-folder-operation>span{display:grid;gap:5px;font-size:var(--text-ui)}.media-folder-operation small{color:var(--muted);font-size:var(--text-meta)} .media-screen .media-folder-operation>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;min-height:40px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--media-selection);color:var(--text)} .media-screen .media-folder-operation>button:hover{border-color:var(--media-accent)} .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:20px;color:var(--text)}.media-task-intro p{margin:6px 0 0;color:var(--muted);font-size:13px}.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:18px}.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:13px}.media-menu-submenu>nav{right:0;top:100%}} +.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%}} /* 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} @@ -780,7 +780,7 @@ .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:18px;letter-spacing:-.01em} +.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} @@ -790,13 +790,13 @@ .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:13px}.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)}.media-task-intro{padding-bottom:16px}.media-menu-submenu>nav{right:0;top:calc(100% + 4px)}} /* Library cards keep the directory, summary and action areas visually compact. */ .media-screen .media-manager .media-library-list{gap:12px} .media-screen .media-manager .media-library-row{grid-template-columns:30px minmax(0,1fr) 40px;gap:12px;padding:14px 16px;border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(31,42,34,.04)} .media-screen .media-manager .media-library-row>svg{margin-top:3px} -.media-screen .media-manager .media-library-row strong{font-size:14px;line-height:1.5} +.media-screen .media-manager .media-library-row strong{font-size:var(--text-ui);line-height:1.5} .media-screen .media-manager .media-library-row small{line-height:1.5} .media-screen .media-manager .media-library-row .media-library-directory{margin-top:6px} .media-screen .media-manager .media-library-footer{margin-top:8px;padding-top:10px;line-height:1.4} @@ -809,7 +809,7 @@ .media-screen .media-continue-play:hover{background:var(--media-selection)!important} .media-screen:has(>.media-read-loading-detail)>.media-heading{align-items:center;border-bottom:0;box-shadow:none} .media-screen:has(>.media-read-loading-detail)>.media-heading .media-page-heading{display:flex;align-items:center;gap:4px} -.media-screen:has(>.media-read-loading-detail)>.media-heading .media-page-heading h2{margin:0;font-size:16px;line-height:1.4} +.media-screen:has(>.media-read-loading-detail)>.media-heading .media-page-heading h2{margin:0;font-size:var(--text-title);line-height:1.4} .media-screen .media-folders{position:relative} .media-screen .media-heading-actions .media-folder-actions{position:relative;margin:0;z-index:4} .media-screen .media-folders>.media-folder-actions{position:absolute;top:-68px;right:0;margin:0;z-index:4} @@ -956,19 +956,19 @@ body:has(.media-narrators:not([data-view=directory])) .media-channel-entry { .media-screen .media-play-mode-cycle[data-mode=sequential] {color:var(--muted)} .media-screen .media-play-mode-cycle:not([data-mode=sequential]) {color:var(--media-accent)} .media-play-mode {display:flex;align-items:center;gap:12px;margin:0 0 10px} -.media-play-mode>span {flex:none;font-size:13px;color:var(--muted)} +.media-play-mode>span {flex:none;font-size:var(--text-label);color:var(--muted)} .media-play-mode>div {display:flex;flex:1;gap:2px;padding:4px;border-radius:var(--radius-lg);background:var(--media-selection)} -.media-screen .media-play-mode button {flex:1;min-height:40px;padding:0 6px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--muted);font-size:14px;white-space:nowrap} +.media-screen .media-play-mode button {flex:1;min-height:40px;padding:0 6px;border:0;border-radius:var(--radius-md);background:transparent;color:var(--muted);font-size:var(--text-ui);white-space:nowrap} .media-screen .media-play-mode button[aria-pressed=true] {background:var(--media-paper);color:var(--text);font-weight:600;box-shadow:0 1px 3px #0003} .media-sleep-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px} -.media-screen .media-sleep-actions button {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:14px} +.media-screen .media-sleep-actions button {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:var(--text-ui)} .media-screen .media-sleep-actions button[aria-pressed=true] {background:var(--media-selection);border-color:var(--media-accent);color:var(--media-accent);font-weight:600} .media-screen .media-sleep-actions button:disabled {opacity:.5} .media-screen .media-sleep-actions .media-sleep-off span {flex:none} -.media-sleep-note {margin:10px 0 0;font-size:12px;color:var(--muted)} +.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:1.25rem} +.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)} -.media-manager-card>:is(h3,h4){margin:0;font-size:15px} +.media-manager-card>:is(h3,h4){margin:0;font-size:var(--text-body)} diff --git a/web/src/features/search/styles/search.css b/web/src/features/search/styles/search.css index 01739fa..47591ab 100644 --- a/web/src/features/search/styles/search.css +++ b/web/src/features/search/styles/search.css @@ -1,13 +1,13 @@ /* 搜索: one query, books and media. Uses the media page frame and its aliases. */ .search-page { max-width: 1000px; } .search-page-form { display: flex; align-items: center; gap: 10px; margin: 8px 0 20px; padding: 0 6px 0 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--media-paper); color: var(--muted); } -.search-page-form input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; outline: none; } +.search-page-form input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--text-body); outline: none; } .search-page-form input::-webkit-search-cancel-button { display: none; } .search-page-form:focus-within { border-color: var(--media-accent); box-shadow: 0 0 0 1px var(--media-accent); } -.search-page-hint, .search-page-empty { color: var(--muted); font-size: 14px; } +.search-page-hint, .search-page-empty { color: var(--muted); font-size: var(--text-ui); } .search-page-section { margin: 0 0 28px; } .search-page-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } -.search-page-section h2 { margin: 0; font-size: 17px; } -.search-page-section h2 small { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); } -.search-page-section > header a { display: inline-flex; align-items: center; color: var(--media-accent); font-size: 13px; text-decoration: none; } +.search-page-section h2 { margin: 0; font-size: var(--text-title); } +.search-page-section h2 small { margin-left: 8px; font-size: var(--text-meta); font-weight: 400; color: var(--muted); } +.search-page-section > header a { display: inline-flex; align-items: center; color: var(--media-accent); font-size: var(--text-label); text-decoration: none; } .search-page-media { display: grid; gap: 4px; } diff --git a/web/src/features/sources/styles/plugins.css b/web/src/features/sources/styles/plugins.css index 801775f..867d81c 100644 --- a/web/src/features/sources/styles/plugins.css +++ b/web/src/features/sources/styles/plugins.css @@ -3,5 +3,5 @@ .plugin-manager .plugin-error { color: var(--color-danger); overflow-wrap: anywhere; } .plugin-manager .source-state.is-error { color: var(--color-danger); } -.plugin-install-form small { color: var(--color-muted); font-size: 12px; } +.plugin-install-form small { color: var(--color-muted); font-size: var(--text-meta); } .plugin-install-form input[type='file'] { padding: 9px; } diff --git a/web/src/styles/business-settings.css b/web/src/styles/business-settings.css index 28dfaed..969fdf3 100644 --- a/web/src/styles/business-settings.css +++ b/web/src/styles/business-settings.css @@ -14,6 +14,6 @@ flex: 0 0 22px; accent-color: var(--reader-accent); } -.business-settings .business-secret-clear { justify-self: start; font-size: 12px; } +.business-settings .business-secret-clear { justify-self: start; font-size: var(--text-meta); } .business-settings audio { width: 100%; } .business-settings .muted { line-height: 1.6; } diff --git a/web/src/styles/notifications.css b/web/src/styles/notifications.css index 60dae9b..ada187d 100644 --- a/web/src/styles/notifications.css +++ b/web/src/styles/notifications.css @@ -15,7 +15,7 @@ body .notyf { border-radius: var(--radius-lg); color: var(--reader-ink); box-shadow: 0 6px 24px #00000014; - font-size: .82rem; + font-size: var(--text-label); text-align: start; pointer-events: none; animation-duration: .15s; diff --git a/web/src/styles/pwa.css b/web/src/styles/pwa.css index 55f1966..c8b74fd 100644 --- a/web/src/styles/pwa.css +++ b/web/src/styles/pwa.css @@ -18,7 +18,7 @@ background: var(--reader-surface); color: var(--reader-ink); box-shadow: 0 4px 16px #0000000d; - font-size: .875rem; + font-size: var(--text-ui); line-height: 1.5; } .pwa-update .button { diff --git a/web/src/styles/reader.css b/web/src/styles/reader.css index d3f164a..4afa685 100644 --- a/web/src/styles/reader.css +++ b/web/src/styles/reader.css @@ -83,10 +83,13 @@ * that changes and the role is the part that does not: `--text-meta` is "the line * under a title" whether it is 0.72rem today or 0.75rem later. */ - --text-title: 1.05rem; - --text-body: 0.95rem; - --text-label: 0.82rem; - --text-meta: 0.72rem; + --text-display: 1.375rem; /* page hero titles, empty-state headlines */ + --text-title: 1.05rem; /* screen and card titles; also 16px+ inputs (iOS zoom floor) */ + --text-body: 0.95rem; /* reading-side body text and buttons */ + --text-ui: 0.875rem; /* list rows and settings rows in the app chrome */ + --text-label: 0.82rem; /* field labels, section titles, secondary buttons */ + --text-meta: 0.75rem; /* the line under a title: counts, times, sources */ + --text-micro: 0.625rem; /* corner badges on covers and icons, nothing else */ /* * Motion. @@ -608,7 +611,7 @@ book-content { background: transparent; color: var(--reader-ink); font: inherit; - font-size: 1.15rem; + font-size: var(--text-title); cursor: pointer; touch-action: manipulation; transition: background var(--motion-duration) var(--motion-ease); @@ -639,7 +642,7 @@ book-content { /* Shared sizing for the SVG icon primitive. */ .icon { - font-size: 1.15rem; + font-size: var(--text-title); font-style: normal; font-weight: 400; font-synthesis: none; @@ -680,7 +683,7 @@ book-content { width: 2.5rem; height: 2.5rem; border-radius: var(--reader-radius); - font-size: 1.1rem; + font-size: var(--text-title); display: inline-grid; place-content: center; vertical-align: middle; @@ -699,7 +702,7 @@ book-content { color: var(--reader-ink); border-radius: var(--reader-radius); padding: 0.6rem 1rem; - font-size: 0.95rem; + font-size: var(--text-body); cursor: pointer; touch-action: manipulation; text-decoration: none; @@ -757,7 +760,7 @@ book-content { .sheet-header .icon-text-button { padding: 0.45rem 0.6rem; - font-size: 0.82rem; + font-size: var(--text-label); } /* ---- interactive states ---- */ @@ -873,7 +876,7 @@ book-content { color: var(--reader-ink); border-radius: var(--reader-radius); padding: 0.45rem 0.6rem; - font-size: 16px; + font-size: var(--text-title); font-family: inherit; width: 100%; } @@ -962,7 +965,7 @@ book-content { */ .shelf-title { margin: 0; - font-size: 1.5rem; + font-size: var(--text-display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; @@ -973,7 +976,7 @@ book-content { .shelf-subtitle { margin: 0.25rem 0 0; - font-size: 0.76rem; + font-size: var(--text-meta); line-height: 1.35; } @@ -991,7 +994,7 @@ book-content { /* * The field is a pill with the glyph inside it, and it is exactly as wide as the - * content column. `font-size: 16px` is not a taste decision — anything smaller + * content column. A size of at least 16px (`--text-title`) is not a taste decision — anything smaller * makes iOS Safari zoom the viewport on focus and leave the layout half * off-screen, which on a *search field* means the shelf jumps every time it is * used. @@ -1090,7 +1093,7 @@ book-content { display: grid; place-content: center; width: 1.2rem; - font-size: 1.05rem; + font-size: var(--text-title); color: var(--reader-muted); pointer-events: none; } @@ -1112,7 +1115,7 @@ book-content { * field has symmetric padding, which is what the line above guarantees. */ line-height: 1.4; - font-size: 16px; + font-size: var(--text-title); font-family: inherit; } @@ -1167,7 +1170,7 @@ book-content { border-radius: 50%; background: color-mix(in srgb, var(--reader-ink) 12%, transparent); color: var(--reader-ink); - font-size: 0.9rem; + font-size: var(--text-ui); display: grid; place-content: center; cursor: pointer; @@ -1208,7 +1211,7 @@ book-content { */ .shelf-section-title { margin: 0.9rem 0 0.55rem; - font-size: 0.83rem; + font-size: var(--text-label); font-weight: 600; letter-spacing: 0.04em; color: var(--reader-muted); @@ -1252,7 +1255,7 @@ book-content { } .shelf-count { - font-size: 0.75rem; + font-size: var(--text-meta); white-space: nowrap; flex: 0 0 auto; font-variant-numeric: tabular-nums; @@ -1275,7 +1278,7 @@ book-content { } .shelf-refresh { - font-size: 0.78rem; + font-size: var(--text-label); color: var(--reader-muted); text-align: center; padding: 0.35rem 0; @@ -1378,7 +1381,7 @@ book-content { width: 2rem; min-width: 2rem; padding: 0; - font-size: 0.95rem; + font-size: var(--text-body); } /* A run of pages the window collapsed. Not a target: there is nothing here to press @@ -1619,7 +1622,7 @@ book-content { align-items: center; justify-content: center; padding: 0.7rem 0.55rem; - font-size: 0.78rem; + font-size: var(--text-label); font-weight: 500; line-height: 1.35; text-align: center; @@ -1655,14 +1658,14 @@ book-content { color: #fff; border-radius: var(--radius-xs); padding: 0.05rem 0.3rem; - font-size: 0.6rem; + font-size: var(--text-micro); letter-spacing: 0.03em; text-transform: uppercase; backdrop-filter: blur(4px); } .book-card .title { - font-size: 0.8rem; + font-size: var(--text-label); line-height: 1.3; font-weight: 520; display: -webkit-box; @@ -1676,7 +1679,7 @@ book-content { } .book-card .author { - font-size: 0.7rem; + font-size: var(--text-meta); color: var(--reader-muted); white-space: nowrap; overflow: hidden; @@ -1799,12 +1802,12 @@ book-content { .empty-state p { margin: 0; - font-size: 0.95rem; + font-size: var(--text-body); font-weight: 550; } .empty-state p.muted { - font-size: 0.78rem; + font-size: var(--text-label); font-weight: 400; line-height: 1.5; } @@ -1838,11 +1841,11 @@ book-content { .sheet .switch-text { flex: 1 1 auto; min-width: 0; - font-size: 0.9rem; + font-size: var(--text-ui); } .sheet .switch-text .muted { - font-size: 0.72rem; + font-size: var(--text-meta); margin-top: 0.15rem; } @@ -2331,7 +2334,7 @@ book-content { background: color-mix(in srgb, var(--reader-surface) 78%, transparent); backdrop-filter: blur(6px); color: var(--reader-ink); - font-size: 1.05rem; + font-size: var(--text-title); cursor: pointer; touch-action: manipulation; box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent); @@ -2514,7 +2517,7 @@ book-content { .tts-bar .tts-text { flex: 0 1 auto; max-width: 40%; - font-size: 0.78rem; + font-size: var(--text-label); color: var(--reader-muted); white-space: nowrap; overflow: hidden; @@ -2544,7 +2547,7 @@ book-content { color: var(--reader-muted); border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; - font-size: 0.72rem; + font-size: var(--text-meta); white-space: nowrap; cursor: pointer; } @@ -2763,44 +2766,44 @@ book-content { .login-card { max-width:35rem; width:100%; margin:0 auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } .login-heading { margin-bottom:2.25rem; } .login-brand { font-size:2.35rem; line-height:1.15; font-weight:750; letter-spacing:-.035em; color:var(--reader-ink); } -.login-heading p { font-size:1.05rem; line-height:1.7; margin:.3rem 0 0; color:var(--reader-muted); } +.login-heading p { font-size:var(--text-title); line-height:1.7; margin:.3rem 0 0; color:var(--reader-muted); } .login-card .field { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin: 0 0 1rem; } -.login-card .field label { font-size: 1rem; color: var(--reader-ink); } +.login-card .field label { font-size: var(--text-title); color: var(--reader-ink); } .login-card .field label em { color:#e66d67; font-style:normal; } -.login-card input { width: 100%; min-width: 0; min-height: 46px; box-sizing:border-box; padding: .65rem .85rem; font-size: 16px; border:1px solid var(--reader-line); border-radius:var(--radius-xs); background:var(--reader-surface); color:var(--reader-ink); } +.login-card input { width: 100%; min-width: 0; min-height: 46px; box-sizing:border-box; padding: .65rem .85rem; font-size: var(--text-title); border:1px solid var(--reader-line); border-radius:var(--radius-xs); background:var(--reader-surface); color:var(--reader-ink); } .login-card input:focus { border-color:var(--reader-accent); outline:2px solid color-mix(in srgb,var(--reader-accent) 28%,transparent); outline-offset:1px; } .login-connection { margin-bottom: 1.4rem; border-bottom: 1px solid var(--reader-line); padding-bottom: .9rem; } -.login-connection summary { font-size: .9rem; color: var(--reader-muted); cursor: pointer; } -.login-connection summary span { float: right; font-size: .85rem; color:var(--reader-ink); } +.login-connection summary { font-size: var(--text-ui); color: var(--reader-muted); cursor: pointer; } +.login-connection summary span { float: right; font-size: var(--text-ui); color:var(--reader-ink); } .login-connection[open] .field { margin: 1rem 0 0; } .login-server-input { position:relative; } .login-server-input input { padding-right:3.25rem; } -.login-server-status { position:absolute; right:.45rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; min-width:1.8rem; height:1.8rem; border-radius:50%; background:#51b95b; color:#fff; font-size:.8rem; font-weight:700; } +.login-server-status { position:absolute; right:.45rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; min-width:1.8rem; height:1.8rem; border-radius:50%; background:#51b95b; color:#fff; font-size:var(--text-label); font-weight:700; } .login-server-status.is-probing { background:#9aa3ae; } -.login-server-meta { display:flex; align-items:center; justify-content:space-between; color:var(--reader-muted); font-size:.88rem; margin-top:.35rem; } +.login-server-meta { display:flex; align-items:center; justify-content:space-between; color:var(--reader-muted); font-size:var(--text-ui); margin-top:.35rem; } .login-password-input { position:relative; } .login-password-input input { padding-right:3rem; } .login-password-toggle { position:absolute; right:.15rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:2.5rem; height:2.5rem; min-height:0; padding:0; border:0; background:transparent; color:var(--reader-muted); cursor:pointer; } .login-password-toggle:hover { color:var(--reader-ink); } -.login-submit { width: 100%; min-height: 50px; margin-top: .8rem; font-size: 1rem; border-radius: var(--radius-sm); background:var(--reader-fill); border-color:var(--reader-fill); color:var(--reader-on-fill); } +.login-submit { width: 100%; min-height: 50px; margin-top: .8rem; font-size: var(--text-title); border-radius: var(--radius-sm); background:var(--reader-fill); border-color:var(--reader-fill); color:var(--reader-on-fill); } .login-submit:hover { background:color-mix(in srgb, var(--reader-fill) 88%, var(--reader-ink)); border-color:transparent; } -.login-card .login-notice { margin-top:.95rem; padding:1rem 1.1rem; border-radius:var(--radius-xs); background:var(--color-brand-soft); color:var(--reader-ink); font-size:1rem; line-height:1.6; } +.login-card .login-notice { margin-top:.95rem; padding:1rem 1.1rem; border-radius:var(--radius-xs); background:var(--color-brand-soft); color:var(--reader-ink); font-size:var(--text-title); line-height:1.6; } .login-card .login-notice.is-warning { background:var(--color-surface-2); color:var(--reader-ink); } .login-card .login-notice.is-error { background:var(--color-danger-soft); color:var(--color-danger); } -.login-register-hint { color:var(--reader-muted); font-size:.82rem; } -.login-session-hint { text-align: center; font-size: .72rem; color: var(--reader-muted); line-height: 1.6; margin: .85rem 0 1.4rem; } -.login-switch { display: flex; align-items: center; justify-content: center; gap: .25rem; font-size: .85rem; color: var(--reader-muted); } +.login-register-hint { color:var(--reader-muted); font-size:var(--text-label); } +.login-session-hint { text-align: center; font-size: var(--text-meta); color: var(--reader-muted); line-height: 1.6; margin: .85rem 0 1.4rem; } +.login-switch { display: flex; align-items: center; justify-content: center; gap: .25rem; font-size: var(--text-ui); color: var(--reader-muted); } .login-switch button { min-height: 44px; border: 0; padding: .5rem; background: transparent; color: var(--reader-accent); font: inherit; cursor: pointer; } .user-management { display: grid; gap: 1rem; } .user-manager-actions { display: flex; flex-wrap: wrap; gap: .5rem; } .user-manager-actions input { flex: 1; min-width: 120px; } .user-manager-form { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); } .user-manager-form label, .user-manager-mode { display: grid; gap: .4rem; } -.user-management input, .user-management select { min-width: 0; width: 100%; min-height: 44px; font-size: 16px; padding: .65rem .75rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); background: var(--reader-paper); color: var(--reader-ink); } +.user-management input, .user-management select { min-width: 0; width: 100%; min-height: 44px; font-size: var(--text-title); padding: .65rem .75rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); background: var(--reader-paper); color: var(--reader-ink); } .user-management .extension-tabs button[aria-pressed=true] { color: var(--reader-accent); border-bottom-color: var(--reader-accent); } .user-manager-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; } .user-manager-list li { padding: 1rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); overflow-wrap: anywhere; } -.user-manager-list p { margin: .5rem 0; font-size: .85rem; } +.user-manager-list p { margin: .5rem 0; font-size: var(--text-ui); } .user-management summary { cursor: pointer; min-height: 44px; padding-block: .65rem; } @media (max-width: 700px) { .login-screen { padding: 2rem 1rem 3rem; } .login-card { margin-inline:auto; } } @@ -2808,7 +2811,7 @@ book-content { background: color-mix(in srgb, var(--reader-accent) 12%, var(--reader-surface)); border-radius: var(--reader-radius); padding: 0.6rem 0.75rem; - font-size: 0.82rem; + font-size: var(--text-label); margin-bottom: 0.9rem; } @@ -2904,7 +2907,7 @@ book-content { background: var(--reader-surface); color: var(--reader-ink); padding: 0.5rem; - font-size: 0.85rem; + font-size: var(--text-ui); cursor: pointer; } @@ -3095,7 +3098,7 @@ book-content { */ .library-preview-hint { padding: 0.5rem calc(0.9rem + var(--shelf-search-inset)) 0; - font-size: 0.75rem; + font-size: var(--text-meta); line-height: 1.4; } @@ -3148,7 +3151,7 @@ book-content { padding: 0.15rem 0.4rem; background: color-mix(in srgb, var(--reader-fill) 92%, transparent); color: var(--reader-on-fill); - font-size: 0.6rem; + font-size: var(--text-micro); font-family: inherit; line-height: 1.5; backdrop-filter: blur(4px); @@ -3158,7 +3161,7 @@ book-content { } .book-card .book-shelve .icon { - font-size: 0.7rem; + font-size: var(--text-meta); } .manager-crumbs { @@ -3180,7 +3183,7 @@ book-content { border: 0; background: transparent; color: var(--reader-ink); - font-size: 0.9rem; + font-size: var(--text-ui); font-family: inherit; padding: 0.35rem 0.25rem; white-space: nowrap; @@ -3329,7 +3332,7 @@ book-content { } .manager-icon { - font-size: 1rem; + font-size: var(--text-title); flex: 0 0 auto; /* * The row's label is a single line of 0.9rem text in a flex box that centres its @@ -3343,14 +3346,14 @@ book-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 0.9rem; + font-size: var(--text-ui); } .manager-meta { display: flex; align-items: center; gap: 0.5rem; - font-size: 0.72rem; + font-size: var(--text-meta); white-space: nowrap; } @@ -3358,7 +3361,7 @@ book-content { border: 1px solid color-mix(in srgb, var(--reader-line) 90%, transparent); border-radius: var(--radius-pill); padding: 0.02rem 0.35rem; - font-size: 0.62rem; + font-size: var(--text-micro); letter-spacing: 0.01em; color: var(--reader-muted); background: color-mix(in srgb, var(--reader-ink) 3%, transparent); @@ -3388,7 +3391,7 @@ book-content { .manager-more { width: 2rem; height: 2rem; - font-size: 1.1rem; + font-size: var(--text-title); /* * It is an `.icon-button`, so it is already inline-grid and already centred; this * only has to state where in the row it sits. Left to `baseline`, the button's @@ -3421,7 +3424,7 @@ book-content { .manager-status { position: sticky; inset-block-end: 0; - font-size: 0.75rem; + font-size: var(--text-meta); text-align: center; padding: 0.5rem 0.75rem; background: color-mix(in srgb, var(--reader-surface) 92%, transparent); @@ -3479,7 +3482,7 @@ book-content { color: var(--reader-paper); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem; - font-size: 0.72rem; + font-size: var(--text-meta); pointer-events: none; z-index: 25; } @@ -3547,20 +3550,20 @@ book-content { /* Source management shares the reader's type and colour tokens. */ .sources-screen { display:flex; flex-direction:column; min-height:0; height:100%; flex:1; } .sources-header { display:flex; align-items:center; gap:1rem; padding:1rem; border-bottom:1px solid var(--reader-line); } -.sources-header h1 { font-size:1.25rem; flex:1; margin:0; } +.sources-header h1 { font-size:var(--text-display); flex:1; margin:0; } .sources-header-text { flex:1; min-width:0; } .sources-header-text p { margin:.25rem 0 0; font-size:var(--text-meta); } .sources-tabs { display:flex; flex-wrap:wrap; gap:.5rem; padding:.75rem 1rem; } .sources-body { overflow:auto; padding:0 1rem 2rem; flex:1; } .sources-card { max-width:64rem; margin:0 auto 1rem; padding:1rem; border:1px solid var(--reader-line); border-radius:var(--radius-lg); } -.sources-card h2 { margin:.25rem 0 1rem; font-size:1.1rem; } +.sources-card h2 { margin:.25rem 0 1rem; font-size:var(--text-title); } .sources-card label { display:flex; flex-direction:column; gap:.4rem; margin:.75rem 0; } .sources-card input:not([type=checkbox]), .sources-card select, .sources-card textarea { width:100%; box-sizing:border-box; padding:.65rem; border:1px solid var(--reader-line); border-radius:var(--radius-sm); background:var(--reader-surface); color:inherit; font:inherit; } .sources-card textarea { min-height:6rem; } .sources-row { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; padding:1rem 0; border-top:1px solid var(--reader-line); } .sources-row > div:first-child { flex:1 1 15rem; min-width:0; overflow-wrap:anywhere; } .sources-row small { display:block; margin-top:.35rem; opacity:.75; } -.source-interval { display:inline-flex !important; flex-direction:row !important; align-items:center; gap:.45rem !important; margin:0 !important; color:var(--reader-muted); font-size:.8rem; } +.source-interval { display:inline-flex !important; flex-direction:row !important; align-items:center; gap:.45rem !important; margin:0 !important; color:var(--reader-muted); font-size:var(--text-label); } .source-interval select { min-height:40px !important; width:auto !important; padding:.45rem .55rem !important; } .source-catalog-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:.5rem 0 1rem; } .source-navigation { flex-wrap:wrap; margin:.5rem 0 1rem; } @@ -3570,12 +3573,12 @@ book-content { .sources-actions label { margin:0; } .sources-card .sources-consent { flex-direction:row; align-items:center; } .sources-search { display:flex; flex-wrap:wrap; align-items:end; gap:.85rem; margin:1rem 0 1.5rem; } -.sources-search label { flex:1 1 10rem; min-width:0; margin:0; font-size:.85rem; color:var(--reader-muted); } +.sources-search label { flex:1 1 10rem; min-width:0; margin:0; font-size:var(--text-ui); color:var(--reader-muted); } .sources-search .source-keyword { flex:2 1 18rem; } .sources-search button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:.5rem; } .sources-search input, .sources-search select { min-height:44px; color:var(--reader-ink); } .catalog-feedback { margin:1rem 0; padding-top:1.25rem; border-top:1px solid var(--reader-line); } -.search-progress { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding:1rem; border-radius:var(--radius-md); background:color-mix(in srgb,var(--reader-accent) 6%,var(--reader-paper)); font-size:.9rem; } +.search-progress { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding:1rem; border-radius:var(--radius-md); background:color-mix(in srgb,var(--reader-accent) 6%,var(--reader-paper)); font-size:var(--text-ui); } .search-progress progress { width:10rem; max-width:100%; height:.45rem; accent-color:var(--reader-accent); } .search-progress small { color:var(--reader-muted); } .search-stop { border-color:var(--reader-accent); } @@ -3587,24 +3590,24 @@ book-content { .search-menu { position:absolute; right:0; top:calc(100% + .45rem); z-index:5; width:min(17rem, calc(100vw - 4rem)); padding:.35rem; border:1px solid var(--reader-line); border-radius:var(--radius-md); background:var(--reader-paper); box-shadow:0 8px 24px #0002; } .search-menu button { display:flex; align-items:center; width:100%; padding:.65rem .75rem; text-align:left; border:0; background:transparent; color:var(--reader-ink); border-radius:var(--radius-sm); } .search-menu button:hover, .search-menu button:focus-visible { background:color-mix(in srgb, var(--reader-accent) 12%, transparent); } -.search-menu small { display:block; margin-top:.2rem; color:var(--reader-muted); font-size:.75rem; } +.search-menu small { display:block; margin-top:.2rem; color:var(--reader-muted); font-size:var(--text-meta); } .catalog-summary { display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; align-items:center; } -.catalog-summary strong { font-size:1rem; } -.catalog-summary span { display:flex; align-items:center; gap:.4rem; color:var(--reader-muted); font-size:.85rem; } -.catalog-context { color:var(--reader-muted); font-size:.82rem; line-height:1.7; overflow-wrap:anywhere; margin:.4rem 0 .75rem; } +.catalog-summary strong { font-size:var(--text-title); } +.catalog-summary span { display:flex; align-items:center; gap:.4rem; color:var(--reader-muted); font-size:var(--text-ui); } +.catalog-context { color:var(--reader-muted); font-size:var(--text-label); line-height:1.7; overflow-wrap:anywhere; margin:.4rem 0 .75rem; } .catalog-errors { padding:.7rem 1rem; border:1px solid var(--reader-line); border-radius:var(--radius-md); background:color-mix(in srgb,var(--reader-muted) 5%,var(--reader-paper)); } -.catalog-errors summary { cursor:pointer; font-size:.85rem; color:var(--reader-muted); } +.catalog-errors summary { cursor:pointer; font-size:var(--text-ui); color:var(--reader-muted); } .catalog-errors summary:focus-visible { outline:2px solid var(--reader-accent); outline-offset:4px; } .catalog-errors ul { list-style:none; margin:.6rem 0 0; padding:0; } -.catalog-errors li { display:grid; grid-template-columns:minmax(7rem,1fr) minmax(0,3fr) auto; align-items:baseline; gap:.3rem 1rem; padding:.6rem 0; border-top:1px solid var(--reader-line); font-size:.84rem; overflow-wrap:anywhere; } +.catalog-errors li { display:grid; grid-template-columns:minmax(7rem,1fr) minmax(0,3fr) auto; align-items:baseline; gap:.3rem 1rem; padding:.6rem 0; border-top:1px solid var(--reader-line); font-size:var(--text-label); overflow-wrap:anywhere; } .catalog-errors li strong { font-weight:500; } .catalog-errors li p { margin:0; line-height:1.6; color:var(--reader-muted); } -.catalog-errors code { font-size:.7rem; color:var(--reader-muted); } +.catalog-errors code { font-size:var(--text-meta); color:var(--reader-muted); } .catalog-empty { display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center; padding:2.5rem 1rem; } .catalog-empty > .icon { font-size:1.7rem; color:var(--reader-muted); } -.catalog-empty p { margin:0; font-size:.9rem; color:var(--reader-muted); line-height:1.7; } +.catalog-empty p { margin:0; font-size:var(--text-ui); color:var(--reader-muted); line-height:1.7; } .catalog-book { padding:1.4rem 0; align-items:flex-start; } -.catalog-book strong { font-size:1.05rem; } +.catalog-book strong { font-size:var(--text-title); } .catalog-book .source-description { line-height:1.75; color:var(--reader-muted); margin:.7rem 0 0; } .catalog-book .sources-actions { padding-top:.2rem; } .catalog-pagination { display:flex; justify-content:flex-end; gap:.6rem; padding-top:1rem; border-top:1px solid var(--reader-line); } @@ -3615,7 +3618,7 @@ book-content { .sources-search > .search-split { width:100%; } .search-split > .primary:first-child { flex:1; } } -.source-description { max-height:6rem; overflow:auto; font-size:.9rem; white-space:pre-wrap; } +.source-description { max-height:6rem; overflow:auto; font-size:var(--text-ui); white-space:pre-wrap; } /* Mobile reading: the surface and its information strip never resize with chrome. */ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; } @@ -3634,7 +3637,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti gap: 1rem; color: var(--reader-muted); background: var(--reader-paper); - font-size: 0.72rem; + font-size: var(--text-meta); line-height: 1.2; z-index: var(--reader-layer-readout); pointer-events: none; @@ -3658,8 +3661,8 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti box-shadow: 0 2px 12px #0000000a; } .reader-heading { min-width: 0; display: grid; gap: 0.3rem; } -.reader-heading strong { font-size: 1.05rem; font-weight: 600; } -.reader-heading span { font-size: 0.75rem; color: var(--reader-muted); } +.reader-heading strong { font-size: var(--text-title); font-weight: 600; } +.reader-heading span { font-size: var(--text-meta); color: var(--reader-muted); } .reader-heading strong, .reader-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reader-screen .footer { height: var(--reader-footer-height); @@ -3669,14 +3672,14 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti box-shadow: 0 -2px 12px #0000000a; } .reader-screen .progress-row { display: flex; align-items: center; gap: 0.75rem; padding: 0; min-height: 3rem; } -.reader-screen .nav-chapter { flex: 0 0 auto; font-size: 0.8rem; padding: 0.35rem 0; min-height: 44px; } +.reader-screen .nav-chapter { flex: 0 0 auto; font-size: var(--text-label); padding: 0.35rem 0; min-height: 44px; } .reader-scrub { flex: 1; min-width: 0; display: grid; text-align: center; } .reader-screen .progress-scrubber { width: 100%; min-height: 28px; margin: 0; } -.reader-screen .progress-page { font-size: 0.65rem; color: var(--reader-muted); } +.reader-screen .progress-page { font-size: var(--text-micro); color: var(--reader-muted); } .reader-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.25rem; } .reader-actions .top-button { min-width: 0; max-width: none; min-height: 60px; padding: 0.45rem 0; gap: 0.45rem; } -.reader-actions .icon { font-size: 1.4rem; } -.reader-actions .top-button-label { font-size: 0.75rem; font-weight: 400; } +.reader-actions .icon { font-size: var(--text-display); } +.reader-actions .top-button-label { font-size: var(--text-meta); font-weight: 400; } .reader-screen .reader-rail { top: auto; bottom: calc(var(--reader-footer-height) + 1rem); @@ -3691,7 +3694,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti box-shadow: none; } .reader-screen .rail-button { width: 48px; height: 48px; border-radius: 50%; background: var(--reader-surface); box-shadow: 0 3px 12px #00000020; } -.reader-screen .rail-button .icon { font-size: 1.5rem; } +.reader-screen .rail-button .icon { font-size: var(--text-display); } @media (max-width: 700px) { .reader-screen .sheet { max-height: min(62dvh, 36rem); } } .reader-screen .sheet .field { padding-block: 0.8rem; } .reader-screen .sheet .tts-bar { position: static; border-radius: var(--radius-md); width: auto; transform: none; margin-bottom: 1rem; } @@ -3712,7 +3715,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .extension-tabs button { flex: 0 0 auto; white-space: nowrap; padding: 12px 16px; background: transparent; color: inherit; border: 0; border-bottom: 3px solid transparent; cursor: pointer; font: inherit; } .extension-tabs button[aria-selected="true"] { border-bottom-color: currentColor; font-weight: 700; } .extension-tabs button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; } -.extension-screen h2 { font-size: 1rem; margin: 20px 0 12px; } +.extension-screen h2 { font-size: var(--text-title); margin: 20px 0 12px; } .extension-screen h3 { margin: 0 0 8px; } .extension-item-heading { display: flex; gap: 16px; align-items: start; justify-content: space-between; } .extension-item-heading > div { min-width: 0; } @@ -3761,28 +3764,28 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .sources-tab-dot { display: inline-block; width: 6px; height: 6px; margin: 0 0 .2rem .35rem; border-radius: 50%; background: var(--reader-fill); } .sources-list-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; } .sources-list-heading h2 { margin: 0; } -.source-count { margin-inline-start: .3rem; font-size: .8rem; color: var(--reader-muted); font-weight: 400; } +.source-count { margin-inline-start: .3rem; font-size: var(--text-label); color: var(--reader-muted); font-weight: 400; } .source-add { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .5rem .7rem; } .sources-list .source-entry { display: block; padding: 1rem 0; } .sources-list .source-entry:last-child { padding-bottom: 0; } .source-entry-top { display: flex; align-items: center; gap: 1rem; } .source-entry-info { flex: 1; min-width: 0; } .source-entry-info strong { display: block; line-height: 1.5; } -.source-entry-info small { font-size: .8rem; color: var(--reader-muted); opacity: 1; } -.source-state { display: inline-block; font-size: .72rem; color: var(--reader-muted); margin-top: .5rem; } +.source-entry-info small { font-size: var(--text-label); color: var(--reader-muted); opacity: 1; } +.source-state { display: inline-block; font-size: var(--text-meta); color: var(--reader-muted); margin-top: .5rem; } .source-state::before { content: ''; display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; margin-right: .35rem; } .source-state.is-enabled { color: var(--reader-accent); } .source-entry-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } -.source-manage-trigger { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 44px; padding: .4rem; border: 0; background: transparent; font: inherit; font-size: .85rem; color: var(--reader-muted); cursor: pointer; } +.source-manage-trigger { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 44px; padding: .4rem; border: 0; background: transparent; font: inherit; font-size: var(--text-ui); color: var(--reader-muted); cursor: pointer; } .source-manage-trigger[aria-expanded=true] .icon { transform: rotate(90deg); } .source-management { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .85rem; padding: .5rem .75rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--reader-ink) 4%, transparent); } -.source-management-link { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .5rem 0; border: 0; background: transparent; color: var(--reader-ink); font: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; } +.source-management-link { display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .5rem 0; border: 0; background: transparent; color: var(--reader-ink); font: inherit; font-size: var(--text-ui); text-decoration: none; cursor: pointer; } .source-management-link:disabled, .source-manage-trigger:disabled, .sources-hub [role=tab]:disabled { opacity: .5; cursor: default; } .source-toggle { color: var(--reader-muted); } -.sources-hub .sources-tabs [role=tab] { font-size: .9rem; } +.sources-hub .sources-tabs [role=tab] { font-size: var(--text-ui); } .source-picker label { max-width: 32rem; } .sources-search .searchable-select { flex: 1 1 12rem; min-width: 12rem; } -.sources-search .searchable-select-label, .source-picker .searchable-select-label { display:block; margin: 0 0 .4rem; color: var(--reader-muted); font-size:.8rem; font-weight:600; letter-spacing:.01em; } +.sources-search .searchable-select-label, .source-picker .searchable-select-label { display:block; margin: 0 0 .4rem; color: var(--reader-muted); font-size:var(--text-label); font-weight:600; letter-spacing:.01em; } .sources-search .searchable-select-trigger { text-align:left; } .sources-search .searchable-select > .searchable-select-trigger { min-height: 46px; border-radius: var(--radius-md); background: var(--reader-surface); } .sources-search .searchable-select-menu { width: min(22rem, calc(100vw - 3rem)); border-radius: var(--radius-md); } @@ -3794,8 +3797,8 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .source-picker { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 2rem; } .source-picker > div { flex:1; } .source-picker > div h2 { margin:0 0 .35rem; } - .source-picker > div p { margin:0; font-size:.85rem; } - .source-picker > label { flex:1; margin:0; font-size:.85rem; color:var(--reader-muted); } + .source-picker > div p { margin:0; font-size:var(--text-ui); } + .source-picker > label { flex:1; margin:0; font-size:var(--text-ui); color:var(--reader-muted); } .source-picker > p { flex-basis:100%; margin:0; } .source-picker > .source-picker-cta { margin-top: calc(var(--space-3) * -0.5); } } @@ -3807,29 +3810,29 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .collection-header { padding: calc(1.25rem + var(--safe-top)) calc(.9rem + var(--safe-right)) .75rem calc(.9rem + var(--safe-left)); flex: none; } .collection-heading { display: flex; align-items: center; gap: .5rem; } .collection-heading-text { flex: 1; min-width: 0; } -.collection-heading h1 { margin: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; } -.collection-heading p { margin: .45rem 0 0; font-size: .78rem; line-height: 1.5; } +.collection-heading h1 { margin: 0; font-size: var(--text-display); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; } +.collection-heading p { margin: .45rem 0 0; font-size: var(--text-label); line-height: 1.5; } .collection-links { display: flex; gap: .65rem; margin-top: .85rem; } .shelf-links { max-width: calc(var(--shelf-measure) - 1.8rem); margin: 0 auto .9rem; padding-inline: calc(.9rem + var(--safe-left)) calc(.9rem + var(--safe-right)); } -.collection-link.button { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; min-height: 48px; padding: .7rem .85rem; font-size: .875rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--reader-accent) 4%, var(--reader-paper)); border-color: color-mix(in srgb, var(--reader-line) 65%, transparent); text-align: start; } +.collection-link.button { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; min-height: 48px; padding: .7rem .85rem; font-size: var(--text-ui); border-radius: var(--radius-md); background: color-mix(in srgb, var(--reader-accent) 4%, var(--reader-paper)); border-color: color-mix(in srgb, var(--reader-line) 65%, transparent); text-align: start; } .collection-link.button, .collection-link.button > span { white-space: nowrap; } .collection-link > span { flex: 1; } .collection-link[hidden] { display: none; } .collection-link > .icon:first-child { color: var(--reader-accent); } -.collection-link > .icon:last-child { color: var(--reader-muted); font-size: .8rem; } +.collection-link > .icon:last-child { color: var(--reader-muted); font-size: var(--text-label); } .shelf-links .collection-link.button { min-height: 44px; padding: .6rem .75rem; border-radius: var(--radius-md); box-shadow: none; } .shelf-links .collection-link.button > svg { flex: 0 0 auto; width: 17px; height: 17px; } -.shelf-links .collection-link.button > span:last-child { flex: 0 0 auto; font-size: 1rem; line-height: 1; } +.shelf-links .collection-link.button > span:last-child { flex: 0 0 auto; font-size: var(--text-title); line-height: 1; } .shelf-screen .shelf-search input, .library-search input { border-radius: var(--radius-lg); min-height: 48px; } .library-browse-screen .library-search { margin-top: .35rem; } .library-path { margin-top: .75rem; padding: .25rem 0 0; } .library-path .manager-crumb { min-height: 44px; } .collection-empty.empty-state { width: calc(100% - 2rem); max-width: 30rem; margin: clamp(1.5rem, 7vh, 4rem) auto 2rem; padding: 1.75rem 1.25rem; gap: .7rem; border: 1px solid var(--reader-line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--reader-surface) 45%, var(--reader-paper)); } .collection-empty .empty-glyph { box-sizing: content-box; width: 30px; height: 30px; padding: 1rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--reader-accent) 9%, transparent); color: var(--reader-accent); opacity: 1; margin-bottom: .5rem; } -.collection-empty p { font-size: 1.1rem; line-height: 1.5; } -.collection-empty p.muted { max-width: 23rem; font-size: .875rem; line-height: 1.8; text-wrap: pretty; } +.collection-empty p { font-size: var(--text-title); line-height: 1.5; } +.collection-empty p.muted { max-width: 23rem; font-size: var(--text-ui); line-height: 1.8; text-wrap: pretty; } .collection-empty .empty-actions { margin-top: .6rem; gap: .65rem; } -.collection-empty .button { min-height: 44px; font-size: .875rem; } +.collection-empty .button { min-height: 44px; font-size: var(--text-ui); } /* Browsing pages with a pager, so the count is a footer line, not a sticky overlay over the grid. */ .library-browse-body > .manager-status { position: static; background: transparent; backdrop-filter: none; border: 0; margin: .75rem auto; } .file-manager-header .manager-crumbs { margin-top: .75rem; padding: .25rem 0; } @@ -3877,7 +3880,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .library-files-screen .manager-more { grid-column: 4; grid-row: 1; } .shelf-settings .switch-field { grid-template-columns: minmax(0, 1fr) auto; } .sources-header { width: calc(100% - 2 * var(--page-gutter) + 1.8rem); max-width: var(--collection-measure); margin-inline: auto; padding: 2rem .9rem .75rem; border-bottom: 0; } - .sources-header h1 { font-size: 1.5rem; font-weight: 650; } + .sources-header h1 { font-size: var(--text-display); font-weight: 650; } .sources-hub .sources-tabs [role=tab] { flex: 0 1 auto; min-width: 9rem; padding-inline: 1.5rem; } .extension-tabs button { min-width: 7rem; padding-inline: 1.5rem; } .sources-hub .sources-body, .extension-screen .sources-body, .sources-hub .sources-tabs, .extension-toolbar { width: calc(100% - 2 * var(--page-gutter) + 1.8rem); max-width: var(--collection-measure); margin-inline: auto; padding-inline: .9rem; } @@ -3888,23 +3891,23 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .reader-screen .stage::before { content: ''; position: absolute; inset: 0; width: var(--desktop-page-width); max-width: 100%; margin-inline: auto; background: var(--reader-paper); border-inline: 1px solid var(--reader-line); box-shadow: 0 0 40px #00000005; pointer-events: none; } .reader-screen .book-host[data-layout='reflowable'] { width: var(--desktop-page-width); max-width: 100%; margin-inline: auto; } .reader-screen .topbar { inset-inline: 2rem; width: calc(100% - 4rem); max-width: var(--desktop-page-width); min-height: 4.5rem; margin-inline: auto; padding-inline: 1.5rem; border-bottom: 1px solid var(--reader-line); background: var(--reader-paper); box-shadow: none; } - .reader-screen .topbar .reader-heading strong { font-size: 1rem; } - .reader-screen .topbar .reader-heading span { font-size: .72rem; } + .reader-screen .topbar .reader-heading strong { font-size: var(--text-title); } + .reader-screen .topbar .reader-heading span { font-size: var(--text-meta); } .reader-screen .footer { display: flex; align-items: center; gap: 1rem; inset-inline: 2rem; bottom: 1.5rem; width: calc(100% - 4rem); max-width: 50rem; height: 4.5rem; margin-inline: auto; padding: .55rem 1rem; border: 1px solid var(--reader-line); border-radius: var(--radius-lg); background: var(--reader-surface); box-shadow: 0 8px 32px #00000012; } .reader-screen .progress-row { flex: 1; min-width: 0; } .reader-screen .reader-actions { display: flex; gap: .25rem; padding-left: .75rem; border-left: 1px solid var(--reader-line); } .reader-screen .reader-actions .top-button { flex-direction: row; min-width: 4.75rem; min-height: 44px; padding: .5rem .7rem; border-radius: var(--radius-md); } .reader-screen .reader-actions .top-button:hover { background: color-mix(in srgb, var(--reader-accent) 10%, transparent); } - .reader-screen .reader-actions .icon { font-size: 1.1rem; } + .reader-screen .reader-actions .icon { font-size: var(--text-title); } .reader-screen .reader-rail { right: max(1rem, calc((100% - var(--desktop-page-width)) / 2 - 4.5rem)); bottom: 2.25rem; } - .reader-screen .reading-indicator { width: var(--desktop-page-width); max-width: 100%; margin-inline: auto; padding-inline: 1.5rem; font-size: .75rem; } + .reader-screen .reading-indicator { width: var(--desktop-page-width); max-width: 100%; margin-inline: auto; padding-inline: 1.5rem; font-size: var(--text-meta); } .reader-screen .sheet::backdrop { background: color-mix(in srgb, var(--reader-ink) 12%, transparent); } - .reader-screen .sheet .section-title { font-size: .78rem; font-weight: 650; letter-spacing: .05em; color: var(--reader-accent); padding-top: .9rem; padding-bottom: .65rem; } + .reader-screen .sheet .section-title { font-size: var(--text-label); font-weight: 650; letter-spacing: .05em; color: var(--reader-accent); padding-top: .9rem; padding-bottom: .65rem; } .reader-screen .section-title:first-child { margin-top: 0; } } @media (max-width: 600px) { .sources-header { gap:.6rem; padding-inline:.75rem; } - .sources-header h1 { font-size:1.15rem; } + .sources-header h1 { font-size:var(--text-title); } .source-entry-top { align-items:flex-start; flex-direction:column; gap:.6rem; } .source-entry-actions, .sources-actions { width:100%; flex-wrap:wrap; } .source-entry-actions .button, .sources-actions .button { flex:1 1 8rem; } @@ -3923,12 +3926,12 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .reader-screen .topbar { flex-wrap: wrap; } .reader-heading { flex: 1; } .reader-top-actions { display: flex; gap: .25rem; flex: none; margin-inline-start: auto; } -.reader-source-info { flex: 1 0 100%; display: flex; gap: .65rem; align-items: center; min-width: 0; font-size: .7rem; color: var(--reader-muted); border-top: 1px solid var(--reader-line); padding-top: .45rem; } +.reader-source-info { flex: 1 0 100%; display: flex; gap: .65rem; align-items: center; min-width: 0; font-size: var(--text-meta); color: var(--reader-muted); border-top: 1px solid var(--reader-line); padding-top: .45rem; } .reader-source-info span { flex: 0 1 auto; max-width: 35%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .reader-source-info a { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; text-decoration: none; } .reader-source-info a:hover { text-decoration: underline; } .book-detail { display: grid; gap: .5rem; } -.book-detail h3 { margin: 0; font-size: 1.35rem; overflow-wrap: anywhere; } +.book-detail h3 { margin: 0; font-size: var(--text-display); overflow-wrap: anywhere; } .book-detail-author { color: var(--reader-muted); } .book-detail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem 1rem; padding-block: .8rem; border-block: 1px solid var(--reader-line); } .book-detail dt { color: var(--reader-muted); } @@ -3946,7 +3949,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .catalog-book:has(.catalog-source-count) > div { flex: 1; min-width: 0; } .catalog-source-count { display: inline-flex; align-items: center; gap: .5rem; flex: none; min-height: 44px; white-space: nowrap; } .catalog-source-heading { padding-block: 1rem; border-bottom: 1px solid var(--reader-line); } -.catalog-source-heading h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; } +.catalog-source-heading h3 { margin: 0; font-size: var(--text-title); overflow-wrap: anywhere; } .catalog-source-heading p { margin: .4rem 0; color: var(--reader-muted); } .catalog-source-heading small { color: var(--reader-muted); } .catalog-source-item { padding-block: 1rem; border-bottom: 1px solid var(--reader-line); } @@ -3961,23 +3964,23 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .catalog-source-item .sources-actions { flex: none; } .catalog-source-item .source-description { margin-bottom: 0; } } -.source-default-badge { display: inline-block; margin-inline-start: .6rem; padding: .12rem .45rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--reader-accent) 10%, transparent); color: var(--reader-accent); font-size: .7rem; font-weight: 500; vertical-align: middle; } +.source-default-badge { display: inline-block; margin-inline-start: .6rem; padding: .12rem .45rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--reader-accent) 10%, transparent); color: var(--reader-accent); font-size: var(--text-meta); font-weight: 500; vertical-align: middle; } .source-switch { padding-block: .25rem 1rem; overflow-wrap: anywhere; } -.source-switch-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; font-size: .85rem; } -.source-switch-status strong { color: var(--reader-accent); font-size: .8rem; font-weight: 500; } +.source-switch-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; font-size: var(--text-ui); } +.source-switch-status strong { color: var(--reader-accent); font-size: var(--text-label); font-weight: 500; } .source-switch-status progress { width: 100%; height: 3px; accent-color: var(--reader-accent); } -.source-switch-hint { margin: .65rem 0 1rem; color: var(--reader-muted); font-size: .75rem; line-height: 1.6; } +.source-switch-hint { margin: .65rem 0 1rem; color: var(--reader-muted); font-size: var(--text-meta); line-height: 1.6; } .source-switch-list { display: grid; gap: .7rem; } .source-switch-card { display: flex; flex-direction: column; gap: .55rem; width: 100%; min-width: 0; padding: 1rem; border: 1px solid var(--reader-line); border-radius: var(--radius-lg); background: var(--reader-paper); color: var(--reader-ink); text-align: start; font: inherit; cursor: pointer; } .source-switch-card:hover { border-color: var(--reader-accent); background: color-mix(in srgb, var(--reader-accent) 4%, var(--reader-paper)); } .source-switch-card:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .source-switch-card:disabled { opacity: .55; cursor: default; } -.source-switch-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; font-size: .95rem; } +.source-switch-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; font-size: var(--text-body); } .source-switch-card-heading .icon { flex: none; color: var(--reader-muted); } -.source-switch-book { font-size: .82rem; line-height: 1.5; } +.source-switch-book { font-size: var(--text-label); line-height: 1.5; } .source-switch-book > span { color: var(--reader-muted); } -.source-switch-chapter { display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; line-height: 1.6; color: var(--reader-muted); } -.source-switch-chapter > span { flex: none; font-size: .7rem; } +.source-switch-chapter { display: flex; align-items: baseline; gap: .5rem; font-size: var(--text-label); line-height: 1.6; color: var(--reader-muted); } +.source-switch-chapter > span { flex: none; font-size: var(--text-meta); } .source-switch .catalog-feedback { margin-top: 1rem; } /* Reading tools share the reader modal, including narrow phone layouts. */ @@ -3986,34 +3989,34 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .reading-tool-tab { min-height: 48px; padding: .5rem .2rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--reader-ink); cursor: pointer; } .reading-tool-tab[aria-pressed="true"] { font-weight: 600; color: var(--reader-accent); border-bottom-color: var(--reader-accent); } .reading-tool-panel { padding: 1rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; } -.reading-tool-panel h3, .reading-tool-panel h4 { margin: 0; font-size: 1rem; } +.reading-tool-panel h3, .reading-tool-panel h4 { margin: 0; font-size: var(--text-title); } .reading-tool-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } -.reading-tool-heading small { font-weight: normal; font-size: .8rem; margin-inline-start: .25rem; } -.reading-tool-heading .button { font-size: .85rem; padding: .5rem .75rem; white-space: nowrap; } +.reading-tool-heading small { font-weight: normal; font-size: var(--text-label); margin-inline-start: .25rem; } +.reading-tool-heading .button { font-size: var(--text-ui); padding: .5rem .75rem; white-space: nowrap; } .reading-tool-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; } .reading-note-editor { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); background: var(--reader-surface); } -.reading-note-editor label small { font-size: .75rem; font-weight: normal; } +.reading-note-editor label small { font-size: var(--text-meta); font-weight: normal; } .reading-note-colors { display: flex; align-items: center; gap: .5rem; } -.reading-note-colors > span { font-size: .85rem; margin-inline-end: auto; } +.reading-note-colors > span { font-size: var(--text-ui); margin-inline-end: auto; } .reading-note-colors button { min-width: 44px; height: 44px; border: 2px solid transparent; border-radius: 50%; background: var(--note-color); color: #222; cursor: pointer; } .reading-note-colors button[aria-pressed="true"] { border-color: var(--reader-accent); box-shadow: inset 0 0 0 3px var(--reader-paper); } .reading-note-filters { display: flex; gap: .25rem; border-bottom: 1px solid var(--reader-line); } -.reading-note-filters button { min-height: 44px; padding: .5rem .65rem; background: transparent; color: var(--reader-ink); border: 0; border-bottom: 2px solid transparent; font-size: .8rem; cursor: pointer; } +.reading-note-filters button { min-height: 44px; padding: .5rem .65rem; background: transparent; color: var(--reader-ink); border: 0; border-bottom: 2px solid transparent; font-size: var(--text-label); cursor: pointer; } .reading-note-filters button[aria-pressed="true"] { color: var(--reader-accent); border-bottom-color: var(--reader-accent); font-weight: 600; } .reading-note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .reading-note-list li { border: 1px solid var(--reader-line); border-radius: var(--radius-md); overflow: hidden; } .reading-note-open { width: 100%; padding: .8rem; display: grid; gap: .5rem; text-align: start; background: transparent; color: var(--reader-ink); border: 0; cursor: pointer; } .reading-note-open strong, .reading-note-comment { font-weight: normal; line-height: 1.6; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } -.reading-note-kind { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--reader-accent); } -.reading-note-comment { font-size: .85rem; border-inline-start: 2px solid var(--reader-line); padding-inline-start: .65rem; } +.reading-note-kind { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-meta); color: var(--reader-accent); } +.reading-note-comment { font-size: var(--text-ui); border-inline-start: 2px solid var(--reader-line); padding-inline-start: .65rem; } .reading-note-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .25rem; padding: 0 .4rem; border-top: 1px solid var(--reader-line); } -.reading-note-actions button { min-height: 44px; padding: .4rem .6rem; border: 0; background: transparent; color: var(--reader-accent); font-size: .8rem; cursor: pointer; } -.reading-note-actions > span { margin-inline-end: auto; padding: .4rem; font-size: .8rem; } +.reading-note-actions button { min-height: 44px; padding: .4rem .6rem; border: 0; background: transparent; color: var(--reader-accent); font-size: var(--text-label); cursor: pointer; } +.reading-note-actions > span { margin-inline-end: auto; padding: .4rem; font-size: var(--text-label); } .reading-tool-empty { text-align: center; padding: 1.5rem .5rem; } .reading-tool-empty strong { font-weight: 500; } .reading-tool-empty .button { margin-top: .75rem; } .reading-tool-feedback { padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--reader-surface); color: var(--reader-accent); } -.annotation-popover { position: fixed; z-index: 60; box-sizing: border-box; padding: .6rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); box-shadow: 0 6px 28px #0003; background: var(--reader-paper); color: var(--reader-ink); font: 14px/1.5 system-ui,sans-serif; } +.annotation-popover { position: fixed; z-index: 60; box-sizing: border-box; padding: .6rem; border: 1px solid var(--reader-line); border-radius: var(--radius-md); box-shadow: 0 6px 28px #0003; background: var(--reader-paper); color: var(--reader-ink); font: var(--text-ui)/1.5 system-ui,sans-serif; } .annotation-actions { display: flex; gap: .25rem; } .annotation-actions button { flex: 1; min-height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--reader-accent); font: inherit; cursor: pointer; } .annotation-actions button:hover { background: var(--reader-surface); } @@ -4023,7 +4026,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .annotation-editor label { display: grid; gap: .5rem; } .annotation-editor textarea { box-sizing: border-box; width: 100%; min-height: 6rem; padding: .75rem; font: inherit; border: 1px solid var(--reader-line); border-radius: var(--radius-sm); background: var(--reader-paper); color: var(--reader-ink); resize: vertical; } .reading-tool-advanced { border-top: 1px solid var(--reader-line); padding-top: .5rem; } -.reading-tool-advanced summary { padding: .6rem 0; cursor: pointer; font-size: .9rem; } +.reading-tool-advanced summary { padding: .6rem 0; cursor: pointer; font-size: var(--text-ui); } .reading-tool-advanced > div { display: grid; gap: .75rem; padding-top: .5rem; } .reading-tools section { display: grid; gap: .75rem; } .reading-tools label { display: grid; gap: .3rem; } @@ -4039,11 +4042,11 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti .reading-tools { min-height: 0; } .reading-tools button, .reading-tools input, .reading-tools textarea, .reading-tools select { font: inherit; } -.reading-tools .reading-tool-tab { font-size: .875rem; } +.reading-tools .reading-tool-tab { font-size: var(--text-ui); } .reading-tools input, .reading-tools textarea, .reading-tools select { width: 100%; box-sizing: border-box; border: 1px solid var(--reader-line); border-radius: var(--radius-sm); padding: .6rem; background: var(--reader-paper); color: var(--reader-ink); } .reading-tools textarea { min-height: 5rem; resize: vertical; } .reading-tools form { display: grid; gap: .6rem; } -.reading-tools p { margin: .3rem 0; font-size: .9rem; line-height: 1.6; } +.reading-tools p { margin: .3rem 0; font-size: var(--text-ui); line-height: 1.6; } .reading-tool-results .button { text-align: start; width: 100%; margin-top: .25rem; } .reading-tools blockquote { border-inline-start: 3px solid var(--reader-accent); padding: .5rem .75rem; line-height: 1.6; } .source-capabilities { margin-block: 12px; overflow-wrap: anywhere; } @@ -4093,7 +4096,7 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti border-radius: var(--radius-pill); background: var(--color-brand-soft); color: var(--reader-accent); - font-size: 0.66rem; + font-size: var(--text-meta); font-weight: 600; pointer-events: none; } diff --git a/web/src/styles/sheet.css b/web/src/styles/sheet.css index a20aec7..97a06b0 100644 --- a/web/src/styles/sheet.css +++ b/web/src/styles/sheet.css @@ -148,7 +148,7 @@ background: var(--reader-paper); color: var(--reader-ink); /* 16px, so iOS does not zoom the page on focus and push the sheet off-screen. */ - font-size: 16px; + font-size: var(--text-title); font-family: inherit; } diff --git a/web/test/design-tokens.test.ts b/web/test/design-tokens.test.ts index 9a2ab86..76a97cf 100644 --- a/web/test/design-tokens.test.ts +++ b/web/test/design-tokens.test.ts @@ -22,4 +22,15 @@ describe('design tokens', () => { }); expect(offenders).toEqual([]); }); + + it('uses --text-* instead of literal font sizes up to 24px (ui.md §2.2)', () => { + // Above 24px is decorative (a player's initial, a hero numeral) and stays literal. + const offenders = stylesheets(root).flatMap(file => { + const source = readFileSync(file, 'utf8'); + return [...source.matchAll(/font-size:\s*(\d*\.?\d+)(px|rem)/g)] + .filter(([, size, unit]) => (unit === 'rem' ? Number(size) * 16 : Number(size)) <= 24) + .map(match => `${relative(root, file)}: ${match[0]}`); + }); + expect(offenders).toEqual([]); + }); });