From 1d6acceafc92039366a2a783e294ad0e06c6d1d8 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Mon, 11 May 2026 08:08:12 +0200
Subject: [PATCH] ui: Event-Popup-Aktionsbuttons polieren
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die drei Aktions-Icons (Bearbeiten, Kopieren, Löschen) und der
Schließen-X im Termin-Popup hatten bisher nur den schlichten
icon-btn-Hover (graue Fläche). Jetzt im selben modernen Stil wie die
neuen Pill-Buttons:

- Bearbeiten/Kopieren/Löschen: Hover bekommt Primärfarben-Tint
  (color-mix-Hintergrund + farbige Schrift) plus dezenten farbigen
  Schatten
- Schließen-X: Hover zeigt die Akzentfarbe (rot), passend zur
  destruktiven Geste
- Klick fühlt sich mit kurzem Scale-Down (.92) taktiler an

Version v13 → v14.
---
 frontend/css/app.css   | 27 ++++++++++++++++++++++++++-
 frontend/index.html    | 18 +++++++++---------
 frontend/js/version.js |  2 +-
 frontend/sw.js         |  2 +-
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/css/app.css b/frontend/css/app.css
index 7546367..bd1fb56 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -990,7 +990,32 @@ a { color: var(--primary); text-decoration: none; }
 }
 .popup-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
 .popup-header h4 { flex: 1; font-size: 15px; font-weight: 500; }
-.popup-action, .popup-close { width: 32px; height: 32px; font-size: 16px; }
+.popup-action, .popup-close {
+  width: 34px; height: 34px;
+  font-size: 16px;
+  border-radius: 50%;
+  color: var(--text-2);
+  transition:
+    background var(--transition),
+    color var(--transition),
+    transform .1s ease,
+    box-shadow .15s ease;
+}
+.popup-action:hover {
+  background: rgba(66,133,244,.15);
+  background: color-mix(in srgb, var(--primary) 16%, transparent);
+  color: var(--primary);
+  box-shadow: 0 2px 8px rgba(66,133,244,.18);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 22%, transparent);
+}
+.popup-close:hover {
+  background: rgba(234,67,53,.15);
+  background: color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent);
+}
+.popup-action svg, .popup-close svg { width: 16px; height: 16px; }
+.popup-close { font-size: 20px; }
+.popup-action:active, .popup-close:active { transform: scale(.92); }
 .popup-body { padding: 12px 16px; }
 .popup-time, .popup-location, .popup-calendar { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
 .popup-description { font-size: 13px; color: var(--text-1); margin-bottom: 6px; white-space: pre-wrap; }
diff --git a/frontend/index.html b/frontend/index.html
index be466cd..dce93f4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
   <!-- APP_VERSION: update here + version.js on every release -->
-  <title>Calendarr v13</title>
+  <title>Calendarr v14</title>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
   <link rel="manifest" href="/manifest.json" />
   <meta name="theme-color" content="#4285f4" />
@@ -80,7 +80,7 @@
       <button type="submit" class="btn btn-primary btn-full">Anmelden</button>
     </form>
   </div>
-  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v13</button>
+  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v14</button>
 </div>
 
 <!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -199,7 +199,7 @@
           <div id="cal-list-items"></div>
         </div>
       </div>
-      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v13</button>
+      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v14</button>
     </aside>
     <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
 
@@ -235,7 +235,7 @@
           <input type="hidden" id="ev-start" />
           <div class="dt-display" id="ev-start-display" tabindex="0" role="button">
             <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v13H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v14H7z"/></svg>
           </div>
         </div>
         <div class="form-group half">
@@ -243,7 +243,7 @@
           <input type="hidden" id="ev-end" />
           <div class="dt-display" id="ev-end-display" tabindex="0" role="button">
             <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v13H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v14H7z"/></svg>
           </div>
         </div>
       </div>
@@ -253,7 +253,7 @@
           <input type="hidden" id="ev-start-date" />
           <div class="dt-display" id="ev-start-date-display" tabindex="0" role="button">
             <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v13H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v14H7z"/></svg>
           </div>
         </div>
         <div class="form-group half">
@@ -261,7 +261,7 @@
           <input type="hidden" id="ev-end-date" />
           <div class="dt-display" id="ev-end-date-display" tabindex="0" role="button">
             <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v13H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v14H7z"/></svg>
           </div>
         </div>
       </div>
@@ -311,7 +311,7 @@
           <input type="hidden" id="ev-rec-until" />
           <div class="dt-display" id="ev-rec-until-display" tabindex="0" role="button">
             <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v13H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v14H7z"/></svg>
           </div>
         </div>
       </div>
@@ -884,7 +884,7 @@
       <a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p>
     </div>
     <div class="modal-footer" style="justify-content:space-between;align-items:center">
-      <span style="font-size:12px;color:var(--text-3)">Calendarr v13</span>
+      <span style="font-size:12px;color:var(--text-3)">Calendarr v14</span>
       <button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
     </div>
   </div>
diff --git a/frontend/js/version.js b/frontend/js/version.js
index e4bf081..ada9b11 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 = 'v13';
+export const APP_VERSION = 'v14';
diff --git a/frontend/sw.js b/frontend/sw.js
index c9f7b78..2b3878c 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-v13';
+const CACHE_VERSION  = 'calendarr-v14';
 const OFFLINE_SHELL  = ['/', '/index.html'];
 
 self.addEventListener('install', event => {