/* Cjenovna transparentnost — dodatna cijena uz proizvod. NACELO: dodatna cijena je REFERENCA, ne ponuda. Kupac na kartici vidi dvije brojke. Jedna je ono sto ce platiti, druga je ono sto je cijena bila na odredeni datum. Ako obje izgledaju jednako vazno, citaju se kao dvije cijene istog artikla — a to je tocno nesporazum koji ova mjera treba sprijeciti. Zato je ovdje sve prigusenije: boja, i nista drugo osim boje i velicine. Sadrzaj i uvjeti prikaza nisu stvar stila. ZASTO !important Boju i velicinu brojke ne postavlja tema nego dodatni CSS same trgovine (Customizer → Dodatni CSS), koji se ispisuje u POSLIJE svih ucitanih stilova. Na ovoj trgovini glasi: span.amount { color: rgb(221,74,31); font-size: 1.3em; } To je pravilo nad samim elementom, pa ga nasljedivanje boje s naseg omotaca ne moze nadjacati ni pri kojoj specificnosti — nasljedena vrijednost gubi od svake izravne deklaracije. Dodatni CSS je vlasnikov i ne diramo ga. Ostaje `!important`, isto kao vec kod precrtavanja nize. NE OSLANJA SE NA TEMU Boja se uzima iz varijable teme ako je ima, a ako je nema — iz neutralne sive. Tema koja ne definira nista i dalje daje citljiv prikaz. */ .cjtr-dodatne { display: block; margin-top: .4em; /* * VELICINA SE VEZE UZ KORIJEN DOKUMENTA, NE UZ CIJENU. * * `em` se mnozi s onim sto tema radi s cijenom. Na stranici artikla je cijena * 1,5em i vise, pa je nasa "0,8em" ispadala VECA od obicnog teksta — a redak * koji objasnjava cijenu ne smije biti krupniji od nje. * * Ranije je to bilo zakrpano posebnim pravilom za `.entry-summary`. Zakrpa je * radila na temama koje tu klasu imaju, a blokovske je nemaju — pa je ondje * redak opet bio prevelik. `rem` ne ovisi ni o jednoj temi. */ line-height: 1.45; text-transform: none; letter-spacing: normal; /* Boja teksta trgovine: Flatsome, pa blokovske teme, pa neutralna. Sluzi samo kao osnova iz koje se racuna prigusena vrijednost. */ --cjtr-tekst: var(--fs-color-base, var(--wp--preset--color--foreground, #222)); /* Neutralna siva kao zadana vrijednost, za preglednike bez `color-mix`. Sredina je namjerna: 5,3:1 na bijeloj i 3,5:1 na gotovo crnoj — ni na jednoj idealno, ali citljivo na obje, jer ovdje ne znamo na kojoj cemo zavrsiti. */ --cjtr-prigusena: #6b6b6b; } /* Gdje preglednik zna mijesati boje, prigusena se RACUNA iz boje teksta. Trazeno je 60-70 % kontrasta prema tekstu, sto NIJE isto sto i 65 % neprozirnosti. Izmjereno na ovoj trgovini (tekst #4a4a4a na bijeloj, 8,86:1): 82 % -> oko 61 % kontrasta na tamnoj pozadini (#fff na #111) oko 67 % Prednost racuna pred utipkanom sivom: odnos prema tekstu ostaje isti i kad trgovac promijeni boju teksta, i kad je pozadina svijetla i kad je tamna. */ @supports (color: color-mix(in srgb, currentColor 50%, transparent)) { .cjtr-dodatne { --cjtr-prigusena: color-mix(in srgb, var(--cjtr-tekst) 82%, transparent); } } /* Tamne sekcije: teme ih oznacavaju na razlicite nacine, pa pokrivamo poznate. Tema koja ih oznacava nekako trece ostaje na neutralnoj sivoj — zato je i odabrana sredina, a ne svijetla siva. */ .dark .cjtr-dodatne, .has-dark-background .cjtr-dodatne, [data-theme="dark"] .cjtr-dodatne { --cjtr-tekst: #fff; --cjtr-prigusena: rgba(255, 255, 255, .82); } /* Boja ide na SVE unutar bloka, ukljucujuci `span.amount` i oznaku valute. Prigusen tekst uz crvenu brojku bio bi gori od sadasnjeg stanja: brojka bi i dalje vukla pogled, a izgubila bi objasnjenje sto je. */ .cjtr-dodatne, .cjtr-dodatne * { color: var(--cjtr-prigusena) !important; } .cjtr-dodatna { display: block; white-space: normal; } /* Oznaka je ranije bila dodatno prozirna, a iznos dodatno taman. Oboje je maknuto: cim su dvije polovice istog retka razlicito istaknute, brojka opet vuce pogled, a tekst koji objasnjava sto ta brojka jest slabi. Redak se cita kao jedna tvrdnja ili se ne cita. */ .cjtr-dodatna-iznos { white-space: nowrap; } /* * Iznos se NE istice podebljanjem i ne smije se sam povecavati. * * Teme i dodatni CSS trgovine cesto daju `span.amount { font-weight: 700 }` i * `font-size: 1.3em`. Oboje bi unutar naseg retka ponovno izvuklo brojku iz * teksta koji je objasnjava — a sidrena cijena je referenca, ne ponuda. * * Isti razlog kao kod boje: cim su dvije polovice retka razlicito istaknute, * brojka vuce pogled, a tvrdnja se raspada na dvoje. */ .cjtr-dodatne, .cjtr-dodatne * { font-weight: 400 !important; } /* Omotac nosi jedinu velicinu u bloku, i to u `rem`. */ .cjtr-dodatne { font-size: .8rem !important; } /* Sve unutra ga slijedi — nista se ne smije samo povecati. */ .cjtr-dodatne * { font-size: 1em !important; } /* Dodatna cijena NIKAD nije precrtana — nije referenca snizenja. Ovo je zastita od tema koje precrtavaju sve unutar .price. */ .cjtr-dodatne, .cjtr-dodatne * { text-decoration: none !important; } /* * Posebnih pravila za stranicu artikla vise NEMA. * * Postojala su dok je velicina ovisila o cijeni: ondje je cijena krupna, pa je * trebalo zakrpu. Otkad je velicina u `rem`, jedno pravilo vrijedi svugdje — * u mrezi, na stranici artikla, u widgetu i u bloku. */ @media (max-width: 480px) { .cjtr-dodatne { font-size: .75rem !important; } }