/* * ============================================================ * KOPIE - nicht hier aendern. * ============================================================ * * Quelle : maylangde/maylang, packages/gestaltung/glas.css * Stand : 4f4516f * Datum : 2026-09-23 * * Diese Datei ist erzeugt. Aenderungen am Glas gehoeren ins * Maylang-Repo; danach dort "npm run glasdesign" laufen lassen * und den Ordner erneut kopieren. Wer stattdessen hier aendert, * hat zwei Fassungen und keine Moeglichkeit mehr zu sagen, * welche die richtige ist. * ============================================================ */ /* ========================================================================== Die Glasgestaltung von Maylang ========================================================================== Dieses Paket enthält das Aussehen - nicht die App. Es weiß nichts von React, nichts von Tailwind und nichts davon, welche Kachel wo steht. Dadurch lässt es sich in einem zweiten Projekt (der Website) genauso benutzen wie im Vokabeltrainer. Die Datei hat drei Teile, und die Reihenfolge ist Absicht: 1. Die Werte Einzelne Zahlen und Farben. Wer die Gestaltung nachjustieren will, ändert hier - und zwar nur hier. 2. Das Zusammengesetzte Fertige Verläufe, Filter und Schatten als eigene Eigenschaften. Sie sind der eigentliche Zweck des Pakets: Ein Projekt, das andere Klassennamen benutzt, kann sie in seine eigenen Regeln einsetzen, ohne die Werte abzuschreiben. Genau das tut der Vokabeltrainer, dessen Flächen Tailwind-Klassen tragen. 3. Fertige Klassen Für neue Projekte, die frei benennen können. Eine handgeschriebene Seite braucht nur .glas-flaeche zu vergeben und ist fertig. Warum diese Dreiteilung und nicht einfach ein paar Klassen: Zwei Projekte, die dasselbe Aussehen tragen sollen, driften auseinander, sobald jedes seine eigene Kopie der Zahlen hat. Werte, die an einer Stelle stehen, driften nicht. Der Brechungsfilter steht nicht hier, sondern in filter.ts - er ist Markup, kein Stil. Ohne ihn im Dokument fällt nur die Brechung aus; alles andere bleibt. Zwei Regeln, die hier mehrfach Lehrgeld gekostet haben: Farbe gehört in die Kachel, nicht neben sie. Alles, was eine Kachel nach außen abgibt - ein Schein um den Rand, ein Verlauf im Hintergrund -, färbt genau das Weiß ein, das drumherum stehen soll. Einzeln fällt das nicht auf, in der Menge wird ein Schleier daraus. Die äußerste Glasfläche trägt die Fassung, alles darin ist nur noch Fläche. Ein Rahmen, der einen Rahmen umschließt, liest sich als Ebene über der Seite. ========================================================================== */ /* ========================================================================== 1. Die Werte ========================================================================== */ :root { /* Die Marke. Alles Orange in dieser Datei stammt hiervon ab. */ --glas-marke: 240, 126, 38; --glas-marke-dunkel: 140, 66, 0; /* * Klares Glas. * * Drei Pixel Unschärfe, nicht mehr. Unschärfe macht eine Fläche nicht * glänzender, sie macht sie beschlagen - der Glanz sitzt in Kante und * Reflex. Die Sättigung trägt die Farbe: Was hinter dem Glas liegt, kommt * kräftiger heraus, als eine Füllung es je dürfte, ohne die Fläche * zuzudecken. Aber sparsam; 175 Prozent färbten eine ganze Seite orange. */ --glas-blur: 3px; --glas-saettigung: 130%; --glas-fuellung: rgba(255, 240, 226, 0.07); /* * Der Teller - die Ausnahme. * * Nur dort, wo Text über Unruhe liegt: unter Menüs und Dialogen, weil dort * Inhalt durchläuft, und unter dichte Zahlenfelder. Hier ist Mattigkeit kein * Fehler, sondern der Zweck. */ --glas-teller-blur: 20px; --glas-teller-fuellung: rgba(255, 250, 243, 0.55); /* * Die leuchtende Kante. * * In der Vorlage sitzt das Licht nicht auf der Fläche, sondern im Rand: ein * heller Innenstrich und ein warmer Rand darauf. Je klarer das Glas wird, * desto mehr Arbeit macht die Kante - sie allein sagt, wo eine Fläche * anfängt und wo sie aufhört. */ --glas-kante: rgba(255, 196, 132, 0.95); --glas-innenlicht: rgba(255, 255, 255, 0.9); /* * Der Schatten trägt keine Farbe. * * Er hebt die Fläche von der Seite ab, ohne die Seite zu tönen. Ein warmer * Schlagschatten wirkt bei einer einzelnen Kachel hübsch; liegen zehn * nebeneinander, addieren sich ihre Schatten zu einem Farbfeld. */ --glas-schatten: rgba(70, 62, 58, 0.07); /* Wie schnell Glas auf Berührung antwortet. */ --glas-dauer: 0.35s; --glas-kurve: cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================================== 2. Das Zusammengesetzte ========================================================================== Diese Eigenschaften sind dafür da, in fremde Regeln eingesetzt zu werden: .meine-karte { background-color: var(--glas-fuellung); background-image: var(--glas-verlauf); backdrop-filter: var(--glas-filter); border: 1px solid var(--glas-kante); box-shadow: var(--glas-schattenwurf); } So trägt ein Projekt das Aussehen, ohne die Zahlen zu kennen. ========================================================================== */ :root { /* * Der Glanz: drei dünne Lagen statt einer breiten Aufhellung. * * ein Lichtstreifen quer über die obere Ecke (der Reflex), * ein Lichtsaum direkt unter der Oberkante, * das Orange, das im Glas steckt. * * Der Saum ist in Pixeln angegeben, nicht in Prozent: Eine Lichtkante ist * eine Lichtkante, ob die Fläche nun hoch ist oder flach. In Prozent würde * sie auf großen Flächen zum Verlauf und auf kleinen Knöpfen zur halben * Füllung. */ --glas-verlauf: linear-gradient(135deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.40) 9%, rgba(255, 255, 255, 0.07) 14%, rgba(255, 255, 255, 0) 21%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0) 5px), linear-gradient(155deg, rgba(var(--glas-marke), 0.09) 0%, rgba(var(--glas-marke), 0.02) 52%, rgba(var(--glas-marke), 0.07) 100%); --glas-filter: blur(var(--glas-blur)) saturate(var(--glas-saettigung)) brightness(1.03); /* * Die Dicke der Scheibe. * * Eine Glasplatte ist kein Rechteck mit Rand, sondern ein Körper: Oben fängt * sie das Licht, unten sammelt sich der Schatten ihrer eigenen Kante, und * innen läuft ringsum eine feine Reflexion - die Kante, die man durch das * Glas hindurch von der Rückseite sieht. */ --glas-schattenwurf: inset 0 0 0 1px var(--glas-innenlicht), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -2px 3px rgba(var(--glas-marke-dunkel), 0.09), inset 0 -14px 20px -14px rgba(var(--glas-marke-dunkel), 0.14), inset 0 14px 22px -16px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(var(--glas-marke), 0.18), 0 12px 28px var(--glas-schatten); /* Unter dem Zeiger: mehr Licht in der Oberkante, tieferer Schatten. */ --glas-schattenwurf-schweben: inset 0 0 0 1px var(--glas-innenlicht), inset 0 3px 0 rgba(255, 255, 255, 1), inset 0 -2px 3px rgba(var(--glas-marke-dunkel), 0.10), inset 0 -18px 24px -14px rgba(var(--glas-marke-dunkel), 0.16), inset 0 18px 26px -16px rgba(255, 255, 255, 1), 0 0 0 1px rgba(var(--glas-marke), 0.24), 0 20px 38px var(--glas-schatten); /* Unter dem Finger setzt die Scheibe auf. */ --glas-schattenwurf-druck: inset 0 0 0 1px var(--glas-innenlicht), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(var(--glas-marke-dunkel), 0.12), inset 0 -8px 14px -10px rgba(var(--glas-marke-dunkel), 0.18), inset 0 8px 14px -12px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(var(--glas-marke), 0.22), 0 4px 12px var(--glas-schatten); /* Der Teller: ruhiger Untergrund, damit Text darauf stehen kann. */ --glas-teller-verlauf: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0) 9px), linear-gradient(150deg, rgba(var(--glas-marke), 0.09) 0%, rgba(var(--glas-marke), 0.02) 60%, rgba(var(--glas-marke), 0.07) 100%); --glas-teller-filter: blur(var(--glas-teller-blur)) saturate(140%) brightness(1.05); --glas-teller-schattenwurf: inset 0 0 0 1px var(--glas-innenlicht), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -2px 3px rgba(var(--glas-marke-dunkel), 0.07), 0 0 0 1px rgba(var(--glas-marke), 0.16), 0 12px 28px var(--glas-schatten); /* * Die Maske der Brechungsebene. * * Nur am Rand, und das aus zwei Gründen. Der eine ist Physik: Bei einer * Scheibe bricht die Mitte fast nichts, dort schaut man gerade hindurch - * gebrochen wird an der Wölbung außen. Der andere ist gemessen: Läuft die * Ebene über die ganze Fläche, greift sie deren eigenen Inhalt ab und * zeichnet ihn versetzt ein zweites Mal. Überschriften standen doppelt da. * Am Rand liegt nur Polsterung, dort kann nichts geistern. */ --glas-brechung-maske: radial-gradient(125% 125% at 50% 50%, transparent 58%, #000 94%); --glas-uebergang: box-shadow var(--glas-dauer) var(--glas-kurve), transform var(--glas-dauer) var(--glas-kurve), background-color var(--glas-dauer) var(--glas-kurve); } /* ========================================================================== 3. Fertige Klassen ========================================================================== Für Projekte, die ihre Flächen frei benennen können. Der Vokabeltrainer benutzt sie nicht - seine Flächen tragen Tailwind-Klassen, und er setzt stattdessen die Eigenschaften aus Teil 2 in eigene Regeln ein. Voraussetzung für die Brechung: Der Filter aus filter.ts muss im Dokument stehen. Fehlt er, sieht man Glas ohne Brechung - kein Fehler, nur weniger. ========================================================================== */ /* * Eine Glasfläche. * * position: relative, weil die Brechungsebene einen Bezugspunkt braucht - * sonst legt sie sich über die ganze Seite statt über ihre Fläche. */ .glas-flaeche { position: relative; background-color: var(--glas-fuellung); background-image: var(--glas-verlauf); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter); border: 1px solid var(--glas-kante); border-radius: 1.25rem; box-shadow: var(--glas-schattenwurf); transition: var(--glas-uebergang); } .glas-flaeche::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; -webkit-backdrop-filter: url(#glas-brechung); backdrop-filter: url(#glas-brechung); -webkit-mask-image: var(--glas-brechung-maske); mask-image: var(--glas-brechung-maske); } /* * Das Schweben nur mit Maus. * * Auf einem Berührungsgerät löst der erste Tipp sonst nur den Schwebezustand * aus: Die Fläche wandert unter dem Finger weg, der Tipp geht ins Leere, erst * der zweite trifft. Das hat im Vokabeltrainer einmal echte Knöpfe unbenutzbar * gemacht. */ @media (hover: hover) and (pointer: fine) { .glas-flaeche:hover { transform: translateY(-2px); box-shadow: var(--glas-schattenwurf-schweben); } } /* Der Druck gehört auf jedes Gerät - er bestätigt die Berührung. */ .glas-flaeche:active { transform: translateY(0); transition-duration: 0.09s; box-shadow: var(--glas-schattenwurf-druck); } /* * Der Teller: eine Glasfläche mit ruhigerem Untergrund. * * Liegt er in einer anderen Glasfläche, nimmt --glas-teller-eingebettet ihm * die eigene Fassung - zwei Rahmen ineinander lesen sich als Ebene über der * Seite. */ .glas-teller { position: relative; background-color: var(--glas-teller-fuellung); background-image: var(--glas-teller-verlauf); -webkit-backdrop-filter: var(--glas-teller-filter); backdrop-filter: var(--glas-teller-filter); border: 1px solid var(--glas-kante); border-radius: 1rem; box-shadow: var(--glas-teller-schattenwurf); } .glas-teller--eingebettet { background-image: none; border-color: transparent; box-shadow: none; } /* * Das Menü ist keine Kachel. * * Es war einmal eine, und das war der hartnäckigste Fehler dieser Gestaltung: * Eine große Glasfläche am Bildschirmrand liest sich als Ebene über allem, und * ihr Rand als Strich quer über die Seite. Ein Menü braucht keine Platte - was * es sichtbar macht, sind seine Einträge und der gefüllte, an dem man steht. * * Ausnahme ist eine Leiste, unter der Inhalt durchläuft. Die braucht Deckung, * sonst liest man zwei Dinge übereinander - und zwar Weiß, nicht Glas, damit * sie sich vom Untergrund nicht abhebt. Dafür .glas-menue--deckend. */ .glas-menue { background-color: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; box-shadow: none; } .glas-menue--deckend { background-color: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(var(--glas-teller-blur)); backdrop-filter: blur(var(--glas-teller-blur)); } /* * Das Wasserzeichen. * * Nicht nur Schmuck: Brechung kann nur zeigen, was hinter dem Glas liegt. * Auf weißem Grund - und der Grund soll weiß bleiben - ist das Logo das * Einzige, was die Scheiben brechen können. Ohne es wäre der Filter * unsichtbar. * * Die Obergrenze entscheidet sich an der dichtesten Ansicht, nicht an der * leersten: Wo das Logo quer durch eine lange Liste läuft, fängt es irgendwann * an, mit dem Text zu streiten. */ .glas-wasserzeichen { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72%; height: 72%; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.28; pointer-events: none; z-index: 0; }