DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
233cd76d784cb4bba36caed2cde84245a8e592ee
dogfather-universe/workspace/assets/css/scouting.css
T
DogFatherGitandClaude Opus 5 6996c5957d Formularzeilen gerade geruckt, Pipeline erklaert sich selbst 
DIE VERZOGENE FORMULARZEILE hatte drei Ursachen, nicht eine -- und jede
einzelne haette gereicht, damit es schief aussieht:

1. Die Rasterregel galt nur fuer Kinder mit der Klasse .feld. Der
   Kalender benutzt schlichte <div> ohne Klasse; die fielen hindurch,
   bekamen von zwoelf Spalten je EINE und wurden nur so breit, wie ihr
   Inhalt sie zwang. Daher "Art" schmal und "Beginn" breit.
2. "Dauer (Minuten)" brach in der schmalen Spalte auf zwei Zeilen um --
   und schob das Feld darunter tiefer als seine Nachbarn. Die Klammer
   ist jetzt ein leiser Zusatz, die Beschriftung hat feste Hoehe.
3. Die letzten drei Pixel: Mit grid-template-rows: 1fr auto bestimmte
   jedes Element die Zeilenhoehe selbst. Ein <select> mass sich 3 px
   kleiner als ein <input> und sass dadurch hoeher. Gemessen: Container
   beider Felder identisch (652+71), Eingabe aber 676..720 gegen
   679..723. Drei Pixel klingen nach nichts und sind genau das, was man
   als "verzogen" sieht. Jetzt hat die Zeile feste Hoehe und das Feld
   fuellt sie ganz.

Ergebnis, gemessen statt betrachtet: alle Felder 44 px hoch, alle 362 px
breit, alle Unterkanten auf einer Linie. Auf dem Handy untereinander --
zwei Felder auf 300 px sind zwei Streifen, in die nichts hineinpasst.

NEUE PRUEFUNG pruef-formulare.mjs. Sie prueft nicht "sieht gut aus",
sondern misst: gleiche Hoehe, Unterkanten auf einer Linie, kein Feld
absurd schmal, keine Beschriftung mehrzeilig -- auf fuenf Seiten und
zwei Geraetegroessen. Zwei Messfehler darin selbst gefunden und behoben
(Teilpixel-Rundung, und eine Ausgabe ueber mehrere Zeilen, die die Datei
zerschossen hat).

DIE SCOUT-PIPELINE ERKLAERT SICH JETZT SELBST. Vorher stand im leeren
Zustand ein Satz, der nur wiederholte, was man ohnehin sieht: dass
nichts da ist. Wer die Seite zum ersten Mal oeffnet, wusste danach
weiterhin nicht, wofuer es sie gibt.

Der leere Zustand ist der EINZIGE Moment, in dem jemand garantiert
liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
Deshalb steht die Erklaerung genau dort und nicht in einer Hilfe, die
niemand aufmacht. Erklaert wird der NUTZEN, nicht die Bedienung: nicht
"hier klicken", sondern warum ein Scout ohne diese Liste Leute verliert
-- naemlich die Interessierten, bei denen drei Wochen nichts passiert
ist, und nicht die, die Nein sagen. Dazu die fuenf Stufen mit je einem
Satz, was sie bedeuten.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-01 16:11:53 +02:00

240 lines
8.9 KiB
CSS
Raw Blame History

/* ===================================================================
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: var(--flaeche);
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(min(150px, 100%), 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);
}
/* ---------- 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; }
}
/* ---------- Die Erklaerung im leeren Zustand ---------------------------
Der leere Zustand ist der einzige Moment, in dem jemand garantiert
liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
Deshalb steht hier keine Meldung, sondern die Erklaerung, wofuer die
Pipeline ueberhaupt gut ist. Sie ist laenger als ein Hinweis und
bekommt deshalb linksbuendigen Text statt zentrierten. */
.leer-hinweis--erklaerung {
text-align: left;
max-width: 62ch;
margin: 0 auto;
padding: 30px 28px 26px;
}
.erklaerung__satz {
margin: 0 0 14px;
font-size: 1.02rem; color: var(--text); line-height: 1.55;
}
.erklaerung__warum {
margin: 0 0 20px;
font-size: .9rem; color: var(--text-leise); line-height: 1.65;
}
.erklaerung__stufen {
display: grid; gap: 10px;
margin: 0 0 20px; padding: 0; list-style: none;
counter-reset: none;
}
.erklaerung__stufe {
display: flex; align-items: flex-start; gap: 12px;
font-size: .88rem;
}
/* Die Nummer als eigener Koerper: Die fuenf Stufen sind eine REIHENFOLGE,
und die soll man sehen, ohne die Ueberschriften zu lesen. */
.erklaerung__nr {
flex: none;
display: grid; place-items: center;
width: 24px; height: 24px; border-radius: 50%;
font-size: .74rem; font-weight: 700;
color: var(--ton, var(--akzent));
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
background: color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent);
}
.erklaerung__stufe strong { display: block; color: var(--text); }
.erklaerung__was {
display: block; margin-top: 1px;
font-size: .83rem; color: var(--text-still); line-height: 1.5;
}
.erklaerung__fuss {
margin: 0 0 16px; padding-top: 16px;
border-top: 1px solid var(--rand);
font-size: .86rem; color: var(--text-leise); line-height: 1.6;
}
.erklaerung__los {
margin: 0;
font-size: .88rem; color: var(--ton, var(--akzent));
}
/* Der Ring des leeren Zustands passt hier nicht -- es ist ja Text da. */
.leer-hinweis--erklaerung::before { display: none; }
@media (max-width: 560px) {
.leer-hinweis--erklaerung { padding: 22px 16px 20px; }
}
Reference in New Issue View Git Blame Copy Permalink