/* ============================================================================ * ycm.core.css — override-uri YCM generale (non-feature) peste tema cumpărată. * Fișier PARALEL (NU patch pe core.css — vezi docs/AI-context.md regula 16). * Mirror CSS al `ycm.core.js`. Încărcat NECONDIȚIONAT în _head.html.twig DUPĂ * core.css → disponibil în dev/prod/test (în prod, core.css e înlocuit de * core.min.css care N-ar avea aceste reguli). * ========================================================================== */ /* Footer: partner logos (ANPC SAL/SOL etc.) — înlocuiește inline style="height:50px;width:auto" din `_footer.html.twig`. */ .footer-partner-logo { height: 50px; width: auto; } /* ── Bare de stare globale (mentenanță + impersonare) ─────────────────────── Două semnale permanente, fixe în capul ecranului, prezente pe ORICE pagină prin partiale globale incluse în toate cele 6 layout-uri (fiecare layout are ``-ul lui, deci un partial `position: fixed` e singura cale să apară peste tot): - `_maintenance_bar.html.twig` — platforma e sub `var/maintenance.lock` - `_impersonation_bar.html.twig` — sesiunea rulează sub identitate împrumutată POT FI ACTIVE SIMULTAN: dreptul de bypass la mentenanță se uită la impersonator, deci un YCM care impersonează în timpul mentenanței le vede pe amândouă. De-aia înălțimile sunt DOUĂ variabile însumate, nu una singură — aceleași reguli acoperă toate cele 4 combinații (niciuna / doar una / doar cealaltă / ambele), fără JS. Ordinea: mentenanța sus (stare de sistem), impersonarea sub ea (stare de sesiune). Ținem tot aici, în CSS-ul propriu — tema cumpărată (core.css) rămâne neatinsă. */ /* Default 0 pe body: variabilele există mereu, deci `calc()`-urile de mai jos sunt valide chiar și când nicio bară nu e afișată. `:has()` le ridică la 40px doar când bara respectivă chiar e în DOM. Fiind definite pe body, se moștenesc la toți descendenții — inclusiv la elementele `position: fixed`. */ body { --ycm-mnt-h: 0px; --ycm-imp-h: 0px; /* Lățimea MINIMĂ comună a butoanelor de acțiune din capul și din rândurile cardurilor („Editează", „Adaugă", „Schimbă", „Configurează", „Descarcă", „Șterge cont"). Valoarea e CALIBRATĂ pe cea mai lungă etichetă din familie — „Configurează", de pe rândul TOTP — și se aplică inclusiv ei. Așa coloana de acțiuni a fiecărui card cade pe aceeași verticală, indiferent de text. Până la 2026-09-15 era un `115px` copiat inline în 12 locuri: etichetele mai lungi îl depășeau (de aceea „Configurează" ieșea vizibil mai lat decât „Editează" de sub el), iar o ajustare cerea 12 modificări. Un derivat cu etichete mai lungi schimbă DOAR rândul ăsta. */ --ycm-action-btn-w: 150px; } body:has(.ycm-maintenance-bar) { --ycm-mnt-h: 40px; } body:has(.ycm-impersonation-bar) { --ycm-imp-h: 40px; } /* Înălțimea totală ocupată de bare — o singură sursă de adevăr pentru padding-ul body-ului ȘI pentru offset-urile chenarului temei (vezi „Anti-suprapunere"). */ body:has(.ycm-maintenance-bar), body:has(.ycm-impersonation-bar) { padding-top: calc(var(--ycm-mnt-h) + var(--ycm-imp-h)); } /* Scheletul comun al celor două bare — diferă doar culoarea și poziția pe verticală. */ .ycm-maintenance-bar, .ycm-impersonation-bar { position: fixed; left: 0; right: 0; z-index: 1045; /* peste header/sidebar sticky, sub modale (1050+) */ display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.25rem 0.9rem; font-size: 0.8125rem; line-height: 1.3; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } /* Mentenanța stă prima; impersonarea coboară exact cu înălțimea ei (0px dacă lipsește). */ .ycm-maintenance-bar { top: 0; } .ycm-impersonation-bar { top: var(--ycm-mnt-h, 0px); } /* Portocaliu-cărămiziu pentru mentenanță vs galben pentru impersonare: două stări diferite, care pot apărea una peste alta — trebuie deosebite dintr-o privire. */ .ycm-maintenance-bar { background: linear-gradient(180deg, #ffe0c2 0%, #ffd0a3 100%); color: #7a3e00; border-bottom: 1px solid #f0a058; } .ycm-impersonation-bar { background: linear-gradient(180deg, #fff6d6 0%, #ffefb8 100%); color: #6b5104; border-bottom: 1px solid #f2c94c; } /* Iconiță stânga — echilibrează vizual butonul „Ieși" din dreapta, astfel încât textul (flex:1, centrat) să pară cu adevărat centrat. */ .ycm-maintenance-bar__icon, .ycm-impersonation-bar__icon { flex: 0 0 auto; display: inline-flex; opacity: 0.85; } /* Textul ocupă mijlocul; pe ecrane înguste trunchiază elegant (bara nu se sparge pe 2 rânduri → înălțimea rămâne fixă, fără suprapuneri). */ .ycm-maintenance-bar__text, .ycm-impersonation-bar__text { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } /* Butoanele de acțiune („Dezactivează mentenanța" / „Ieși din impersonare") — pill compact, contrast puternic (ton închis pe fundal deschis), `flex: 0 0 auto` ca să rămână vizibile chiar și când textul din mijloc e trunchiat. */ .ycm-maintenance-bar__exit, .ycm-impersonation-bar__exit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .ycm-maintenance-bar__exit { background: #7a3e00; color: #ffe0c2; } .ycm-maintenance-bar__exit:hover, .ycm-maintenance-bar__exit:focus { background: #9c5200; color: #fff; } .ycm-impersonation-bar__exit { background: #6b5104; color: #fff6d6; } .ycm-impersonation-bar__exit:hover, .ycm-impersonation-bar__exit:focus { background: #856404; color: #fff; } /* ── Anti-suprapunere ───────────────────────────────────────────────────────── Padding-ul de pe body împinge doar conținutul din flow normal; elementele `position: fixed`/`sticky` ale temei ancorate la `top: 0` ar rămâne SUB bare. Le coborâm cu înălțimea TOTALĂ a barelor (suma celor două variabile — 0px, 40px sau 80px, după caz). Acoperă cele 6 layout-uri independente: - header non-admin: JS adaugă `.header-fixed` la scroll → `position: fixed; top: 0` - header admin: `position: sticky; top: 0` - sidebar (aside-sticky / aside-float): `position: fixed; top: 0` - meniul mobil (drawer): `.navbar-collapse.show` → `position: fixed; top: 0` (pe desktop `.show` NU e fixed → `top` e ignorat, deci regula e inofensivă) Selectoarele sunt duplicate pe `:has(.ycm-maintenance-bar)` și `:has(.ycm-impersonation-bar)` în loc de o listă `:has(a, b)`: lista în interiorul lui `:has()` e forgiving și ar fi mers, dar duplicarea explicită e sigură pe orice engine și rămâne lizibilă. Valoarea e aceeași sumă în ambele cazuri. */ body:has(.ycm-maintenance-bar).header-fixed #header, body:has(.ycm-maintenance-bar) #header.header-fixed, body:has(.ycm-maintenance-bar).layout-admin.header-sticky #header, body:has(.ycm-impersonation-bar).header-fixed #header, body:has(.ycm-impersonation-bar) #header.header-fixed, body:has(.ycm-impersonation-bar).layout-admin.header-sticky #header { top: calc(var(--ycm-mnt-h) + var(--ycm-imp-h)) !important; } body:has(.ycm-maintenance-bar).aside-sticky aside, body:has(.ycm-maintenance-bar).aside-float aside, body:has(.ycm-maintenance-bar) .navbar-collapse.show, body:has(.ycm-impersonation-bar).aside-sticky aside, body:has(.ycm-impersonation-bar).aside-float aside, body:has(.ycm-impersonation-bar) .navbar-collapse.show { top: calc(var(--ycm-mnt-h) + var(--ycm-imp-h)) !important; } /* ── Excepție: layout-ul `layout-padded` (panoul YCM) ──────────────────────── Tema decupează acolo tot layout-ul cu 30px, prin două reguli mai SPECIFICE decât cele generice de mai sus (`core.css`, în `@media min-width: 992px`): body.layout-admin.layout-padded { padding: 30px } (0,2,1) body.layout-admin.layout-padded .aside-start { top: 30px !important } (0,4,1) Regulile generice de deasupra sunt (0,1,1) și (0,2,2) → PIERD, deci în panoul YCM sidebar-ul rămânea la 30px și intra sub bară. `!important` nu ajută: la egalitate de `!important` decide specificitatea, nu ordinea fișierelor. Aici le rescriem cu specificitate mai mare, păstrând cei 30px ai temei ca BAZĂ și adunând înălțimea barelor peste ei — altfel am fi stricat decupajul layout-ului. Scopul e același media query: sub 992px `layout-padded` nu se aplică, iar sidebar-ul nici măcar nu e `fixed`. */ @media only screen and (min-width: 992px) { /* (0,3,1) > (0,2,1) al temei */ body.layout-admin.layout-padded:has(.ycm-maintenance-bar), body.layout-admin.layout-padded:has(.ycm-impersonation-bar) { padding-top: calc(30px + var(--ycm-mnt-h) + var(--ycm-imp-h)); } /* `aside.aside-start` (nu doar `.aside-start`) ca să urcăm la (0,4,2) > (0,4,1) — la specificitate EGALĂ ar fi decis ordinea fișierelor, ceea ce e fragil. */ body.layout-admin.layout-padded:has(.ycm-maintenance-bar) aside.aside-start, body.layout-admin.layout-padded:has(.ycm-maintenance-bar) aside.aside-end, body.layout-admin.layout-padded:has(.ycm-impersonation-bar) aside.aside-start, body.layout-admin.layout-padded:has(.ycm-impersonation-bar) aside.aside-end { top: calc(30px + var(--ycm-mnt-h) + var(--ycm-imp-h)) !important; } } /* ── Banner consimțământ cookie analytics ─────────────────────────────────── Bară full-width jos. Poziționarea/anchor/z-index/bordura + responsivitatea vin din clasele Bootstrap ale temei (`fixed-bottom border-top` pe container + grid `col-md-*` în markup). Aici DOAR ce Bootstrap nu oferă: umbra direcțională în sus + dimensiunea logo-ului. */ .ycm-cookie-consent { box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15); /* umbră în SUS — Bootstrap n-are shadow direcțional */ } .ycm-cookie-consent__logo { height: 40px; width: auto; } /* Dropdown „Contul meu" (stil „Documentation" al temei): iconuri mai mari (26px) + culoare închisă (navy), ca în original. `pictureSvg` din MenuProvider e 18px + `text-gray-600` (potrivit pt sidebar) — aici, DOAR în dropdown, îl scalăm la 26px și `color: inherit` îl face să preia culoarea închisă a item-ului (anulează grayul). Sidebar-ul rămâne 18px gri. CSS învinge width/height/color din atributul/clasa SVG. */ .ycm-account-menu .flex-none svg { width: 26px; height: 26px; color: inherit; } /* Dropdown „Contul meu" pe MOBIL (navbar colapsat, < lg): tema indentează itemele (25px stânga / 40px dreapta + marginile meniului static) — pe ecran îngust arăta ca o coloană rătăcită. Cerere 2026-09-01: distanța de la marginea stângă până la caseta iconiței = gap-ul iconiță→text (`ps-3` = 1rem) = padding-ul din dreapta; spațierea verticală vine din `py-2 py-lg-4` pe item (_header.html.twig). Desktopul (≥ lg) rămâne pe valorile temei. Media query aici fiindcă valorile temei (25/40px) n-au utilitare Bootstrap echivalente pentru „doar sub lg". */ @media (max-width: 991.98px) { .ycm-account-menu.dropdown-menu { margin-left: 0; padding-top: 0; padding-bottom: 0; } .ycm-account-menu a.dropdown-item { /* 0,5 rem: distanța marginea stângă a cardului → caseta SVG, identică și în dreapta (cerere 2026-09-01, a doua iterație — înjumătățită față de 1 rem). */ padding-left: 0.5rem; padding-right: 0.5rem; } } /* Toast-uri SOW (`$.SOW.core.toast.show`, prin `YcmCore.toast`) pe fundal DESCHIS — info (cyan), warning (galben), info-soft („notice"): tema pune `text-white` pe header și body, ilizibil pe aceste fundaluri. Fără patch pe core.js (regula YCM) → suprascriem GLOBAL culoarea textului, la nivelul întregii teme. Specificitate mai mare decât `.text-white` (ambele `!important`). Danger / success / dark rămân cu text alb (contrast bun). */ .js-toast.bg-info, .js-toast.bg-info .toast-header, .js-toast.bg-info .toast-body, .js-toast.bg-info .text-white, .js-toast.bg-info .close, .js-toast.bg-warning, .js-toast.bg-warning .toast-header, .js-toast.bg-warning .toast-body, .js-toast.bg-warning .text-white, .js-toast.bg-warning .close, .js-toast.bg-info-soft, .js-toast.bg-info-soft .toast-header, .js-toast.bg-info-soft .toast-body, .js-toast.bg-info-soft .text-white, .js-toast.bg-info-soft .close { /* `.text-white` explicit: tema împachetează MESAJUL într-un `

` în interiorul `.toast-body` (core.js ~19838) — culoarea moștenită de la părinte nu ajunge la el. */ color: #212529 !important; } /* ───────────────────────────────────────────────────────────────────────────── Ochiul de „arată parola" rămâne pe centrul INPUTULUI, nu al cutiei. Tema poziționează comutatorul cu `top: 50%` față de `.input-group-over` (`core.css`: `.input-group-over > a { position:absolute; top:50%; transform:translateY(-50%) }`). Mesajul de validare stă însă ÎNĂUNTRUL aceleiași cutii, iar când Bootstrap îl afișează cutia crește — deci 50% coboară, și iconița pleacă sub input. Scoatem mesajul din fluxul cutiei, păstrându-l unde îl cere selectorul Bootstrap (`.was-validated :invalid ~ .invalid-feedback`): poziționat absolut, imediat sub ea. Containerul își păstrează înălțimea, ochiul rămâne centrat, mesajul se vede la fel. Era un defect LATENT în toate modalele cu parolă — aceeași structură peste tot; se vedea doar în momentul în care apărea mesajul. Reparat o dată, aici. 2026-09-15. */ .input-group-over > .form-floating > .invalid-feedback { position: absolute; top: 100%; left: 0; margin-top: 0.25rem; }