DogFatherGit
677bcb5653
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.
257 lines
9.2 KiB
CSS
257 lines
9.2 KiB
CSS
/* ===================================================================
|
|
Startseite nach dem Anmelden. Baut auf den Farben und Bausteinen von
|
|
gate.css auf, damit beides wie eine Anwendung wirkt und nicht wie zwei
|
|
verschiedene Seiten.
|
|
=================================================================== */
|
|
|
|
/* Grundschrift und Grundfarbe stehen in gate.css auf `body.gate` und
|
|
greifen hier deshalb NICHT. Ohne diese Wiederholung fällt die Seite auf
|
|
die Browservorgaben zurück: schwarze Serifenschrift auf dunklem Grund,
|
|
praktisch unlesbar. */
|
|
body.start {
|
|
display: block;
|
|
min-height: 100svh;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--text);
|
|
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
letter-spacing: .01em;
|
|
background:
|
|
radial-gradient(120% 80% at 12% -10%, rgba(63, 189, 245, .10), transparent 58%),
|
|
radial-gradient(100% 70% at 92% 8%, rgba(138, 118, 255, .10), transparent 60%),
|
|
var(--tinte);
|
|
}
|
|
|
|
/* ---------- Kopfleiste ------------------------------------------------ */
|
|
|
|
.kopfleiste {
|
|
position: sticky; top: 0; z-index: 5;
|
|
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
|
padding: 14px clamp(16px, 4vw, 40px);
|
|
background: rgba(6, 9, 16, .82);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
|
|
.kopfleiste .marke { margin: 0; font-size: .72rem; }
|
|
|
|
/* Zurück-Knopf. Steht ganz links, weil dort jeder ihn erwartet -- gleiche
|
|
Stelle wie im Browser. Auf der Startseite gibt es ihn gar nicht: Dort
|
|
ist kein "davor", und ein Knopf, der nichts tut, ist schlimmer als
|
|
keiner. Auf den übrigen Seiten entscheidet kopf.js, ob er erscheint. */
|
|
/* Entwurf "Neon-Kante": Der senkrechte Lichtstrich links ist dasselbe
|
|
Motiv wie die Kante der Anmelde-Tafel (.tafel__kante in gate.css).
|
|
Dadurch wirkt der Workspace wie ein Stück und nicht wie zusammen-
|
|
gesetzte Teile. */
|
|
.zurueck-knopf {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
padding: 9px 18px 9px 17px;
|
|
border: 0;
|
|
/* Links flach, rechts rund: Die gerade Kante gehört dem Lichtstrich,
|
|
nach rechts läuft der Knopf weich aus. */
|
|
border-radius: 4px 999px 999px 4px;
|
|
background: linear-gradient(100deg,
|
|
rgba(63, 189, 245, .10), rgba(138, 118, 255, .05) 60%, transparent);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .84rem; font-weight: 600;
|
|
cursor: pointer; white-space: nowrap;
|
|
transition: color var(--tempo), background var(--tempo);
|
|
}
|
|
|
|
/* Der Lichtstrich. Ruht etwas kürzer als der Knopf und wächst beim
|
|
Überfahren auf volle Höhe -- die Bewegung ersetzt jedes Aufblitzen. */
|
|
.zurueck-knopf::before {
|
|
content: "";
|
|
position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(180deg, var(--akzent), var(--violett));
|
|
box-shadow: 0 0 8px -1px rgba(63, 189, 245, .55);
|
|
transition: top var(--tempo), bottom var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
|
|
.zurueck-knopf__pfeil {
|
|
width: 15px; height: 15px; flex: 0 0 auto;
|
|
fill: none; stroke: currentColor;
|
|
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
|
|
transition: transform var(--tempo);
|
|
}
|
|
|
|
.zurueck-knopf:hover {
|
|
color: #fff;
|
|
background: linear-gradient(100deg,
|
|
rgba(63, 189, 245, .18), rgba(138, 118, 255, .09) 60%, transparent);
|
|
}
|
|
.zurueck-knopf:hover::before {
|
|
top: 0; bottom: 0;
|
|
box-shadow: 0 0 14px 0 rgba(63, 189, 245, .75);
|
|
}
|
|
/* Der Pfeil rückt nach links -- sagt die Richtung ohne zusätzlichen Text. */
|
|
.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-3px); }
|
|
|
|
.zurueck-knopf:active { transform: translateY(1px); }
|
|
|
|
.zurueck-knopf:focus-visible {
|
|
outline: 2px solid var(--akzent);
|
|
outline-offset: 3px;
|
|
border-radius: 4px 999px 999px 4px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.zurueck-knopf, .zurueck-knopf::before, .zurueck-knopf__pfeil { transition: none; }
|
|
.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: none; }
|
|
}
|
|
|
|
.kopfleiste__rechts { display: flex; align-items: center; gap: 12px; }
|
|
|
|
.wer {
|
|
font-size: .86rem; color: var(--text-leise);
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
|
|
}
|
|
|
|
|
|
/* ---------- Inhalt ---------------------------------------------------- */
|
|
|
|
.inhalt {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px;
|
|
}
|
|
|
|
.willkommen { margin-bottom: 38px; }
|
|
.willkommen .titel { margin-bottom: 6px; }
|
|
|
|
/* ---------- Zahlen ---------------------------------------------------- */
|
|
|
|
.zahlen-block { margin-bottom: 34px; }
|
|
|
|
.zahlen {
|
|
list-style: none; margin: 0; padding: 0;
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
|
|
}
|
|
|
|
.zahl {
|
|
padding: 14px 16px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.zahl__wert { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
|
|
.zahl__name { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* Nur wenn wirklich etwas überfällig ist, wird die Kachel hervorgehoben --
|
|
sonst stumpft die Farbe ab und man übersieht sie im Ernstfall. */
|
|
.zahl[data-warn="ja"] { border-color: rgba(255, 154, 162, .42); background: rgba(255, 154, 162, .07); }
|
|
.zahl[data-warn="ja"] .zahl__wert { color: var(--warn); }
|
|
|
|
/* ---------- Bereiche --------------------------------------------------- */
|
|
|
|
.bereiche {
|
|
list-style: none; margin: 0; padding: 0;
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
|
|
}
|
|
|
|
.bereich {
|
|
display: flex; align-items: baseline; gap: 10px;
|
|
padding: 13px 15px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
.bereich__name { font-weight: 600; font-size: .95rem; }
|
|
|
|
.bereich__stand {
|
|
margin-left: auto;
|
|
font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Phase 1 ist in Arbeit - das wird hervorgehoben, der Rest bleibt ruhig. */
|
|
.bereich[data-phase="1"] { border-color: rgba(63, 189, 245, .34); }
|
|
.bereich[data-phase="1"] .bereich__stand { color: var(--akzent); }
|
|
|
|
/* Fertige Bereiche sind anklickbar und heben sich deutlich ab. */
|
|
.bereich[data-fertig="ja"] {
|
|
padding: 0;
|
|
border-color: rgba(63, 189, 245, .5);
|
|
background: linear-gradient(100deg, rgba(63, 189, 245, .10), rgba(138, 118, 255, .07));
|
|
transition: border-color var(--tempo), background var(--tempo);
|
|
}
|
|
.bereich[data-fertig="ja"]:hover { border-color: rgba(63, 189, 245, .8); }
|
|
|
|
.bereich__link {
|
|
display: flex; align-items: baseline; gap: 10px; width: 100%;
|
|
padding: 13px 15px;
|
|
color: inherit; text-decoration: none;
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.bereich__link:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
.bereich[data-fertig="ja"] .bereich__stand { color: var(--akzent); font-weight: 600; }
|
|
|
|
.inhalt .fuss { margin-top: 40px; text-align: left; }
|
|
|
|
@media (max-width: 520px) {
|
|
.kopfleiste { padding: 12px 16px; }
|
|
.kopfleiste .marke { font-size: .64rem; }
|
|
.wer { max-width: 34vw; }
|
|
}
|
|
|
|
/* Zurueckhaltender Zweitknopf. Gehoert bewusst hierher und nicht in eine
|
|
einzelne Seite: Er wird ueberall gebraucht, und als Seiten-CSS fehlte er
|
|
prompt dort, wo die Datei nicht geladen war -- dann standen nackte
|
|
Systemknoepfe in der Oberflaeche. */
|
|
|
|
/* ---------- Was ist dran ------------------------------------------------
|
|
Steht vor den Zahlen. Zahlen sagen, WIE VIEL anliegt -- diese Liste
|
|
sagt, WAS zu tun ist. Nur drei Stufen, und nur die oberste ist farbig:
|
|
Waere alles hervorgehoben, waere nichts hervorgehoben. */
|
|
.dran { margin-bottom: 30px; }
|
|
.dran__liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
|
|
|
|
.dran__punkt {
|
|
position: relative;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .028);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.dran__punkt::before {
|
|
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
|
|
border-radius: 0 2px 2px 0;
|
|
background: var(--rand);
|
|
}
|
|
.dran__punkt[data-stufe="warnung"] {
|
|
border-color: rgba(255, 154, 162, .3);
|
|
background: rgba(255, 154, 162, .055);
|
|
}
|
|
.dran__punkt[data-stufe="warnung"]::before { background: var(--warn); }
|
|
.dran__punkt[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
|
|
.dran__punkt[data-stufe="ruhig"] { opacity: .78; }
|
|
.dran__punkt:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
|
|
.dran__punkt[data-stufe="ruhig"]:hover { opacity: 1; }
|
|
|
|
.dran__link {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 14px;
|
|
padding: 12px 15px 12px 18px;
|
|
color: var(--text); text-decoration: none; font-size: .9rem;
|
|
}
|
|
.dran__punkt[data-stufe="warnung"] .dran__text { font-weight: 600; }
|
|
.dran__pfeil {
|
|
color: var(--text-still); font-size: .95rem;
|
|
transition: transform .18s ease, color .18s ease;
|
|
}
|
|
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dran__punkt, .dran__pfeil { transition: none; }
|
|
.dran__link:hover .dran__pfeil { transform: none; }
|
|
}
|