/* =========================================================================== DataFromRust — app.css Каталог ассетов и метаданных Rust. Чистый CSS, без фреймворков и JS-зависимостей. Темизация: :root = светлая, [data-theme="dark"] = тёмная. по умолчанию. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- Tokens : Light (default) ---------- */ :root { --bg: #F4F2FA; --surface-1: #FFFFFF; --surface-2: #FAF9FD; --surface-3: #F1EEF9; --border: #E4DEF2; --border-strong: #D5CDE9; --text: #1E1A2B; --muted: #6B6488; --faint: #948DB0; --accent: #6D28D9; --accent-hover: #5B21B6; --accent-soft: rgba(109,40,217,.10); --accent-ring: rgba(109,40,217,.40); --on-accent: #FFFFFF; --ok: #168F5B; --ok-soft: rgba(22,143,91,.12); --warn: #B7791F; --warn-soft: rgba(183,121,31,.14); --danger: #C0392B; --danger-soft: rgba(192,57,43,.12); --shadow-1: 0 1px 2px rgba(30,20,50,.05), 0 1px 3px rgba(30,20,50,.06); --shadow-2: 0 16px 48px rgba(30,20,50,.16); --radius-xs: 5px; --radius-sm: 7px; --radius: 10px; --radius-lg: 14px; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --nav-w: 250px; --header-h: 58px; --stripe: rgba(109,40,217,.06); } /* ---------- Tokens : Dark ---------- */ [data-theme="dark"] { --bg: #16131F; --surface-1: #1E1B29; --surface-2: #262234; --surface-3: #2C2740; --border: #332E45; --border-strong: #423B59; --text: #E9E7F2; --muted: #A39DBF; --faint: #7A7497; --accent: #8B5CF6; --accent-hover: #7C3AED; --accent-soft: rgba(139,92,246,.14); --accent-ring: rgba(139,92,246,.45); --on-accent: #FFFFFF; --ok: #34D399; --ok-soft: rgba(52,211,153,.14); --warn: #FBBF55; --warn-soft: rgba(251,191,85,.14); --danger: #F87171; --danger-soft: rgba(248,113,113,.14); --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 18px 50px rgba(0,0,0,.55); --stripe: rgba(139,92,246,.08); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg); } /* =========================================================================== Layout shell =========================================================================== */ .app { min-height: 100vh; display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas: "brand header" "nav content"; background: var(--bg); color: var(--text); } .brand { grid-area: brand; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: var(--header-h); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-1); } .brand-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; font-family: var(--font-mono); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.02em; } .brand-name b { color: var(--accent); } .brand-tag { display:block; font-size: 10.5px; color: var(--faint); font-family: var(--font-mono); letter-spacing: .02em; } /* Header bar */ .appbar { grid-area: header; display: flex; align-items: center; gap: 12px; height: var(--header-h); padding: 0 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-1) 80%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 30; } .appbar .crumb { color: var(--muted); font-size: 13px; } .appbar .crumb b { color: var(--text); font-weight: 600; } .appbar .spacer { flex: 1; } /* Sidebar nav */ .nav { grid-area: nav; border-right: 1px solid var(--border); background: var(--surface-1); padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; padding: 14px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--muted); font-size: 13.5px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: background .12s, color .12s; min-height: 40px; } .nav-item svg { width: 17px; height: 17px; flex: none; opacity: .9; } .nav-item:hover { background: var(--surface-3); color: var(--text); } .nav-item.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); } .nav-item.active svg { opacity: 1; } .nav-item .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); } .nav-item.active .count { color: var(--accent); } /* Content */ .content { grid-area: content; padding: 24px 28px 64px; overflow-x: hidden; } .page-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h1 { font-size: 22px; } .page-head .sub { color: var(--muted); font-size: 13px; } .page-head .spacer { flex: 1; } .section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 28px 0 12px; } /* =========================================================================== Cards (counters / generic) =========================================================================== */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: var(--shadow-1); position: relative; overflow: hidden; } .card .card-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 12px; } .card .card-ico svg { width: 17px; height: 17px; } .card .card-label { color: var(--muted); font-size: 12.5px; font-weight: 500; } .card .card-value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; } .card .card-delta { font-size: 11.5px; font-family: var(--font-mono); margin-top: 6px; color: var(--ok); } .card .card-delta.flat { color: var(--faint); } /* =========================================================================== Buttons =========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, transform .05s; } .btn svg { width: 16px; height: 16px; } .btn:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--surface-3); color: var(--text); } .btn-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); } .btn-sm { height: 30px; padding: 0 10px; font-size: 12px; } .btn-icon { width: 36px; padding: 0; } .btn[disabled] { opacity: .5; pointer-events: none; } /* Segmented control (view switch / lang / theme) */ .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); } .seg-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: none; background: transparent; cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; border-radius: var(--radius-xs); transition: background .12s, color .12s; } .seg-btn svg { width: 15px; height: 15px; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--surface-1); color: var(--accent); box-shadow: var(--shadow-1); } /* =========================================================================== Chips / badges =========================================================================== */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); white-space: nowrap; } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; } .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; font-family: var(--font-mono); background: var(--accent-soft); color: var(--accent); } .badge-ok { background: var(--ok-soft); color: var(--ok); } .badge-warn { background: var(--warn-soft); color: var(--warn); } .badge-muted { background: var(--surface-3); color: var(--muted); } /* Filter chips (toggle) */ .filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-1); color: var(--muted); border: 1px solid var(--border); cursor: pointer; user-select: none; transition: background .12s, color .12s, border-color .12s; } .filter-chip:hover { border-color: var(--border-strong); color: var(--text); } .filter-chip.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } /* =========================================================================== Toolbar / search / facets =========================================================================== */ .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .toolbar .spacer { flex: 1; } .search { position: relative; display: flex; align-items: center; flex: 1; min-width: 200px; max-width: 420px; } .search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; } .search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); border-radius: var(--radius-sm); font-size: 13px; } .search input::placeholder { color: var(--faint); } .search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .with-facets { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; } .facets { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 18px; } .facet { border: 1px solid var(--border); background: var(--surface-1); border-radius: var(--radius); padding: 12px 14px; } .facet h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 8px; } .facet label { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; color: var(--muted); cursor: pointer; min-height: 30px; } .facet label:hover { color: var(--text); } .facet input[type="checkbox"], .check { width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .facet label .fcount { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); } /* =========================================================================== Grid / tiles =========================================================================== */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .tile { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .08s; } .tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); transform: translateY(-2px); } .tile.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .tile .preview { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, var(--stripe) 0 8px, transparent 8px 16px), var(--surface-3); display: grid; place-items: center; overflow: hidden; margin-bottom: 9px; position: relative; } .tile .preview img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 14%; } .tile .preview .ph { font-family: var(--font-mono); font-size: 10px; color: var(--faint); padding: 6px; text-align: center; } .tile .name { font-size: 12.5px; font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile .tcheck { position: absolute; top: 14px; left: 14px; z-index: 2; opacity: 0; transition: opacity .12s; } .tile:hover .tcheck, .tile.selected .tcheck { opacity: 1; } .grid-lg { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } /* Item icon (category-coloured placeholder) */ .icon-box { display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); font-family: var(--font-mono); font-weight: 600; color: var(--muted); flex: none; } /* Category colours — applied to .icon-box and .chip */ .cat-weapon { background: rgba(225,75,75,.16); color: #e76d6d; } .cat-medical { background: rgba(60,190,130,.16); color: #38c990; } .cat-resource { background: rgba(180,140,70,.18); color: #d0a25a; } .cat-tool { background: rgba(110,150,235,.16);color: #7ea2f0; } .cat-attire { background: rgba(170,120,235,.16);color: #b08af0; } .cat-construction{ background: rgba(150,150,170,.18);color: #a8a6bd; } .cat-food { background: rgba(230,150,70,.16); color: #eaa15a; } .cat-ammo { background: rgba(200,90,90,.16); color: #d98080; } .cat-component { background: rgba(90,180,200,.16); color: #5cc2d6; } .chip.cat-weapon,.chip.cat-medical,.chip.cat-resource,.chip.cat-tool,.chip.cat-attire, .chip.cat-construction,.chip.cat-food,.chip.cat-ammo,.chip.cat-component { border-color: transparent; } /* Generic panel container */ .panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-1); } /* Storage breakdown rows */ .stat-row { display: grid; grid-template-columns: 110px 1fr 46px; align-items: center; gap: 14px; padding: 8px 0; } .stat-row .stat-name { font-size: 13px; color: var(--muted); } .stat-row .stat-val { font-family: var(--font-mono); font-size: 12.5px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; } /* Code blocks */ .code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; overflow-x: auto; color: var(--text); white-space: pre-wrap; word-break: break-word; } .code .c-key { color: var(--accent); } .code .c-str { color: #38c990; } .code .c-fn { color: #7ea2f0; } .code .c-com { color: var(--faint); font-style: italic; } .code .c-num { color: #d19a66; } .code .c-type { color: #4ec9b0; } .code mark { background: var(--warn-soft); color: var(--text); border-radius: 2px; padding: 0 1px; } .code mark.active { background: var(--accent); color: var(--on-accent); } /* Decompiled-code viewer: wide modal, scrollable highlighted source, in-code find */ .box.box-code { max-width: min(1180px, 94vw); } .box-code .box-body { padding: 0; } pre.code-view { border: 0; border-radius: 0; max-height: 78vh; overflow: auto; white-space: pre; word-break: normal; font-size: 12.5px; line-height: 1.6; } .code-search { display: flex; align-items: center; gap: 6px; } .code-search input { height: 32px; width: 190px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); border-radius: var(--radius-sm); font-size: 12.5px; font-family: var(--font-mono); } .code-search .cs-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); min-width: 42px; text-align: right; } .badges-cell { display: inline-flex; gap: 6px; flex-wrap: wrap; } /* =========================================================================== List view =========================================================================== */ .list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-1); } .list-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; min-height: 56px; transition: background .1s; } .list-row:last-child { border-bottom: none; } .list-row:hover { background: var(--surface-2); } .list-row.selected { background: var(--accent-soft); } .list-row .thumb { width: 38px; height: 38px; flex: none; border-radius: var(--radius-sm); background: repeating-linear-gradient(45deg, var(--stripe) 0 6px, transparent 6px 12px), var(--surface-3); display: grid; place-items: center; overflow: hidden; } .list-row .thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 12%; } .list-row .lr-main { min-width: 0; flex: 1; } .list-row .lr-main .name { font-size: 13.5px; font-weight: 500; } .path { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); word-break: break-all; } .list-row .path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-row .lr-aside { display: flex; align-items: center; gap: 10px; flex: none; } /* =========================================================================== Progress bar (decompile / jobs) =========================================================================== */ .progress-block { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1); } .progress-block .pb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .progress-block .pb-stage { font-weight: 600; font-size: 14px; } .progress-block .pb-status { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; } .progress-block .pb-status .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; } .progress-block .pb-pct { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; font-family: var(--font-mono); } .progress { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; position: relative; } .progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-hover), var(--accent)); transition: width .5s cubic-bezier(.4,0,.2,1); position: relative; } .progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; } .progress-meta { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .progress-meta b { color: var(--text); font-family: var(--font-mono); font-weight: 600; } .progress-thin { height: 6px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } /* =========================================================================== Tables =========================================================================== */ .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-1); } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead th { text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .1s; } tbody tr:hover { background: var(--surface-2); } td .mono, .mono { font-family: var(--font-mono); font-size: 12.5px; } td.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); } /* =========================================================================== Modal =========================================================================== */ .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(15,11,25,.55); backdrop-filter: blur(3px); animation: fade .15s ease; } .box { width: 100%; max-width: 620px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); animation: pop .16s cubic-bezier(.2,.8,.3,1); } .box.box-wide { max-width: 760px; } .box-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-1); z-index: 1; } .box-head h3 { font-size: 16px; } .box-head .spacer { flex: 1; } .box-body { padding: 18px 20px; } .box-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--surface-1); } /* big preview inside modal */ .detail-hero { aspect-ratio: 16 / 10; border-radius: var(--radius); background: repeating-linear-gradient(45deg, var(--stripe) 0 12px, transparent 12px 24px), var(--surface-3); display: grid; place-items: center; overflow: hidden; margin-bottom: 16px; } .detail-hero img { max-width: 70%; max-height: 70%; object-fit: contain; image-rendering: pixelated; } .detail-hero .ph { font-family: var(--font-mono); font-size: 12px; color: var(--faint); } /* field pairs (label : value) */ .fields { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .field { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 14px; background: var(--surface-1); } .field .f-label { color: var(--muted); font-size: 12.5px; } .field .f-value { font-size: 13px; word-break: break-word; } .field .f-value.mono { font-family: var(--font-mono); font-size: 12.5px; } /* inheritance tree */ .tree { font-family: var(--font-mono); font-size: 13px; line-height: 2; } .tree .node { display: inline-flex; align-items: center; } .tree .arrow { color: var(--accent); margin: 0 8px; } .tree .leaf { color: var(--accent); font-weight: 600; } .comp-list { display: flex; flex-wrap: wrap; gap: 7px; } /* =========================================================================== Loading / skeleton / empty =========================================================================== */ .spinner { width: 18px; height: 18px; flex: none; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } .spinner-lg { width: 28px; height: 28px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; color: var(--muted); font-size: 13px; } .skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--radius-xs); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 60%, transparent), transparent); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; } .sk-tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; } .sk-tile .sk-preview { aspect-ratio: 1/1; border-radius: var(--radius-sm); margin-bottom: 9px; } .sk-line { height: 10px; border-radius: 4px; margin-top: 6px; } .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 20px; text-align: center; color: var(--muted); } .empty .empty-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-3); display: grid; place-items: center; color: var(--faint); } .empty h3 { font-size: 15px; color: var(--text); } .empty p { font-size: 13px; max-width: 320px; } .error-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: 13px; border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); } /* =========================================================================== Admin specifics =========================================================================== */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; } .trigger-card { display: flex; flex-direction: column; gap: 10px; } .trigger-card .tc-desc { font-size: 12.5px; color: var(--muted); flex: 1; } .toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .toggle-row:last-child { border-bottom: none; } .toggle-row .tr-main { flex: 1; } .toggle-row .tr-main b { font-size: 13.5px; font-weight: 600; } .toggle-row .tr-main span { display: block; font-size: 12px; color: var(--muted); } .switch { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .15s; } .switch .track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::before { transform: translateX(18px); } .danger-zone { border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); background: var(--danger-soft); } /* 2FA / auth */ .auth-card { max-width: 380px; margin: 6vh auto; } .code-input { letter-spacing: .5em; text-align: center; font-family: var(--font-mono); font-size: 22px; } .secret-box { font-family: var(--font-mono); font-size: 13px; background: var(--surface-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; word-break: break-all; } .qr-ph { width: 150px; height: 150px; margin: 0 auto; border-radius: var(--radius); background: repeating-conic-gradient(var(--text) 0 25%, var(--surface-1) 0 50%) 50%/14px 14px; border: 1px solid var(--border); } .field-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); border-radius: var(--radius-sm); font-size: 13px; } .field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; } /* 404 */ .notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; } .notfound .code { font-family: var(--font-mono); font-size: 96px; font-weight: 700; color: var(--accent); letter-spacing: -.04em; line-height: 1; } .notfound .glitch { color: var(--muted); font-family: var(--font-mono); font-size: 13px; margin-top: 8px; } /* =========================================================================== Burger / mobile drawer =========================================================================== */ .burger { display: none; } .scrim { display: none; } /* =========================================================================== Responsive =========================================================================== */ @media (max-width: 1080px) { .with-facets { grid-template-columns: 1fr; } .facets { position: static; flex-direction: row; flex-wrap: wrap; } .facet { flex: 1; min-width: 160px; } } @media (max-width: 760px) { :root { --header-h: 54px; } .app { grid-template-columns: 1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas: "header" "content"; } .brand { display: none; } .nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 260px; transform: translateX(-100%); transition: transform .22s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-2); } .app.nav-open .nav { transform: translateX(0); } .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(10,8,16,.5); } .burger { display: inline-grid; place-items: center; } .content { padding: 16px 16px 56px; } .cards { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); } .grid { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); } .field { grid-template-columns: 1fr; gap: 2px; } .field .f-label { font-size: 11.5px; } /* tables -> cards */ table.responsive thead { display: none; } table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { display: block; width: 100%; } table.responsive tr { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 4px; background: var(--surface-1); } table.responsive td { border: none; padding: 7px 14px; display: flex; justify-content: space-between; gap: 16px; align-items: center; } table.responsive td::before { content: attr(data-label); color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; flex: none; } table.responsive td .mono { text-align: right; } } /* =========================================================================== Motion =========================================================================== */ @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .progress-bar::after, .skeleton::after { display: none; } }