/* Flashcards LMS — interfață */ /* Variabilele stau pe :root pentru că modalele și notificările se atașează pe , în afara containerului .fclms-app. */ :root { --fc-ink: #1E2A38; --fc-muted: #6B7A8C; --fc-line: #DDE4EC; --fc-paper: #F4F6F8; --fc-surface: #FFFFFF; --fc-primary: #1F5E7A; /* Aceleași culori, scrise ca triplete, ca tentele să se poată calcula din ele. */ --fc-primary-rgb: 31, 94, 122; --fc-primary-dark: #164760; --fc-primary-soft: #2E7D8F; --fc-accent-rgb: 224, 161, 0; --fc-accent: #E0A100; --fc-success: #2E7D32; --fc-success-soft: #E7F3E8; --fc-danger: #C0392B; --fc-danger-soft: #FBEAE8; --fc-radius: 14px; --fc-font: Merriweather, Georgia, "Times New Roman", serif; --fc-content-max: 1200px; --fc-shadow: 0 1px 2px rgba(30,42,56,.06), 0 6px 20px rgba(30,42,56,.06); } /* ===================================================================== * IZOLAREA DE TEMA WORDPRESS * ===================================================================== * * Aplicația stă într-o pagină a temei, deci moștenește de la ea tot ce n-a * cerut anume: fontul, mărimea literei, culoarea legăturilor, marginile * paragrafelor, conturul albastru de la clic, chiar și litere îngroșate sau * scrise cu majuscule prin cine știe ce regulă a temei. De aceea aceeași * instalare arăta altfel de la un site la altul, iar ce se alegea din * Aspect era câteodată înlăturat de o regulă pe care n-o vedea nimeni. * * Blocul acesta taie moștenirea. Ce urmează după el — întreaga foaie — e a * noastră și stă pe variabilele din Aspect. * * --------------------------------------------------------------------- * DE CE E SCRIS CU `:where()` ȘI DE CE STĂ SUS * * Două primejdii se bat cap în cap. Scris slab, blocul pierde în fața temei * și nu face nimic. Scris tare, câștigă și în fața propriilor noastre reguli, * și atunci strică tot ce urmează. * * `:where()` are greutate zero, deci blocul cântărește exact cât clasa * `.fclms-app` din fața lui — nici mai mult, nici mai puțin. Iar fiindcă stă * primul în foaie, orice regulă de mai jos de aceeași greutate îl întrece * prin simpla ei așezare. Așa, componentele noastre nu au de suferit, iar * tema, care se încarcă înaintea acestei foi, pierde. * * Ce rămâne în afară: o temă care scrie reguli mai grele decât o clasă — * `#content .entry p`, de pildă — poate încă străbate. Sunt rare, dar există; * o izolare desăvârșită ar cere un cadru `iframe`, iar acela ar rupe alte * lucruri, de la ferestrele plutitoare la lățimea pe telefon. */ /* 1. Litera: numai a noastră, oriunde înăuntru. */ .fclms-app.fclms-app *, .fclms-modal.fclms-modal *, .fclms-toast.fclms-toast * { font-family: inherit; } /* 2. Celelalte însușiri care se moștenesc pe nevăzute. */ .fclms-app :where(*), .fclms-modal :where(*), .fclms-toast :where(*) { font-style: inherit; font-variant: normal; letter-spacing: inherit; word-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; -webkit-font-smoothing: inherit; } /* 3. Elementele pe care temele le împodobesc cel mai des. */ .fclms-app :where(p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, fieldset, legend, pre), .fclms-modal :where(p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd, fieldset, legend, pre) { margin: 0; padding: 0; border: 0; background: none; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } /* * Listele își pierd bulinele și marginea: aproape toate listele aplicației * sunt de fapt șiruri de rânduri, nu enumerări. Cele care chiar sunt — * textul unui cartonaș și editorul — și le primesc înapoi mai jos. */ .fclms-app :where(ul, ol), .fclms-modal :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .fclms-app :where(li), .fclms-modal :where(li) { margin: 0; padding: 0; } .fclms-rte__area :where(ul), .fclms-flashcard__content :where(ul) { list-style: disc; padding-left: 22px; } .fclms-rte__area :where(ol), .fclms-flashcard__content :where(ol) { list-style: decimal; padding-left: 22px; } /* * Legăturile: fără albastrul și sublinierea browserului, fără culoarea * temei. Cele care poartă o clasă de-a noastră — butoane, pastile, file — * își iau culoarea din ea, mai jos. */ .fclms-app :where(a), .fclms-modal :where(a) { color: var(--fc-primary); text-decoration: none; background: none; box-shadow: none; } .fclms-app :where(a:hover), .fclms-modal :where(a:hover) { text-decoration: underline; } /* * Butoanele și câmpurile: dezbrăcate până la piele. Tema le dă de obicei * fundal, ramă, colțuri și litere proprii — toate străine de aplicație, care * și le pune singură pe ale ei. */ .fclms-app :where(button), .fclms-modal :where(button) { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; text-align: inherit; text-transform: none; letter-spacing: inherit; box-shadow: none; cursor: pointer; min-height: 0; width: auto; } .fclms-app :where(input, select, textarea), .fclms-modal :where(input, select, textarea) { font: inherit; line-height: normal; color: var(--fc-ink); background: var(--fc-surface); margin: 0; box-shadow: none; text-transform: none; letter-spacing: inherit; max-width: none; min-height: 0; } /* Tabelele: temele le dau dungi, rame și chenare pe care nu le-am cerut. */ .fclms-app :where(table), .fclms-modal :where(table) { border-collapse: collapse; border-spacing: 0; width: auto; margin: 0; background: none; font-size: inherit; } .fclms-app :where(th, td), .fclms-modal :where(th, td) { border: 0; padding: 0; background: none; text-align: inherit; font-weight: inherit; color: inherit; } /* Imaginile: fără rame, umbre și colțuri puse de temă. */ .fclms-app :where(img, svg, video, iframe), .fclms-modal :where(img, svg, video, iframe) { max-width: 100%; border: 0; border-radius: 0; box-shadow: none; background: none; vertical-align: middle; } .fclms-app :where(hr) { border: 0; height: 1px; background: var(--fc-line); margin: 0; } .fclms-app :where(code, pre, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: none; padding: 0; border: 0; } /* ===================================================================== * De aici încolo, tot ce urmează e al aplicației. * ===================================================================== */ .fclms-app { font-family: var(--fc-font); font-size: 16px; line-height: 1.65; color: var(--fc-ink); background: var(--fc-paper); padding: 24px; border-radius: var(--fc-radius); box-sizing: border-box; } .fclms-app *, .fclms-app *::before, .fclms-app *::after { box-sizing: border-box; } .fclms-app p { margin: 0 0 12px; } .fclms-muted { color: var(--fc-muted); } .fclms-link { color: var(--fc-primary); } /* Toate secțiunile aplicației folosesc aceeași lățime și aceleași margini, ca trecerea de la o filă la alta să nu deplaseze conținutul. */ .fclms-app--student > .fclms-topbar, .fclms-app--student > .fclms-student, .fclms-app--student > .fclms-view, .fclms-app--student > .fclms-vip-banner, .fclms-app--student > .fclms-sanction, .fclms-app--admin > .fclms-topbar, .fclms-app--admin > .fclms-tabs, .fclms-app--admin > .fclms-subtabs, .fclms-app--admin > .fclms-manager { width: 100%; max-width: var(--fc-content-max); margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------- topbar */ .fclms-topbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--fc-line); } .fclms-logo { font-weight: 900; font-size: 19px; letter-spacing: -.015em; } .fclms-user { margin-left: auto; color: var(--fc-muted); font-size: 14px; } .fclms-tabs { display: flex; flex-wrap: wrap; gap: 4px; } button.fclms-tab { font-family: inherit; border: none; cursor: pointer; } .fclms-tab { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--fc-muted); transition: background .15s, color .15s; } .fclms-tab:hover { background: #E9EEF3; color: var(--fc-ink); } .fclms-tab.is-active { background: var(--fc-primary); color: #fff; } /* ------------------------------------------------------------ carduri */ .fclms-card { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 24px; margin-bottom: 20px; box-shadow: var(--fc-shadow); } .fclms-card--center { text-align: center; } .fclms-h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; } .fclms-h2:not(:first-child) { margin-top: 32px; } /* ------------------------------------------------------------ butoane */ .fclms-btn, .fclms-app .fclms-btn { font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s, transform .05s; } .fclms-btn:active { transform: translateY(1px); } .fclms-btn:focus-visible { outline: 3px solid var(--fc-accent); outline-offset: 2px; } .fclms-btn--primary { background: var(--fc-primary); color: #fff; } .fclms-btn--primary:hover { background: var(--fc-hover, var(--fc-primary-dark)); color: var(--fc-hover-ink, #fff); } .fclms-btn--ghost { background: transparent; border-color: var(--fc-line); color: var(--fc-ink); } .fclms-btn--ghost:hover { background: var(--fc-hover-soft, #EDF1F5); border-color: var(--fc-hover, var(--fc-line)); color: var(--fc-ink); } .fclms-btn--danger { background: var(--fc-danger-soft); color: var(--fc-danger); } .fclms-btn--danger:hover { background: #F6D9D5; } .fclms-btn--success { background: var(--fc-success); color: #fff; } .fclms-btn--success:hover { background: #256B29; color: #fff; } .fclms-btn--big, .fclms-app .fclms-btn--big { font-size: 16px; padding: 14px 26px; } .fclms-btn--icon, .fclms-app .fclms-btn--icon { padding: 8px 10px; font-size: 13px; } /* ------------------------------------------------------- formulare */ .fclms-field { display: block; margin-bottom: 16px; } .fclms-field > span { display: block; font-size: 13px; font-weight: 700; color: var(--fc-muted); margin-bottom: 6px; } .fclms-field input[type=text], .fclms-field input[type=email], .fclms-field input[type=password], .fclms-field input[type=number], .fclms-field input[type=date], .fclms-field input[type=url], .fclms-field select, .fclms-field textarea { width: 100%; font-family: inherit; font-size: 15px; color: var(--fc-ink); padding: 10px 12px; border: 1px solid var(--fc-line); border-radius: 10px; background: #fff; } .fclms-field input:focus, .fclms-field select:focus, .fclms-field textarea:focus { outline: none; border-color: var(--fc-primary); box-shadow: 0 0 0 3px rgba(var(--fc-primary-rgb), .14); } .fclms-field--small { max-width: 160px; } /* Lămurirea de sub un câmp: mai mică decât răspunsul, mai stinsă decât eticheta. */ .fclms-field > small { display: block; margin-top: 6px; font-size: 12px; color: var(--fc-muted); } .fclms-field--color input { width: 56px; height: 42px; padding: 2px; border: 1px solid var(--fc-line); border-radius: 10px; background: #fff; } .fclms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .fclms-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } /* * Numărul scris mare, în fereastra de golire a unui set. * * „1.248" citit ca cifră între alte cuvinte nu oprește pe nimeni; același * număr scris cât un titlu oprește mâna care ștergea repede un set de probă. * E singurul lucru din fereastră care trebuie citit neapărat. */ .fclms-bigcount { margin: 10px 0; font-size: 15px; } .fclms-bigcount b { font-size: 30px; line-height: 1.1; color: var(--fc-danger); display: block; } /* Butonul stins se vede stins, nu doar refuză apăsarea. */ .fclms-modal__foot .fclms-btn[disabled] { opacity: .5; cursor: not-allowed; } /* Bifele de rol stau una sub alta: se citesc ca o listă, nu ca un rând. */ .fclms-rolebox { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .fclms-rolebox .fclms-check { cursor: pointer; } .fclms-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; } .fclms-notice--success { background: var(--fc-success-soft); color: var(--fc-success); } .fclms-notice--error { background: var(--fc-danger-soft); color: var(--fc-danger); } /* --------------------------------------------------------- tabele */ .fclms-table { width: 100%; border-collapse: collapse; font-size: 14px; } /* --------------------------------------------- tabloul de drepturi media * * Se citește pe rânduri — „ce poate cursantul?” — fiindcă asta e întrebarea * care se pune de fapt. Numele rolului rămâne lipit în stânga la derulare * orizontală: fără el, o bifă din mijlocul tabelului nu spune al cui e. */ .fclms-mediagrid-wrap { overflow-x: auto; margin: 0 0 6px; } .fclms-mediagrid { min-width: 460px; } .fclms-mediagrid th, .fclms-mediagrid td { padding: 8px 10px; border-bottom: 1px solid var(--fc-line); } .fclms-mediagrid thead th { text-align: center; font-size: 12px; font-weight: 700; white-space: nowrap; } .fclms-mediagrid thead th:first-child { text-align: left; } .fclms-mediagrid tbody th { text-align: left; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--fc-surface); } .fclms-mediagrid td { text-align: center; } .fclms-mediagrid input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: var(--fc-primary); } .fclms-mediagrid__cost { font-size: 11px; opacity: .7; cursor: help; } /* --------------------------------------------- alegerea felului de meci * * Două cărți mari, fiecare cu culoarea ei. Nu două pastile: pastila e * potrivită când numele spune tot, iar aici tocmai numele nu poate spune tot * — de aceea are nevoie de rândul de sub el, iar rândul acela are nevoie de loc. * * DE CE DOUĂ CULORI, ȘI DE CE ACESTEA * * Amândouă cărțile arătau la fel și se deosebeau numai prin cuvinte. Cine * citește repede — adică toată lumea — alegea la nimereală, apoi se mira de * ce meciul se poartă altfel decât se aștepta. * * Culorile nu sunt puse după gust: ele spun ce se întâmplă. Portocaliul cald * al meciului împreună e culoarea grăbitului — acum, toți, deodată. Verdele * albastrui al celuilalt e culoarea răbdării — când poți, în ritmul tău. * Sunt scrise aici, nu luate din temă și nici din culorile din Aspect: ele * poartă un înțeles, iar un înțeles care se schimbă odată cu tema casei nu * mai e un înțeles. */ .fclms-modepick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 14px; } .fclms-modepick__one { --pick: #6B7A8C; --pick-soft: rgba(107, 122, 140, .08); --pick-line: rgba(107, 122, 140, .35); position: relative; display: grid; gap: 5px; align-content: start; padding: 16px 46px 16px 16px; text-align: left; cursor: pointer; background: var(--fc-surface); color: var(--fc-ink); border: 2px solid var(--fc-line); border-radius: var(--fc-radius); font: inherit; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; } /* Banda de sus: culoarea se vede și când cartea nu e aleasă. */ .fclms-modepick__one::before { content: ""; position: absolute; inset: -2px -2px auto -2px; height: 4px; background: var(--pick); border-radius: var(--fc-radius) var(--fc-radius) 0 0; opacity: .5; transition: opacity .16s ease; } .fclms-modepick__one--live { --pick: #E8590C; --pick-soft: rgba(232, 89, 12, .09); --pick-line: rgba(232, 89, 12, .45); } .fclms-modepick__one--own { --pick: #0E8F82; --pick-soft: rgba(14, 143, 130, .09); --pick-line: rgba(14, 143, 130, .45); } .fclms-modepick__one:hover { border-color: var(--pick-line); transform: translateY(-1px); } .fclms-modepick__one:hover::before { opacity: .8; } .fclms-modepick__one.is-active { border-color: var(--pick); background: var(--pick-soft); } .fclms-modepick__one.is-active::before { opacity: 1; } /* Semnul din colț: rotund, plin cu culoarea cărții. Bifa singură, fără cerc, s-ar fi pierdut pe fundalul deschis al cărții alese. */ .fclms-modepick__tick { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pick); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .16s ease, transform .16s ease; } .fclms-modepick__one.is-active .fclms-modepick__tick { opacity: 1; transform: scale(1); } .fclms-modepick__mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--pick-soft); color: var(--pick); font-size: 18px; line-height: 1; margin-bottom: 2px; } .fclms-modepick__one.is-active .fclms-modepick__mark { background: var(--pick); color: #fff; } .fclms-modepick__one b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .fclms-modepick__one small { font-size: 12.5px; color: var(--fc-muted); line-height: 1.45; } .fclms-modepick__one.is-active b { color: var(--pick); } .fclms-modepick__warn { font-size: 12px; margin: 0 0 14px; } @media (max-width: 520px) { .fclms-modepick { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .fclms-modepick__one, .fclms-modepick__tick { transition: none; } .fclms-modepick__one:hover { transform: none; } } /* Cât a parcurs fiecare, la meciul în ritmul lui. */ .fclms-arena__pace { display: block; font-size: 11px; opacity: .8; } .fclms-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fc-muted); border-bottom: 2px solid var(--fc-line); padding: 10px 8px; } .fclms-table td { padding: 12px 8px; border-bottom: 1px solid var(--fc-line); vertical-align: middle; } .fclms-table form { display: inline; } /* ------------------------------------------------ liste seturi/pachete */ .fclms-list { display: grid; gap: 12px; } .fclms-row { display: flex; align-items: center; gap: 16px; background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 16px 20px; } /* * Rândul de listă: chip la stânga, text la mijloc, butoane la dreapta. * * Textul avea `flex: 1`, adică lățime de pornire zero. Pe telefon, unde rândul * are voie să se rupă pe mai multe linii, chipul și butoanele luau toată * lățimea, iar textul se strângea la nimic în loc să treacă pe rândul lui — * ieșea o coloană de câte o literă. Cu o lățime de pornire adevărată, când nu * mai încape, butoanele coboară sub text, cum trebuia de la început. */ .fclms-row__main { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; } .fclms-row__title { font-weight: 700; font-size: 16px; margin: 0; } .fclms-row__meta { font-size: 13px; color: var(--fc-muted); } .fclms-row__actions { display: flex; gap: 6px; flex-wrap: wrap; } .fclms-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fc-muted); margin-bottom: 16px; } .fclms-breadcrumb button { background: none; border: none; font: inherit; color: var(--fc-primary); cursor: pointer; padding: 0; text-decoration: underline; } .fclms-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .fclms-toolbar h1 { font-size: 22px; margin: 0; font-weight: 900; letter-spacing: -.02em; } .fclms-toolbar .fclms-spacer { flex: 1; } .fclms-empty { text-align: center; padding: 48px 20px; color: var(--fc-muted); background: var(--fc-surface); border: 1px dashed var(--fc-line); border-radius: var(--fc-radius); } /* ------------------------------------- semnătura vizuală: banda cutiilor */ .fclms-spine { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: #E9EEF3; } .fclms-spine span { display: block; transition: flex-grow .3s ease; } .fclms-spine--legend { height: auto; background: none; gap: 8px; flex-wrap: wrap; } .fclms-boxlegend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--fc-muted); margin-top: 8px; } .fclms-boxlegend b { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; } .fclms-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* progres detaliat pe cutii */ .fclms-progress { display: grid; gap: 12px; } .fclms-progress__top { display: flex; align-items: center; gap: 14px; } .fclms-progress__ring { flex: none; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; } .fclms-progress__ring span { width: 46px; height: 46px; border-radius: 50%; background: var(--fc-surface); display: grid; place-items: center; font-weight: 900; font-size: 14px; color: var(--fc-ink); } .fclms-progress__meta { font-size: 13px; color: var(--fc-muted); } .fclms-progress__meta strong { display: block; font-size: 15px; color: var(--fc-ink); font-weight: 700; } .fclms-bars { display: grid; gap: 7px; } .fclms-bar { display: grid; grid-template-columns: 120px 1fr 84px; align-items: center; gap: 10px; font-size: 13px; } .fclms-bar__name { display: flex; align-items: center; gap: 7px; color: var(--fc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fclms-bar__track { display: block; width: 100%; height: 14px; border-radius: 999px; background: #E9EEF3; overflow: hidden; } .fclms-bar__fill { display: block; height: 100%; min-width: 2px; border-radius: 999px; transition: width .35s ease; } .fclms-bar__val { text-align: right; color: var(--fc-ink); font-variant-numeric: tabular-nums; } .fclms-bar__val b { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .fclms-bar__fill { transition: none; } } @media (max-width: 600px) { .fclms-bar { grid-template-columns: 92px 1fr 66px; font-size: 12px; } } .fclms-chip, .fclms-app .fclms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; } /* * Culorile de temei, ținute deoparte de așezare — din același motiv ca la * insignele de stare. Scrise la un loc, ele băteau `--ok`, `--danger`, `--due` * și `--warn` oriunde înăuntrul aplicației, iar insignele colorate ieșeau toate * cenușii. Se vedea mai ales la abonamente, unde verdele chiar spune ceva. */ .fclms-chip { background: #EDF1F5; color: var(--fc-muted); } .fclms-chip--danger { background: var(--fc-danger-soft); color: var(--fc-danger); } /* * INSIGNA DE STARE * * Trei culori, citite dintr-o privire: verde prezent, portocaliu plecat, roșu * delogat. Fiecare își poartă culorile în trei variabile locale — buline, * cerneală și fundal — iar restul regulilor sunt scrise o singură dată, peste * toate. Adăugarea unei stări noi înseamnă atunci trei rânduri, nu un bloc. * * Bulina verde respiră încet, ca să se vadă că starea e vie, nu o poză veche. * * Culorile stau singure, într-o regulă cu o singură clasă, despărțite de * așezare. Aceea are nevoie de `.fclms-app .fclms-presence` ca să răzbată în * panou, iar un selector cu două clase bate unul cu o singură clasă: scrise la * un loc, culorile de temei ștergeau îndată ce apuca să scrie starea, și toate * insignele ieșeau cenușii. Despărțite, starea și temeiul cântăresc la fel, * iar dintre două deopotrivă de grele câștigă cea scrisă mai jos — starea, * care vine după. */ .fclms-presence { --p-ink: var(--fc-muted); --p-dot: var(--fc-muted); --p-bg: #EDF1F5; /* Inelul din jurul bulinei, scris de-a gata: `color-mix` e prea nou pentru browserele mai vechi și ar lăsa bulina fără halou. */ --p-ring: rgba(107, 122, 140, .22); --p-ring-off: rgba(107, 122, 140, 0); } .fclms-presence, .fclms-app .fclms-presence { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .2px; color: var(--p-ink); background: var(--p-bg); border: 1px solid rgba(30, 42, 56, .07); box-shadow: 0 1px 2px rgba(30, 42, 56, .05); } .fclms-presence__dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--p-dot); box-shadow: 0 0 0 3px var(--p-ring); } /* Durata stă lipită de etichetă, dar mai stinsă: e amănuntul, nu vestea. */ .fclms-presence__since { padding-left: 9px; margin-left: 1px; border-left: 1px solid currentColor; font-weight: 600; font-size: 13px; border-left-color: rgba(30, 42, 56, .18); opacity: .85; } .fclms-presence--online { --p-ink: #1B7F45; --p-dot: #21A557; --p-bg: #E6F7EC; --p-ring: rgba(33, 165, 87, .24); --p-ring-off: rgba(33, 165, 87, 0); } .fclms-presence--online .fclms-presence__dot { animation: fclms-breathe 2.4s ease-in-out infinite; } .fclms-presence--away { --p-ink: #9A5B04; --p-dot: #ED8A0A; --p-bg: #FDF1DE; --p-ring: rgba(237, 138, 10, .24); --p-ring-off: rgba(237, 138, 10, 0); } .fclms-presence--out, .fclms-presence--expired { --p-ink: var(--fc-danger); --p-dot: var(--fc-danger); --p-bg: var(--fc-danger-soft); --p-ring: rgba(192, 57, 43, .22); --p-ring-off: rgba(192, 57, 43, 0); } @keyframes fclms-breathe { 0%, 100% { box-shadow: 0 0 0 3px var(--p-ring); } 50% { box-shadow: 0 0 0 8px var(--p-ring-off); } } /* * Însemnarea din cardul abonamentului: cât s-a primit înapoi pentru mentenanță. * Stă lipită de marginea de jos a cardului, despărțită printr-o linie subțire, * ca să se citească drept adaos, nu drept altă veste. */ .fclms-maint-note, .fclms-app .fclms-maint-note { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--fc-line); font-size: 13px; color: #854F0B; } .fclms-maint-note__mark { font-size: 15px; } .fclms-maint-note b { color: #854F0B; } /* Cardul de mentenanță, cât timp e pornită: se vede din capul paginii. */ .fclms-card--warn { border-left: 4px solid #ED8A0A; border-radius: 0; } /* Pagina de așteptare: nimic altceva pe ecran, ca să nu pară aplicația stricată. */ .fclms-app--closed { display: flex; align-items: center; justify-content: center; min-height: 50vh; } .fclms-closed { max-width: 520px; } .fclms-closed__mark { font-size: 44px; line-height: 1; margin-bottom: 12px; } /* Cine a cerut mai puțină mișcare o primește: culoarea singură spune destul. */ @media (prefers-reduced-motion: reduce) { .fclms-presence--online .fclms-presence__dot { animation: none; } } .fclms-chip--ok { background: var(--fc-success-soft); color: var(--fc-success); } .fclms-alert { padding: 12px 16px; border-radius: 10px; background: var(--fc-danger-soft); color: var(--fc-danger); font-size: 14px; margin-bottom: 10px; } .fclms-box-row { display: flex; align-items: flex-end; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--fc-line); } .fclms-box-row .fclms-field { flex: 1; margin-bottom: 0; } .fclms-box-num { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; margin-bottom: 4px; } /* ------------------------------------------------------ editor cartonaș */ /* * CELE DOUĂ FEȚE RĂMÂN EGALE * * `1fr` înseamnă `minmax(auto, 1fr)`: coloana crește oricât, dar nu coboară * sub lățimea a ceea ce ține în ea. Un link media se scrie într-un singur * șir, fără spații în care să se rupă — așa că fața cu link se lățea, iar * versoul rămânea o fâșie. Cu `minmax(0, 1fr)` fiecare față primește exact * jumătate, iar ce e prea lat se scurtează înăuntru, cum era gândit. * * `min-width: 0` pe panou spune același lucru și pentru cutia dinăuntru: * fără el, regula de mai sus s-ar opri la marginea panoului. */ .fclms-editor-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; } .fclms-panel { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 18px; min-width: 0; } .fclms-panel__title { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--fc-muted); font-weight: 700; margin-bottom: 12px; } .fclms-rte { border: 1px solid var(--fc-line); border-radius: 10px; overflow: hidden; background: #fff; } .fclms-rte__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: #F0F3F7; border-bottom: 1px solid var(--fc-line); } .fclms-rte__btn { width: 32px; height: 32px; border: none; background: transparent; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--fc-ink); display: inline-flex; align-items: center; justify-content: center; } .fclms-rte__btn:hover { background: #DFE6ED; } .fclms-rte__btn svg { width: 16px; height: 16px; fill: currentColor; } .fclms-rte__sep { width: 1px; background: var(--fc-line); margin: 4px 4px; } .fclms-rte__area { min-height: 130px; padding: 14px; outline: none; font-size: 15px; overflow-wrap: anywhere; } .fclms-rte__area:focus { box-shadow: inset 0 0 0 2px rgba(var(--fc-primary-rgb), .16); } .fclms-rte__area ul, .fclms-rte__area ol { padding-left: 22px; margin: 8px 0; } .fclms-media { min-width: 0; } .fclms-media-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 8px; } .fclms-media-list { display: grid; gap: 8px; min-width: 0; } .fclms-media-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--fc-line); border-radius: 10px; font-size: 13px; background: #FBFCFD; min-width: 0; } /* * Trei puncte, nu o coloană lățită. Tăierea cerea și `min-width: 0`: un * element flex nu se strânge, din capul locului, sub lățimea textului lui, * așa că „taie ce nu încape” n-avea de unde ști unde se termină locul. */ .fclms-media-item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fclms-media-item .fclms-btn { flex: 0 0 auto; } .fclms-media-kind { flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--fc-primary); } .fclms-media-credit { flex: 0 1 auto; font-size: 11px; color: var(--fc-muted); } /* ------------------------------------------------ selectorul de media * * Fereastra are pastilele sus și un singur panou dedesubt, ca restul * aplicației. */ .fclms-pick__body { margin-top: 12px; } .fclms-pick__pane { display: grid; gap: 10px; } /* Butonul de ascultat, pe fața cartonașului: e un buton, nu un player. */ .fclms-say { margin: 4px 0; } .fclms-quiz-option { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .fclms-quiz-option input[type=text] { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--fc-line); border-radius: 10px; } .fclms-quiz-option label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; } /* ---------------------------------------------------------- studiu */ .fclms-study { max-width: 720px; margin: 0 auto; } .fclms-study__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .fclms-study__counter { font-size: 13px; color: var(--fc-muted); margin-left: auto; } .fclms-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; color: #fff; } .fclms-flashcard { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: 18px; padding: 36px 32px; min-height: 260px; box-shadow: var(--fc-shadow); display: flex; flex-direction: column; justify-content: center; animation: fclms-in .25s ease; } @keyframes fclms-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fclms-flashcard { animation: none; } .fclms-spine span { transition: none; } } .fclms-flashcard__content { font-size: 19px; line-height: 1.6; } .fclms-flashcard__content img, .fclms-flashcard__media img { max-width: 100%; border-radius: 10px; } .fclms-flashcard__media { margin-top: 18px; display: grid; gap: 14px; } .fclms-flashcard__media video, .fclms-flashcard__media iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; background: #000; } .fclms-flashcard__media audio { width: 100%; } .fclms-quiz { margin-top: 22px; } .fclms-quiz__q { font-weight: 700; margin-bottom: 12px; } .fclms-quiz__hint { font-size: 13px; color: var(--fc-muted); margin-bottom: 10px; } .fclms-choice { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; margin-bottom: 8px; border: 1px solid var(--fc-line); border-radius: 12px; cursor: pointer; background: #fff; font-size: 16px; } .fclms-choice:hover { border-color: var(--fc-primary); } .fclms-choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--fc-primary); } .fclms-choice.is-correct { border-color: var(--fc-success); background: var(--fc-success-soft); } .fclms-choice.is-wrong { border-color: var(--fc-danger); background: var(--fc-danger-soft); } .fclms-answer-review { margin-top: 22px; border-top: 1px solid var(--fc-line); padding-top: 18px; } .fclms-answer-review h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--fc-muted); margin: 0 0 8px; } .fclms-answer-review ul { list-style: none; padding: 0; margin: 0 0 14px; } .fclms-answer-review li { padding: 8px 12px; border-radius: 9px; margin-bottom: 6px; font-size: 15px; } .fclms-answer-review li.correct { background: var(--fc-success-soft); color: var(--fc-success); font-weight: 700; } .fclms-answer-review li.wrong { background: var(--fc-danger-soft); color: var(--fc-danger); text-decoration: line-through; } .fclms-answer-review li.plain { background: #F0F3F7; } .fclms-verdict { display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; margin-bottom: 14px; } .fclms-verdict--ok { background: var(--fc-success-soft); color: var(--fc-success); } .fclms-verdict--no { background: var(--fc-danger-soft); color: var(--fc-danger); } .fclms-study__actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .fclms-summary { text-align: center; padding: 40px 24px; } .fclms-summary__score { font-size: 44px; font-weight: 900; letter-spacing: -.03em; } .fclms-summary__grid { display: flex; gap: 28px; justify-content: center; margin: 20px 0 26px; } .fclms-summary__grid div { font-size: 13px; color: var(--fc-muted); } .fclms-summary__grid strong { display: block; font-size: 26px; color: var(--fc-ink); } /* -------------------------------------------------------- cursant */ .fclms-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .fclms-set-card { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--fc-shadow); } .fclms-set-card__cover { height: 130px; background: linear-gradient(135deg, var(--fc-primary), var(--fc-primary-soft)); background-size: cover; background-position: center; } .fclms-set-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .fclms-set-card__title { font-weight: 700; font-size: 17px; margin: 0; } .fclms-set-card__foot { padding: 0 18px 18px; } .fclms-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--fc-accent); } .fclms-deck-card { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 18px 20px; display: grid; gap: 10px; } .fclms-deck-card__head { display: flex; align-items: baseline; gap: 12px; } .fclms-deck-card__head h3 { margin: 0; font-size: 17px; } .fclms-deck-card__due { margin-left: auto; font-size: 13px; color: var(--fc-primary); font-weight: 700; } .fclms-deck-card__actions { display: flex; gap: 8px; flex-wrap: wrap; } /* -------------------------------------------------- amestecul de pachete * * Bifa stă în colțul pachetului, nu într-o fereastră separată de ales * pachete: alegi acolo unde te uiți oricum. Pachetul bifat se vede bifat * dintr-o privire, printr-o ramă — altfel, la a treia pagină de listă, nu * mai știi ce ai ales. */ .fclms-deck-card__pick { position: absolute; top: 12px; right: 14px; z-index: 1; cursor: pointer; } .fclms-deck-card__pick input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--fc-primary); } .fclms-deck-card.is-picked { border-color: var(--fc-primary); box-shadow: 0 0 0 1px var(--fc-primary) inset; } /* Capul cardului face loc bifei din colț. Regula stă aici, lângă bifă, nu lângă definiția capului: ea ține de bifă, iar dacă bifa dispare într-o zi, se șterge tot blocul deodată. */ .fclms-deck-card .fclms-deck-card__head { padding-right: 30px; } /* Bara plutește sus, deasupra listei: ea e ce faci acum, lista e de unde alegi. */ .fclms-mixbar { position: sticky; top: 8px; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px; background: var(--fc-tint); border: 1px solid var(--fc-primary); border-radius: var(--fc-radius); } .fclms-mixbar__count { font-weight: 700; color: var(--fc-primary); font-size: 14px; } /* Textul citit de cititoarele de ecran, nevăzut de restul. */ .fclms-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .fclms-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* ----------------------------------------------------------- modal */ .fclms-modal-back { position: fixed; inset: 0; background: rgba(30,42,56,.55); z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; } .fclms-modal { background: var(--fc-paper); border-radius: 18px; width: 100%; max-width: 860px; padding: 26px; font-family: var(--fc-font); color: var(--fc-ink); box-shadow: 0 18px 60px rgba(0,0,0,.3); /* Pe ecran scund fereastra se derulează în ea, nu se taie. */ max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; } .fclms-modal__head { display: flex; align-items: center; margin-bottom: 18px; } .fclms-modal__head h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.02em; } .fclms-modal__close, .fclms-app .fclms-modal__close { margin-left: auto; background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--fc-muted); } .fclms-modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* ------------------------------------------ BUTONUL DE AUTENTIFICARE Fereastra de autentificare e îngustă: are două câmpuri, iar una lată i-ar fi împrăștiat pe toată pagina. Restul ferestrelor rămân cum erau. */ .fclms-modal--narrow { max-width: 420px; } /* Pagina de dedesubt nu se mai derulează cât e fereastra deschisă: altfel degetul care mișcă pe telefon duce pagina, nu formularul. */ .fclms-noscroll, .fclms-noscroll body { overflow: hidden; } .fclms-loginmodal .fclms-field { margin-bottom: 14px; } /* Butonul de intrare nu se lipește de câmpul parolei. Cele două câmpuri sunt despărțite doar cât să se vadă că fac parte din același șir; butonul e altceva — capătul drumului — și are nevoie de o pauză înaintea lui, ca degetul să nu-l apese din greșeală în locul câmpului de deasupra. */ .fclms-loginmodal .fclms-field + .fclms-btn { margin-top: 14px; } .fclms-loginmodal__who { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--fc-ink); } .fclms-loginmodal .fclms-badges { margin-bottom: 20px; } .fclms-loginmodal__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .fclms-loginmodal__links { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 0; font-size: 14px; } /* Butonul plutitor stă sus, în colțul opus bulinei de ajutor: două lucruri care plutesc peste pagină n-au ce căuta unul peste altul. */ .fclms-loginfloat { position: fixed; top: 18px; right: 18px; z-index: 9998; } .fclms-loginbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--fc-line); border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; background: var(--fc-surface); color: var(--fc-ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .fclms-loginbtn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(22, 32, 43, .18); } .fclms-loginbtn:focus-visible { outline: none; box-shadow: var(--fc-ring); } .fclms-loginbtn__key { display: block; flex: none; } .fclms-loginbtn__face { width: 26px; height: 26px; border-radius: 50%; display: block; } /* Plutitorul e singur pe fundalul paginii, deci are nevoie de umbră ca să se desprindă de ea; cel din header stă printre celelalte și nu are. */ .fclms-loginbtn--float { box-shadow: 0 4px 16px rgba(22, 32, 43, .22); } @media (max-width: 560px) { .fclms-loginfloat { top: 12px; right: 12px; } /* Pe telefon rămâne doar semnul: numele ar fi acoperit jumătate din bară. */ .fclms-loginbtn--float { padding: 10px; } .fclms-loginbtn--float .fclms-loginbtn__text { display: none; } } /* --------------------------------------------------------- responsiv */ @media (max-width: 860px) { .fclms-editor-panels, .fclms-grid-2, .fclms-auth { grid-template-columns: 1fr; } .fclms-app { padding: 16px; } .fclms-box-row { flex-wrap: wrap; } .fclms-flashcard { padding: 24px 20px; } .fclms-row { flex-wrap: wrap; } } /* ajustări în wp-admin */ .fclms-wrap { margin-right: 20px; } .fclms-wrap .fclms-app { margin-top: 16px; } /* ------------------------------------------- configurarea sesiunii */ .fclms-setup { display: grid; gap: 18px; } .fclms-setup__label { display: block; font-size: 13px; font-weight: 700; color: var(--fc-muted); margin-bottom: 8px; } .fclms-pills { display: flex; flex-wrap: wrap; gap: 8px; } .fclms-pill { font-family: inherit; font-size: 14px; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--fc-line); background: var(--fc-surface); color: var(--fc-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; } .fclms-pill:hover { border-color: var(--fc-primary); background: rgba(var(--fc-primary-rgb), .07); color: var(--fc-primary); } .fclms-pill.is-active { background: var(--fc-primary); border-color: var(--fc-primary); color: #fff; } .fclms-pill.is-active .fclms-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.6); } /* --------------------------------------------------- pronunție */ .fclms-speech { margin-top: 20px; text-align: center; } .fclms-speech__target { font-size: 26px; font-weight: 700; line-height: 1.35; margin: 12px 0 20px; } .fclms-mic { font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--fc-primary); background: var(--fc-surface); color: var(--fc-primary); } .fclms-mic:hover { background: var(--fc-primary); color: #fff; } .fclms-mic__icon { font-size: 20px; } .fclms-mic.is-live { background: var(--fc-danger); border-color: var(--fc-danger); color: #fff; animation: fclms-pulse 1.4s ease-in-out infinite; } @keyframes fclms-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 50% { box-shadow: 0 0 0 12px rgba(192,57,43,0); } } @media (prefers-reduced-motion: reduce) { .fclms-mic.is-live { animation: none; } } .fclms-speech__interim { min-height: 24px; color: var(--fc-muted); font-style: italic; margin: 12px 0 4px; } .fclms-speech__words { font-size: 20px; line-height: 1.9; } .fclms-speech__heard { font-size: 17px; color: var(--fc-muted); font-style: italic; } .fclms-word { padding: 2px 7px; border-radius: 7px; } .fclms-word.is-ok { background: var(--fc-success-soft); color: var(--fc-success); font-weight: 700; } .fclms-word.is-bad { background: var(--fc-danger-soft); color: var(--fc-danger); text-decoration: underline wavy; } /* ------------------------------------------------------ categorii */ .fclms-category, .fclms-app .fclms-category { font-family: inherit; text-align: left; cursor: pointer; padding: 0 0 18px; background: var(--fc-surface); border: 1.5px solid var(--fc-line); border-radius: var(--fc-radius); overflow: hidden; display: grid; gap: 6px; box-shadow: var(--fc-shadow); } .fclms-category:hover { transform: translateY(-2px); } .fclms-category__bar { display: block; height: 8px; } .fclms-category__title { font-size: 18px; font-weight: 700; padding: 12px 18px 0; } .fclms-category .fclms-row__meta { padding: 0 18px; } /* ----------------------------------------------------- statistici */ .fclms-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .fclms-stat { background: var(--fc-surface); border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 18px; text-align: center; box-shadow: var(--fc-shadow); } .fclms-stat strong { display: block; font-size: 30px; font-weight: 900; letter-spacing: -.02em; } .fclms-stat span { font-size: 13px; color: var(--fc-muted); } .fclms-stat--accent { border-color: var(--fc-accent); } .fclms-stat--accent strong { color: var(--fc-accent); } .fclms-chart { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-top: 10px; } .fclms-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; } .fclms-chart__bar { display: block; width: 100%; max-width: 22px; background: var(--fc-primary); border-radius: 4px 4px 0 0; min-height: 2px; } .fclms-chart__col:hover .fclms-chart__bar { background: var(--fc-accent); } .fclms-chart__x { font-size: 9px; color: var(--fc-muted); } /* ------------------------------------------------ căutare și culori */ .fclms-searchbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .fclms-searchbar input[type=search] { flex: 1; min-width: 220px; font-family: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--fc-line); border-radius: 10px; } .fclms-swatches { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; } /* --------------------------------------------------------------------------- Neutralizarea stilurilor de buton venite din tema site-ului. Multe teme colorează orice