DogFatherGitandClaude Opus 5
4eab64bd20
Filipe: "DU HAST WIEDER EINE KLEINE AENDERUNG UEBERALL GEMACHT ANSTATT
EINE RIESEN AENDERUNG." Er hatte recht, und der Grund war jedes Mal
derselbe: Ich habe das MATERIAL getauscht (Mattglas, Leuchtschiene,
Verlauf) und die FORM gelassen. Ein abgerundetes Rechteck bleibt ein
abgerundetes Rechteck -- und die Silhouette ist das Einzige, was man aus
fuenf Metern erkennt.
Jetzt ist die Form eine andere: abgeschnittene Ecke oben links
(clip-path, echte Silhouette), ein Kantenlicht in der Kategoriefarbe
darauf, Eckwinkel unten rechts, ein feines Raster statt Koernung.
35 Bauteile auf allen 18 Seiten, in einer eigenen Datei (module.css).
DREI DINGE, DIE DABEI SCHIEFGINGEN UND JETZT ABGESICHERT SIND
1. Die Regeln standen in :where() -- Spezifitaet null, also gewann jede
aeltere .kachel::before-Regel. Jetzt :is().
2. module.css stand an DRITTER Stelle im Ladeweg. Auf Calls,
Automationen, Bereich und Dateien hat sie damit gar nichts bewirkt:
Die Seitendateien setzen dort selbst border-radius und box-shadow und
kommen spaeter. Genau das ergab wieder "ueberall ein bisschen". Sie
wird jetzt als LETZTE geladen, geprueft auf allen 18 Seiten.
3. Die Klassenliste steht siebenmal in der Datei (CSS kennt keine
Variable fuer Selektoren). Eine vergessene Kopie faellt niemandem
auf -- pruef-css-klassen vergleicht sie deshalb alle, mit Gegenprobe.
DER KALENDER: NUR NOCH, WAS EINEN ANGEHT
Filipe: "calls oder termine soll jeder nur sehen die er selber macht
oder jeden betrifft." Das gilt auch fuer DogFather, und das ist die
eigentliche Aenderung -- er bekam bisher 1=1. "Jeden betrifft" heisst:
ohne Gegenueber und ohne Teilnehmerliste. Wer niemanden eintraegt, meint
alle. Die Rollenfrage entfaellt im Kalender damit vollstaendig.
SECHS PRUEFUNGEN, DIE EINE WELT GEMESSEN HABEN, DIE ES NICHT MEHR GIBT
Alle sechs wurden auf die neue Regel umgeschrieben, keine geloescht --
loeschen haette die Zahl gesenkt und den neuen Weg ungeprueft gelassen:
ics, serien, sicht, spicy, teilnehmer, tagesblick, team.
UND VIER ECHTE FUNDE, DIE DABEI HERAUSFIELEN
* pruef-workspace-seiten war seit dem Bildumbau von heute Frueh auf
ALLEN 32 Seiten rot: Sie verlangte noch das eine Motiv. Die neue
Bedingung ist schaerfer als beide alten -- das geladene Bild muss zu
dem Merkmal passen, das die Seite selbst traegt. Und die Meldung sagt
jetzt, WELCHE Bedingung gefallen ist.
* pruef-leistung-optik hat sich selbst ausgesperrt (meldete sich als
Manager an, der die Zahlen seit Filipes Anweisung nicht mehr sehen
darf) und stuerzte danach ab: 2 Pruefungen statt 56. Der Absturz hat
verdeckt, dass sie sieben Fingerziele als "zu klein" meldete -- es
waren die unsichtbaren Knoepfe der zugeklappten Woche, 0x0.
* personen.html beim Manager: Der Erklaersatz ("Codes, Sperren und das
Protokoll bleiben bei DogFather") kam nie an -- das Element gab es
nicht, und das && davor hat den Fehlgriff verschluckt. Die Liste stand
ausserdem dauerhaft auf aria-busy="true": fuer einen Screenreader lud
die Seite fuer immer.
* pruef-schranke hielt personen.html noch fuer DogFather-only. Die Seite
wechselt jetzt die Erwartung, statt aus der Pruefung zu verschwinden:
Seite auf fuer die Leitung, Verwaltungsdaten dahinter weiterhin zu.
Die Anmeldeseite wurde nicht angefasst (nur ihr Versionsstempel).
Co-Authored-By: Claude Opus 5 <[email protected]>
200 lines
11 KiB
CSS
200 lines
11 KiB
CSS
/* =====================================================================
|
|
module.css — DIE FORM ALLER MODULE
|
|
|
|
Herausgeloest aus start.css am 07.09.2026. Diese Datei beschreibt die
|
|
SILHOUETTE der ganzen Anwendung: die abgeschnittene Ecke, das
|
|
Kantenlicht, die Eckwinkel und das Raster.
|
|
|
|
Sie wird von JEDER Seite geladen -- ausser von der Anmeldeseite
|
|
(index.html), die unangetastet bleibt.
|
|
|
|
SIE WIRD ALS LETZTE GELADEN, und das ist keine Kosmetik. Bis zum
|
|
07.09.2026 stand sie an dritter Stelle, VOR den Seitendateien. Dort
|
|
hat sie auf vier Seiten schlicht nichts bewirkt: `.call` in
|
|
calls.css, `.regel`/`.zustand`/`.ki-kasten` in automation.css,
|
|
`.unterweisung` in bereich.css und `.fortschritt` in dateien.css
|
|
setzen alle selbst `border-radius` und `box-shadow` -- gleiche
|
|
Spezifitaet, spaeter im Ladeweg, also gewinnen sie. Ergebnis war
|
|
genau das, was Filipe zu Recht bemaengelt hat: die neue Form auf
|
|
manchen Seiten, die alte auf anderen, "ueberall ein bisschen".
|
|
Als letzte Datei gewinnt die Form ueberall.
|
|
|
|
WER EINE NEUE KARTE BAUT, traegt ihren Klassennamen in die Listen
|
|
unten ein. Die Liste steht siebenmal in dieser Datei (Grundform,
|
|
Kantenlicht, Raster, Handy und dreimal Kontrastmodus) -- das ist die
|
|
schwache Stelle dieser Bauart, denn eine vergessene Kopie faellt
|
|
niemandem auf. Deshalb steht vor jeder Kopie die Marke
|
|
MODULLISTE, und `pruef-css-klassen.mjs` vergleicht alle sieben
|
|
Vorkommen miteinander: Weicht eines ab, wird die Pruefung rot.
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
HUD-MODULE — die FORM ändert sich, nicht der Lack (07.09.2026)
|
|
|
|
Filipe: "DU HAST WIEDER EINE KLEINE ÄNDERUNG ÜBERALL GEMACHT ANSTATT
|
|
EINE RIESEN ÄNDERUNG."
|
|
|
|
---------------------------------------------------------------------
|
|
ER HAT RECHT, UND DER GRUND WAR IMMER DERSELBE
|
|
|
|
Ich habe dreimal das MATERIAL getauscht -- Mattglas, Leuchtschiene,
|
|
Verlauf mit Schatten -- und dreimal die FORM gelassen. Ein
|
|
abgerundetes Rechteck bleibt ein abgerundetes Rechteck. Die
|
|
Silhouette ist aber das Einzige, was man aus fünf Metern erkennt;
|
|
deshalb sah jede Änderung "wie vorher" aus.
|
|
|
|
DIE NEUE FORM:
|
|
|
|
1. DIE ECKE OBEN LINKS IST ABGESCHNITTEN. Eine Schräge statt einer
|
|
Rundung -- eine andere geometrische Klasse, und genau deshalb
|
|
fällt sie auf. Gebaut mit `clip-path`, also eine echte
|
|
Silhouette und kein aufgemalter Fleck.
|
|
2. EIN LICHT LÄUFT AUF DER KANTE, oben und über die Schräge, in der
|
|
Farbe der Kategorie -- nicht ein Rahmen rundherum (das wäre
|
|
wieder ein Kasten), sondern eine beleuchtete Oberkante.
|
|
3. ECKWINKEL UNTEN RECHTS. Zwei kurze Striche, die eine Ecke
|
|
andeuten, ohne sie zu zeichnen -- die Sprache von Peilung und
|
|
Zielmarke.
|
|
4. EIN FEINES RASTER statt Körnung. Körnung sagt "Papier", ein
|
|
Raster sagt "Messgerät".
|
|
|
|
---------------------------------------------------------------------
|
|
DREI DINGE, DIE BEIM ERSTEN ANLAUF SCHIEFGINGEN
|
|
|
|
`clip-path` SCHNEIDET DEN SCHLAGSCHATTEN AB. Deshalb liegt die Höhe
|
|
hier in `filter: drop-shadow()` und nicht in `box-shadow`: drop-shadow
|
|
folgt der WIRKLICHEN Form, box-shadow immer dem Rechteck -- er würde
|
|
einen Schatten für eine Ecke zeichnen, die es nicht mehr gibt.
|
|
|
|
DIE REGELN STANDEN IN `:where()`. Das hat Spezifität NULL, also
|
|
gewann jede ältere `.kachel::before`-Regel. Die Silhouette kam durch
|
|
(die setzt sonst niemand), das Kantenlicht nicht -- heraus kam ein
|
|
Zwitter aus neuer Form und alter Kante. Jetzt steht hier `:is()`:
|
|
Das übernimmt die Spezifität seines stärksten Arguments, also die
|
|
einer einzelnen Klasse. Damit liegt die Form gleichauf mit
|
|
`.kachel` und gewinnt über den Ladeweg -- deshalb muss diese Datei
|
|
zuletzt kommen (siehe oben).
|
|
|
|
UND SIE STAND ZU FRÜH IM LADEWEG. Siehe der Absatz ganz oben; das
|
|
war derselbe Fehler noch einmal, nur eine Ebene höher.
|
|
===================================================================== */
|
|
|
|
:root {
|
|
/* Die Schräge steht als Größe da, damit Silhouette, Kantenlicht und
|
|
Eckwinkel garantiert dieselbe benutzen. */
|
|
--fase: 18px;
|
|
--raster:
|
|
repeating-linear-gradient(0deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px),
|
|
repeating-linear-gradient(90deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px);
|
|
}
|
|
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
|
|
position: relative;
|
|
clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
|
|
border-radius: 0;
|
|
border: 0;
|
|
box-shadow: none;
|
|
filter:
|
|
drop-shadow(0 2px 3px rgba(0, 0, 0, .55))
|
|
drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
|
|
}
|
|
|
|
/* DAS KANTENLICHT. Ein Layer mit derselben Silhouette, 1,6 px kleiner --
|
|
was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge
|
|
inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
width: auto; height: auto;
|
|
opacity: 1;
|
|
background: linear-gradient(158deg,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 90%, #ffffff) 0%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 60%, transparent) 15%,
|
|
rgba(150, 186, 220, .20) 45%,
|
|
rgba(150, 186, 220, .07) 100%);
|
|
clip-path: polygon(
|
|
var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase),
|
|
1.6px calc(var(--fase) + 0.7px), 1.6px calc(100% - 1.6px),
|
|
calc(100% - 1.6px) calc(100% - 1.6px), calc(100% - 1.6px) 1.6px,
|
|
calc(var(--fase) + 0.7px) 1.6px, 1.6px calc(var(--fase) + 0.7px),
|
|
0 var(--fase));
|
|
}
|
|
|
|
/* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt
|
|
es nicht, und beides ist reine Optik ohne Klicks. */
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
background:
|
|
linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat,
|
|
linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat,
|
|
var(--raster);
|
|
background-size: 18px 1.5px, 1.5px 18px, 26px 26px, 26px 26px;
|
|
background-position: right 10px bottom 10px, right 10px bottom 10px, 0 0, 0 0;
|
|
/* .3 war zu laut: Das Raster soll man nicht LESEN, sondern spueren.
|
|
Bei 26 px Abstand und einem Viertel Deckkraft bleibt der Eindruck
|
|
"Messgeraet", ohne dass die Linien mit dem Text konkurrieren. */
|
|
opacity: .26;
|
|
transform: none;
|
|
}
|
|
|
|
/* Der Inhalt gehört ÜBER Raster und Kantenlicht. Ohne diese Zeile
|
|
liegt bei Karten ohne eigenen Stapelwert der Text unter dem Raster
|
|
und wird von ihm überzeichnet. */
|
|
:is(.eintrag-karte, .call, .datei, .kachel, .willkommen, .leer-hinweis,
|
|
.team-karte, .zahl, .k-listentag, .person, .creator) > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Beim Anfassen kommt das Modul NÄHER, es leuchtet nicht auf. */
|
|
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte):hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: none;
|
|
filter:
|
|
drop-shadow(0 4px 6px rgba(0, 0, 0, .6))
|
|
drop-shadow(0 20px 34px rgba(0, 0, 0, .6))
|
|
drop-shadow(0 0 14px color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent));
|
|
}
|
|
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte) {
|
|
transition: transform var(--tempo), filter var(--tempo);
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
/* Dieselbe Form, kleiner -- keine zweite Gestaltung. */
|
|
:root { --fase: 12px; }
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
|
|
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte):hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
@media (forced-colors: active) {
|
|
/* Im Kontrastmodus zählt die Kante, und die muss ein echter `border`
|
|
sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
|
|
filter: none; border: 1px solid CanvasText;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after {
|
|
display: none;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .unterweisung, .warnkarte, .kachel, .willkommen, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before {
|
|
display: none;
|
|
}
|
|
}
|