DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d845d91d708b483ade8502ca1fc9f50c454c7c3f
dogfather-universe/workspace/assets/css/scouting.css
T
DogFatherGit d845d91d70 Workspace: Scout-CRM -- Pipeline, Follow-ups und Uebergabe 
/workspace/scouting.html. Erster Baustein aus Phase 3 und der Bereich,
in dem Scouts bisher praktisch nichts hatten.

Der Merksatz von Seite 15 ist hier die Sicherheitsregel, nicht nur eine
Beschreibung: "Scouts sehen ihre Pipeline -- die Admin-Rolle die
Gesamtuebersicht -- Creator keine Scout-internen Daten."

- Creator bekommen 404, nicht 403, und zwar auf Schnittstelle UND Seite.
  Sie sollen nicht einmal erfahren, dass es den Bereich gibt.
- Ein Scout sieht ausschliesslich die eigene Pipeline. Geprueft: Patrick
  bekommt auf Sams Lead 404 beim Lesen, Aendern und Loeschen.
- Das Management sieht alles, kann nach Scout filtern und Leads einem
  Scout zuordnen.

Pipeline als gruppierte Liste, nicht als Board: Sechs Spalten waeren auf
dem Handy unbedienbar, und Scouts arbeiten unterwegs. Jede Stufe traegt
eine eigene Farbe an der linken Kante, die von kuehl (neu entdeckt) nach
gruen (uebergeben) laeuft -- die Richtung der Pipeline wird sichtbar,
ohne Ampel-Geblinke.

Jede Karte hat genau EINEN naheliegenden Schritt ("Weiter zu ..."), der
Rest steckt im aufklappbaren Teil. Der Weiter-Knopf traegt bewusst nur
die Farbe seiner Stufe statt des vollen Farbverlaufs, sonst waere die
Seite ein Streifenmuster aus identischen Leuchtbalken.

Faellige Follow-ups stehen als eigene Leiste ganz oben. Das ist der
Teil, der ohne System am ehesten untergeht -- nicht der Kontakt selbst,
sondern das Nachfassen.

Uebergabe ("Creator-Onboarding starten", Seite 15): Aus einem
uebergebenen Lead legt das Management mit einem Klick eine echte Person
mit Zugangscode an. Der Code wird genau einmal angezeigt, wie in der
Personenverwaltung. Die Qualifizierung des Scouts (Plattform, Handle,
Potenzial, LIVE-Aktivitaet) wandert dabei automatisch ins Creator-Profil
-- sonst muesste das Management abtippen, was laengst dasteht. Geprueft:
Lead -> Person -> Profil, alle drei verbunden, zweiter Versuch wird
abgelehnt.

Ein uebergebener Lead ist Teil der Betreuungsgeschichte -- den loescht
nur das Management, nicht der Scout (403).

Nebenbei: .knopf-still gab es im Baukasten noch gar nicht, die Zweit-
knoepfe waren nackte Systemknoepfe. Jetzt sauber definiert.
2026-08-28 10:57:42 +02:00

217 lines
8.3 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: 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. */
.kk__knoepfe .knopf--weiter {
background: color-mix(in srgb, var(--stufe-farbe) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--stufe-farbe) 45%, transparent);
color: color-mix(in srgb, var(--stufe-farbe) 60%, #ffffff);
font-weight: 600;
}
.kk__knoepfe .knopf--weiter:hover {
filter: none;
background: color-mix(in srgb, var(--stufe-farbe) 26%, transparent);
border-color: color-mix(in srgb, var(--stufe-farbe) 70%, transparent);
color: #fff;
}
/* Zurueckhaltender Zweitknopf -- gab es im Baukasten noch nicht. */
.knopf-still {
padding: 7px 13px; cursor: pointer;
background: transparent;
border: 1px solid var(--rand); border-radius: var(--radius-klein);
color: var(--text-still); font: inherit; font-size: .82rem;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.knopf-still:hover {
color: var(--text);
border-color: rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .04);
}
/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
der Knopf soll sich deshalb von den anderen abheben. */
.knopf--gold {
background: linear-gradient(100deg, rgba(240, 196, 138, .92), rgba(224, 160, 110, .92));
color: #241608;
border: 0;
}
.knopf--gold:hover { filter: brightness(1.07); }
/* ---------- 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);
}
.knopf-still--warn { color: #ffb4b9; border-color: rgba(255,154,162,.28); }
.knopf-still--warn:hover { color: #ffd0d3; border-color: rgba(255,154,162,.5); background: rgba(255,154,162,.08); }
.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; }
}
Reference in New Issue View Git Blame Copy Permalink