# CSS-osztályok áttekintése

> A sütisáv, a gombok, a kategóriák, a dokumentumok és a „Hozzájárulás kezelése” gomb legfontosabb CSS-osztályai és azonosítói példákkal.

Ez a fejezet gyűjtőlap: témák szerint felsorolja azokat a szelektorokat, amelyekkel a sávot, a gombokat és a dokumentumokat egyéni CSS-sel alakíthatod. A CSS-t a **Complianz → Consent Banner → Custom CSS** fülre írd (előbb kapcsold be a **Use Custom CSS** beállítást), vagy a téma **További CSS** mezőjébe. A példák üres `{}` blokkjába írhatod a saját tulajdonságaidat.

## Sáv (Banner)

Az egész sáv azonosítója `#cmplz-cookiebanner-container`, osztálya `.cmplz-cookiebanner`. Az alapértelmezett megjelenés ilyen tulajdonságokból áll:

```css
.cmplz-cookiebanner {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(218, 218, 218);
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 40%) 0px 0px 10px;
}
```

## Keretek (Borders)

```css
/* a sáv kerete */
.cmplz-cookiebanner {
  border: 1px solid black;
  border-radius: 50px;
}
```

## Gombok (Buttons)

| Szelektor | Melyik elem |
| --- | --- |
| `.cmplz-accept` | az elfogadó gomb |
| `.cmplz-deny` | az elutasító (elvető) gomb |
| `.cmplz-save-preferences`, `.cmplz-view-preferences` | a beállítások mentése és megnyitása |
| `.cmplz-btn` | az összes gomb |
| `.cmplz-btn:hover` | az összes gomb, ha fölé viszed az egeret |

```css
.cmplz-accept {
  background-color: blue;
  font-size: 1em;
  color: white;
  border: 1px solid black;
  padding: 5px;
}
```

## Betűtípusok (Fonts)

Az egész sávra, a hivatkozásokra vagy csak a gombokra külön is megadhatod a betűtulajdonságokat:

```css
/* az egész sáv */
#cmplz-cookiebanner-container {
    font-size: 1.2em;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    text-decoration: underline;
    text-transform: lowercase;
}
/* csak a hivatkozások */
#cmplz-cookiebanner-container a {}
/* csak a gombok */
#cmplz-cookiebanner-container .cmplz-btn {}
```

## Kategóriák (Categories)

A kategóriák betűtípusa, a jelölőnégyzet és a csúszka a sávban, a „Hozzájárulás kezelése” ablakban és a TCF-tárolóban egyaránt megjelenik, ezért a szabályokat célszerű három szelektorra is megírni:

```css
/* betűk */
#cc-window .cc-category,
#cmplz-manage-consent-container
.cmplz-tcf-container {
  font-size: 1em;
}

/* klasszikus jelölőnégyzet */
#cc-window input[type=checkbox],
#cmplz-manage-consent-container input[type=checkbox],
.cmplz-tcf-container input[type=checkbox] {}

/* animált négyzet */
#cc-window.cc-window .cmplz-categories-wrap .cc-check svg,
#cmplz-manage-consent-container .cmplz-categories-wrap .cc-check svg,
.cmplz-tcf-container .cmplz-categories-wrap .cc-check svg {
  stroke: blue;
  stroke-width: 2.5;
}

/* csúszka */
#cc-window .cmplz-slider .cmplz-round,
#cmplz-manage-consent-container .cmplz-slider .cmplz-round,
.cmplz-tcf-container .cmplz-slider .cmplz-round {}

#cc-window .cmplz-slider-checkbox .cmplz-slider:before,
#cmplz-manage-consent-container .cmplz-slider-checkbox .cmplz-slider:before,
.cmplz-tcf-container .cmplz-slider-checkbox .cmplz-slider:before {}
```

## Hozzájárulás típusa és szintje (Consent Type, Consent Level)

A Complianz a weboldal `body` elemére osztályokat tesz. Ezekkel más-más stílust adhatsz az opt-in és opt-out látogatóknak, vagy aszerint, hogy melyik kategóriára adtak hozzájárulást:

```css
.cmplz-optin {}
.cmplz-optout {}

.cmplz_functional {}
.cmplz_preferences {}
.cmplz_statistics {}
.cmplz_marketing {}
```

A részletes példák a [Testosztályok régió és hozzájárulás szerint](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/stilus-css-testosztalyok-tcf/) fejezetben vannak.

## Régiók (Regions)

A látogató régiója szerinti osztályok:

```css
.cmplz-eu {}
.cmplz-us {}
.cmplz-ca {}
.cmplz-uk {}
.cmplz-au {}
.cmplz-other {}
.cmplz-sa {}
.cmplz-br {}
```

Az `sa` osztály az 5.2-es, a `br` az 5.3-as kiadástól létezik.

## Dokumentumok (Documents)

```css
/* címek a Complianz-dokumentumokban */
#cmplz-document h2 {}
/* alcímek */
#cmplz-document .subtitle {}
/* címek a mellékletekben */
#cmplz-document h2.annex {}
/* alcímek a mellékletekben */
#cmplz-document .subtitle.annex {}
/* szöveg */
#cmplz-document, #cmplz-document p, #cmplz-document span, #cmplz-document li {}
/* szolgáltatás fejléce a sütiszabályzatban */
#cmplz-cookies-overview .cmplz-service-header {}
/* szolgáltatás leírása */
#cmplz-cookies-overview .cmplz-service-desc {}
/* dokumentumtípusonként */
#cmplz-document.impressum, #cmplz-document.cookie-statement, #cmplz-document.privacy-statement {}
```

## „Hozzájárulás kezelése” gomb (Manage Consent)

```css
.cmplz-manage-consent {
  display: block !important;
  transform: none;
}
```

A gomb ikonjáról és a helyzetéről a [A „Hozzájárulás kezelése” gomb stílusa](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/stilus-css-kezelo-gomb/) fejezet szól.

## Mobil (Mobile)

Ha egy szabályt csak kis képernyőn szeretnél érvényesíteni, tedd médialekérdezésbe:

```css
@media only screen and (max-width: 600px) {
  #cmplz-cookiebanner {
    font-size: 12px;
  }
}
```

## Puha sütifal (Soft Cookie Wall)

```css
.cmplz-soft-cookiewall {}
```

A puha sütifal beállításait a [Puha sütifal](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/sutisav-puha-sutifal/) fejezet írja le.

## AMP

Az AMP-oldalakon megjelenő értesítésnek más azonosítói vannak:

```css
/* az AMP-értesítés */
#cmplz-consent-ui, #cmplz-post-consent-ui {}
/* a teljes sáv */
#cmplz-consent-ui .cmplz-consent-message {}
/* a gombok */
#cmplz-consent-ui button, #cmplz-post-consent-ui button {}
```