/* ========================================================================== Politur - die gemeinsame Handschrift -------------------------------------------------------------------------- Bis hierher hat jeder Abschnitt seine eigenen Zeiten und Kurven mitgebracht (.12s hier, .15s dort, mal linear, mal ease). Das sieht man: nichts fuehlt sich verwandt an. Ab hier gibt es drei Zeiten und drei Kurven fuer die ganze App - und jeder Knopf, jede Zeile, jedes Feld benutzt sie. Was hier steht, aendert kein Markup und keine Logik, nur wie sich die App anfuehlt. Neue Bausteine holen sich die Werte von hier, statt eigene zu erfinden. ========================================================================== */ :root{ --dur-schnell:.14s; /* ein Druck, ein Haken - sofort */ --dur:.22s; /* der Normalfall: Farbe, Rand, Schatten */ --dur-ruhig:.34s; /* was sich oeffnet oder auf die Seite kommt */ /* Herauslaufend: schnell los, weich ankommen. Das ist die Kurve fuer alles, was der Finger ausgeloest hat - sie folgt dem Tipp. */ --ease:cubic-bezier(.22,.9,.3,1); /* Mit einem Hauch Ueberschwung. Nur fuer das, was zurueckfedern soll - ein losgelassener Knopf, ein gesetzter Haken. */ --ease-feder:cubic-bezier(.34,1.32,.5,1); } /* Auf dem Handy legt der Browser beim Tippen einen grauen Schleier ueber den Knopf und wartet 300 ms, ob ein Doppeltipp kommt. Beides laesst die App zaeh wirken, obwohl sie es nicht ist. */ button, .btn, a, input, select, textarea, [role="button"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} } /* Drei Schritte statt zwei: der Zeiger hebt ihn an, der Finger drueckt ihn ein, das Loslassen federt zurueck. Der Schatten wandert mit - ohne ihn sieht das Anheben aus wie ein Farbwechsel. */ .btn{ transition:transform var(--dur-schnell) var(--ease-feder), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:active:not([disabled]){transform:scale(.955);box-shadow:none;transition-duration:.06s;} /* Der harte 2-px-Rahmen sprang beim Hineintippen an und wieder weg. Jetzt legt sich ein weicher Ring um das Feld und blendet sich auf - man sieht, wo man steht, ohne dass es klackt. */ .field input, .field select, .field textarea, .search-wrap input{ transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .field input:focus, .field select:focus, .field textarea:focus, .search-wrap input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } /* Die Chips - Wochentage, Zahlwege, Kategorien. Sie waren das einzige Bedienelement ganz ohne Rueckmeldung: der Zustand sprang um, mehr nicht. */ .chip{ transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),transform var(--dur-schnell) var(--ease-feder); } .chip:active{transform:scale(.94);transition-duration:.06s;} /* Der Wert rechts in einer Einstellungszeile wechselt beim Aufklappen - ein weicher Uebergang statt eines Sprungs. */ .cat-wert{transition:opacity var(--dur) var(--ease);} .set-farbe .set-sw{transition:box-shadow var(--dur) var(--ease),transform var(--dur-schnell) var(--ease-feder);} .set-farbe{transition:color var(--dur) var(--ease);} .set-farbe:active{transform:none;} .set-farbe:active .set-sw{transform:scale(.92);transition-duration:.06s;} /* Eine Zeile in den Einstellungen hebt sich beim Ueberfahren leicht ab - so sieht man, dass die ganze Zeile anzutippen ist, nicht nur das Wort. */ .set-liste .cat-toggle, .cat-toggle, .cat-chev{ transition:background var(--dur) var(--ease),color var(--dur) var(--ease); } .cat-chev svg{transition:transform var(--dur) var(--ease);} /* Der aktive Reiter sprang bisher hart um. Jetzt waechst die Pille in ihn hinein, und ein Tipp gibt spuerbar nach. */ nav.tabbar button{ transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-schnell) var(--ease-feder); } nav.tabbar button:active{transform:scale(.93);transition-duration:.06s;} nav.tabbar button svg{transition:transform var(--dur) var(--ease-feder);} nav.tabbar button.active svg{transform:translateY(-1px) scale(1.06);} nav.topnav button{transition:background var(--dur) var(--ease),color var(--dur) var(--ease);} /* ---- Zeitraster und Chips ---- */ .zt-zeit{ transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),transform var(--dur-schnell) var(--ease-feder); } .zt-zeit:not(.weg):not(.aus):active{transform:scale(.92);transition-duration:.06s;} .zt-teil{ transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .cf-chip, .filter-leiste button{ transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), color var(--dur) var(--ease),transform var(--dur-schnell) var(--ease-feder); } .cf-chip:active{transform:scale(.94);transition-duration:.06s;} /* Eine Karte, die man antippen kann, hebt sich beim Ueberfahren an. Eine, die nur dasteht, tut das nicht - sonst verspricht sie etwas, das nicht kommt. */.cal-tag{ transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),transform var(--dur-schnell) var(--ease-feder); } /* Alles, was auftaucht, benutzt dieselbe Kurve. Vorher war das dreimal 'ease' und einmal etwas anderes - unauffaellig, aber es summiert sich. */ main.view.enter{animation:rise var(--dur-ruhig) var(--ease) both;} .cat-body.swap, .tagblatt.swap{animation:swapIn var(--dur) var(--ease) both;} .cat-body.unfold{animation:unfold var(--dur-ruhig) var(--ease) both;} /* Bisher trug fast jedes Element denselben Schatten - der Knopf, der Chip, die Farbprobe, die Karte. Wenn alles schwebt, schwebt nichts: der Blick findet keine Ordnung mehr, und genau daran erkennt man eine Oberflaeche, die aus Bausteinen zusammengesetzt statt entworfen wurde. Ab hier heisst Schatten: "das liegt ueber der Seite". Kleine Bedienteile stehen auf der Seite und tragen nur ihren Rand - beim Ueberfahren heben sie sich an, und erst dann bekommen sie einen. Was wirklich obenauf liegt - die Reiterleiste, ein Dialog, der Kopf - behaelt seinen. */ .chip, .set-farbe .set-sw, .btn.subtle, .btn.ghost, .zt-zeit{ box-shadow:none; } /* Eine Ueberschrift steht enger als der Fliesstext, so wie im Satz eines Magazins. Instrument Sans hat keine Achsen fuer Groesse und Weichheit - die alten Angaben fuer Fraunces werden darum ignoriert. */ .view h1{ letter-spacing:-.022em;line-height:1.08; } .view .lede{max-width:52ch;letter-spacing:.004em;} /* Neu gebaut. Vorher: fuenf Felder, dazwischen je ein Haarstrich, und der aktive bekam seine Farbe hart zugewiesen. Die Striche haben die Leiste in Kaestchen zerlegt, und der Farbsprung war das Einzige, was den Wechsel zeigte. Jetzt traegt eine Pille den aktiven Reiter und gleitet zum naechsten hinueber - beim Tippen wie beim Wischen. Die Striche sind weg: die Pille ordnet die Leiste, ein Gitter braucht es dafuer nicht. */ nav.tabbar button + button::before{display:none;} /* Der Schleier unter der Leiste laesst jetzt etwas durch. Vorher war er am unteren Rand deckend - dann haette das Glas nichts zu brechen und saehe bloss milchig aus. So schimmert der Inhalt gedaempft hindurch. */ nav.tabbar::before{ background:linear-gradient(to bottom, rgba(var(--ground-rgb),0) 0, rgba(var(--ground-rgb),.78) 46px); } /* Glas: der Grund scheint gedaempft durch, was dahinterliegt wird verwischt, und ein heller Streifen an der Oberkante gibt der Leiste die Woelbung. Der Streifen ist bewusst weiss und nicht aus den Farbtoenen - er stellt Licht dar, nicht eine Farbe des Designs, und muss darum in jedem Design derselbe sein. */ /* Die Leiste liegt unten an (so hat Evi es gewollt): oben rund, unten gerade am Bildschirmrand, ohne Rand links, rechts und unten. Die Zeichen sollen fast unten anliegen - darum haelt das Polster nicht den ganzen Rand des iPhones (rund 34 px) frei, sondern nur, was die Woerter ueber dem Home-Balken brauchen (rund 14 px). --leiste-unten gilt auch fuer die Kugel und alles, was ueber der Leiste schwebt. */ :root{--leiste-unten:max(4px, calc(env(safe-area-inset-bottom, 0px) - 20px));} nav.tabbar .tabbar-inner{ border-radius:24px 24px 0 0;padding:5px 8px var(--leiste-unten);gap:2px; background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 46%), rgba(var(--ground-rgb),.55); border:1px solid rgba(255,255,255,.35);border-width:1px 0 0; backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); /* Derselbe Aufbau wie bei der Kugel, nur flacher: Licht oben, Schatten innen unten, heller Rand. So liest die Leiste als gewoelbtes Glas, in dem die Kugel liegt - und nicht als Karte mit runden Ecken. */ /* Der Schatten faellt nach oben auf die Seite - unter der Leiste ist nur noch der Bildschirmrand. */ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), 0 -1px 2px rgba(0,0,0,.05), 0 -8px 24px rgba(0,0,0,.08); } /* Kann ein Geraet nicht verwischen, wird aus dem Glas eine gewoehnliche Karte - halbdurchsichtig waere dort nur unlesbar. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ nav.tabbar .tabbar-inner{background:var(--surface);border-color:var(--line);} } @media (max-width:520px){ nav.tabbar .tabbar-inner{gap:2px;} } /* Die Blase: der aktive Reiter sitzt in einer Glaskugel. Drei Dinge machen aus einer Flaeche eine Kugel, und keines davon darf fehlen: ein heller Streifen oben (das Licht faellt von oben), ein Schatten innen unten (dort ist das Glas dicker), ein feiner heller Rand ringsum (die Kante bricht das Licht). Die Weisstoene stehen absichtlich fest und nicht als var(--...): sie stellen Licht dar, keine Farbe des Designs, und muessen in allen zehn Designs dieselben sein. */ .tab-pille{ position:absolute;left:0;top:5px;bottom:var(--leiste-unten);width:0; border-radius:999px; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 58%), linear-gradient(to bottom, var(--surface) 0%, var(--accent-soft) 72%, var(--accent-soft) 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -7px 12px -7px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.10); backdrop-filter:blur(4px) saturate(1.3); -webkit-backdrop-filter:blur(4px) saturate(1.3); opacity:0;pointer-events:none;z-index:0; transition:transform var(--dur) var(--ease), width var(--dur) var(--ease), opacity var(--dur) var(--ease); } /* Der Glanzpunkt: eine schmale helle Sichel im oberen Drittel. Sie sitzt eingerueckt, damit sie als Spiegelung auf der Woelbung liest und nicht als zweiter Rand. */ .tab-pille::before{ content:'';position:absolute;left:14%;right:14%;top:2px;height:38%; border-radius:999px; background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,0)); pointer-events:none; } /* Waehrend des Ziehens klebt die Kugel am Finger - jede Verzoegerung liesse sie hinterherhaengen. */ html.zieht-reiter .tab-pille{transition:none;} /* Beim Loslassen federt sie in ihren Reiter: ein Hauch Ueberschwung, dann steht sie. Laenge und Stauchung vom Ziehen gehen dabei mit zurueck. */ .tab-pille.feder{ transition:transform .44s var(--ease-feder),width .44s var(--ease-feder),opacity var(--dur) var(--ease); } /* Das Wort unter der Kugel leuchtet schon beim Ziehen, das bisherige tritt zurueck - man sieht, wo man landet, bevor man loslaesst. */ html.zieht-reiter nav.tabbar button.unter{color:var(--accent-deep);} html.zieht-reiter nav.tabbar button.active:not(.unter){color:var(--ink-soft);} html.zieht-reiter nav.tabbar button.active:not(.unter) span{font-weight:600;} html.zieht-reiter nav.tabbar .tabbar-inner{cursor:grabbing;} /* Die Leiste nimmt die Bewegung selbst an, statt die Seite zu scrollen. */ nav.tabbar .tabbar-inner{touch-action:none;} /* Gesetzt, nicht gefahren: beim ersten Zeichnen und beim Drehen des Geraets soll die Pille sofort stehen. */ .tab-pille.ohne-weg{transition:none;} nav.tabbar button{position:relative;z-index:1;} /* Die Fuellung liegt jetzt hinter dem Knopf - der Knopf selbst bleibt durchsichtig, sonst laegen zwei Fuellungen uebereinander. */ nav.tabbar button.active{background:none;color:var(--accent-deep);} nav.tabbar button.active span{font-weight:700;} /* Zwischen den Reitern steht wieder ein feiner Strich - so hat Evi es gewollt. Er sitzt mittig in der Luecke (gap 2px) und ist kurz, damit er trennt, ohne die Leiste zu zerschneiden. Neben der Kugel tritt er zurueck, sonst liefe er ueber ihren runden Rand; beim Ziehen treten alle zurueck, weil die Kugel dann zwischen den Reitern schwebt. */ nav.tabbar button + button::before{ content:'';display:block;position:absolute; left:-1.5px;top:30%;bottom:30%;width:1px;border-radius:1px; background:var(--line); pointer-events:none; transition:opacity var(--dur) var(--ease); } nav.tabbar button + button::before{background:color-mix(in srgb, var(--ink) 16%, transparent);} nav.tabbar button.active + button::before, nav.tabbar button + button.active::before, html.zieht-reiter nav.tabbar button + button::before{display:block;opacity:0;} /* Die neue Ansicht kommt aus der Richtung herein, aus der gewischt wurde. Ohne das wirkt der Wisch wie ein Zufallstreffer - mit ihr merkt man sich nach zwei Malen, wo die Reiter liegen. */ main.view.enter.von-rechts{animation-name:wischRein;} main.view.enter.von-links{animation-name:wischRaus;} @keyframes wischRein{from{opacity:0;transform:translateX(34px);}to{opacity:1;transform:none;}} @keyframes wischRaus{from{opacity:0;transform:translateX(-34px);}to{opacity:1;transform:none;}} /* Das Logo steht überall in einem Kreis - die Zeichnung von by.evi bringt ihre runde Scheibe selbst mit, ein gewähltes Bild bekommt eine. `contain` statt `cover`: so bleibt das ganze Logo zu sehen, statt an den Kanten abgeschnitten zu werden. Was im Kreis daneben frei bleibt, füllt der Kartenton - damit es eine runde Scheibe ist und kein Rest. Und kein `multiply` mehr: das Bild hat jetzt seinen eigenen Grund und würde sich sonst mit ihm dunkel rechnen. */ img.lg{ /* `cover` statt `contain`: das Logo fuellt den Kreis ganz aus, statt mit Luft daneben darin zu stehen. Ist es nicht quadratisch, werden die Laengsseiten angeschnitten - so wollte Evi es. Kein eigener Grund dahinter: ein freigestelltes Logo soll den Grund der App durchscheinen lassen, nicht auf einer Scheibe liegen. Und kein `multiply`, das wuerde ein helles Logo in den Grund hineinrechnen. */ object-fit:cover;border-radius:50%; background:none;mix-blend-mode:normal; } /* Ein eigenes Logo fuellt seinen Rahmen **ganz** aus. Die Zeichnung von by.evi sitzt mit Luft in ihrem Feld - das ist bei ihr richtig, sie bringt ihre eigene Scheibe mit. Ein hochgeladenes Logo soll dagegen die ganze Flaeche decken, sonst liegt ein heller Ring darum. Also tritt der Rahmen zurueck, wo ein Bild drinsteht, und das Bild nimmt seinen Platz ein. */ .sperre-logo-ring:has(img.lg), .lw-feld:has(img.lg){ background:none;border-color:transparent; } .sperre-logo-ring img.lg, .lw-feld img.lg{width:100%;height:100%;} .logo-wahl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 2px;} .lw-feld{ flex:none;display:grid;place-items:center; width:76px;height:76px;border-radius:50%; background:var(--surface);border:1px solid var(--line); box-shadow:var(--shadow);overflow:hidden; } .lw-feld .lg{width:64px;height:64px;display:block;} /* Das Logo von MyLifeBase ist ein abgerundetes Quadrat wie ein App-Symbol (so hat Evi es gewollt) - 22,5 % Rundung wie in der Zeichnung (werkzeuge/symbole.js). Die Rahmen darum runden sich mit, sonst schnitten sie die Ecken rund ab oder trugen einen runden Schatten. Ein eigenes Logo bleibt im Kreis. */ img.lg.lg-app{border-radius:22.5%;} .sperre-logo-ring:has(img.lg-app), .lw-feld:has(img.lg-app), .sh-logo:has(img.lg-app){border-radius:22.5%;} .lw-tasten{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0;} /* Ein Handy kennt kein Ueberfahren. Tippt man dort, merkt sich der Browser den Zustand trotzdem und die Zeile bleibt hervorgehoben stehen, bis man woanders hintippt. Darum gilt alles Folgende nur, wo wirklich ein Zeiger unterwegs ist. */ @media (hover:hover) and (pointer:fine){ .btn:hover:not([disabled]){background:var(--accent-soft);border-color:var(--accent-deep);box-shadow:var(--shadow-lift);} .btn.ghost:hover:not([disabled]){background:var(--surface-2);border-color:var(--accent);box-shadow:none;} .btn.subtle:hover:not([disabled]){background:var(--accent-soft);box-shadow:none;} .btn.danger:hover:not([disabled]){background:var(--warn-soft);border-color:var(--warn);box-shadow:none;} .field input:hover:not(:focus), .field textarea:hover:not(:focus), .field select:hover:not(:focus), .search-wrap input:hover:not(:focus){border-color:var(--rose);} .chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);} .set-farbe:hover .set-sw{box-shadow:var(--shadow-lift);} .cat-toggle:hover, .cat-chev:hover{background:var(--surface-2);} .zt-zeit:not(.weg):not(.aus):hover{border-color:var(--accent);background:var(--accent-soft);} .zt-teil:hover{border-color:var(--accent);} }