/** * NettConsent - stiler for samtykkebanner. * Alle farger/mål styres via CSS-variabler satt inline fra admin-innstillingene * (se public/js/nc-banner.js -> buildRoot()), slik at design enkelt kan * tilpasses uten å røre denne filen. */ #nettconsent-root { --nc-bg: #ffffff; --nc-prefs-bg: #ffffff; --nc-text: #1a1a1a; --nc-prefs-text: #1a1a1a; --nc-prefs-close-color: #1a1a1a; --nc-switch-active-bg: #2563eb; --nc-accent: #2563eb; --nc-accept-bg: #000000; --nc-accept-text: #ffffff; --nc-reject-bg: transparent; --nc-reject-text: #1a1a1a; --nc-settings-bg: transparent; --nc-settings-text: #1a1a1a; --nc-btn-border: transparent; --nc-btn-border-width: 1px; /* Egne knappefarger + kantlinjefarge for de tre knappene ("Avvis", "Lagre preferanser", "Godta") og "Vis mer/Vis mindre"-lenken INNI selve «Tilpass samtykkepreferanser»-vinduet - uavhengige av --nc-accept-bg/--nc-reject-bg/--nc-settings-bg/--nc-accent over, som er selve cookie-banverets knapper. Tidligere delte disse to stedene farge, noe som ga dårlig kontrast/usynlig tekst når «Tilpass»-vinduet fikk en egen, avvikende bakgrunnsfarge (se prefs_background_color) - f.eks. en mørk/farget bakgrunn mens knappefargene fortsatt var satt opp for en lys bannerbakgrunn. Standardverdiene her (satt fra buildRoot() i nc-banner.js) faller tilbake til de samme fargene som selve banneret dersom admin ikke har satt egne verdier for «Tilpass»-vinduet spesifikt - se prefs_button_*/prefs_intro_toggle_color i design-innstillingene. */ --nc-prefs-accept-bg: #000000; --nc-prefs-accept-text: #ffffff; --nc-prefs-reject-bg: transparent; --nc-prefs-reject-text: #1a1a1a; --nc-prefs-save-bg: #000000; --nc-prefs-save-text: #ffffff; --nc-prefs-btn-border: transparent; --nc-prefs-toggle-color: #2563eb; --nc-always-active-color: #1a7f4b; --nc-radius: 10px; --nc-panel-radius: 10px; --nc-fontsize: 15px; --nc-overlay: rgba(0, 0, 0, 0.25); position: fixed; z-index: 2147483000; /* Nødvendig (bekreftet på vestbv.no): Elementor har en global regel "html :where([style*="border-width"]) { border-style: solid; }" som fanger opp ETHVERT element hvor selve style-ATTRIBUTTET (som ren tekst) inneholder understrengen "border-width" - uavhengig av om det faktisk er en gyldig border-width-egenskap. #nettconsent-root sin egen inline style (satt fra buildRoot() i nc-banner.js) inneholder nettopp "--nc-btn-border-width: 2px" (en egendefinert CSS-variabel, ikke selve border-width-egenskapen) - nok til å trigge treffet. Siden #nettconsent-root aldri satte en egen border-verdi før, vant Elementor-regelen som standard (selv om ":where()" har null spesifisitet, holder det når INGEN annen regel konkurrerer om akkurat denne egenskapen) og la nettleserens standard kant (medium bredde, svart) rundt HELE #nettconsent-root - som pga. "inset: 0" rett under dekker hele skjermen, uansett banner-type (bar/boks/popup). */ border: 0; /* Arver nettstedets egen skrift (typisk satt på av temaet) i stedet for en fast systemskrift-stabel, slik at banneret ser ut som en naturlig del av nettsiden det er installert på, uansett hvilket tema/skrift den enkelte nettsiden bruker - se .nc-btn (font: inherit) og .nc-policy-link (font-size: inherit) som allerede bygger videre på denne arven for henholdsvis knapper og "Les mer"-lenken. Dersom nettstedet ikke har satt noen egen skrift noe sted, arves nettleserens standard skrift (vanligvis en seriff-skrift) - i praksis svært uvanlig for et ferdig WordPress-tema. */ font-family: inherit; font-size: var(--nc-fontsize); line-height: 1.5; color: var(--nc-text); inset: 0; pointer-events: none; } #nettconsent-root .nc-overlay { position: fixed; inset: 0; background: var(--nc-overlay); pointer-events: auto; } #nettconsent-root .nc-panel { pointer-events: auto; background: var(--nc-bg); color: var(--nc-text); border-radius: var(--nc-panel-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, .18); padding: 20px; box-sizing: border-box; } /* «Tilpass samtykkepreferanser»-vinduet bruker sin egen bakgrunnsfarge/ -gjennomsiktighet (prefs_background_color/-opacity), ikke den vanlige bannerbakgrunnen - se --nc-prefs-bg satt i buildRoot(). Må komme etter regelen over i kildeordenen for å vinne på lik spesifisitet. */ #nettconsent-root.nc-prefs-mode .nc-panel { background: var(--nc-prefs-bg); color: var(--nc-prefs-text); } #nettconsent-root .nc-panel:focus { outline: none; } #nettconsent-root .nc-panel:focus-visible { outline: none; outline-offset: unset; } #nettconsent-root .nc-logo { max-height: 32px; margin-bottom: 10px; } #nettconsent-root .nc-title { font-size: 1.15em; font-weight: 700; margin: 0 0 8px; color: var(--nc-text); } #nettconsent-root .nc-message { margin: 0 0 16px; font-size: 0.95em; } #nettconsent-root .nc-policy-link { /* Eksplisitt satt (ikke bare arvet) fordi mange WordPress-temaer har egne, generelle "a { font-size: ... }"-regler som ellers ville vunnet over den nedarvede størrelsen fra .nc-message - "Les mer"-lenken endte da opp større enn resten av teksten på noen nettsteder (f.eks. artro.no), men ikke andre, avhengig av temaets egne lenkestiler. Med font-size satt direkte her, matcher lenken alltid meldingsteksten sin størrelse, uansett hvilket nettsted pluginet er installert på. */ font-size: inherit; color: var(--nc-accent); text-decoration: none; margin-left: 5px; border-bottom: 1px solid currentColor; } #nettconsent-root .nc-policy-link:hover { border-bottom-width: 2px; } /* Samme doble fokusring som på knappene (se #nettconsent-root .nc-btn:focus-visible over) - med !important, siden temaer ofte fjerner nettleserens standard-fokusomriss på lenker helt (f.eks. "a:focus { outline: none; }"), noe som ellers gjør "Les mer"-lenken usynlig for tastaturbrukere. */ #nettconsent-root .nc-policy-link:focus-visible { outline: 2px solid #000 !important; outline-offset: 4px !important; box-shadow: 0 0 0 2px #fff !important; } #nettconsent-root .nc-actions { display: flex; flex-wrap: wrap; gap: 10px; } #nettconsent-root .nc-btn { appearance: none; box-sizing: border-box; border: var(--nc-btn-border-width) solid var(--nc-btn-border); cursor: pointer; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: var(--nc-radius); transition: 300ms; } #nettconsent-root .nc-btn:active { transform: scale(0.98); } #nettconsent-root .nc-btn:hover { transform: translateY(-2px); } /* Samme doble fokusring (svart indre ring + hvit ytre kant) som på det flytende cookie-ikonet (.nc-reopen-fab:focus-visible) - synlig uansett hvilken bakgrunnsfarge den enkelte knappen har fått i Utseende, i stedet for nettleserens (ofte lite synlige) standard-fokusomriss. */ #nettconsent-root .nc-btn:focus-visible { outline: 2px solid #000 !important; outline-offset: 4px !important; box-shadow: 0 0 0 2px #fff !important; } #nettconsent-root .nc-btn-accept, #nettconsent-root .nc-btn-save { background: var(--nc-accept-bg); color: var(--nc-accept-text); } #nettconsent-root .nc-btn-reject { background: var(--nc-reject-bg); color: var(--nc-reject-text); } #nettconsent-root .nc-btn-settings { background: var(--nc-settings-bg); color: var(--nc-settings-text); } /* ---------- Layout: popup (midtstilt modal) ---------- */ #nettconsent-root.nc-type-popup .nc-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* --nc-vw/--nc-vh (satt av JS, se updateViewportUnits() i nc-banner.js) i stedet for vw/vh/% direkte: når SIDEN pluginet ligger på har egen horisontal overflow (f.eks. et dekorativt element som stikker utenfor skjermen i en hero-seksjon), regner nettlesere containing block-en for et fastplassert element (position:fixed) - og dermed også vw/vh/%-verdier - ut fra det STØRRE, overflowende layout-området, ikke det faktisk synlige skjermområdet (bekreftet i både Safari og Chrome på iPhone - begge kjører WebKit på iOS - samt i vanlig desktop-Chrome når siden har horisontal overflow). document.documentElement.clientWidth/ -Height er derimot alltid korrekte, uavhengig av sidens egen overflow, så JS måler disse og lagrer dem som CSS-variabler panelet kan stole på. Fallback til 100%/100vw dekker det korte øyeblikket før JS har rukket å kjøre (skjer i praksis aldri, siden panelet selv bygges av JS). */ width: min(480px, calc(var(--nc-vw, 100%) - 32px)); max-height: calc(var(--nc-vh, 100%) - 64px); overflow-y: auto; } /* Knappene i "popup"-typen skal alltid fylle raden jevnt, uansett skjermstørrelse (panelet er allerede breddebegrenset over). */ #nettconsent-root.nc-type-popup .nc-actions { flex-wrap: nowrap; } #nettconsent-root.nc-type-popup .nc-btn { width: 100%; } /* ---------- Layout: bar (full bredde, alltid i bunn) ---------- */ #nettconsent-root.nc-type-bar .nc-panel { position: fixed; left: 0; right: 0; width: 100%; max-width: 100%; border-radius: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; padding: 10px 20px; } #nettconsent-root.nc-type-bar .nc-title { flex: 0 0 100%; margin-bottom: 0; } #nettconsent-root.nc-type-bar .nc-message { flex: 1 1 320px; margin-bottom: 0; } #nettconsent-root.nc-type-bar .nc-actions { flex: 0 0 auto; } #nettconsent-root.nc-type-bar.nc-pos-bottom .nc-panel { bottom: 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); } /* ---------- Layout: box (liten boks i hjørnet, alltid nede) ---------- */ #nettconsent-root.nc-type-box .nc-panel { position: fixed; /* Se forklaring om --nc-vw/--nc-vh ved .nc-type-popup .nc-panel over. */ width: min(360px, calc(var(--nc-vw, 100%) - 32px)); max-height: calc(var(--nc-vh, 100%) - 48px); overflow-y: auto; } /* Knappene i "boks"-typen skal alltid fylle raden jevnt, uansett skjermstørrelse (panelet er allerede breddebegrenset over). */ #nettconsent-root.nc-type-box .nc-actions { flex-wrap: nowrap; } #nettconsent-root.nc-type-box .nc-btn { width: 100%; } #nettconsent-root.nc-type-box.nc-pos-bottom-right .nc-panel { right: 20px; bottom: 20px; } #nettconsent-root.nc-type-box.nc-pos-bottom-left .nc-panel { left: 20px; bottom: 20px; } /* ---------- "Tilpass"-vinduet (alltid midtstilt, uavhengig av banner-typen) ---------- */ #nettconsent-root.nc-prefs-mode .nc-panel { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 100%; max-width: 845px; /* Se forklaring om --nc-vh ved .nc-type-popup .nc-panel over. */ max-height: calc(var(--nc-vh, 100%) - 64px); display: flex; flex-direction: column; border-radius: var(--nc-panel-radius); padding: 0; overflow: hidden; } #nettconsent-root .nc-prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid rgba(0, 0, 0, .1); } #nettconsent-root .nc-prefs-title { margin: 0; font-size: 1.15em; font-weight: 700; color: var(--nc-prefs-text); } #nettconsent-root .nc-prefs-close { appearance: none; background: none; border: 0; /* Nødvendig (bekreftet på vestbv.no): temaets/Elementor-kittets egne generiske knappe-regel (".elementor-kit-XXXX button, ...") setter en egen box-shadow på ALLE