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, pływającego przycisku z okienkiem zmiany zgody oraz placeholderów zablokowanej treści. Piszesz zwykły CSS na klasy baneru, bez prefiksów i bez !important: Twój arkusz stoi za stylami baneru, więc reguła o tej samej sile wygrywa kolejnością, a reguła silniejsza zawsze.

Przykład:

Kod

.cmp-modal { border-radius: 0 }
.cmp-btn { text-transform: uppercase }
.cmp-btn-accept:hover { background: #15803d }
.cmp-float-button { bottom: 96px }

Pełna lista klas z opisami jest w panelu, pod edytorem („Dostępne klasy i selektory"). Stany baneru też są dostępne z CSS: aktywna zakładka to .cmp-tab[aria-selected="true"], włączony przełącznik to .cmp-toggle[aria-checked="true"], a najechanie na przycisk to zwykłe :hover.

Jeśli masz starszy CSS pisany według dawnych zasad (prefiks #cmp-container i !important), nadal działa: prefiks tylko podnosi siłę reguły.

Zmienne motywu

Kolory i geometrię baneru zmienisz zmiennymi motywu, bez ruszania pojedynczych klas. Każdą grupę zmiennych ustawiasz na jednym elemencie:

Kod

/* okno baneru, kolory treści, przyciski zgody */
.cmp-container {
  --cmp-modal-bg: #0f172a;
  --cmp-modal-radius: 0;
  --cmp-color-text: #f9fafb;
  --cmp-color-primary: #38bdf8;
  --cmp-btn-accept-bg: #16a34a;
  --cmp-btn-accept-bg-hover: #15803d;
  --cmp-btn-font-size: 14px;
}

/* przyciemnienie strony: leży obok okna, więc ma własny element */
.cmp-overlay { --cmp-overlay-bg: rgba(0, 0, 0, 0.8) }

/* pływający przycisk i jego okienko; akcent i czcionkę przycisków powtórz tutaj */
.cmp-float-button { --cmp-float-btn-bg: #0f172a }
.cmp-float-popup {
  --cmp-float-popup-bg: #0f172a;
  --cmp-float-popup-text: #f9fafb;
  --cmp-color-primary: #38bdf8;
  --cmp-btn-font-size: 14px;
}

/* placeholder zablokowanej treści */
.cmp-ph { --cmp-ph-bg: #111827; --cmp-ph-btn-bg: #16a34a }

Zmieniając tło przycisku zmienną, ustaw też jego wersję po najechaniu (zmienna z końcówką -bg-hover): baner liczy domyślny hover z koloru ustawionego w panelu, nie z Twojej zmiennej. Stany po najechaniu, także Twoje własne reguły :hover, działają tylko na urządzeniach z myszą lub gładzikiem; na telefonach baner celowo ich nie pokazuje, żeby przycisk nie zostawał przyciemniony po dotknięciu.

Pełna lista zmiennych z opisami i przykładami jest w panelu, pod listą klas.

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 i odpowiedzialność

Własny CSS działa na Twoją odpowiedzialność: reguła, która ukryje okno baneru albo jego przyciski (np. opacity: 0 na .cmp-modal), zadziała tak samo jak każda inna i odbierze odwiedzającym możliwość wyrażenia zgody. To samo dotyczy dostępności: outline: none na przyciskach zdejmie obramówkę fokusu dla osób korzystających z klawiatury. Po zapisie sprawdź baner w podglądzie i na stronie.
Placeholder zablokowanej treści (np. niezaakceptowany film) jest odizolowany od stylów Twojej strony i stylowanie zaczyna się od zera; czcionkę dziedziczy z ustawienia czcionki baneru.
Nie używaj gołego :host w regułach: ten sam arkusz trafia do baneru, pływającego przycisku i każdego placeholdera, więc taka reguła ostyluje wszystko naraz.
Zmienne baneru możesz też ustawić z arkusza swojej strony, regułą na element #cmp-host z !important (np. #cmp-host { --cmp-modal-bg: #000 !important }), jeśli wolisz trzymać motyw baneru razem z motywem strony. Panel jest jednak prostszy: tam żadne !important nie jest potrzebne.