diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 7f982623..c6932afc 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -42,53 +42,68 @@ body.start { Stelle wie im Browser. Auf der Startseite gibt es ihn gar nicht: Dort ist kein "davor", und ein Knopf, der nichts tut, ist schlimmer als keiner. Auf den übrigen Seiten entscheidet kopf.js, ob er erscheint. */ +/* Entwurf "Neon-Kante": Der senkrechte Lichtstrich links ist dasselbe + Motiv wie die Kante der Anmelde-Tafel (.tafel__kante in gate.css). + Dadurch wirkt der Workspace wie ein Stück und nicht wie zusammen- + gesetzte Teile. */ .zurueck-knopf { + position: relative; flex: 0 0 auto; - display: inline-flex; align-items: center; gap: 7px; - padding: 8px 15px 8px 12px; - /* Verlaufsrahmen: Die Füllung ist DECKEND, dadurch bleibt vom unteren - Verlauf nur der 1px schmale Rand sichtbar. Wäre sie durchsichtig, - schiene der Rahmenverlauf durch die ganze Fläche und der Knopf sähe - aus wie eine Hauptaktion -- das soll er gerade nicht. */ - background: - linear-gradient(180deg, #151c28, #10161f) padding-box, - linear-gradient(180deg, rgba(158, 196, 230, .40), rgba(158, 196, 230, .12)) border-box; - border: 1px solid transparent; - border-radius: 999px; + display: inline-flex; align-items: center; gap: 10px; + padding: 9px 18px 9px 17px; + border: 0; + /* Links flach, rechts rund: Die gerade Kante gehört dem Lichtstrich, + nach rechts läuft der Knopf weich aus. */ + border-radius: 4px 999px 999px 4px; + background: linear-gradient(100deg, + rgba(63, 189, 245, .10), rgba(138, 118, 255, .05) 60%, transparent); color: var(--text-leise); - font: inherit; font-size: .82rem; font-weight: 500; - letter-spacing: .01em; - cursor: pointer; - white-space: nowrap; - box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); - transition: color var(--tempo), box-shadow var(--tempo), background var(--tempo); + font: inherit; font-size: .84rem; font-weight: 600; + cursor: pointer; white-space: nowrap; + transition: color var(--tempo), background var(--tempo); +} + +/* Der Lichtstrich. Ruht etwas kürzer als der Knopf und wächst beim + Überfahren auf volle Höhe -- die Bewegung ersetzt jedes Aufblitzen. */ +.zurueck-knopf::before { + content: ""; + position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; + border-radius: 2px; + background: linear-gradient(180deg, var(--akzent), var(--violett)); + box-shadow: 0 0 8px -1px rgba(63, 189, 245, .55); + transition: top var(--tempo), bottom var(--tempo), box-shadow var(--tempo); } .zurueck-knopf__pfeil { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; - stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; + stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--tempo); } .zurueck-knopf:hover { - color: var(--text); - background: - linear-gradient(180deg, #1a2431, #131b25) padding-box, - linear-gradient(180deg, rgba(63, 189, 245, .62), rgba(138, 118, 255, .30)) border-box; - box-shadow: 0 2px 12px -4px rgba(63, 189, 245, .35), inset 0 1px 0 rgba(255, 255, 255, .08); + color: #fff; + background: linear-gradient(100deg, + rgba(63, 189, 245, .18), rgba(138, 118, 255, .09) 60%, transparent); } -/* Der Pfeil rückt beim Überfahren ein Stück nach links -- die Bewegung - sagt in welche Richtung es geht, ohne zusätzlichen Text. */ -.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-2px); } +.zurueck-knopf:hover::before { + top: 0; bottom: 0; + box-shadow: 0 0 14px 0 rgba(63, 189, 245, .75); +} +/* Der Pfeil rückt nach links -- sagt die Richtung ohne zusätzlichen Text. */ +.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-3px); } -.zurueck-knopf:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4); } -.zurueck-knopf:active .zurueck-knopf__pfeil { transform: translateX(-3px); } +.zurueck-knopf:active { transform: translateY(1px); } + +.zurueck-knopf:focus-visible { + outline: 2px solid var(--akzent); + outline-offset: 3px; + border-radius: 4px 999px 999px 4px; +} @media (prefers-reduced-motion: reduce) { - .zurueck-knopf__pfeil { transition: none; } - .zurueck-knopf:hover .zurueck-knopf__pfeil, - .zurueck-knopf:active .zurueck-knopf__pfeil { transform: none; } + .zurueck-knopf, .zurueck-knopf::before, .zurueck-knopf__pfeil { transition: none; } + .zurueck-knopf:hover .zurueck-knopf__pfeil { transform: none; } } .kopfleiste__rechts { display: flex; align-items: center; gap: 12px; }