/*
* WL Kontrast
*
* Biały wariant jest traktowany jako domyślny wygląd strony.
* Tryby kontrastu są dwa: żółty i pomarańczowy.
* Klasy dodawane do i :
* .wl-contrast-yellow, .wl-contrast-orange
*/
:root {
--wl-kontrast-default-bg: #1b1b1a;
--wl-kontrast-default-text: #ffffff;
--wl-kontrast-yellow: #ffff00;
--wl-kontrast-orange: #ff7a3d;
}
html.wl-contrast-yellow,
body.wl-contrast-yellow {
--wl-contrast-bg: #1b1b1a;
--wl-contrast-text: var(--wl-kontrast-yellow);
--wl-contrast-accent: var(--wl-kontrast-yellow);
--wl-contrast-muted: rgba(255, 255, 0, 0.86);
--wl-contrast-border: rgba(255, 255, 0, 0.84);
--wl-contrast-svg-filter: brightness(0) saturate(100%) invert(100%) sepia(97%) saturate(7486%) hue-rotate(359deg) brightness(103%) contrast(103%);
}
html.wl-contrast-orange,
body.wl-contrast-orange {
--wl-contrast-bg: #1b1b1a;
--wl-contrast-text: var(--wl-kontrast-orange);
--wl-contrast-accent: var(--wl-kontrast-orange);
--wl-contrast-muted: rgba(255, 122, 61, 0.88);
--wl-contrast-border: rgba(255, 122, 61, 0.86);
--wl-contrast-svg-filter: brightness(0) saturate(100%) invert(62%) sepia(89%) saturate(2329%) hue-rotate(330deg) brightness(103%) contrast(101%);
}
html.wl-contrast-mode {
color-scheme: dark;
/* Blocksy i część bloków korzystają z custom properties. */
--theme-text-color: var(--wl-contrast-text) !important;
--theme-heading-color: var(--wl-contrast-accent) !important;
--theme-link-initial-color: var(--wl-contrast-accent) !important;
--theme-link-hover-color: var(--wl-contrast-accent) !important;
--theme-border-color: var(--wl-contrast-border) !important;
--theme-button-text-initial-color: var(--wl-contrast-bg) !important;
--theme-button-text-hover-color: var(--wl-contrast-bg) !important;
--theme-button-background-initial-color: var(--wl-contrast-accent) !important;
--theme-button-background-hover-color: var(--wl-contrast-accent) !important;
--theme-palette-color-1: var(--wl-contrast-accent) !important;
--theme-palette-color-2: var(--wl-contrast-accent) !important;
--theme-palette-color-3: var(--wl-contrast-accent) !important;
--theme-palette-color-4: var(--wl-contrast-text) !important;
--theme-palette-color-5: var(--wl-contrast-bg) !important;
--theme-palette-color-6: var(--wl-contrast-bg) !important;
--theme-palette-color-7: var(--wl-contrast-bg) !important;
--theme-palette-color-8: var(--wl-contrast-bg) !important;
}
html.wl-contrast-mode body,
html.wl-contrast-mode #main,
html.wl-contrast-mode main,
html.wl-contrast-mode .site-main,
html.wl-contrast-mode .site-content,
html.wl-contrast-mode .entry-content,
html.wl-contrast-mode .ct-container,
html.wl-contrast-mode .ct-header,
html.wl-contrast-mode #header,
html.wl-contrast-mode [data-header*="type"],
html.wl-contrast-mode [data-row],
html.wl-contrast-mode .site-footer,
html.wl-contrast-mode footer,
html.wl-contrast-mode .ct-footer,
html.wl-contrast-mode #footer,
html.wl-contrast-mode .wp-block-group,
html.wl-contrast-mode .wp-block-cover,
html.wl-contrast-mode .wp-block-cover__inner-container,
html.wl-contrast-mode .wp-block-columns,
html.wl-contrast-mode .wp-block-column,
html.wl-contrast-mode .gb-container,
html.wl-contrast-mode .stk-block,
html.wl-contrast-mode .elementor-section,
html.wl-contrast-mode .elementor-container,
html.wl-contrast-mode .elementor-widget-wrap,
html.wl-contrast-mode .wlev-slot,
html.wl-contrast-mode .wlev-partners-slot,
html.wl-contrast-mode .wlev-partner-group-section {
background-color: var(--wl-contrast-bg) !important;
color: var(--wl-contrast-text) !important;
}
html.wl-contrast-mode :where(*, *::before, *::after) {
text-shadow: none !important;
box-shadow: none !important;
border-color: var(--wl-contrast-border) !important;
}
html.wl-contrast-mode :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, small, strong, em, label, legend, blockquote, cite, span, div),
html.wl-contrast-mode :where(.ct-menu-link, .menu-item > a, .sub-menu a, .entry-title, .page-title, .wp-block-heading),
html.wl-contrast-mode :where(
[class^="wl-"]:not(.wl-kontrast-toggle),
[class*=" wl-"]:not(.wl-kontrast-toggle),
[class^="wlev-"],
[class*=" wlev-"],
[class^="wlz-"],
[class*=" wlz-"]
) {
color: var(--wl-contrast-text) !important;
}
html.wl-contrast-mode :where(a, a:hover, a:focus, a:active),
html.wl-contrast-mode :where(.current-menu-item > a, .current_page_item > a, .ct-header-text, .ct-label, .ct-button, .wp-block-button__link),
html.wl-contrast-mode :where(.wlev-tabs a, .wlev-tabs button, .wlev-months a, .wlev-months button, .wlev-month, .wlev-month-button) {
color: var(--wl-contrast-accent) !important;
text-decoration-color: var(--wl-contrast-accent) !important;
}
html.wl-contrast-mode :where(button, input, textarea, select, .ct-button, .wp-block-button__link),
html.wl-contrast-mode :where(.wlev-tabs a, .wlev-tabs button, .wlev-months a, .wlev-months button, .wlev-month, .wlev-month-button) {
background-color: transparent !important;
background-image: none !important;
color: var(--wl-contrast-accent) !important;
border-color: var(--wl-contrast-border) !important;
box-shadow: none !important;
}
html.wl-contrast-mode :where(hr, table, th, td, fieldset, .ct-header, .ct-footer, .site-footer, .wp-block-separator) {
border-color: var(--wl-contrast-border) !important;
}
html.wl-contrast-mode ::selection {
background: var(--wl-contrast-accent) !important;
color: var(--wl-contrast-bg) !important;
}
/* Inline SVG: logo, ikony social, ikony menu, BIP itd. */
html.wl-contrast-mode :where(svg, svg *) {
color: var(--wl-contrast-accent) !important;
}
html.wl-contrast-mode :where(svg:not([fill="none"]), svg *:not([fill="none"])) {
fill: currentColor !important;
}
/* Nie nadajemy stroke wszystkim elementom SVG. To powodowało czerwoną/pomarańczową
* otoczkę na logotypach złożonych z wypełnionych ścieżek. Stroke przejmują tylko
* elementy, które faktycznie miały stroke w SVG albo zostały oznaczone przez JS. */
html.wl-contrast-mode :where(
svg[stroke]:not([stroke="none"]),
svg *[stroke]:not([stroke="none"]),
svg [data-wl-kontrast-has-stroke="1"]
) {
stroke: currentColor !important;
}
html.wl-contrast-mode :where(svg [data-wl-kontrast-no-stroke="1"]) {
stroke: none !important;
}
/* SVG ładowane jako ![]()
, np. social icon albo BIP.
* UWAGA 1.1.13: filtr stosujemy WYŁĄCZNIE do realnych ![]()
. Goły selektor
* `.custom-logo` łapał też inlinowany