Customizacja CSS

Storefrontowe SCSS pluginu jest zbudowane tak, żeby motywy mogły nadpisywać wizualne detale bez forkowania pluginu. Dwie warstwy customizacji: zmienne CSS (większość rzeczy) i klasy BEM (gdy zmienne nie wystarczą).

Wyczerpującą listę znajdziesz w Referencja → Zmienne CSS.

Zmienne CSS

Plugin wystawia swoją wizualną powierzchnię przez custom properties (CSS variables). Można je nadpisywać z SCSS / CSS motywu dla selektywnych tweaków bez ruszania pluginu.

Zmienne shell-level

Ustawione na elemencie .p2lab-stage__shell:

• --p2lab-stage-z — z-index sceny. Domyślnie 9999. Obniż, jeśli musisz renderować pod sticky headerami.
• --p2lab-stage-shell-width / --p2lab-stage-shell-height — zaprojektowane wymiary shella.
• --p2lab-stage-shell-padding — content padding wewnątrz shella.
• --p2lab-stage-shell-bg-color / --p2lab-stage-shell-bg-image / --p2lab-stage-shell-bg-size / --p2lab-stage-shell-bg-pos / --p2lab-stage-shell-bg-repeat — tło.
• --p2lab-stage-shell-border-* — rodzina ramki (width / style / color).
• --p2lab-stage-shell-backdrop-filter — backdrop filter.

Zmienne close buttona

Ustawione na elemencie .p2lab-stage__close. Sterowane przez Style Inspector w Stage Settings → Close button:

• --p2lab-stage-close-size, --p2lab-stage-close-padding
• --p2lab-stage-close-color, --p2lab-stage-close-bg, --p2lab-stage-close-bg-hover
• --p2lab-stage-close-border-* family
• --p2lab-stage-close-radius, --p2lab-stage-close-opacity

Zmienne slidera

• --p2lab-stage-slider-transition-ms — czas trwania przejścia (sterowany przez Stage Settings → Slider).

Zmienne widgetów kompozytowych (countdown / coupon)

• --p2lab-countdown-value-* — rodzina typograficzna dla wartości cyfr (font-family / size / weight / line-height / letter-spacing / color / text-decoration / text-transform / opacity).
• --p2lab-countdown-label-* — ta sama rodzina dla etykiet jednostek.
• --p2lab-countdown-unit-padding-* / --p2lab-countdown-unit-border-* / --p2lab-countdown-unit-background-color — styling boxa per jednostka.
• --p2lab-coupon-* — równoważna rodzina dla widgetu coupon.

Zmienne layoutu grid (section / row / column)

Używane przez content mode Grid:

• --p2lab-section-gap, --p2lab-section-padding, --p2lab-section-max-width, --p2lab-section-bg, --p2lab-section-align.
• --p2lab-row-gap, --p2lab-row-align, --p2lab-row-justify.
• --p2lab-col-xs / --p2lab-col-sm / --p2lab-col-md / --p2lab-col-lg / --p2lab-col-xl — responsywne breakpointy flex-basis.
• --p2lab-col-padding, --p2lab-col-bg.

Klasy BEM

Gdy zmienne CSS nie wystarczą — potrzebujesz zmienić selektory, dodać pseudo-elementy itd. — fallback na nadpisywanie klas BEM pluginu z poziomu motywu. Istotne klasy:

Root i shell

• .p2lab-stage — root wrapper (zawsze obecny).
• .p2lab-stage--modal / .p2lab-stage--banner_top / .p2lab-stage--banner_bottom / .p2lab-stage--slide_in_left / .p2lab-stage--slide_in_right / .p2lab-stage--toast_top_right / .p2lab-stage--toast_top_left / .p2lab-stage--toast_bottom_right / .p2lab-stage--toast_bottom_left — modyfikatory wariantów.
• .p2lab-stage__shell-wrap — zewnętrzny wrapper z wymiarami po transform: scale.
• .p2lab-stage__shell — wewnętrzne płótno w zaprojektowanych wymiarach pikselowych.

Warstwy

• .p2lab-stage__layer-wrap — zewnętrzny wrapper per warstwa. Trzyma pozycjonowanie, transform parallax. Animacje targetują ten element gdy property jest pozycyjne.
• .p2lab-stage__layer — wewnętrzny kontener per warstwa. Trzyma rotację, opacity, styling specyficzny dla typu.
• .p2lab-stage__layer-img — element <img> warstwy image.
• .p2lab-stage__scene — wrapper sceny (dla warstw typu scene).
• .p2lab-stage__scene-inner — grid dziecięcy sceny (trzyma data-design-width / data-design-height).

Affordances

• .p2lab-stage__close — button close X.
• .p2lab-stage__permanent — button “Don’t show again”.

Layout grid

• .p2lab-stage-grid__section, .p2lab-stage-grid__row, .p2lab-stage-grid__col — kontenery grid mode.

Slider

• .p2lab-stage-slider — root slidera.
• .p2lab-stage-slider__viewport — clipping viewport.
• .p2lab-stage-slider__slide — po jednym na slajd.
• .p2lab-stage-slider__global-overlay — constant cross-slide layery.
• .p2lab-stage-slider__nav — wrapper buttonów prev/next.
• .p2lab-stage-slider__dots — strip kropek (role tablist).

Przykład: dostosuj close button z motywu

.p2lab-stage__close {
    --p2lab-stage-close-size: 40px;
    --p2lab-stage-close-color: #ff0044;
    --p2lab-stage-close-bg: rgba(255, 255, 255, 0.9);
    --p2lab-stage-close-bg-hover: rgba(255, 0, 68, 0.1);
    --p2lab-stage-close-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Przykład: tweak shella dla wariantu

.p2lab-stage--banner_top .p2lab-stage__shell {
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Przykład: kolor stripa kropek

.p2lab-stage-slider__dots [role="tab"] {
    background: rgba(255, 255, 255, 0.4);
}
.p2lab-stage-slider__dots [role="tab"][aria-current="true"] {
    background: white;
}

Kiedy nadpisywać SCSS vs ustawienia edytora

• Ustawienia edytora (Stage settings, Layer style) — dla wartości specyficznych dla treści, które powinny się różnić między scenami.
• Zmienne CSS — dla wartości brandingowych, które powinny być spójne na wszystkich scenach jednego kanału sprzedaży.
• Klasy BEM — dla zmian strukturalnych, których edytor nie wystawia (timing functions animacji, custom pseudo-elementy, nadpisywanie breakpointów).

Gdzie dalej

• Referencja → Zmienne CSS — pełna tabela z defaultami.
• Storefront → Parallax myszy — gdzie transform layer-wrap żyje.
• Stages → Popup — który wariant wyświetlania mapuje na który modifier class.