DogFatherGitandClaude Opus 5
fc4fde0f02
DIE BUEHNEN WAREN ZU DUNKEL. Bei 0.42 Helligkeit sah man Schemen, nicht die Szene -- "zu dunkel und sieht ganz komisch aus" traf es genau. Jetzt 0.66 mit etwas mehr Farbe (1.08), die Vignette schwaecher (0.52 statt 0.72). Die Bilder kommen durch. MOEGLICH IST DAS NUR MIT DEM GEGENZUG: Alle Kacheln, Karten und Spalten lagen bei 2 bis 3 Prozent WEISS -- also praktisch durchsichtig. Solange der Hintergrund fast schwarz war, fiel das nicht auf; sobald er hell wurde, lief das Bild mitten durch den Text. Jetzt gibt es --flaeche (rgba(9,13,22,.78)), eine deckende dunkle Flaeche, und 44 Stellen in 16 Dateien holen sich ihre Farbe von dort. Der Unterschied ist genau der, den Filipe beschrieben hat: Der Hintergrund bleibt sichtbar, aber ZWISCHEN den Kacheln -- nicht hinter der Schrift. Wer die Flaechen kuenftig dichter oder durchlaessiger will, aendert eine einzige Zeile statt 44. Die Kacheln selbst tragen ihren Farbton jetzt AUF der Flaeche (color-mix mit --flaeche statt mit transparent) -- dadurch bleibt die Farbe erkennbar, ohne dass die Kachel durchsichtig wird. DIE KOPFLEISTE war so breit wie das ganze Fenster, obwohl der Text kurz ist: .marke__text stand auf flex: 1 1 auto. Das war unsichtbar, solange der Schriftzug nur Text war -- seit er einen Rahmen traegt, lief die Pille quer durchs Bild. Jetzt flex: 0 1 auto (schrumpfen ja, wachsen nein). Gemessen: 375 px statt 1280. Kontrast an echten Bildpunkten auf allen sechs Seiten nachgemessen -- haelt trotz des viel helleren Bildes (schlechtester Wert 4,69:1). Co-Authored-By: Claude Opus 5 <[email protected]>
179 lines
6.8 KiB
CSS
179 lines
6.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: 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(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);
|
|
}
|
|
|
|
|
|
/* ---------- 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; }
|
|
}
|