/* * UX-C Phase 2 — Density CSS scaffold. * * Controlled by or . * Default (no class or density-comfortable): rows 48px, standard spacing. * Compact mode: rows 32px, reduced font + spacing. * * Applied to table rows with class="list-row" in 6 list templates. * Body class is set by base.html based on user_preferences.dashboard_layout->>'density'. * * These are intentionally NOT Tailwind utilities — density is a global * preference applied via a body class, not per-element. Tailwind's purge * would strip unused dynamic class variants; keeping it as a plain CSS file * is cleaner (imported via in base.html static/density.css). */ /* ─── Comfortable (default) ────────────────────────────────────────────── */ .density-comfortable tr.list-row, tr.list-row { height: 48px; line-height: 1.5; } .density-comfortable tr.list-row td, tr.list-row td { padding-top: 0.5rem; /* py-2 */ padding-bottom: 0.5rem; } .density-comfortable .btn-row, .btn-row { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* ─── Compact ───────────────────────────────────────────────────────────── */ .density-compact tr.list-row { height: 32px; line-height: 1.25; } .density-compact tr.list-row td { padding-top: 0.25rem; /* py-1 */ padding-bottom: 0.25rem; font-size: 0.875rem; /* text-sm */ } .density-compact .btn-row { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Tighten avatar/icon sizes in compact mode */ .density-compact .list-avatar { width: 1.5rem; height: 1.5rem; } /* Reduce badge padding in compact mode. * * Scoped to text badges only. The selector .inline-flex.rounded-full also * matches the wizard «Интерфейсы» toggle switch (track is an inline-flex * rounded-full button with fixed h-5/w-9 + border-2). Adding badge padding * to a fixed-size, border-box track shrinks the inner box below the h-4 thumb, * so the thumb overflows the track ("разъезжается") in compact density. * Exclude interactive (role="switch") and locked (aria-disabled) toggles. */ .density-compact .inline-flex.rounded-full:not([role="switch"]):not([aria-disabled]) { padding-top: 0.1rem; padding-bottom: 0.1rem; padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.7rem; }