Własny CSS i czcionka baneru

Zakładka Wygląd baneru → Własny CSS pozwala dopasować baner do identyfikacji Twojej strony ponad ustawienia kolorów i układu: własnym arkuszem CSS oraz czcionką, także kupioną czcionką brandową, której używa Twoja strona.

Czcionka baneru

Wybierz jeden ze stacków systemowych albo opcję Własna… i wpisz nazwę czcionki dokładnie taką, jak w @font-face Twojej strony, z fallbackiem, np.:

Kod

Swiza, sans-serif

Czcionka nie jest importowana z zewnątrz: baner używa czcionek już załadowanych przez Twoją stronę. To celowe: dzięki temu baner nie wysyła żadnych zapytań do zewnętrznych serwerów czcionek (np. Google Fonts), co miałoby znaczenie dla prywatności odwiedzających. Jeśli czcionki nie ma na stronie, baner użyje fallbacku ze stacka.

Podgląd w panelu nie ma dostępu do czcionek Twojej strony, więc własną nazwę zweryfikujesz na stronie po zapisie (zmiany docierają do ~20 minut). Stacki systemowe widać w podglądzie od razu.

Własny CSS

Reguły trafiają do okna baneru oraz pływającego przycisku zgody. Dwie zasady, bez których nadpisania nie zadziałają:

Zaczynaj selektory od #cmp-container. Style bazowe baneru używają tego prefiksu, więc sama klasa z nimi przegrywa.
Dodawaj !important tam, gdzie styl bazowy też go ma (większość właściwości).

Przykład:

Kod

#cmp-container .cmp-modal { border-radius: 0 !important }
#cmp-container .cmp-footer button { text-transform: uppercase }

Pełna lista dostępnych selektorów jest w panelu, pod edytorem („Dostępne klasy i selektory").

Zmienne motywu

Rozmiary i geometrię okna baneru zmienisz zmiennymi motywu. Działają zawsze, bez !important:

Kod

#cmp-container {
  --cmp-modal-bg: #0f172a;
  --cmp-modal-radius: 0;
  --cmp-modal-shadow: none;
  --cmp-modal-max-width: 640px;
  --cmp-btn-font-size: 14px;
  --cmp-btn-font-weight: 700;
}

Pełna lista zmiennych z opisami jest w panelu, pod listą selektorów.

Co jest usuwane przy zapisie

Ze względów bezpieczeństwa i prywatności odwiedzających sanityzacja usuwa z CSS:

@import (ładowanie zewnętrznych arkuszy jest zablokowane),
url() ze schematem innym niż http(s) i data:image (np. javascript:),
przestarzałe konstrukcje IE (expression(), behavior:, -moz-binding),
komentarze /* … */,
nadmiar ponad 10 000 znaków (przycięcie z ostrzeżeniem).

O każdym usunięciu panel informuje ostrzeżeniem pod edytorem i przy zapisie.

Ograniczenia

Pływający przycisk (.cmp-float-button) i jego okienko (.cmp-float-popup) żyją w osobnym kontenerze: selektorem bazowym jest tam :host, a nadpisania wymagają !important.
Placeholder zablokowanej treści (np. niezaakceptowany film) stylujesz klasami .cmp-ph, .cmp-ph-title, .cmp-ph-text, .cmp-ph-btn, .cmp-ph-link. Uwaga: placeholder jest odizolowany od stylów strony, więc stylowanie zaczyna się od zera.
Przyciski stopki dziedziczą czcionkę baneru; ich rozmiar i grubość zmienisz zmiennymi --cmp-btn-font-size i --cmp-btn-font-weight.