/* seitenblick – Karten, Tabellen, Knoepfe, Felder, Abzeichen, Meldungen, Rueckfragen * * Zweite und letzte Stufe der Gestaltung; die Farben und Masse stehen alle in * grund.css und werden hier nur noch benutzt. Wer einen Ton oder einen Abstand * aendern will, aendert ihn dort - hier steht kein Farbwert und kein Radius, * der nicht aus einem Token kommt. Das gilt seit dem 12.08.2026 ausnahmslos: * Die fuenf Pastelltoene der Statusabzeichen standen bis dahin hier fest im * Blatt und waeren im dunklen Thema leuchtende Flecken geblieben. * * Die Bausteine sind die von design-system/dist/basis.css, in seitenblicks eigener * Datei - wie tagwerk sie in seinem bedienung.css fuehrt. Wo tagwerk und * basis.css auseinandergehen, folgt seitenblick tagwerk: Es ist das Werkzeug * derselben Geraeteklasse, und derselbe Knopf soll in beiden gleich aussehen. */ h1 { font-size: 22px; margin: 0 0 16px; } h2 { font-size: 17px; } /* Die Karte ist die Grundform der Arbeitsflaeche: eine helle Flaeche mit Rahmen auf dem zurueckgenommenen Grund. Uebersicht, Formulare und Anmeldung bestehen aus nichts anderem. Radius und Polsterung sind die des Systems (--rund-karte, --polster) - hier standen 8px und 20px. */ .card { background: var(--flaeche); border: 1px solid var(--border); border-radius: var(--rund-karte); padding: var(--polster); margin-bottom: var(--luft-weit); } /* Die schmale Spalte der Formularseiten. Sie steht LINKS und nicht in der Mitte: `main > *` gibt jedem Kind der Arbeitsflaeche zwei automatische Seitenraender, damit die breite Uebersicht auf einem grossen Schirm nicht auseinanderfaellt - ein 640 Pixel breites Formular rutschte damit aber in die Bildmitte, waehrend seine Ueberschrift links stehenblieb. Zwei Fluchten auf einer Seite, und keine davon stimmte. Als eigene Klasse und nicht als style="max-width:640px" an fuenf Stellen im Markup. */ main > .schmal { max-width: 640px; margin-left: 0; margin-right: auto; } /* Verweise im Arbeitsbereich tragen das Gruen der Familie und nicht das Blau (12.08.2026, Regel des Systems): Blau gehoert den Bedienelementen - Fokus, Griffe, angefasste Kanten -, Gruen dem Gelesenen. Ein blauer Verweis mitten im Text laesst Fliesstext wie ein Werkzeug aussehen. Der Einwand, mit dem hier lange Blau stand, war das gruene „unveraendert" der Statusabzeichen. Der traegt nicht: Ein Abzeichen ist eine Pille mit Flaeche, ein Verweis ist unterstrichener Text - die beiden verwechselt niemand, und Farbe allein unterscheidet sie ohnehin nicht. */ a { color: var(--gruen-tief); } a:hover { color: var(--gruen-tiefer); } /* --- Tabellen ------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: var(--gr-neben); } /* Seiten- und Dateitabelle nutzen dasselbe feste Spaltenlayout, damit die Spaltenbreiten beider Tabellen exakt uebereinstimmen. */ table.synced { table-layout: fixed; } table.synced td, table.synced th { overflow-wrap: anywhere; } /* th ist nowrap – passt eine Ueberschrift nicht in ihre feste Spalte, wuerde sie sonst in die Nachbarspalte laufen. Lieber sichtbar abschneiden. */ table.synced th { overflow: hidden; text-overflow: ellipsis; } /* Die Name-Spalte ist die einzige elastische – alle anderen sind fix. Wird sie eng, darf die URL nicht in ein schmales Buchstabenband umbrechen: jede Angabe bleibt einzeilig und wird per Ellipse gekuerzt (vollstaendiger Text im title-Attribut). */ .name-cell > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .name-cell strong { overflow-wrap: anywhere; white-space: normal; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } th { color: var(--muted); font-weight: 600; white-space: nowrap; } /* Jede Zahl in Tabellenziffern - ohne das wandern Werte in der Spalte. */ .zahl { font-variant-numeric: tabular-nums; } /* --- Knoepfe -------------------------------------------------------------- Dieselben Knoepfe wie bei mapfit und tagwerk: heller Grund, duenner Rahmen, 6px Radius, 13px Schrift. Farbe traegt nur, was sie braucht - das Gruen fuehrt weiter, das Rot warnt. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--rund); background: var(--flaeche); color: var(--text); font: inherit; font-size: var(--gr-bedienung); cursor: pointer; text-decoration: none; white-space: nowrap; } .btn:hover:not(:disabled) { background: var(--flaeche-hover); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 3px 10px; font-size: var(--gr-bedienung); } /* Der Knopf, der gerade dran ist, traegt das Markengruen - dieselbe Farbe wie die Hauptaktion bei mapfit und tagwerk. Vorher war es das GitHub-Gruen. Ohne das „→ " aus basis.css: tagwerk fuehrt seinen Speichern-Knopf ohne, und derselbe Knopf soll in beiden Werkzeugen gleich aussehen (der Unterschied ist in design-system/README.md vermerkt). */ .btn-primary { background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--gruen-tiefer); } /* Zerstoerendes traegt die Warnfarbe UND ein ×: Die Farbe allein sieht man im Augenwinkel nicht zuverlaessig, und Rot-Gruen-Schwaeche betrifft rund acht Prozent der Maenner. Nicht bei den Sinnbild-Knoepfen - die tragen ihr Zeichen schon selbst (hier den Papierkorb). */ .btn-danger { color: var(--rot-tief); } .btn-danger:not(.btn-icon)::before { content: "× "; font-weight: 600; } .btn-danger:hover:not(:disabled) { background: var(--rot-hauch); border-color: var(--rot-tief); } /* Ein Knopf, der nur ein Zeichen traegt, ist ein Quadrat, und das Zeichen sitzt in seiner Mitte. Beides muss dastehen: Ohne feste Hoehe ergibt sie sich aus dem Zeilenabstand der Schrift, waehrend die Breite fest ist - der Knopf wird ein liegendes Rechteck und steht neben seinen Nachbarn zu niedrig. Und ohne line-height: 1 ist der Zeilenkasten hoeher als das Zeichen darin (die Schrift haelt Platz fuer Ober- und Unterlaengen frei, die ein „⎙" nicht hat). */ .btn-icon { width: 30px; height: 30px; padding: 0; line-height: 1; } .btn-icon.btn-sm { width: 24px; height: 24px; } /* Ein GEZEICHNETES Sinnbild im Knopf - der Burger, der Bleistift, der Papierkorb. Die Masse muessen HIER stehen und nicht am einzelnen : Ein ohne width und height ist nach Norm 300x150 Pixel gross und sprengt jeden Knopf, in den man es legt. currentColor statt fester Werte, damit das Zeichen die Farbe der Schrift daneben traegt - in Hell wie in Dunkel, auf heller Flaeche wie auf der dunklen Tinte des Kopfes. Regel und Masse aus basis.css. */ .btn > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Muss nach .btn-icon stehen: die Sortier-Buttons tragen beide Klassen, und bei gleicher Spezifitaet gewinnt die spaetere Regel. Sie sind nur in der Kartenansicht sichtbar (siehe Media Query unten). */ .btn-move { display: none; } form.inline { display: inline-flex; } /* --- Felder --------------------------------------------------------------- */ label { display: block; font-weight: 600; margin: var(--polster) 0 4px; font-size: var(--gr-bedienung); } /* Klammerzusaetze in einer Beschriftung bleiben in der Zeile: Sie erlaeutern das Wort davor, eine eigene Zeile machte aus dem Zusatz eine zweite Aussage. */ label .hint { display: inline; font-weight: 400; color: var(--muted); } input[type=text], input[type=password], input[type=number], input[type=url], textarea, select { width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--rund); font-size: var(--gr-bedienung); font-family: inherit; background: var(--flaeche); color: var(--text); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: 1px; border-color: var(--gruen-tief); } textarea { font-family: var(--schrift-fest); } /* Ein Haken mit seinem Wort in einer Zeile - das Kaestchen behaelt seine eigene Breite, statt die volle Zeile zu nehmen. Als Klasse und nicht als style="width:auto" an fuenf Stellen im Markup. */ .check { display: flex; align-items: flex-start; gap: var(--luft-eng); font-weight: 400; } .check input[type=checkbox] { width: auto; flex: none; margin-top: 2px; } /* --- Abzeichen und Meldungen ---------------------------------------------- Fuenf Zustaende, jeder mit dem Hauch seiner Bedeutungsfarbe als Grund und demselben Ton als Schrift. Grau heisst „nichts liegt an", Gruen „unveraendert", Blau „geaendert" (eine Aenderung ist kein Fehler und kein naechster Schritt), Gelb „wartet", Rot „Fehler". Alle fuenf gehen mit dem dunklen Thema mit, weil sie Token sind. */ .badge { display: inline-block; padding: 2px 9px; border-radius: var(--rund-pille); font-size: var(--gr-neben); font-weight: 600; /* Eine Pille bricht nicht um: „Ausgangszustand" stand in der 118 Pixel breiten Statusspalte als „Ausgangszust / and" in zwei Zeilen, und was dabei herauskam, sah aus wie zwei halbe Abzeichen. Lieber steht sie einen Deut ueber ihre Spalte hinaus. */ white-space: nowrap; } .badge-ok { background: var(--gruen-hauch); color: var(--gruen-tief); } .badge-changed { background: var(--blau-hauch); color: var(--blau); } .badge-error { background: var(--rot-hauch); color: var(--rot-tief); } .badge-first { background: var(--gelb-hauch); color: var(--gelb-tief); } .badge-none { background: var(--grau-hauch); color: var(--muted); } /* Die Meldung ueber der Seite: derselbe Hauch, dazu die volle Farbe als Kante - eine Meldung darf man nicht uebersehen, ein Abzeichen schon. */ .flash { padding: var(--luft) var(--polster); border-radius: var(--rund); margin-bottom: var(--polster); font-size: var(--gr-bedienung); } .flash-ok { background: var(--gruen-hauch); border: 1px solid var(--gruen-tief); } .flash-error { background: var(--rot-hauch); border: 1px solid var(--rot-tief); } .muted { color: var(--muted); font-size: var(--gr-neben); } .error-text { color: var(--rot-tief); font-size: var(--gr-neben); } /* Die beiden Zahlen einer Verlaufszeile: hinzugefuegt gruen, entfernt rot - dieselben Toene wie im Diff, aber aus der Palette und nicht als Wert im Markup. */ .plus { color: var(--gruen-tief); font-variant-numeric: tabular-nums; } .minus { color: var(--rot-tief); font-variant-numeric: tabular-nums; } /* --- Zeilen und Leisten --------------------------------------------------- */ .actions { white-space: normal; } .actions .btn, .actions form { margin: 0 2px 3px 0; } .actions .btn { vertical-align: middle; } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--polster); gap: var(--luft); } .drag-handle { cursor: grab; color: var(--blau-kante); user-select: none; text-align: center; width: 24px; font-size: 16px; } tr[draggable="true"]:hover .drag-handle { color: var(--muted); } tr.dragging { opacity: 0.5; background: var(--flaeche-tief); } tr.paused td:not(.drag-handle) { opacity: 0.55; } /* --- Rueckfragen ----------------------------------------------------------- Gebaut auf dem nativen (siehe js/dialog.js, wortgleich aus design-system/dist/). Sie loesen das `confirm()` des Browsers ab, das eine fremde Ueberschrift traegt („127.0.0.1:8110 sagt"), genau zwei Antworten kennt und den Knopf nicht sagen laesst, was er tut. Sie sehen aus wie die Karten der Oberflaeche - derselbe Rahmen, dieselbe Flaeche, dieselben Knoepfe -, weil sie zur Anwendung gehoeren und nicht zum Browser. Regeln aus basis.css, Abschnitt 8. */ .mf-dialog { border: 1px solid var(--border); border-radius: var(--rund-karte); padding: 18px 20px; max-width: 32rem; width: calc(100vw - 40px); background: var(--flaeche); color: var(--text); font: var(--gr-bedienung)/1.5 var(--schrift-bedienung); box-shadow: var(--schatten-hoch); } /* Der Hintergrund daempft die Anwendung, statt sie zu verdecken: Worueber gefragt wird, soll sichtbar bleiben - „Seite XY loeschen?" ist leichter zu beantworten, wenn ihre Zeile noch dasteht. */ .mf-dialog::backdrop { background: var(--schleier); } .mf-dialog h2 { margin: 0 0 var(--luft); font-size: 15px; color: var(--text); } .mf-dialog p { margin: 0 0 8px; } .mf-dialog .mf-dialog-feld { display: block; margin: var(--luft-weit) 0 4px; font-weight: 600; } .mf-dialog .mf-dialog-feld input { display: block; width: 100%; margin-top: 5px; } /* Abbrechen links, Handlungen rechts - dieselbe Leserichtung wie im Kopf der Anwendung: erst der Rueckweg, dann das Weiter. */ .mf-dialog-knoepfe { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .mf-dialog-luft { flex: 1 1 auto; } /* Am Finger mehr Luft ueber der Knopfreihe: Wer den Kasten mit dem Daumen bedient, soll nicht aus Versehen auf den Text darueber zielen. Wie bei tagwerk. */ @media (hover: none) { .mf-dialog-knoepfe { margin-top: 24px; } .mf-dialog .btn { padding: 9px 12px; } } /* ------------------------------------------------------------- Smartphone Unter 1100px werden die Uebersichtstabellen zu Karten umgebrochen: jede Zeile eine Karte, die Spaltenueberschrift steht als Label vor dem Wert. Drag & Drop gibt es auf Touchgeraeten nicht – dort erscheinen stattdessen die ▲/▼-Schaltflaechen (.btn-move). */ @media (max-width: 1100px) { .card { padding: var(--luft-weit); } .toolbar { flex-wrap: wrap; } .toolbar h1 { font-size: 19px; } table.synced, table.synced tbody, table.synced tr, table.synced td { display: block; width: 100%; } table.synced thead, table.synced colgroup, table.synced .drag-handle { display: none; } table.synced tr { border: 1px solid var(--border); border-radius: var(--rund-gross); padding: var(--luft) var(--luft-weit); margin-bottom: var(--luft-weit); } table.synced td { border: 0; padding: 3px 0; } /* In der Kartenansicht steht die volle Breite zur Verfuegung – hier darf die URL wieder umbrechen statt gekuerzt zu werden. */ .name-cell > * { white-space: normal; overflow: visible; overflow-wrap: anywhere; } table.synced td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; font-size: var(--gr-neben); } table.synced td.actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } } /* Am Finger gilt die Telefon-Schicht fuer JEDE Knopfreihe, nicht nur den Kopf - auch fuer die Handlungsspalte jeder Zeile. BESCHRIFTETE Knoepfe wachsen („Jetzt prüfen"), reine SINNBILD-Knoepfe behalten ihre Groesse (12.08.2026, telefon.md): Hier standen fuer beide groessere Werte, und der Bleistift sass dadurch versetzt neben dem Wortknopf derselben Reihe. Gebunden an die Zeigerart und nicht an die Breite: Ein Tablet in Querlage ist breit und hat trotzdem keinen Zeiger. */ @media (hover: none) { .actions .btn:not(.btn-icon) { padding: 9px 12px; font-size: var(--gr-bedienung); } } @media (max-width: 1100px) { .btn-move { display: inline-flex; } }