/* ========================================================================== LĂMURIRILE SUB UN „i” Vezi `assets/js/tips.js` pentru ce se strânge și unde se așază semnul. SEMNUL NU ARE CULOARE A LUI Ia culoarea scrisului lângă care stă, stinsă pe jumătate. Pe banda întunecată de Acasă e alb, într-un titlu de secțiune e în culoarea gazdei, lângă o bifă e cerneala paginii. O culoare anume — albastrul „informație”, de pildă — ar fi fost un al treilea ton în fiecare loc, iar pe douăzeci de titluri ar fi devenit ea lucrul cel mai vizibil de pe pagină. BULA E ÎN CULORILE ÎNTOARSE Fundalul e cerneala paginii, iar scrisul e hârtia ei. Pe foaia albă iese o bulă închisă; în modul întunecat, unde cerneala e deschisă, iese una deschisă. Nu se scrie nicio culoare de două ori. ========================================================================== */ /* ------------------------------------------------------- ÎNAINTE DE STRÂNS Ascunse până le ia scriptul în primire, ca pagina să nu se deseneze o dată cu toate paragrafele întinse. Clasa de pe `` o scrie capul paginii numai când JavaScript-ul merge — fără el, lămuririle rămân la vedere. */ html.fclms-tips .fclms-hint:not(.is-kept):not(.is-folded) { display: none; } /* ------------------------------------------------------------------ SEMNUL */ .fclms-tip-wrap { display: inline; white-space: nowrap; } /* Numele clasei de două ori: aplicația îmbracă orice `button` din ea, iar semnul trebuie să rămână un semn, nu un buton cu chenar și fundal. */ .fclms-tip.fclms-tip { position: relative; box-sizing: content-box; display: inline-flex; align-items: center; justify-content: center; width: 1.1em; min-width: 15px; max-width: 20px; height: 1.1em; min-height: 15px; max-height: 20px; margin: 0 0 0 .32em; padding: 0; vertical-align: -.16em; font: inherit; line-height: 1; text-transform: none; letter-spacing: 0; color: inherit; background: none; border: 0; border-radius: 50%; box-shadow: none; opacity: .5; cursor: help; transition: opacity .14s ease, color .14s ease; } /* Ținta pentru deget e mai mare decât desenul: un cerc de cincisprezece pixeli nu se nimerește cu degetul mare. */ .fclms-tip.fclms-tip::after { content: ""; position: absolute; inset: -9px; } /* În etichetă semnul stă între cuvânt și câmp; fără aer în dreapta, câmpul s-ar fi lipit de el. */ label .fclms-tip-wrap { margin-right: .3em; } .fclms-tip.fclms-tip svg { display: block; width: 100%; height: 100%; } .fclms-tip.fclms-tip:hover, .fclms-tip.fclms-tip:focus-visible, .fclms-tip.fclms-tip.is-on { opacity: 1; background: none; } .fclms-tip__text[hidden] { display: none !important; } @media (hover: none) { .fclms-tip.fclms-tip { opacity: .62; } } /* -------------------------------------------------------------------- BULA */ .fclms-tipbox { --tip-arrow: 50%; position: fixed; z-index: 100000; box-sizing: border-box; max-width: min(340px, calc(100vw - 16px)); padding: 10px 13px; font-family: var(--fc-font, inherit); font-size: var(--fc-p); font-weight: 400; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: 0; color: var(--fc-surface, #fff); background: var(--fc-ink, #1E2A38); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(15, 25, 35, .45); animation: fclms-tip-in .12s ease-out; } .fclms-tipbox[hidden] { display: none; } /* Vârful, în dreptul semnului. */ .fclms-tipbox::before { content: ""; position: absolute; top: -5px; left: var(--tip-arrow); width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); } .fclms-tipbox.is-above::before { top: auto; bottom: -5px; } .fclms-tipbox__in { position: relative; max-height: min(60vh, 420px); overflow-y: auto; } /* Lămuririle au fost scrise ca paragrafe cenușii; în bulă nu mai sunt nici paragrafe de pagină, nici cenușii. */ .fclms-tipbox__in p { margin: 0; color: inherit; } .fclms-tipbox__in p + p { margin-top: 8px; } .fclms-tipbox__in .fclms-hint, .fclms-tipbox__in small { display: inline; margin: 0; font-size: inherit; color: inherit; opacity: 1; } .fclms-tipbox__in code { padding: 0 4px; font-size: .92em; color: inherit; background: rgba(127, 127, 127, .28); border-radius: 4px; } @keyframes fclms-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fclms-tip.fclms-tip { transition: none; } .fclms-tipbox { animation: none; } } @media print { html.fclms-tips .fclms-hint:not(.is-kept):not(.is-folded) { display: revert; } .fclms-tip-wrap, .fclms-tipbox { display: none !important; } }