DogFatherGitandClaude Opus 5
ad47fc2b00
DER GRUND JEDER KACHEL IM HAUS VON TEAM DOGI
Filipe: "ich will dass die hintergrunde von den kacheln immer unviersum
artig ist, es muss richtig geil sein aber immer so dass man alles noch
gut erkkent. und das IN DER GANZEN WEBSITE VON TEAM DOGI. nur die
kacheln. [...] wichtig ist die form der kacheln soll gleich bleiben."
module.css hat eine kanonische KACHELLISTE -- 48 Klassen, siebenmal in
der Datei, von pruef-css-klassen gegeneinander gehalten. Eine achte
Abschrift in crew-haus.css waere die Sorte Fehler, die nicht auffaellt:
heute vollstaendig, bei der naechsten neuen Kachel lautlos nicht mehr.
Deshalb faerbt crew-haus.css keine einzige Kachel. module.css baut den
Grund jetzt aus vier Werten (--sternenfeld, -mass, -lage,
--modul-schleier), und das zweite Haus setzt nur diese vier um. Damit
hat jede Kachel der ganzen Adresse den Himmel -- auch die, die es noch
nicht gibt. Im Agenturhaus steht `none`: kein Pixel aendert sich.
ZWEI DINGE HAT ERST DIE MESSUNG GEFUNDEN, NICHT DAS NACHDENKEN:
1. Die Nebel standen zuerst oben links. Dort ist aber JEDE Kachel dieses
Hauses schon von sich aus am hellsten -- ihr eigener Lichtverlauf
laeuft bei allen aus derselben Richtung (155/150/158 Grad) --, und
genau dort stehen ueberall die Ueberschriften. Hinter der leisesten
Textzeile lagen dadurch 2,09 % der Bildpunkte unter 4,5:1; im
Agenturhaus sind es an derselben Stelle 0,115 %. Nach dem Umzug in
die beiden gegenueberliegenden Ecken: 0,22 % -- und der Nebel durfte
dabei KRAEFTIGER werden (.80 statt .62), weil er nicht mehr auf dem
hellsten Punkt liegt. Besser lesbar und deutlicher zu sehen; das ist
selten und war hier umsonst zu haben.
2. Kleinere, dafuer hellere Sternkerne waren der falsche Weg: Der
hellste Punkt blieb fast gleich, der Stern wurde nur unschaerfer.
Entschieden hat die Deckkraft, nicht die Groesse.
Form unangetastet: Fase, Silhouette und die drei Eckwinkel werden vor
und nach dem Hauswechsel Zeichen fuer Zeichen verglichen.
pruef-kachel-universum.mjs (NEU, 37 Pruefungen, Port 4391) misst an
echten Bildpunkten und fragt nicht nach Durchschnitt allein, sondern
nach dem ANTEIL der Punkte unter 4,5:1 -- das unterscheidet einen Punkt
von einer Flaeche. Zwei Gegenproben: ein zu dunkler Text UND ein zu
heller Nebel muessen durchfallen.
MEINE SICHT -- "GENAU SO WIE SIE ES SEHEN"
Filipe: "oben bei meine sicht soll ich auch die sicht von allen jeden
moment sehen koennen und das genau genau so wie sie es sehen alles.
ausser die kalender daten oder chat daten wo ich nicht mit drin bin.."
Gemessen wurde nicht "mit Umschalter gegen ohne" -- das ist bei duenner
Datenlage ueberall gleich und beweist nichts. Gemessen wurde die
Antwort mit Umschalter gegen die Antwort, die die Person SELBST bekommt.
Das hat sechs Stellen gefunden:
* workspace-zentrale.js las `req.person.sicht` -- ein Feld, das es nicht
gibt. Der Ausdruck war immer `undefined || req.person`, daneben ein
ausfuehrlicher Kommentar, der genau das Richtige beschrieb. Die grosse
Kachel zeigte verlaesslich die eigene Lage, waehrend die Zahlen
darunter der fremden folgten -- zwei Wahrheiten in einer Kachel. Ein
Tippfehler in einem Variablennamen macht nichts kaputt; er tut nur
nichts, und genau deshalb faellt so etwas nie von selbst auf. Die
Route hatte ausserdem ZWEI Personenvariablen; jetzt hat sie eine.
* sichtPerson() gab die angesehene Person ohne Feld `haus` zurueck --
und nurHaus()/hausBedingung() fangen beide mit `haus !== "crew"` an.
Jede fremde Sicht war damit eine Agentursicht: In der Sicht auf einen
Modi kamen die Dateien, Personen und Berichte des anderen Hauses.
Das Haus haengt jetzt an der ROLLE, nicht an der Adresse.
* leistung, profil, schulung, fruehwarnung, report und teamlage lasen
weiterhin den Angemeldeten. Nur LESEN ist umgestellt, nie ein Recht --
und weil DogFather ohnehin alles sehen darf, kann das nichts oeffnen,
nur weniger zeigen.
Der Sicht-Umschalter zeichnete ausserdem nur die fuenf Rollen aus
bereiche.js; wer eine sechste hat, stand nicht darin. Dieselbe Luecke
wie in der Chat-Auswahl und der Personenliste, zum dritten Mal. Die
Ueberschrift kommt jetzt vom Server (`gruppe`), der Browser zeichnet,
was ankommt -- auch eine Rolle, deren Namen er nicht kennen darf.
DREI STELLEN FOLGEN BEWUSST NICHT: die Personenliste (aus ihr wird der
Umschalter gebaut -- folgte sie der Sicht, kaeme man aus einer fremden
nicht mehr heraus), die Auswahllisten beim Anlegen (Kategorien,
Empfaenger) und steckbrief/mein (ein Formular, das fremd liest und
eigen speichert, zerstoert Daten).
KALENDER UND CHAT BLEIBEN PRIVAT, auch mit Umschalter -- Termine,
Calls und Wiederholungen lesen ab jetzt immer die eigene Person. Eine
Pruefung musste dafuer umgedreht werden: pruef-sicht verlangte bis
heute das Gegenteil ("dafuer gibt es den Umschalter"). Die Gegenprobe
bleibt dieselbe Frage, nur andersherum -- Patrick selbst MUSS seine
Termine sehen, sonst hiesse "DogFather sieht sie nicht" nur, dass sie
niemand sieht. Dabei fiel auf, dass die Managerin gar keinen Call
hatte: Die Pruefung "bleibt privat" war nicht bestanden, sondern nicht
durchfuehrbar. Antwort darauf sind Daten, keine weichere Bedingung.
Gruen: pruef-sicht 84 (vorher 53), pruef-kachel-universum 37 (neu),
pruef-rollen 282, pruef-crew-adresse 129, pruef-start-ansicht 143,
pruef-kalender 104, pruef-haus-trennung 62, pruef-team-ampel 32,
pruef-team-stufen 26, pruef-css-klassen. Stempel 202609110209.
Co-Authored-By: Claude Opus 5 <[email protected]>
500 lines
25 KiB
CSS
500 lines
25 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;
|
|
/* DAS RASTER TRITT ZURUECK (09.09.2026, screen3).
|
|
|
|
Filipe: "die hintergrunde sollen ueberall so sein dass die sich
|
|
nicht in den vordergrund draengeln."
|
|
|
|
Es stand auf .26 Deckkraft. Das ist auf einer dunklen Flaeche kein
|
|
Hauch mehr, sondern ein gezeichnetes Gitter -- im Tagdialog lief es
|
|
sichtbar durch die Ueberschrift, in den Sammelkacheln stand es vor
|
|
den Karten darin. Ein Hintergrund, den man LIEST, ist kein
|
|
Hintergrund.
|
|
|
|
Jetzt .09. Das ist der Wert, bei dem man aus einem Meter Abstand
|
|
eine Struktur SIEHT, aber keine Linien ZAEHLT -- und genau das ist
|
|
der Unterschied zwischen Material und Muster. Dieselbe Ueberlegung
|
|
wie beim Kohlefasergewebe der Zentrale, das bei drei Prozent liegt.
|
|
|
|
EINE ZAHL FUER DAS GANZE HAUS: `--raster` steht hier einmal und
|
|
wird an 20 Stellen benutzt. Wer es leiser will, aendert diese eine
|
|
Zeile -- deshalb war es auch richtig, es nicht an jeder Kachel
|
|
einzeln nachzuziehen. */
|
|
--raster:
|
|
repeating-linear-gradient(0deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px),
|
|
repeating-linear-gradient(90deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px);
|
|
|
|
/* DAS STERNENFELD -- die Stelle, an der ein Haus dem Grund jeder
|
|
Kachel etwas Eigenes geben kann, OHNE die Kachelliste ein achtes
|
|
Mal abzuschreiben.
|
|
|
|
Hier steht `none`: Im Agenturhaus aendert sich dadurch kein
|
|
einziges Pixel -- eine Ebene ohne Bild zeichnet nichts. Wer ein
|
|
Haus baut, setzt diese drei Werte auf `:root` um und hat damit
|
|
jede Kachel der ganzen Adresse erwischt, auch die, die es noch
|
|
gar nicht gibt.
|
|
|
|
DREI WERTE, WEIL EIN HINTERGRUND DREI LISTEN HAT. Bild, Groesse
|
|
und Lage werden Ebene fuer Ebene einander zugeordnet. Wer nur das
|
|
Bild austauscht, bekommt die Groesse der Ebene davor -- deshalb
|
|
gehoeren sie zusammen und werden zusammen gesetzt.
|
|
|
|
Die FORM bleibt davon unberuehrt: Fase, Kantenlicht und Eckwinkel
|
|
stehen woanders. Ein Sternenfeld faerbt, es schneidet nicht. */
|
|
--sternenfeld: none;
|
|
--sternenfeld-mass: auto;
|
|
--sternenfeld-lage: 0 0;
|
|
|
|
/* Wie stark die ganze Ebene aus Raster, Eckwinkeln und Sternenfeld
|
|
durchkommt. Steht als Wert da, damit ein Haus mit eigenem Grund
|
|
ihn heben kann -- .26 bleibt der Wert des Agenturhauses. */
|
|
--modul-schleier: .26;
|
|
}
|
|
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
|
|
position: relative;
|
|
clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
|
|
border-radius: 0;
|
|
border: 0;
|
|
/* STUFE 1: DIE SCHRAEGE WIRD EINE ECHTE FASE.
|
|
|
|
Bisher war die abgeschnittene Ecke ein Loch -- Material, das fehlt.
|
|
Eine gefraeste Fase ist etwas anderes: Sie hat eine FLAECHE, und
|
|
auf der liegt Schatten, weil sie schraeg zum Licht steht. Genau
|
|
das macht dieser Innenschatten aus der Richtung der Schraege. Der
|
|
Unterschied ist klein zu beschreiben und gross zu sehen: Aus einer
|
|
weggeschnittenen Ecke wird ein bearbeitetes Werkstueck.
|
|
|
|
`inset` und nicht aussen: Ein aeusserer Schatten liegt hier im
|
|
`filter` (siehe unten), weil `clip-path` einen `box-shadow` nach
|
|
der Form abschneiden wuerde. Ein INNERER Schatten wird von
|
|
derselben Form sauber begrenzt -- er soll ja hineinreichen. */
|
|
box-shadow: inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
|
|
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, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::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, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
/* STUFE 2: ECKWINKEL AN DREI ECKEN STATT AN EINER.
|
|
|
|
Eine einzelne Ecke unten rechts liest sich als Verzierung. Drei
|
|
Ecken lesen sich als RAHMUNG -- das Auge schliesst sie zu einem
|
|
Ausschnitt, und genau diese Sprache benutzen Peilung, Zielmarke
|
|
und Messgeraet.
|
|
|
|
Die vierte Ecke bleibt frei, und das ist Absicht: Dort sitzt die
|
|
Fase. Ein Winkel auf einer abgeschnittenen Ecke waere ein Winkel,
|
|
der ins Leere zeigt.
|
|
|
|
Sechs Verlaufsebenen fuer sechs Striche. Jede Ebene ist eine
|
|
einfarbige Flaeche, die durch `background-size` auf einen Strich
|
|
zusammenschrumpft -- billiger als sechs Elemente im Baum, und sie
|
|
wandern beim Groessenwechsel automatisch mit. */
|
|
--winkel: linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat;
|
|
background:
|
|
var(--winkel), var(--winkel), /* unten rechts */
|
|
var(--winkel), var(--winkel), /* oben rechts */
|
|
var(--winkel), var(--winkel), /* unten links */
|
|
var(--raster),
|
|
var(--sternenfeld, none);
|
|
background-size:
|
|
18px 1.5px, 1.5px 18px,
|
|
18px 1.5px, 1.5px 18px,
|
|
18px 1.5px, 1.5px 18px,
|
|
26px 26px, 26px 26px,
|
|
var(--sternenfeld-mass, auto);
|
|
background-position:
|
|
right 10px bottom 10px, right 10px bottom 10px,
|
|
right 10px top 10px, right 10px top 10px,
|
|
left 10px bottom 10px, left 10px bottom 10px,
|
|
0 0, 0 0,
|
|
var(--sternenfeld-lage, 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: var(--modul-schleier, .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.
|
|
|
|
`:not(.licht)` IST KEINE FEINHEIT, SONDERN DIE REPARATUR EINES
|
|
FEHLERS, DEN DIESE ZEILE SELBST VERURSACHT HAT (07.09.2026).
|
|
|
|
Das Licht, das dem Zeiger folgt, ist ein <span class="licht"> und
|
|
damit ein direktes Kind jeder Karte. `position: relative` hat ihm
|
|
sein `position: absolute` genommen: Aus einer Fläche über der ganzen
|
|
Karte wurde ein leerer Inline-Span ohne Ausdehnung. Im Browser
|
|
gemessen -- `display: inline`, obwohl in start.css `absolute`
|
|
steht -- und genau deshalb war das Licht weg, das Filipe
|
|
zurückhaben wollte.
|
|
|
|
Merksatz: Eine Regel auf `> *` trifft auch das, was gar kein Inhalt
|
|
ist. Wer sie schreibt, muss wissen, was sonst noch als Kind in
|
|
diesen Karten liegt. */
|
|
:is(.eintrag-karte, .call, .datei, .kachel, .leer-hinweis,
|
|
.team-karte, .zahl, .k-listentag, .person, .creator) > *:not(.licht) {
|
|
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, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
|
|
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, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
|
|
filter: none; border: 1px solid CanvasText;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
|
|
display: none;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
STUFE 3: DAS ZEICHEN BEKOMMT EINE METALLFASSUNG (07.09.2026)
|
|
|
|
Filipe: "perfektionier alle kacheln die du vorhin gewechselt hast auf
|
|
der ganzen website, mach sie alle noch geiler und geiler und noch
|
|
spezieller. sie gehen aber in eine gute richtung schon."
|
|
|
|
Die Plakette war ein abgerundetes Quadrat mit einem Farbschleier --
|
|
also dieselbe Form wie ueberall sonst im Netz. Sie wird jetzt zu
|
|
einem GEFASSTEN Schild:
|
|
|
|
* dieselbe abgeschnittene Ecke wie die Karte, nur kleiner. Ein
|
|
Bauteil, das zu seinem Gehaeuse passt.
|
|
* ein 2 px breiter Ring aus gebuerstetem Metall -- dieselbe
|
|
Handschrift wie die Luenette der Uhr und die Fassung der
|
|
Konsole. Damit spricht die ganze Anwendung EINE Materialsprache
|
|
statt drei.
|
|
* die Farbe der Kategorie liegt INNEN, im Schild, nicht im Ring.
|
|
So bleibt der Ring ueberall gleich und das Schild verschieden --
|
|
genau die Aufteilung, die ein Typenschild auf einem Geraet hat.
|
|
|
|
Diese Regeln stehen HIER und nicht in start.css: module.css wird
|
|
zuletzt geladen und ist der Ort fuer die FORM. In start.css
|
|
beschriebe man dieselbe Sache noch einmal an zweiter Stelle, und die
|
|
beiden liefen beim naechsten Mal auseinander.
|
|
===================================================================== */
|
|
.kachel__zeichen {
|
|
--z-fase: 9px;
|
|
position: relative;
|
|
border: 0;
|
|
border-radius: 0;
|
|
padding: 2px;
|
|
overflow: visible;
|
|
clip-path: polygon(
|
|
var(--z-fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--z-fase));
|
|
/* Gebuerstetes Metall, rund gedreht -- rund heisst conic. Die Lehre
|
|
von heute Nachmittag: Die Verlaufsart muss zur FORM passen. */
|
|
/* GEDAEMPFT, aber mit demselben Wechsel. Der erste Anlauf war fast
|
|
weiss -- auf 2 px Breite las sich das als greller Rahmen, und die
|
|
Fassung zog mehr Aufmerksamkeit als das Zeichen darin. Eine
|
|
Fassung ist Beiwerk; sie soll das Schild halten, nicht mit ihm
|
|
konkurrieren. Also dieselben Stopps, nur eine Blende dunkler --
|
|
der Wechsel hell/dunkel bleibt, und mit ihm das Metall. */
|
|
background:
|
|
conic-gradient(from 210deg,
|
|
#b9c8da 0deg, #5a6b80 44deg, #d6e2ef 88deg, #44536a 140deg,
|
|
#aebdd0 196deg, #64758c 244deg, #cddaea 296deg, #4e5d73 340deg,
|
|
#b9c8da 360deg);
|
|
box-shadow:
|
|
0 6px 16px -8px rgba(0, 0, 0, .9),
|
|
0 0 0 1px rgba(6, 10, 18, .55),
|
|
/* DAS LICHT DES SCHILDES FAELLT AUF DIE KACHEL. Ein beleuchteter
|
|
Gegenstand wirft Farbe auf seine Umgebung -- ohne diesen Abfall
|
|
sieht selbst ein gut gebautes Schild aufgeklebt aus. Sehr weit
|
|
gestreut und weit unter der Blendschwelle: Man soll ihn nicht
|
|
sehen, man soll ihn vermissen, wenn er fehlt. */
|
|
0 10px 42px -14px color-mix(in srgb, var(--ton, var(--akzent)) 75%, transparent);
|
|
}
|
|
/* Das Schild IM Ring -- hier liegt die Farbe der Kategorie. */
|
|
.kachel__zeichen::before {
|
|
content: "";
|
|
position: absolute; inset: 2px;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
clip-path: polygon(
|
|
calc(var(--z-fase) - 2px) 0, 100% 0, 100% 100%, 0 100%,
|
|
0 calc(var(--z-fase) - 2px));
|
|
background:
|
|
linear-gradient(150deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 26%, transparent 52%),
|
|
radial-gradient(120% 100% at 22% 8%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 58%, transparent) 0%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent) 48%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 10%, transparent) 100%),
|
|
linear-gradient(#0a0f18, #0a0f18);
|
|
}
|
|
/* Beim Anfassen hebt sich das Schild leicht -- kein Leuchten, nur
|
|
Naehe. Dieselbe Sprache wie bei der Karte selbst. */
|
|
.kachel:hover .kachel__zeichen {
|
|
transform: translateY(-1px);
|
|
border-color: transparent;
|
|
box-shadow:
|
|
0 10px 22px -9px rgba(0, 0, 0, .95),
|
|
0 0 0 1px rgba(6, 10, 18, .55),
|
|
0 0 14px -4px color-mix(in srgb, var(--ton, var(--akzent)) 55%, transparent);
|
|
}
|
|
/* DIE GROSSE KACHEL FUEHRT IHRE EIGENE RUNDUNG -- zweimal sogar
|
|
(start.css, 21 px und 18 px), und beide sind mit `.kachel[…] .x`
|
|
staerker als eine einzelne Klasse. Gemessen: `border-radius: 18px`,
|
|
obwohl module.css `0` setzt und zuletzt geladen wird. Die Fase kam
|
|
durch (die setzt sonst niemand), die Rundung blieb -- heraus kam ein
|
|
Schild mit abgeschnittener Ecke UND runden Ecken.
|
|
|
|
Dieselbe Falle wie heute schon zweimal: `:where()` war zu schwach,
|
|
`body.start .willkommen` zu stark, und hier ist es die Verschachtelung.
|
|
Deshalb steht die Antwort hier mit derselben Gewichtung wie die
|
|
Rundung, die sie ersetzt. */
|
|
.kachel[data-gross="ja"] .kachel__zeichen,
|
|
.kachel .kachel__zeichen {
|
|
--z-fase: 11px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
/* Im Kontrastmodus zaehlt die Kante. Die Fase bleibt -- sie ist
|
|
Geometrie, keine Farbe. */
|
|
.kachel__zeichen { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
|
|
.kachel__zeichen::before { display: none; }
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
DIE TAGESKACHEL "WAS IST DRAN" (07.09.2026)
|
|
|
|
Filipe: "soll auch besser und auffaelliger aussehen bitte."
|
|
|
|
Sie bestand aus drei abgerundeten Zeilen mit einem Farbstreifen
|
|
links -- also aus der Form, die es hier bis heute Frueh ueberall
|
|
gab. Sie bekommt jetzt dieselbe Behandlung wie alles andere, und
|
|
zwar konsequent:
|
|
|
|
* Die drei Zeilen sind MODULE. `.dran__punkt` steht seit heute in
|
|
der Modulliste oben: abgeschnittene Ecke, Kantenlicht in der
|
|
Farbe des Bereichs, Eckwinkel, Fase. Damit sind sie kleine
|
|
Ausgaben derselben Bauteile, zu denen sie fuehren -- was sie ja
|
|
auch sind.
|
|
* Die ZAHL wird zum gefassten Schild, wie das Zeichen auf den
|
|
Kacheln. Sie ist die eigentliche Aussage der Zeile ("EINS
|
|
wartet"), und sie stand bisher als blosse Ziffer daneben.
|
|
* Zwischen den beiden Haelften laeuft eine gefraeste Nut statt
|
|
einer Linie -- dieselbe Sprache wie auf der Konsole.
|
|
===================================================================== */
|
|
|
|
/* Der Farbstreifen links entfaellt: Die Zeile hat jetzt ein
|
|
Kantenlicht, und beides zusammen waeren zwei Kanten fuer dieselbe
|
|
Aussage. */
|
|
.dran__punkt::before { width: 0; }
|
|
|
|
.dran__zahl {
|
|
--z-fase: 7px;
|
|
display: grid; place-items: center;
|
|
min-width: 30px; min-height: 26px;
|
|
padding: 2px;
|
|
font-size: 1.02rem;
|
|
/* DIE FARBE BLEIBT IN DER ZIFFER, nicht im Schild.
|
|
|
|
Im ersten Anlauf stand hier Weiss, weil das auf Metall gut
|
|
aussieht. Damit war die Aussage weg: Die Zahl traegt die Farbe des
|
|
Bereichs, zu dem die Zeile fuehrt -- und bei etwas Ueberfaelligem
|
|
die Warnfarbe. Das ist kein Schmuck, sondern die schnellste
|
|
Auskunft der ganzen Kachel. pruef-start-ansicht hat es sofort
|
|
gemeldet ("ueberfaellige Zeilen sind rot": weiss statt rot), und
|
|
die Pruefung hatte recht.
|
|
|
|
Das Schild darunter bleibt deshalb fast neutral -- nur eine Spur
|
|
Farbton, damit die Ziffer nicht auf Grau steht. */
|
|
color: var(--ton, var(--akzent));
|
|
text-align: center;
|
|
clip-path: polygon(var(--z-fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--z-fase));
|
|
background:
|
|
conic-gradient(from 210deg,
|
|
#b9c8da 0deg, #5a6b80 44deg, #d6e2ef 88deg, #44536a 140deg,
|
|
#aebdd0 196deg, #64758c 244deg, #cddaea 296deg, #4e5d73 340deg,
|
|
#b9c8da 360deg);
|
|
box-shadow: 0 4px 12px -7px rgba(0, 0, 0, .9), 0 0 0 1px rgba(6, 10, 18, .5);
|
|
}
|
|
/* Das Schild IM Ring traegt die Farbe des Bereichs -- wie bei den
|
|
Kacheln liegt die Farbe innen, das Metall bleibt ueberall gleich. */
|
|
.dran__zahl::before {
|
|
content: ""; position: absolute; inset: 2px; z-index: -1;
|
|
clip-path: polygon(
|
|
calc(var(--z-fase) - 2px) 0, 100% 0, 100% 100%, 0 100%,
|
|
0 calc(var(--z-fase) - 2px));
|
|
background:
|
|
linear-gradient(150deg, rgba(255, 255, 255, .10) 0%, transparent 48%),
|
|
linear-gradient(color-mix(in srgb, var(--ton, var(--akzent)) 14%, #080d15),
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 6%, #080d15));
|
|
}
|
|
.dran__zahl { position: relative; isolation: isolate; }
|
|
|
|
/* Die Nut zwischen "Was ist dran" und "Heute". Dunkel auf der
|
|
Lichtseite, hell auf der Schattenseite -- so liest sich eine
|
|
Vertiefung. Eine aufgemalte Linie kann das nicht. */
|
|
.tagesblick__seite--heute::before {
|
|
content: ""; position: absolute;
|
|
left: -21px; top: -6px; bottom: -6px; width: 2px;
|
|
pointer-events: none;
|
|
background: linear-gradient(90deg,
|
|
rgba(0, 0, 0, .75) 0 1px,
|
|
rgba(255, 255, 255, .12) 1px 2px);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.dran__zahl { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
|
|
.dran__zahl::before { display: none; }
|
|
.tagesblick__seite--heute::before { background: CanvasText; }
|
|
}
|