/* * FoodNotify — die Schale für die Seiten. * * `tokens.css` legt die Werte fest, diese Datei wendet sie an. Sie ist das, * was verhindert, dass die neue Leiste neben alten Seiten wie ein * Fremdkörper wirkt. Begründung und Reihenfolge: docs/PAGE-FIT.md. * * Aufbau in vier Schichten, jede einzeln einsetzbar: * * 1. GRUNDIERUNG greift, sobald `fn-skin` am oder steht. * Untergrund, Textfarbe, Fokus. * 2. BAUTEILE `.fn-card`, `.fn-skin-btn`, `.fn-field`, `.fn-h1` … * nur für neues Markup, das diese Klassen trägt. * 3. BRÜCKE färbt vorhandenes Bootstrap-3-Markup um, OHNE dass * jemand die Seiten anfasst. Ebenfalls an `fn-skin`. * 4. SCHRIFT `fn-skin-type`, eine zweite Klasse. Stellt bestehende * Seiten auf Inter um und gleicht Überschriften und * Tabellenköpfe an. ÄNDERT DIE METRIK — pro Seite erst * zuschalten, wenn geprüft ist, dass nichts bricht. * * DIE REGEL, und sie gilt ohne Ausnahme: Alles, was an `fn-skin` hängt und * bestehendes Markup trifft (Schicht 1 und 3), ändert nur Farbe, Rundung, * Rahmen und Schatten. Keine Schriftfamilie, keine Schriftgröße, kein * Schriftschnitt, keine Abstände, kein Layout. Damit ist `fn-skin` auf jeder * Seite gefahrlos einschaltbar. Was die Metrik ändert, steht in Schicht 4 * und braucht eine eigene Entscheidung. * * Einbinden: * * gefahrlos * nach Prüfung * * Die Navigation braucht diese Datei nicht — sie bringt ihr Aussehen im * Shadow DOM mit. Diese hier ist ausschließlich für alles daneben. */ /* ══ 1. Grundierung ══════════════════════════════════════════════ */ .fn-skin { background: var(--fn-surface-sunken); color: var(--fn-ink); } .fn-skin a { color: var(--fn-green-ink, #4d7a26); text-decoration: none; } .fn-skin a:hover { text-decoration: underline; } /* Sichtbarer Fokus, überall, ohne Ausnahme. */ .fn-skin :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fn-focus); outline-offset: 2px; border-radius: var(--fn-radius-sm); } .fn-skin ::selection { background: var(--fn-lime-pale, #e5ffa6); color: var(--fn-forest); } /* Der Inhaltsbereich richtet sich nach der Leiste aus, ohne sie zu kennen. Namen bewusst mit Praefix, das sonst nirgends vorkommt: diese Datei ist global, anders als die Leiste im Shadow DOM. 'fn-content' und 'fn-btn' hiessen vorher so -- beide Namen benutzt die Angular-App schon selbst (23 bzw. 47 Dateien), die Regeln trafen fremde Kaesten und Knoepfe. */ .fn-nav-content { margin-inline-start: var(--fn-nav-width, 268px); min-block-size: 100vh; } /* ══ 2. Bauteile ═════════════════════════════════════════════════ */ /* Neue Bauteile bringen ihre Schrift selbst mit, damit sie auch auf einer Seite ohne fn-skin-type richtig aussehen. */ :where(.fn-page-header, .fn-card, .fn-skin-btn, .fn-field, .fn-label, .fn-table, .fn-chip, .fn-h1, .fn-h2, .fn-h3) { font-family: var(--fn-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Frueher .fn-skin h1 -- das traf jede bestehende Ueberschrift und schob den Seiteninhalt um 32 px nach oben. Jetzt nur, wer die Klasse traegt. */ .fn-h1, .fn-h2, .fn-h3 { font-family: var(--fn-font-display); font-weight: 700; letter-spacing: -0.3px; color: var(--fn-ink); margin: 0 0 0.4em; } .fn-h1 { font-size: 25px; } .fn-h2 { font-size: 20px; } .fn-h3 { font-size: 16px; } .fn-muted { color: var(--fn-ink-muted); } .fn-faint { color: var(--fn-ink-faint); } /* Seitenkopf: Pfad links, Werkzeuge rechts, 56 px. Sonst fängt jede Seite anders an. */ .fn-page-header { display: flex; align-items: center; gap: 10px; block-size: 56px; padding-inline: 20px; background: var(--fn-surface); border-block-end: 1px solid var(--fn-line); } .fn-page-header .fn-crumbs { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--fn-ink-muted); } .fn-page-header .fn-crumbs strong { color: var(--fn-ink); font-weight: 600; } .fn-page-header .fn-spacer { flex-grow: 1; } .fn-card { background: var(--fn-surface); border: 1px solid var(--fn-line); border-radius: 12px; overflow: clip; } .fn-skin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; block-size: var(--fn-hit); padding-inline: 14px; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-surface); color: var(--fn-ink); font: inherit; font-family: var(--fn-font); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background var(--fn-dur-quick) var(--fn-ease-out), border-color var(--fn-dur-quick) var(--fn-ease-out); } .fn-skin-btn:hover { background: var(--fn-surface-muted); } .fn-skin-btn:active { transform: scale(0.98); } /* Waldgrün auf Lime: 9,42 : 1. Weiß auf Lime wären 1,46 : 1 — deshalb trägt der Hauptknopf dunkle Schrift, nicht helle. */ .fn-skin-btn--primary { background: var(--fn-lime); border-color: transparent; color: var(--fn-forest); font-weight: 600; } .fn-skin-btn--primary:hover { background: var(--fn-lime-bright, #ccff00); } .fn-skin-btn--quiet { background: transparent; border-color: transparent; color: var(--fn-ink-muted); } .fn-skin-btn--quiet:hover { background: var(--fn-line-soft); color: var(--fn-ink); } .fn-skin-btn[disabled] { opacity: 0.45; cursor: default; } .fn-field { inline-size: 100%; block-size: var(--fn-hit); padding-inline: 12px; border: 1px solid var(--fn-line); border-radius: var(--fn-radius); background: var(--fn-surface); color: var(--fn-ink); font: inherit; font-family: var(--fn-font); font-size: 14px; } .fn-field::placeholder { color: var(--fn-ink-faint); } .fn-field:focus { border-color: var(--fn-focus); outline: none; } .fn-label { display: block; margin-block-end: 5px; font-size: 12.5px; font-weight: 600; color: var(--fn-ink-muted); } /* Der Tabellenkopf ist der Griff, der eine alte Tabelle sofort neu aussehen lässt. */ .fn-table { inline-size: 100%; border-collapse: collapse; } .fn-table th { text-align: start; padding: 13px 20px; border-block-end: 1px solid var(--fn-line); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fn-ink-muted); } .fn-table td { padding: 15px 20px; border-block-end: 1px solid var(--fn-line-soft); font-size: 14px; } .fn-table tbody tr:last-child td { border-block-end: 0; } .fn-table tbody tr:hover td { background: var(--fn-line-soft); } /* Zustände nach der Legende aus „System intern 2027": Rot = Fehlmenge, Bernstein = ungezählt/prüfen, Waldgrün = im Soll. Orange ist ausschließlich für Menschen und taucht hier deshalb nicht auf. */ .fn-chip { display: inline-flex; align-items: center; block-size: 24px; padding-inline: 9px; border-radius: var(--fn-radius-sm); font-size: 12px; font-weight: 600; } .fn-chip--ok { background: var(--fn-success-soft); color: var(--fn-success); } .fn-chip--warn { background: var(--fn-warn-soft); color: var(--fn-warn); } .fn-chip--bad { background: var(--fn-critical-soft); color: var(--fn-critical); } .fn-chip--human { background: var(--fn-human-soft); color: var(--fn-warn); } /* ══ 3. Brücke zu Bootstrap 3 ════════════════════════════════════ */ /* * Färbt vorhandenes Markup um, ohne dass jemand die Seiten anfasst. * Nur Farbe, Rundung, Rahmen und Schatten — siehe DIE REGEL oben. Auch * font-weight gehört nicht hierher: ein fetterer Schnitt ist breiter und * verschiebt Knöpfe. Wer typografisch angleichen will, tut es in Schicht 4. */ .fn-skin .btn { border-radius: var(--fn-radius); transition: background var(--fn-dur-quick) var(--fn-ease-out); } .fn-skin .btn-default { background: var(--fn-surface); border-color: var(--fn-line); color: var(--fn-ink); } .fn-skin .btn-default:hover { background: var(--fn-surface-muted); } .fn-skin .btn-primary, .fn-skin .btn-success { background: var(--fn-lime); border-color: transparent; color: var(--fn-forest); } .fn-skin .btn-primary:hover, .fn-skin .btn-success:hover { background: var(--fn-lime-bright, #ccff00); color: var(--fn-forest); } .fn-skin .btn-danger { background: var(--fn-critical); border-color: transparent; color: var(--fn-on-critical, #ffffff); } .fn-skin .btn-link { color: var(--fn-green-ink, #4d7a26); } .fn-skin .form-control { border-radius: var(--fn-radius); border-color: var(--fn-line); background: var(--fn-surface); color: var(--fn-ink); box-shadow: none; } .fn-skin .form-control:focus { border-color: var(--fn-focus); box-shadow: none; } .fn-skin .panel, .fn-skin .well, .fn-skin .modal-content, .fn-skin .dropdown-menu { background: var(--fn-surface); border-color: var(--fn-line); border-radius: 12px; box-shadow: var(--fn-shadow-pop); } .fn-skin .panel-heading { background: var(--fn-surface-muted); border-color: var(--fn-line); color: var(--fn-ink); } .fn-skin .table > thead > tr > th { border-block-end-color: var(--fn-line); color: var(--fn-ink-muted); } .fn-skin .table > tbody > tr > td { border-block-start-color: var(--fn-line-soft); color: var(--fn-ink); } .fn-skin .table-striped > tbody > tr:nth-of-type(odd) { background: var(--fn-surface-muted); } .fn-skin .table-hover > tbody > tr:hover { background: var(--fn-line-soft); } .fn-skin .label-success, .fn-skin .badge-success { background: var(--fn-success-soft); color: var(--fn-success); } .fn-skin .label-warning, .fn-skin .badge-warning { background: var(--fn-warn-soft); color: var(--fn-warn); } .fn-skin .label-danger, .fn-skin .badge-danger { background: var(--fn-critical-soft); color: var(--fn-critical); } .fn-skin .nav-tabs { border-block-end-color: var(--fn-line); } .fn-skin .nav-tabs > li.active > a { border-color: var(--fn-line) var(--fn-line) transparent; color: var(--fn-ink); } .fn-skin hr { border-color: var(--fn-line); } /* ══ 4. Schrift — ändert die Metrik ══════════════════════════════ */ /* * Zwei Schriftfamilien nebeneinander wirken wie zwei Programme: die Leiste * ist Inter, die Twig-Seiten sind Roboto. Diese Schicht gleicht das an — * aber sie verschiebt dabei, was vorher passte. Gemessen auf echtem * Bootstrap 3: h1 36 → 25 px und 20 px weniger Rand oben, der Inhalt rückt * rund 32 px hoch, Tabellenköpfe 14 → 11,5 px, Knöpfe bis 11 px breiter. * * Deshalb nicht an fn-skin, sondern an einer eigenen Klasse. Pro Seite * zuschalten, nachdem jemand hingesehen hat. */ .fn-skin-type { font-family: var(--fn-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fn-skin-type :is(h1, h2, h3) { font-family: var(--fn-font-display); font-weight: 700; letter-spacing: -0.3px; margin: 0 0 0.4em; } .fn-skin-type h1 { font-size: 25px; } .fn-skin-type h2 { font-size: 20px; } .fn-skin-type h3 { font-size: 16px; } .fn-skin-type .btn { font-weight: 500; } .fn-skin-type :is(.btn-primary, .btn-success) { font-weight: 600; } .fn-skin-type .table > thead > tr > th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } /* ══ Druck ═══════════════════════════════════════════════════════ */ /* * Auf Papier ist Creme Grauschleier. Gedruckt wird weiß auf schwarz, * die Leiste ist ohnehin ausgeblendet. */ @media print { .fn-skin { background: #ffffff; color: #000000; } .fn-nav-content { margin-inline-start: 0; } .fn-card, .fn-skin .panel { box-shadow: none; border-color: #cccccc; } }