Weiterer Feinschliff: Primär-CTA, Badges, Kartenakzente

Zweite Polish-Runde nach dem letzten Commit, wieder additiv:

- Primäre Aktion auf der Startseite ("In meiner Nähe") hebt sich jetzt mit
  Amber-Verlauf + Glow von der sekundären ab, statt nur per Rahmenfarbe -
  klarere visuelle Hierarchie auf den ersten Blick.
- Glocken-Badge pulsiert dezent, solange ungelesene Benachrichtigungen
  vorliegen, statt ein statischer Punkt zu sein.
- Favoriten-Stern-Button: aktiver Zustand jetzt mit Hintergrund-Tönung statt
  nur Rahmenfarbe, plus Hover für den inaktiven Zustand.
- Such-Ergebniszeilen mit sanftem Hover-Verschieben statt hartem Wechsel.
- Einstellungen/Verbindungstest-Karten bekommen denselben Amber-Akzentbalken
  wie die Panel-Überschriften - konsistent mit dem Rest der App statt wie
  ein Fremdkörper aus der letzten Runde.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
This commit is contained in:
Claude committed 2026-09-28 12:07:47 +02:00
1 parent e1b33f7438
commit f70a3323ef
1 file changed
+41 -4
+41 -4
View File
@@ -210,6 +210,7 @@ button {
padding: 10px 12px;
border-radius: 6px;
font-size: 14px;
transition: background .12s ease, transform .12s ease;
}
.search-result:hover,
@@ -218,6 +219,7 @@ button {
background: var(--panel);
outline: 2px solid var(--signal-amber);
outline-offset: -2px;
transform: translateX(2px);
}
.search-result--empty {
@@ -431,11 +433,15 @@ button {
border-radius: var(--radius);
padding: 8px 14px;
font-size: 13px;
transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.favorite-toggle:hover { border-color: var(--ink-muted); }
.favorite-toggle.is-active {
color: var(--signal-amber);
border-color: var(--signal-amber);
background: var(--signal-amber-soft);
box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.15);
}
@keyframes favorite-pop {
@@ -1215,6 +1221,11 @@ button:active { transform: translateY(1px); }
border-radius: 50%;
background: var(--signal-red);
border: 1.5px solid var(--panel-raised);
animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 108, 0.45); }
50% { box-shadow: 0 0 0 4px rgba(255, 93, 108, 0); }
}
.favorites-bar { display: none; }
@@ -1281,7 +1292,17 @@ button:active { transform: translateY(1px); }
.favorite-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}.action-card--primary { border-color: rgba(245,166,35,.45); }
}
.action-card--primary {
border-color: rgba(245, 166, 35, .45);
background: linear-gradient(155deg, rgba(245,166,35,.16), rgba(245,166,35,.04) 65%), var(--panel);
box-shadow: var(--shadow-glow-amber);
}
.action-card--primary:hover {
border-color: var(--signal-amber);
background: linear-gradient(155deg, rgba(245,166,35,.22), rgba(245,166,35,.06) 65%), var(--panel-raised);
}
.action-card--primary .action-card__icon { color: var(--signal-amber); }
.action-card__icon { font-size: 23px; }
.action-card strong, .action-card small { display: block; }
.action-card small { color: var(--ink-muted); margin-top: 3px; font-size: 12px; }
@@ -1589,18 +1610,34 @@ button:active { transform: translateY(1px); }
.recent-item__remove:hover { background: var(--panel-raised); color: var(--signal-red); }
.recent-empty { color: var(--ink-muted); font-size: 12px; padding: 8px 0; }
.connection-check,
.settings-section {
position: relative;
overflow: hidden;
}
.connection-check::before,
.settings-section::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--signal-amber), transparent);
}
.connection-check {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
padding: 12px 14px 12px 18px; display: flex; flex-direction: column; gap: 8px;
}
.connection-check__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.connection-status { color: var(--ink-muted); font-weight: 600; }
.connection-status { color: var(--ink-muted); font-weight: 600; transition: color .15s ease; }
.connection-status--ok { color: var(--signal-green); }
.connection-status--error { color: var(--signal-red); }
.settings-section {
background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
padding: 14px 16px; margin-bottom: 16px;
padding: 14px 16px 14px 20px; margin-bottom: 16px;
}
.settings-section .section-heading { margin-bottom: 10px; }
.settings-toggle {