DogFatherGit
45cd0ae226
/workspace/calls.html. Calls sind KEINE eigene Terminart neben dem Kalender, sondern dieselben Termine mit art = 'call' oder 'review'. Ein zweiter Terminspeicher waere die sichere Art, irgendwann zwei widerspruechliche Uhrzeiten zu haben. Diese Seite fuegt nur hinzu, was ein Gespraech vom blossen Termin unterscheidet: das Protokoll danach. Die Sichtbarkeitsregel ist Wort fuer Wort dieselbe wie im Kalender -- ein Termin darf nicht in der einen Ansicht auftauchen und in der anderen fehlen. Der tragende Satz von Seite 13, woertlich genommen: "Jeder Call endet mit klaren To-dos, die direkt ins Board uebernommen werden." To-dos werden deshalb NICHT als Text im Protokoll abgelegt, sondern sofort zu echten Aufgaben -- mit dem Gespraech als Herkunft in der Beschreibung, zugeordnet an das Gegenueber des Calls. Sonst steht die Verabredung in einem Dokument, das niemand mehr oeffnet. Geprueft: Protokoll geschrieben -> Aufgaben stehen im Brett. Weitere Punkte: - Reihenfolge der Gruppen ist Dringlichkeit, nicht Chronologie: Ganz oben stehen vergangene Gespraeche OHNE Protokoll. Das ist der einzige Zustand, der etwas von einem verlangt. Nur diese Gruppe ist optisch hervorgehoben; wenn alles schreit, sieht man nichts mehr. - Ein festgehaltenes Protokoll ist danach nur noch lesbar. Ein Gespraech nachtraeglich umschreiben zu koennen waere genau das, was ein Protokoll wertlos macht. - "Naechster Termin" legt den Folgetermin direkt in den Kalender -- mit demselben Gegenueber und demselben Meeting-Link. - Alles in EINER Transaktion. Geprueft mit einem absichtlich kaputten To-do: kein Protokoll, keine halben Aufgaben, kein Folgetermin. - Enter im To-do-Feld legt die naechste Zeile an, damit man eine Liste tippen kann, ohne zur Maus zu greifen. - Meeting-Link nur bei anstehenden Gespraechen und nur, wenn es wirklich eine http(s)-Adresse ist. "bei mir zu Hause" bleibt schlichter Text. Zur Videotechnik selbst bewusst KEINE Entscheidung getroffen: Ein eigener WebRTC-Raum braucht einen TURN-Server, damit Verbindungen hinter Mobilfunk-NAT zustande kommen. Das ist eine Infrastrukturfrage mit laufenden Kosten und gehoert besprochen, nicht nebenbei entschieden. Bis dahin traegt der Termin einfach den Link des Dienstes, der ohnehin benutzt wird. Nebenbei: .knopf-still lag in scouting.css und fehlte dadurch auf calls.html -- dort standen prompt nackte Systemknoepfe. Der Baustein gehoert ins gemeinsame start.css, dort liegt er jetzt.
203 lines
7.8 KiB
CSS
203 lines
7.8 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. */
|
|
.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;
|
|
}
|
|
|
|
/* 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; }
|
|
}
|