From 37d15a29f0df52e8b7f7f66c2c95ef75d0fa1076 Mon Sep 17 00:00:00 2001
From: Jonathan van Rij <jonathan@blijnder.nl>
Date: Thu, 3 Sep 2026 08:21:46 +0200
Subject: [PATCH] improves pop-up

---
 src/renderer/src/styles.css | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 0c5041c..9ec5903 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -90,22 +90,26 @@ kbd { flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--fg-3
 .tb-repo-branch { color:var(--fg-3); }
 .tb-repo-sep { color:var(--fg-3); }
 .tb-repo-name { color:var(--fg-0); font-weight:600; overflow:hidden; text-overflow:ellipsis; }
-/* focus flash — branch - repository, briefly centered; same inline style as the header label, scaled up */
+/* focus flash — branch - repository, briefly centered; same inline style as the
+   header label, scaled up. It appears and goes on the state alone: no fade, so
+   what is on screen is always the truth about which window has focus. */
 .focus-flash {
   position:fixed; inset:0; z-index:200; pointer-events:none;
   display:flex; align-items:center; justify-content:center;
-  animation:ff-fade 2s ease forwards;
 }
 .ff-card {
-  display:flex; align-items:center; gap:9px;
-  font-family:var(--mono); font-size:24px; line-height:1;
-  padding:20px 34px; border-radius:14px;
-  background:rgba(22,23,26,0.82); border:1px solid var(--border-2);
-  backdrop-filter:blur(8px); box-shadow:0 18px 60px rgba(0,0,0,0.5);
+  display:flex; align-items:center; gap:11px;
+  font-family:var(--mono); font-size:19px; line-height:1;
+  padding:15px 22px; border-radius:4px;
+  background:rgba(30,32,36,0.94); border:1px solid var(--border-2);
+  border-left:3px solid var(--accent);
+  backdrop-filter:blur(6px); box-shadow:0 16px 44px rgba(0,0,0,0.55);
 }
 .ff-card svg { color:var(--accent); flex:0 0 auto; }
-@keyframes ff-fade { 0%{opacity:0;} 12%{opacity:1;} 72%{opacity:1;} 100%{opacity:0;} }
-@media (prefers-reduced-motion:reduce) { .focus-flash { animation:ff-fade-rm 2s steps(1) forwards; } @keyframes ff-fade-rm { 0%{opacity:1;} 99%{opacity:1;} 100%{opacity:0;} } }
+.ff-card .tb-repo-branch { color:var(--accent); }
+/* The dash becomes a rule: same divider the rest of the chrome uses. */
+.ff-card .tb-repo-sep { width:1px; height:17px; background:var(--border-2); font-size:0; margin:0 1px; }
+.ff-card .tb-repo-name { font-weight:700; letter-spacing:-0.01em; }
 .traffic { display:flex; gap:8px; }
 .traffic i { width:12px; height:12px; border-radius:50%; display:block; }
 .traffic .r{background:#e0696a;} .traffic .y{background:#d8a85c;} .traffic .g{background:#5cbd6b;}