/** * Epas Dark Mode - stiliai * * Metodas: viso puslapio CSS "invert" filtras ant , o vaizdinis * turinys (nuotraukos, video, žemėlapiai, SVG, canvas) invertuojamas * antrą kartą, kad grįžtų į natūralias spalvas. * * Šis metodas pasirinktas sąmoningai vietoje tamsios spalvų temos, nes * svetainė sudaryta iš Elementor + WooCommerce + papildomų shortcode'ų * (produktų galerija, ženklų juosta, filtrai ir kt.), o tikslus visų jų * spalvų perrašymas kintamaisiais reikalautų nuolatinės priežiūros po * kiekvieno dizaino pakeitimo. "Invert" metodas veikia automatiškai * visame turinyje, įskaitant būsimus Elementor blokus. */ html.epas-dark { background: #fff !important; /* invert(1) yra tiksliai save-atšaukiantis (žr. žemiau prie img/video), todėl šviesumą reguliuojame per contrast(), kuris taip pat turi tikslią atvirkštinę reikšmę: contrast(0.8) <-> contrast(1.25). Norint TAMSESNIO rezultato: didinti contrast() (pvz. 0.9 -> mažiau šviesus). Norint ŠVIESESNIO rezultato: mažinti contrast() (pvz. 0.7 -> šviesiau), bet TADA būtina atitinkamai pakeisti ir atvirkštinę reikšmę žemiau (contrast(1/x)) ant img/video taisyklės, kitaip nuotraukos vėl atrodys pakeistos. */ filter: invert(1) hue-rotate(180deg) contrast(0.8) !important; } /* Švelnus perėjimas perjungiant režimą */ html { transition: filter 0.25s ease-in-out !important; } /* Vaizdinį turinį invertuojame antrą kartą, kad spalvos liktų natūralios */ html.epas-dark img, html.epas-dark video, html.epas-dark iframe, html.epas-dark svg:not(.epas-dm-icon), html.epas-dark canvas, html.epas-dark picture, html.epas-dark embed, html.epas-dark object { /* SVARBU: tvarka priešinga nei aukščiau (html.epas-dark taisyklėje), nes tai yra tikslus atvirkštinis filtrų grandinės atšaukimas: pirma atšaukiame contrast() (1 / 0.8 = 1.25), tada hue-rotate, tada invert. Jei aukščiau keisite contrast(0.8), čia atitinkamai pakeiskite į contrast(1 / naujas_skaičius). */ filter: contrast(1.25) hue-rotate(180deg) invert(1) !important; } /* Elementai su fono nuotrauka (pvz. Elementor "Background Image" sekcijos) */ html.epas-dark [style*="background-image"] { filter: contrast(1.25) hue-rotate(180deg) invert(1) !important; } /* Rankinė išimtis: pridėkite klasę "epas-dm-no-invert" prie elemento (pvz. logotipo su permatoma sritimi), kad jis liktų neinvertuotas. SVARBU: "filter: none" čia NEVEIKTŲ, nes tėvo () filtras jau perpiešia visą pošakį - vaikas negali "atsisakyti" tėvo filtro, jis gali tik pridėti SAVO filtrą ant viršaus. Todėl naudojame tą pačią atvirkštinę grandinę, kaip ir nuotraukoms/video (žr. aukščiau). */ html.epas-dark .epas-dm-no-invert { filter: contrast(1.25) hue-rotate(180deg) invert(1) !important; } /* ---------------------------------------------------------------- */ /* Perjungimo mygtukas */ /* ---------------------------------------------------------------- */ .epas-dm-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 46px !important; height: 46px !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 50% !important; background: #1a1a1a !important; color: #fff !important; cursor: pointer !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important; transition: transform 0.2s ease, background-color 0.2s ease !important; line-height: 0 !important; appearance: none !important; -webkit-appearance: none !important; } .epas-dm-toggle:hover { transform: scale(1.06) !important; background: #2c2c2c !important; } /* Mygtukas tamsiame režime: kadangi jis yra "position: fixed", nepatikima ant jo derinti atvirkštinį filtrą (kaip su nuotraukomis) - kai kuriose naršyklėse "fixed" elementai + tėvo filter duoda nenuspėjamų rezultatų. Todėl čia tiesiog nurodome spalvą, kuri PO to, kai ją praeis tėvo (html.epas-dark) filtras (invert + contrast(0.8)), atrodys tamsi/šviesi taip, kaip norime - jokio papildomo filtro ant paties mygtuko nereikia. Jei aukščiau keisite contrast() reikšmę html.epas-dark taisyklėje, šias spalvas reikės perskaičiuoti iš naujo. */ html.epas-dark .epas-dm-toggle { background: #efefef !important; color: #0e0e0e !important; } html.epas-dark .epas-dm-toggle:hover { background: #e0e0e0 !important; } .epas-dm-toggle:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 2px !important; } .epas-dm-toggle--floating { position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 999999 !important; } .epas-dm-toggle--inline { position: static !important; } .epas-dm-icon { width: 22px !important; height: 22px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; pointer-events: none !important; } .epas-dm-icon--sun circle { fill: currentColor !important; stroke: none !important; } .epas-dm-icon--moon path { fill: currentColor !important; stroke: none !important; } /* Numatyta būsena: rodoma saulė (paspaudus - įjungs tamsų režimą) */ .epas-dm-icon--moon { display: none !important; } /* Kai tamsus režimas įjungtas, rodoma mėnulio ikona */ html.epas-dark .epas-dm-icon--sun { display: none !important; } html.epas-dark .epas-dm-icon--moon { display: inline-flex !important; } @media (max-width: 767px) { .epas-dm-toggle--floating { right: 14px !important; bottom: 14px !important; width: 42px !important; height: 42px !important; } }