--bg:#0b1220; --panel:#111a2e; --panel2:#16223c; --line:#1e2c49;

WHAT IT DOES

This userscript adds a floating CSS Variables Inspector panel to any webpage that analyzes all CSS custom properties (variables) from the page's stylesheets. It displays each variable's name, current value, and the stylesheet it originates from. Variables that are overridden (defined with different values across multiple stylesheets or rules) are highlighted to help identify cascading conflicts. A search filter allows you to quickly find specific variable names. You can copy individual variable definitions or the entire variable set to the clipboard. The panel also shows which variables are referenced elsewhere in the page's stylesheets, helping you understand dependency relationships. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state.

WHERE IT RUNS

The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with CSS variable inspection and debugging.

HOW TO USE

The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "CSS Variables" section displays all variables found on the page. Use the search input to filter variables by name. Click "Refresh" to re-scan the page for variables after dynamic stylesheet changes. Click "Copy All" to copy all variable definitions to your clipboard. Each variable entry shows its name, value(s) from each stylesheet, and the selector where it's defined. Overridden variables are marked with a red "(overridden)" badge. The "Used in" section shows which selectors reference the variable. Click the "Copy" button on any variable to copy its definition to your clipboard.

STYLESHEET PARSING AND VARIABLE ANALYSIS WITH USAGE TRACKING

The script reads all stylesheets from the page using document.styleSheets, iterating through each CSSRule to extract custom properties (identifiers starting with "--"). It tracks each variable's value and the specific selector and stylesheet where it appears, building a comprehensive map of variable definitions. The script also scans rule style text using a regular expression to find var() references, building a usage map that shows which selectors reference each variable. This dual analysis provides both definition and consumption insights. Variables that appear with different values across multiple locations are flagged as overridden. The script handles cross-origin stylesheets gracefully, skipping those that cannot be accessed due to security restrictions. The search filter operates on variable names in real time, using a case-insensitive match against the full variable name.

THE PANEL

The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The variables list has a maximum height of 300px with internal scrolling.

PLEASE NOTE

Requires the free BotGentz extension to run. The script cannot access cross-origin stylesheets due to browser security restrictions—these will be skipped. The "Used in" section shows where var() references appear, not computed usage—a variable may be referenced but not actually applied if overridden. The script does not collect, store, or transmit any personal data. All variable data is read from the page and displayed locally. Some dynamically injected styles may not appear until the "Refresh" button is clicked.