/* Flashcards LMS — stratul de aspect modern * ============================================================================ * * CE E FIȘIERUL ACESTA ȘI DE CE STĂ DEOPARTE * * Foaia de bază, `app.css`, spune ce e fiecare lucru: un card e o cutie albă * cu ramă, un buton e un dreptunghi colorat, bara din stânga e o coloană. * Fișierul de față nu schimbă nimic din toate astea. El adaugă deasupra ceea * ce se vede, dar nu se poate numi: lumina care cade oblic peste o cutie, * ridicarea de sub deget, licărul care trece peste un card când treci cu * mausul, respirația unei buline. * * Stau despărțite dinadins, din trei pricini. * * Întâi, pentru că se pot stinge. Tot ce urmează atârnă de o clasă pusă pe * `` — `fclms-fx` și surorile ei. Cine nu vrea efectele le oprește din * Aspect → Efecte, iar aplicația se întoarce, rând cu rând, la cum arăta * înainte. Nu rămâne nimic pe jumătate. * * Al doilea, pentru că nu scriu nicio culoare de mână. Tot ce e colorat aici * iese din variabilele alese în Aspect: `--fc-primary`, `--fc-accent`, * `--fc-surface`. Un site care își pune roșu și crem primește degradeuri * roșu-crem, nu degradeurile cu care s-a întâmplat să fie scris fișierul. * Asta e și deosebirea dintre o interfață care arată croită pe casă și una * care arată luată de-a gata. * * Al treilea, pentru că se încarcă după foaia de bază și după variabilele * scrise din server. La greutate egală de selector, câștigă cel scris ultimul * — deci nu e nevoie de niciun `!important` ca să răzbată, iar reglajele din * Aspect (mărimea literei din butoane, rotunjirea, aerul dintre secțiuni) * rămân ale lor: aici nu se atinge niciunul. * * ---------------------------------------------------------------------------- * CELE PATRU CLAPE * * .fclms-fx — clapa mare. Fără ea, tot fișierul tace. * .fclms-fx-grad — degradeurile și fundalul cu lumină. * .fclms-fx-glass — sticla mată de sub bare și ferestre. * .fclms-fx-motion — mișcarea: intrări, ridicări, licăre, respirații. * * Cine ține la baterie sau la un ecran vechi stinge mișcarea și păstrează * culorile. Cine lucrează pe proiector stinge sticla și păstrează restul. * * ---------------------------------------------------------------------------- * DESPRE `prefers-reduced-motion` * * Blocul de la sfârșitul fișierului oprește mișcarea pentru oricine a cerut-o * din sistemul lui de operare, oricât ar fi bifat administratorul. Nu e o * politețe: pentru unii oameni, o interfață care alunecă și pulsează dă * amețeală adevărată. Setarea lor bate setarea noastră, întotdeauna. */ /* =========================================================================== * 1. UNELTELE — degradeuri, curbe de mișcare, umbre în straturi * =========================================================================== * * Toate ies din culorile alese. `--fc-primary-rgb` și `--fc-accent-rgb` există * deja în foaia veche, tocmai ca tentele să se poată calcula; aici se * calculează. * * Curbele nu sunt `ease` de-a gata. `ease` pornește repede și se moaie la * sfârșit, iar lucrurile care se mișcă așa par ușoare, de hârtie. Curbele de * mai jos pornesc mai domol și se opresc lung — mișcarea capătă greutate, iar * greutatea e ce deosebește o interfață care pare vie de una care doar * clipește. */ :root { /* Degradeul casei: culoarea de bază, luminată spre colț. */ --fcm-grad: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-soft) 100%); --fcm-grad-soft: linear-gradient(135deg, rgba(var(--fc-primary-rgb), .10) 0%, rgba(var(--fc-accent-rgb), .10) 100%); /* Degradeul cald: pentru izbândă, puncte, sărbătoare. */ --fcm-grad-warm: linear-gradient(135deg, var(--fc-accent) 0%, var(--fc-primary-soft) 120%); --fcm-grad-ink: linear-gradient(120deg, var(--fc-ink) 0%, var(--fc-primary) 100%); /* Lumina de sus, pusă peste o suprafață colorată: dă rotunjime. */ --fcm-sheen: linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%); /* Umbrele în straturi: una strânsă lângă obiect, una largă și moale. */ --fcm-shadow-1: 0 1px 2px rgba(var(--fc-primary-rgb), .06), 0 2px 8px -2px rgba(var(--fc-primary-rgb), .08); --fcm-shadow-2: 0 2px 4px rgba(var(--fc-primary-rgb), .07), 0 12px 28px -8px rgba(var(--fc-primary-rgb), .16); --fcm-shadow-3: 0 4px 8px rgba(var(--fc-primary-rgb), .08), 0 24px 48px -12px rgba(var(--fc-primary-rgb), .22); --fcm-glow: 0 6px 20px -6px rgba(var(--fc-primary-rgb), .55); --fcm-glow-warm: 0 6px 20px -6px rgba(var(--fc-accent-rgb), .55); /* Curbele. „soft” pentru culori, „out” pentru intrări, „spring” pentru apăsări. */ --fcm-ease: cubic-bezier(.4, 0, .2, 1); --fcm-ease-out: cubic-bezier(.16, 1, .3, 1); --fcm-spring: cubic-bezier(.34, 1.56, .64, 1); --fcm-fast: .16s; --fcm-mid: .28s; --fcm-slow: .5s; /* Sticla: cât de tare se încețoșează ce e dedesubt. */ --fcm-blur: 16px; --fcm-veil: rgba(255, 255, 255, .72); /* Grăunțele: o pânză fină peste fundal, ca hârtia bună. Fără ea, degradeurile mari fac dungi pe ecranele care nu au destule culori — și, mai ales, arată prea netede ca să pară făcute de om. */ --fcm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); } /* =========================================================================== * 2. FUNDALUL APLICAȚIEI * =========================================================================== * * Trei lumini blânde prin colțuri și o pânză de grăunțe peste tot. Nu se vede * ca fundal — se vede ca aer. Culoarea aleasă în Aspect rămâne dedesubt, deci * un site cu hârtie crem primește lumini calde, unul cu hârtie rece primește * lumini reci, fără ca cineva să fi ales asta de două ori. * * Lumina din stânga sus e din culoarea casei; cea din dreapta sus, din * culoarea de accent. Se întâlnesc pe la mijlocul paginii și nu se ating * niciodată de tot — de acolo vine impresia de adâncime. */ body.fclms-fx.fclms-fx-grad .fclms-app { background-color: var(--fc-paper); background-image: var(--fcm-grain), radial-gradient(1100px 620px at 8% -12%, rgba(var(--fc-primary-rgb), .13), transparent 62%), radial-gradient(820px 520px at 102% -6%, rgba(var(--fc-accent-rgb), .12), transparent 58%), radial-gradient(900px 700px at 50% 118%, rgba(var(--fc-primary-rgb), .07), transparent 62%); background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-size: 160px 160px, auto, auto, auto; background-blend-mode: soft-light, normal, normal, normal; } /* Selecția cu mausul: culoarea casei, subțiată. Albastrul browserului e singurul lucru dintr-o interfață bine croită care spune „nu m-a atins nimeni aici”. */ body.fclms-fx .fclms-app ::selection, body.fclms-fx .fclms-modal ::selection { background: rgba(var(--fc-primary-rgb), .22); color: var(--fc-ink); } /* Bara de derulare, în tonul paginii. Numai înăuntrul panourilor noastre: bara ferestrei rămâne a sistemului, cum se cuvine. */ body.fclms-fx .fclms-app *::-webkit-scrollbar { width: 10px; height: 10px; } body.fclms-fx .fclms-app *::-webkit-scrollbar-track { background: transparent; } body.fclms-fx .fclms-app *::-webkit-scrollbar-thumb { background: rgba(var(--fc-primary-rgb), .22); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } body.fclms-fx .fclms-app *::-webkit-scrollbar-thumb:hover { background: rgba(var(--fc-primary-rgb), .38); background-clip: content-box; } /* =========================================================================== * 3. BARA DIN STÂNGA * =========================================================================== * * Aici se uită omul de zeci de ori pe zi, deci aici se simte cel mai tare * dacă interfața e îngrijită sau nu. * * Ce se schimbă: * — fundalul devine sticlă mată, cu o dungă de lumină pe muchia din dreapta; * — rândul deschis capătă degradeu, o umbră colorată sub el și un semn * vertical în stânga, ca un semn de carte; * — pictograma fiecărui rând stă într-o bulină rotundă care se colorează * sub cursor — mărunt, dar e ce deosebește un meniu de o listă de * legături; * — rândurile intră unul după altul la deschiderea paginii, la o zecime de * secundă distanță. Nu e o paradă: ochiul prinde astfel ordinea meniului * din prima privire, în loc să caute prin el. */ @media (min-width: 1025px) and (hover: hover) { /* * STICLA SE FACE DIN CULOAREA MENIULUI, NU DIN A CASEI * * Prima scriere a acestei reguli punea aici o tentă aproape străvezie din * culoarea principală, ca și cum bara ar fi fost întotdeauna albă. Pe * site-urile cu bară albă mergea. Pe cele cu bară închisă la culoare — * bleumarin, cărbune — bara se lumina, iar scrisul ei, alb prin alegerea * administratorului, rămânea alb: litere albe pe fundal aproape alb. * * Sticla nu are voie să hotărască ce culoare are bara. Are voie doar s-o * subțieze. De aceea fundalul de aici pornește din `--fc-menu-bg` — exact * culoarea aleasă — și îi ia din opacitate atât cât să se vadă ce trece pe * dedesubt. O bară închisă rămâne închisă, una deschisă rămâne deschisă, * iar scrisul se citește în amândouă cazurile. * * Primul rând e plasa: browserele care nu știu `color-mix` îl păstrează pe * el și primesc bara opacă, fără sticlă. Mai bine fără efect decât cu * scris necitibil. */ body.fclms-fx.fclms-fx-glass .fclms-app--shell > .fclms-side { background-color: var(--fc-menu-bg, var(--fc-surface)); /* * 92%, nu 78%. La 78% o bară bleumarin, așezată peste o pagină * deschisă, ieșea gri-albăstrui — adică o cu totul altă culoare decât * cea aleasă în Aspect. Sticla trebuie să lase impresia de sticlă, nu * să vopsească bara din nou: la 92% se ghicește ce trece pe dedesubt, * dar culoarea rămâne recunoscută. */ background-color: color-mix(in srgb, var(--fc-menu-bg, var(--fc-surface)) 92%, transparent); background-image: linear-gradient(180deg, rgba(var(--fc-menu-text-rgb, 30, 42, 56), .04) 0%, transparent 42%); backdrop-filter: blur(var(--fcm-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--fcm-blur)) saturate(1.6); box-shadow: 8px 0 32px -24px rgba(0, 0, 0, .45); } /* Muchia din dreapta, ca o rază subțire care se stinge spre jos. */ /* Muchia din dreapta, ca o rază care se stinge spre jos. Se face din scrisul meniului, nu din culoarea casei: pe o bară închisă, o dungă închisă la culoare nu s-ar fi văzut deloc. */ body.fclms-fx.fclms-fx-grad .fclms-app--shell > .fclms-side::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(var(--fc-menu-text-rgb, 30, 42, 56), .28), rgba(var(--fc-menu-text-rgb, 30, 42, 56), .04) 60%, transparent); pointer-events: none; } /* Rândurile de meniu: culoarea se schimbă domol, iar rândul se duce un pic la dreapta sub cursor, ca și cum ar ieși în întâmpinare. */ body.fclms-fx .fclms-side .fclms-tabs__main, body.fclms-fx .fclms-side .fclms-tabs__subitem { position: relative; transition: background-color var(--fcm-fast) var(--fcm-ease), color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-fast) var(--fcm-ease-out), box-shadow var(--fcm-mid) var(--fcm-ease); } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__main:hover, body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__subitem:hover { transform: translateX(3px); } /* Rândul deschis: degradeu, umbră colorată și semn de carte în stânga. */ body.fclms-fx.fclms-fx-grad .fclms-side .fclms-tabs__main.is-active, body.fclms-fx.fclms-fx-grad .fclms-side .fclms-tabs__head.is-active .fclms-tabs__main { background-image: var(--fcm-grad), var(--fcm-sheen); box-shadow: var(--fcm-glow); } body.fclms-fx .fclms-side .fclms-tabs__main.is-active::before { content: ""; position: absolute; left: -6px; top: 50%; width: 3px; height: 0; border-radius: 999px; background: var(--fc-accent); transform: translateY(-50%); animation: fcm-mark var(--fcm-mid) var(--fcm-ease-out) forwards; } @keyframes fcm-mark { to { height: 58%; } } /* Bulina pictogramei. Rotundă, ștearsă în odihnă, colorată sub cursor. `line-height: 1` fiindcă emoji-urile de sistem au înălțimi diferite și fără el bulina iese ovală pe Windows. */ body.fclms-fx .fclms-side .fclms-tab__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; font-size: 15px; line-height: 1; /* Din scrisul meniului, nu din culoarea casei: bulina trebuie să se vadă și pe bară albă, și pe bară bleumarin. */ background: rgba(var(--fc-menu-text-rgb, 30, 42, 56), .09); transition: background-color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-mid) var(--fcm-spring); } body.fclms-fx .fclms-side .fclms-tabs__main:hover .fclms-tab__icon { background: rgba(var(--fc-accent-rgb), .20); } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__main:hover .fclms-tab__icon { transform: scale(1.12) rotate(-6deg); } body.fclms-fx .fclms-side .fclms-tabs__main.is-active .fclms-tab__icon { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset; } /* Intrarea rândurilor, în cascadă. Șase pași ajung: un meniu mai lung de atât nu se mai citește ca listă oricum, iar restul rândurilor apar deodată, cu ultima întârziere. */ body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > * { animation: fcm-slide-in .42s var(--fcm-ease-out) backwards; } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > *:nth-child(1) { animation-delay: .02s; } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > *:nth-child(2) { animation-delay: .06s; } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > *:nth-child(3) { animation-delay: .10s; } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > *:nth-child(4) { animation-delay: .14s; } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > *:nth-child(5) { animation-delay: .18s; } body.fclms-fx.fclms-fx-motion .fclms-side .fclms-tabs__list > *:nth-child(n+6) { animation-delay: .22s; } /* Rândul de utilizator din josul barei: poza capătă un inel în degradeu. */ body.fclms-fx .fclms-side__user { transition: background-color var(--fcm-fast) var(--fcm-ease); } body.fclms-fx.fclms-fx-grad .fclms-side__avatar { box-shadow: 0 0 0 2px var(--fc-surface), 0 0 0 4px rgba(var(--fc-primary-rgb), .35); transition: box-shadow var(--fcm-mid) var(--fcm-ease); } body.fclms-fx.fclms-fx-grad .fclms-side__user:hover .fclms-side__avatar { box-shadow: 0 0 0 2px var(--fc-surface), 0 0 0 4px var(--fc-accent); } } @keyframes fcm-slide-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } /* =========================================================================== * 4. BARA DE SUS * =========================================================================== * * Pe ecran îngust bara de sus e tot meniul, deci primește aceeași sticlă. * Dunga de dedesubt nu mai e o linie dreaptă de la un capăt la altul, ci una * care se stinge spre margini: se vede că bara se termină, fără o muchie * tăiată cu rigla. */ body.fclms-fx.fclms-fx-glass .fclms-app > .fclms-topbar { backdrop-filter: blur(var(--fcm-blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--fcm-blur)) saturate(1.5); } /* * Dunga de sub bară e desenată ca strat de fundal, nu ca element `::before`. * Un `::before` așezat absolut ar fi cerut `position: relative` pe bară, iar * bara e `sticky`: scrisă altfel, s-ar fi dezlipit de vârful ecranului la * derulare. Un strat de fundal înalt de un pixel, prins de marginea de jos, * face același lucru fără să atingă așezarea. */ body.fclms-fx.fclms-fx-grad .fclms-app > .fclms-topbar { background-image: linear-gradient(90deg, transparent, rgba(var(--fc-primary-rgb), .38) 18%, rgba(var(--fc-accent-rgb), .38) 82%, transparent); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; } /* Sigla, scrisă în degradeu. Un singur lucru dintr-o pagină are voie să fie scris așa; dacă ar fi două, n-ar mai fi niciunul. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-logo { background-image: var(--fcm-grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Clapa de meniu de pe telefon: cele trei linii se strâng la apăsare. */ body.fclms-fx .fclms-burger > span { transition: transform var(--fcm-mid) var(--fcm-spring), opacity var(--fcm-fast) var(--fcm-ease); } body.fclms-fx .fclms-burger[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.fclms-fx .fclms-burger[aria-expanded="true"] > span:nth-child(2) { opacity: 0; transform: scaleX(.2); } body.fclms-fx .fclms-burger[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* =========================================================================== * 5. CARDURILE * =========================================================================== * * Un card era o cutie albă cu ramă. Rămâne o cutie albă cu ramă — dar capătă * trei lucruri pe care ochiul le citește ca „bine făcut”, fără să le poată * numi. * * Întâi, o dungă de lumină pe muchia de sus, dinăuntru. E felul în care arată * o suprafață luminată de sus: partea de sus prinde lumina, restul nu. Un * pixel de alb translucid, și cutia încetează să mai fie un dreptunghi decupat. * * Al doilea, ridicarea sub cursor. Nu mult — trei pixeli. Mai mult ar face * pagina să sară, mai puțin nu s-ar simți. * * Al treilea, licărul: o bandă albă oblică ce trece o dată peste card când * cursorul intră. Nu se repetă cât stă mausul deasupra — un licăr care se * repetă e o reclamă, unul care trece o dată e o suprafață lucioasă. */ body.fclms-fx .fclms-app .fclms-card, body.fclms-fx .fclms-app .fclms-row, body.fclms-fx .fclms-app .fclms-stat, body.fclms-fx .fclms-app .fclms-set-card, body.fclms-fx .fclms-app .fclms-deck-card { position: relative; transition: transform var(--fcm-mid) var(--fcm-ease-out), box-shadow var(--fcm-mid) var(--fcm-ease), border-color var(--fcm-mid) var(--fcm-ease); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-card::after, body.fclms-fx.fclms-fx-grad .fclms-app .fclms-stat::after, body.fclms-fx.fclms-fx-grad .fclms-app .fclms-set-card::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); pointer-events: none; z-index: 2; } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-card:hover, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-stat:hover, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-set-card:hover, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-deck-card:hover { transform: translateY(-3px); box-shadow: var(--fcm-shadow-3); border-color: rgba(var(--fc-primary-rgb), .28); } /* Rândurile de listă se ridică mai puțin: sunt multe și una lângă alta, iar o listă în care fiecare rând sare cu trei pixeli obosește. */ body.fclms-fx.fclms-fx-motion .fclms-app .fclms-row:hover { transform: translateY(-1px); box-shadow: var(--fcm-shadow-2); border-color: rgba(var(--fc-primary-rgb), .22); } /* Licărul. Se pune pe o clasă adăugată de script, nu pe `:hover`: așa trece o singură dată, la intrarea cursorului, și nu se aprinde din nou dacă mausul se plimbă peste card. */ body.fclms-fx.fclms-fx-motion .fclms-app .fclms-card.fcm-shine::before, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-set-card.fcm-shine::before, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-deck-card.fcm-shine::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); background-size: 260% 100%; pointer-events: none; z-index: 1; animation: fcm-shine .85s var(--fcm-ease) forwards; } @keyframes fcm-shine { from { background-position: 180% 0; opacity: 0; } 18% { opacity: 1; } to { background-position: -80% 0; opacity: 0; } } /* =========================================================================== * 6. BUTOANELE * =========================================================================== * * Butonul plin primește degradeu în locul culorii netede și o umbră în * culoarea lui, nu una cenușie. O umbră cenușie sub un buton albastru arată * ca o decupare lipită pe hârtie; o umbră albastră arată ca lumină. * * Mărimea literei, rotunjirea și îngroșarea NU se ating aici: sunt reglaje * din Aspect și rămân ale administratorului. */ body.fclms-fx .fclms-app .fclms-btn, body.fclms-fx .fclms-modal .fclms-btn { position: relative; overflow: hidden; isolation: isolate; transition: background-color var(--fcm-fast) var(--fcm-ease), background-position var(--fcm-slow) var(--fcm-ease), border-color var(--fcm-fast) var(--fcm-ease), box-shadow var(--fcm-mid) var(--fcm-ease), transform .09s var(--fcm-ease-out), filter var(--fcm-fast) var(--fcm-ease); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-btn--primary, body.fclms-fx.fclms-fx-grad .fclms-modal .fclms-btn--primary { background-image: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-soft) 52%, var(--fc-primary) 100%); background-size: 200% 100%; background-position: 0 0; box-shadow: var(--fcm-glow); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-btn--primary:hover, body.fclms-fx.fclms-fx-grad .fclms-modal .fclms-btn--primary:hover { background-position: 100% 0; box-shadow: 0 10px 26px -8px rgba(var(--fc-primary-rgb), .7); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-btn--primary:hover, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-btn--success:hover { transform: translateY(-1px); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-btn--success { background-image: linear-gradient(135deg, var(--fc-success) 0%, color-mix(in srgb, var(--fc-success) 70%, #ffffff) 100%); box-shadow: 0 6px 18px -6px rgba(46, 125, 50, .55); } /* Butonul-fantomă: rama se colorează, fundalul se umple cu o tentă. */ body.fclms-fx .fclms-app .fclms-btn--ghost:hover { border-color: rgba(var(--fc-primary-rgb), .45); box-shadow: 0 4px 14px -6px rgba(var(--fc-primary-rgb), .35); } /* Apăsarea: butonul coboară și își strânge umbra. Amândouă odată, altfel pare că se mută, nu că se apasă. */ body.fclms-fx .fclms-app .fclms-btn:active, body.fclms-fx .fclms-modal .fclms-btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 6px -3px rgba(var(--fc-primary-rgb), .5); } /* Butonul stins nu se mai ridică și nu mai licărește. */ body.fclms-fx .fclms-app .fclms-btn[disabled], body.fclms-fx .fclms-modal .fclms-btn[disabled] { transform: none !important; box-shadow: none !important; filter: grayscale(.35); } /* * UNDA DE SUB DEGET * * Cercul care se lățește din locul apăsat. Îl pune scriptul, cu poziția * exactă a clicului scrisă în două variabile; fără poziție, unda ar porni din * mijloc oriunde ai apăsa, și tocmai asta o face să pară falsă. */ body.fclms-fx.fclms-fx-motion .fcm-ripple { position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; z-index: 0; animation: fcm-ripple .55s var(--fcm-ease-out) forwards; } /* Pe fundal deschis, unda albă nu se vede: acolo se folosește cerneala. */ body.fclms-fx.fclms-fx-motion .fclms-btn--ghost .fcm-ripple, body.fclms-fx.fclms-fx-motion .fclms-btn--danger .fcm-ripple, body.fclms-fx.fclms-fx-motion .fclms-pill .fcm-ripple, body.fclms-fx.fclms-fx-motion .fclms-tab .fcm-ripple { background: radial-gradient(circle, rgba(var(--fc-primary-rgb), .30) 0%, rgba(var(--fc-primary-rgb), 0) 70%); } @keyframes fcm-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* =========================================================================== * 7. PASTILE, FILE, INSIGNE * =========================================================================== */ body.fclms-fx .fclms-app .fclms-pill, body.fclms-fx .fclms-app .fclms-tab, body.fclms-fx .fclms-app .fclms-chip { position: relative; overflow: hidden; transition: background-color var(--fcm-fast) var(--fcm-ease), color var(--fcm-fast) var(--fcm-ease), border-color var(--fcm-fast) var(--fcm-ease), box-shadow var(--fcm-mid) var(--fcm-ease), transform var(--fcm-fast) var(--fcm-ease-out); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-pill:hover, body.fclms-fx.fclms-fx-motion .fclms-app .fclms-tab:hover { transform: translateY(-1px); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-pill.is-active, body.fclms-fx.fclms-fx-grad .fclms-app .fclms-tab.is-active { background-image: var(--fcm-grad), var(--fcm-sheen); box-shadow: var(--fcm-glow); } /* Insignele colorate primesc o tentă în degradeu, nu una netedă. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-chip--ok { background-image: linear-gradient(135deg, rgba(46, 125, 50, .16), rgba(46, 125, 50, .06)); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-chip--danger { background-image: linear-gradient(135deg, rgba(192, 57, 43, .16), rgba(192, 57, 43, .06)); } /* =========================================================================== * 8. CÂMPURILE DE SCRIS * =========================================================================== * * La atingere, câmpul capătă un inel moale în culoarea casei, iar eticheta de * deasupra lui se colorează. E singurul fel prin care omul știe, fără să se * uite la cursor, în ce câmp scrie — pe un formular lung, contează. */ body.fclms-fx .fclms-app .fclms-field input, body.fclms-fx .fclms-app .fclms-field select, body.fclms-fx .fclms-app .fclms-field textarea, body.fclms-fx .fclms-modal .fclms-field input, body.fclms-fx .fclms-modal .fclms-field textarea { transition: border-color var(--fcm-fast) var(--fcm-ease), box-shadow var(--fcm-mid) var(--fcm-ease), background-color var(--fcm-fast) var(--fcm-ease); } body.fclms-fx .fclms-app .fclms-field input:focus, body.fclms-fx .fclms-app .fclms-field select:focus, body.fclms-fx .fclms-app .fclms-field textarea:focus { box-shadow: 0 0 0 4px rgba(var(--fc-primary-rgb), .14), 0 4px 16px -8px rgba(var(--fc-primary-rgb), .5); } body.fclms-fx .fclms-app .fclms-field:focus-within > span { color: var(--fc-primary); } body.fclms-fx .fclms-app .fclms-field > span { transition: color var(--fcm-fast) var(--fcm-ease); } /* =========================================================================== * 9. TABELELE * =========================================================================== */ body.fclms-fx .fclms-app .fclms-table tbody tr { transition: background-color var(--fcm-fast) var(--fcm-ease); } body.fclms-fx .fclms-app .fclms-table tbody tr:hover { background: rgba(var(--fc-primary-rgb), .045); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-table thead th { background: linear-gradient(180deg, rgba(var(--fc-primary-rgb), .05), transparent); } /* =========================================================================== * 10. CARTONAȘUL * =========================================================================== * * Cartonașul e inima aplicației: acolo stă omul minute în șir. Primește * perspectivă adevărată — nu o umbră mai mare, ci un plan 3D — și o lumină * fină în colțul de sus, ca o foaie plastifiată ținută sub bec. * * Intrarea nu mai e o simplă alunecare: cartonașul vine dinspre adânc, se * rotește un grad și se oprește. E ce face un teanc de fișe adevărate când * scoți una de deasupra. */ body.fclms-fx .fclms-app .fclms-study { perspective: 1400px; } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-flashcard { animation: fcm-card-in .42s var(--fcm-ease-out); transform-style: preserve-3d; will-change: transform; } @keyframes fcm-card-in { from { opacity: 0; transform: translateY(18px) rotateX(7deg) scale(.97); } to { opacity: 1; transform: none; } } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-flashcard { position: relative; overflow: hidden; background-image: radial-gradient(120% 90% at 0% 0%, rgba(var(--fc-primary-rgb), .06), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(var(--fc-accent-rgb), .06), transparent 55%); box-shadow: var(--fcm-shadow-3); } /* Lucirea din colț: o lentilă albă, foarte ștearsă, ca pe un carton lăcuit. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-flashcard::before { content: ""; position: absolute; top: -40%; left: -10%; width: 70%; height: 120%; background: linear-gradient(100deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%); transform: rotate(8deg); pointer-events: none; } /* Verdictul: cartonașul se colorează pe muchie când răspunsul a fost dat. Se stinge singur — culoarea rămasă pe ecran ar concura cu următorul card. */ body.fclms-fx.fclms-fx-motion .fclms-app .fclms-flashcard.is-right { animation: fcm-right .6s var(--fcm-ease-out); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-flashcard.is-wrong { animation: fcm-wrong .5s var(--fcm-ease); } @keyframes fcm-right { 0% { box-shadow: var(--fcm-shadow-3); } 30% { box-shadow: 0 0 0 3px rgba(46, 125, 50, .55), 0 18px 40px -14px rgba(46, 125, 50, .6); transform: scale(1.012); } 100% { box-shadow: var(--fcm-shadow-3); transform: none; } } @keyframes fcm-wrong { 0%, 100% { transform: translateX(0); box-shadow: var(--fcm-shadow-3); } 20% { transform: translateX(-7px); box-shadow: 0 0 0 3px rgba(192, 57, 43, .5), var(--fcm-shadow-3); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } } /* Variantele de răspuns: se ridică sub cursor, se aprind la alegere. */ body.fclms-fx .fclms-app .fclms-choice { transition: border-color var(--fcm-fast) var(--fcm-ease), background-color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-fast) var(--fcm-ease-out), box-shadow var(--fcm-mid) var(--fcm-ease); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-choice:hover { transform: translateX(4px); box-shadow: 0 6px 18px -10px rgba(var(--fc-primary-rgb), .6); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-choice.is-correct { animation: fcm-pop .38s var(--fcm-spring); } @keyframes fcm-pop { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } } /* Verdictul scris, cu emoji înaintea lui. Un „Bravo!" fără nimic lângă el arată ca un mesaj de sistem; cu o bulină de sărbătoare în față, arată ca un răspuns dat unui om. */ body.fclms-fx.fclms-fx-emoji .fclms-app .fclms-verdict--ok::before { content: "🎉 "; } body.fclms-fx.fclms-fx-emoji .fclms-app .fclms-verdict--no::before { content: "💪 "; } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-verdict--ok { background-image: linear-gradient(135deg, rgba(46, 125, 50, .20), rgba(46, 125, 50, .07)); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-verdict--no { background-image: linear-gradient(135deg, rgba(192, 57, 43, .18), rgba(192, 57, 43, .06)); } /* =========================================================================== * 11. SETURILE ȘI PACHETELE * =========================================================================== * * Coperta unui set fără poză era un degradeu neted. Rămâne degradeu, dar * capătă un desen dedesubt: cercuri concentrice, decupate în SVG, care se * mișcă încet la trecerea cursorului. Un set fără copertă nu mai arată a * lipsă, ci a hotărâre. * * Seturile cu poză nu sunt atinse: desenul stă pe un strat separat, sub * fotografie, iar fotografia îl acoperă. */ body.fclms-fx .fclms-app .fclms-set-card { overflow: hidden; } body.fclms-fx .fclms-app .fclms-set-card__cover { position: relative; transition: transform var(--fcm-slow) var(--fcm-ease-out), filter var(--fcm-mid) var(--fcm-ease); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-set-card:hover .fclms-set-card__cover { transform: scale(1.06); filter: saturate(1.15); } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-set-card__cover::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.4'%3E%3Ccircle cx='30' cy='30' r='16'/%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3Ccircle cx='150' cy='120' r='22'/%3E%3Ccircle cx='150' cy='120' r='40'/%3E%3Cpath d='M0 150 L60 96 L120 150'/%3E%3C/g%3E%3C/svg%3E"); background-size: 180px 180px; opacity: .9; pointer-events: none; } /* Vălul de jos: pe el se citește titlul dacă vreodată urcă peste copertă. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-set-card__cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .22)); pointer-events: none; } /* Lacătul de pe un set închis: pulsează foarte încet, cât să nu treacă neobservat, dar nu atât cât să enerveze. */ body.fclms-fx.fclms-fx-motion .fclms-app .fclms-lock { animation: fcm-breathe 3.2s var(--fcm-ease) infinite; } @keyframes fcm-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } /* Dunga colorată din stânga pachetului: se îngroașă sub cursor. */ body.fclms-fx .fclms-app .fclms-deck-card::before { transition: width var(--fcm-mid) var(--fcm-ease-out); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-deck-card:hover::before { width: 7px; } /* =========================================================================== * 12. CIFRELE — statistici, puncte, bare * =========================================================================== * * Cifra mare dintr-o statistică e scrisă în degradeu. E singurul loc din * aplicație unde asta se cuvine: cifra e conținutul, nu decorul. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-stat strong, body.fclms-fx.fclms-fx-grad .fclms-app .fclms-summary__score { background-image: var(--fcm-grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-stat--accent strong { background-image: linear-gradient(120deg, var(--fc-accent), var(--fc-primary)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Cifra se numără de la zero la deschiderea paginii; scriptul o face, dar pornirea trebuie să fie invizibilă, altfel se vede un „0" o clipă. */ body.fclms-fx.fclms-fx-motion .fclms-app .fclms-stat strong.fcm-counting { font-variant-numeric: tabular-nums; } /* Punctele din bară: bulina se rotește o dată când numărul crește. */ body.fclms-fx .fclms-app .fclms-points { transition: transform var(--fcm-mid) var(--fcm-spring); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-points.is-bumped { animation: fcm-bump .55s var(--fcm-spring); } @keyframes fcm-bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-points.is-bumped .fclms-points__star { animation: fcm-spin .6s var(--fcm-ease-out); display: inline-block; } @keyframes fcm-spin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.3); } to { transform: rotate(360deg) scale(1); } } /* Barele de progres: umplute în degradeu, cu un licăr care le străbate atâta vreme cât mai au de crescut. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-bar__fill, body.fclms-fx.fclms-fx-grad .fclms-app .fclms-chart__bar { background-image: var(--fcm-sheen); box-shadow: 0 1px 3px rgba(0, 0, 0, .12) inset; } body.fclms-fx .fclms-app .fclms-bar__track, body.fclms-fx .fclms-app .fclms-spine { box-shadow: 0 1px 2px rgba(var(--fc-primary-rgb), .10) inset; } body.fclms-fx .fclms-app .fclms-bar__fill { transition: width .7s var(--fcm-ease-out); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-chart__bar { transition: background-color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-fast) var(--fcm-ease-out); transform-origin: bottom; } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-chart__col:hover .fclms-chart__bar { transform: scaleY(1.04) scaleX(1.15); } /* Banda cutiilor Leitner: fiecare bucată capătă lumină de sus. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-spine span { background-image: var(--fcm-sheen); } /* =========================================================================== * 13. FERESTRE ȘI ANUNȚURI * =========================================================================== */ body.fclms-fx.fclms-fx-glass .fclms-modal-back { backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); } body.fclms-fx.fclms-fx-motion .fclms-modal-back { animation: fcm-fade .22s var(--fcm-ease) ; } body.fclms-fx.fclms-fx-motion .fclms-modal { animation: fcm-modal-in .34s var(--fcm-spring); } @keyframes fcm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes fcm-modal-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } } body.fclms-fx .fclms-modal { box-shadow: var(--fcm-shadow-3); } /* Anunțul plutitor: vine de jos, cu o dungă colorată în stânga și un semn înaintea textului. */ body.fclms-fx.fclms-fx-motion .fclms-notice.fclms-overlay { animation: fcm-toast-in .38s var(--fcm-spring); } @keyframes fcm-toast-in { from { opacity: 0; transform: translate(-50%, 22px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } } body.fclms-fx .fclms-notice { border-left: 3px solid transparent; } body.fclms-fx .fclms-notice--success { border-left-color: var(--fc-success); } body.fclms-fx .fclms-notice--error { border-left-color: var(--fc-danger); } body.fclms-fx.fclms-fx-emoji .fclms-notice--success::before { content: "✅ "; } body.fclms-fx.fclms-fx-emoji .fclms-notice--error::before { content: "⚠️ "; } /* Clopoțelul: se clatină când are ceva de spus. */ body.fclms-fx.fclms-fx-motion .fclms-app .fclms-bell:has(.fclms-bell__count:not([hidden])) .fclms-bell__icon { animation: fcm-ring 4s var(--fcm-ease) infinite; transform-origin: top center; } @keyframes fcm-ring { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(11deg); } 80% { transform: rotate(-9deg); } 84% { transform: rotate(6deg); } 88% { transform: rotate(-4deg); } 92% { transform: rotate(2deg); } } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-bell__count { background-image: linear-gradient(135deg, var(--fc-danger), color-mix(in srgb, var(--fc-danger) 60%, var(--fc-accent))); box-shadow: 0 2px 8px -2px rgba(192, 57, 43, .8); } /* =========================================================================== * 14. LOCURILE GOALE * =========================================================================== * * Un panou gol e locul unde interfața are cel mai mult de pierdut: omul a * ajuns undeva și n-a găsit nimic. O ramă punctată cu un rând de text spune * „nu e nimic aici”. Un desen mare, șters, în culoarea casei, spune „încă nu * e nimic aici” — și e cu totul altceva. */ body.fclms-fx .fclms-app .fclms-empty { position: relative; overflow: hidden; border-color: rgba(var(--fc-primary-rgb), .25); background-image: radial-gradient(420px 220px at 50% -30%, rgba(var(--fc-primary-rgb), .10), transparent 70%), radial-gradient(320px 200px at 100% 130%, rgba(var(--fc-accent-rgb), .10), transparent 70%); } body.fclms-fx.fclms-fx-emoji .fclms-app .fclms-empty::before { content: "🗂️"; display: block; font-size: 42px; line-height: 1; margin-bottom: 14px; filter: grayscale(.15) drop-shadow(0 6px 10px rgba(var(--fc-primary-rgb), .25)); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-empty::before { animation: fcm-float 4.5s var(--fcm-ease) infinite; } @keyframes fcm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* =========================================================================== * 15. INTRAREA CONȚINUTULUI LA DERULARE * =========================================================================== * * Clasa o pune scriptul, pe cardurile care intră în ecran. Elementul pornește * șters și puțin mai jos, apoi urcă la locul lui. Odată sosit, clasa rămâne: * nimic nu se mai mișcă la derularea înapoi — o pagină în care lucrurile * intră de fiecare dată când treci pe lângă ele e obositoare. */ body.fclms-fx.fclms-fx-motion .fcm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--fcm-ease-out), transform .55s var(--fcm-ease-out); will-change: opacity, transform; } body.fclms-fx.fclms-fx-motion .fcm-reveal.is-in { opacity: 1; transform: none; } /* =========================================================================== * 16. AȘTEPTAREA * =========================================================================== * * Cât timp se aduce ceva de la server, în locul cutiei goale stă o formă * cenușie peste care trece o lumină. Nu grăbește nimic, dar face așteptarea * să pară scurtă — și, mai important, arată că aplicația n-a înțepenit. */ body.fclms-fx .fcm-skeleton { background-color: rgba(var(--fc-primary-rgb), .07); background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); background-size: 220% 100%; background-repeat: no-repeat; border-radius: 8px; animation: fcm-sweep 1.35s var(--fcm-ease) infinite; } @keyframes fcm-sweep { from { background-position: -120% 0; } to { background-position: 220% 0; } } /* =========================================================================== * 17. SĂRBĂTOAREA * =========================================================================== * * Pânza de confetti stă peste tot, fără să prindă clicurile. Se aduce în * pagină doar la nevoie și se ia înapoi după câteva secunde: o pânză lăsată * acolo ar ține o suprafață de desenat cât e ziua de lungă, degeaba. */ .fcm-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100002; } /* =========================================================================== * 18. BUTONUL DE SUNET * =========================================================================== * * Stă lângă clopoțel, cu aceeași înfățișare ca el. Nu e o setare din panou, * ci una a fiecăruia, ținută în browserul lui: sunetul e felul în care omul * își simte propria unealtă, nu o hotărâre a administratorului. Cine * lucrează în bibliotecă îl stinge și rămâne stins pe calculatorul lui. */ body.fclms-fx .fclms-app .fcm-sound { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; font-size: 15px; line-height: 1; cursor: pointer; /* Stau pe bară, deci se socotesc din culorile barei — la fel ca bulinele pictogramelor de mai sus, și din aceeași pricină. */ background: rgba(var(--fc-menu-text-rgb, 30, 42, 56), .09); color: inherit; transition: background-color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-mid) var(--fcm-spring); } body.fclms-fx .fclms-app .fcm-sound:hover { background: rgba(var(--fc-accent-rgb), .28); } body.fclms-fx.fclms-fx-motion .fclms-app .fcm-sound:hover { transform: scale(1.08); } body.fclms-fx .fclms-app .fcm-sound.is-off { opacity: .55; } body.fclms-fx .fclms-app .fcm-sound:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; } /* =========================================================================== * 19. AMĂNUNTELE CARE SE VĂD ULTIMELE * =========================================================================== */ /* Titlurile de secțiune: o dungă scurtă în degradeu în stânga lor. Nu o subliniere — o subliniere taie titlul de text; dunga îl leagă de el. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-toolbar h1 { position: relative; padding-left: 14px; } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-toolbar h1::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 68%; border-radius: 999px; background: linear-gradient(180deg, var(--fc-primary), var(--fc-accent)); transform: translateY(-50%); } /* Firimiturile de drum: săgeata dintre ele se mută la dreapta sub cursor. */ body.fclms-fx .fclms-app .fclms-breadcrumb button { transition: color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-fast) var(--fcm-ease-out); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-breadcrumb button:hover { transform: translateX(-2px); } /* Bifele și butoanele-comutator își iau culoarea casei. */ body.fclms-fx .fclms-app input[type="checkbox"], body.fclms-fx .fclms-app input[type="radio"], body.fclms-fx .fclms-modal input[type="checkbox"] { accent-color: var(--fc-primary); } /* Legăturile: sublinierea crește dinspre stânga, nu apare dintr-odată. */ body.fclms-fx .fclms-app .fclms-link { background-image: linear-gradient(var(--fc-primary), var(--fc-primary)); background-repeat: no-repeat; background-position: left bottom; background-size: 0 1.5px; text-decoration: none; transition: background-size var(--fcm-mid) var(--fcm-ease-out); } body.fclms-fx .fclms-app .fclms-link:hover { background-size: 100% 1.5px; text-decoration: none; } /* Pozele din aplicație: colțuri rotunjite și o ramă foarte fină, ca să nu se piardă pe fundal alb. Fotografiile deschise arătau altfel decupate. */ body.fclms-fx .fclms-app .fclms-flashcard__content img, body.fclms-fx .fclms-app .fclms-flashcard__media img { border-radius: 12px; box-shadow: 0 1px 0 rgba(var(--fc-primary-rgb), .12), var(--fcm-shadow-2); } /* =========================================================================== * 20. CÂND OMUL A CERUT LINIȘTE * =========================================================================== * * Setarea din sistemul de operare bate orice bifă din Aspect. Se opresc toate * animațiile fișierului — culorile, sticla și degradeurile rămân, fiindcă ele * nu se mișcă și nu supără pe nimeni. */ @media (prefers-reduced-motion: reduce) { body.fclms-fx *, body.fclms-fx *::before, body.fclms-fx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } body.fclms-fx .fcm-reveal { opacity: 1 !important; transform: none !important; } body.fclms-fx .fcm-confetti { display: none; } } /* La tipărire — diplome, facturi — nu rămâne nimic din toate astea. */ @media print { body.fclms-fx .fclms-app { background: #fff !important; } body.fclms-fx .fcm-confetti, body.fclms-fx .fcm-sound { display: none !important; } body.fclms-fx .fclms-app .fclms-card, body.fclms-fx .fclms-app .fclms-stat { box-shadow: none !important; transform: none !important; } } /* =========================================================================== * 21. BUTONUL DE HÂRTIE — deschis, întunecat, sau după ceas * =========================================================================== * * Stă lângă cel de sunet și are aceeași înfățișare. Trei trepte, nu două: a * treia — „după ceas” — e cea care contează cu adevărat, fiindcă telefoanele * și calculatoarele își întunecă singure ecranul seara, iar aplicația are de * ce să meargă cu ele. Cine vrea altfel apasă o dată sau de două ori. */ body.fclms-fx .fclms-app .fcm-mode { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; font-size: 15px; line-height: 1; cursor: pointer; background: rgba(var(--fc-menu-text-rgb, 30, 42, 56), .09); color: inherit; transition: background-color var(--fcm-fast) var(--fcm-ease), transform var(--fcm-mid) var(--fcm-spring); } body.fclms-fx .fclms-app .fcm-mode:hover { background: rgba(var(--fc-accent-rgb), .28); } body.fclms-fx.fclms-fx-motion .fclms-app .fcm-mode:hover { transform: scale(1.08) rotate(-12deg); } body.fclms-fx .fclms-app .fcm-mode:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; } /* * Trecerea dintr-o paletă în alta. * * Culorile nu sar: se sting una într-alta într-o pătrime de secundă. Fără * asta, apăsarea butonului dă senzația că pagina s-a reîncărcat. Regula stă * pe elementele mari — foaia, cardurile, barele — nu pe tot ce mișcă: o * tranziție pusă pe `*` ar întârzia și culorile care trebuie să fie * instantanee, cum e cea de sub cursor. */ html.fcm-swapping body.fclms-fx .fclms-app, html.fcm-swapping body.fclms-fx .fclms-app .fclms-card, html.fcm-swapping body.fclms-fx .fclms-app .fclms-row, html.fcm-swapping body.fclms-fx .fclms-app .fclms-stat, html.fcm-swapping body.fclms-fx .fclms-app .fclms-side, html.fcm-swapping body.fclms-fx .fclms-app .fclms-topbar, html.fcm-swapping body.fclms-fx .fclms-app .fclms-flashcard, html.fcm-swapping body.fclms-fx .fclms-app .fclms-set-card, html.fcm-swapping body.fclms-fx .fclms-app .fclms-deck-card, html.fcm-swapping body.fclms-fx .fclms-app input, html.fcm-swapping body.fclms-fx .fclms-app textarea, html.fcm-swapping body.fclms-fx .fclms-app select { transition: background-color .26s var(--fcm-ease), color .26s var(--fcm-ease), border-color .26s var(--fcm-ease) !important; } /* =========================================================================== * 22. PALETA DE COMANDĂ * =========================================================================== * * Ctrl+K (⌘K pe Mac) deschide o cutie de căutare peste pagină, din care se * sare oriunde în aplicație scriind două-trei litere. * * DE CE ÎNTR-UN LMS * * Meniul cursantului are opt rubrici; al administratorului are nouăsprezece * file, multe cu sub-file. Peste o anumită mărime, un meniu încetează să mai * fie o hartă și devine o listă prin care se caută — iar căutatul cu ochiul * printr-o listă e cel mai lent lucru pe care îl face omul într-o interfață. * Cine știe unde vrea să ajungă scrie și ajunge; cine nu știe folosește * meniul mai departe, neatins. * * Paleta nu inventează nimic: își ia rândurile chiar din meniul de pe pagină, * la fiecare deschidere. O rubrică nouă apare în ea fără să fi fost scrisă * nicăieri, iar una la care omul n-are drept nu apare — fiindcă nu e nici în * meniul lui. */ .fcm-palette-back { position: fixed; inset: 0; z-index: 100003; display: grid; align-items: start; justify-items: center; padding: 12vh 20px 20px; background: rgba(15, 20, 26, .45); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } body.fclms-fx.fclms-fx-motion .fcm-palette-back { animation: fcm-fade .18s var(--fcm-ease); } .fcm-palette { width: 100%; max-width: 560px; background: var(--fc-surface); color: var(--fc-ink); border: 1px solid var(--fc-line); border-radius: 16px; box-shadow: var(--fcm-shadow-3); overflow: hidden; font-family: var(--fc-font); } body.fclms-fx.fclms-fx-motion .fcm-palette { animation: fcm-modal-in .3s var(--fcm-spring); } .fcm-palette__field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--fc-line); } .fcm-palette__field span { font-size: 16px; line-height: 1; opacity: .75; } .fcm-palette__field input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--fc-ink); padding: 0; } .fcm-palette__field input::placeholder { color: var(--fc-muted); } /* Tasta scrisă pe o „clapă”, ca pe o tastatură adevărată. */ .fcm-key { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--fc-line); border-bottom-width: 2px; background: rgba(var(--fc-primary-rgb), .05); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; color: var(--fc-muted); white-space: nowrap; } .fcm-palette__list { max-height: 46vh; overflow-y: auto; padding: 8px; } .fcm-palette__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; } .fcm-palette__row em { font-style: normal; color: var(--fc-primary); font-weight: 700; } .fcm-palette__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; font-size: 15px; line-height: 1; background: rgba(var(--fc-primary-rgb), .08); } .fcm-palette__where { margin-left: auto; font-size: 12px; color: var(--fc-muted); white-space: nowrap; } /* Rândul sub degetul tastaturii. Nu „sub cursor”: într-o paletă se umblă cu săgețile, iar mausul doar mută semnul, nu ține un al doilea. */ .fcm-palette__row.is-on { background: rgba(var(--fc-primary-rgb), .10); } .fcm-palette__row.is-on .fcm-palette__icon { background: rgba(var(--fc-accent-rgb), .22); } .fcm-palette__none { padding: 26px 16px; text-align: center; color: var(--fc-muted); font-size: 14px; } .fcm-palette__foot { display: flex; gap: 14px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--fc-line); font-size: 12px; color: var(--fc-muted); background: rgba(var(--fc-primary-rgb), .03); } @media (max-width: 560px) { .fcm-palette__foot { display: none; } } /* =========================================================================== * 23. FIRUL DE SUS * =========================================================================== * * O dungă subțire care traversează vârful ferestrei cât timp aplicația * vorbește cu serverul. Nu e o roată care se învârte: roata spune „așteaptă”, * dunga spune „se lucrează, iar lucrul ăsta are un capăt”. * * Merge în două timpi. Întâi urcă repede la vreo optzeci la sută — atâta cât * se poate ghici cinstit — apoi se târăște. Când răspunsul sosește, sare la * capăt și se stinge. Așa nu minte niciodată: nu ajunge la sfârșit înainte * să se fi terminat treaba, dar nici nu stă pe loc, ceea ce ar părea blocaj. */ .fcm-wire { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100004; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--fc-primary), var(--fc-accent)); box-shadow: 0 0 12px rgba(var(--fc-accent-rgb), .7); opacity: 0; pointer-events: none; transition: width .25s var(--fcm-ease-out), opacity .3s var(--fcm-ease); } .fcm-wire.is-on { opacity: 1; } /* =========================================================================== * 24. LUMINA CARE URMEAZĂ CURSORUL * =========================================================================== * * Pe cardurile mari, o pată de lumină foarte ștearsă se ține după maus. * Poziția ei o scrie scriptul în două variabile; restul e o singură pată * radială, așezată deasupra fundalului și dedesubtul textului. * * E cel mai discret efect din toată foaia și, în același timp, cel după care * se recunoaște o interfață făcută în ultimii ani. Trebuie să fie discret: * dacă se vede că e o pată, e prea tare. */ body.fclms-fx.fclms-fx-grad.fclms-fx-motion .fclms-app .fcm-lit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 320px circle at var(--fcm-mx, 50%) var(--fcm-my, 50%), rgba(var(--fc-primary-rgb), .09), transparent 62% ); opacity: 0; transition: opacity var(--fcm-mid) var(--fcm-ease); pointer-events: none; z-index: 0; } body.fclms-fx.fclms-fx-grad.fclms-fx-motion .fclms-app .fcm-lit:hover::after { opacity: 1; } /* Cardurile care au deja o muchie luminată pe `::after` o cedează unui strat propriu, ca să nu se calce cele două. */ body.fclms-fx.fclms-fx-grad.fclms-fx-motion .fclms-app .fclms-card.fcm-lit::after, body.fclms-fx.fclms-fx-grad.fclms-fx-motion .fclms-app .fclms-stat.fcm-lit::after, body.fclms-fx.fclms-fx-grad.fclms-fx-motion .fclms-app .fclms-set-card.fcm-lit::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent) left top / 100% 1px no-repeat, radial-gradient(320px circle at var(--fcm-mx, 50%) var(--fcm-my, 50%), rgba(var(--fc-primary-rgb), .09), transparent 62%); opacity: 1; /* * Coborât sub conținut. Muchia luminată stătea deasupra tuturor, ceea ce * la un fir de un pixel nu supără pe nimeni; pata de lumină e însă cât * tot cardul și, lăsată sus, ar fi trecut peste scris. */ z-index: 0; } /* =========================================================================== * 25. SFATURILE * =========================================================================== * * Browserul desenează singur o casetă galbenă pentru orice `title`, dar o * face după o secundă și jumătate de așteptare, cu fontul sistemului și în * colțul lui. Sunt trei lucruri pe care nu le poate schimba nimeni și care se * văd, toate trei, ca fiind „ale browserului”, nu ale aplicației. * * Caseta de aici vine în două zecimi de secundă, poartă litera casei și stă * deasupra sau dedesubtul butonului, după cât loc e. `title` se ia de pe * element cât timp e arătată — altfel s-ar vedea amândouă — și se pune la loc * după, ca cititoarele de ecran să-l găsească acolo unde îl caută. */ .fcm-tip { position: fixed; z-index: 100005; max-width: 260px; padding: 7px 11px; border-radius: 9px; background: var(--fc-ink); color: var(--fc-paper); font-family: var(--fc-font); font-size: 12.5px; line-height: 1.45; box-shadow: var(--fcm-shadow-2); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s var(--fcm-ease), transform .14s var(--fcm-ease-out); } .fcm-tip.is-on { opacity: 1; transform: none; } /* =========================================================================== * 26. ANUNȚURILE, UNUL PESTE ALTUL * =========================================================================== * * Anunțul plutitor stă lipit de josul ferestrei, la mijloc. Două deodată — * „salvat” și îndată „nu am putut trimite poza” — se așezau unul peste altul * și se citea numai cel de deasupra. * * Înălțimea o socotește scriptul, care știe câte sunt și cât de înalt e * fiecare; aici rămâne doar alunecarea, ca al doilea să-l împingă pe primul * în sus, nu să apară brusc deasupra lui. */ body.fclms-fx .fclms-notice.fclms-overlay { transition: bottom var(--fcm-mid) var(--fcm-ease-out); max-width: min(520px, calc(100vw - 32px)); } /* =========================================================================== * 27. ILUSTRAȚIILE PANOURILOR GOALE * =========================================================================== * * Emoticonul era o soluție bună și ieftină, dar are un cusur: îl desenează * sistemul de operare, deci arată altfel pe Windows, pe Mac și pe Android, și * nu ține seama de culorile casei. * * Desenul de aici e scris în SVG, cu culoarea principală înăuntru — se * potrivește pe orice paletă și arată la fel pretutindeni. Emoticonul rămâne * mai jos, pentru cine a stins ilustrațiile; nu se văd niciodată amândouă. */ body.fclms-fx.fclms-fx-grad .fclms-app .fclms-empty::before { content: ""; display: block; width: 108px; height: 84px; margin: 0 auto 16px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 8px 14px rgba(var(--fc-primary-rgb), .22)); /* Trei fișe suprapuse, ultima ridicată: un teanc care așteaptă. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 84'%3E%3Cg fill='none' stroke='%23708090' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='14' y='30' width='68' height='44' rx='7' fill='%23ffffff' fill-opacity='.5'/%3E%3Crect x='22' y='20' width='68' height='44' rx='7' fill='%23ffffff' fill-opacity='.75'/%3E%3C/g%3E%3Cg transform='rotate(-7 60 30)'%3E%3Crect x='30' y='10' width='66' height='42' rx='7' fill='%23ffffff' stroke='%23708090' stroke-width='2.4'/%3E%3Crect x='40' y='23' width='30' height='4' rx='2' fill='%23708090' fill-opacity='.55'/%3E%3Crect x='40' y='33' width='46' height='4' rx='2' fill='%23708090' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); } /* Emoticonul se retrage când e ilustrație: unul singur, nu amândouă. */ body.fclms-fx.fclms-fx-grad.fclms-fx-emoji .fclms-app .fclms-empty::before { content: ""; font-size: 0; } /* =========================================================================== * 28. CE SE VEDE DE APROAPE * =========================================================================== */ /* Inelul de la tastatură: gros, în culoarea de accent, cu un contur alb sub el ca să se vadă și pe fundal închis. Cine umblă cu tastatura trebuie să știe unde e, fără să caute. */ body.fclms-fx .fclms-app :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; border-radius: 6px; } /* Numerele din tabele și din liste, aliniate pe coloană. Cifrele de lățimi diferite fac o coloană de sume să șerpuiască. */ body.fclms-fx .fclms-app .fclms-table td, body.fclms-fx .fclms-app .fclms-date, body.fclms-fx .fclms-app .fclms-count, body.fclms-fx .fclms-app .fclms-points b { font-variant-numeric: tabular-nums; } /* Titlurile mari se strâng puțin. Literele mari, lăsate la spațierea de text obișnuit, par risipite; strânse cu o sutime, par croite. */ body.fclms-fx .fclms-app .fclms-toolbar h1, body.fclms-fx .fclms-app .fclms-summary__score, body.fclms-fx .fclms-app .fclms-stat strong { letter-spacing: -.022em; } /* Derularea către o ancoră: lină, și cu loc deasupra pentru bara lipită. */ body.fclms-fx .fclms-app { scroll-behavior: smooth; } body.fclms-fx .fclms-app :target { scroll-margin-top: calc(var(--fc-topbar-h, 64px) + 16px); } /* =========================================================================== * 29. RÂNDUL DE SUB-FILE — comutator segmentat * =========================================================================== * * CE ERA GREȘIT * * Rândul de pastile de sub titlu — Abonamente, Stripe, Facturare, Facturi, * Coduri de discount, Raport de vânzări — se lipește de vârful ferestrei la * derulare, deci are nevoie de fundal opac: altfel conținutul s-ar vedea prin * el. Fundalul acela era culoarea hârtiei, întinsă de la un capăt la altul, * cu o umbră subțire dedesubt. * * Ieșea o dungă de altă culoare decât cardul de sub ea, cu o muchie dreaptă * care nu se termina nicăieri — nici bară, nici card, o fâșie. Iar pastilele * pluteau pe ea, fiecare cu rama ei, fără să se vadă că sunt un singur șir * din care se alege una. * * CE E ACUM * * Un comutator segmentat: un jgheab rotunjit, cu o adâncitură ștearsă, în * care stau pastilele lipite una de alta. Se citește dintr-o privire că e o * alegere din câteva, nu șase butoane care se întâmplă să stea alături — și e * felul în care arată alegerea dintr-un șir scurt în orice interfață făcută * în ultimii ani. * * Fâșia care se lipește sus rămâne, fiindcă îi trebuie; dar devine sticlă * mată în loc de hârtie plină, deci nu se mai vede ca dungă. */ /* * Fâșia lipită sus: sticlă, nu hârtie. NUMAI pe `::before`. * * Fâșia și jgheabul sunt același element, cu două treburi deosebite: fâșia e * fundalul lat cât pagina, care ascunde ce trece pe sub bară la derulare; * jgheabul e cutia strânsă în jurul pastilelor. Scrisă pe element, sticla * ștergea fundalul jgheabului — și cum avea și un selector mai greu, îl * ștergea de fiecare dată. * * Despărțite: `::before` poartă sticla, elementul poartă jgheabul. */ body.fclms-fx.fclms-fx-glass .fclms-app .fclms-subtabs::before { background: color-mix(in srgb, var(--fc-paper) 72%, transparent); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); } /* Nici umbră, nici linie, nici sticlă: rândul n-are fundal, deci n-are nici hotar de desenat. Ce despărțea înainte — o fâșie, apoi o dungă — desparte acum golul dintre pastile și primul card. */ body.fclms-fx .fclms-app--admin .fclms-subtabs, body.fclms-fx .fclms-app--student .fclms-subtabs, body.fclms-fx .fclms-app--account .fclms-subtabs, body.fclms-fx .fclms-app .fclms-subtabs { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } body.fclms-fx .fclms-app .fclms-subtabs::before { display: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * RÂNDUL DE SUB-FILE: FĂRĂ JGHEAB * * Aici a fost, o vreme, o bandă: toate pastilele purtau aceeași tentă de * fundal, stăteau lipite una de alta, cu câte o linie despărțitoare între ele, * iar prima și ultima își rotunjeau colțurile din afară. Ieșea un jgheab * neîntrerupt, făcut din pastile — o soluție bună la o problemă adevărată, * fiindcă `.fclms-subtabs` e ȘI fâșia lipită sus la derulare și nu se poate * strânge la lățimea pastilelor. * * Numai că jgheabul rezolva o problemă de așezare cu un obiect: un dreptunghi * cenușiu, cu hotarele lui și cu dungi înăuntru, pus în jurul a cinci cuvinte. * Ochiul avea de citit trei lucruri — cutia, dungile, rubrica aleasă — acolo * unde e nevoie de unul singur. * * Acum nu mai e nimic în jurul lor. Pastilele stau libere, despărțite de aer, * și numai cea aleasă poartă culoare. Fâșia rămâne unde era, pe `::before`, * deci treaba pe care o făcea jgheabul la derulare o face mai departe cine * trebuie — fundalul lat cât pagina, nu un chenar în jurul rubricilor. */ body.fclms-fx .fclms-app .fclms-subtabs { gap: 4px; row-gap: 6px; align-items: center; } body.fclms-fx .fclms-app .fclms-subtabs .fclms-pill { position: relative; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: var(--fc-pill-radius) !important; box-shadow: none !important; color: var(--fc-muted) !important; } body.fclms-fx .fclms-app .fclms-subtabs .fclms-pill:hover { background-color: rgba(var(--fc-primary-rgb), .09) !important; color: var(--fc-ink) !important; } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-subtabs .fclms-pill:hover { transform: none; } /* * Cea aleasă: plină, cu degradeul casei și cu o umbră colorată scurtă. Pe un * rând altfel gol, ea e singurul lucru care are culoare — deci se găsește * dintr-o privire, fără să fie nevoie de un chenar care s-o încadreze. */ body.fclms-fx .fclms-app .fclms-subtabs .fclms-pill.is-active { z-index: 1; background-color: var(--fc-primary) !important; color: #fff !important; box-shadow: 0 2px 5px -1px rgba(var(--fc-primary-rgb), .34), 0 8px 18px -10px rgba(var(--fc-primary-rgb), .55) !important; } body.fclms-fx.fclms-fx-grad .fclms-app .fclms-subtabs .fclms-pill.is-active { background-image: var(--fcm-grad), var(--fcm-sheen) !important; } /* * PICTOGRAMA PASTILEI * * Aici se repară alinierea. Fiecare emoticon are înălțimea lui: 🎟️ urcă mai * sus decât 📄, iar 📈 coboară sub linia de bază. Lăsate în rând cu textul, * fiecare trage linia altfel, și șase pastile alăturate ies cu scrisul la * șase înălțimi — ceea ce nu se poate numi, dar se vede. * * Închise într-o casetă cu lățime și înălțime scrise, toate ocupă exact la * fel. `line-height: 1` scoate spațiul de rând din socoteală, iar centrarea * așază semnul la mijlocul casetei oricât ar fi de înalt. * * Regula prinde și pictogramele fără clasă, scrise ``, care * există de mai demult în jumătate din rânduri. `.fclms-pill__count` nu are * `aria-hidden` — e o cifră care se citește — deci nu intră aici. */ body.fclms-fx .fclms-app .fclms-pill__icon, body.fclms-fx .fclms-app .fclms-pill > span[aria-hidden="true"], body.fclms-fx .fclms-modal .fclms-pill > span[aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; flex: none; line-height: 1; font-size: 1.02em; font-style: normal; } /* Pastila devine ea însăși o cutie cu rânduri centrate, altfel caseta pictogramei ar sta pe linia de bază a textului și n-am fi câștigat nimic. */ body.fclms-fx .fclms-app .fclms-pill, body.fclms-fx .fclms-modal .fclms-pill { display: inline-flex; align-items: center; gap: 7px; line-height: 1.2; } /* Pe ecran îngust, banda se rupe în două rânduri în loc să se reverse din pagină. `row-gap`, scris mai sus, ține cele două rânduri despărțite. */ @media (max-width: 720px) { body.fclms-fx .fclms-app .fclms-subtabs .fclms-pill { white-space: nowrap; } } /* =========================================================================== * 30. TABELELE — refăcute * =========================================================================== * * DE CE UN SINGUR BLOC MODERNIZEAZĂ TOATE RUBRICILE DEODATĂ * * Abonamentele, facturile, cupoanele, cursanții, rapoartele, dosarele de * moderare, dispozitivele, biletele de suport — toate sunt același tabel, cu * aceleași clase, umplut cu alte rânduri. Nu e o listă de treizeci de pagini * de reparat, ci o componentă folosită de treizeci de ori. Ce se scrie aici * se vede pretutindeni în aceeași clipă. * * CE SE SCHIMBĂ * * Capul de tabel avea o linie groasă de doi pixeli sub el și o linie subțire * sub fiecare rând — deci un grătar. Grătarul e felul în care arătau tabelele * când ecranele nu puteau desena altceva; azi, despărțirea se face cu spațiu * și cu o linie foarte ștearsă, iar rândul se caută cu cursorul, nu cu * degetul pe linie. * * Capul rămâne o bandă limpede, dar merge odată cu pagina. A fost, o vreme, * lipit sus — ideea era ca la o listă lungă să se știe tot timpul ce e în * fiecare coloană. În practică ieșea urât: capul se oprea la vârful ferestrei * și scria peste rândurile care treceau pe sub el, fiindcă tabelul e într-o * pagină cu bare deja lipite acolo, iar două lucruri lipite în același loc se * calcă. Nici nu se lipea de tabel, ci de fereastră: rămânea agățat sus și * după ce tabelul se terminase. * * Rândul de sub cursor se luminează pe toată lățimea și primește un semn * colorat în stânga. */ body.fclms-fx .fclms-app .fclms-table { border-collapse: separate; border-spacing: 0; } body.fclms-fx .fclms-app .fclms-table thead th { position: static; background: var(--fc-surface); background-image: linear-gradient(180deg, rgba(var(--fc-primary-rgb), .05), transparent); border-bottom: 1px solid var(--fc-line); font-weight: 700; white-space: nowrap; } /* Pe telefon capul n-are voie să ceară o linie neîntreruptă: ar lăți tabelul peste ecran. Scrisul se rupe, ca peste tot. */ @media (max-width: 640px) { body.fclms-fx .fclms-app .fclms-table thead th { white-space: normal; } } /* Linia de sub rând se subțiază până aproape de nimic: destul cât ochiul să urmărească rândul, prea puțin cât să se vadă un grătar. */ body.fclms-fx .fclms-app .fclms-table td { border-bottom: 1px solid rgba(var(--fc-primary-rgb), .09); padding-top: 13px; padding-bottom: 13px; } body.fclms-fx .fclms-app .fclms-table tbody tr:last-child td { border-bottom: 0; } /* Semnul din stânga rândului: crește din nimic la trecerea cursorului. Se desenează cu o umbră interioară, nu cu un element în plus — un `::before` într-o celulă de tabel se așază altfel de la un browser la altul. */ body.fclms-fx .fclms-app .fclms-table tbody tr:hover { background: rgba(var(--fc-primary-rgb), .05); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-table tbody tr td:first-child { box-shadow: inset 0 0 0 0 var(--fc-accent); transition: box-shadow var(--fcm-fast) var(--fcm-ease); } body.fclms-fx.fclms-fx-motion .fclms-app .fclms-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--fc-accent); } /* Butoanele din coloana de acțiuni: mici, ștearse până când e nevoie de ele. Un rând de tabel cu două butoane pline pe el își pierde cuvintele. */ body.fclms-fx .fclms-app .fclms-table__actions .fclms-btn { opacity: .78; } body.fclms-fx .fclms-app .fclms-table tbody tr:hover .fclms-table__actions .fclms-btn { opacity: 1; } /* Prețul tăiat, dinaintea celui nou: mai șters, ca ochiul să cadă pe cel care se plătește, nu pe cel care nu se mai plătește. */ body.fclms-fx .fclms-app .fclms-table s, body.fclms-fx .fclms-app .fclms-table del { color: var(--fc-muted); opacity: .75; text-decoration-thickness: 1px; } /* =========================================================================== * 31. CAPUL DE PAGINĂ * =========================================================================== * * Fiecare rubrică începe la fel: un titlu, un spațiu, unul-două butoane în * dreapta. Rândul acela e primul lucru pe care îl vede omul când intră, deci * merită să arate ca un început, nu ca o linie de text cu un buton lângă ea. * * Titlul primește dunga lui colorată (scrisă mai sus, la secțiunea 19), iar * sub tot rândul se pune un hotar foarte șters, ca titlul să nu curgă în * conținut. Butonul din dreapta se lipește de marginea de sus a rândului, * nu de mijlocul lui: așa rămâne pe aceeași linie cu titlul chiar și când * titlul are două rânduri. */ body.fclms-fx .fclms-app .fclms-view > .fclms-toolbar { align-items: flex-start; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid rgba(var(--fc-primary-rgb), .10); } body.fclms-fx .fclms-app .fclms-view > .fclms-toolbar > .fclms-btn { margin-top: 1px; } /* De când butoanele barei stau strânse în cete, nu mai sunt copii direcți ai rândului: alinierea la marginea de sus o primește acum învelișul lor. */ body.fclms-fx .fclms-app .fclms-view > .fclms-toolbar > .fclms-toolbar__actions { margin-top: 1px; } /* Rândul de sub titlu, cel care lămurește rubrica. Era text mărunt cenușiu, lipit de tabel; capătă aer și o lățime la care se citește comod. */ body.fclms-fx .fclms-app .fclms-card > .fclms-muted:first-of-type, body.fclms-fx .fclms-app .fclms-view > .fclms-muted:first-of-type { max-width: 74ch; line-height: 1.6; } /* Titlurile dinăuntrul cardurilor: o treaptă mai jos decât titlul paginii, cu spațiu deasupra cât să se vadă unde se termină secțiunea de dinainte. */ body.fclms-fx .fclms-app .fclms-h2 { letter-spacing: -.015em; margin-bottom: 6px; } /* Linia despărțitoare dintre secțiunile unui panou: se stinge spre margini, ca să nu taie cardul în două. */ body.fclms-fx .fclms-app .fclms-card hr, body.fclms-fx .fclms-modal hr { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(var(--fc-primary-rgb), .18) 12%, rgba(var(--fc-primary-rgb), .18) 88%, transparent); } /* =========================================================================== * 32. FORMULARELE * =========================================================================== * * Tot ce se completează în aplicație — planuri de abonament, șabloane de * email, setări, fișa cursantului, diploma — folosește aceleași câmpuri și * aceleași bife. Iar aici se pierde cel mai mult timp din tot panoul. */ /* Eticheta de deasupra câmpului: majusculele mărunte se citesc greu strânse. Un pic de spațiu între litere și o pauză până la câmp le face lizibile. */ body.fclms-fx .fclms-app .fclms-field > span:first-child { display: block; margin-bottom: 5px; letter-spacing: .06em; } /* Bifele și butoanele rotunde: rândul întreg devine apăsabil sub cursor, nu doar pătrățelul de trei milimetri. */ body.fclms-fx .fclms-app .fclms-check { display: inline-flex; align-items: center; gap: 9px; padding: 5px 9px; margin-left: -9px; border-radius: 8px; cursor: pointer; transition: background-color var(--fcm-fast) var(--fcm-ease); } body.fclms-fx .fclms-app .fclms-check:hover { background: rgba(var(--fc-primary-rgb), .06); } body.fclms-fx .fclms-app .fclms-check input { flex: none; width: 17px; height: 17px; cursor: pointer; } /* Rândul de lămurire de sub o bifă, scris cu litere mici: se aliniază sub text, nu sub pătrățel, ca să se vadă că ține de el. */ body.fclms-fx .fclms-app .fclms-check + .fclms-muted { padding-left: 26px; max-width: 70ch; } /* Butonul de salvat, la capătul unui formular lung: se lipește de josul ferestrei cât timp mai e de derulat, ca să nu fie căutat. Numai în panou — la cursant formularele sunt scurte și n-au nevoie. */ @media (min-width: 1025px) { body.fclms-fx .fclms-app--admin form > p:last-child > .fclms-btn--primary { position: sticky; bottom: 18px; } } /* =========================================================================== * CAPUL DE TABEL MERGE CU PAGINA — ORIUNDE, ORICUM * --------------------------------------------------------------------------- * O vreme, capul tabelelor a fost lipit sus. Suna bine pe hârtie: la o listă * lungă de copii de siguranță sau de facturi, să se știe tot timpul ce e în * fiecare coloană. Pe ecran ieșea altceva. * * Întâi, pentru că nu se lipea de tabel, ci de fereastră. Capul rămânea agățat * la vârful ecranului și după ce tabelul se terminase, plutind peste ce urma. * * Apoi, pentru că sus era deja ocupat: bara aplicației și rândul de file sunt * și ele lipite acolo. Trei lucruri care vor același loc nu se așază unul sub * altul de la sine — se calcă. De aceea în lista de copii de siguranță se * citea „20 aug. 2026, 16:52 / DATA ȘI ORA” într-un singur ghem: capul scria * peste primul rând. * * Regula de aici e o încuietoare, nu un stil: în orice stare — panou, cursant, * ecran complet adevărat, ecran complet închipuit, fereastră modală — capul se * derulează odată cu restul. Ce câștigăm în plus e că nu mai trebuie ținut * minte, la fiecare fereastră nouă, că sus e deja lume. * =========================================================================== */ body.fclms-fx .fclms-app .fclms-table thead th, body.fclms-fx .fclms-app--admin .fclms-table thead th, body.fclms-fx .fclms-app--student .fclms-table thead th, body.fclms-fx .fclms-app--account .fclms-table thead th, body.fclms-fx .fclms-app--shell .fclms-table thead th, body.fclms-fx .fclms-app:fullscreen .fclms-table thead th, body.fclms-fx .fclms-app:-webkit-full-screen .fclms-table thead th, body.fclms-fx .fclms-app.is-faux-fullscreen .fclms-table thead th, body.fclms-fx .fclms-modal .fclms-table thead th { position: static; top: auto; z-index: auto; }