/* * consent.css — a süti-sáv az oldal formanyelvén. * * MIÉRT VÁLTOZÓKKAL ÉS NEM SZELEKTOROKKAL * * Az első nekifutásom szelektorokkal írta felül a színeket, és nem érvényesült: * a Complianz szabályai négyosztályosak * (`.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept` = 0,4,0), az * enyémek háromosztályosak voltak (0,3,0) — a fajsúly döntött, nem a sorrend. * * A megoldás nem nagyobb szelektor, hanem a bővítmény SAJÁT témázási felülete: * minden színt és sarok-lekerekítést `--cmplz_*` egyéni tulajdonságból olvas. * * A VÁLTOZÓK A SÁVON VANNAK, NEM A `:root`-ON — és ez a lényeg. A sávot a * Complianz JavaScriptből injektálja, a stílusát pedig vele együtt, tehát az * MINDIG a mi fájlunk után kerül a kaszkádba: `:root`-on felülírva a plugin * későbbi `:root`-ja nyerne (kipróbálva: a gomb kék maradt). * * Az egyéni tulajdonságok viszont a LEGKÖZELEBBI ŐSRŐL oldódnak fel, nem * kaszkád-sorrend szerint. A `.cmplz-cookiebanner` közelebb van a gombokhoz, * mint a dokumentum gyökere — ezért az itt megadott érték akkor is érvényes, * ha a plugin később újradefiniálja a `:root`-on. Így nincs szükség * `!important`-ra egyetlen színnél sem. * * Ezeket a változókat a bővítményen kívül semmi nem olvassa, tehát nem * szivárognak ki az oldal többi részére. */ .cmplz-cookiebanner, #cmplz-manage-consent .cmplz-manage-consent { /* ── forma: szögletes és lapos, ahogy az oldalon mindenhol ───────── */ --cmplz_banner_border_radius: 0; --cmplz_button_border_radius: 0; --cmplz_banner_border_width: 0; --cmplz_banner_border_color: transparent; /* ── szövegek ────────────────────────────────────────────────────── */ --cmplz_text_color: #000; --cmplz_hyperlink_color: #8c0052; --cmplz_text_font_size: 14px; --cmplz_link_font_size: 13px; --cmplz_title_font_size: 16px; --cmplz_category_header_title_font_size: 15px; --cmplz_category_body_font_size: 13px; --cmplz_button_font_size: 15px; /* * ── gombok ─────────────────────────────────────────────────────── * * Az elsődleges a márka magentája. A másodlagosak NEM szürke felületek, * hanem magenta kontúrok: ugyanaz a viszony, mint a lapon a kitöltött és * a körvonalas elemek között. A bővítmény alapértelmezése a kék #1e73be * volt, ami semmilyen kapcsolatban nem áll az oldal színeivel. */ --cmplz_button_accept_background_color: #8c0052; --cmplz_button_accept_border_color: #8c0052; --cmplz_button_accept_text_color: #fff; --cmplz_button_deny_background_color: transparent; --cmplz_button_deny_border_color: #8c0052; --cmplz_button_deny_text_color: #8c0052; --cmplz_button_settings_background_color: transparent; --cmplz_button_settings_border_color: #8c0052; --cmplz_button_settings_text_color: #8c0052; /* * ── jelzések ───────────────────────────────────────────────────── * * A „Mindig aktív” zöld volt, a csúszka pedig világoskék — mindkettő * idegen szín. A zöld itt nem is hordoz külön jelentést: a felirat * maga mondja meg, hogy a kategória nem kapcsolható. */ --cmplz_category_header_always_active_color: #8c0052; --cmplz_slider_active_color: #8c0052; --cmplz_slider_inactive_color: #c9c9c9; --cmplz_slider_bullet_color: #fff; /* * A lenyíló-nyíl háttérképe. A bővítmény EGYSZERRE rajzol egy háttérképet * (ez a változó, 25×25 képponton) és egy beágyazott ``-t (16×18) — * a kettő nem fedi egymást, ezért két egymásra csúszott nyílként látszik. * * A háttérképet itt kapcsoljuk ki, mert szelektorral nem lehet: a plugin * szabálya ugyanolyan fajsúlyú (0,6,0), és a CSS-e JavaScriptből, tehát a * mienk után kerül a kaszkádba. A változó viszont a legközelebbi ősről * oldódik fel, és az itt van. */ --cmplz_category_open_icon_url: none; } /* ═══ A kétrétegű lenyílók javítása ═══════════════════════════════════════ * * MÉRT HIBA: a kategória-`
` zárva volt (`open=false`), a benne lévő * `.cmplz-description` mégis 128 képpont magasan renderelődött, miközben a * szülő 45 képpont — a leírás kilógott és RÁRÉTEGZŐDÖTT a következő * kategóriára (118, majd 46 képpont átfedés, két másodpercen át változatlanul, * tehát nem animációs átmenet volt). * * OK: a bővítmény `display: block`-ot ad a `summary`-ra és elrejti a natív * jelölőt; ettől a böngésző zárt-állapotú elrejtése nem érvényesül. Egyetlen * szerzői szabály sem illeszkedett a leírásra, tehát nem a mi CSS-ünk okozta. * * Alább visszaadjuk a natív viselkedést. A fajsúly szándékosan illeszkedik a * bővítmény saját szelektor-alakjához, hogy biztosan elvigye. */ /* ═══ A LENYÍLÓ KIGÖRDÜLÉSE ═══════════════════════════════════════════════ * * A kigördülést a téma JavaScriptje vezérli (nav.js, „süti-sáv kategóriái”). * * MI VOLT A HIBA ÉS HOGY JUTOTTUNK IDE — mert két zsákutcán át vezetett: * * 1. Először `display: none` rejtette a zárt tartalmat, a nyitottra pedig * áttűnés került. A magasság így MINDKÉT irányban egyetlen képkocka alatt * ugrott a teljes méretre. Ez volt az eredeti villanás. * * 2. Aztán a `
` kétsoros ráccsá vált, és a második sáv animált * 0fr ↔ 1fr között. Ez Chrome-ban hibátlan — de két csapdája volt: * • az első sáv `auto`-ként a záródás közben felszabaduló helyet magába * szívta, és a FEJLÉC-SOR 45-ről 69,5 képpontra hízott, majd vissza * (`min-content` javította); * • a mechanizmus a `::details-content` pszeudo-elemtől függ, amit a * Safari csak 18.4-től, a Firefox pedig egyáltalán nem ismer. Ott némán * kimarad, és a lenyíló pattan. A megrendelő SAFARIBAN látta a * villanást — a maradék hiba pontosan ez volt. * * MIÉRT JAVASCRIPT: nem függ pszeudo-elemtől és nem függ böngésző-verziótól. * A `.cmplz-description` magasságát és függőleges belső margóját animálja, * ugyanazzal az időzítéssel és görbével, amivel a GYIK harmonikája — ez a kód * ennek az oldalnak a bevált mintája, nem új találmány. * * Ha a szkript nem fut le, a `
` natívan nyílik és csukódik: nincs * animáció, de nincs hibás megjelenés sem. */ /* zárt állapot: a tartalom nincs kirajzolva — ez minden böngészőben áll */ .cmplz-cookiebanner .cmplz-categories .cmplz-category:not([open]) > *:not(summary) { display: none; } /* * A záródás alatt az `[open]` MÉG rajta van (a szkript tartja, hogy legyen mit * animálni), a nyílnak viszont már vissza kell fordulnia. A fajsúly (0,7,1) * elviszi a bővítmény `[open]`-es szabályát (0,6,0). */ .cmplz-cookiebanner .cmplz-categories details.cmplz-category[data-closing] .cmplz-category-header .cmplz-icon.cmplz-open { transform: none; } /* a mozgás alatt vágni kell, különben a szöveg kilóg a fogyó magasságból */ .cmplz-cookiebanner .cmplz-categories details.cmplz-category[data-animating] > .cmplz-description { overflow: hidden; } /* ═══ Ami nem változóból jön ═══════════════════════════════════════════════ */ /* * A kategóriák halvány szürke kártyák voltak. Az oldal nem kártyákkal tagol, * hanem vonalakkal — itt is az lesz. A szelektor négyosztályos, hogy elvigye * a bővítmény saját szabályát. */ /* * `details.cmplz-category` és nem csak `.cmplz-category`: a plugin CSS-e * JavaScriptből, tehát a mienk UTÁN kerül a kaszkádba, így azonos fajsúlyon ő * nyerne. Az elem-szelektor 0,3,0-ról 0,3,1-re emeli a mienket — ez elég, * `!important` nélkül. */ .cmplz-cookiebanner .cmplz-categories details.cmplz-category { background-color: transparent; border-top: 1px solid #e4e4e4; margin-bottom: 0; } .cmplz-cookiebanner .cmplz-categories details.cmplz-category:first-child { border-top: 0; } /* ═══ A SÁV FORMÁJA — ÉS A HOVERRE NÖVŐ ÁRNYÉK KIIKTATÁSA ═════════════════ * * MÉRT HIBA: a bővítmény generált stíluslapja * (wp-content/uploads/complianz/css/banner-1-optin.css) ezt teszi a sávra: * * .cmplz-cookiebanner.cmplz-show { box-shadow: rgba(0,0,0,.19) 0 10px 20px, * rgba(0,0,0,.23) 0 6px 6px } * .cmplz-cookiebanner.cmplz-show:hover { transition-duration: 1s; * box-shadow: rgba(0,0,0,.3) 0 19px 38px, * rgba(0,0,0,.22) 0 15px 12px } * * Vagyis KÉT egymásra rakott elmosott árnyék, ÉS egy hover, amitől az egész * ablak árnyéka 20-ról 38 képpontra, 19-ről 30 %-ra nő — EGY MÁSODPERC alatt. * A doboz láthatóan „felemelkedik”, ha a mutató fölé kerül. Ez egy általános * Material-párbeszédablak mozdulata; semmi köze ehhez az oldalhoz, ahol minden * él kemény és semmi nem lebeg. * * MIÉRT NEM ÉRVÉNYESÜLT AZ ELŐZŐ PRÓBÁLKOZÁSOM: az enyém `.cmplz-cookiebanner` * (0,1,0), a bővítményé `.cmplz-cookiebanner.cmplz-show` (0,2,0). A konténer * azonosítójával (1,2,0) most sorrendtől függetlenül elviszi. Ugyanez tüntette * el a `border-top`-omat is: a bővítmény a keret szélességét változóból írja, * azt pedig fentebb 0-ra állítjuk — a `border` longhandje felülírta a sajátomat. * * (Az oldal-szintű hover-auditom azért nem találta meg, mert a sávot és a * stíluslapját JavaScript injektálja: ha a sáv nincs kint, a szabály nincs is * a `document.styleSheets`-ben. Ezután a sávot mindig külön kell auditálni.) * * HELYETTE egyetlen `box-shadow`, amiben NINCS elmosás: * • `inset 0 3px 0` — a 3 képpontos magenta vonal a sáv tetején: ugyanaz a * jel, mint a címsávon; * • `0 0 0 1px` — hajszálvékony kontúr, hogy a fehér doboznak ÉLE legyen * fehér tartalom fölött is. Nulla elmosás, nulla eltolás, nulla mozgás. */ .cmplz-cookiebanner { font-family: var(--br-font-body); } #cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show, #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover { box-shadow: inset 0 3px 0 #8c0052, 0 0 0 1px rgb(0 0 0 / 12%); /* a bővítmény 1 s-os árnyék-átmenete se maradjon ott kísérteni */ transition: none; } .cmplz-cookiebanner .cmplz-message strong, .cmplz-cookiebanner .cmplz-title { font-family: var(--br-font-display); color: #8c0052; } .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-family: var(--br-font-display); } /* * A gombok betűje és tapintható mérete. A magasságot a bővítmény 45 képpontra * állítja; 44 a WCAG-hoz elég, de a 48 kényelmesebb ujjal, és a sávban van rá hely. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-family: var(--br-font-display); font-weight: 400; height: 48px; transition: color var(--br-ki-mikro) var(--br-gorbe-be), background-color var(--br-ki-mikro) var(--br-gorbe-be), border-color var(--br-ki-mikro) var(--br-gorbe-be); } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible { /* az odaút hosszabb, mint a visszaút — ugyanaz a rend, mint az oldalon */ transition: color var(--br-be-mikro) var(--br-gorbe-be), background-color var(--br-be-mikro) var(--br-gorbe-be), border-color var(--br-be-mikro) var(--br-gorbe-be); } /* * ── A GOMBOK HOVERE ────────────────────────────────────────────────────── * * Ami itt volt, HÁROM külön viselkedést adott három egymás melletti gombnak: * * • „Elfogadás”: #8c0052 → #881455. Ez nem sötétebb, hanem VILÁGOSABB * (relatív fényesség 35,7 → 49,3), és a különbség alig érzékelhető — * vagyis a főgomb gyakorlatilag nem válaszolt a mutatóra. * • „Elutasítás” és „Beállítások”: áttetsző kontúrból TELE MAGENTA blokk, * fehér betűvel. Egy kis sávon két nagy felület vált tömör színre; ez az, * ami villogásnak látszik. * • „Beállítások mentése”: SEMMI. Kimaradt a felsorolásból, tehát a * beállítás-nézet mentőgombjának egyáltalán nem volt hovere. * * Most kettő van, és mind a kettő visszafogott: * • az elsődleges valóban sötétedik (#6d0040, fényesség 27,8); * • minden másodlagos ugyanazt a halvány magenta bemosást kapja, a betű és * a kontúr marad a helyén. A `:not(.cmplz-accept)` azért kell, hogy * egyetlen gombfajta se maradhasson ki — a mentőgomb pont ezen bukott el. * * Fajsúly: a bővítmény szabálya (0,4,0); a `:not()` a saját argumentumát * számítja, így az enyém (0,5,0) — `!important` nélkül elviszi. */ .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible { background-color: #6d0040; border-color: #6d0040; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:not(.cmplz-accept):hover, .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:not(.cmplz-accept):focus-visible { background-color: rgb(140 0 82 / 8%); } /* * A bővítmény kikapcsolja az átmenetet a sáv hivatkozásain * (`.cmplz-cookiebanner a { transition: initial }`). Visszaadjuk, hogy a * hover itt is oda-vissza animáljon, mint az oldal többi részén. */ /* * A bővítmény `transition: initial`-t ad a sáv MINDEN hivatkozására, tehát a * beépített logó-linkre is. Egyben adjuk vissza, hogy a sávon belül se * maradjon olyan interaktív elem, ami ugrik. */ .cmplz-cookiebanner a { transition: color var(--br-ki-mikro) var(--br-gorbe-be), opacity var(--br-ki-mikro) var(--br-gorbe-be); } .cmplz-cookiebanner a:hover, .cmplz-cookiebanner a:focus-visible { transition: color var(--br-be-mikro) var(--br-gorbe-be), opacity var(--br-be-mikro) var(--br-gorbe-be); } .cmplz-cookiebanner .cmplz-links .cmplz-link:hover, .cmplz-cookiebanner .cmplz-message a:hover { color: #881455; } /* * A süti-szabályzat hivatkozása szöveg nélkül renderelődik (mérve: üres * ``), tehát üres kattintható elem * marad a sávban. Amíg a Complianz-beállításban nincs hozzá címke, elrejtjük — * egy üres link a képernyőolvasónak is zaj. */ .cmplz-cookiebanner .cmplz-links .cmplz-link.cookie-statement:empty { display: none; } /* ═══ A kétszer megjelenő lenyíló-nyíl ════════════════════════════════════ * * MÉRT HIBA: a `.cmplz-icon.cmplz-open` egy 25×25 képpontos doboz, amiben a * bővítmény EGYSZERRE rajzol két azonos chevront: * * • `background-image: url(…)` — a plugin saját ikonfájlja, a teljes dobozon * • egy beágyazott `` gyerek (16×18), ugyanazzal az alakkal * * A kettő nem fedi egymást pontosan (25×25 vs 16×18), ezért két, egymásra * csúszott nyílként látszik. Ez az, amit „2 rétegnek” láttál — nem a leírás- * panelek, ahogy először hittem. * * A HÁTTÉRKÉPET vesszük ki, és a beágyazott SVG marad: az `currentColor`-ral * színezhető, tehát követni tudja az oldal palettáját, a képfájl nem. */ .cmplz-cookiebanner .cmplz-categories details.cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { background-image: none; color: var(--br-primary); } .cmplz-cookiebanner .cmplz-icon.cmplz-open svg { width: 18px; height: 18px; fill: currentColor; } /* * A nyíl forgatása. A bővítmény `transition: all .5s ease`-t ad rá: fél * másodperc idegen görbével, és `all`-lal, ami minden tulajdonságot figyel. * Itt csak a `transform` animál, a panel nyílásával EGYEZŐ időzítéssel — így * a nyíl és a tartalom egyetlen mozdulatként mozog, nem két külön ütemben. */ .cmplz-cookiebanner .cmplz-categories details.cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { transition: transform var(--br-acc-duration) var(--br-acc-easing); } /* ═══ A záró × soha ne kereteződjön ═══════════════════════════════════════ * * A keret nem dísz volt, hanem a fókuszgyűrű (`:focus-visible` → 2 képpontos * kontúr a base.css-ből). A Complianz a sáv megnyitásakor erre az elemre viszi * a fókuszt, tehát billentyűzetes használatnál mindig megjelent. * * A kontúrt kivesszük — DE nem hagyjuk jelzés nélkül: a fókusz és a hover is * színt vált. Ez gyengébb jel egy kontúrnál; ha a billentyűzetes használóknak * erősebb kell, szólj, és a szín mellé kap egy vastagabb vonalvezetést is * (keret nélkül). */ .cmplz-cookiebanner .cmplz-close, .cmplz-cookiebanner .cmplz-close:hover, .cmplz-cookiebanner .cmplz-close:focus, .cmplz-cookiebanner .cmplz-close:focus-visible, .cmplz-cookiebanner .cmplz-close:active { outline: none; border: 0; box-shadow: none; } /* * A szín a `.cmplz-cookiebanner .cmplz-header .cmplz-close` alakkal megy: a * bővítmény szabálya kétosztályos (0,2,0), ez háromosztályos (0,3,0), tehát * elviszi. A `--cmplz_text_color` változó itt nem használható, mert azt a * törzsszöveg is olvassa. */ .cmplz-cookiebanner .cmplz-header .cmplz-close { color: var(--br-primary); } /* * A hover CSAK a színt váltja. * * A bővítmény ezt teszi rá (0,3,0): * .cmplz-cookiebanner .cmplz-close:hover { line-height: initial; font-size: 18px } * * Vagyis a × 20-ról 18 képpontra ZSUGORODIK, amint a mutató fölé ér, és a * sorköz is átvált — az ikon megugrik a helyén. Ez a fajta „reagálás” nem * információ, hanem remegés. A méretet ezért rögzítjük; a fajsúly (0,4,0) * elviszi a bővítményét. */ .cmplz-cookiebanner .cmplz-header .cmplz-close:focus-visible, .cmplz-cookiebanner .cmplz-header .cmplz-close:hover { color: var(--br-accent); font-size: 20px; line-height: 20px; }