, nu un

. Cu

, antetul si continutul * categoriei ajungeau unul langa altul si impingeau modalul in afara ecranului. * * Din acelasi motiv, toate elementele interfetei isi declara explicit `display`: * componenta este inserata intr-o foaie de stil veche, plina de reguli globale, * si nu trebuie sa depinda de valorile implicite ale browserului. */ .cookie-cat { display: block; } .cookie-cat__body { display: block; } .cookie-modal__body { display: block; } .cookie-service { display: block; } .cookie-service__purpose, .cookie-service__meta, .cookie-cat__desc, .cookie-modal__intro, .cookie-banner__title { display: block; } .cookie-table-wrap { display: block; } /* ---------------------------------- bifa: rezistenta la stilurile globale */ /* * Formularele sitului au regula globala `input { width: 45%; }`, gandita pentru * campurile de text asezate pe doua coloane. Aplicata unei bife, o intinde pe * jumatate de rand si arunca eticheta in afara cardului. * * Aici `!important` este justificat: regula globala vizeaza toate elementele * , iar componenta trebuie sa arate la fel oriunde este inserata. */ .privacy-ack__field { display: flex !important; flex-wrap: nowrap; align-items: flex-start; width: 100%; } .privacy-ack__field input[type="checkbox"] { flex: 0 0 17px !important; width: 17px !important; min-width: 17px !important; max-width: 17px !important; height: 17px !important; margin: 2px 0 0 !important; padding: 0 !important; border-radius: 0; } /* * Popupurile "Comanda un apel" si "Logare" isi deseneaza propria bifa rotunda * printr-un pseudo-element pe eticheta: * * .popupLogareCall .content-popup form label:before { * width: 30px; height: 30px; background: #E6E6E6; * border-radius: 50%; position: absolute; ... } * * Regula vizeaza orice din formular, deci prindea si eticheta noastra: * bulina gri se aseza peste primele litere ale textului. Aici avem o bifa reala, * randata de browser, asa ca pseudo-elementele decorative se anuleaza. Tot de * acolo vine si `display: flex` pe eticheta, care punea textul si linkul pe un * singur rand, fara sa le lase sa treaca pe randul urmator. */ .privacy-ack__field label::before, .privacy-ack__field label::after { content: none !important; display: none !important; } .privacy-ack__field label { display: block !important; flex: 1 1 auto; width: auto !important; max-width: none; min-width: 0; margin: 0 !important; padding: 0; text-align: left; overflow-wrap: break-word; } /* ------------------------- cardul de consultatie de pe pagina principala */ /* * Cardurile din `.content-item` au inaltime fixa in core.css: * * .content-item .item-cn { height: 177px; } * * Valoarea a fost aleasa pentru doua campuri si un buton, fara bifa. Cum * `overflow` ramane vizibil, orice adaos iese din chenarul gri, peste sectiunea * de oferte de dedesubt. * * Regulile de aici nu cresc cardurile - le fac loc bifei inauntru, ca sa ramana * toate la 177px si randurile sa arate exact ca inainte: * * - peste 750px bifa sta in stanga butonului "Trimite", pe acelasi rand; * - intre 751 si 1200px, unde cardul ar fi prea ingust pentru asta, formularul * primeste randul lui, pe toata latimea; * - sub 750px cardul este oricum singur pe rand, deci are voie sa creasca. */ #page-index .content-item .item-cn:last-of-type .privacy-ack { margin: 9px 0 3px; } #page-index .content-item .item-cn:last-of-type .privacy-ack__field label { font-size: 12px; line-height: 1.4; } /* * Intre 751 si 1200px cardurile stau cate trei pe rand, iar cel al formularului * este prea ingust ca bifa sa incapa langa buton: randul lui ar ramane mai inalt * decat cele de deasupra. Acolo formularul primeste randul lui, pe toata latimea * - exact ce face situl oricum sub 750px. */ @media (max-width: 1200px) and (min-width: 751px) { #page-index .content-item .item-cn:last-of-type { width: 100%; } } /* Cardul fiind acum pe toata latimea, cele doua campuri raman unul langa altul si sub 992px, unde regula generala le-ar face cat tot randul. */ @media (max-width: 992px) and (min-width: 751px) { #page-index .content-item .item-cn:last-of-type .form-group-two { width: 48%; } } /* * Bifa langa buton. Formularul este oricum un rand flex cu `flex-wrap: wrap` in * core.css, deci este suficient sa nu ii mai cerem bifei un rand intreg. */ @media (min-width: 751px) { #page-index .content-item .item-cn:last-of-type form { align-items: center; } /* `flex-basis` destul de mare cat sa nu incapa langa cele doua campuri: bifa trebuie sa ajunga pe randul butonului, nu sa se strecoare ca a treia coloana. */ #page-index .content-item .item-cn:last-of-type .privacy-ack { flex: 1 1 260px; width: auto; margin: 6px 14px 0 0; } #page-index .content-item .item-cn:last-of-type .privacy-ack__field label { font-size: 11.5px; line-height: 1.35; } } /* * Sub 750px cardul ocupa singur tot randul, deci nu are cu ce sa nu se * potriveasca: bifa ramane sub buton, iar cardul are voie sa creasca. `min-height` * pastreaza inaltimea de pana acum. Sub 500px core.css trece oricum pe `auto`. */ @media (max-width: 750px) { #page-index .content-item .item-cn:last-of-type { height: auto; min-height: 177px; } } /* ------------------------------------------------- ordinea de suprapunere */ /* * Antetul sitului foloseste valori z-index enorme (33333333333333333, * 99999999999). Browserele le limiteaza la maximul unui intreg pe 32 de biti, * 2147483647, asa ca folosim aceeasi valoare: la egalitate decide ordinea din * document, iar interfata de consimtamant este randata in footer, deci dupa antet. * * Fara asta, pe telefon antetul acoperea titlul modalului si butonul de inchidere. */ .cookie-modal { z-index: 2147483647; } .cookie-banner { z-index: 2147483646; } .cookie-fab { z-index: 2147483645; } /* * Egalitatea de mai sus se decide, in mod normal, dupa ordinea din document, iar * interfata de consimtamant este randata ultima. Ne bazam totusi pe un detaliu * subtil de randare, iar la derulare antetul devine `position: fixed` cu aceeasi * valoare limita, asa ca a ajuns sa acopere marginea de sus a modalului. * * Cat timp modalul este deschis coboram explicit straturile sitului sub el. * Acelasi lucru este necesar si cat timp bara asteapta o alegere: voalul sta la * 2147483645, iar antetul ar fi ramas deasupra lui - limpede si clicabil. * Regula este activa numai in aceste intervale - clasele sunt puse si scoase de * assets/js/cookie_consent.js - deci navigarea obisnuita ramane neschimbata. */ body.cookie-modal-open header, body.cookie-modal-open .nav-class, body.cookie-modal-open #cssload-container, body.cookie-banner-open header, body.cookie-banner-open .nav-class, body.cookie-banner-open #cssload-container { z-index: 2147483000 !important; } /* Nota scurta pentru serviciile care ruleaza in calculatoarele de asigurare. */ .cookie-service__scope { display: block; margin: 8px 0 0; padding: 7px 10px; background: #f4f7f9; border-left: 3px solid #b9c2ca; border-radius: 6px; font-size: 12.5px; line-height: 1.55; color: #5b666f; }