mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-12 05:50:54 +08:00
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 <noreply@anthropic.com>
This commit is contained in:
hectorqinandClaude Opus 5.5 committed
1 parent
fbb7298bf0
commit
81ec4ba6bc
19 files changed
+644
-619
No files matched your search
+16
-5
@@ -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 动效：一个时长、一条曲线
|
||||
|
||||
|
||||
@@ -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; } }
|
||||
|
||||
@@ -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); }
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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)}
|
||||
@@ -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)}
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -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}}
|
||||
@@ -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)}
|
||||
@@ -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; }
|
||||
@@ -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; }
|
||||
@@ -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; }
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
+135
-132
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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([]);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user