mirror of
https://github.com/garrytan/gstack.git
synced 2026-09-09 14:38:59 +02:00
fix(extension): remove the orphaned security-banner block; repair two dead CSS tokens
Design-review findings. The 197-line .security-banner component (incl. its keyframes) had no producer — no JS has created the element since the chat-path rip, the same dead-hidden-security-UI class as the #2557 shield this wave removed; a tombstone comment points at git history if the banner UX returns. Two pre-existing token bugs in the mem-toast styles: --zinc-700 was never defined so the button hover computed to transparent (now carries a fallback), and --font-sans doesn't exist (now --font-system, which :root defines). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Garry Tan
co-authored by
Claude Fable 5
Claude Fable 5
parent
65fd3e8843
commit
dcc6e9e323
+6
-198
@@ -87,203 +87,11 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ─── Security Banner ─────────────────────────────────────────────
|
||||
Variant A approved in /plan-design-review 2026-04-19. Centered
|
||||
alert-heavy. Fires on security_event — canary leaks + ML BLOCK
|
||||
verdicts. Trust UX: layer names + confidence scores in mono so
|
||||
the user can see exactly WHY the session was terminated.
|
||||
*/
|
||||
/* The .security-banner component (Variant A, 2026-04-19) was removed with
|
||||
its producer: no JS has created a .security-banner element since the
|
||||
chat-path rip, and the hidden shield it guarded against went in #2557.
|
||||
Restore from git history if the banner UX returns. */
|
||||
|
||||
.security-banner {
|
||||
position: relative;
|
||||
/* Kept above other absolutely-positioned chrome so the banner's close
|
||||
button and controls receive clicks. This originally guarded against
|
||||
the top-right security shield (z-index: 10) overlapping the close X
|
||||
and intercepting pointer events; that shield has since been removed
|
||||
(#2557 — dead UI since the PTY terminal rewrite). */
|
||||
z-index: 20;
|
||||
padding: 20px 16px;
|
||||
text-align: center;
|
||||
background: rgba(20, 20, 20, 0.98);
|
||||
border-bottom: 1px solid rgba(239, 68, 68, 0.3);
|
||||
animation: securityBannerEnter 250ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
@keyframes securityBannerEnter {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.security-banner-close {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--zinc-500, #71717A);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: 0;
|
||||
}
|
||||
.security-banner-close:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--zinc-300, #D4D4D8);
|
||||
}
|
||||
.security-banner-close:focus-visible {
|
||||
outline: 2px solid var(--amber-500);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.security-banner-icon {
|
||||
color: var(--error);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.security-banner-title {
|
||||
font-family: var(--font-display, 'Satoshi', sans-serif);
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: var(--error);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.security-banner-subtitle {
|
||||
font-family: var(--font-body, 'DM Sans', sans-serif);
|
||||
font-size: 13px;
|
||||
color: var(--zinc-400, #A1A1AA);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.security-banner-expand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
padding: 6px 12px;
|
||||
color: var(--zinc-300, #D4D4D8);
|
||||
font-family: var(--font-body, 'DM Sans', sans-serif);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.security-banner-expand:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.security-banner-expand:focus-visible {
|
||||
outline: 2px solid var(--amber-500);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.security-banner-chevron {
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
||||
|
||||
.security-banner-details {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.security-banner-section-label {
|
||||
font-family: var(--font-mono, 'JetBrains Mono', monospace);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--zinc-500, #71717A);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.security-banner-layers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.security-banner-layer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
font-family: var(--font-mono, 'JetBrains Mono', monospace);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.security-banner-layer-name {
|
||||
color: var(--zinc-300, #D4D4D8);
|
||||
}
|
||||
|
||||
.security-banner-layer-score {
|
||||
color: var(--amber-400);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.security-banner-suspect {
|
||||
margin: 4px 0 0;
|
||||
padding: 8px 10px;
|
||||
background: var(--zinc-900, #18181B);
|
||||
border: 1px solid var(--zinc-700, #3F3F46);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: var(--zinc-300, #D4D4D8);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.security-banner-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.security-banner-btn {
|
||||
flex: 1;
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--radius-md, 6px);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.security-banner-btn-block {
|
||||
background: var(--red-600, #DC2626);
|
||||
color: white;
|
||||
border-color: var(--red-700, #B91C1C);
|
||||
}
|
||||
|
||||
.security-banner-btn-block:hover {
|
||||
background: var(--red-700, #B91C1C);
|
||||
}
|
||||
|
||||
.security-banner-btn-allow {
|
||||
background: transparent;
|
||||
color: var(--zinc-200, #E4E4E7);
|
||||
border-color: var(--zinc-600, #52525B);
|
||||
}
|
||||
|
||||
.security-banner-btn-allow:hover {
|
||||
background: var(--zinc-800, #27272A);
|
||||
border-color: var(--zinc-500, #71717A);
|
||||
}
|
||||
|
||||
.security-banner-btn:focus-visible {
|
||||
outline: 2px solid var(--amber-400);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.conn-btn {
|
||||
font-size: 9px;
|
||||
@@ -1133,7 +941,7 @@ footer {
|
||||
border-radius: var(--radius-md, 6px);
|
||||
padding: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
font-family: var(--font-sans);
|
||||
font-family: var(--font-system); /* --font-sans was never defined; the invalid var fell back to inheritance by luck */
|
||||
font-size: 12px;
|
||||
}
|
||||
.mem-toast-header {
|
||||
@@ -1195,7 +1003,7 @@ footer {
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
.mem-toast-btn:hover { background: var(--zinc-700); }
|
||||
.mem-toast-btn:hover { background: var(--zinc-700, #3F3F46); } /* --zinc-700 is undefined in :root; without the fallback this hover computed to transparent */
|
||||
.mem-toast-btn.primary {
|
||||
background: #ef4444;
|
||||
border-color: #ef4444;
|
||||
|
||||
Reference in New Issue
Block a user