From a4db78e937a1c6d7b6c2807f6f175581cd311b85 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Wed, 9 Sep 2026 00:44:42 +0200 Subject: [PATCH] screen2: Der Tagdialog bekommt die Silhouette des Hauses Filipe: "die ganze kachel und button sollen geiler aussehen." Der INHALT war schon gebaut -- Eintraege mit Schiene in ihrer Farbe, Plaketten (TERMIN, FRIST), Knopfreihe, Akzentknopf. Nur die HUELLE nicht: ein Rechteck mit 18 px Rundung und einem gezeichneten Rand. Damit war der Dialog die einzige grosse Flaeche im Workspace ohne Fase -- und ausgerechnet die, die sich ueber alles andere legt. Man sieht es nicht als Fehler, sondern denkt "der gehoert wohl zum Browser". Jetzt dieselbe Bauart wie die Sammelkacheln: Der traegt nur die Fassung (2 px Polsterung mit Farbverlauf darunter), alles Sichtbare liegt in einer neuen Ebene `.k-dialog__glas` darin. Ohne diese zweite Ebene muesste die Fassung ein `border` sein -- und ein Rand folgt dem Rechteck, nicht der abgeschraegten Ecke. ZWEI ECKEN, NICHT VIER: Bei einem Kasten, der mitten im Bild aufgeht, wirken vier abgeschnittene Ecken unruhig -- er soll wie eine Platte wirken, die man auflegt, nicht wie ein Achteck. Oben links und unten rechts geben die Richtung, die anderen beiden halten die Form. `border-radius: 0` ist dabei Pflicht und nicht Kosmetik: Bliebe der Radius neben dem `clip-path` stehen, wuerde er die Ecken der Flaeche INNERHALB der Silhouette runden -- an den nicht gefasten Ecken saehe man eine doppelte Kante. NEBENBEI EINEN WIRKUNGSLOSEN EFFEKT ENTFERNT: `backdrop-filter: blur(14px)` stand auf dem Dialog und waere mit auf die neue Glasebene gewandert. Die ist zu 97 Prozent deckend -- der Browser haette bei jedem Bild einen Weichzeichner ausgerechnet, den niemand sieht. Das Verwischen des Hintergrunds macht `.k-dialog::backdrop`, und dort gehoert es hin. Ein Effekt, der nichts bewirkt, ist nicht harmlos: Er kostet Rechenzeit und behauptet im Quelltext etwas ueber das Aussehen, das nicht stimmt. Geprueft: pruef-kalender, pruef-css-klassen, pruef-buehne -- alle in Ordnung. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/kalender.css | 62 ++++++++++++++++++++++++++++--- workspace/aufgaben.html | 18 ++++----- workspace/automation.html | 20 +++++----- workspace/bereich.html | 28 +++++++------- workspace/calls.html | 22 +++++------ workspace/chat.html | 20 +++++----- workspace/content.html | 24 ++++++------ workspace/dateien.html | 20 +++++----- workspace/index.html | 4 +- workspace/kalender.html | 31 ++++++++++------ workspace/leistung.html | 20 +++++----- workspace/personen.html | 20 +++++----- workspace/profil.html | 22 +++++------ workspace/report.html | 22 +++++------ workspace/scouting.html | 20 +++++----- workspace/start.html | 18 ++++----- workspace/startcheck.html | 22 +++++------ workspace/steckbrief.html | 20 +++++----- workspace/uebersicht.html | 20 +++++----- workspace/wissen.html | 20 +++++----- 20 files changed, 257 insertions(+), 196 deletions(-) diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css index 7e134eb9..1f2dafa4 100644 --- a/workspace/assets/css/kalender.css +++ b/workspace/assets/css/kalender.css @@ -612,15 +612,67 @@ .k-leer__tipp { margin: 0; font-size: .82rem; color: var(--text-still); } /* ---------- Tagesdialog -------------------------------------------------- */ +/* ===================================================================== + DER TAGDIALOG BEKOMMT DIE SILHOUETTE DES HAUSES (screen2, 09.09.2026) + + Filipe: "die ganze kachel und button sollen geiler aussehen." + + Der Inhalt war schon gebaut -- Eintraege mit Schiene in ihrer Farbe, + Plaketten (TERMIN, FRIST), Knopfreihe. Nur die Huelle nicht: Sie war + ein Rechteck mit 18 px Rundung und einem gezeichneten Rand. Damit + war der Dialog die EINZIGE grosse Flaeche im Workspace ohne Fase -- + und ausgerechnet die, die sich ueber alles andere legt. Man sieht es + nicht als Fehler, sondern denkt "der gehoert wohl zum Browser". + + Jetzt dieselbe Sprache wie die Sammelkacheln: eine Fassung als + duenner Rahmen (2 px Polsterung mit Farbverlauf darunter), die Fase + an zwei gegenueberliegenden Ecken, und das Innenglas als eigene + Ebene. Die Fassung traegt Rot links und Babyblau rechts, wie ueberall + im Haus -- nur leiser als auf der Anmeldeseite, weil hier Text + dicht am Rand steht. + + ZWEI ECKEN, NICHT VIER: Bei einem Kasten, der mitten im Bild + aufgeht, wirken vier abgeschnittene Ecken unruhig -- er soll wie + eine Platte wirken, die man auflegt, nicht wie ein Achteck. Oben + links und unten rechts geben die Richtung, die anderen beiden halten + die Form. + + `border-radius: 0` ist PFLICHT und nicht Kosmetik: Ein + `border-radius`, der neben einem `clip-path` stehen bleibt, rundet + die Ecken der Flaeche INNERHALB der Silhouette -- man saehe an den + nicht gefasten Ecken eine doppelte Kante. */ .k-dialog { width: min(560px, calc(100vw - 32px)); - padding: 20px 22px; - border: 1px solid var(--rand-hell); - border-radius: var(--radius); - background: var(--glas-tief); + padding: 2px; /* die Fassung */ + border: 0; + border-radius: 0; + clip-path: polygon( + 20px 0, 100% 0, 100% calc(100% - 20px), + calc(100% - 20px) 100%, 0 100%, 0 20px); + background: linear-gradient(104deg, + #2a0a10 0%, #c8323f 12%, #ffd9dd 20%, #6d1721 32%, + #0a0c12 44%, #e8f1fb 50%, #0a0c12 56%, + #1d4a63 66%, #8fd8ff 78%, #dff2ff 85%, #14293a 94%, #060810 100%); color: var(--text); box-shadow: var(--schatten); - backdrop-filter: blur(14px); +} +/* Das Innenglas. Eigene Ebene, damit die Fassung ringsum stehen + bleibt -- dieselbe Bauart wie bei der Zentrale und der Rollenkachel. */ +.k-dialog__glas { + padding: 20px 22px; + clip-path: polygon( + 18px 0, 100% 0, 100% calc(100% - 18px), + calc(100% - 18px) 100%, 0 100%, 0 18px); + background: + var(--raster), + linear-gradient(178deg, rgba(17, 23, 34, .97), rgba(9, 13, 21, .98)); + /* KEIN `backdrop-filter` HIER. Er stand vorher auf dem Dialog und + ist mitgewandert -- auf einer zu 97 Prozent deckenden Flaeche + rechnet er bei jedem Bild einen Weichzeichner aus, den niemand + sieht. Das Verwischen des Hintergrunds macht `.k-dialog::backdrop`, + und dort gehoert es hin. Ein Effekt, der nichts bewirkt, ist + nicht harmlos: Er kostet Rechenzeit und behauptet im Quelltext + etwas ueber das Aussehen, das nicht stimmt. */ } .k-dialog::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(3px); } .k-dialog__kopf { diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 4a88b5ea..a8ad5895 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -14,10 +14,10 @@ - - - - + + + + @@ -217,10 +217,10 @@ - - - - - + + + + + diff --git a/workspace/automation.html b/workspace/automation.html index ea071fbb..fe398c60 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -140,10 +140,10 @@ - - - - - + + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index a6ddc127..91c526a6 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -149,14 +149,14 @@ - - - - - - - - - + + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index 252a6ba4..e218d180 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -82,11 +82,11 @@ - - - - - - + + + + + + diff --git a/workspace/chat.html b/workspace/chat.html index 50b4c926..cccbe3be 100644 --- a/workspace/chat.html +++ b/workspace/chat.html @@ -14,17 +14,17 @@ - - + + - - - + + + @@ -160,10 +160,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index f989f27b..a9c116fe 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -172,12 +172,12 @@ - - - - - - - + + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index 2e90149b..cf347dc0 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -101,10 +101,10 @@ - - - - - + + + + + diff --git a/workspace/index.html b/workspace/index.html index d4d166c1..e9cfc5e4 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -32,7 +32,7 @@ - + @@ -382,6 +382,6 @@ - + diff --git a/workspace/kalender.html b/workspace/kalender.html index 644f9c09..1cc490d5 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -283,7 +283,15 @@ + +
… @@ -297,6 +305,7 @@ Esc schließt
+
- - + + @@ -522,10 +522,10 @@

- - - - - + + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 2ffbdefe..7e31df03 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -78,11 +78,11 @@ - - - - - - + + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 4377cd8c..3870aa5b 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -119,10 +119,10 @@ - - - - - + + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index 546504c0..cbd0581f 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -14,13 +14,13 @@ - - + + - - - + + + @@ -142,11 +142,11 @@ - + - - - - + + + + diff --git a/workspace/wissen.html b/workspace/wissen.html index 7b1a21e0..e85c30b8 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -14,11 +14,11 @@ - - - - - + + + + + @@ -183,10 +183,10 @@ - - - - - + + + + +