/* ------------------------------------------------------------------ Nord Panel - stiluri proprii peste Tailwind ------------------------------------------------------------------ */ /* Aliasuri vechi. Culorile adevarate stau in /css/themes.css, generat din src/themes.js si incarcat INAINTEA acestui fisier. Numele de aici au ramas pentru ca sunt scrise in zeci de reguli mai jos; sunt doar trimiteri, nu valori. `color-scheme` NU se mai pune aici: il da fiecare tema, iar app.css se incarca dupa themes.css, deci un `color-scheme: dark` scris aici ar face temele luminoase sa aiba controale de formular negre. */ :root { --ink-900: rgb(var(--c-ink-900)); --ink-800: rgb(var(--c-ink-800)); --ink-700: rgb(var(--c-ink-700)); --ink-600: rgb(var(--c-ink-600)); --ink-500: rgb(var(--c-ink-500)); --line: rgb(var(--c-overlay) / 0.07); --frost: rgb(var(--c-frost-500)); } * { -webkit-font-smoothing: antialiased; } /* Alpine sterge x-cloak abia dupa ce initializeaza componenta. Fara regula asta, continutul legat de Alpine ar clipi o data, neformatat, la incarcarea paginii. */ [x-cloak] { display: none !important; } body { margin: 0; min-height: 100vh; background: radial-gradient(1100px 600px at 12% -10%, rgb(var(--c-frost-500) / 0.055), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgb(var(--c-overlay) / 0.025), transparent 55%), var(--ink-900); color: rgb(var(--c-slate-200)); font-family: Inter, system-ui, sans-serif; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--c-scroll)); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-scroll-hi)); background-clip: content-box; } /* ----------------------------- Layout ----------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; flex-direction: column; width: 262px; background: linear-gradient(180deg, rgb(var(--c-ink-850) / .96), rgb(var(--c-sunken) / .98)); border-right: 1px solid var(--line); backdrop-filter: blur(12px); transform: translateX(-100%); transition: transform .22s ease; } .sidebar.is-open { transform: translateX(0); } .sidebar-backdrop { position: fixed; inset: 0; z-index: 40; /* Ecranul din spatele meniului se INTUNECA, si pe o tema luminoasa: rostul lui e sa scoata meniul in fata, nu sa se potriveasca cu paleta. */ background: rgb(var(--c-shadow) / .65); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; } .main { flex: 1; min-width: 0; padding-bottom: 48px; } @media (min-width: 1024px) { .sidebar { transform: none; } .sidebar-backdrop { display: none; } .main { margin-left: 262px; } } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgb(var(--c-sunken) / .78); backdrop-filter: blur(14px); } .page { padding: 22px 20px; max-width: 1500px; } @media (min-width: 768px) { .page { padding: 26px 28px; } } /* ------------------------------ Logo ------------------------------ */ /* `overflow: visible`: podoabele de anotimp ies peste marginea insignei. */ .brand-logo { flex-shrink: 0; overflow: visible; filter: drop-shadow(0 6px 10px rgb(var(--c-shadow) / .35)); } .logo-stop-a { stop-color: rgb(var(--c-frost-500)); } .logo-stop-b { stop-color: rgb(var(--c-frost-700)); } .logo-mark { fill: none; stroke: rgb(var(--c-ink-900)); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; } .logo-deco { display: none; } html[data-season="winter"] .logo-deco[data-for="winter"], html[data-season="holidays"] .logo-deco[data-for="holidays"], html[data-season="autumn"] .logo-deco[data-for="autumn"], html[data-season="spring"] .logo-deco[data-for="spring"], html[data-season="summer"] .logo-deco[data-for="summer"] { display: inline; } .logo-snow { fill: rgb(var(--c-snow)); stroke: rgb(var(--c-snow-edge) / .6); stroke-width: .5; } .logo-hat { fill: rgb(var(--c-bulb-1)); } .logo-leaf-a { fill: rgb(var(--c-leaf-2)); } .logo-leaf-b { fill: rgb(var(--c-leaf-1)); } .logo-vein { fill: none; stroke: rgb(var(--c-leaf-vein) / .7); stroke-width: .7; stroke-linecap: round; } .logo-petal { fill: rgb(var(--c-petal-1)); stroke: rgb(var(--c-petal-4)); stroke-width: .45; } .logo-bloom-core { fill: rgb(var(--c-blossom-core)); } .logo-sprout { fill: rgb(var(--c-twig-leaf)); } .logo-sun { fill: rgb(var(--c-sun)); stroke: rgb(var(--c-sun-core) / .8); stroke-width: .8; } .logo-rays path { stroke: rgb(var(--c-sun)); stroke-width: 1.6; stroke-linecap: round; } /* Miscare mica, doar cat sa se vada ca e vie. Se opreste la fel ca restul. */ .logo-rays { transform-origin: 37px 3px; animation: logo-spin 24s linear infinite; } .logo-deco[data-for="autumn"] { transform-origin: 31px 8px; animation: logo-sway 4s ease-in-out infinite alternate; } @keyframes logo-spin { to { transform: rotate(360deg); } } @keyframes logo-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } } @media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .logo-rays, html:not([data-motion="full"]) .logo-deco { animation: none; } } /* --------------------------- Navigatie ---------------------------- */ /* Zona derulabila a meniului. `overscroll-behavior: contain` opreste "scroll chaining": cu meniul deschis pe telefon, o derulare ajunsa la capatul lui continua in pagina de dedesubt, iar omul inchide meniul si se trezeste in alt loc al paginii. */ .nav-scroll { flex: 1; min-height: 0; padding: 0 12px 16px; overflow-y: auto; overscroll-behavior: contain; } .nav-scroll > .nav-item + .nav-item, .nav-sec > .nav-item + .nav-item { margin-top: 2px; } /* Semnul de pagina curenta sta la -12px, adica exact pe marginea zonei derulabile - iar `overflow-y: auto` taie tot ce iese in stanga. Il tragem inauntru. Intrarile din grupul de Admin au regula lor, mai jos. */ .nav-scroll .nav-item.is-active::before { left: -6px; } .nav-label { padding: 15px 10px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--c-slate-500)); } /* Primul capitol sta chiar sub logo: fara asta, meniul pare ca incepe strambat. */ .nav-scroll > .nav-label:first-child, .nav-scroll > .nav-sec:first-child > .nav-label { padding-top: 2px; } /* Capitolele se strang din eticheta (views/partials/shell.ejs). Eticheta ramane cum era; doar sageata mica din dreapta spune ca se poate apasa. E vizibila mereu, nu doar la hover: pe telefon nu exista hover. */ .nav-sec > summary { display: flex; align-items: center; cursor: pointer; list-style: none; user-select: none; transition: color .15s ease; } .nav-sec > summary::-webkit-details-marker { display: none; } .nav-sec > summary::marker { content: ''; } .nav-sec > summary:hover { color: rgb(var(--c-slate-300)); } .nav-sec-chev { width: 13px; height: 13px; margin-left: auto; color: rgb(var(--c-slate-600)); transition: transform .18s ease, color .15s ease; } .nav-sec > summary:hover .nav-sec-chev { color: rgb(var(--c-slate-400)); } .nav-sec:not([open]) .nav-sec-chev { transform: rotate(-90deg); } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 11px; font-size: 14px; font-weight: 500; color: rgb(var(--c-slate-400)); transition: background .15s ease, color .15s ease; } .nav-item svg { width: 18px; height: 18px; } .nav-item:hover { background: rgb(var(--c-slate-400) / .07); color: rgb(var(--c-slate-200)); } .nav-item.is-active { background: linear-gradient(90deg, rgb(var(--c-frost-500) / .18), rgb(var(--c-frost-500) / .04)); color: rgb(var(--c-frost-hi)); } .nav-item.is-active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); height: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--frost); } /* Grupul pliabil de administrare. `
` nativ, fara JavaScript: meniul e singurul mod de a naviga pe telefon (vezi capcana din views/partials/shell.ejs), deci nu are voie sa depinda de un framework. Deschiderea implicita o decide serverul. */ .nav-group { margin-top: 10px; } .nav-group > summary { cursor: pointer; list-style: none; color: rgb(var(--c-slate-300)); font-weight: 600; } /* Triunghiul implicit al browserului: il scoatem, avem chevronul nostru. */ .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary::marker { content: ''; } .nav-group > summary:hover { background: rgb(var(--c-slate-400) / .07); } .nav-group[open] > summary { color: rgb(var(--c-slate-200)); } .nav-chev { margin-left: auto; color: rgb(var(--c-slate-600)); transition: transform .18s ease; } .nav-group[open] .nav-chev { transform: rotate(180deg); } /* Linia din stanga tine intrarile impreuna, ca sa se vada ca sunt un capitol. */ .nav-group-body { margin: 2px 0 2px 21px; padding-left: 10px; border-left: 1px solid rgb(var(--c-slate-400) / .12); } .nav-group-body .nav-item { padding: 7px 10px; font-size: 13.5px; } .nav-group-body .nav-item.is-active::before { left: -11px; } .nav-sub { padding: 10px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c-slate-600)); } .nav-group-body > .nav-sub:first-child { padding-top: 4px; } .avatar { display: grid; place-items: center; height: 34px; width: 34px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, rgb(var(--c-frost-700)), rgb(var(--c-frost-500))); color: rgb(var(--c-ink-900)); font-size: 12px; font-weight: 800; letter-spacing: .04em; } /* ---------------------------- Carduri ----------------------------- */ .card { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgb(var(--c-ink-700) / .92), rgb(var(--c-ink-850) / .92)); box-shadow: 0 18px 40px -26px rgb(var(--c-shadow) / .95); /* Fara asta, un lipit de marginea cardului taie colturile rotunjite: fundalul de la `thead th` si ultimul rand se desenau in coltul patrat. */ overflow: hidden; } .card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .card-title { font-size: 14px; font-weight: 700; color: rgb(var(--c-slate-200)); } .card-sub { font-size: 12px; color: rgb(var(--c-slate-500)); } .card-body { padding: 18px; } .stat-card { position: relative; overflow: hidden; padding: 18px; } .stat-card::after { content: ''; position: absolute; right: -30px; top: -30px; height: 110px; width: 110px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--c-frost-500) / .16), transparent 70%); } .stat-value { font-size: 28px; font-weight: 800; line-height: 1.1; color: rgb(var(--c-slate-50)); } .stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-slate-500)); } /* ---------------------------- Butoane ----------------------------- */ .btn, .btn-ghost, .btn-danger, .btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; } .btn { background: linear-gradient(135deg, rgb(var(--c-frost-500)), rgb(var(--c-frost-700))); color: rgb(var(--c-ink-900)); } .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-soft { background: rgb(var(--c-frost-500) / .12); color: rgb(var(--c-frost-hi)); border-color: rgb(var(--c-frost-500) / .22); } .btn-soft:hover { background: rgb(var(--c-frost-500) / .2); } .btn-ghost { background: rgb(var(--c-slate-400) / .07); color: rgb(var(--c-slate-300)); border-color: var(--line); } .btn-ghost:hover { background: rgb(var(--c-slate-400) / .14); color: rgb(var(--c-text-hi)); } .btn-danger { background: rgb(var(--c-red) / .16); color: rgb(var(--c-red-on)); border-color: rgb(var(--c-red) / .32); } .btn-danger:hover { background: rgb(var(--c-red) / .28); color: rgb(var(--c-text-hi)); } .btn:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-soft:disabled { opacity: .5; cursor: not-allowed; transform: none; } .icon-btn { display: inline-grid; place-items: center; height: 34px; width: 34px; border-radius: 10px; color: rgb(var(--c-slate-400)); background: rgb(var(--c-slate-400) / .06); border: 1px solid var(--line); cursor: pointer; transition: all .15s ease; } .icon-btn:hover { color: rgb(var(--c-text-hi)); background: rgb(var(--c-slate-400) / .16); } /* Un buton stins ramane vizibil, dar nu mai raspunde la hover: altfel arata apasabil si omul se intreaba de ce nu se intampla nimic. */ .icon-btn:disabled { opacity: .35; cursor: not-allowed; } .icon-btn:disabled:hover { color: rgb(var(--c-slate-400)); background: rgb(var(--c-slate-400) / .06); } .icon-btn.danger:hover { color: rgb(var(--c-red-hi)); background: rgb(var(--c-red) / .25); border-color: rgb(var(--c-red) / .4); } /* Butonul de meniu (hamburger). NU se poate folosi `lg:hidden` de la Tailwind: app.css se incarca DUPA tailwind.css, iar `.icon-btn { display: inline-grid }` de mai sus are aceeasi specificitate ca `.lg\:hidden { display: none }` si, fiind mai jos in ordinea fisierelor, castiga. Rezultatul era un hamburger vizibil si pe desktop, langa un meniu deja deschis. Regula sta aici, dupa .icon-btn, ca sa fie ea ultima. 1024px e acelasi prag cu cel la care sidebar-ul devine fix (vezi Layout). */ .sidebar-toggle { display: none; } @media (max-width: 1023.98px) { .sidebar-toggle { display: inline-grid; } } /* Meniu inchis -> hamburger; meniu deschis -> X. Schimbarea se face din CSS, dupa clasa pusa pe , ca sa nu depinda de niciun framework. */ .sidebar-toggle .icon-close { display: none; } body.sidebar-open .sidebar-toggle .icon-open { display: none; } body.sidebar-open .sidebar-toggle .icon-close { display: block; } /* --------------------------- Formulare ---------------------------- */ .label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: rgb(var(--c-slate-400)); } .input, .select, textarea.input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid rgb(var(--c-slate-400) / .16); background: rgb(var(--c-sunken) / .75); color: rgb(var(--c-slate-100)); font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder { color: rgb(var(--c-slate-600)); } .input:focus, .select:focus { outline: none; border-color: rgb(var(--c-frost-500) / .55); box-shadow: 0 0 0 3px rgb(var(--c-frost-500) / .13); } .select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; } /* Input cu iconita in stanga (lupa, lacat, om). NU merge cu `pl-9` de la Tailwind: app.css se incarca dupa tailwind.css, iar `.input { padding: 9px 12px }` de mai sus e o prescurtare care rescrie si padding-left, la aceeasi specificitate. Rezultatul era text scris peste iconita. Aici punem padding-ul explicit, dupa regula care il strica. */ .input.has-icon { padding-left: 38px; } .input.has-icon-right { padding-right: 40px; } /* Iconita propriu-zisa: mereu in spatele textului si nefocusabila. */ .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); height: 16px; width: 16px; color: rgb(var(--c-slate-600)); pointer-events: none; } .hint { margin-top: 5px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } /* Link intr-un rand de ajutor: se vede ca e link, fara sa tipe. */ .icon-link { color: rgb(var(--c-frost-500)); text-decoration: underline; text-underline-offset: 2px; } .icon-link:hover { color: rgb(var(--c-frost-400)); } .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch .track { position: relative; height: 22px; width: 40px; flex-shrink: 0; border-radius: 99px; background: rgb(var(--c-ink-400)); transition: background .18s ease; } .switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; height: 16px; width: 16px; border-radius: 50%; background: rgb(var(--c-slate-400)); transition: transform .18s ease, background .18s ease; } .switch input:checked + .track { background: rgb(var(--c-frost-500) / .85); } .switch input:checked + .track::after { transform: translateX(18px); background: rgb(var(--c-ink-900)); } .switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgb(var(--c-frost-500) / .25); } /* ----------------------------- Tabele ----------------------------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.data thead th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-slate-500)); background: rgb(var(--c-ink-850) / .96); border-bottom: 1px solid var(--line); white-space: nowrap; } table.data tbody td { padding: 11px 14px; border-bottom: 1px solid rgb(var(--c-slate-400) / .06); vertical-align: middle; } /* `table.data thead th` de mai sus e mai specific decat `.text-right` din Tailwind, deci un antet scris `class="text-right"` ramanea la stanga, iar coloana de sub el la dreapta (Last seen din Staff, durata din Ban / Gag list - 15 antete in total). Alinierea antetului o spune clasa lui, ca la celule. */ table.data thead th.text-right { text-align: right; } table.data thead th.text-center { text-align: center; } table.data tbody tr:hover { background: rgb(var(--c-slate-400) / .045); } table.data tbody tr:last-child td { border-bottom: 0; } /* Scoreboard-ul de pe dashboard. Un server de 32 de sloti ar face cardul cat toata pagina, deci lista are o inaltime maxima si se deruleaza in interiorul ei. Capul de tabel ramane lipit sus - fara el, dupa cateva randuri nu mai stii ce inseamna coloana din dreapta. */ .scoreboard { max-height: 430px; overflow-y: auto; } .scoreboard table.data thead th { position: sticky; top: 0; z-index: 2; } .scoreboard::-webkit-scrollbar { width: 9px; } .scoreboard::-webkit-scrollbar-thumb { background: rgb(var(--c-slate-400) / .18); border-radius: 99px; } .scoreboard::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-slate-400) / .3); } .scoreboard::-webkit-scrollbar-track { background: transparent; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; } .badge-frost { background: rgb(var(--c-frost-500) / .14); color: rgb(var(--c-frost-on)); border-color: rgb(var(--c-frost-500) / .28); } .badge-green { background: rgb(var(--c-green) / .14); color: rgb(var(--c-green-on)); border-color: rgb(var(--c-green) / .3); } .badge-yellow { background: rgb(var(--c-yellow) / .14); color: rgb(var(--c-yellow-on)); border-color: rgb(var(--c-yellow) / .3); } .badge-red { background: rgb(var(--c-red) / .14); color: rgb(var(--c-red-on)); border-color: rgb(var(--c-red) / .3); } .badge-purple { background: rgb(var(--c-purple) / .14); color: rgb(var(--c-purple-on)); border-color: rgb(var(--c-purple) / .3); } .badge-slate { background: rgb(var(--c-slate-400) / .1); color: rgb(var(--c-slate-400)); border-color: rgb(var(--c-slate-400) / .18); } .dot { height: 7px; width: 7px; border-radius: 50%; display: inline-block; } .dot-on { background: rgb(var(--c-green)); box-shadow: 0 0 0 3px rgb(var(--c-green) / .18); } .dot-off { background: rgb(var(--c-slate-600)); } .flag-chip { display: inline-grid; place-items: center; height: 20px; min-width: 20px; padding: 0 3px; border-radius: 6px; background: rgb(var(--c-frost-500) / .12); border: 1px solid rgb(var(--c-frost-500) / .22); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: rgb(var(--c-frost-on)); } /* ------------------------ Selector de flaguri --------------------- */ .flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 7px; } .flag-opt { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; cursor: pointer; border: 1px solid rgb(var(--c-slate-400) / .12); background: rgb(var(--c-sunken) / .5); transition: all .14s ease; } .flag-opt:hover { border-color: rgb(var(--c-frost-500) / .35); background: rgb(var(--c-frost-500) / .07); } .flag-opt input { display: none; } .flag-opt .key { display: grid; place-items: center; height: 22px; width: 22px; flex-shrink: 0; border-radius: 6px; background: rgb(var(--c-slate-400) / .12); color: rgb(var(--c-slate-400)); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; } .flag-opt .txt { font-size: 12px; color: rgb(var(--c-slate-400)); line-height: 1.25; } .flag-opt.is-on { border-color: rgb(var(--c-frost-500) / .5); background: rgb(var(--c-frost-500) / .12); } .flag-opt.is-on .key { background: rgb(var(--c-frost-500)); color: rgb(var(--c-ink-900)); } .flag-opt.is-on .txt { color: rgb(var(--c-frost-hi)); } /* ----------------------------- Modal ------------------------------ */ .modal { position: fixed; inset: 0; z-index: 80; display: none; } .modal.is-open { display: block; } .modal-backdrop { position: absolute; inset: 0; background: rgb(var(--c-shadow) / .74); backdrop-filter: blur(4px); } .modal-panel { position: relative; z-index: 1; width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 60px); overflow-y: auto; margin: 30px auto; border-radius: 18px; border: 1px solid rgb(var(--c-slate-400) / .14); background: linear-gradient(180deg, rgb(var(--c-ink-700)), rgb(var(--c-ink-800))); box-shadow: 0 40px 90px -30px rgb(var(--c-shadow) / .95); animation: pop .18s ease; } .modal-panel.is-sm { width: min(460px, calc(100vw - 28px)); } @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.985); } } .modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); } /* Textul din antet ia tot locul ramas, nu doar cat ii trebuie (`mr-auto` singur). Cu latimea luata dupa continut, plafonul numelui din `.name-row` (100% - 3.25em) se socotea pe latimea numelui plus eticheta - si langa o eticheta scurta ("LGN") taia numele, desi fereastra avea loc (reclamat, "LYNN..."). */ .modal-head > .mr-auto { flex: 1 1 auto; min-width: 0; } .modal-body { padding: 20px; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); } /* ----------------------------- Toast ------------------------------ */ #toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 9px; } .toast { display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: 380px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgb(var(--c-ink-700) / .97); backdrop-filter: blur(8px); box-shadow: 0 20px 44px -22px rgb(var(--c-shadow) / .95); font-size: 13.5px; color: rgb(var(--c-slate-200)); animation: slideIn .2s ease; } .toast.out { animation: slideOut .2s ease forwards; } .toast.ok { border-left: 3px solid rgb(var(--c-green)); } .toast.err { border-left: 3px solid rgb(var(--c-red)); } .toast.warn { border-left: 3px solid rgb(var(--c-yellow)); } @keyframes slideIn { from { opacity: 0; transform: translateX(24px); } } @keyframes slideOut { to { opacity: 0; transform: translateX(24px); } } /* ------------------------ Taburi login/register ------------------- */ .auth-tab { padding: 13px 10px; border: 0; background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; color: rgb(var(--c-slate-500)); border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease, background .15s ease; } .auth-tab:hover { color: rgb(var(--c-slate-300)); background: rgb(var(--c-slate-400) / .04); } .auth-tab.is-active { color: rgb(var(--c-frost-hi)); border-bottom-color: var(--frost); background: rgb(var(--c-frost-500) / .06); } .pass-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 6px; border: 0; border-radius: 6px; background: transparent; color: rgb(var(--c-slate-500)); cursor: pointer; } .pass-toggle:hover { color: rgb(var(--c-slate-200)); } /* ---------------------------- Diverse ----------------------------- */ .chart-box { position: relative; height: 330px; } .chart-box.sm { height: 280px; } /* Grupul de butoane tip "segment". Pe telefon nu incap toate pe un rand, deci se deruleaza pe orizontala in loc sa impinga pagina in lateral. */ .seg { display: inline-flex; padding: 3px; max-width: 100%; overflow-x: auto; border-radius: 11px; background: rgb(var(--c-sunken) / .7); border: 1px solid var(--line); scrollbar-width: none; -ms-overflow-style: none; } .seg::-webkit-scrollbar { display: none; } .seg button { flex-shrink: 0; padding: 6px 14px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: rgb(var(--c-slate-400)); transition: all .15s ease; white-space: nowrap; } .seg button:hover { color: rgb(var(--c-slate-200)); } .seg button.is-active { background: rgb(var(--c-frost-500) / .18); color: rgb(var(--c-frost-hi)); } .skeleton { background: linear-gradient(90deg, rgb(var(--c-slate-400) / .06), rgb(var(--c-slate-400) / .12), rgb(var(--c-slate-400) / .06)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; } @keyframes shimmer { to { background-position: -200% 0; } } .empty { padding: 44px 20px; text-align: center; color: rgb(var(--c-slate-500)); } .empty svg { margin: 0 auto 12px; height: 34px; width: 34px; opacity: .5; } .mono { font-family: 'JetBrains Mono', monospace; } /* ------------------------------------------------------------------ Sectiuni noi: anunturi, regulament, sectiuni oprite, jurnal ------------------------------------------------------------------ */ /* Eticheta "off" din meniul lateral: sectiunea exista, dar un admin a oprit-o. */ .nav-off { margin-left: auto; padding: 2px 7px; border-radius: 99px; border: 1px solid rgb(var(--c-slate-400) / .24); background: rgb(var(--c-slate-400) / .1); color: rgb(var(--c-slate-400)); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Text lung scris de admini (anunturi, descrierea unei reguli). */ .prose-panel { font-size: 14px; line-height: 1.7; color: rgb(var(--c-prose)); } .prose-panel p { margin: 0 0 12px; } .prose-panel p:last-child { margin-bottom: 0; } .prose-panel strong, .prose-panel b { color: rgb(var(--c-slate-200)); font-weight: 600; } /* Bara de filtre sub forma de pastile (anunturi, jurnal). */ .chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .55); color: rgb(var(--c-slate-400)); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; white-space: nowrap; } .chip:hover { color: rgb(var(--c-slate-200)); border-color: rgb(var(--c-slate-400) / .28); } .chip.is-active { border-color: rgb(var(--c-frost-500) / .5); background: rgb(var(--c-frost-500) / .14); color: rgb(var(--c-frost-hi)); } .chip .count { padding: 0 6px; border-radius: 99px; background: rgb(var(--c-slate-400) / .14); color: rgb(var(--c-slate-400)); font-size: 11px; font-weight: 700; } .chip.is-active .count { background: rgb(var(--c-frost-500) / .28); color: rgb(var(--c-frost-hi)); } /* --------------------------- Anunturi ----------------------------- */ .news-item { position: relative; } .news-item.is-pinned { border-color: rgb(var(--c-frost-500) / .28); } .news-item.is-draft { border-style: dashed; opacity: .82; } .news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } .news-meta .sep { color: rgb(var(--c-slate-700)); } /* -------------------------- Regulament ---------------------------- */ .rule-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgb(var(--c-slate-400) / .06); } .rule-row:last-child { border-bottom: 0; padding-bottom: 0; } .rule-row:first-child { padding-top: 0; } .rule-code { flex-shrink: 0; min-width: 42px; height: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; background: rgb(var(--c-frost-500) / .1); border: 1px solid rgb(var(--c-frost-500) / .2); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: rgb(var(--c-frost-on)); } .rule-title { font-size: 14.5px; font-weight: 600; color: rgb(var(--c-slate-200)); line-height: 1.45; } .rule-body { margin-top: 5px; font-size: 13px; line-height: 1.65; color: rgb(var(--c-slate-400)); } /* Eticheta libera a unei reguli: "Gag 10 min", "Kick", "Ban permanent". */ .rule-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 9px; border-radius: 7px; border: 1px dashed rgb(var(--c-red) / .3); background: rgb(var(--c-red) / .08); font-size: 11.5px; font-weight: 600; color: rgb(var(--c-red-on)); } /* Iconita din fata titlului unei reguli. */ .rule-icon { display: inline-grid; place-items: center; height: 20px; width: 20px; margin-right: 6px; vertical-align: -4px; color: rgb(var(--c-frost-500)); } .rule-icon svg { height: 16px; width: 16px; } /* Sectiunea de regulament, cu cap de tabel pe care se poate da clic. */ .section-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; background: transparent; border: 0; cursor: pointer; text-align: left; transition: background .15s ease; } .section-head:hover { background: rgb(var(--c-slate-400) / .04); } .section-chevron { transition: transform .2s ease; color: rgb(var(--c-slate-500)); } .section-head[aria-expanded="true"] .section-chevron { transform: rotate(180deg); } /* --------------- Sectiune oprita ("Disabled by an administrator") --------------- */ .feature-off { position: relative; overflow: hidden; padding: 48px 26px 40px; text-align: center; } .feature-off::before { content: ''; position: absolute; inset: 0; background: radial-gradient(520px 260px at 50% -30%, rgb(var(--c-slate-400) / .14), transparent 70%), repeating-linear-gradient(135deg, rgb(var(--c-overlay) / .018) 0 12px, transparent 12px 24px); pointer-events: none; } .feature-off > * { position: relative; } .feature-off-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; margin-bottom: 20px; border-radius: 99px; border: 1px solid rgb(var(--c-red) / .3); background: rgb(var(--c-red) / .1); color: rgb(var(--c-red-on)); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .feature-off-icon { position: relative; display: grid; place-items: center; height: 80px; width: 80px; margin: 0 auto 22px; border-radius: 24px; background: rgb(var(--c-slate-400) / .08); border: 1px solid rgb(var(--c-slate-400) / .2); color: rgb(var(--c-slate-500)); } .feature-off-icon > svg { height: 36px; width: 36px; } .feature-off-lock { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; height: 30px; width: 30px; border-radius: 50%; background: rgb(var(--c-red)); color: rgb(var(--c-ink-900)); box-shadow: 0 0 0 4px rgb(var(--c-ink-800)); } .feature-off-lock svg { height: 15px; width: 15px; } .soon-card { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .42); transition: border-color .15s ease, transform .15s ease; } .soon-card:hover { border-color: rgb(var(--c-frost-500) / .26); transform: translateY(-2px); } /* ---------------------------- Jurnal ------------------------------ */ .log-console { max-height: 460px; overflow: auto; padding: 12px 14px; border-radius: 12px; background: #000000; border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.75; } .log-line { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-word; } .log-line + .log-line { margin-top: 1px; } .log-time { flex-shrink: 0; color: rgb(var(--c-slate-600)); } .log-level { flex-shrink: 0; width: 46px; font-weight: 700; } .log-scope { flex-shrink: 0; color: rgb(var(--c-purple)); } .log-msg { color: rgb(var(--c-slate-300)); } .log-meta { color: rgb(var(--c-slate-500)); } .lvl-trace .log-level { color: rgb(var(--c-slate-600)); } .lvl-debug .log-level { color: rgb(var(--c-frost-500)); } .lvl-info .log-level { color: rgb(var(--c-green)); } .lvl-warn .log-level { color: rgb(var(--c-yellow)); } .lvl-error .log-level { color: rgb(var(--c-red)); } .lvl-fatal .log-level { color: rgb(var(--c-text-hi)); background: rgb(var(--c-red)); border-radius: 4px; text-align: center; } .lvl-warn { background: rgb(var(--c-yellow) / .045); } .lvl-error, .lvl-fatal { background: rgb(var(--c-red) / .07); } /* Jurnalul de audit, ca lista verticala cu linie de timp. */ .audit-row { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid rgb(var(--c-slate-400) / .06); } .audit-row:last-child { border-bottom: 0; } .audit-icon { display: grid; place-items: center; flex-shrink: 0; height: 32px; width: 32px; border-radius: 10px; background: rgb(var(--c-frost-500) / .1); color: rgb(var(--c-frost-500)); } .audit-row.is-warn .audit-icon { background: rgb(var(--c-yellow) / .12); color: rgb(var(--c-yellow-on)); } .audit-row.is-error .audit-icon { background: rgb(var(--c-red) / .14); color: rgb(var(--c-red-on)); } /* Eticheta actiunii (Autentificare, Delogare...). `.audit-row` e flex, iar implicit copiii se intind pe toata inaltimea randului: un `border-radius: 99px` pe un element inalt de 60px devine o pastila uriasa. De aceea se aliniaza sus si primeste dimensiuni proprii, mai mici. */ .audit-tag { align-self: flex-start; flex-shrink: 0; padding: 2px 8px; border-radius: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .audit-details { margin-top: 7px; padding: 8px 10px; border-radius: 9px; background: rgb(var(--c-sunken) / .6); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--c-slate-400)); white-space: pre-wrap; word-break: break-word; } /* Punct care pulseaza cat timp feed-ul live e pornit. */ .pulse { position: relative; } .pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; animation: pulse 1.8s ease-out infinite; } @keyframes pulse { from { transform: scale(.7); opacity: .7; } to { transform: scale(1.5); opacity: 0; } } /* ------------------------------------------------------------------ Editorul de text (Quill) si continutul scris cu el ------------------------------------------------------------------ */ /* Quill vine cu tema "snow", gandita pentru fundal alb. Aici o aducem pe tema panelului. Regulile stau in app.css pentru ca el se incarca DUPA quill.snow.css si, la aceeasi specificitate, castiga. */ .editor-wrap { border-radius: 12px; border: 1px solid rgb(var(--c-slate-400) / .16); background: rgb(var(--c-sunken) / .75); overflow: hidden; } .ql-toolbar.ql-snow { border: 0 !important; border-bottom: 1px solid rgb(var(--c-slate-400) / .14) !important; background: rgb(var(--c-ink-700) / .9); padding: 8px; } .ql-container.ql-snow { border: 0 !important; font-family: inherit; } .editor-area .ql-editor { min-height: 220px; max-height: 45vh; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: rgb(var(--c-slate-300)); } .editor-area .ql-editor.ql-blank::before { color: rgb(var(--c-slate-600)); font-style: normal; left: 16px; } /* Butoanele si listele derulante din bara. */ .ql-snow .ql-stroke { stroke: rgb(var(--c-slate-400)); } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: rgb(var(--c-slate-400)); } .ql-snow .ql-picker { color: rgb(var(--c-slate-400)); } .ql-snow .ql-picker-label { border-color: transparent; } .ql-snow button:hover .ql-stroke, .ql-snow .ql-picker-label:hover { color: rgb(var(--c-slate-200)); } .ql-snow button:hover .ql-stroke { stroke: rgb(var(--c-frost-500)); } .ql-snow button.ql-active .ql-stroke { stroke: rgb(var(--c-frost-500)); } .ql-snow button.ql-active .ql-fill { fill: rgb(var(--c-frost-500)); } .ql-snow .ql-picker-label.ql-active { color: rgb(var(--c-frost-500)); } .ql-snow .ql-picker-options { background: rgb(var(--c-ink-700)); border: 1px solid rgb(var(--c-slate-400) / .18) !important; border-radius: 10px; padding: 6px; box-shadow: 0 18px 40px -20px rgb(var(--c-shadow) / .9); } .ql-snow .ql-picker-item { color: rgb(var(--c-slate-300)); border-radius: 6px; padding: 3px 6px; } .ql-snow .ql-picker-item:hover { background: rgb(var(--c-slate-400) / .12); color: rgb(var(--c-text-hi)); } /* Selectorul de spatiere e adaugat de noi, deci are nevoie de etichete. */ .ql-snow .ql-picker.ql-lineheight { width: 74px; } .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item::before { content: 'Spatiere'; } .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value]::before, .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value]::before { content: attr(data-value); } /* Numele fonturilor si marimilor, scrise omeneste in lista. */ .ql-snow .ql-picker.ql-font { width: 110px; } .ql-snow .ql-picker.ql-size { width: 72px; } /* Bara de unelte trebuie sa poata trece pe randul urmator pe telefon. */ .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; } /* Casuta de link a lui Quill. */ .ql-snow .ql-tooltip { background: rgb(var(--c-ink-700)); border: 1px solid rgb(var(--c-slate-400) / .18); border-radius: 10px; box-shadow: 0 18px 40px -20px rgb(var(--c-shadow) / .9); color: rgb(var(--c-slate-300)); } .ql-snow .ql-tooltip input[type=text] { background: rgb(var(--c-sunken) / .8); border: 1px solid rgb(var(--c-slate-400) / .2); border-radius: 7px; color: rgb(var(--c-slate-200)); padding: 4px 8px; } /* Indentarea o salveaza Quill ca aceste clase, nu ca stil inline, deci ele trebuie sa existe si in afara editorului - altfel textul indentat de admin ar aparea aliniat la stanga in pagina de regulament. */ .prose-panel .ql-indent-1 { padding-left: 3em; } .prose-panel .ql-indent-2 { padding-left: 6em; } .prose-panel .ql-indent-3 { padding-left: 9em; } .prose-panel .ql-indent-4 { padding-left: 12em; } .prose-panel .ql-indent-5 { padding-left: 15em; } .prose-panel .ql-align-center { text-align: center; } .prose-panel .ql-align-right { text-align: right; } .prose-panel .ql-align-justify { text-align: justify; } /* Restul marcajului scris in editor, afisat in pagina. */ .prose-panel ul, .prose-panel ol { margin: 0 0 12px; padding-left: 22px; } .prose-panel ul { list-style: disc; } .prose-panel ol { list-style: decimal; } .prose-panel li { margin-bottom: 4px; } .prose-panel blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid rgb(var(--c-frost-500) / .5); background: rgb(var(--c-frost-500) / .06); border-radius: 0 8px 8px 0; color: rgb(var(--c-prose)); } .prose-panel a { color: rgb(var(--c-frost-500)); text-decoration: underline; text-underline-offset: 2px; } .prose-panel a:hover { color: rgb(var(--c-frost-on)); } .prose-panel h1, .prose-panel h2, .prose-panel h3, .prose-panel h4 { margin: 0 0 10px; color: rgb(var(--c-slate-200)); font-weight: 700; line-height: 1.3; } .prose-panel h1 { font-size: 20px; } .prose-panel h2 { font-size: 18px; } .prose-panel h3 { font-size: 16px; } .prose-panel h4 { font-size: 15px; } .prose-panel code { padding: 1px 5px; border-radius: 5px; background: rgb(var(--c-slate-400) / .12); font-family: 'JetBrains Mono', monospace; font-size: .92em; color: rgb(var(--c-frost-on)); } .prose-panel hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; } /* ------------------------------------------------------------------ Ban list ------------------------------------------------------------------ */ .ban-id { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 7px; background: rgb(var(--c-sunken) / .7); border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: rgb(var(--c-frost-on)); } .ban-id.is-ip { color: rgb(var(--c-yellow-on)); border-color: rgb(var(--c-yellow) / .25); } /* Durata banului plus ora exacta de deblocare, una sub alta. */ .ban-when { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; } td:not(.text-right) > .ban-when { align-items: flex-start; } .ban-reason { display: block; max-width: 420px; color: rgb(var(--c-slate-400)); font-size: 13px; overflow-wrap: anywhere; } /* Lista publica (/bans): un rand = un buton care deschide detaliile. Aceeasi grila pentru capul listei si pentru randuri, ca coloanele sa se alinieze. Culoarea starii (permanent / temporar / expirat) sta pe `--bl`. */ .bl-head, .bl-row { display: grid; align-items: center; column-gap: 16px; grid-template-columns: 34px minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(0, .75fr) 150px 16px; grid-template-areas: "mark main reason by when chev"; } .bl-head { padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-slate-500)); } .bl-row { --bl: var(--c-yellow); width: 100%; padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); transition: background .15s ease; } .bl-row:last-child { border-bottom: 0; } /* Doar cu mouse: pe telefon `:hover` ramane lipit dupa atingere. */ @media (hover: hover) { .bl-row:hover { background: rgb(var(--c-overlay) / .035); } } .bl-row:focus-visible { outline: 2px solid rgb(var(--c-frost-500)); outline-offset: -2px; } .bl-row.is-perm, .bl-mark.is-perm { --bl: var(--c-red); } .bl-row.is-expired, .bl-mark.is-expired { --bl: var(--c-slate-500); } .bl-row.is-expired .bl-name, .bl-row.is-expired .bl-reason { opacity: .6; } .bl-mark { --bl: var(--c-yellow); grid-area: mark; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(var(--bl) / .14); color: rgb(var(--bl)); box-shadow: inset 0 0 0 1px rgb(var(--bl) / .22); } .bl-row .bl-mark { --bl: inherit; } .bl-mark.is-lg { width: 42px; height: 42px; border-radius: 12px; } .bl-main { grid-area: main; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .bl-name { min-width: 0; font-weight: 700; color: rgb(var(--c-slate-100)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .bl-sub .ban-id { max-width: 100%; overflow: hidden; } .bl-ago { font-size: 11.5px; color: rgb(var(--c-slate-500)); white-space: nowrap; } .bl-reason { grid-area: reason; min-width: 0; font-size: 13px; color: rgb(var(--c-slate-300)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .bl-by { grid-area: by; min-width: 0; font-size: 13px; font-weight: 600; color: rgb(var(--c-slate-300)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-by-label, .bl-by-ago { display: none; } .bl-when { grid-area: when; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .bl-until { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgb(var(--c-slate-500)); white-space: nowrap; } .bl-chev { grid-area: chev; color: rgb(var(--c-slate-600)); transition: transform .15s ease, color .15s ease; } .bl-row:hover .bl-chev { color: rgb(var(--c-slate-300)); transform: translateX(2px); } /* Pe telefon fiecare ban e un card separat, fara coloana de iconita (lua un sfert din latime): starea se vede din bara colorata din stanga. Pe patru randuri: nume + durata, identitatea, motivul, "by admin ยท acum 5 minute". `.bl-main` devine `display: contents`, ca numele sa stea langa durata, dar SteamID-ul sa aiba tot randul de sub el. */ @media (max-width: 767px) { .bl-head { display: none; } .card.bl-card:has(.bl-row) { background: none; border: 0; box-shadow: none; overflow: visible; } .bl-list { display: grid; gap: 10px; } .bl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name when" "sub sub" "reason reason" "by chev"; row-gap: 8px; padding: 13px 14px 12px 15px; border: 1px solid var(--line); border-left: 3px solid rgb(var(--bl)); border-radius: 14px; background: linear-gradient(180deg, rgb(var(--c-ink-700) / .92), rgb(var(--c-ink-850) / .92)); box-shadow: 0 14px 30px -24px rgb(var(--c-shadow) / .95); } .bl-row:last-child { border-bottom: 1px solid var(--line); } .bl-row .bl-mark { display: none; } .bl-main { display: contents; } .bl-name { grid-area: name; font-size: 15px; } .bl-sub { grid-area: sub; } .bl-sub .bl-ago { display: none; } .bl-reason { font-size: 13.5px; color: rgb(var(--c-slate-200)); } .bl-by { font-size: 12px; font-weight: 500; color: rgb(var(--c-slate-500)); } .bl-by-label, .bl-by-ago { display: inline; } .bl-by-label { margin-right: 4px; } .bl-by-ago { margin-left: 4px; } .bl-chev { justify-self: end; } .bl-until { display: none; } } /* Fereastra cu detaliile */ .bl-quote { padding: 12px 14px; border-radius: 12px; background: rgb(var(--c-sunken) / .6); border: 1px solid var(--line); border-left: 3px solid rgb(var(--c-frost-500)); } .bl-quote-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--c-slate-500)); } .bl-quote p { font-size: 14px; color: rgb(var(--c-slate-100)); overflow-wrap: anywhere; } .bl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bl-fact { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--c-sunken) / .45); border: 1px solid var(--line); } .bl-fact > svg, .bl-fact > i { grid-row: span 2; align-self: center; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgb(var(--c-frost-500) / .12); color: rgb(var(--c-frost-500)); } .bl-fact-label { font-size: 11px; font-weight: 600; color: rgb(var(--c-slate-500)); } .bl-fact-value { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 13px; font-weight: 700; color: rgb(var(--c-slate-100)); overflow-wrap: anywhere; } .bl-fact-value.is-muted { font-weight: 500; color: rgb(var(--c-slate-500)); } .bl-fact-note { font-size: 11.5px; font-weight: 500; color: rgb(var(--c-slate-500)); } .bl-copy { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: rgb(var(--c-slate-400)); transition: background .15s ease, color .15s ease; } .bl-copy:hover { background: rgb(var(--c-overlay) / .08); color: rgb(var(--c-slate-100)); } .bl-private { padding: 4px 14px; border-radius: 12px; border: 1px dashed rgb(var(--c-yellow) / .35); background: rgb(var(--c-yellow) / .05); } .bl-private-title { display: flex; align-items: center; gap: 6px; padding-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--c-yellow-on)); } @media (max-width: 520px) { .bl-facts { grid-template-columns: minmax(0, 1fr); } } /* Comutator dezactivat (ex: MCP cand ACP e deja bifat). */ .switch.is-disabled { cursor: not-allowed; opacity: .55; } .switch.is-disabled .track { background: rgb(var(--c-ink-600)); } /* ------------------------------------------------------------------ Etichetele din listele derulante ale editorului ------------------------------------------------------------------ */ /* Tema "snow" isi scrie singura etichetele, cu `content`, si stie doar valorile ei implicite (Sans Serif / Serif / Monospace, Small / Normal / Large / Huge). Fonturile si marimile noastre nu sunt pe lista ei, asa ca toate cadeau pe eticheta implicita - de aici cele cinci randuri identice "Sans Serif". Fiecare valoare din public/js/editor.js are nevoie de randul ei aici. */ /* Fontul - valoarea goala inseamna "asa cum e restul panelului". */ .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Implicit'; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Inter"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Inter"]::before { content: 'Inter'; font-family: Inter, sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Georgia"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Georgia"]::before { content: 'Georgia'; font-family: Georgia, serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before { content: 'Arial'; font-family: Arial, sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Courier New"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Courier New"]::before { content: 'Courier New'; font-family: 'Courier New', monospace; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="JetBrains Mono"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="JetBrains Mono"]::before { content: 'JetBrains Mono'; font-family: 'JetBrains Mono', monospace; } /* Marimea - scrisa in px, ca in editor. */ .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: 'Normala'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { content: '22'; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: '28'; } /* Lista de fonturi are nevoie de mai mult loc acum, ca numele sunt reale. */ .ql-snow .ql-picker.ql-font { width: 132px; } .ql-snow .ql-picker.ql-font .ql-picker-options { width: 160px; } .ql-snow .ql-picker.ql-size { width: 68px; } /* ------------------------------------------------------------------ Avertismente pentru staff ------------------------------------------------------------------ */ /* Pastila de langa nume, in bara de sus, cu propriile puncte: 2/3. */ .nav-warn { margin-left: auto; padding: 2px 7px; border-radius: 99px; border: 1px solid rgb(var(--c-red) / .32); background: rgb(var(--c-red) / .14); color: rgb(var(--c-red-on)); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; } /* Punctele de avertisment, desenate ca bile: cate una pentru fiecare punct posibil (implicit trei). Un numar singur ("2") nu spune nimic despre prag; trei bile din care doua sunt aprinse se citesc dintr-o privire. */ .warn-pips { display: inline-flex; align-items: center; gap: 4px; } .warn-pip { height: 9px; width: 9px; border-radius: 50%; background: rgb(var(--c-slate-400) / .16); border: 1px solid rgb(var(--c-slate-400) / .22); transition: background .18s ease, box-shadow .18s ease; } .warn-pip.is-on { background: rgb(var(--c-yellow)); border-color: rgb(var(--c-yellow) / .7); } .warn-pip.is-hot { background: rgb(var(--c-orange)); border-color: rgb(var(--c-orange) / .75); } .warn-pip.is-max { background: rgb(var(--c-red)); border-color: rgb(var(--c-red) / .85); box-shadow: 0 0 0 3px rgb(var(--c-red) / .16); } .warn-pips.sm .warn-pip { height: 7px; width: 7px; } .warn-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: rgb(var(--c-slate-400)); } .warn-count.is-on { color: rgb(var(--c-yellow-on)); } .warn-count.is-max { color: rgb(var(--c-red-on)); } /* Un avertisment din lista (pagina de admin, contul meu, modalul de staff). */ .warn-item { display: flex; gap: 12px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .45); } .warn-item + .warn-item { margin-top: 9px; } .warn-item.is-active { border-color: rgb(var(--c-red) / .28); background: rgb(var(--c-red) / .05); } .warn-item.is-done { opacity: .72; } .warn-item .warn-mark { display: grid; place-items: center; flex-shrink: 0; height: 34px; width: 34px; border-radius: 11px; background: rgb(var(--c-slate-400) / .1); color: rgb(var(--c-slate-400)); } .warn-item.is-active .warn-mark { background: rgb(var(--c-red) / .14); color: rgb(var(--c-red-on)); } .warn-reason { font-size: 13.5px; font-weight: 600; color: rgb(var(--c-slate-200)); line-height: 1.45; overflow-wrap: anywhere; } .warn-note { margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: rgb(var(--c-sunken) / .7); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: rgb(var(--c-slate-400)); white-space: pre-wrap; overflow-wrap: anywhere; } .warn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } .warn-meta .sep { color: rgb(var(--c-slate-700)); } /* ------------------------------------------------------------------ Staff list ------------------------------------------------------------------ */ /* Antetul mare al paginii, cu cifrele echipei. */ .hero { position: relative; overflow: hidden; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(620px 240px at 8% -40%, rgb(var(--c-frost-500) / .2), transparent 70%), radial-gradient(520px 240px at 95% 140%, rgb(var(--c-purple) / .14), transparent 70%), linear-gradient(180deg, rgb(var(--c-ink-700) / .95), rgb(var(--c-ink-850) / .95)); } .hero > * { position: relative; } .tile { padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .5); } .tile-value { font-size: 22px; font-weight: 800; line-height: 1.1; color: rgb(var(--c-slate-50)); } .tile-label { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-slate-500)); } /* Cardul unui membru din staff. */ .member { position: relative; display: flex; flex-direction: column; gap: 11px; padding: 14px; border-radius: 15px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .42); transition: border-color .16s ease, transform .16s ease, background .16s ease; text-align: left; width: 100%; cursor: pointer; } .member:hover { border-color: rgb(var(--c-frost-500) / .34); transform: translateY(-2px); background: rgb(var(--c-ink-850) / .6); } .member.is-online { border-color: rgb(var(--c-green) / .22); } .member.is-flagged { border-color: rgb(var(--c-yellow) / .26); } .member.is-limit { border-color: rgb(var(--c-red) / .4); background: rgb(var(--c-red) / .06); } .member.is-me::after { content: 'you'; position: absolute; top: 10px; right: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-slate-500)); } /* Avatarul cu inel: verde cand e online, sters cand nu. */ .member-avatar { position: relative; flex-shrink: 0; } .member-avatar .avatar { height: 42px; width: 42px; border-radius: 13px; font-size: 14px; } .member-avatar .ring { position: absolute; inset: -3px; border-radius: 16px; border: 1.5px solid transparent; } .member.is-online .member-avatar .ring { border-color: rgb(var(--c-green) / .55); } .member-avatar .live { position: absolute; right: -2px; bottom: -2px; height: 11px; width: 11px; border-radius: 50%; border: 2px solid rgb(var(--c-ink-950)); background: rgb(var(--c-slate-600)); } .member.is-online .member-avatar .live { background: rgb(var(--c-green)); } .member-name { font-size: 14px; font-weight: 700; color: rgb(var(--c-slate-100)); line-height: 1.2; } .member-sub { margin-top: 3px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } /* Randul de jos al cardului: puncte de avertisment + ultima activitate. */ /* `margin-top: auto`: cardurile de pe acelasi rand se intind la cel mai inalt, iar randul de jos statea sub continut, cu golul dedesubt (reclamat). */ .member-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgb(var(--c-slate-400) / .07); font-size: 11px; color: rgb(var(--c-slate-500)); } /* Medalia din capul unui grup de rank. */ .rank-medal { display: grid; place-items: center; flex-shrink: 0; height: 38px; width: 38px; border-radius: 13px; background: rgb(var(--c-frost-500) / .12); color: rgb(var(--c-frost-500)); border: 1px solid rgb(var(--c-frost-500) / .2); } .rank-medal.tier-1 { background: rgb(var(--c-yellow) / .14); color: rgb(var(--c-yellow-on)); border-color: rgb(var(--c-yellow) / .3); } .rank-medal.tier-2 { background: rgb(var(--c-purple) / .14); color: rgb(var(--c-purple-on)); border-color: rgb(var(--c-purple) / .3); } .rank-medal.tier-3 { background: rgb(var(--c-frost-500) / .14); color: rgb(var(--c-frost-on)); border-color: rgb(var(--c-frost-500) / .3); } .rank-medal.tier-4 { background: rgb(var(--c-green) / .14); color: rgb(var(--c-green-on)); border-color: rgb(var(--c-green) / .3); } /* Lista de perechi eticheta / valoare din modale. */ .kv { display: grid; gap: 0; } .kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgb(var(--c-slate-400) / .07); font-size: 13px; } .kv > div:last-child { border-bottom: 0; } .kv dt { color: rgb(var(--c-slate-500)); } .kv dd { color: rgb(var(--c-slate-300)); font-weight: 600; text-align: right; overflow-wrap: anywhere; } /* Bara de unelte a unei pagini: cade pe mai multe randuri pe telefon. */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .toolbar .grow { flex: 1 1 210px; min-width: 190px; } /* ------------------------------------------------------------------ Avatare incarcate de useri ------------------------------------------------------------------ */ /* `.avatar` era doar un patrat cu doua litere. Acum poate tine si o poza, deci ii trebuie `overflow: hidden` (altfel imaginea iese din coltul rotunjit) si o imagine care umple patratul indiferent de proportiile fisierului incarcat. */ .avatar { overflow: hidden; } .avatar img { display: block; height: 100%; width: 100%; object-fit: cover; } /* Zona de incarcare din pagina "My account". */ .avatar-drop { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; border: 1px dashed rgb(var(--c-slate-400) / .22); background: rgb(var(--c-sunken) / .35); transition: border-color .15s ease, background .15s ease; } .avatar-drop.is-over { border-color: rgb(var(--c-frost-500) / .55); background: rgb(var(--c-frost-500) / .06); } .avatar-big { position: relative; flex-shrink: 0; display: grid; place-items: center; height: 88px; width: 88px; border-radius: 26px; overflow: hidden; background: linear-gradient(135deg, rgb(var(--c-frost-700)), rgb(var(--c-frost-500))); color: rgb(var(--c-ink-900)); font-size: 26px; font-weight: 800; } .avatar-big img { height: 100%; width: 100%; object-fit: cover; } /* Bara de progres a upload-ului, subtire, sub zona de incarcare. */ .avatar-bar { height: 4px; border-radius: 99px; background: rgb(var(--c-slate-400) / .12); overflow: hidden; } .avatar-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgb(var(--c-frost-700)), rgb(var(--c-frost-500))); transition: width .18s ease; } /* ------------------------------------------------------------------ Starea unui membru din staff: suspendat / retras ------------------------------------------------------------------ */ /* Un membru suspendat trebuie sa se vada dintr-o privire, fara sa citesti eticheta: cardul primeste o dunga in stanga, iar cel retras se estompeaza (e in echipa "pe hartie", nu in activitate). */ .member.is-suspended { border-color: rgb(var(--c-yellow) / .4); background: rgb(var(--c-yellow) / .045); } .member.is-retired { border-style: dashed; border-color: rgb(var(--c-slate-400) / .22); opacity: .72; } .member.is-suspended::before, .member.is-retired::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: rgb(var(--c-yellow)); } .member.is-retired::before { background: rgb(var(--c-slate-500)); } /* Avatarul unui membru scos din joc: gri, ca sa nu para activ. */ .member.is-retired .member-avatar .avatar, .member.is-retired .avatar img { filter: grayscale(1); } /* Fundalul de profil pe cardul din staff. Sta sub continut (`isolation` + `z-index: -1`), nu intr-un ::before - alea sunt deja ale dungii de suspendat / retras si ale etichetei "you". Poza ocupa doar partea din dreapta si se stinge spre stanga (masca: conteaza doar opacitatea culorii, deci orice variabila a temei merge). Prima varianta o intindea pe tot cardul sub o perdea, iar o sigla alba din poza trecea exact peste randurile cu orele si activitatea. */ .member.has-bg { isolation: isolate; overflow: hidden; } .member-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 34%; z-index: -1; background: center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, rgb(var(--c-ink-900)) 55%); mask-image: linear-gradient(90deg, transparent, rgb(var(--c-ink-900)) 55%); transition: transform .5s ease; } .member-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--c-ink-850) / .9), rgb(var(--c-ink-850) / .2) 45%, rgb(var(--c-ink-850) / .1)); } .member.has-bg .member-sub, .member.has-bg .member-foot, .member.has-bg.is-me::after { text-shadow: 0 1px 3px rgb(var(--c-shadow) / .95), 0 0 8px rgb(var(--c-shadow) / .6); } .member.has-bg:hover .member-bg { transform: scale(1.05); } .member.is-retired .member-bg { filter: grayscale(1); } @media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .member.has-bg:hover .member-bg { transform: none; } } /* Randul din istoric (aceeasi forma ca la avertismente, alta poveste). */ .status-item { display: flex; gap: 12px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .45); } .status-item + .status-item { margin-top: 9px; } .status-item.is-active { border-color: rgb(var(--c-yellow) / .32); background: rgb(var(--c-yellow) / .05); } .status-item.is-retired.is-active { border-color: rgb(var(--c-slate-400) / .28); background: rgb(var(--c-slate-400) / .05); } .status-item.is-done { opacity: .72; } .status-item .status-mark { display: grid; place-items: center; flex-shrink: 0; height: 34px; width: 34px; border-radius: 11px; background: rgb(var(--c-slate-400) / .1); color: rgb(var(--c-slate-400)); } .status-item.is-active .status-mark { background: rgb(var(--c-yellow) / .14); color: rgb(var(--c-yellow-on)); } .status-reason { font-size: 13.5px; font-weight: 600; color: rgb(var(--c-slate-200)); line-height: 1.45; overflow-wrap: anywhere; } .status-note { margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: rgb(var(--c-sunken) / .7); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: rgb(var(--c-slate-400)); white-space: pre-wrap; overflow-wrap: anywhere; } .status-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } .status-meta .sep { color: rgb(var(--c-slate-700)); } /* Eticheta de langa nume, in bara de sus, cand propriul cont e suspendat sau retras. */ .nav-state { margin-left: auto; padding: 2px 7px; border-radius: 99px; border: 1px solid rgb(var(--c-yellow) / .32); background: rgb(var(--c-yellow) / .14); color: rgb(var(--c-yellow-on)); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .nav-state.is-retired { border-color: rgb(var(--c-slate-400) / .26); background: rgb(var(--c-slate-400) / .12); color: rgb(var(--c-slate-400)); } /* Banda de sus a paginii, cand contul tau e oprit din activitate. */ .state-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; border: 1px solid rgb(var(--c-yellow) / .35); background: radial-gradient(520px 200px at 0% 0%, rgb(var(--c-yellow) / .12), transparent 70%), rgb(var(--c-sunken) / .5); } .state-banner.is-retired { border-color: rgb(var(--c-slate-400) / .28); background: radial-gradient(520px 200px at 0% 0%, rgb(var(--c-slate-400) / .1), transparent 70%), rgb(var(--c-sunken) / .5); } .state-banner .mark { display: grid; place-items: center; flex-shrink: 0; height: 42px; width: 42px; border-radius: 14px; background: rgb(var(--c-yellow) / .14); color: rgb(var(--c-yellow-on)); } .state-banner.is-retired .mark { background: rgb(var(--c-slate-400) / .12); color: rgb(var(--c-slate-400)); } /* Pe telefon: butonul / eticheta coboara pe randul lor, ca textul sa ia toata latimea (langa ele ramanea o coloana ingusta, cat jumatate de ecran, iar bannerul iesea de un ecran intreg - reclamat). Explicatia generala se ascunde. */ @media (max-width: 639.98px) { .state-banner { flex-wrap: wrap; gap: 10px 12px; padding: 14px; } .state-banner .mark { height: 34px; width: 34px; border-radius: 11px; } .state-banner .mark svg { height: 17px; width: 17px; } .state-banner-action { flex-basis: 100%; } } /* ------------------------------------------------------------------ Nord Points: portofel, magazin, registru ------------------------------------------------------------------ */ /* ------------------------------ Magazin --------------------------- */ .shop-card { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgb(var(--c-ink-850) / .5); transition: transform .18s ease, border-color .18s ease, background .18s ease; } .shop-card:hover { transform: translateY(-2px); border-color: rgb(var(--c-frost-500) / .3); } /* Articolul evidentiat primeste o rama calda, nu un fundal aprins: cardurile stau unul langa altul si prea multa culoare le face pe toate egale. */ .shop-card.is-featured { border-color: rgb(var(--c-yellow) / .35); background: rgb(var(--c-yellow) / .04); } .shop-card.is-locked { opacity: .62; } .shop-icon { display: grid; place-items: center; flex-shrink: 0; height: 42px; width: 42px; border-radius: 13px; } .shop-price { font-size: 24px; font-weight: 800; line-height: 1; color: rgb(var(--c-slate-50)); } .shop-price-old { font-size: 13px; font-weight: 600; color: rgb(var(--c-slate-600)); text-decoration: line-through; } /* Cantitatea: minus / camp / plus, pe un singur rand. */ .qty-row { display: flex; align-items: center; gap: 8px; } .qty-row .input { flex: 1; min-width: 0; } /* Sagetile native ale input[type=number] se bat cap in cap cu butoanele. */ .qty-row input[type=number] { -moz-appearance: textfield; } .qty-row input[type=number]::-webkit-outer-spin-button, .qty-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Previzualizarea tagului, asa cum arata in chatul din joc. */ .tag-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .7); font-size: 12.5px; } .tag-preview-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-slate-600)); } /* ------------------------------ Comenzi --------------------------- */ .order-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .45); } .order-row + .order-row { margin-top: 9px; } .order-row.is-pending { border-color: rgb(var(--c-yellow) / .3); background: rgb(var(--c-yellow) / .05); } .order-row.is-refunded { opacity: .68; border-style: dashed; } .order-mark { display: grid; place-items: center; flex-shrink: 0; height: 34px; width: 34px; border-radius: 11px; background: rgb(var(--c-frost-500) / .12); color: rgb(var(--c-frost-on)); } .order-row.is-pending .order-mark { background: rgb(var(--c-yellow) / .14); color: rgb(var(--c-yellow-on)); } .order-row.is-refunded .order-mark { background: rgb(var(--c-slate-400) / .1); color: rgb(var(--c-slate-400)); } .order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } .order-meta .sep { color: rgb(var(--c-slate-700)); } /* Randul unui articol in Admin Panel (mai compact decat cardul din magazin). */ .item-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgb(var(--c-sunken) / .45); } .item-row.is-off { opacity: .6; border-style: dashed; } /* ------------------------------ Registru -------------------------- */ /* Un rand de registru are mereu aceeasi forma: semn (intra / iese), ce s-a intamplat, si suma in dreapta. Culoarea o da directia banilor, nu felul miscarii - asa se citeste lista dintr-o privire, fara sa mai numeri. */ .ledger-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px; border-bottom: 1px solid rgb(var(--c-slate-400) / .06); } .ledger-row:last-child { border-bottom: 0; } .ledger-mark { display: grid; place-items: center; flex-shrink: 0; height: 32px; width: 32px; border-radius: 10px; } .ledger-mark.is-in { background: rgb(var(--c-green) / .13); color: rgb(var(--c-green-on)); } .ledger-mark.is-out { background: rgb(var(--c-red) / .13); color: rgb(var(--c-red-on)); } .ledger-reason { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: rgb(var(--c-slate-400)); overflow-wrap: anywhere; } .ledger-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 5px; font-size: 11.5px; color: rgb(var(--c-slate-500)); } .ledger-meta .sep { color: rgb(var(--c-slate-700)); } /* ---------------------- Cautarea unui destinatar ------------------ */ /* Lista de sub campul de cautare. Nu e un