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 <dialog> 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 <[email protected]>
This commit is contained in:
2026-09-09 00:44:42 +02:00
co-authored by Claude Opus 5
parent 4c0f41762e
commit a4db78e937
20 changed files with 257 additions and 196 deletions
+9 -9
View File
@@ -14,10 +14,10 @@
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090041" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090041" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090041" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090041" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609090044" />
<link rel="stylesheet" href="assets/css/start.css?v=202609090044" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609090044" />
<link rel="stylesheet" href="assets/css/module.css?v=202609090044" />
</head>
<body class="start">
@@ -217,10 +217,10 @@
</form>
</dialog>
<script src="assets/js/wahl.js?v=202609090041" defer></script>
<script src="assets/js/bereiche.js?v=202609090041" defer></script>
<script src="assets/js/kopf.js?v=202609090041" defer></script>
<script src="assets/js/glocke.js?v=202609090041" defer></script>
<script src="assets/js/aufgaben.js?v=202609090041" defer></script>
<script src="assets/js/wahl.js?v=202609090044" defer></script>
<script src="assets/js/bereiche.js?v=202609090044" defer></script>
<script src="assets/js/kopf.js?v=202609090044" defer></script>
<script src="assets/js/glocke.js?v=202609090044" defer></script>
<script src="assets/js/aufgaben.js?v=202609090044" defer></script>
</body>
</html>