cookr-css-docs – COOKR – Consent Infrastructure for Modern Websites

CSS Selector Reference — COOKR

Cascade & Rules

Styles are applied in this order:

1. Base banner CSS (cookr.css defaults)
2. Native accent styling (colour picker — active only when no preset/custom CSS is loaded)
3. Scoped Banner Styling / preset CSS — applied last, always wins

Hover, focus, and active states on buttons and links inherit from your custom CSS unless explicitly defined otherwise. Define :hover and :focus rules in your preset to ensure consistent interactive behaviour.

Not supported: @media queries · :has() · sibling combinators + ~ · selectors not starting with #cookr- or .cookr- · @import · url() · :root (except --cookr-* variables)

Preview = Frontend. The admin preview uses the same banner rendering logic as the live site. Valid COOKR selectors render identically in the preview pane and on the live frontend. What you see in the preview is what visitors see.

Preset Philosophy

Presets are self-contained visual systems — not accent-driven skins.

A well-authored preset:
· defines all colours explicitly (background, text, buttons, links, borders)
· does not rely on the colour picker or external state
· sets --cookr-accent on #cookr-banner, #cookr-reopen for any accent-driven elements
· renders identically in the website preview, the plugin admin preview, and on the live frontend

When a preset is loaded, the accent colour picker is disabled. The preset owns all styling.

Preferred accent pattern:

#cookr-banner, #cookr-reopen { --cookr-accent: #00ff88; }

This sets the accent at banner scope — not :root — ensuring the preset variable wins over any system-level accent injection.

Banner

Selector	Targets	Category
#cookr-banner	Outer banner container — background, border, shadow, border-radius	layout
.cookr-inner	Inner content wrapper — padding	layout
.cookr-title	Banner heading + info icon. Setting `color` here also affects the SVG icon via `currentColor` inheritance.	visual
.cookr-body	Description paragraph	visual
.cookr-links	Privacy / imprint link wrapper	layout
.cookr-links a	Individual privacy / imprint links	visual

Buttons

Selector	Targets	Category
.cookr-buttons	Button group container — gap, layout	layout
.cookr-btn	Base class on all buttons — font, padding, border-radius	visual
#cookr-banner .cookr-btn-accept	Accept all button. Use the banner-scoped form to reliably beat base resets.	visual
#cookr-banner .cookr-btn-decline	Decline all button	visual
#cookr-banner .cookr-btn-save	Save selection button (preferences panel)	visual
.cookr-prefs-link	Open / close preferences link	visual
.cookr-btn-accept:hover .cookr-btn-accept:focus	Interactive states — define explicitly to avoid unexpected hover colour bleed from theme resets	state
.cookr-btn-decline:hover .cookr-btn-decline:focus	Interactive states for decline button	state

Preferences Panel

Selector	Targets	Category
.cookr-preferences	Collapsible preferences panel container	layout
.cookr-toggles	Toggle rows container	layout
.cookr-toggle-row	Single category toggle row	layout
.cookr-toggle-label	Category label and description text	visual
.cookr-switch	Toggle switch element	visual
.cookr-slider	Toggle slider pill — background colour driven by `--cookr-accent` when checked	visual

Reopen Button

Selector	Targets	Category
#cookr-reopen	Minimised reopen button (pill toggle mark)	visual
.cookr-reopen-dot	Filled circle inside the reopen button. Set `fill` to match your accent colour.	visual

Accent Colour Variable

Set the accent at banner scope — not :root — to ensure it wins over system-level injection:

#cookr-banner, #cookr-reopen { --cookr-accent: #F5C418; }

This is the correct pattern for presets. All accent-driven elements (accept button, slider, reopen dot, links) respond to this variable automatically when native styling is active. In presets, define colours explicitly rather than relying on the variable alone.

Only --cookr-* custom properties are permitted on :root.

SVG Icon Inheritance

The info icon in the banner title inherits its colour via currentColor.

Setting color on .cookr-title automatically changes the icon colour:

.cookr-title { color: #00ff88; }

No separate icon selector needed. This applies in both the admin preview and on the live frontend.

Hover & Focus States

Hover, focus, and active states on buttons and links inherit from your preset CSS. If not explicitly defined, the browser or theme may apply unexpected colours or backgrounds — particularly in page builders like Elementor.

Always define interactive states explicitly in your preset for: buttons, privacy/imprint links, and the preferences link.

/* Define hover/focus states explicitly */

#cookr-banner .cookr-btn-accept:hover,
#cookr-banner .cookr-btn-accept:focus {
  background: #00cc70;
  outline: none;
}

#cookr-banner .cookr-btn-decline:hover,
#cookr-banner .cookr-btn-decline:focus {
  border-color: rgba(255,255,255,0.5);
  outline: none;
}

/* Privacy / imprint links — Datenschutz / Impressum */
#cookr-banner .cookr-links a:hover,
#cookr-banner .cookr-links a:focus {
  opacity: 1;
  background: transparent !important;
  outline: none;
}

/* Einstellungen anpassen / preferences link */
#cookr-banner .cookr-prefs-link:hover,
#cookr-banner .cookr-prefs-link:focus {
  color: rgba(255,255,255,0.8);
  background: transparent !important;
  outline: none;
}
    

Example — Complete Preset

/* Self-contained preset — dark theme with teal accent */

#cookr-banner, #cookr-reopen { --cookr-accent: #00a7b5; }

#cookr-banner {
  background: #0d1f2d;
  border: 1px solid rgba(0,167,181,0.2);
  border-top: 2px solid var(--cookr-accent);
  border-radius: 12px;
  color: #e8f4f5;
}

/* Title — color also sets the info icon via currentColor */
.cookr-title { color: #e8f4f5; }
.cookr-body  { color: rgba(232,244,245,0.65); }

#cookr-banner .cookr-btn-accept {
  background: var(--cookr-accent);
  color: #ffffff;
  border-color: transparent;
}

#cookr-banner .cookr-btn-accept:hover,
#cookr-banner .cookr-btn-accept:focus {
  background: #009aaa;
  outline: none;
}

#cookr-banner .cookr-btn-decline {
  background: transparent;
  color: rgba(232,244,245,0.65);
  border: 1px solid rgba(0,167,181,0.25);
}

.cookr-reopen-dot { fill: var(--cookr-accent); }
    