jivanrij/helder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improves pop-up

Browse Source
This commit is contained in:
Jonathan van Rij
2026-09-03 08:21:46 +02:00
parent 74cffe2253
commit 37d15a29f0
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/renderer/src/styles.css
View File

@@ -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-branch { color:var(--fg-3); }
.tb-repo-sep { 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; } .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 { .focus-flash {
position:fixed; inset:0; z-index:200; pointer-events:none; position:fixed; inset:0; z-index:200; pointer-events:none;
display:flex; align-items:center; justify-content:center; display:flex; align-items:center; justify-content:center;
animation:ff-fade 2s ease forwards;
} }
.ff-card { .ff-card {
display:flex; align-items:center; gap:9px; display:flex; align-items:center; gap:11px;
font-family:var(--mono); font-size:24px; line-height:1; font-family:var(--mono); font-size:19px; line-height:1;
padding:20px 34px; border-radius:14px; padding:15px 22px; border-radius:4px;
background:rgba(22,23,26,0.82); border:1px solid var(--border-2); background:rgba(30,32,36,0.94); border:1px solid var(--border-2);
backdrop-filter:blur(8px); box-shadow:0 18px 60px rgba(0,0,0,0.5); 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; } .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;} } .ff-card .tb-repo-branch { color:var(--accent); }
@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;} } } /* 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 { display:flex; gap:8px; }
.traffic i { width:12px; height:12px; border-radius:50%; display:block; } .traffic i { width:12px; height:12px; border-radius:50%; display:block; }
.traffic .r{background:#e0696a;} .traffic .y{background:#d8a85c;} .traffic .g{background:#5cbd6b;} .traffic .r{background:#e0696a;} .traffic .y{background:#d8a85c;} .traffic .g{background:#5cbd6b;}