CSS variables
The app exposes these CSS custom properties on :root.
Themes and plugin styles can use them so colours follow light/dark
mode (data-theme="light" or
data-theme="dark" on <html>).
| Variable |
Use |
--primary
|
Primary accent (links, buttons) |
--primary-hover |
Hover state for primary |
--primary-rgb |
Primary as RGB tuple (e.g. for rgba) |
--danger |
Danger / error colour |
--warning |
Warning colour |
--success |
Success colour |
--bg |
Page background |
--bg-light |
Lighter background (cards, inputs) |
--bg-hover |
Hover background |
--border |
Border colour |
--border-light |
Lighter border |
--text-primary |
Main text |
--text-secondary |
Secondary / muted text |
--text-link |
Link colour |
--text-link-visited |
Visited link colour |
--text-cite |
Cite / URL text |
--text-snippet |
Snippet / description text |
--search-bar-bg |
Search bar background |
--search-bar-bg-hover |
Search bar hover |
--btn-bg |
Button background |
--btn-text |
Button text |
--overlay-bg |
Overlay background (e.g. modals) |
--white |
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 (plugins and extensions)
Reuse these app classes in your plugin or theme HTML/CSS so output
matches the UI and benefits from the same variables and layout. Prefer
them over inventing new classes when the meaning fits.
Bang command and result output
| Class |
Use |
.command-result |
Wrapper for bang command HTML (injected into results) |
.result-item |
Single result row (e.g. list items in a command) |
.result-item-inner |
Inner wrapper of a result row |
.result-body |
Result text block |
.result-title |
Result title / link |
.result-snippet |
Result snippet or description |
.result-cite |
URL or cite line |
.result-url-row |
Row showing 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 glance |
.results-slot |
Slot wrapper in results |
.results-slot--above-sidebar |
Slot above main sidebar content |
.results-slot--below-sidebar |
Slot below 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 |
.btn--primary |
Primary action |
.btn--secondary |
Secondary action |
.btn--danger |
Destructive action |
Forms and extension settings
If you render settings-like forms in plugin UI, these align with
Settings → Plugins/Themes/Engines 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 (images / video)
For plugins that display image or video grids (e.g. custom tab
results):
| 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 in !help-style output |
.help-row |
Row in help list |
.help-trigger |
!trigger text |
.help-name |
Command name |
.pagination |
Pagination wrapper |
.pagination-link |
Page link |
Use .command-result as the outer wrapper for bang command
HTML so spacing matches the results page. Scope your own classes (e.g.
.my-plugin-card) under it to avoid clashes.