DogFatherGitandClaude Opus 5
6676998af8
--- DAS WICHTIGSTE ZUERST: die Verbergungsregel --- Filipe, ausdruecklich und dringlich: "und noch gaaaaaanz wichtig keiner soll vanvan sehen ausser ich, ueberall soll keiner vanvan sehen ausser dogfather." ES GAB DAVON NUR EINE HAELFTE. In der Personenliste wurde der zweite Admin-Zugang fuer Spicy Media ausgeblendet (Wunsch vom 31.08.). Ueberall sonst -- Chat, Kalender, Aufgaben, Dateien, Zentrale -- war er sichtbar. `sichtbarePersonenIds` hat ihn sogar ausdruecklich JEDER Rolle gezeigt, weil sie alle Admins einsammelt. WORAN DIE BEIDEN AUSEINANDERGEHALTEN WERDEN: In der Datenbank tragen beide die Rolle `admin`, es gibt kein unterscheidendes Feld. Der Unterschied, den es wirklich gibt, ist das Alter -- DogFather ist der erste Zugang. Also: der Admin mit der kleinsten Nummer ist DogFather, alle weiteren sind verborgen. Drei Ausnahmen: DogFather sieht alle, ein verborgener Zugang sieht sich selbst, und bei nur einem Admin gibt es nichts zu verbergen. WARUM AN EINER STELLE UND NICHT IN DEN ABFRAGEN: Allein workspace-personen.js hat 23 Abfragen auf `personen`. Eine Regel, die man 23-mal wiederholt, ist 23 Gelegenheiten, sie zu vergessen -- und beim Vergessen faellt niemand auf die Nase, sondern jemand SIEHT etwas. Die Regel sitzt deshalb in `verborgeneIds()` und wird ueber einen MANTEL um die sechs Listenfunktionen gelegt: Diese haben zusammen achtzehn Rueckgabewege; sie einzeln zu flicken waeren achtzehn Gelegenheiten, einen zu uebersehen. Die ungefilterten Fassungen (`...Roh`) werden nicht mehr exportiert -- niemand kann sie versehentlich benutzen. `null` HIESS BISHER "SIEHT ALLES". Sobald es etwas zu verbergen gibt, gilt das nicht mehr: Die Liste wird ausgeschrieben. Das ist strenger, nicht lockerer. NEUE PRUEFUNG server/pruef-verborgen.mjs -- sechs Personen (darunter ein zweiter Admin), fuenf Schnittstellen, jede Rolle einzeln. Sie hat beim ersten Lauf sofort ein Loch gefunden, das ich sonst nicht bemerkt haette: Die ZENTRALE holt sich das Haus selbst und ging an allen Listenfunktionen vorbei -- Spicy Media sah VanVan dort als Segment im Team-Ring. Und beim Korrigieren der Pruefpfade fiel ein zweites auf: `darfEintragen` im Kalender liess die Leitung JEDEN eintragen, bevor ueberhaupt eine Liste befragt wurde. Eine Sichtbarkeitsregel, die nur beim Lesen gilt und nicht beim Schreiben, hat ein Loch in der Mitte. Die Pruefung hat eine Gegenprobe: Ein Manager MUSS DogFather in derselben Liste sehen -- sonst waere "sieht VanVan nicht" auch dann gruen, wenn die Listen leer zurueckkaemen. --- screen1 Punkt 1: Silber mit Babyblau --- "ich will dass diese farbe gemischt wird mit babyblau." #c7dcf4 statt #d8e0ec -- dieselbe Helligkeit, mit Blaurichtung. Nachgerechnet bleibt der Abstand zur naechsten Rolle bei 0,1790, immer noch weiter als das frueher benutzte Babyblau (0,1349). Gemischt ist es ausserdem SICHTBAR: Die Schiene laeuft von Silber nach Babyblau, und der Glanz traegt beide Toene. Eine Mischung, die man nur im Hexwert findet, ist keine. --- screen1 Punkt 2: das Wasserzeichen --- "soll viel groesser sein und nicht so abgecuttet sondern gut zu sehen sein." NACHGEMESSEN war es auf der Dashboard-Kachel zu 50 Prozent abgeschnitten, und zwar auf DREI Seiten: 36 px ueber dem oberen Rand, 44 rechts, 60 unten -- 220 px Zeichen auf einer 152 px hohen Kachel. UND ES GAB ZUM DRITTEN MAL DIESE WOCHE EINE DOPPELREGEL: 3600 Zeilen unter der sorgfaeltig begruendeten Fassung (156 px bei 0,14) stand eine zweite (118 px bei 0,085) mit derselben Spezifitaet. Sie gewann, und die Begruendung oben war wirkungslos. Am 08.09. hatte ich beim Wasserzeichen schon einmal genau so eine Doppelung gefunden -- und diese hier uebersehen. Jetzt eine Fassung, und die Groesse haengt an der KACHELHOEHE: Ein um 8 Grad gedrehtes Quadrat der Seite S braucht S x 1,129 Platz, also `min(132px, 100% - 30px)`. Nachgemessen 100 Prozent sichtbar statt 50, bei 0,14 statt 0,085 -- die sichtbare Flaeche hat sich verdoppelt. --- screen1 Punkt 3: die Personenliste in einer Kachel --- Die fuenf Rollengruppen standen als fuenf lose Abschnitte frei auf dem Hintergrundbild. Es ist aber EINE Liste mit fuenf Abschnitten. Jetzt eine Sammelkachel aus der Modulliste, mit dunklen Fugen statt Luft -- und dunkler als die Karten darin, wie eine Vitrine. --- screen1 Punkt 4: "Womit meldest du dich an?" --- Der einzige Satz auf der Anmeldeseite, der eine FRAGE stellt, stand als graue Feldbeschriftung da. Jetzt gebuerstetes Metall, ein Anschlag aus drei Kerben in Rot und Babyblau und eine auslaufende Linie -- dieselbe Sprache wie die Typenschilder im Workspace. Rueckfall vollwertig: Faellt `background-clip: text` aus, steht dort heller Text. Geprueft: pruef-verborgen (neu), pruef-rollen, pruef-start-ansicht, pruef-css-klassen, pruef-workspace-seiten, pruef-buehne, pruef-handy, pruef-chat, pruef-kalender -- alle in Ordnung. Co-Authored-By: Claude Opus 5 <[email protected]>
471 lines
24 KiB
CSS
471 lines
24 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);
|
|
}
|
|
|
|
/* 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) {
|
|
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)::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)::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);
|
|
background-size:
|
|
18px 1.5px, 1.5px 18px,
|
|
18px 1.5px, 1.5px 18px,
|
|
18px 1.5px, 1.5px 18px,
|
|
26px 26px, 26px 26px;
|
|
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;
|
|
/* .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.
|
|
|
|
`: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) {
|
|
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) {
|
|
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)::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)::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; }
|
|
}
|