i ubacuje
na svaki prelom reda u sablonu.
Zato su polje i dugme u sablonu u istom redu, a ovde se
i
neutralisu da bi flex mogao da ih poreda jedno pored drugog. */
.site-footer .veles-newsletter p {
margin: 0;
/* `contents` uklanja
iz rasporeda, pa polje i dugme postaju direktne flex stavke reda umesto da
zauzme ceo red */
display: contents;
}
.site-footer .veles-newsletter br {
display: none;
}
.site-footer .veles-newsletter__row {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: stretch;
}
/* CF7 svako polje obavija u , pa se sirina zadaje njemu */
.site-footer .veles-newsletter__row .wpcf7-form-control-wrap {
flex: 1 1 auto;
min-width: 0;
}
.site-footer .veles-newsletter input[type="email"] {
width: 100%;
min-width: 0;
height: 46px;
padding: 0 16px;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--em-rounded-sm, 4px);
}
.site-footer .veles-newsletter input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.site-footer .veles-newsletter input[type="email"]:focus {
border-color: var(--em-footer-heading);
outline: none;
}
.site-footer .veles-newsletter input[type="submit"] {
flex: 0 0 auto;
height: 46px;
padding: 0 20px;
white-space: nowrap;
font-weight: 600;
color: #18191d;
background-color: var(--em-footer-heading);
border: 0;
border-radius: var(--em-rounded-sm, 4px);
cursor: pointer;
transition: 0.25s;
}
.site-footer .veles-newsletter input[type="submit"]:hover {
background-color: #ffffff;
}
/* Saglasnost ispod reda sa poljem */
.site-footer .veles-newsletter__consent {
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.6);
}
/* Tema crta kvadratic kao `::before` sirine 20px preko inputa, koji je
nativno uzi (~13px). Zato se inputu zadaje ista sirina — tek tada
`margin-right` daje tacno onoliko razmaka koliko pise. */
.site-footer .veles-newsletter__consent input[type="checkbox"] {
width: 20px;
height: 20px;
margin-right: 20px;
vertical-align: middle;
}
/* Parent tema na hover i checked boji tekst i kvadratic u `--em-color__dark`,
sto je na tamnoj pozadini footera prakticno nevidljivo. Ovde ide bez. */
.site-footer .veles-newsletter__consent input[type="checkbox"]:hover::before,
.site-footer .veles-newsletter__consent input[type="checkbox"]:checked::before {
border-color: var(--em-footer-heading);
}
.site-footer .veles-newsletter__consent input[type="checkbox"]:hover + span,
.site-footer .veles-newsletter__consent input[type="checkbox"]:checked + span {
color: var(--em-footer-heading);
}
.site-footer .veles-newsletter__consent input[type="checkbox"]:checked::before {
background-color: var(--em-footer-heading);
}
/* Kvacica u boji pozadine, da se vidi na bez kvadratu */
.site-footer .veles-newsletter__consent input[type="checkbox"]:checked::after {
border-color: var(--em-footer-bg);
}
/* ==========================================================================
Moj nalog — razmaci u sadrzaju
==========================================================================
Tema iskljucuje WooCommerce-ov CSS u celosti
(inc/woocommerce/general.php:51 -> woocommerce_enqueue_styles => prazan niz),
a za stranicu naloga ne nudi zamenu — u style.css nema nijednog pravila za
.woocommerce-MyAccount-* ni .woocommerce-Address. Zato je sve tamo padalo na
gole browser vrednosti, pa je tekst bio zbijen, a link "Dodaj adresu" se
preklapao sa recenicom ispod.
========================================================================== */
.woocommerce-MyAccount-content {
line-height: 1.8;
}
.woocommerce-MyAccount-content p {
margin: 0 0 1.25em;
line-height: 1.8;
}
.woocommerce-MyAccount-content p:last-child {
margin-bottom: 0;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
margin: 0 0 14px;
line-height: 1.3;
}
/* Blok adrese — naslov i link "Dodaj..." u istom redu, adresa ispod */
.woocommerce-Address {
margin-bottom: 34px;
}
.woocommerce-Address:last-child {
margin-bottom: 0;
}
.woocommerce-Address-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 18px;
margin-bottom: 10px;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
margin: 0;
}
.woocommerce-Address address {
margin: 0;
line-height: 1.9;
}
/* Kolone sa adresama na sirem ekranu */
.woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid;
gap: 34px;
}
@media (min-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-Addresses {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.woocommerce-MyAccount-content .woocommerce-Address {
margin-bottom: 0;
}
}
/* Leva navigacija naloga */
.woocommerce-MyAccount-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-MyAccount-navigation li {
line-height: 1.6;
}
/* ==========================================================================
Dugme "Kategorije opreme" — bez ikonice
==========================================================================
Ikonicu tema iscrtava direktno u sablonu
(template-parts/header/category-menu.php:19), bez opcije da se iskljuci,
pa se sklanja ovde. Boja teksta se NE zadaje ovde nego kroz Customizer
(Header -> Category Menu -> Color), da ostane na jednom mestu.
========================================================================== */
.header-category__title-button .header-category__arrow {
display: none;
}
/* ==========================================================================
Pretraga — dropdown sa rezultatima
==========================================================================
Parent tema koristi senku sa 2px sirenja
(`box-shadow: 0 1px 5px 2px var(--em-input-border-color)`, style.css:5102),
sto po ivicama izgleda kao glow. Ovde se uklanja.
Ako zatreba blaga odvojenost od stranice, umesto `none` ide npr.
`0 4px 16px rgba(0, 0, 0, 0.08)` — senka nadole, bez sirenja.
========================================================================== */
.header-search-results {
box-shadow: none;
}
.site-footer .veles-newsletter .wpcf7-list-item {
margin: 0;
}
/* Poruke o uspehu i gresci */
.site-footer .wpcf7 form .wpcf7-response-output {
margin: 12px 0 0;
padding: 8px 12px;
font-size: 13px;
color: #ffffff;
border-width: 1px;
border-radius: var(--em-rounded-sm, 4px);
}
.site-footer .wpcf7-not-valid-tip {
font-size: 12px;
color: #ff9c9c;
}
/* ==========================================================================
Naslovi unutar teksta objave i stranice
==========================================================================
Parent tema zadaje globalnu skalu namenjenu hero naslovima
(ecomus/style.css:811 -> h2 = 68px, h3 = 52px, h4 = 42px). Unutar teksta
je to nesrazmerno telu od 14-16px, pa se ovde skaluje samo sadrzaj.
Naslov same objave (.entry-title) se NE dira — njega vec kontrolise
Prilagodi -> Tipografija.
========================================================================== */
.entry-content h1,
.entry-content .h1 {
font-size: 34px;
margin: 1.4em 0 0.5em;
}
.entry-content h2,
.entry-content .h2 {
font-size: 28px;
margin: 1.4em 0 0.5em;
}
.entry-content h3,
.entry-content .h3 {
font-size: 23px;
margin: 1.3em 0 0.5em;
}
.entry-content h4,
.entry-content .h4 {
font-size: 19px;
margin: 1.3em 0 0.5em;
}
.entry-content h5,
.entry-content .h5 {
font-size: 17px;
margin: 1.2em 0 0.5em;
}
.entry-content h6,
.entry-content .h6 {
font-size: 15px;
margin: 1.2em 0 0.5em;
}
.entry-content > *:first-child {
margin-top: 0;
}
@media (max-width: 767px) {
.entry-content h1,
.entry-content .h1 { font-size: 28px; }
.entry-content h2,
.entry-content .h2 { font-size: 24px; }
.entry-content h3,
.entry-content .h3 { font-size: 20px; }
}
/* ==========================================================================
Kartica proizvoda — pozadina (samo grid na pocetnoj)
==========================================================================
Widget "Product Grid" nema kontrolu za pozadinu kartice, pa ide CSS-om.
Scope je ID tog widgeta (cd24747), da Shop i kategorije ostanu netaknuti —
one su na beloj pozadini gde tamno siva ne bi imala smisla.
#2E2E34 = kartica, pozadina sekcije je oko #18181A, slike proizvoda
imaju tamnu pozadinu oko #1A1A1A — zato kartica mora biti osetno svetlija.
Za drugu nijansu menjaj samo `background-color` ispod.
Napomena: ako se widget ikad obrise i doda ponovo, dobice novi ID i ovo
pravilo prestaje da vazi — tada treba zameniti cd24747 novim ID-jem.
========================================================================== */
.elementor-element-cd24747 ul.products.product-card-layout-8 li.product .product-inner {
background-color: #3A3A42;
padding: 12px;
border-radius: 14px;
/* Parent tema crta svetlosivi okvir za bele stranice:
`ul.products.product-card-layout-8 li.product .product-inner
{ border: 1px solid #ececec }` (ecomus/woocommerce.css:1992).
Na tamnoj sekciji to izgleda kao nezeljena linija, pa se ovde gasi. */
border: 0;
}
/* ==========================================================================
VeleSavetnik karusel — okvir oko slika
==========================================================================
Slika je `.entry-header > a > img` (klasa attachment-large), bez omotaca
.post-thumbnail — pa pravilo `.post-thumbnail img { border-radius }` iz
parent teme na nju NE vazi. Provereno: nijedan od 20 CSS fajlova koje
stranica ucitava ne postavlja border, border-radius ni overflow na tu
sliku, tako da nema zaobljenja koje okvir treba da prati.
`box-sizing: border-box` je nuzan: slike su content-box sa `max-width:100%`,
pa bi okvir od 1px inace dodao 2px i sliku izgurao preko kontejnera.
Scope je ID widgeta (79dba90). Ako se widget obrise i doda ponovo, dobija
novi ID i pravilo prestaje da vazi.
========================================================================== */
.elementor-element-79dba90 .entry-header img {
box-sizing: border-box;
border: 1px solid #808080;
}
/* ==========================================================================
VeleSavetnik karusel — link "Pogledaj"
==========================================================================
Parent tema (ecomus/style.css) na `.em-button-subtle` zadaje:
--em-button-color: #000000; <- tekst, crn
--em-button-color-hover: var(--em-color__primary); <- hover, bez #cca560
--em-button-border-color: var(--em-button-color); <- podvlaka prati tekst
border-width: 0 0 1px 0;
a `.em-button` ih koristi kroz `color: var(--em-button-color)`.
Zato je dovoljno promeniti SAMO --em-button-color: menja se i tekst i
podvlaka. Hover se NE dira — vec razresava u bez.
Specificnost: ovde (0,3,0) prema teminih (0,1,0), pa pravilo prolazi.
Scope je ID widgeta, jer na belim stranicama (blog lista) crn tekst je
ispravan i tamo ne treba menjati.
========================================================================== */
.elementor-element-79dba90 .entry-read-more .em-button-subtle {
--em-button-color: #ffffff;
}
/* ==========================================================================
Polje pretrage u zaglavlju — siva pozadina
==========================================================================
Parent tema (ecomus/style.css) na `.header-search__form` crta:
background-color: var(--em-input-bg-color); <- :root = #ffffff
border-color: var(--em-input-border-color); <- :root = #EBEBEB
border-width: var(--em-input-border-width); <- :root = 1px
Zato se menjaju PROMENLJIVE, i to samo na tom elementu — iste promenljive
koriste sva polja na sajtu, pa bi globalna izmena obojila i kasu i forme.
Pozadina zaglavlja je #18191d. Ovde:
#2A2A30 = polje (svetlije od zaglavlja)
#3A3A41 = okvir (nijansu svetliji od polja)
Boja teksta je NUZNA, ne kozmetika: `input[type=text]` i njegov
`::placeholder` oba koriste `color: var(--em-input-color)`, a podrazumevana
je tamna jer je polje bilo belo. Bez ovoga bi tekst bio nevidljiv.
========================================================================== */
.site-header .header-search__form {
--em-input-bg-color: #2A2A30;
--em-input-border-color: #3A3A41;
--em-input-border-width: 1px;
}
.site-header .header-search__field {
--em-input-color: #ffffff;
}
/* Odvojena pravila: browser koji ne razume jedan selektor odbacuje ceo blok */
.site-header .header-search__field::placeholder {
--em-input-color: rgba(255, 255, 255, 0.55);
}
.site-header .header-search__field::-moz-placeholder {
--em-input-color: rgba(255, 255, 255, 0.55);
}
/* ==========================================================================
Pretraga — X dugme, dugme pretrage, nazivi kategorija
==========================================================================
1) X (close) je `.close-search-modal__results.em-button-outline`. Tema mu
zadaje `--em-button-color: #000000` (style.css), sto je na sivom polju
nevidljivo. Okvir kruzica je vec svetao (#EBEBEB) i ostaje.
2) Dugme pretrage nasledjuje `--em-button-bg-color: #000000` iz :root.
Hover se NE dira — `.header-search__button` vec ima
`--em-button-bg-color-hover: var(--em-color__primary)` = bez.
`:root` ima i `--em-button-border-color: var(--em-button-bg-color)`,
pa okvir sam prati pozadinu.
3) Nazivi kategorija: tema ima pravilo za podebljanje, ali sa greskom u
kucanju klase — trazi `.em-col-categoties`, a plugin ispisuje
`.em-col-categories`. Zato njihovo pravilo nikad ne uhvati.
Kontejner rezultata ima i klasu `modal__content-results`, gde vazi
`flex-direction: column`, pa `padding-bottom` razdvaja naziv od broja.
========================================================================== */
.site-header .header-search__form .close-search-modal__results {
--em-button-color: #ffffff;
/* Hover: tema daje beli X na CRNOM krugu (.em-button-outline).
Sve tri promenljive se zadaju izricito — `--em-button-border-color-hover`
je na .em-button-outline definisan kao var(--em-button-bg-color-hover) i
razresen JEDNOM, tamo gde bg-hover jos iznosi #000000. Menjanje samo
bg-hover-a ostavilo bi crn okvir.
X postaje taman jer beo na svetlosivom krugu ne bi bio citljiv. */
--em-button-bg-color-hover: #B0B0B8;
--em-button-border-color-hover: #B0B0B8;
--em-button-color-hover: #2A2A30;
}
.site-header .header-search__button {
--em-button-bg-color: #4A4A52;
/* :root ima `--em-button-border-color: var(--em-button-bg-color)`. Ta se
promenljiva razresava JEDNOM, na :root, gde bg jos iznosi #000000 —
pa se nasledjuje kao crna. Menjanje bg-a nize u stablu je ne dira.
Zato se okvir mora zadati izricito. `transparent` umesto `border: 0`
da se ne promeni velicina dugmeta za 2px. */
--em-button-border-color: transparent;
}
.header-search-results .em-col-categories .result-title {
font-weight: 600;
padding-bottom: 20px;
}
/* Isti razmak i u tabu Proizvodi: naziv iznad, cena ispod.
Cena ide u `.result-desc` (posts.php:260), naziv u `.result-title`.
Kolona je `.em-col-products` — provereno da tema za nju nema svoje pravilo. */
.header-search-results .em-col-products .result-title {
padding-bottom: 20px;
}
/* ==========================================================================
Objava — sirina sadrzaja i razmaci oko slika
==========================================================================
Zatecene vrednosti (parent tema):
.em-container max-width 1500px / 1540px (po tacki preloma)
figure margin: 1em 0 2em
.wp-block-image margin-bottom: 2em; display: inline-block
p margin-bottom: 1.5em (~24px)
.entry-content h2 margin-bottom 0.5em (~14px, iz child teme)
Vazno: `.wp-block-image` je `inline-block`, pa se njegove vertikalne
margine NE sklapaju sa susedima — sabiraju se. Zato je gornja margina
manja od donje: iznad slike vec stoji margina pasusa ili naslova.
Racunica da svi razmaci oko slike ispadnu jednakih 44px:
tekst -> slika: 24 (p) + 20 = 44
slika -> tekst: 44
naslov -> slika: 14 (h2) + 30 = 44
========================================================================== */
.single-post #site-content .em-container {
max-width: 1400px;
}
/* Slike i tabele na istoj sirini kao tekst, centrirane.
`display: block` je nuzan: parent tema slike drzi kao `inline-block`, gde
`margin: auto` ne centrira. Prelaskom na `block` ukljucuje se i sklapanje
margina sa susedima, pa 44px sa obe strane daje jednak razmak svuda:
tekst -> slika: max(24 pasus, 44) = 44
naslov -> slika: max(14 naslov, 44) = 44
slika -> tekst: 44
Zato posebno pravilo za "naslov + slika" vise nije potrebno. */
.single-post .entry-content .wp-block-image,
.single-post .entry-content .wp-block-table {
display: block;
max-width: 820px;
margin-top: 44px;
margin-bottom: 44px;
margin-left: auto;
margin-right: auto;
}
/* Tekst na citljivoj sirini, slike ostaju preko cele sirine kontejnera.
Red od 1400px je oko 200 znakova — previse za udobno citanje; 820px
daje oko 90, sto je blizu preporucenog raspona. */
.single-post .entry-content > p,
.single-post .entry-content > h1,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > h5,
.single-post .entry-content > h6,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol {
line-height: 1.85;
}
/* Velicina teksta u objavi.
Parent tema nema pravilo za `.entry-content`, pa tekst nasledjuje
`body { font-size: 14px }` — premalo za citanje duzeg teksta.
Naslovi imaju svoje zadate velicine (h2 28px, h3 23px...) pa ih ovo
ne dodiruje. Tabela ide za nijansu manje, jer je gusca po prirodi. */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol {
font-size: 17px;
}
.single-post .entry-content .wp-block-table td,
.single-post .entry-content .wp-block-table th {
font-size: 16px;
}
/* Featured slika na istoj sirini kao sadrzaj.
Zaobljenje se NE zadaje ovde — parent tema vec ima
`.entry-single-thumbnail, .entry-single-thumbnail img
{ border-radius: var(--em-image-rounded-featured-post) }`,
a ta promenljiva iznosi 10px, tacno koliko i `--em-image-rounded`
koji zaobljava slike u sadrzaju. Dodavanje bi bilo duplo.
Element je `display: flex` sa `width: 100%`, pa je blok-nivoa i
`margin: auto` ga centrira cim se zada `max-width`. */
.single-post .entry-single-thumbnail {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* Korpa: prazan pasus koji ostaje posle uklanjanja napomene o postarini.
Sablon ga uvek ispisuje kao omotac, pa bez ovoga ostaje prazan razmak.
Vidi `woocommerce_shipping_estimate_html` u functions.php. */
.woocommerce-cart .woocommerce-shipping-destination {
display: none;
}
/* Zaglavlje obicnih stranica na mobilnom — izjednacavanje sa WooCommerce.
Opcija `page_header_padding_top/bottom` NIJE responzivna (jedna vrednost
za sve ekrane), za razliku od `shop_header_padding_*` koja ima
desktop/tablet/mobile. Desktop i tablet su vec izjednaceni kroz opciju
(41/39); ovde se dodaje samo mobilna vrednost, ista kao kod shopa.
Specificnost: (0,2,0) prema generisanom `.page-header` (0,1,0). */
@media (max-width: 767px) {
.page-header.page-header--page {
padding-top: 29px;
padding-bottom: 29px;
}
}
/* ==========================================================================
Obavestenje "Nijedan proizvod ne odgovara izabranim kriterijumima" — crveno
==========================================================================
Parent tema boji sve info poruke plavo:
.woocommerce-info, .woocommerce-noreviews, p.no-comments
{ background-color: #ecf6ff; color: #0f86ff } (ecomus/woocommerce.css)
Opseg je NAMERNO suzen na `.woocommerce-no-products-found`, jer istu klasu
`woocommerce-info` koriste i druge poruke koje ne smeju biti crvene —
npr. "Imate kupon?" na kasi i prijava postojeceg kupca.
Specificnost (0,2,0) prema teminih (0,1,0) je nuzna: ecomus/woocommerce.css
se ucitava POSLE child teme, pa bi pri izjednacenoj specificnosti pobedio.
========================================================================== */
.woocommerce-no-products-found .woocommerce-info {
background-color: #fdecec;
color: #d63638;
}
/* Praćenje porudžbine — rečenica o statusu na veličinu susednog naslova.
` ` je nasledjivao osnovnih 12px iz body-ja, pa je bio
sitniji od svega oko sebe. Vrednosti su preuzete od naslova ispod njega:
`.woocommerce .woocommerce-order-details__title { font-size: 24px;
font-weight: 500 }` (ecomus/woocommerce.css:9029) — da izgledaju kao par.
Klasa se koristi iskljucivo u woocommerce/templates/order/tracking.php,
pa pravilo ne moze da procuri na druge stranice. */
.order-info {
font-size: 24px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 30px;
}
/* Prazna mini-korpa: razmak izmedju teksta i dugmeta "Pogledajte ponudu".
------------------------------------------------------------------------
Markup (woocommerce_mini_cart, prazno stanje):
.woocommerce-mini-cart__empty-message > h4 + p + a.em-button
Tema NE zadaje nista za taj pasus — jedini izvor razmaka je globalno
`p { margin-bottom: 1.5em }` (ecomus/style.css:864). Pri osnovnoj velicini
slova od 12px to je svega ~18px, pa uz naslov od 28px i dugme visine
punog buttona deluje kao da razmaka nema.
Provereno da nema konkurencije: pretrazen je SVAKI stylesheet koji strana
ucitava — nijedan drugi ne dira `p` marginu, i nijedno pravilo ne gadja
`.woocommerce-mini-cart__empty-message p`. Specificnost ovde je 0,2,1
naspram 0,0,1 globalnog pravila, pa ovo pobedjuje bez obzira na redosled
ucitavanja (ecomus/woocommerce.css se ucitava posle child teme).
Margina ide na (blok element) namerno — dugme je `display: inline-flex`,
pa bi `margin-top` na njemu zavisio od nacina na koji browser racuna liniju. */
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message p {
margin-bottom: 30px; /* fabricki: 1.5em (~18px) */
}
/* Pracenje porudzbine: razmak izmedju uvodnog teksta i prvog polja.
------------------------------------------------------------------------
Sablon je iz WooCommerce jezgra (order/form-tracking.php, tema ga NE
prepisuje). U njemu su i uvodni tekst i oba polja isti element — :
Da biste pratili svoju narudzbinu... ...