/* ===================================================================== Analyzer page (site/_content/analyzer.html + site/js/analyzer.js) Layered on top of styles.css: the base `.an-*` rules live there; this file evolves them by overriding, and adds the inspector (file bar, viewer container, tabs, bone tree, meters, material cards, viseme grid). Colour system — every colour is a token so a theme (or a viewer.css that wants matching bone hues) can override them in one place: status --an-rank-* the five VRChat rank tiers (meters + badges) family --an-bone-* bone family hues, mirroring js/viewer.js BONE_COLORS Most ride styles.css's semantic tokens (--ok/--accent/--warn/--error), so they follow its dark/light theme; the few literal hues are re-stepped for a light ground under [data-theme="light"] / prefers-color-scheme. ===================================================================== */ :root { /* Rank tiers ride the site's semantic status tokens so they re-theme with it; only `poor` (a distinct orange between warn and error) is ours. */ --an-rank-excellent: var(--ok); --an-rank-good: var(--accent); --an-rank-medium: var(--warn); --an-rank-poor: #d0895a; --an-rank-verypoor: var(--error); --an-rank-na: var(--planned, #6e7681); /* Bone families mirror js/viewer.js BONE_COLORS so tree dots == skeleton joints. */ --an-bone-spine: #f2c14e; /* Hips..Neck */ --an-bone-head: #f28e4e; /* Head, Jaw, eyes */ --an-bone-left: #58c4b3; --an-bone-right: #d96c9a; --an-bone-unmapped: #7d858f; /* bone-like, no humanoid slot */ --an-bone-node: var(--border-hi); /* non-bone Model node */ --an-meter-track: var(--bg-card-hi); --an-tick: var(--border-hi); --an-focus: var(--accent); } :root[data-theme="light"] { --an-rank-poor: #a85f1e; --an-bone-spine: #a07a08; --an-bone-head: #b85e1a; --an-bone-left: #0f8a7a; --an-bone-right: #b0417a; --an-bone-unmapped: #6e7681; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --an-rank-poor: #a85f1e; --an-bone-spine: #a07a08; --an-bone-head: #b85e1a; --an-bone-left: #0f8a7a; --an-bone-right: #b0417a; --an-bone-unmapped: #6e7681; } } /* Full-width layout for the inspector page (set on by analyzer.js). */ body.an-page .content { max-width: 1480px; } /* ---------- Top: drop zone, toolbar, file bar ---------- */ .an-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin: 0.7rem 0 0.4rem; } .an-btn { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; padding: 0.38rem 0.85rem; border-radius: 6px; border: 1px solid var(--border-hi); background: var(--bg-card); color: var(--text); cursor: pointer; transition: border-color var(--transition), background var(--transition); } .an-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-card-hi); } .an-btn:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 2px; } .an-btn:disabled { opacity: 0.5; cursor: not-allowed; } .an-btn-primary { border-color: var(--accent); color: var(--accent-hi); background: var(--accent-soft); } .an-btn-quiet { background: transparent; color: var(--text-muted); } .an-btn-small { font-size: 0.76rem; padding: 0.2rem 0.55rem; } .an-drop.an-collapsed { padding: 0.9rem 1.2rem; } .an-drop.an-collapsed .an-drop-icon { display: none; } .an-filebar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin: 0.9rem 0 0.6rem; padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); } .an-filebar-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-wrap: wrap; } .an-filebar-icon { color: var(--accent); } .an-filebar-name code { font-size: 0.9rem; overflow-wrap: anywhere; } .an-filebar-meta { color: var(--text-dim); font-size: 0.8rem; font-family: var(--font-mono); } .an-filebar-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } /* ---------- 3D viewer container ---------- */ .an-viewer { position: relative; width: 100%; height: clamp(320px, 55vh, 640px); margin: 0.6rem 0 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-raised); overflow: hidden; } .an-viewer[hidden] { display: none; } .an-viewer-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--text-dim); font-size: 0.9rem; } /* ---------- Tabs ---------- */ .an-tabs { margin-top: 0.5rem; } .an-tablist { display: flex; flex-wrap: wrap; gap: 0.15rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } .an-tab { font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; padding: 0.5rem 0.9rem; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .an-tab:hover { color: var(--text); } .an-tab[aria-selected="true"] { color: var(--accent-hi); border-bottom-color: var(--accent); } .an-tab:focus-visible { outline: 2px solid var(--an-focus); outline-offset: -2px; border-radius: 4px; } .an-tab-count { font-family: var(--font-mono); font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--bg-card-hi); color: var(--text-dim); } .an-tab-count.an-tab-count-warn { background: var(--warn-soft); color: var(--warn); } .an-panel[hidden] { display: none; } .an-panel h3 { margin: 1.2rem 0 0.5rem; font-size: 1rem; } .an-panel h3:first-child { margin-top: 0; } /* ---------- Overview ---------- */ .an-chip-row { gap: 0.55rem; } .an-chip { min-width: 6.4rem; padding: 0.55rem 0.9rem; } .an-chip-value { font-size: 1.25rem; font-weight: 500; line-height: 1.25; } .an-chip .rank-badge { font-size: 0.8rem; } .an-chip-hero { border-color: var(--border-hi); } .an-issues { list-style: none; margin: 0.6rem 0; display: grid; gap: 0.45rem; } .an-issue-item { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.7rem; align-items: start; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-left-width: 3px; border-radius: 4px; background: var(--bg-card); font-size: 0.9rem; color: var(--text-muted); } .an-issue-item.an-sev-error { border-left-color: var(--an-rank-verypoor); } .an-issue-item.an-sev-warn { border-left-color: var(--an-rank-medium); } .an-issue-item.an-sev-info { border-left-color: var(--accent); } .an-issue-icon { font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; padding-top: 0.15rem; } .an-sev-error .an-issue-icon { color: var(--an-rank-verypoor); } .an-sev-warn .an-issue-icon { color: var(--an-rank-medium); } .an-sev-info .an-issue-icon { color: var(--accent); } .an-issue-title { color: var(--text); font-weight: 600; } .an-issue-body { grid-column: 2; } .an-issue-body code { overflow-wrap: anywhere; } .an-allclear { color: var(--an-rank-excellent); } /* ---------- Rig: bone tree ---------- */ .an-rig-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; } @media (max-width: 900px) { .an-rig-layout { grid-template-columns: 1fr; } } .an-tree-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; } .an-tree-toolbar input { flex: 1 1 10rem; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.3rem 0.6rem; border: 1px solid var(--border-hi); border-radius: 6px; background: var(--bg-card); color: var(--text); } .an-tree-toolbar input:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 1px; } .an-tree { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); max-height: 32rem; overflow: auto; font-family: var(--font-mono); font-size: 0.8rem; padding: 0.3rem 0; } .an-tree ul { list-style: none; margin: 0; padding: 0; } .an-tree li { margin: 0; padding: 0; } .an-tree-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.12rem 0.6rem 0.12rem calc(0.6rem + var(--depth, 0) * 1rem); cursor: pointer; white-space: nowrap; border-left: 2px solid transparent; } .an-tree-row:hover { background: var(--bg-card-hi); } .an-tree-row:focus-visible { outline: 2px solid var(--an-focus); outline-offset: -2px; } .an-tree-row.an-selected { background: var(--accent-soft); border-left-color: var(--accent); } .an-tree-row.an-hidden-by-filter { display: none; } .an-tree-toggle { width: 1rem; flex: 0 0 1rem; text-align: center; color: var(--text-dim); font-size: 0.7rem; user-select: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .an-tree-toggle:focus-visible { outline: 2px solid var(--an-focus); border-radius: 3px; } .an-tree-toggle.an-leaf { visibility: hidden; } .an-tree li.an-collapsed > ul { display: none; } .an-dot { width: 0.62rem; height: 0.62rem; flex: 0 0 0.62rem; border-radius: 50%; background: var(--an-bone-node); border: 1px solid rgba(0,0,0,0.25); } .an-dot.an-fam-spine { background: var(--an-bone-spine); } .an-dot.an-fam-head { background: var(--an-bone-head); } .an-dot.an-fam-left { background: var(--an-bone-left); } .an-dot.an-fam-right { background: var(--an-bone-right); } .an-dot.an-fam-unmapped { background: var(--an-bone-unmapped); } .an-tree-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; } .an-tree-row.an-not-bone .an-tree-name { color: var(--text-dim); } .an-slot { font-size: 0.66rem; letter-spacing: 0.03em; padding: 0.02rem 0.4rem; border-radius: 999px; border: 1px solid var(--border-hi); color: var(--text-muted); background: var(--bg-raised); } .an-slot.an-fam-spine { color: var(--an-bone-spine); border-color: var(--an-bone-spine); } .an-slot.an-fam-head { color: var(--an-bone-head); border-color: var(--an-bone-head); } .an-slot.an-fam-left { color: var(--an-bone-left); border-color: var(--an-bone-left); } .an-slot.an-fam-right { color: var(--an-bone-right); border-color: var(--an-bone-right); } .an-slot.an-slot-dup { color: var(--an-rank-verypoor); border-color: var(--an-rank-verypoor); } .an-tree-meta { color: var(--text-dim); font-size: 0.7rem; margin-left: auto; } .an-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--text-dim); margin: 0.4rem 0 0; } .an-legend span { display: inline-flex; align-items: center; gap: 0.35rem; } /* ---------- Rig: humanoid checklist ---------- */ .an-checklist { display: grid; gap: 0.7rem; } .an-check-group { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); padding: 0.5rem 0.7rem; } .an-check-group-title { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.35rem; } .an-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.25rem 0.6rem; } .an-check { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.8rem; font-family: var(--font-mono); color: var(--text-muted); cursor: default; } .an-check-mark { font-weight: 700; flex: 0 0 auto; } .an-check.an-found .an-check-mark { color: var(--an-rank-excellent); } .an-check.an-missing-required .an-check-mark { color: var(--an-rank-verypoor); } .an-check.an-missing-required { color: var(--text); } .an-check.an-missing-recommended .an-check-mark { color: var(--an-rank-medium); } .an-check.an-missing-optional .an-check-mark { color: var(--text-dim); } .an-check.an-clickable { cursor: pointer; } .an-check.an-clickable:hover { color: var(--accent); } .an-check-req { font-size: 0.62rem; color: var(--text-dim); } /* ---------- Performance: meters ---------- */ .an-perf-overall { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; margin: 0.4rem 0 1rem; font-size: 0.92rem; color: var(--text-muted); } .an-meters { display: grid; gap: 0.9rem; } .an-meter-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 0.7rem 0.9rem 0.6rem; } .an-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin-bottom: 0.4rem; } .an-meter-name { font-weight: 600; color: var(--text); } .an-meter-value { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); } .an-meter-row { display: grid; grid-template-columns: 4.6rem 1fr 6.2rem; align-items: center; gap: 0.6rem; padding: 0.35rem 0 0.9rem; } .an-meter-platform { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); } .an-meter-rank { justify-self: end; } .an-meter { position: relative; height: 10px; } .an-meter-track { position: absolute; inset: 0; border-radius: 4px; background: var(--an-meter-track); } .an-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 3px 3px 4px; background: var(--an-rank-na); min-width: 2px; } .an-meter-fill.rank-excellent { background: var(--an-rank-excellent); } .an-meter-fill.rank-good { background: var(--an-rank-good); } .an-meter-fill.rank-medium { background: var(--an-rank-medium); } .an-meter-fill.rank-poor { background: var(--an-rank-poor); } .an-meter-fill.rank-verypoor { background: var(--an-rank-verypoor); } .an-meter-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--an-tick); } .an-meter-tick-label { position: absolute; top: 14px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); white-space: nowrap; line-height: 1; } .an-meter-tick-label.an-tick-first { transform: none; } .an-meter-tick-label.an-tick-last { transform: translateX(-100%); } .an-meter-tick-label.an-tick-hidden { display: none; } .an-meter-tick[data-rank="excellent"] { background: var(--an-rank-excellent); } .an-meter-tick[data-rank="good"] { background: var(--an-rank-good); } .an-meter-tick[data-rank="medium"] { background: var(--an-rank-medium); } .an-meter-tick[data-rank="poor"] { background: var(--an-rank-poor); } .an-meter-na { font-size: 0.78rem; color: var(--text-dim); font-style: italic; } .an-meter-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.2rem 0 0.8rem; font-size: 0.78rem; color: var(--text-dim); } .an-meter-legend span { display: inline-flex; align-items: center; gap: 0.35rem; } .an-swatch-line { width: 0.9rem; height: 4px; border-radius: 2px; display: inline-block; } /* ---------- Meshes & materials ---------- */ .an-mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.7rem; margin: 0.6rem 0; } .an-mat-card { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 0.6rem; font-size: 0.82rem; color: var(--text-muted); min-width: 0; } .an-mat-thumb { width: 4.5rem; height: 4.5rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-hi); background-color: var(--bg-raised); background-image: linear-gradient(45deg, var(--bg-card-hi) 25%, transparent 25%, transparent 75%, var(--bg-card-hi) 75%), linear-gradient(45deg, var(--bg-card-hi) 25%, transparent 25%, transparent 75%, var(--bg-card-hi) 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; display: flex; align-items: center; justify-content: center; } .an-mat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; } .an-mat-thumb .an-mat-none { font-size: 0.65rem; color: var(--text-dim); text-align: center; padding: 0.2rem; } .an-mat-body { min-width: 0; } .an-mat-name { color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .an-mat-line { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; min-width: 0; } .an-mat-line code { overflow-wrap: anywhere; font-size: 0.74rem; } .an-swatch { width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--border-hi); flex: 0 0 auto; } .an-mat-dims { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); } .an-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } th.an-num { text-align: right; } .an-yes { color: var(--an-rank-excellent); } .an-no { color: var(--text-dim); } /* ---------- Blendshapes ---------- */ .an-bs-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.6rem; } .an-bs-toolbar input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.3rem 0.6rem; border: 1px solid var(--border-hi); border-radius: 6px; background: var(--bg-card); color: var(--text); } .an-bs-toolbar input:focus-visible { outline: 2px solid var(--an-focus); outline-offset: 1px; } .an-viseme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: 0.3rem 0.6rem; margin: 0.4rem 0 0.8rem; } .an-bs-mesh { margin: 0.8rem 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); padding: 0.5rem 0.8rem; } .an-bs-mesh-title { font-weight: 600; color: var(--text); margin-bottom: 0.3rem; display: flex; gap: 0.5rem; align-items: baseline; } .an-bs-group { margin: 0.3rem 0 0.5rem; } .an-bs-group-title { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0.2rem; } .an-bs-list { display: flex; flex-wrap: wrap; gap: 0.25rem; } .an-bs-chip { font-family: var(--font-mono); font-size: 0.74rem; padding: 0.05rem 0.45rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-muted); } .an-bs-chip.an-bs-viseme { border-color: var(--accent); } .an-bs-chip.an-bs-blink { border-color: var(--info); } .an-bs-chip.an-bs-expression { border-color: var(--an-bone-spine); } .an-bs-chip.an-hidden-by-filter, .an-bs-group.an-hidden-by-filter, .an-bs-mesh.an-hidden-by-filter { display: none; } .an-bs-empty { color: var(--text-dim); font-size: 0.85rem; } /* ---------- Raw JSON ---------- */ .an-json { max-height: 34rem; overflow: auto; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.45; background: var(--bg-code); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1rem; color: var(--text-muted); white-space: pre; tab-size: 2; } @media (max-width: 720px) { .an-meter-row { grid-template-columns: 3.6rem 1fr; } .an-meter-rank { grid-column: 2; justify-self: start; } } /* ---------- Neutralise the prose list/measure styling inside the report ---------- styles.css decorates every `.doc-section ul > li` with a bullet pseudo-element, left padding and a reading-measure cap; the report's trees, issue lists and fineprint are UI, not prose. The id wins on specificity without !important. */ #an-results ul, #an-results li { padding: 0; margin: 0; max-width: none; } #an-results ul > li::before { content: none; display: none; } #an-results p { max-width: none; } #an-results .an-issue-item { padding: 0.6rem 0.8rem; } #an-results .an-tree ul { min-width: max-content; } .an-tree-name { flex: 0 0 auto; overflow: visible; text-overflow: clip; } /* --- textures ------------------------------------------------------------------ */ .an-drop-sub { display: inline-block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-muted); } .an-drop.an-collapsed .an-drop-sub { display: none; } body.an-dragging .an-drop, body.an-dragging .an-viewer { outline: 2px dashed var(--accent); outline-offset: 3px; } .an-dim { color: var(--text-dim); } .an-tex-summary { color: var(--text-muted); font-size: 0.86rem; margin: 0.2rem 0 0.6rem; } .an-tex-notice p { margin: 0.3rem 0 0.6rem; } .an-tex-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } .an-tex-table td { vertical-align: middle; } .an-tex-table code { font-size: 0.74rem; overflow-wrap: anywhere; } .an-tex-thumb { width: 3rem; height: 3rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); background: repeating-conic-gradient(var(--bg-card-hi) 0 25%, var(--bg-card) 0 50%) 0 0 / 0.75rem 0.75rem; } .an-tex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .an-tex-thumb-empty { opacity: 0.5; } tr.an-tex-missing td { background: color-mix(in srgb, var(--warn, #d9a441) 7%, transparent); } .an-tex-lib { margin-top: 0.8rem; font-size: 0.84rem; } .an-tex-lib ul { margin: 0.4rem 0 0.6rem 1.2rem; } .an-tex-lib li { margin: 0.15rem 0; } .an-nowrap { white-space: nowrap; } .an-tex-path { cursor: help; }