ClaudeandClaude Opus 5.5
1725aaa91c
Die Handy-Leiste ist jetzt eine schwebende Glas-Pille mit vier Symbolen (Website, Funktionen, Chat, Verträge) nach der Komponente „Nimbus UI · Liquid Navbar – Waterline“ (guglielmogiannattasio.it), ohne React nachgebaut: Wassertropfen per WebGL-Shader unter dem aktiven Bereich, Tröpfchen bei langen Sprüngen, Wellen beim Tippen, eine Szene je Symbol. Ohne WebGL ein CSS-Tropfen, bei „Bewegung reduzieren“ ohne Bewegung. Das Wasser ruht außerhalb des Bildes und 6 s nach der letzten Bedienung. Unterseiten zeigen „Zurück“ und Reiter als gläserne Pille, der aktive Reiter im Tropfen. Abstände (Blatt, Chat, Streifen, Inhalt) rechnen mit der neuen Zone über --kn-wl-zone. Desktop unverändert. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
140 lines
11 KiB
CSS
140 lines
11 KiB
CSS
/* Kundenansicht neu: Wasser-Leiste (wasser-leiste.js). Pille aus Glas mit Wassertropfen, nach der Komponente „Nimbus UI · Liquid Navbar“
|
|
(guglielmogiannattasio.it). Die Regeln der Pille sind die der Vorlage mit kn-wl-Namen; darunter der Einbau in die Hülle am Handy:
|
|
Die Leiste ist keine weiße Zeile mehr, sondern eine schwebende Pille über dem Inhalt. Unterseiten (Etage 2) zeigen statt der Bereiche eine
|
|
gläserne Pille mit „Zurück“ und Reitern; der aktive Reiter liegt in einem Tropfen wie der CSS-Tropfen der Pille. Lädt nach huelle.css. */
|
|
|
|
/* ---------- Pille ---------- */
|
|
|
|
.kn-wl {
|
|
--wl-tint: rgba(255,255,255,.14); --wl-fg: var(--kn-text); --wl-fg-soft: rgba(26,31,54,.6); --wl-rim: rgba(255,255,255,.7);
|
|
position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; isolation: isolate;
|
|
-webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
|
|
}
|
|
.kn-wl-filter { position: absolute; }
|
|
.kn-wl-glas {
|
|
position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; background: var(--wl-tint);
|
|
-webkit-backdrop-filter: blur(10px) saturate(1.2) brightness(1.08); backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
|
|
box-shadow: inset 0 1px 1px var(--wl-rim), inset 0 0 0 1px rgba(255,255,255,.2), 0 12px 32px -14px rgba(0,40,90,.5), 0 2px 6px rgba(0,40,90,.1);
|
|
}
|
|
.kn-wl[data-brechung="an"] .kn-wl-glas { -webkit-backdrop-filter: url(#kn-wl-brechung) blur(2px) saturate(1.2) brightness(1.08); backdrop-filter: url(#kn-wl-brechung) blur(2px) saturate(1.2) brightness(1.08); }
|
|
.kn-wl-wasser { position: absolute; left: -14px; top: -14px; z-index: -1; pointer-events: none; }
|
|
.kn-wl[data-gl="off"] .kn-wl-wasser { display: none; }
|
|
.kn-wl-tropfen {
|
|
display: none; position: absolute; top: 6px; bottom: 6px; left: 0; z-index: -1; border-radius: 999px; pointer-events: none; will-change: transform, width;
|
|
background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%), rgba(255,255,255,.38);
|
|
box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 6px rgba(0,162,255,.22), inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 16px -6px rgba(0,70,140,.45);
|
|
}
|
|
.kn-wl[data-gl="off"] .kn-wl-tropfen { display: block; }
|
|
.kn-wl[data-leer] .kn-wl-tropfen { opacity: 0; }
|
|
|
|
.kn .kn-wl-item {
|
|
position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px;
|
|
color: var(--wl-fg-soft); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -.01em; white-space: nowrap; transition: color .25s;
|
|
}
|
|
.kn .kn-wl-item:hover, .kn .kn-wl-item[aria-selected="true"] { color: var(--wl-fg); }
|
|
.kn .kn-wl-item:focus-visible { outline-offset: 2px; }
|
|
|
|
.kn-wl-ico { position: relative; display: inline-flex; flex: none; }
|
|
.kn-wl-ico svg { transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
|
|
.kn-wl-item[aria-selected="true"] .kn-wl-ico svg { transform: translateY(-1px) scale(1.08); }
|
|
.kn-wl-tuer { fill: transparent; }
|
|
/* Zähler am Symbol: oben rechts, wie .kn-zahl in huelle.css */
|
|
.kn-wl-ico .kn-zahl { top: -8px; margin-left: -9px; }
|
|
|
|
/* Szenen der Symbole */
|
|
.kn-wl-ico[data-fx="pop"] svg { animation: kn-wl-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
|
|
@keyframes kn-wl-pop { 0% { transform: scale(.72); } 60% { transform: scale(1.2); } 100% { transform: translateY(-1px) scale(1.08); } }
|
|
|
|
.kn-wl-ico[data-fx="plane"] svg { animation: kn-wl-flug 1.15s cubic-bezier(.55,0,.3,1) both; }
|
|
@keyframes kn-wl-flug { 0% { transform: none; } 12% { transform: translate(-3px,2px) rotate(7deg); } 42% { transform: translate(64px,-26px) rotate(-24deg) scale(.9); opacity: 0; } 43% { transform: translate(-60px,16px) rotate(-12deg) scale(.9); opacity: 0; } 58% { opacity: 1; } 80% { transform: translate(3px,-1px) rotate(2deg); } 100% { transform: translateY(-1px) scale(1.08); } }
|
|
.kn-wl-ico[data-fx="plane"]::after { content: ""; position: absolute; left: 55%; top: 48%; width: 46px; height: 2px; border-radius: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); animation: kn-wl-spur 1.15s ease-out both; pointer-events: none; }
|
|
@keyframes kn-wl-spur { 0%, 8% { opacity: 0; transform: rotate(-22deg) scaleX(0); } 30% { opacity: .9; transform: rotate(-22deg) scaleX(1); } 55%, 100% { opacity: 0; transform: rotate(-22deg) translateX(30px) scaleX(.2); } }
|
|
|
|
.kn-wl-ico[data-fx="drop"] svg { animation: kn-wl-tropf .95s cubic-bezier(.4,0,.3,1) both; transform-origin: 50% 100%; }
|
|
@keyframes kn-wl-tropf { 0% { transform: translateY(-1px); } 26% { transform: translateY(-13px) scale(.88,1.12); } 46% { transform: translateY(3px) scale(1.3,.68); } 62% { transform: translateY(-3px) scale(.92,1.08); } 80% { transform: translateY(0) scale(1.04,.97); } 100% { transform: translateY(-1px) scale(1.08); } }
|
|
.kn-wl-ico[data-fx="drop"]::before, .kn-wl-ico[data-fx="drop"]::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }
|
|
.kn-wl-ico[data-fx="drop"]::before { animation: kn-wl-spritzer-l .95s ease-out both; }
|
|
.kn-wl-ico[data-fx="drop"]::after { animation: kn-wl-spritzer-r .95s ease-out both; }
|
|
@keyframes kn-wl-spritzer-l { 0%, 44% { opacity: 0; transform: none; } 50% { opacity: .9; transform: translate(-5px,-6px); } 75%, 100% { opacity: 0; transform: translate(-11px,1px) scale(.4); } }
|
|
@keyframes kn-wl-spritzer-r { 0%, 44% { opacity: 0; transform: none; } 50% { opacity: .9; transform: translate(5px,-7px); } 75%, 100% { opacity: 0; transform: translate(12px,1px) scale(.4); } }
|
|
|
|
.kn-wl-ico[data-fx="spin"] svg { animation: kn-wl-dreh 1s cubic-bezier(.2,.75,.25,1) both; }
|
|
@keyframes kn-wl-dreh { 0% { transform: perspective(80px) rotateY(0); } 100% { transform: perspective(80px) rotateY(360deg) translateY(-1px) scale(1.08); } }
|
|
|
|
.kn-wl-ico[data-fx="glow"] svg { animation: kn-wl-hops .8s cubic-bezier(.3,1.4,.5,1) both; transform-origin: 50% 100%; }
|
|
@keyframes kn-wl-hops { 0% { transform: none; } 30% { transform: translateY(-5px) scale(1.04,.96); } 55% { transform: translateY(0) scale(1.12,.88); } 75% { transform: translateY(-2px) scale(.98,1.04); } 100% { transform: translateY(-1px) scale(1.08); } }
|
|
.kn-wl-ico[data-fx="glow"] .kn-wl-tuer { animation: kn-wl-licht 1.3s ease both; }
|
|
@keyframes kn-wl-licht { 0% { fill: transparent; } 30% { fill: #fff3a8; } 100% { fill: rgba(126,232,255,.6); } }
|
|
|
|
.kn-wl-ico[data-fx="wave"] svg { animation: kn-wl-wink .9s ease-in-out both; transform-origin: 50% 92%; }
|
|
@keyframes kn-wl-wink { 0% { transform: none; } 20% { transform: rotate(-15deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } 100% { transform: translateY(-1px) scale(1.08); } }
|
|
|
|
/* Schmal (wie die Vorlage unter 520 px): nur Symbole, die Wörter bleiben für Screenreader im Knopf */
|
|
@media (max-width: 520px) {
|
|
.kn .kn-wl-item { padding: 0 13px; }
|
|
.kn-wl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
}
|
|
|
|
/* ---------- Einbau in die Hülle (Handy) ----------
|
|
Die Pille schwebt: --kn-wl-luft Abstand zum unteren Rand (über dem Home-Balken des iPhones), darüber 10 px Luft zum Inhalt.
|
|
--kn-wl-zone ist die Höhe dieser Zone; --kn-unten (Blatt, Chat) und der Abstand unter dem Inhalt rechnen damit statt mit der alten Zeile. */
|
|
|
|
.kn { --kn-wl-h: 54px; }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn { --kn-zeile-h: calc(var(--kn-wl-h) + 10px); --kn-wl-luft: max(10px, calc(env(safe-area-inset-bottom) - 10px)); --kn-wl-zone: calc(var(--kn-zeile-h) + var(--kn-wl-luft)); --kn-unten: var(--kn-wl-zone); }
|
|
.kn.kn-hat-streifen { --kn-unten: calc(var(--kn-wl-zone) + 44px); }
|
|
.kn.kn-tastatur { --kn-unten: 0px; }
|
|
|
|
.kn-haupt { padding-bottom: calc(var(--kn-wl-zone) + 28px); }
|
|
.kn-hat-streifen .kn-haupt { padding-bottom: calc(var(--kn-wl-zone) + 28px + 44px); }
|
|
.kn-streifen { bottom: var(--kn-wl-zone); }
|
|
/* Das Blatt reicht bis unten, sein Inhalt läuft unter der Pille durch */
|
|
.kn-blatt { bottom: 0; padding-bottom: calc(var(--kn-unten) + 24px); }
|
|
|
|
.kn-leiste { border-top: 0; background: none; padding-bottom: var(--kn-wl-luft); pointer-events: none; }
|
|
.kn-leiste-reel { position: relative; overflow: visible; }
|
|
.kn-leiste .kn-rw {
|
|
position: absolute; right: 12px; bottom: 0; left: 12px; width: fit-content; max-width: calc(100% - 24px); height: var(--kn-wl-h); margin: 0 auto; padding: 0;
|
|
pointer-events: auto; transition: transform 450ms var(--kn-feder), opacity 250ms ease, visibility 0s;
|
|
}
|
|
/* huelle.css schiebt beide Zeilen eine Etage hoch; hier liegen die Pillen übereinander und tauschen mit kurzem Auf- und Abtauchen */
|
|
.kn-leiste-reel[data-etage="offen"] .kn-rw { transform: none; }
|
|
.kn-leiste-reel[data-etage="offen"] #kn-zeile-haupt, .kn-leiste-reel:not([data-etage="offen"]) #kn-zeile-etage {
|
|
opacity: 0; transform: translateY(18px) scale(.94); transition: transform 300ms var(--kn-bremse), opacity 200ms ease, visibility 0s 300ms;
|
|
}
|
|
|
|
/* Etage 2: gläserne Pille mit „Zurück“ und Reitern */
|
|
#kn-zeile-etage {
|
|
min-width: 132px; padding: 5px; border-radius: 999px; isolation: isolate; background: rgba(255,255,255,.66);
|
|
-webkit-backdrop-filter: blur(12px) saturate(1.3) brightness(1.06); backdrop-filter: blur(12px) saturate(1.3) brightness(1.06);
|
|
box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.2), 0 12px 32px -14px rgba(0,40,90,.5), 0 2px 6px rgba(0,40,90,.1);
|
|
}
|
|
#kn-zeile-etage .kn-zurueck { height: 44px; padding: 0 14px 0 8px; border-radius: 999px; }
|
|
#kn-zeile-etage .kn-zurueck--voll { justify-content: center; }
|
|
#kn-zeile-etage .kn-balken { height: 44px; padding-right: 4px; border-radius: 999px; }
|
|
#kn-zeile-etage .kn-t { padding: 0 12px; }
|
|
#kn-zeile-etage .kn-gleiter {
|
|
z-index: 0; top: 4px; bottom: auto; height: 36px; border-radius: 999px; outline-offset: -3px;
|
|
background: radial-gradient(120% 140% at 30% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%), rgba(255,255,255,.38);
|
|
box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 6px rgba(0,162,255,.22), inset 0 0 0 1px rgba(255,255,255,.55), 0 6px 16px -6px rgba(0,70,140,.45);
|
|
}
|
|
#kn-zeile-etage .kn-overlay { display: none; }
|
|
#kn-zeile-etage .kn-t[aria-selected="true"] { color: var(--kn-text); }
|
|
.kn #kn-zeile-etage .kn-balken:has(.kn-t:focus-visible) .kn-gleiter { outline-color: var(--kn-accent); }
|
|
}
|
|
|
|
/* Querformat: niedrigere Pille */
|
|
@media (max-height: 500px) and (max-width: 880px), (max-height: 500px) and (pointer: coarse) {
|
|
.kn { --kn-wl-h: 48px; }
|
|
.kn .kn-wl-item { height: 36px; }
|
|
#kn-zeile-etage { padding: 2px; }
|
|
}
|
|
|
|
/* Bewegung reduziert: keine Szenen, Pillen tauschen ohne Fahrt */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kn-wl-ico svg, .kn-wl-ico::before, .kn-wl-ico::after, .kn-wl-tuer { animation: none !important; transition: none; }
|
|
.kn-leiste .kn-rw,
|
|
.kn-leiste-reel[data-etage="offen"] #kn-zeile-haupt, .kn-leiste-reel:not([data-etage="offen"]) #kn-zeile-etage { transform: none; transition: opacity 150ms, visibility 0s; }
|
|
}
|