mtfyun/reader
1
0 Fork 0
mirror of https://github.com/hectorqin/reader.git synced 2026-11-11 21:41:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): sources search picker styles leaked from the card form rules

Browse Source 
The source filter's searchable select is rendered inside .sources-card,
whose generic label/input/button rules stacked the search icon above a
second bordered 14px input (iOS zooms on focus) and centred the trigger
text. Its base styles also used media-only aliases (--border, --surface,
--media-selection), so outside media the trigger had no border and the
selected option no highlight. Fall back to the global tokens, scope the
picker's own controls, use a 16px input and hide the native clear button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
hectorqinandClaude Opus 5.5 committed 2026-10-29 02:22:07 +00:00
1 parent 4931516eec
commit c8dba91c6d
2 files changed
+16 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/features/media/styles/v2.css
+11 -9
View File
@@ -246,20 +246,22 @@
color:var(--color-brand-text);
}
:root body .media-video-stage .dplayer-host { color-scheme:dark; }
/* Also used outside media (sources search), so every media alias falls back to a global token. */
.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:var(--text-meta);font-weight:600}
.searchable-select-label {display:block;margin:0 0 5px;color:var(--muted,var(--color-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 {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border,var(--color-line));border-radius:var(--radius-sm);background:var(--surface,var(--color-surface-2));color:var(--text,var(--color-ink));font:inherit;text-align:left}
.searchable-select-trigger:disabled {opacity:.55}
.searchable-select-trigger>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchable-select-menu {position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:max(100%,240px);padding:6px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--media-paper,var(--surface,#fff));opacity:1;box-shadow:0 12px 35px #0003}
.searchable-select-search {display:flex;align-items:center;gap:7px;padding:7px 8px;border-bottom:1px solid var(--border);color:var(--muted)}
.searchable-select-search input {min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit}
.searchable-select-menu {position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:max(100%,240px);padding:6px;border:1px solid var(--border,var(--color-line));border-radius:var(--radius-md);background:var(--media-paper,var(--color-surface));opacity:1;box-shadow:0 12px 35px #0003}
.searchable-select-search {display:flex;align-items:center;gap:7px;padding:7px 8px;border-bottom:1px solid var(--border,var(--color-line));color:var(--muted,var(--color-muted))}
.searchable-select-search input {min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text,var(--color-ink));font:inherit;font-size:var(--text-title)}
.searchable-select-search input::-webkit-search-cancel-button,.searchable-select-search input::-webkit-search-decoration {appearance:none;display:none}
.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[aria-selected=true] {background:var(--media-selection);color:var(--media-accent)}
@media (hover: hover) and (pointer: fine) { .searchable-select-options button:hover {background:var(--media-selection);color:var(--media-accent)}}
.searchable-select-options p {padding:12px;color:var(--muted);font-size:var(--text-meta)}
.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,var(--color-ink));text-align:left}
.searchable-select-options button[aria-selected=true] {background:var(--media-selection,var(--color-brand-soft));color:var(--media-accent,var(--color-brand-text))}
@media (hover: hover) and (pointer: fine) { .searchable-select-options button:hover {background:var(--media-selection,var(--color-brand-soft));color:var(--media-accent,var(--color-brand-text))}}
.searchable-select-options p {padding:12px;color:var(--muted,var(--color-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}
web/src/styles/reader.css
+5 -1
View File
@@ -3849,7 +3849,11 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti
.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); }
.sources-screen .searchable-select-menu { background: var(--reader-paper, #fff); opacity: 1; }
.sources-search .searchable-select-search { margin: 0; }
/* The card's generic label/input/button rules must not reach the picker's own controls:
they stacked the search icon above a second bordered 14px field and centred the triggers. */
.sources-card .searchable-select-search { flex-direction: row; flex: none; gap: .5rem; margin: 0; padding: .25rem .5rem; color: var(--reader-muted); }
.sources-card .searchable-select-search input { min-height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--text-title); }
.sources-search .searchable-select-trigger, .sources-search .searchable-select-options button { justify-content: space-between; }
.sources-search .searchable-select-options { max-height: 15rem; }
.sources-search .searchable-select-options button { min-height: 42px; }
@media (min-width: 768px) {