Styling — Degoog docs

CSS variables

The application exposes several CSS custom properties on the :root element. You can use these in your themes and plugin styles to ensure your colors automatically adapt to light or dark modes (using data-theme="light" or data-theme="dark" on the <html> tag).

Variable	Use
`--primary`	Primary accent for links and buttons
`--primary-hover`	Hover state for primary elements
`--primary-rgb`	Primary color as an RGB tuple
`--danger`	Danger or error color
`--warning`	Warning color
`--success`	Success color
`--bg`	Page background
`--bg-light`	Lighter background for cards and inputs
`--bg-hover`	Hover background
`--border`	Border color
`--border-light`	Lighter border
`--text-primary`	Main text color
`--text-secondary`	Secondary or muted text
`--text-link`	Link color
`--text-link-visited`	Visited link color
`--text-cite`	Citation or URL text
`--text-snippet`	Snippet or description text
`--search-bar-bg`	Search bar background
`--search-bar-bg-hover`	Search bar hover state
`--btn-bg`	Button background
`--btn-text`	Button text color
`--overlay-bg`	Overlay background for modals
`--white`	Pure white

Example theme or plugin CSS

.my-panel {
          background: var(--bg-light);
          color: var(--text-primary);
          border: 1px solid var(--border);
        }
        .my-panel a {
          color: var(--text-link);
        }

Reusable classes

Try to reuse these built in classes in your plugin or theme HTML and CSS. This makes sure your output matches the main UI and benefits from the exact same layout structure. It is always better to use these instead of inventing new classes when the meaning fits perfectly.

Bang command and result output

Class	Use
`.command-result`	Wrapper for bang command HTML injected into results
`.result-item`	Single result row like list items in a command
`.result-item-inner`	Inner wrapper of a result row
`.result-body`	Result text block
`.result-title`	Result title or link
`.result-snippet`	Result snippet or description
`.result-cite`	URL or citation line
`.result-url-row`	Row showing the URL and favicon
`.result-thumbnail-wrap`	Thumbnail container

At a glance and slot panels

Class	Use
`.glance-box`	At a glance panel container
`.glance-snippet`	Glance content area
`.glance-link`	Link inside a glance panel
`.results-slot`	Slot wrapper within results
`.results-slot--above-sidebar`	Slot positioned above the main sidebar content
`.results-slot--below-sidebar`	Slot positioned below the main sidebar content
`.results-slot-panel`	Slot panel container
`.results-slot-panel-title`	Slot panel heading
`.results-slot-panel-body`	Slot panel content

Buttons

Class	Use
`.btn`	Base button styling
`.btn--primary`	Primary action button
`.btn--secondary`	Secondary action button
`.btn--danger`	Destructive action button

Forms and extension settings

If you are rendering settings forms in your plugin UI, these classes will align them perfectly with the standard Settings modals.

Class	Use
`.ext-field`	Field wrapper
`.ext-field-label`	Field label
`.ext-field-input`	Text input
`.ext-field-desc`	Field description
`.ext-modal`	Modal container
`.ext-modal-header`	Modal header
`.ext-modal-body`	Modal body
`.ext-modal-footer`	Modal footer

Layout and chrome

Class	Use
`.header`	Top header bar
`.header-link`	Header link
`.search-bar`	Search bar container
`.search-bar-action-btn`	Search bar action button
`.sidebar-panel`	Sidebar panel

Media elements

You can use these classes for plugins that display image or video grids.

Class	Use
`.image-grid`	Image grid container
`.image-card`	Single image card
`.image-thumb-wrap`	Thumbnail wrapper
`.image-title`	Image title
`.video-grid`	Video grid
`.video-card`	Single video card
`.video-duration`	Duration label

Help and tables

Class	Use
`.command-help-table`	Table layout for help menus
`.help-row`	Row within a help list
`.help-trigger`	Trigger text element
`.help-name`	Command name
`.pagination`	Pagination wrapper
`.pagination-link`	Page link

Make sure to use .command-result as the outer wrapper for your bang command HTML so the spacing matches the rest of the results page perfectly. You can easily scope your own classes underneath it to avoid any styling clashes.

Degoog Styling