From 9013f57d024a1c18b4000b5682c72a5a618a22b7 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Mon, 11 May 2026 07:56:13 +0200 Subject: [PATCH] feat(ui): Buttons im modernen Pill-Stil + Plus-Icon fixen MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Großes Frontend-Update für alle Buttons. Der Stil orientiert sich an modernen App-Designs (Pill mit dezentem Schatten, sanft "abhebender" Hover-Effekt), die Farbe folgt der gewählten Primärfarbe des Users dynamisch via color-mix(). - .btn: fully rounded (border-radius: 999px), grösseres Padding, smooth Transitions für Schatten/Transform/Brightness - .btn-primary: Primärfarbe als Hintergrund + dezenter farbiger Schatten; Hover hebt um 1px, Schatten wird kräftiger, leichte Aufhellung - .btn-secondary: dezenter Border, auf Hover wird er primär-farben - .btn-ghost / .btn-danger entsprechend angepasst - .btn-fab (Sidebar "Erstellen"): jetzt in Primärfarbe statt grau, passt zum FAB unten rechts auf Mobile und zur Marken-Sprache - .icon-btn: kleines Scale-Down beim Drücken, Focus-Ring sichtbar für Tastatur-Nutzer - Form-Inputs: 8px Radius, sanfter Hover-Border, beim Focus jetzt Primärfarben-Ring (color-mix-Glow) Fix: kaputtes Plus-SVG am Kalender-Hinzufügen-Button — Vertikalbalken war zu lang (v12 statt v6), jetzt symmetrisch. Version v12 → v13. --- frontend/css/app.css | 131 ++++++++++++++++++++++++++++++++++------- frontend/index.html | 20 +++---- frontend/js/version.js | 2 +- frontend/sw.js | 2 +- 4 files changed, 121 insertions(+), 34 deletions(-) diff --git a/frontend/css/app.css b/frontend/css/app.css index 556a5db..7546367 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -55,49 +55,129 @@ a { color: var(--primary); text-decoration: none; } .flex-col { display: flex; flex-direction: column; } .gap-8 { gap: 8px; } -/* ── Buttons ────────────────────────────────────────────── */ +/* ── Buttons ────────────────────────────────────────────── + Modern pill style: fully rounded, subtle coloured shadow on the + prominent variants, lift on hover, snap back on press. The + primary-coloured glow follows --primary via color-mix(), so it adapts + when the user changes the theme colour in settings. */ .btn { - display: inline-flex; align-items: center; gap: 6px; - padding: 8px 16px; border-radius: 20px; - font-weight: 500; transition: background var(--transition), color var(--transition); + display: inline-flex; align-items: center; justify-content: center; + gap: 8px; + padding: 10px 22px; + border-radius: 999px; + font-weight: 500; font-size: 14px; + letter-spacing: .1px; white-space: nowrap; + user-select: none; + -webkit-tap-highlight-color: transparent; + transition: + background var(--transition), + color var(--transition), + border-color var(--transition), + box-shadow .18s ease, + transform .12s ease, + filter var(--transition); } +.btn:active { transform: translateY(0) scale(.985); transition-duration: .05s; } +.btn:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + .btn-primary { background: var(--primary); color: #fff; + box-shadow: 0 2px 8px rgba(66,133,244,.28); + box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent); } -.btn-primary:hover { filter: brightness(1.12); } +.btn-primary:hover { + filter: brightness(1.08); + transform: translateY(-1px); + box-shadow: 0 6px 18px rgba(66,133,244,.42); + box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent); +} + .btn-secondary { background: var(--bg-surface); color: var(--text-1); border: 1px solid var(--border); } -.btn-secondary:hover { background: var(--bg-hover); } -.btn-ghost { color: var(--primary); } -.btn-ghost:hover { background: var(--primary-dim); } -.btn-danger { background: var(--accent); color: #fff; } -.btn-danger:hover { filter: brightness(1.1); } -.btn-full { width: 100%; justify-content: center; } +.btn-secondary:hover { + background: var(--bg-hover); + border-color: var(--primary); + transform: translateY(-1px); +} + +.btn-ghost { + color: var(--primary); + background: transparent; +} +.btn-ghost:hover { + background: var(--primary-dim); + transform: translateY(-1px); +} + +.btn-danger { + background: var(--accent); + color: #fff; + box-shadow: 0 2px 8px rgba(234,67,53,.28); + box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); +} +.btn-danger:hover { + filter: brightness(1.08); + transform: translateY(-1px); + box-shadow: 0 6px 18px rgba(234,67,53,.42); + box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); +} + +.btn-full { width: 100%; } + +/* The big sidebar "Erstellen" button: same pill aesthetic, primary tinted, + lives in the calm dark sidebar so the shadow is a touch stronger. */ .btn-fab { display: flex; align-items: center; gap: 10px; - padding: 12px 20px; border-radius: 24px; - background: var(--bg-surface); - color: var(--text-1); + padding: 12px 22px; + border-radius: 999px; + background: var(--primary); + color: #fff; font-weight: 600; - box-shadow: var(--shadow); margin: 16px 12px 8px; - transition: background var(--transition), box-shadow var(--transition); + box-shadow: 0 4px 14px rgba(66,133,244,.32); + box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent); + transition: + background var(--transition), + box-shadow .18s ease, + transform .12s ease, + filter var(--transition); } -.btn-fab:hover { background: var(--bg-hover); box-shadow: var(--shadow-lg); } +.btn-fab:hover { + filter: brightness(1.08); + transform: translateY(-1px); + box-shadow: 0 8px 22px rgba(66,133,244,.5); + box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 50%, transparent); +} +.btn-fab:active { transform: translateY(0) scale(.985); } +/* Circular icon buttons (topbar nav, modal close, etc.) */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; - width: 40px; height: 40px; border-radius: 50%; - color: var(--text-2); transition: background var(--transition); + width: 40px; height: 40px; + border-radius: 50%; + color: var(--text-2); flex-shrink: 0; + -webkit-tap-highlight-color: transparent; + transition: + background var(--transition), + color var(--transition), + transform .1s ease; } .icon-btn svg { width: 20px; height: 20px; fill: currentColor; } .icon-btn:hover { background: var(--bg-hover); color: var(--text-1); } +.icon-btn:active { transform: scale(.92); } +.icon-btn:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} /* ── Auth Screens ───────────────────────────────────────── */ .auth-screen { @@ -140,15 +220,22 @@ a { color: var(--primary); text-decoration: none; } .form-group input, .form-group select, .form-group textarea { background: var(--bg-app); border: 1px solid var(--border); - border-radius: var(--radius-sm); - padding: 10px 12px; + border-radius: 8px; + padding: 11px 14px; color: var(--text-1); outline: none; - transition: border-color var(--transition); + transition: border-color var(--transition), box-shadow var(--transition); width: 100%; } +.form-group input:hover:not(:focus), +.form-group select:hover:not(:focus), +.form-group textarea:hover:not(:focus) { + border-color: var(--text-3); +} .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(66,133,244,.18); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .form-group textarea { resize: vertical; } diff --git a/frontend/index.html b/frontend/index.html index 96a3587..be466cd 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@ - Calendarr v12 + Calendarr v13 @@ -80,7 +80,7 @@ - + @@ -185,7 +185,7 @@ Meine Kalender
- + @@ -235,7 +235,7 @@
— - +
@@ -243,7 +243,7 @@
— - +
@@ -253,7 +253,7 @@
— - +
@@ -261,7 +261,7 @@
— - +
@@ -311,7 +311,7 @@
— - +
@@ -884,7 +884,7 @@ scarriffleservices@gmail.com

- Calendarr v12 + Calendarr v13
diff --git a/frontend/js/version.js b/frontend/js/version.js index 0ad52c0..e4bf081 100644 --- a/frontend/js/version.js +++ b/frontend/js/version.js @@ -1,2 +1,2 @@ // Increment APP_VERSION with every code change -export const APP_VERSION = 'v12'; +export const APP_VERSION = 'v13'; diff --git a/frontend/sw.js b/frontend/sw.js index e94ffbc..c9f7b78 100644 --- a/frontend/sw.js +++ b/frontend/sw.js @@ -7,7 +7,7 @@ // the entry HTML / version files). New releases take effect on the next // reload, no manual SW unregister required. -const CACHE_VERSION = 'calendarr-v12'; +const CACHE_VERSION = 'calendarr-v13'; const OFFLINE_SHELL = ['/', '/index.html']; self.addEventListener('install', event => {