Styling

CSS variables

Set them on the qsm-consent-kit element:

qsm-consent-kit {
    --qsm-ck-bg: #001622;      --qsm-ck-fg: #ffffff;
    --qsm-ck-accent: #ffffff;  --qsm-ck-accent-fg: #001622;
    --qsm-ck-font: Montserrat, sans-serif;
    --qsm-ck-radius: 0;        --qsm-ck-max-width: 80rem;
}

The plugin's defaults are declared on that element at zero specificity, so a rule on qsm-consent-kit wins in any stylesheet order. The dark scheme is the exception: it replaces the base palette with --qsm-ck-dark-*, whatever a rule on qsm-consent-kit sets. A value set on an ancestor does not reach them.

Base palette

Every other colour derives from these six.

Dark scheme

The dark scheme replaces the six with a palette of its own, used by colorScheme: 'dark' and by 'auto' under a dark system preference:

qsm-consent-kit {
    --qsm-ck-dark-bg: #001622;     --qsm-ck-dark-fg: #ffffff;
    --qsm-ck-dark-accent: #84bf41; --qsm-ck-dark-accent-fg: #001622;
}

Also --qsm-ck-dark-rule, --qsm-ck-dark-hover, --qsm-ck-dark-shadow. Defaults: #18181b background, #f4f4f5 text.

A variable set outside the palette applies to both schemes. Expressed in terms of the palette, it follows the scheme:

qsm-consent-kit {
    --qsm-ck-accent: #00753a;
    --qsm-ck-dark-accent: #84bf41;
    --qsm-ck-choice-bg: var(--qsm-ck-accent);
}

A fixed value for dark only:

qsm-consent-kit[data-scheme='dark'] { --qsm-ck-choice-bg: #84bf41 }

@media (prefers-color-scheme: dark) {
    qsm-consent-kit[data-scheme='auto'] { --qsm-ck-choice-bg: #84bf41 }
}

Other variables

Each default derives from the base palette and the scale.

• --qsm-ck-title-size applies to both titles only once set.
• --qsm-ck-head-padding-inline defaults to --qsm-ck-categories-padding; --qsm-ck-head-padding sets both axes and wins over them.
• --qsm-ck-choice-* default to the matching --qsm-ck-button-*.
• --qsm-ck-reopen-opacity dims the reopen tab while idle.

Scale

Every length is a multiple of --qsm-ck-scale, default clamp(14px, 1rem, 1.5rem). --qsm-ck-size, the body text, is 0.9375 of it. --qsm-ck-max-height caps the manage panel, 85dvh by default; only its category list scrolls.

qsm-consent-kit { --qsm-ck-scale: 18px; }

Close button

The cross is drawn with two strokes. For the × character instead:

qsm-consent-kit {
    --qsm-ck-close-glyph-size: calc(var(--qsm-ck-scale) * 1.5);
    --qsm-ck-close-cross-size: 0;
}

Focus ring

The focus rules carry !important. Restyle them through --qsm-ck-focus-ring, or with !important in the site's own rule. The video facade renders outside qsm-consent-kit and reads --qsm-ck-video-focus-ring, set on .qsm-ck-video-button or an ancestor.

Checkboxes under a form reset

A reset setting appearance: none on checkboxes (@tailwindcss/forms) needs the colour set too:

.qsm-ck .qsm-ck-checkbox { color: var(--qsm-ck-checkbox-color); }

Display mode

displayMode places the banner at the bottom of the screen, fixed unless reserveSpace is on (see below):

Under 40rem every mode is full. The reopen tab takes the side set by reopenPosition; with auto, the right in corner-right and the left otherwise. --qsm-ck-reopen-offset is its distance to that edge. The box's corners follow --qsm-ck-box-radius, which defaults to --qsm-ck-radius capped at 0.75 of the scale: fully round buttons leave the box only slightly rounded.

qsm-consent-kit {
    --qsm-ck-box-width: 24rem;
    --qsm-ck-offset: 1rem;
}

Keeping the end of the page visible

A fixed banner covers the bottom of the page: the footer stays behind it until the visitor decides. With reserveSpace on, the full-width banner is sticky instead, so it takes its own height at the end of the page and covers nothing. Its height animates in place of the slide and the fade, so that space opens and closes with the banner. It applies to full, and to every mode under 40rem; the boxes of the other modes stay fixed.

The banner must sit at the end of <body>, where autoInject puts it: a sticky element only travels within its parent. Below the body, while the space closes at the end of the page or when the page bounces, the browser shows the <html> background. Give it the footer's colour so nothing white shows:

html { background: var(--footer-bg); }

Several sites, several styles

Each site sets the variables in its own stylesheet. Sites sharing a stylesheet set them under a selector of their own:

.site-a qsm-consent-kit { --qsm-ck-accent: #00753a; }
.site-b qsm-consent-kit { --qsm-ck-accent: #b3261e; }

Classes

.qsm-ck .qsm-ck-button { text-transform: uppercase; }

qsm-ck is the container; every other class sits inside it.

Banner — qsm-ck-root qsm-ck-banner qsm-ck-title qsm-ck-body qsm-ck-text qsm-ck-link (+ --policy) qsm-ck-actions qsm-ck-button (+ --choice --accept --refuse --manage --save) qsm-ck-reopen

Manage panel — qsm-ck-dialog (+ -inner -head -title -actions) qsm-ck-close qsm-ck-categories qsm-ck-category qsm-ck-category-desc qsm-ck-switch qsm-ck-switch-label qsm-ck-checkbox qsm-ck-always qsm-ck-details (+ -toggle -inner) qsm-ck-table qsm-ck-gpc qsm-ck-status

Video facade — qsm-ck-video qsm-ck-video-poster (+ --empty) qsm-ck-video-scrim qsm-ck-video-button qsm-ck-video-play (+ -bg -arrow) qsm-ck-video-text qsm-ck-video-title qsm-ck-video-cta qsm-ck-video-notice

The cookie table rendered inside a page carries its own classes, which a site chooses — see Privacy policy.

qsm-ck-video-scrim is the veil over a fetched thumbnail; it is rendered only when a poster is present.

The plugin's rules are written .qsm-ck :where(.qsm-ck-*), specificity 0-1-0. A rule written .qsm-ck .qsm-ck-* (0-2-0) overrides them.

Safe areas

The banner, the reopen tab and the manage panel keep clear of the device's safe areas. The insets are non-zero only on a page that declares:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">