Workspace: neues Knopf-System "Geschliffen" -- ueberall, eine Stelle

Von Filipe aus drei gerenderten Entwuerfen gewaehlt (A Kante & Glut, B Geschliffen, C Praegung). Raten hilft hier nicht -- beim Zurueck-Knopf hat erst der direkte Vergleich zum Ziel gefuehrt. Aufbau: farbiger Verlaufsrand (padding-box/border-box) und ein feiner heller Streifen obenauf -- wie eine angeschliffene Kante. Die Farbe sitzt im Rand und in der Schrift, die Flaeche bleibt dunkel. Beim Zeigen hebt sich der Knopf einen Pixel an und bekommt einen weichen farbigen Schein darunter. Die Hauptaktion einer Seite ist zusaetzlich gefuellt. JEDE AKTION HAT IHRE EIGENE FARBE: gruen passt, erledigt, freigegeben amber ausbaufaehig, wartet rot Handlungsbedarf, loeschen blau speichern violett anlegen gold Onboarding -- der einzige Schritt, der eine Person anlegt grau abbrechen, schliessen Stufenfarbe fuer den Weiter-Knopf der Scout-Pipeline DAS IST JETZT DIE EINZIGE STELLE, AN DER KNOEPFE GESTALTET WERDEN. Vorher standen sie in NEUN Dateien verstreut, und prompt sahen dieselben Knoepfe auf verschiedenen Seiten verschieden aus. Alle alten Definitionen sind entfernt; wer einen neuen Knopf braucht, nimmt eine Farbklasse und schreibt kein CSS. Gilt ab jetzt auch fuer alles, was noch dazukommt. Geprueft ueber alle elf Seiten: 172 sichtbare Knoepfe, kein einziger ungestylt, kein Kontrast unter 4,5:1. Drei Sachen, die dabei aufgefallen sind: 1. Der neutrale "Abbrechen"-Knopf hatte halbdurchsichtiges Weiss als Farbwert -- gemessen 1,1:1 Kontrast, praktisch unlesbar. Neutral hat jetzt einen echten Farbwert (#8e9cb0). 2. Die Filter-Knoepfe (Kalender, Dateien, Bereiche) hatten eine eigene "gedrueckt"-Regel mit flaechiger Farbe, die den geschliffenen Rand ueberschrieb. Sie benutzen jetzt den gefuellten Auftritt des Systems. 3. Der Bearbeiten-Stift auf den Aufgabenkarten war nie ein richtiger Knopf, sondern nackter Text ohne Rand -- man sah nicht, dass man draufdruecken kann. Jetzt im System, in der kleinsten Groesse. Der Zurueck-Knopf ("Neon-Kante") bleibt wie er ist -- den hat Filipe selbst ausgesucht, und er ist ein Navigationselement, keine Aktion. Messhinweis fuer spaeter: color-mix liefert computed color(srgb ...), das laesst sich NICHT als Text auslesen. Die erste Messung meldete faelschlich 1,13:1 fuer 49 Knoepfe. Richtig geht es ueber eine Leinwand (fillStyle + getImageData). Alle Toene bewusst gedeckt statt neon, alles respektiert prefers-reduced-motion.
2026-08-28 12:13:11 +02:00
parent 1c3e642f12
commit 677bcb5653
9 changed files with 207 additions and 128 deletions
@@ -240,18 +240,6 @@ body.gate {
 .fehler  { color: var(--warn); }
 .fehler:empty { margin: 0; }

-.knopf {
-  position: relative;
-  width: 100%; margin-top: 18px; padding: 13px 18px;
-  background: linear-gradient(100deg, var(--akzent-tief), #2f6fa8 55%, var(--violett));
-  border: 0; border-radius: var(--radius-klein);
-  color: #f2f7fc; font: inherit; font-weight: 650; letter-spacing: .02em;
-  cursor: pointer;
-  transition: filter var(--tempo), transform var(--tempo);
-}
-.knopf:hover { filter: brightness(1.1); }
-.knopf:active { transform: scale(.99); }
-.knopf[disabled] { cursor: progress; filter: saturate(.6) brightness(.85); }

 .knopf__laden {
  position: absolute; right: 16px; top: 50%; margin-top: -8px;
@@ -391,19 +379,6 @@ body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filt
   woanders.)
   =================================================================== */

-.suche-knopf {
-  display: inline-flex; align-items: center; gap: 7px;
-  padding: 7px 13px; cursor: pointer;
-  background: rgba(255, 255, 255, .04);
-  border: 1px solid var(--rand); border-radius: 999px;
-  color: var(--text-still); font: inherit; font-size: .82rem;
-  transition: color .16s ease, border-color .16s ease, background .16s ease;
-}
-.suche-knopf:hover {
-  color: var(--text);
-  border-color: rgba(63, 189, 245, .4);
-  background: rgba(63, 189, 245, .08);
-}
 .suche-knopf__lupe {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
@@ -447,13 +422,6 @@ body.suche-offen { overflow: hidden; }
 /* Das eingebaute Kreuz von type="search" steht sonst direkt neben dem
   Esc-Knopf -- zwei Wege, dasselbe zu tun, dicht nebeneinander. */
 .suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
-.suche-zu {
-  flex: none; padding: 4px 9px; cursor: pointer;
-  background: rgba(255, 255, 255, .05);
-  border: 1px solid var(--rand); border-radius: var(--radius-klein);
-  color: var(--text-still); font: inherit; font-size: .74rem; letter-spacing: .04em;
-}
-.suche-zu:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }

 .suche-ergebnis { overflow-y: auto; padding: 6px 10px 12px; }
 .suche-hinweis {
@@ -490,3 +458,176 @@ body.suche-offen { overflow: hidden; }
 }

@media (prefers-reduced-motion: reduce) { .suche-knopf { transition: none; } }
+
+/* ===================================================================
+   KNOPF-SYSTEM „GESCHLIFFEN“  (von Filipe gewählt, 28.08.2026)
+
+   DAS IST DIE EINZIGE STELLE, AN DER KNÖPFE GESTALTET WERDEN.
+   Vorher standen sie in neun Dateien verstreut -- und prompt sahen
+   dieselben Knöpfe auf verschiedenen Seiten verschieden aus. Wer einen
+   neuen Knopf braucht, nimmt hier eine Farbklasse, schreibt kein CSS.
+
+   Der Aufbau: ein farbiger Verlaufsrand (padding-box/border-box) und
+   ein feiner heller Streifen obenauf -- wie eine angeschliffene Kante.
+   Die Farbe sitzt im Rand und in der Schrift, die Fläche bleibt dunkel.
+   Beim Zeigen hebt sich der Knopf einen Pixel an und bekommt einen
+   weichen farbigen Schein darunter.
+
+   JEDE AKTION HAT IHRE EIGENE FARBE. Alle Töne sind bewusst gedeckt,
+   nicht neon: augenschonend ist Vorgabe, nicht Geschmack. Der
+   schwächste Kontrast im ganzen System liegt bei 9,2:1 -- die
+   Barrierefreiheits-Schwelle wäre 4,5:1.
+   =================================================================== */
+
+:root {
+  --k-gut:      #5fc99a;   /* passt, erledigt, freigegeben   */
+  --k-mittel:   #e8b877;   /* ausbaufähig, wartet            */
+  --k-warn:     #f0868f;   /* Handlungsbedarf, löschen       */
+  --k-gold:     #e8c07d;   /* Onboarding -- legt eine Person an */
+  --k-neutral:  #8e9cb0;   /* abbrechen, schließen           */
+  /* Neutral braucht einen echten Farbwert. Halbdurchsichtiges Weiß
+     ergab in der Messung 1,1:1 -- praktisch unlesbar. */
+}
+
+.knopf,
+.knopf-still,
+.schritt,
+.abmelden,
+.stufe-knopf,
+.suche-knopf,
+.suche-zu,
+.todo__weg,
+.karte__stift {
+  --f: var(--akzent);
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 10px 17px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background:
+    linear-gradient(#121926, #0d1420) padding-box,
+    linear-gradient(150deg,
+      color-mix(in srgb, var(--f) 75%, transparent),
+      rgba(255, 255, 255, .07) 52%,
+      color-mix(in srgb, var(--f) 30%, transparent)) border-box;
+  color: color-mix(in srgb, var(--f) 55%, #ffffff);
+  font: inherit; font-size: .85rem; font-weight: 600;
+  cursor: pointer;
+  transition: transform .16s ease, box-shadow .2s ease, color .16s ease;
+}
+
+/* Der helle Streifen obenauf -- die „geschliffene“ Kante. */
+.knopf::after,
+.knopf-still::after,
+.schritt::after,
+.abmelden::after,
+.stufe-knopf::after,
+.suche-knopf::after,
+.suche-zu::after,
+.todo__weg::after,
+.karte__stift::after {
+  content: ""; position: absolute; left: 11px; right: 11px; top: 1px; height: 1px;
+  border-radius: 1px; pointer-events: none;
+  background: linear-gradient(90deg, transparent,
+    color-mix(in srgb, var(--f) 55%, transparent), transparent);
+  opacity: .75;
+}
+
+.knopf:hover,
+.knopf-still:hover,
+.schritt:hover:not([disabled]),
+.abmelden:hover,
+.stufe-knopf:hover,
+.suche-knopf:hover,
+.suche-zu:hover,
+.todo__weg:hover,
+.karte__stift:hover {
+  transform: translateY(-1px);
+  color: #fff;
+  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--f) 85%, transparent),
+              inset 0 0 22px -14px var(--f);
+}
+.knopf:active, .knopf-still:active, .schritt:active,
+.abmelden:active, .stufe-knopf:active { transform: translateY(0); }
+
+.knopf:focus-visible,
+.knopf-still:focus-visible,
+.schritt:focus-visible,
+.abmelden:focus-visible,
+.stufe-knopf:focus-visible,
+.suche-knopf:focus-visible,
+.suche-zu:focus-visible,
+.todo__weg:focus-visible,
+.karte__stift:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 32%, transparent);
+}
+
+/* ---------- Gewählt / aktiv ----------------------------------------
+   Die Fläche nimmt die Farbe auf, der Rand wird voll. Das ist auch der
+   Auftritt für den wichtigsten Knopf einer Seite. */
+.knopf,
+.stufe-knopf[data-aktiv="ja"],
+[data-an] {
+  color: #fff;
+  background:
+    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
+                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
+    linear-gradient(150deg, var(--f),
+                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
+  box-shadow: 0 4px 16px -9px var(--f);
+}
+
+/* ---------- Farbe je Aktion --------------------------------------- */
+.knopf--gut,     .stufe-knopf[data-wert="ok"]       { --f: var(--k-gut); }
+.knopf--mittel,  .stufe-knopf[data-wert="mittel"]   { --f: var(--k-mittel); }
+.knopf--warn,    .stufe-knopf[data-wert="handlung"],
+.knopf-still--warn, .todo__weg                      { --f: var(--k-warn); }
+.knopf--gold                                        { --f: var(--k-gold); }
+.knopf--violett                                     { --f: var(--violett); }
+.knopf-still, .schritt, .abmelden, .suche-zu,
+.karte__stift                                       { --f: var(--k-neutral); }
+
+/* Der Weiter-Knopf der Scout-Pipeline trägt die Farbe seiner Stufe --
+   bleibt aber bewusst ungefüllt. Er wiederholt sich auf jeder Karte;
+   als volle Fläche wäre die Seite ein Streifenmuster. */
+.knopf--weiter {
+  --f: var(--stufe-farbe, var(--akzent));
+  color: color-mix(in srgb, var(--stufe-farbe) 55%, #ffffff);
+  background:
+    linear-gradient(#121926, #0d1420) padding-box,
+    linear-gradient(150deg,
+      color-mix(in srgb, var(--f) 75%, transparent),
+      rgba(255, 255, 255, .07) 52%,
+      color-mix(in srgb, var(--f) 30%, transparent)) border-box;
+  box-shadow: none;
+}
+
+/* ---------- Größen ------------------------------------------------- */
+.knopf--klein { padding: 8px 15px; font-size: .82rem; }
+.schritt      { padding: 6px 12px; font-size: .76rem; border-radius: 9px; }
+.abmelden     { padding: 8px 15px; font-size: .82rem; }
+.suche-zu     { padding: 5px 10px; font-size: .74rem; letter-spacing: .04em; border-radius: 9px; }
+.suche-knopf  { padding: 8px 15px; font-size: .82rem; }
+.stufe-knopf  { padding: 7px 13px; font-size: .78rem; }
+.todo__weg    { width: 36px; padding: 0; font-size: 1.05rem; line-height: 1; }
+.karte__stift { padding: 4px 10px; font-size: .74rem; border-radius: 8px; }
+
+/* Der Anmeldeknopf ist der einzige, der die ganze Breite bekommt --
+   auf der Anmeldeseite gibt es nichts anderes zu tun. */
+.gate .knopf { width: 100%; margin-top: 18px; padding: 13px 18px; font-size: .95rem; }
+
+.schritt[disabled], .knopf[disabled] { opacity: .45; cursor: default; box-shadow: none; }
+.knopf[disabled] { cursor: progress; }
+.knopf[disabled]:hover { transform: none; }
+
+.suche-knopf__lupe { width: 15px; height: 15px; flex: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .knopf, .knopf-still, .schritt, .abmelden,
+  .stufe-knopf, .suche-knopf, .suche-zu, .todo__weg,
+  .karte__stift { transition: none; }
+  .knopf:hover, .knopf-still:hover, .schritt:hover, .abmelden:hover,
+  .stufe-knopf:hover, .suche-knopf:hover, .suche-zu:hover,
+  .todo__weg:hover, .karte__stift:hover { transform: none; }
+}