DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6996c5957d68b61bd5ec24637f83e57872e31699
dogfather-universe/workspace/assets/css/wissen.css
T
DogFatherGitandClaude Opus 5 1fe443e59c Handy durchgeprueft, Lichtfarbe je Kachel, haengendes Licht behoben 
DAS LICHT BLIEB HAENGEN -- vier Ursachen, jede einzeln behoben:

1. EIN WETTLAUF. Zwischen dem Anmelden eines Bildaufbaus und seinem
   Ablauf konnte der Zeiger die Karte laengst verlassen haben. Dann hatte
   pointerout schon aufgeraeumt, und der Bildaufbau schaltete das Licht
   gleich wieder AN. Der haeufigste Fall und der unauffaelligste.
2. UEBER EINE LUECKE VERLASSEN. Wer eine Karte nicht ueber eine
   Nachbarkarte verliess, sondern ueber den Zwischenraum, loeste kein
   Ereignis aus, das die alte Karte kannte.
3. GESCROLLT, OHNE DIE MAUS ZU BEWEGEN. Die Karte wandert unter dem
   stehenden Zeiger weg -- es kommt gar kein Zeigerereignis. Jetzt wird
   beim Scrollen nachgesehen, ob die beleuchtete Karte noch unter dem
   Zeiger liegt.
4. FENSTER ODER TAB VERLASSEN. Auch dort kommt nichts mehr.

Es gibt jetzt genau EINE beleuchtete Karte -- mehr kann es nicht geben,
es gibt ja nur einen Zeiger. Beim Wechsel geht die alte aus, bevor die
neue angeht.

DIE FARBE GEHOERT ZUR KACHEL. Auf der Wissensseite leuchteten alle sechs
Welten violett, weil die Farbe dort --w heisst und der ganze uebrige
Workspace --ton benutzt. Das Licht griff auf --ton zu, fand nichts und
nahm den Farbton der SEITE. Dieselbe Luecke bei den Aufgaben-Spalten
(--sfarbe), den Kalenderkarten (--afarbe) und den Kalenderzeilen
(--zfarbe). Alle vier setzen jetzt --ton mit.

Nachgewiesen an echten Bildpunkten, nicht am Quelltext: Der Zeiger wird
auf die Aufgaben-Kachel gesetzt (dort muss Rot ueberwiegen: 85 zu 22)
und auf die Kalender-Kachel (dort Blau: 71 zu 13). Ein
Zeichenkettenvergleich haette das nicht gekonnt -- der Browser rechnet
color-mix() aus und schreibt je nach Fassung rgb(), color() oder oklab()
zurueck.

DAS HANDY, komplett durchgeprueft: neue pruef-handy.mjs faehrt alle
fuenfzehn Seiten auf DREI echten Geraetegroessen ab (320 px iPhone SE,
390 px iPhone, 412 px Android) und misst fuenf Dinge, die am Rechner
unsichtbar sind. Gefunden und behoben:

  * ZWEI ECHTE UEBERLAEUFE (startcheck +27 px, automation +33 px). Die
    Seite liess sich waagerecht schieben -- auf einem Telefon der
    schlimmste Fehler. Ursachen: zwoelf Raster mit festem Mindestmass
    (minmax(280px, 1fr) kann nicht schrumpfen -> min(280px, 100%)),
    zwoelf feste Mindestbreiten an Auswahlfeldern, und ein "flex: none"
    an den Stufen-Knoepfen, das jedes Schrumpfen verbot. "width: 100%"
    allein reichte dort nicht.
  * BERUEHRZIELE unter 24 px (WCAG 2.2, Kriterium 2.5.8). Auswahlfelder
    waren 18 bis 22 px hoch. Jetzt 44 px -- die Empfehlung von Apple und
    Google, und der Daumen ist nun einmal breiter als ein Mauszeiger.
    Nebenbei behebt die Schriftgroesse 16 px das Hineinzoomen von iOS.
  * SCHRIFT unter 11,7 px an 52 Stellen. Gesucht wurden sie nicht von
    Hand -- das waere ein Ratespiel gewesen und haette die Haelfte
    uebersehen -- sondern durch Durchsuchen der Stildateien nach
    font-size unter 0,73rem.

ZWEI FEHLER IN DEN EIGENEN PRUEFUNGEN gefunden und behoben: Die
Schriftregel griff zuerst gar nicht (start.css wird VOR den Seitenstilen
geladen, bei gleicher Staerke gewinnt die spaetere -- jetzt mit
body.start qualifiziert), und die Lichtpruefung scrollte 600 px und
stellte nicht zurueck, sodass die folgende Pruefung ins Leere zeigte.

GEGENPROBE gemacht: Mit absichtlich eingebauten Fehlern (8-px-Schrift,
500 px breiter Inhalt) meldet die Handypruefung sofort Rot. Eine
Pruefung, die immer bestaetigt, bestaetigt nichts.

Alle achtzehn Pruefungen laufen gruen.

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

386 lines
15 KiB
CSS
Raw Blame History

/* ===================================================================
Wissens-Bibliothek.
Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.
Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
=================================================================== */
/* ---------- Suche und Filter ---------------------------------------------- */
.suchleiste {
display: grid; gap: 12px; margin-bottom: 30px;
padding: 16px 18px;
background: var(--flaeche);
border: 1px solid var(--rand); border-radius: var(--radius);
}
.suchleiste__feld { position: relative; display: flex; align-items: center; }
.suchleiste__lupe {
position: absolute; left: 13px; width: 17px; height: 17px;
fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
pointer-events: none;
}
.suchleiste__feld input {
width: 100%; padding: 11px 14px 11px 40px;
background: rgba(255, 255, 255, .05);
border: 1px solid var(--rand); border-radius: var(--radius-klein);
color: var(--text); font: inherit;
}
.suchleiste__feld input:focus {
outline: none; border-color: rgba(63, 189, 245, .6);
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.suchleiste__filter .feld-schild { margin: 0; }
.suchleiste__filter select {
padding: 8px 11px; min-width: 118px;
background: rgba(255, 255, 255, .05);
border: 1px solid var(--rand); border-radius: var(--radius-klein);
color: var(--text); font: inherit; font-size: .85rem;
}
.suchleiste__filter select:focus {
outline: none; border-color: rgba(63, 189, 245, .6);
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}
/* ---------- Bloecke -------------------------------------------------------- */
.block { margin-bottom: 34px; }
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.block__titel {
margin: 0; font-size: .78rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.block__zahl {
min-width: 22px; padding: 1px 8px; text-align: center;
font-size: .74rem; font-weight: 700; color: var(--text-still);
background: rgba(255, 255, 255, .06); border-radius: 999px;
}
/* ---------- Kacheln --------------------------------------------------------- */
.kacheln {
display: grid; gap: 11px;
grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}
.kachel {
--w: var(--akzent);
--ton: var(--akzent);
position: relative; display: flex; align-items: flex-start; gap: 14px;
padding: 15px 16px;
text-decoration: none; color: var(--text);
border: 1px solid transparent; border-radius: 13px;
/* Deutlich heller als der Seitenhintergrund (#05070d) -- die Kacheln
sollen als Flaechen erkennbar sein, nicht im Dunkeln verschwinden.
Gemessen: Seite liegt bei RGB(5,7,13), die Kachel bei RGB(38,49,67) --
der erste Versuch mit (27,36,51) war zu zaghaft, da kam der sichtbare
Gewinn fast nur vom Rand. */
background:
linear-gradient(#263143, #1c2637) padding-box,
linear-gradient(150deg,
color-mix(in srgb, var(--w) 62%, transparent),
rgba(255, 255, 255, .12) 55%,
color-mix(in srgb, var(--w) 26%, transparent)) border-box;
transition: transform .16s ease, box-shadow .2s ease, background .16s ease;
}
.kachel::after {
content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
background: linear-gradient(90deg, transparent,
color-mix(in srgb, var(--w) 45%, transparent), transparent);
}
.kachel:hover {
transform: translateY(-2px);
background:
linear-gradient(#2f3b50, #232e42) padding-box,
linear-gradient(150deg, var(--w), rgba(255, 255, 255, .16) 55%,
color-mix(in srgb, var(--w) 40%, transparent)) border-box;
box-shadow: 0 8px 26px -11px color-mix(in srgb, var(--w) 90%, transparent);
}
.kachel:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
}
.kachel[data-leer="ja"] { opacity: .82; }
.kachel[data-leer="ja"]:hover { opacity: 1; }
.kachel__ring {
flex: none; display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 12px;
background: color-mix(in srgb, var(--w) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--w) 45%, transparent);
}
.kachel__symbol {
width: 21px; height: 21px;
fill: none; stroke: var(--w); stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.kachel__text { min-width: 0; flex: 1; }
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
.kachel__beschreibung {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; margin-top: 3px;
/* War --text-still (gemessen 3,6:1 auf der neuen Flaeche) -- zu blass
fuer laufenden Text. --text-leise liegt bei 6,4:1. */
font-size: .79rem; color: var(--text-leise); line-height: 1.45;
}
.kachel__zahl {
flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
text-align: center; font-size: .75rem; font-weight: 700;
color: color-mix(in srgb, var(--w) 40%, #ffffff);
background: color-mix(in srgb, var(--w) 20%, transparent);
border: 1px solid color-mix(in srgb, var(--w) 40%, transparent);
border-radius: 999px;
}
/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
/* Beide Namen gleichzeitig: --w heisst die Farbe hier seit jeher und
steht in zwei Dutzend Regeln dieser Datei; --ton ist der Name, den
der ganze uebrige Workspace benutzt (Kacheln der Startseite,
Seitenkoepfe, Buehnenzuordnung).
Ohne --ton leuchtete das Licht unter dem Zeiger in der Farbe der
SEITE statt in der Farbe der Kachel -- auf der Wissensseite waren
also alle sechs Welten violett. Genau das war zu sehen. */
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; --ton: #3fbdf5; }
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; --ton: #8a76ff; }
.block[data-welt="bildton"] .kachel { --w: #5fc99a; --ton: #5fc99a; }
.block[data-welt="technik"] .kachel { --w: #e8b877; --ton: #e8b877; }
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; --ton: #e88fb4; }
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; --ton: #8e9cb0; }
/* ---------- Karte einer Anleitung -------------------------------------------- */
.karten { display: grid; gap: 10px; }
.pdf {
padding: 15px 17px;
background: var(--flaeche);
border: 1px solid var(--rand); border-radius: var(--radius-klein);
transition: border-color .18s ease;
}
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
.pdf[data-wichtig="ja"] {
border-color: rgba(232, 192, 125, .32);
background: rgba(232, 192, 125, .045);
}
.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
.pdf__ring {
flex: none; display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 11px;
background: rgba(63, 189, 245, .1);
border: 1px solid rgba(63, 189, 245, .24);
}
.pdf__symbol {
width: 19px; height: 19px;
fill: none; stroke: var(--akzent); stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.pdf__mitte { min-width: 0; flex: 1; }
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }
.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
padding: 3px 9px; border-radius: 999px;
font: inherit; font-size: .71rem; font-weight: 600;
border: 1px solid var(--rand); color: var(--text-still);
background: transparent;
}
.marke-stufe[data-stufe="einsteiger"] {
color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
}
.marke-stufe[data-stufe="fortgeschritten"] {
color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
}
.marke-stufe[data-stufe="profi"] {
color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
}
.marke-geraet { color: var(--text-leise); }
.marke-wichtig {
color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
}
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }
.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
/* ---------- Formular ---------------------------------------------------------- */
/* ---------- Ablagefläche für die PDF ------------------------------------
Ein nacktes <input type="file"> sah aus wie ein Fremdkörper und der
Knopf wurde vom Browser abgeschnitten ("K..."). Eine eigene Fläche
nimmt auch gezogene Dateien an -- der Weg, den man ohnehin erwartet. */
.pdf-ablage {
display: grid; place-items: center; gap: 5px;
padding: 26px 20px; cursor: pointer;
border: 1px dashed rgba(255, 255, 255, .2);
border-radius: var(--radius);
background: var(--flaeche);
transition: border-color .18s ease, background .18s ease;
}
.pdf-ablage:hover, .pdf-ablage:focus-visible {
outline: none;
border-color: rgba(63, 189, 245, .55);
background: rgba(63, 189, 245, .06);
}
.pdf-ablage[data-drueber="ja"] {
border-color: var(--akzent); border-style: solid;
background: rgba(63, 189, 245, .1);
}
.pdf-ablage[data-fertig="ja"] {
border-style: solid; border-color: rgba(95, 201, 154, .45);
background: rgba(95, 201, 154, .07);
}
.pdf-ablage__zeichen {
width: 26px; height: 26px;
fill: none; stroke: var(--text-still); stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
.pdf-ablage[data-fertig="ja"] .pdf-ablage__zeichen { stroke: #5fc99a; }
.pdf-ablage__text { margin: 0; font-size: .92rem; color: var(--text-leise); text-align: center; }
.pdf-ablage__text strong { color: var(--akzent); }
.pdf-ablage__klein { margin: 0; font-size: .77rem; color: var(--text-still); }
.tag-vorschlag { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.tag-knopf {
padding: 3px 9px; cursor: pointer; font-size: .73rem;
background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
color: var(--text-still); font-family: inherit;
transition: color .16s ease, border-color .16s ease;
}
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
.leer-hinweis p { margin: 0; max-width: 52ch; }
@media (max-width: 620px) {
.kacheln { grid-template-columns: 1fr; }
.suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
.suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
.pdf__ring { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.kachel, .pdf, .marke-tag, .tag-knopf, .pdf-ablage,
.schalter, .schalter__gleis, .schalter__punkt { transition: none; }
.kachel:hover { transform: none; }
}
/* Bestätigung in derselben Zeile wie Fehler, aber nicht in Warnrot --
eine Erfolgsmeldung in Rot liest sich wie ein Problem. */
.fehler[data-gut="ja"] {
color: #79d1a2;
padding: 9px 13px;
background: rgba(95, 201, 154, .09);
border: 1px solid rgba(95, 201, 154, .3);
border-radius: var(--radius-klein);
}
/* ===================================================================
Kategoriewahl und Filterschalter (31.08.2026).
Beides ersetzt ein <select>. Der Grund ist derselbe wie bei der
Rollenwahl: Ein AUFGEKLAPPTES Systemmenue laesst sich nicht
gestalten -- es kam als weisses Windows-Menue mitten in der dunklen
Oberflaeche. Bei zwanzig Kategorien kam dazu, dass man in so einer
Liste nichts findet.
Hier stehen dieselben sechs Welten und dieselben Farben wie auf den
Kacheln der Seite: Man waehlt aus demselben Regal, in dem man sonst
stoebert.
=================================================================== */
.katwahl { display: grid; gap: 14px; margin-top: 4px; }
.katwahl__welt { --w: var(--akzent); }
.katwahl__welt[data-welt="tiktok"] { --w: #3fbdf5; }
.katwahl__welt[data-welt="aufbau"] { --w: #8a76ff; }
.katwahl__welt[data-welt="bildton"] { --w: #5fc99a; }
.katwahl__welt[data-welt="technik"] { --w: #e8b877; }
.katwahl__welt[data-welt="inhalt"] { --w: #e88fb4; }
.katwahl__welt[data-welt="hilfe"] { --w: #8e9cb0; }
.katwahl__weltname {
margin: 0 0 6px; font-size: .7rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: color-mix(in srgb, var(--w) 55%, #ffffff);
}
.katwahl__reihe { display: flex; gap: 6px; flex-wrap: wrap; }
.katwahl__knopf {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 13px; cursor: pointer; text-align: left;
background: linear-gradient(#1a2230, #151c28);
border: 1px solid var(--rand); border-radius: 10px;
color: var(--text-leise); font: inherit; font-size: .83rem;
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.katwahl__knopf:hover { color: var(--text); border-color: color-mix(in srgb, var(--w) 45%, transparent); }
.katwahl__knopf:focus-visible {
outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
}
.katwahl__knopf[data-an="ja"] {
color: #fff; font-weight: 600;
border-color: color-mix(in srgb, var(--w) 65%, transparent);
background: linear-gradient(color-mix(in srgb, var(--w) 20%, #1a2230),
color-mix(in srgb, var(--w) 11%, #151c28));
box-shadow: 0 4px 14px -9px var(--w);
}
.katwahl__symbol {
width: 17px; height: 17px; flex: none;
fill: none; stroke: var(--w); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.katwahl__name { white-space: nowrap; }
/* ---------- Filterschalter ------------------------------------------------ */
.filterreihe { display: inline-flex; gap: 4px; }
.filterreihe__knopf {
padding: 7px 12px; cursor: pointer;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--rand); border-radius: 8px;
color: var(--text-still); font: inherit; font-size: .82rem;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.filterreihe__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
.filterreihe__knopf[data-an="ja"] {
color: #fff; font-weight: 600;
border-color: rgba(63, 189, 245, .55);
background: rgba(63, 189, 245, .16);
}
.filterreihe__knopf:focus-visible {
outline: none; box-shadow: 0 0 0 3px rgba(63, 189, 245, .3);
}
@media (max-width: 620px) {
.katwahl__knopf { flex: 1 1 100%; }
.filterreihe { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
.katwahl__knopf, .filterreihe__knopf { transition: none; }
}
/* "Neu" laeuft nach 48 Stunden ab, "Wichtig" bleibt bis zum Abschalten.
Zwei Marken statt einer -- sonst sieht man nicht, warum eine Anleitung
oben steht, und wundert sich, wenn eine verschwindet und die andere
nicht. */
.marke-neu {
padding: 3px 9px; border-radius: 999px;
font-size: .71rem; font-weight: 600;
color: #5fc99a;
background: rgba(95, 201, 154, .12);
border: 1px solid rgba(95, 201, 154, .38);
}
.block__frage { margin: -6px 0 13px; font-size: .82rem; color: var(--text-still); max-width: 76ch; }
Reference in New Issue View Git Blame Copy Permalink