CSS Customization Reference

The Mine CMP banner is fully customizable with CSS. This article documents every CSS variable, ID, class, and data attribute exposed by the banner so developers can apply styling that goes beyond what is available in the CMP UI.

Customization methods

There are three ways to customize the banner's appearance:

1. Style Configuration — use the style object in your configuration for colors, fonts, and button styling. This is the simplest option and is managed through the CMP UI.
2. Custom CSS — provide additional CSS via the customCss banner property. This is appended after the generated style configuration and lets you apply rules that aren't exposed in the UI.
3. Direct CSS Targeting — write your own stylesheets that target the CMP's well-defined IDs and classes from elsewhere on your site.

How styling is applied

1. The CMP generates a base stylesheet from the style configuration object (colors, fonts, corner radius, etc.).
2. If customCss is provided in the banner config, it is appended after the generated CSS.
3. customCss takes precedence in case of conflicts via the standard CSS cascade.
4. customCss is not validated — invalid CSS is the customer's responsibility.

All configuration content is sanitized before use to prevent XSS attacks.

Content Security Policy

If your site uses a strict CSP, customCss requires either style-src: 'unsafe-inline' or a nonce-based approach for inline styles to apply.

Banner structure

The CMP uses consistent naming conventions for banner elements. All IDs and classes are prefixed with cmp- to avoid conflicts with host site styles.

Each layer follows a header → body → footer structure for predictable CSS targeting:

• Header — contains the title
• Body — contains the main content (the message on the first layer, the categories on the second layer)
• Footer — contains the action buttons

The second layer adds an expandable hierarchy inside its body: categories → providers → cookies.

CSS variables

The CMP exposes CSS custom properties for easy theming. Override them on a specific layer or globally:

#cmp-first-layer,
#cmp-second-layer {
    --cmp-primary-color: #6366f1;
    --cmp-primary-color-hover: #4f46e5;
    --cmp-background-color: #ffffff;
    --cmp-text-color: #1f2937;
    --cmp-border-radius: 8px;
    --cmp-font-family: 'Inter', sans-serif;

    --cmp-primary-btn-bg: #10b981;
    --cmp-primary-btn-text: #ffffff;
    --cmp-secondary-btn-bg: transparent;
    --cmp-secondary-btn-text: #10b981;
}

Colors

Button colors

Typography

Spacing

Border

Other

Element IDs

Every major element in each layer has a stable ID for direct targeting.

First layer

Second layer

Categories and providers

CSS classes

Use classes when you want to target a group of similar elements rather than one specific element.

Layout

Structure

Buttons

Primary buttons (Allow All, Deny All, Allow Selection) are filled. Secondary buttons (Customize) are outlined.

Categories

Toggle switch

Providers

Cookies

States

Data attributes

Data attributes are useful for selecting elements by semantic meaning rather than ID — particularly for providers and cookies, where the rendered name may not be predictable.

For example, you can target all marketing categories regardless of how the rest of the markup changes:

[data-cmp-category="Marketing"] {
    border-left: 3px solid #f59e0b;
}

Examples

Example 1: Change button colors

/* Target all CMP primary buttons */
.cmp-btn-primary {
    background-color: #10b981 !important;
}

/* Target one specific button */
#cmp-first-layer-btn-accept-all {
    background-color: #22c55e !important;
}

Example 2: Custom styling for a specific category

/* Highlight the marketing category */
#cmp-category-marketing {
    border-left: 3px solid #f59e0b;
    background-color: #fffbeb;
}

Example 3: Different styles per layer

/* First layer - minimal style */
#cmp-first-layer {
    --cmp-background-color: #f8fafc;
}

/* Second layer - more prominent */
#cmp-second-layer {
    --cmp-background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

Example 4: Using the header / body / footer structure

/* Style sections separately */
#cmp-first-layer .cmp-header {
    border-bottom: 1px solid var(--cmp-border-color);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

#cmp-first-layer .cmp-footer {
    border-top: 1px solid var(--cmp-border-color);
    padding-top: 16px;
    margin-top: 16px;
}