/* -------------------------------------------------------- * Shared page-toolbar search field (see public/utils/page-search.js). * Canonical persistent, leading-icon, labeled search affordance for * list/filter modules. * Seit der Re-Critique 2026-09-27 (A8 P3-2) gehoert auch Breite und Lage im * Modulkopf hierher (Abschnitt "Eine Breite, eine Stelle" unten) - Module * setzen keine eigenen Breiten oder Auto-Raender mehr. * Der Fokus traegt die Stimme, nicht den Modulton: ein Suchfeld tut in jedem * Modul dasselbe (Eine-Stimme-Regel, DESIGN.md). * -------------------------------------------------------- */ .page-search { display: grid; gap: var(--space-1); min-width: 0; } .page-search__control { display: block; position: relative; } .page-search__icon { position: absolute; inset-inline-start: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-secondary); pointer-events: none; } /* EIN SUCHFELD, UND ES IST EINE GEFUELLTE KAPSEL (Komponenten-Kanon, * Critique 2026-09-26 P1). Vorher standen fuenf Varianten nebeneinander: dieses * Feld mit 10px-Ecke und Kante, das Mehr-Blatt mit 16px, die Abos mit 12px und * 1px, der Kalender randlos, der Ausgleich mit eigener Regel. Die Suche ist ein * Bedienelement, kein Formularfeld - sie traegt die Form der Kapsel-Controls * und statt einer Kante eine Flaeche (--color-fill-field, tokens.css), wie * Apples Suchfeld. Die Kante bleibt als transparente 1.5px da, damit Fokus * (Akzentkante) und erhoehter Kontrast (`prefers-contrast: more`, unten) sie * einfaerben koennen, ohne dass das Feld springt. * Die globale Suche (`.search-overlay__input`, router.js) teilt diese Regel, * statt eine sechste Handschrift zu fuehren; sie hat keine Lupe, nur ihr * Innenabstand weicht ab (layout.css). */ .page-search__input, .search-overlay__input { border: 1.5px solid transparent; border-radius: var(--radius-full); background: var(--color-fill-field); color: var(--color-text-primary); } .page-search__input::placeholder, .search-overlay__input::placeholder { color: var(--color-text-secondary); } .page-search__input:hover, .search-overlay__input:hover { border-color: var(--color-border-control); } .page-search__input:focus, .search-overlay__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) var(--tint-shadow), transparent); } @media (prefers-contrast: more) { .page-search__input, .search-overlay__input { border-color: var(--color-border-control); } } .page-search__input { width: 100%; min-height: var(--target-base); padding-block: var(--space-2); padding-inline: 36px calc(var(--space-2) + 24px); font-size: var(--text-base); /* Strip the native search chrome (WebKit draws its own leading magnifier for * type=search) so only the explicit .page-search__icon shows — avoids two * magnifiers side by side. */ -webkit-appearance: none; appearance: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } /* Native type=search decorations suppressed: the leading magnifier is the * explicit .page-search__icon and the clear affordance is .page-search__clear — * the browser's own magnifier/clear cross would duplicate both. */ .page-search__input::-webkit-search-decoration, .page-search__input::-webkit-search-results-decoration, .page-search__input::-webkit-search-results-button, .page-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .page-search__clear { position: absolute; inset-inline-end: var(--space-1); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .page-search__clear > i, .page-search__clear > svg { width: 14px; height: 14px; } /* Extend the hit area to finger size without changing the visual size. */ .page-search__clear::before { content: ''; position: absolute; inset: -10px; } .page-search__clear:hover, .page-search__clear:focus-visible { background: var(--color-overlay-light); color: var(--color-text-primary); } .page-search__clear[hidden] { display: none; } /* -------------------------------------------------------- * EINE BREITE, EINE STELLE (Re-Critique 2026-09-27, A8 P3-2 / A1 P2-5) * * Am Desktop stand die Suche in neun Breiten (280, 320, 320, 356, 420, 420, * 424, 714, 830px) und mal links hinter dem Titel, mal rechts vor den * Aktionen: jedes Modul gab ihr per `className` eine eigene Breite und zwei * davon einen Auto-Rand. Die Suche ist ein Bedienelement der Shell, also * entscheidet die Shell beides. * * DIE STELLE ist die, die der Kanonkopf dafuer vorsieht: der Center-Slot * direkt HINTER dem Titel (`page-toolbar__center`, Referenz Dokumente: * `renderPageSearch({ className: '... page-toolbar__center' })`); die Aktionen * schiebt ihr eigener Auto-Rand an das Zeilenende (layout.css). Eine Suche * in einem Wrapper-Slot, der nur sie traegt (Rezepte, Vorrat), zaehlt als * dieselbe Stelle. * * DIE BREITE ist `--page-search-width` (320px, Apples Toolbar-Suchfeld). In * Liste+Detail endet sie damit von selbst vor der Listenspur: deren kleinstes * Mass ist `--layout-list-min` (26.25rem = 420px) minus zweimal * `--page-inline-pad`, also mindestens 356px. Sie darf schrumpfen (`flex-shrink` * 1, `min-width: 0`) - in einer vollen Zeile gibt sie vor dem Titel nach. * * `label.page-search` statt `.page-search`: die Wurzel ist immer ein `