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.
183 lines
7.0 KiB
CSS
183 lines
7.0 KiB
CSS
/* ===================================================================
|
|
Scout-CRM.
|
|
|
|
Die Pipeline hat eine Richtung, das soll man sehen: Jede Stufe traegt
|
|
links eine farbige Kante, die von kuehl (neu entdeckt) zu warm/gruen
|
|
(uebergeben) laeuft. Gedeckt gehalten -- kein Ampel-Geblinke.
|
|
=================================================================== */
|
|
|
|
.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
|
|
.steuerung select {
|
|
min-width: 160px; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
/* ---------- Fällige Follow-ups ------------------------------------------ */
|
|
|
|
.faellig {
|
|
margin-bottom: 26px; padding: 14px 18px;
|
|
background: rgba(255, 190, 120, .07);
|
|
border: 1px solid rgba(255, 190, 120, .3);
|
|
border-radius: var(--radius);
|
|
}
|
|
.faellig__titel {
|
|
margin: 0 0 8px; font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: #f0c48a;
|
|
}
|
|
.faellig__liste { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
|
|
.faellig__liste li { display: flex; align-items: baseline; gap: 7px; }
|
|
.faellig__knopf {
|
|
padding: 0; background: none; border: 0; cursor: pointer;
|
|
color: var(--text); font: inherit; font-weight: 600;
|
|
border-bottom: 1px solid rgba(240, 196, 138, .45);
|
|
}
|
|
.faellig__knopf:hover { color: #f0c48a; }
|
|
|
|
/* ---------- Stufen -------------------------------------------------------- */
|
|
|
|
.stufe { margin-bottom: 30px; }
|
|
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
|
.stufe__titel {
|
|
margin: 0; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.stufe__zahl {
|
|
min-width: 22px; padding: 1px 7px; text-align: center;
|
|
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06);
|
|
border-radius: 999px;
|
|
}
|
|
.stufe__karten { display: grid; gap: 10px; }
|
|
|
|
/* Farbverlauf entlang der Pipeline. */
|
|
.stufe[data-stufe="neu"] { --stufe-farbe: #4c7fa8; }
|
|
.stufe[data-stufe="angesprochen"] { --stufe-farbe: #5b8fd4; }
|
|
.stufe[data-stufe="gespraech"] { --stufe-farbe: #7d84e0; }
|
|
.stufe[data-stufe="interessiert"] { --stufe-farbe: #8ab8a0; }
|
|
.stufe[data-stufe="uebergeben"] { --stufe-farbe: #79d1a2; }
|
|
.stufe[data-stufe="abgelehnt"] { --stufe-farbe: #55606f; }
|
|
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
|
|
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }
|
|
|
|
/* ---------- Karte --------------------------------------------------------- */
|
|
|
|
.kk {
|
|
position: relative;
|
|
padding: 15px 18px 15px 21px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
transition: border-color .18s ease, background .18s ease, opacity .18s ease;
|
|
}
|
|
.kk::before {
|
|
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
|
|
border-radius: 0 3px 3px 0;
|
|
background: var(--stufe-farbe, var(--akzent));
|
|
opacity: .8;
|
|
}
|
|
.kk:hover { border-color: rgba(255, 255, 255, .16); }
|
|
.kk[data-faellig="ja"] { border-color: rgba(255, 190, 120, .34); }
|
|
|
|
.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
|
|
.kk__name { margin: 0; font-size: 1.02rem; font-weight: 650; }
|
|
.kk__unter { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
|
|
|
|
.kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.marke-punkt, .marke-still, .marke-fertig {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font-size: .71rem; font-weight: 600; letter-spacing: .02em;
|
|
border: 1px solid var(--rand); color: var(--text-still);
|
|
}
|
|
.marke-punkt[data-prio="hoch"] {
|
|
color: #ffb4b9; border-color: rgba(255, 154, 162, .38); background: rgba(255, 154, 162, .1);
|
|
}
|
|
.marke-punkt[data-prio="mittel"] { color: var(--text-leise); }
|
|
.marke-fertig {
|
|
color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
|
|
}
|
|
|
|
.kk__info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; }
|
|
.kk__still { color: var(--text-still); }
|
|
.kk__followup { color: var(--text-leise); }
|
|
.kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }
|
|
|
|
.kk__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; }
|
|
|
|
/* Der Weiter-Schritt wiederholt sich auf jeder Karte. Als voller
|
|
Farbverlauf waere die Seite ein Streifenmuster -- er traegt deshalb
|
|
nur die Farbe seiner Stufe und wird erst beim Zeigen kraeftiger. */
|
|
|
|
/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
|
|
der Knopf soll sich deshalb von den anderen abheben. */
|
|
|
|
/* ---------- Aufgeklappt ---------------------------------------------------- */
|
|
|
|
.kk__detail {
|
|
margin-top: 15px; padding-top: 15px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.kk__zeile { margin: 0 0 9px; font-size: .87rem; color: var(--text-leise); }
|
|
.kk__schild {
|
|
display: block; margin-bottom: 1px;
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.kk__notiz {
|
|
width: 100%; margin: 4px 0 14px; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; resize: vertical;
|
|
}
|
|
.kk__raster {
|
|
display: grid; gap: 12px; margin-bottom: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
.kk__raster input, .kk__raster select {
|
|
width: 100%; padding: 9px 11px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
.kk__notiz:focus, .kk__raster input:focus, .kk__raster select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .65);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
.leer-hinweis {
|
|
padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius);
|
|
}
|
|
|
|
/* ---------- Codefenster ---------------------------------------------------- */
|
|
|
|
.schleier {
|
|
position: fixed; inset: 0; z-index: 60;
|
|
display: grid; place-items: center; padding: 22px;
|
|
background: rgba(3, 5, 10, .78);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.code-fenster {
|
|
width: min(440px, 100%); padding: 26px 28px;
|
|
background: #0b111b;
|
|
border: 1px solid rgba(63, 189, 245, .3);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
|
|
}
|
|
.code-fenster__titel { margin: 3px 0 10px; font-size: 1.2rem; font-weight: 700; }
|
|
.code-fenster__text { margin: 0 0 16px; font-size: .85rem; color: var(--text-leise); }
|
|
.code-fenster__code {
|
|
margin: 0 0 20px; padding: 15px;
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: 1.4rem; font-weight: 700; letter-spacing: .16em; text-align: center;
|
|
word-break: break-all;
|
|
background: rgba(63, 189, 245, .09);
|
|
border: 1px solid rgba(63, 189, 245, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kk { transition: none; }
|
|
}
|