CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-08-10 00:00:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: sync extension to DESIGN.md — amber accent, zinc neutrals, grain texture

Browse Source 
Import design system from gstack-website. Update all extension colors:
green (#4ade80) → amber (#F59E0B/#FBBF24), zinc gray neutrals, grain
texture overlay. Regenerate icons as amber "G" monogram on dark background.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-21 15:09:46 -07:00
co-authored by Claude Opus 4.6
parent 3814a12ab2
commit a867e68351
6 changed files with 131 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/popup.html
+24 -24
View File
@@ -6,7 +6,7 @@
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 240px;
background: #0a0a0a;
background: #0C0C0C;
color: #e0e0e0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 13px;
@@ -15,29 +15,29 @@
h1 {
font-size: 16px;
font-weight: 700;
color: #fff;
color: #FAFAFA;
margin-bottom: 16px;
letter-spacing: -0.3px;
}
label {
display: block;
font-size: 12px;
color: #888;
color: #A1A1AA;
margin-bottom: 4px;
}
input {
width: 100%;
padding: 8px;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 4px;
color: #fff;
font-family: 'SF Mono', 'Fira Code', monospace;
background: #141414;
border: 1px solid #262626;
border-radius: 8px;
color: #FAFAFA;
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
font-size: 13px;
outline: none;
transition: border-color 0.15s;
transition: border-color 150ms;
}
input:focus { border-color: #4ade80; }
input:focus { border-color: #F59E0B; }
.status {
margin: 12px 0;
display: flex;
@@ -48,35 +48,35 @@
width: 8px;
height: 8px;
border-radius: 50%;
background: #555;
background: #3f3f46;
flex-shrink: 0;
}
.dot.connected { background: #4ade80; }
.dot.error { background: #f87171; }
.dot.connected { background: #22C55E; }
.dot.error { background: #EF4444; }
.dot.reconnecting {
background: #fbbf24;
animation: pulse 1.5s ease-in-out infinite;
background: #F59E0B;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.status-text { color: #888; font-size: 12px; }
.status-text.connected { color: #4ade80; }
.details { color: #666; font-size: 11px; margin-top: 2px; }
.status-text { color: #A1A1AA; font-size: 12px; }
.status-text.connected { color: #22C55E; }
.details { color: #52525B; font-size: 11px; margin-top: 2px; }
button {
width: 100%;
margin-top: 12px;
padding: 8px;
background: #0a2a14;
border: 1px solid #4ade80;
border-radius: 4px;
color: #4ade80;
background: rgba(245, 158, 11, 0.1);
border: 1px solid #F59E0B;
border-radius: 8px;
color: #FBBF24;
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
transition: all 150ms;
}
button:hover { background: #0f3a1c; }
button:hover { background: rgba(245, 158, 11, 0.2); }
</style>
</head>
<body>