ClaudeandClaude Opus 5.5
1f350ca432
Wunsch vom 29.10. nach dem ersten Blick am iPhone: - Die Leiste nutzt die Breite (12 px Rand, höchstens 480 px), Symbol über dem Wort, und steht ganz über dem Wisch-Balken des iPhones (Safe-Area plus 6 px statt minus 10 px). - Unterseiten öffnen sich ganz und werden mit Unschärfe eingeblendet statt hochzufahren. Oben links die Überschrift, oben rechts „Zurück“ als Glasknopf, der beim Scrollen stehen bleibt (neuer Platz #kn-blatt-zurueck). - Reiter einer Funktion stehen unten in derselben Wasser-Leiste (Art 'reiter', Kurzwörter, kleinere Schrift wenn es eng wird), ohne Zurück. Ohne Reiter bleibt unten nichts. Die alte Leiste gibt beim Neuaufbau ihren WebGL-Kontext frei. Glas und Unschärfe stehen weiter allein in wasser-leiste.css; huelle.css bleibt ohne Glas. Desktop unverändert. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
136 lines
11 KiB
CSS
136 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 die zwei Arten und der Einbau in die Hülle
|
|
am Handy: Die Leiste ist keine weiße Zeile mehr, sondern eine breite schwebende Pille über dem Inhalt. Hauptseiten zeigen die vier Bereiche
|
|
(Symbol über dem Wort), Unterseiten mit Reitern deren Wörter in derselben Pille; „Zurück“ steht dort oben rechts (huelle.css). 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); } }
|
|
|
|
/* ---------- Zwei Arten ---------- */
|
|
|
|
/* Bereiche (Hauptleiste): Symbol über dem Wort, alle gleich breit */
|
|
.kn-wl[data-art="bereiche"] .kn-wl-item { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; height: 52px; padding: 0 4px; font-size: 11px; line-height: 13px; letter-spacing: 0; }
|
|
.kn-wl[data-art="bereiche"] .kn-wl-item[aria-selected="true"] { font-weight: 600; }
|
|
.kn-wl[data-art="bereiche"] .kn-wl-ico svg { width: 21px; height: 21px; }
|
|
/* Reiter einer Unterseite: nur Wörter; passen sie nicht, setzt wasser-leiste.js data-eng */
|
|
.kn-wl[data-art="reiter"] .kn-wl-item { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 9px; font-size: 13px; }
|
|
.kn-wl[data-art="reiter"][data-eng] .kn-wl-item { padding: 0 5px; font-size: 12px; letter-spacing: -.02em; }
|
|
.kn-wl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
/* ---------- Einbau in die Hülle (Handy) ----------
|
|
Die Pille schwebt mit --kn-wl-luft Abstand über dem unteren Rand: auf dem iPhone ganz über dem Wisch-Balken (Safe-Area plus 6 px), sonst 14 px.
|
|
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. */
|
|
|
|
.kn { --kn-wl-h: 64px; }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn { --kn-zeile-h: calc(var(--kn-wl-h) + 10px); --kn-wl-luft: max(14px, calc(env(safe-area-inset-bottom) + 6px)); --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); }
|
|
|
|
.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; max-width: 480px; height: var(--kn-wl-h); margin: 0 auto; padding: 0; align-items: flex-end;
|
|
pointer-events: none; transition: transform 450ms var(--kn-feder), opacity 250ms ease, visibility 0s;
|
|
}
|
|
.kn-leiste .kn-rw > * { pointer-events: auto; }
|
|
.kn-leiste .kn-wl { display: flex; width: 100%; }
|
|
/* 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;
|
|
}
|
|
|
|
/* Unterseite (Aufbau in huelle.css): mit Unschärfe einblenden statt hochfahren; „Zurück“ oben rechts aus Glas */
|
|
.kn-blatt { filter: blur(14px); transition: opacity 380ms ease, filter 460ms var(--kn-bremse); }
|
|
.kn-blatt--auf { filter: none; }
|
|
.kn-blatt-zurueck { filter: blur(8px); transition: opacity 380ms ease, filter 460ms var(--kn-bremse), visibility 0s 460ms; }
|
|
.kn-blatt--auf ~ .kn-blatt-zurueck { filter: none; }
|
|
.kn-blatt-zurueck .kn-zurueck { background: rgba(255,255,255,.62); -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); }
|
|
}
|
|
|
|
/* Querformat: niedrigere Pille */
|
|
@media (max-height: 500px) and (max-width: 880px), (max-height: 500px) and (pointer: coarse) {
|
|
.kn { --kn-wl-h: 54px; }
|
|
.kn-wl[data-art="bereiche"] .kn-wl-item { height: 42px; gap: 2px; }
|
|
.kn-wl[data-art="bereiche"] .kn-wl-ico svg { width: 18px; height: 18px; }
|
|
}
|
|
|
|
/* 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; }
|
|
.kn-blatt { filter: none; transition: opacity 150ms; }
|
|
.kn-blatt-zurueck { filter: none; transition: opacity 150ms, visibility 0s 150ms; }
|
|
.kn-blatt--auf ~ .kn-blatt-zurueck { filter: none; transition: opacity 150ms; }
|
|
}
|