, VIENAS pranešimas .woocommerce-error →

klaidų WooCommerce PATI piešia ikoną kaip ::before pseudo-elementą ant PAČIO konteinerio (position:absolute; žr. plugins/woocommerce/ assets/css/woocommerce.css) — todėl ne keičiam turinį (content), TIK poziciją/spalvą/dydį, ir konteineriui skiriam pakankamą left paddingą, kad tekstas niekad neitų po ikona (buvusi klaida nm-account.css: padding buvo perrašytas be left kompensacijos). SELEKTORIAI kartoja ".woocommerce"/".woocommerce-page" priešdėlį, kurį naudoja PATI WooCommerce (woocommerce-layout.css) savo ".button" taisyklei ("Krepšelis" mygtukas pranešime) — be šito priešdėlio mūsų mygtuko spalva PRALAIMĖJO prieš plugino CSS (patikrinta: abi taisyklės vienodo šaltinio failo eiliškumo, bet plugino selektorius turėjo VIENA klase daugiau, taigi DIDESNĮ specifiškumą, ir laimėjo nepriklausomai nuo enqueue tvarkos). ".woocommerce" atitinka arba klasę (shop/produktas), arba turinio apvalkalo
(account/cart/ checkout — ten tos klasės NETURI, žr. patikrą naršyklėje); ".woocommerce-page" VISADA yra ant , visuose WC puslapiuose. Abu variantai palikti, kad veiktų vienodai visur. Spalvos: #4055A4 antraštės / #726AAF tekstas / #EDECF0 fonai-borderiai #F06365 akcentas-CTA / #E16D68 hover. Radius: 15px. ============================================================ */ /* ============================================================ 1. KONTEINERIS — bendras fonas, kairė spalvota juosta pagal tipą. ============================================================ */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error { position: relative; margin: 0 0 24px; padding: 18px 24px 18px 56px; background: #EDECF0; border: none; border-left: 4px solid #F06365; border-radius: 15px; color: #4055A4; font-size: 15px; line-height: 1.6; list-style: none; } /* Kairės juostos spalva pagal tipą — koralinė KLAIDAI, ramesnės sėkmei/informacijai (nėra žalios/mėlynos WooCommerce numatytosios paletėje — naudojam esamą sistemą). */ .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message { border-left-color: #4055A4; } .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info { border-left-color: #726AAF; } .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error { border-left-color: #F06365; } /* `.woocommerce-error` yra
- (kiekviena klaida atskirai) — WooCommerce PATI jau nulina list-style/paddingą per `!important`, čia tik tarpas tarp kelių klaidų. */ .woocommerce .woocommerce-error li:not(:last-child), .woocommerce-page .woocommerce-error li:not(:last-child) { margin-bottom: 6px; } /* ============================================================ 2. IKONA — WooCommerce PATI parenka `content` (varnelė/įspėjimas/i) pagal tipą per plugino CSS; čia keičiam TIK poziciją, dydį, spalvą. ============================================================ */ .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before, .woocommerce-page .woocommerce-message::before, .woocommerce-page .woocommerce-info::before, .woocommerce-page .woocommerce-error::before { position: absolute; top: 18px; left: 20px; font-size: 20px; line-height: 1; } .woocommerce .woocommerce-message::before, .woocommerce-page .woocommerce-message::before { color: #4055A4; } .woocommerce .woocommerce-info::before, .woocommerce-page .woocommerce-info::before { color: #726AAF; } .woocommerce .woocommerce-error::before, .woocommerce-page .woocommerce-error::before { color: #F06365; } /* ============================================================ 3. NUORODOS pranešimo tekste (pvz. "atstatyti slaptažodį"). ============================================================ */ .woocommerce .woocommerce-message a:not(.button), .woocommerce .woocommerce-info a:not(.button), .woocommerce .woocommerce-error a:not(.button), .woocommerce-page .woocommerce-message a:not(.button), .woocommerce-page .woocommerce-info a:not(.button), .woocommerce-page .woocommerce-error a:not(.button) { color: #4055A4; font-weight: 600; text-decoration: underline; } .woocommerce .woocommerce-message a:not(.button):hover, .woocommerce .woocommerce-info a:not(.button):hover, .woocommerce .woocommerce-error a:not(.button):hover, .woocommerce-page .woocommerce-message a:not(.button):hover, .woocommerce-page .woocommerce-info a:not(.button):hover, .woocommerce-page .woocommerce-error a:not(.button):hover { color: #E16D68; } /* ============================================================ 4. MYGTUKAS PRANEŠIME (pvz. "Krepšelis" po "Pridėta į krepšelį") — WooCommerce numatytai pilkas ir plūduriuoja dešinėje (`float:right`, žr. plugino CSS); paliekam float (veikia su ilgu/trumpu tekstu greta), tik perpieškiam spalvas/formą pagal svetainės mygtukus. ============================================================ */ .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button, .woocommerce-page .woocommerce-message .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-error .button { float: right; display: inline-block; margin: 0 0 4px 16px; background: #F06365; color: #fff; border: none; border-radius: 15px; padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; transition: background-color 0.15s ease-in-out; } .woocommerce .woocommerce-message .button:hover, .woocommerce .woocommerce-info .button:hover, .woocommerce .woocommerce-error .button:hover, .woocommerce-page .woocommerce-message .button:hover, .woocommerce-page .woocommerce-info .button:hover, .woocommerce-page .woocommerce-error .button:hover { background: #E16D68; color: #fff; } /* ============================================================ 5. MOBILUS (≤480px) — mygtukas NEBEPLŪDURIUOJA greta teksto (per siaura, tekstas susispaustų į siaurą stulpelį šalia mygtuko), nukrenta žemyn per visą plotį. ============================================================ */ @media (max-width: 480px) { .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-error { padding: 16px 18px 16px 50px; font-size: 14px; } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-error::before, .woocommerce-page .woocommerce-message::before, .woocommerce-page .woocommerce-info::before, .woocommerce-page .woocommerce-error::before { top: 16px; left: 16px; font-size: 18px; } .woocommerce .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button, .woocommerce-page .woocommerce-message .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-error .button { float: none; display: block; width: 100%; margin: 12px 0 0; text-align: center; } }