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.

Generic UI classes (degoog-*)

The main UI is moving toward a small set of generic degoog-* classes. Templates often keep the older specific classes for backwards compatibility, but the styling should be driven by these generic classes and their modifiers.

Modifiers follow a BEM-like pattern: .degoog-thing + .degoog-thing--variant.

Class	Use
`.degoog-panel`	Card/panel wrapper (background, border, shadow)
`.degoog-panel--accordion`	Accordion wrapper panel (no default padding)
`.degoog-panel--slot`	Slot panel wrapper (grid sizing, no default padding)
`.degoog-panel--slot-title`	Slot panel title block
`.degoog-panel--slot-body`	Slot panel body typography (no padding by default)
`.degoog-panel--slot-body-padded`	Slot body padding when the content needs it
`.degoog-search-bar`	Search bar shell (icon + input)
`.degoog-search-bar--square`	Less-rounded search bar variant
`.degoog-dropdown`	Floating dropdown container
`.degoog-dropdown--menu`	Menu sizing for dropdowns
`.degoog-dropdown--submenu`	Submenu sizing for dropdowns
`.degoog-accordion`	Accordion wrapper - adds `.open` toggle behaviour and chevron rotation
`.degoog-accordion-body`	Hidden accordion body, shown when parent has `.open`
`.degoog-accordion-body--flex`	Flex variant of the accordion body (for when `display: flex` is needed on open)
`.degoog-accordion-toggle`	Accordion trigger button
`.degoog-tab`	Tab button (active state, hover)
`.degoog-menu-item`	Button-like list item (hover/focus)
`.degoog-menu-item--option`	Option rows (active checkmark)
`.degoog-input`	Text input styling
`.degoog-input--tools`	Tools dropdown input variant
`.degoog-badge`	Small badge/pill
`.degoog-icon-btn`	Icon-only button
`.degoog-drag-handle`	Grab handle for drag-to-reorder lists (see helper below)
`.degoog-dragging`	Added by the helper to the item being dragged
`.degoog-drag-active`	Added by the helper to the list while a drag is in progress

Note: the app still contains older, more specific classnames (for example .result-*, .glance-*, .btn*) and they may still have styling while the transition is ongoing. They are not considered a stable styling API for themes/plugins. Prefer the degoog-* classes and modifiers above.

Theme template migration (append-only)

Theme templates can keep their legacy classes and append the generic degoog-* classes (and modifiers) so they pick up the built-in UI styling without breaking older selectors.

DRY_RUN=1 bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme
bash scripts/theme-append-degoog-classes.sh data/themes/MyTheme

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
`.degoog-input`	Text inputs and textareas
`.degoog-select-wrap`	Select wrappers (adds chevron)
`.degoog-toggle-wrap`	Toggle rows
`.degoog-toggle`	Toggle slider (pill)
`.degoog-checkbox-wrap`	Checkbox rows, for dense multi-option lists (see below)
`.degoog-checkbox`	Checkbox square
`.degoog-panel`	Panels/cards used across settings and modals

Layout and chrome

Use the degoog-* classes above for UI elements you want to look consistent with the built-in theme.

Grid-System

A lightweight, CSS-Grid-based 12-column layout system used to build for example widgets (translate boxes, knowledge panels, "at a glance" cards, etc.) in the degoog.

1. Core Concept

The container gets degoog-grid; its direct children are placed across the 12 columns via col-* classes.

<section class="degoog-grid">
  <div class="col-8">Search results</div>
  <div class="col-4">Knowledge panel</div>
</section>

Rules:

col-* classes work only on direct children of .degoog-grid.
Columns per row should add up to 12; exceeding it wraps to the next row.
Default gaps: .75rem horizontal and vertical.

2. Column Widths (`col-1`–`col-12`)

Each column spans N of the 12 tracks (grid-column: span N).

<!-- Result list beside a side panel -->
<section class="degoog-grid">
  <div class="col-8">Result list</div>
  <div class="col-4">Wikipedia summary</div>
</section>

<!-- Full-width widget (e.g. translate box on top) -->
<section class="degoog-grid">
  <div class="col-12">Translate widget</div>
</section>

Auto-wrapping when totals exceed 12:

<section class="degoog-grid">
  <div class="col-8">Map widget</div>
  <div class="col-8">Wraps to next row (8 + 8 > 12)</div>
</section>

3. Responsive Behavior

Mobile-first breakpoints; a larger breakpoint overrides smaller ones.

Prefix	From	Target
`col-*`	`0px`	Mobile
`col-sm-*`	`≥ 480px`	Large phones
`col-md-*`	`≥ 780px`	Tablets
`col-lg-*`	`≥ 1024px`	Desktop

Stack classes to change width per breakpoint:

<!-- Side panel sits below results on mobile, beside them on desktop -->
<section class="degoog-grid">
  <main class="col-12 col-lg-8">Search results</main>
  <aside class="col-12 col-lg-4">Knowledge panel</aside>
</section>

Widget grid that reflows from 1 → 2 → 4 per row:

<section class="degoog-grid">
  <div class="col-12 col-sm-6 col-lg-3">Weather</div>
  <div class="col-12 col-sm-6 col-lg-3">Currency</div>
  <div class="col-12 col-sm-6 col-lg-3">Time zone</div>
  <div class="col-12 col-sm-6 col-lg-3">Calculator</div>
</section>

4. Visibility (`hidden` / `show`)

Toggle rendering per breakpoint via display.

Class	Effect
`col-hidden`	`display: none`
`col-show`	`display: block`
`col-md-hidden`	Hidden from `≥ 780px`
`col-lg-show`	Shown from `≥ 1024px`

<section class="degoog-grid">
  <!-- Knowledge panel: hidden on mobile, shown from desktop -->
  <main class="col-12 col-lg-8">Results</main>
  <aside class="col-hidden col-lg-show col-lg-4">Knowledge panel</aside>
</section>

col-show resets to display: block — use it to re-enable an element hidden at a smaller breakpoint.

5. Horizontal Alignment (`left` / `center` / `right`)

Aligns content inside its cell (justify-self) when it's narrower than the column. Responsive variants exist (col-md-right, etc.).

Class	Alignment
`col-left`	start
`col-center`	center
`col-right`	end

<!-- Translate widget: "swap languages" button centered, action right -->
<section class="degoog-grid">
  <div class="col-6 col-center">↔ Swap languages</div>
  <div class="col-6 col-right">Listen 🔊</div>
</section>

6. Container Modifiers

`degoog-grid--no-gap` — removes all gaps

<!-- Seamless image-result strip -->
<section class="degoog-grid degoog-grid--no-gap">
  <div class="col-3"><img src="1.jpg" alt=""></div>
  <div class="col-3"><img src="2.jpg" alt=""></div>
  <div class="col-3"><img src="3.jpg" alt=""></div>
  <div class="col-3"><img src="4.jpg" alt=""></div>
</section>

`degoog-grid--vertical-align-center` — vertically centers columns

<!-- Knowledge panel: thumbnail centered against its text -->
<section class="degoog-grid degoog-grid--vertical-align-center">
  <div class="col-4"><img src="thumb.jpg" alt=""></div>
  <div class="col-8">Wikipedia summary text</div>
</section>

7. Complete Example: Search Results Page

<section class="degoog-grid degoog-grid--vertical-align-center">

  <!-- Translate widget on top, full width -->
  <div class="col-12">Translate: "hola" → "hello"</div>

  <!-- Results column + knowledge panel -->
  <main class="col-12 col-lg-8">Search result list</main>
  <aside class="col-hidden col-lg-show col-lg-4">Knowledge panel</aside>

  <!-- "At a glance" mini-widgets: 1 → 2 → 4 per row -->
  <div class="col-12 col-sm-6 col-lg-3">Weather</div>
  <div class="col-12 col-sm-6 col-lg-3">Currency</div>
  <div class="col-12 col-sm-6 col-lg-3">Sports score</div>
  <div class="col-12 col-sm-6 col-lg-3">Stock price</div>

</section>

8. Best Practices & Gotchas

Always set a base col-* (e.g. col-12) so mobile behavior is explicit.
Keep rows summing to 12 for predictable layouts; intentional overflow wraps.
Direct children only — nest a new .degoog-grid for sub-grids inside a widget.
col-show needs a prior hidden to act as a reveal toggle.
Alignment helpers only matter when content is narrower than its column.

9. Quick Reference

Category	Base	sm (≥480)	md (≥780)	lg (≥1024)
Width	`col-1…12`	`col-sm-1…12`	`col-md-1…12`	`col-lg-1…12`
Hide	`col-hidden`	`col-sm-hidden`	`col-md-hidden`	`col-lg-hidden`
Show	`col-show`	`col-sm-show`	`col-md-show`	`col-lg-show`
Align left	`col-left`	`col-sm-left`	`col-md-left`	`col-lg-left`
Align center	`col-center`	`col-sm-center`	`col-md-center`	`col-lg-center`
Align right	`col-right`	`col-sm-right`	`col-md-right`	`col-lg-right`

Container modifiers: degoog-grid--no-gap, degoog-grid--vertical-align-center

Drag-to-reorder helper

The app exposes a small, dependency-free drag-to-reorder helper on window.__degoogDrag. It is the same helper used by the built-in plugins list and the tab-order dialog, so your lists get the exact same feel (finger-following on touch, smooth slide animations, no text selection while dragging). It works on desktop and mobile because it is built on Pointer Events.

You provide a list element, a selector for the items inside it, a selector for the grab handle, and an onReorder callback. The helper reorders the DOM live; when the user drops an item it calls onReorder with the list and the moved item so you can persist the new order.

Option	Use
`itemSelector`	Selector matching each reorderable child of the list
`handleSelector`	Selector for the grab handle inside each item (drag only starts from here)
`onReorder(list, item)`	Called after a drop; DOM order is already final. Read it and persist.

Give your handle the degoog-drag-handle class so it picks up the standard grip styling (and the touch-action needed for reliable mobile dragging). The helper adds degoog-dragging to the active item and degoog-drag-active to the list while dragging.

<ul id="my-list">
  <li class="my-row" data-id="a">
    Item A
    <span class="degoog-drag-handle" data-drag-handle>
      <i class="fa-solid fa-grip-vertical"></i>
    </span>
  </li>
  <!-- more rows... -->
</ul>

<script>
  const list = document.getElementById("my-list");
  window.__degoogDrag.init(list, {
    itemSelector: ".my-row",
    handleSelector: "[data-drag-handle]",
    onReorder: (el) => {
      const order = Array.from(el.querySelectorAll(".my-row"))
        .map((row) => row.dataset.id);
      // persist `order` however your plugin stores it
    },
  });
</script>

Note: window.__degoogDrag is available on the main search page (where plugin and theme scripts run). Call init once per list after it is in the DOM.

Degoog Styling