mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-02 03:35:09 +02:00
Garry Tan
f395f58406
Extension changes for the visual CSS inspector: - inspector.js: element picker with hover highlight, CSS selector generation, basic mode fallback (getComputedStyle + CSSOM), page alteration handlers - inspector.css: picker overlay styles (blue highlight + tooltip) - background.js: inspector message routing (picker <-> server <-> sidepanel) - sidepanel: Inspector tab with box model viz (gstack palette), matched rules with specificity badges, computed styles, click-to-edit quick edit, Send to Agent/Code button, empty/loading/error states Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
30 lines
798 B
CSS
30 lines
798 B
CSS
/* gstack browse — CSS Inspector overlay styles
|
|
* Injected alongside inspector.js into the active tab.
|
|
* Design system: amber accent, zinc neutrals.
|
|
*/
|
|
|
|
#gstack-inspector-highlight {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 2147483647;
|
|
background: rgba(59, 130, 246, 0.15);
|
|
border: 2px solid rgba(59, 130, 246, 0.6);
|
|
border-radius: 2px;
|
|
transition: top 50ms ease, left 50ms ease, width 50ms ease, height 50ms ease;
|
|
}
|
|
|
|
#gstack-inspector-tooltip {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 2147483647;
|
|
background: #27272A;
|
|
color: #e0e0e0;
|
|
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
|
|
font-size: 11px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
line-height: 18px;
|
|
}
|