mirror of
https://github.com/hectorqin/reader.git
synced 2026-11-10 21:11:08 +08:00
chore(web): remove CSS for classes nothing renders outside the media styles
32 class names in reader.css, action-menu.css and sheet.css had no reference in the source (the old quick-settings row, manager screen and selection bar, catalog source heading, source capabilities and editor, action-menu and sheet-list item parts, …); their rules, or their members of selector lists, are removed. Classes built at runtime (indicator-*, reading-indicator-*) and Notyf's own are kept. The reader review no longer checks for a .library-preview-hint the browsing page stopped drawing. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
hectorqinandClaude Opus 5.5 committed
1 parent
cdd9abd813
commit
a894bdd198
4 files changed
+5
-224
No files matched your search
@@ -31,88 +31,19 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.action-menu .action-menu-item {
|
||||
appearance: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: start;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-menu .action-menu-item.is-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.action-menu .action-menu-item:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.action-menu .action-menu-item:focus-visible {
|
||||
outline: 2px solid var(--color-brand-text);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.action-menu .action-menu-item[aria-checked='true'] {
|
||||
color: var(--color-brand-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-menu-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: none;
|
||||
width: 1.125rem;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.action-menu .action-menu-item.is-danger .action-menu-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.action-menu-label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.action-menu-description {
|
||||
display: block;
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-meta);
|
||||
line-height: 1.4;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.action-menu-check {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.action-menu .action-menu-item:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--color-ink) 7%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/* Two classes, so the media screens' generic `.media-screen button` rules lose. */
|
||||
/* Touch: a finger-sized row. */
|
||||
@media (pointer: coarse) {
|
||||
.action-menu .action-menu-item {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes action-menu-in {
|
||||
from { opacity: 0; transform: translateY(-4px); }
|
||||
|
||||
+3
-134
@@ -1211,11 +1211,6 @@ book-content {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.shelf-section-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* A section heading that reads as a heading rather than as bold body text.
|
||||
@@ -1226,13 +1221,6 @@ book-content {
|
||||
* heading *of* the section, so it also loses the underline the toolbar used to carry:
|
||||
* two horizontal rules 40px apart made the count row look like a separate band.
|
||||
*/
|
||||
.shelf-section-title {
|
||||
margin: 0.9rem 0 0.55rem;
|
||||
font-size: var(--text-label);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--reader-muted);
|
||||
}
|
||||
|
||||
/* ---- toolbar: the count and the sort, pinned to their section ---- */
|
||||
|
||||
@@ -1294,16 +1282,7 @@ book-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.shelf-refresh {
|
||||
font-size: var(--text-label);
|
||||
color: var(--reader-muted);
|
||||
text-align: center;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.shelf-refresh[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* ---- the pager ----
|
||||
@@ -2168,13 +2147,6 @@ book-content {
|
||||
* The two buttons are text-with-chevron rather than bare chevrons — the whole row
|
||||
* is a labelled destination, and a bare "‹" beside a bare "›" is a guess.
|
||||
*/
|
||||
.footer-row.chapter-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
padding: 0.15rem var(--reader-band-inset) 0.65rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* The chapter buttons' horizontal padding is *zero*.
|
||||
@@ -2212,16 +2184,6 @@ book-content {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.nav-progress {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
font-size: var(--text-label);
|
||||
color: var(--reader-muted);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ---- quick-action rail ----
|
||||
*
|
||||
@@ -2382,46 +2344,11 @@ book-content {
|
||||
|
||||
/* ---- quick rows in the settings sheet ---- */
|
||||
|
||||
.quick-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-2);
|
||||
padding: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.quick-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
padding: 0.55rem 0.3rem;
|
||||
border: 1px solid color-mix(in srgb, var(--reader-line) 80%, transparent);
|
||||
border-radius: var(--reader-radius);
|
||||
background: color-mix(in srgb, var(--reader-ink) 4%, transparent);
|
||||
color: var(--reader-ink);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.quick-button:active {
|
||||
background: color-mix(in srgb, var(--reader-ink) 10%, transparent);
|
||||
}
|
||||
|
||||
.quick-button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.quick-button .quick-label {
|
||||
font-size: var(--text-meta);
|
||||
color: var(--reader-muted);
|
||||
}
|
||||
|
||||
.quick-button .quick-value {
|
||||
font-size: var(--text-label);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ---- read-aloud bar ---- */
|
||||
|
||||
@@ -2995,8 +2922,7 @@ book-content {
|
||||
* the wrapper with no reader-visible effect and one more way for a stale selector to
|
||||
* silently stop matching.
|
||||
*/
|
||||
.library-screen,
|
||||
.manager-screen {
|
||||
.library-screen {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -3014,10 +2940,6 @@ book-content {
|
||||
* bar off the bottom of the phone. `display: contents` makes the host vanish for
|
||||
* layout purposes and keeps the tree's children exactly where they were.
|
||||
*/
|
||||
.library-ui,
|
||||
.manager-ui {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/* ---- library: the header's two-page switch ---- */
|
||||
|
||||
@@ -3160,15 +3082,7 @@ book-content {
|
||||
* sentence and an empty one should cost no space at all: a blank 18px row above a
|
||||
* grid of covers is a gap the reader reads as a rendering mistake.
|
||||
*/
|
||||
.library-preview-hint {
|
||||
padding: 0.5rem calc(0.9rem + var(--shelf-search-inset)) 0;
|
||||
font-size: var(--text-meta);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.library-preview-hint:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A preview card: the shelf's card, with a *second* control on it.
|
||||
@@ -3537,23 +3451,7 @@ book-content {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.manager-selection {
|
||||
position: absolute;
|
||||
inset-block-start: calc(var(--safe-top) + 0.25rem);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--reader-ink);
|
||||
color: var(--reader-paper);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 0.2rem 0.7rem;
|
||||
font-size: var(--text-meta);
|
||||
pointer-events: none;
|
||||
z-index: 25;
|
||||
}
|
||||
|
||||
.manager-selection[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button.danger {
|
||||
border-color: color-mix(in srgb, #c0392b 55%, transparent);
|
||||
@@ -3567,21 +3465,6 @@ book-content {
|
||||
* laid out still takes a tab stop, and this one has no meaning of its own — the
|
||||
* button beside it is what the user operates.
|
||||
*/
|
||||
.manager-upload-input {
|
||||
/* Android WebView may reject click() on an input with display:none. Keep the
|
||||
native picker in the layout as an invisible, non-obstructing control. */
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---- reduced motion ---- */
|
||||
|
||||
@@ -3810,11 +3693,8 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti
|
||||
.extension-screen input[type=checkbox] { width: 1.25rem; height: 1.25rem; }
|
||||
.extension-actions form + form { margin-top: 0; }
|
||||
.extension-actions .extension-form-inline { border-top: 1px solid var(--reader-line); padding-top: .75rem; }
|
||||
.extension-confirm { border: 1px solid var(--reader-line); border-radius: var(--radius-sm); padding: .75rem; margin-top: .5rem; }
|
||||
.extension-confirm p { margin: 0 0 .75rem; }
|
||||
.extension-confirm button + button { margin-inline-start: .5rem; }
|
||||
.extension-screen button, .source-next-step .button { min-height: 44px; }
|
||||
.source-catalog, .source-editor { scroll-margin-top: 1rem; }
|
||||
.extension-screen button { min-height: 44px; }
|
||||
.source-catalog { scroll-margin-top: 1rem; }
|
||||
@media (max-width: 600px) {
|
||||
.extension-screen .extension-form-inline label { flex-basis: 100%; }
|
||||
.extension-screen .extension-form-inline label[data-field-type=number] { flex: 1 1 9rem; }
|
||||
@@ -4013,10 +3893,6 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti
|
||||
.catalog-book:has(.catalog-source-count) { display: flex; align-items: center; gap: 1rem; }
|
||||
.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: 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); }
|
||||
.catalog-source-item:last-child { border-bottom: 0; }
|
||||
.catalog-source-item strong { overflow-wrap: anywhere; }
|
||||
@@ -4080,7 +3956,6 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti
|
||||
.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: 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; }
|
||||
@@ -4114,17 +3989,11 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti
|
||||
.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; }
|
||||
.source-capabilities summary { cursor: pointer; }
|
||||
.extension-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
|
||||
.extension-workbench > div { min-width: 0; }
|
||||
.extension-workbench textarea { min-height: 28rem; resize: vertical; font-family: ui-monospace, monospace; tab-size: 2; }
|
||||
.extension-workbench pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 65vh; overflow: auto; }
|
||||
@media (max-width: 800px) { .extension-workbench { grid-template-columns: minmax(0, 1fr); } .extension-workbench textarea { min-height: 20rem; } }
|
||||
.sources-row > .source-capabilities { flex-basis: 100%; }
|
||||
.source-capabilities dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
|
||||
.source-capabilities dl > div { padding: 8px; border: 1px solid currentColor; border-radius: var(--radius-sm); }
|
||||
.source-capabilities dd { margin: 4px 0 0; }
|
||||
|
||||
/* The class is on the sheet's <input> itself; a 16px font keeps iOS from zooming on focus. */
|
||||
.catalog-source-search { display:block; flex:none; width:100%; min-height:44px; box-sizing:border-box; padding:.6rem .8rem; border:1px solid var(--reader-line); border-radius:var(--radius-md); background:var(--reader-paper); color:var(--reader-ink); font:inherit; font-size:var(--text-title); }
|
||||
|
||||
@@ -220,29 +220,13 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sheet-list-description {
|
||||
display: block;
|
||||
color: var(--color-muted);
|
||||
font-size: var(--text-meta);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.sheet-list-item[aria-checked='true'] {
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sheet-list-check {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sheet-list-icon {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: none;
|
||||
width: 1.25rem;
|
||||
color: var(--reader-muted);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.sheet-list-item:hover:not(:disabled) {
|
||||
|
||||
@@ -688,13 +688,10 @@ async function audit(cdp, origin, scenes, results) {
|
||||
const offShelfCards = await cdp.evaluate(
|
||||
'document.querySelectorAll(".library-browse-grid .book-shelve").length',
|
||||
);
|
||||
const offShelfHint = await cdp.evaluate(
|
||||
'document.querySelector(".library-preview-hint")?.textContent ?? ""',
|
||||
);
|
||||
check(
|
||||
'书库: 浏览页只给不在书架的书画「加入书架」，且不是全给',
|
||||
offShelfCards > 0 && offShelfCards < browse.cards && /这一页有 \d+ 本还不在书架上/.test(offShelfHint),
|
||||
`角标 ${offShelfCards} 个 / 卡片 ${browse.cards} 张，提示="${offShelfHint.trim()}"`,
|
||||
offShelfCards > 0 && offShelfCards < browse.cards,
|
||||
`角标 ${offShelfCards} 个 / 卡片 ${browse.cards} 张`,
|
||||
);
|
||||
/*
|
||||
* The search *works*, which is the half a screenshot cannot show.
|
||||
|
||||
Reference in new issue
Block a user