/* ================================================================================================= MENIUL PANOULUI — bara, sertarul si firimiturile. La ORICE latime. DE CE E ALT FISIER DECAT `mobil.css`. Acela are un contract strict: tot ce contine sta sub `@media`, si `views/mobil.proba.js` verifica exact asta. Fisierul de fata e invers — se aplica peste tot, fiindca meniul e acelasi peste tot. UN SINGUR MENIU. Userul: «meniul nu este frumos grupat pe desktop, cum este la accesul de pe android. As vrea sa arate la fel si pe desktop. (...) In continuare vom mentine o singura versiune, cea de pe android, urmand sa fie bine si in versiunea desktop, pentru ca oricum acolo ecranele sunt mai mari.» Deci nu mai exista o bara cu douasprezece legaturi intinse plus un sertar separat: exista sertarul, si o bara subtire care spune unde esti. REGULA CARE NU SE INCALCA, scrisa cu sange in `views/facturare/_nav.ejs`: elementul aprins are EXACT aceleasi masuri ca unul stins. Userul s-a plans o data ca meniul se rearanjeaza cand il apesi, fiindca `font-bold` latea butonul si ultimul sarea pe randul urmator. Deci mai jos se schimba numai culori si umbre — zero pixeli in plus. ================================================================================================= */ /* ---------- bara de sus ---------- */ .bara-panou { /* Degradeul e abia perceptibil (doua nuante de slate-900), cat sa nu fie o suprafata moarta. */ background-image: linear-gradient(180deg, #16203a 0%, #0c1424 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), /* dunga de lumina pe muchia de sus */ 0 1px 0 rgba(0, 0, 0, 0.6), /* linia care o desparte de continut */ 0 10px 24px -14px rgba(2, 6, 23, 0.9); /* umbra care o ridica de pe pagina */ } .bara-sigla { text-shadow: 0 0 18px rgba(96, 165, 250, 0.35); transition: text-shadow 0.2s ease; } .bara-sigla:hover { text-shadow: 0 0 22px rgba(96, 165, 250, 0.55); } /* ---------- butonul care deschide sertarul ---------- */ .mobil-buton-meniu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; /* tinta de atingere confortabila si pe telefon */ border-radius: 10px; font-size: 20px; line-height: 1; background: rgba(255, 255, 255, 0.10); color: inherit; border: 0; cursor: pointer; transition: background-color 0.15s ease; } .mobil-buton-meniu:hover { background: rgba(255, 255, 255, 0.17); } .mobil-buton-meniu:active { background: rgba(255, 255, 255, 0.24); } .mobil-buton-meniu:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } /* ---------- firimiturile: unde esti, si cum te intorci ---------- */ .bara-firimituri { display: flex; align-items: center; gap: 2px; /* `min-width: 0` e ce lasa fasia sa se stramteze in loc sa impinga coltul de cont in afara ecranului. Fara el, pe telefon numele utilizatorului dispare dincolo de margine. */ min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .bara-firimituri::-webkit-scrollbar { display: none; } .firimitura { flex: 0 0 auto; padding: 4px 8px; border-radius: 7px; font-size: 13px; color: #cbd5e1; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } a.firimitura:hover { background-color: rgba(255, 255, 255, 0.09); color: #e0ecff; } a.firimitura:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } /* Locul curent. Nu e legatura — o legatura catre pagina pe care esti deja e un buton care nu face nimic, iar oamenii apasa pe el si cred ca s-a blocat ceva. */ .firimitura-aici { color: #dbeafe; font-weight: 600; background-color: rgba(96, 165, 250, 0.16); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.32); } .firimitura-sageata { flex: 0 0 auto; color: #64748b; font-size: 13px; } /* ---------- coltul din dreapta ---------- */ .bara-actiune { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 8px; border-radius: 8px; transition: background-color 0.15s ease, color 0.15s ease; } .bara-actiune:hover { background-color: rgba(255, 255, 255, 0.08); } .bara-actiune:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .bara-utilizator { padding: 3px 10px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 13px; /* Pe ecrane inguste numele se scurteaza in loc sa impinga butoanele afara. */ max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================================================= SERTARUL — singurul meniu, la orice latime ================================================================================================= */ .mobil-sertar { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 330px); display: block; padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 60; transform: translateX(-102%); /* -102% ca umbra sa nu se vada pe margine */ transition: transform 0.22s ease-out; box-shadow: 2px 0 18px rgba(0, 0, 0, 0.35); } .mobil-sertar.deschis { transform: translateX(0); } /* Fiecare legatura, un rand intreg, cu tinta de 44px. */ .mobil-sertar a { display: block; padding: 11px 12px; border-radius: 9px; font-size: 15px; line-height: 1.3; min-height: 44px; box-sizing: border-box; text-decoration: none; transition: background-color 0.14s ease; } .mobil-sertar a:hover { background-color: rgba(255, 255, 255, 0.09); } .mobil-sertar a:active { background-color: rgba(255, 255, 255, 0.15); } .mobil-sertar a:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; } .mobil-sertar a[aria-current="page"] { background-color: rgba(96, 165, 250, 0.18); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.34); } /* Grupul deschis al unui modul: se vede ca e deschis, dar nu ca ai fi PE el. */ .mobil-sertar a.sertar-grup-deschis { background-color: rgba(255, 255, 255, 0.07); } /* Copiii grupului deschis, retrasi si putin mai mici — asa se citeste ierarhia dintr-o privire. */ .mobil-sertar a.sertar-copil { margin-left: 12px; padding-left: 12px; font-size: 14px; min-height: 40px; border-left: 2px solid rgba(148, 163, 184, 0.35); border-radius: 0 9px 9px 0; } .mobil-grup-titlu { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin: 14px 4px 4px; } .mobil-grup-titlu:first-of-type { margin-top: 6px; } /* ---------- grupuri care se pliaza ---------- */ /* Userul: «la nomenclatoare, unde sunt submeniuri, acestea sunt direct expandate. nu e bine, ar trebui ca nomenclatoare sa mai necesite un click pentru expandare». Deci antetul de grup e un BUTON care pliaza, nu o legatura. Copiii stau in `hidden` — display:none al browserului, deci nu e nevoie de nicio regula proprie care sa ascunda ceva. */ .sertar-grup { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 11px 12px; border-radius: 9px; font-size: 15px; line-height: 1.3; min-height: 44px; box-sizing: border-box; background: transparent; color: #e2e8f0; transition: background-color 0.14s ease; } .sertar-grup:hover { background-color: rgba(255, 255, 255, 0.09); } .sertar-grup:active { background-color: rgba(255, 255, 255, 0.15); } .sertar-grup:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; } .sertar-grup-text { flex: 1 1 auto; } .sertar-sageata { flex: 0 0 auto; width: 12px; color: #94a3b8; font-size: 11px; transition: transform 0.16s ease; } .sertar-grup[aria-expanded="true"] .sertar-sageata { transform: rotate(90deg); } /* „Esti undeva aici", fara sa fie nevoie sa desfaci toate grupurile ca sa te regasesti. */ .sertar-punct { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 8px rgba(96, 165, 250, 0.8); } /* ---------- casuta „acasa" si intoarcerea ---------- */ .sertar-acasa, .sertar-inapoi { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 9px; margin-bottom: 4px; font-size: 14px; min-height: 42px; box-sizing: border-box; background: rgba(255, 255, 255, 0.07); color: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22); transition: background-color 0.14s ease; } .sertar-acasa:hover, .sertar-inapoi:hover { background: rgba(255, 255, 255, 0.14); } .sertar-acasa:focus-visible, .sertar-inapoi:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .sertar-cont { padding: 6px 12px 8px; font-size: 14px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sertar-desparte { height: 1px; margin: 14px 2px 2px; background: rgba(148, 163, 184, 0.25); } .sertar-inchide { width: 32px; height: 32px; border: 0; cursor: pointer; border-radius: 8px; font-size: 15px; line-height: 1; background: rgba(255, 255, 255, 0.08); color: #cbd5e1; } .sertar-inchide:hover { background: rgba(255, 255, 255, 0.16); } .sertar-inchide:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; } .mobil-voal { display: block; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.22s ease-out; } .mobil-voal.deschis { opacity: 1; pointer-events: auto; } /* Cat e sertarul deschis, pagina de sub el nu se mai deruleaza. */ body.mobil-blocat { overflow: hidden; } /* ================================================================================================= BARA SECUNDARA A UNUI MODUL (`.bara-derulabila`, azi doar facturarea). Arborele modulului sta acum si in sertar, grupat. Banda de taburi ramane pe ecran ca scurtatura: pe desktop e o apasare in loc de doua, iar pe telefon se trage cu degetul. A primit acelasi relief ca restul — umbra mica mereu prezenta, ridicare de o jumatate de pixel la trecerea mouse-ului, fila cu degrade sub butonul apasat. Stilurile stau AICI, nu in sablon, prin carligul `.bara-derulabila` — pus cand bara inca se tragea cu degetul pe telefon. Le pastram pentru cazul in care o bara de felul asta se reaprinde. ================================================================================================= */ /* BANDA DE TABURI NU MAI APARE DELOC. Userul: «cand merg pe facturare tenanti, continua sa fie afisat si vechiul meniu, cu butoane, nu doar cel expandabil». Tot ce continea e in sertar, grupat si pliabil, iar `views/mobil.proba.js` verifica rand cu rand ca niciun grup nu s-a pierdut. Se ascunde si `