Spaces:
Running
Running
| /* Shared app-shell sidebar — ONE source for both the React app and the Gradio | |
| * Space. Pure CSS (framework-neutral); behaviour is in sidebar.js, content in | |
| * nav.json. Everything is namespaced `.tac-*` so it never collides with Gradio's | |
| * own classes. The collapse/slide is driven by a `tac-collapsed` class that | |
| * sidebar.js toggles on <body>. | |
| * | |
| * Palette + fonts mirror the auto-battler theme (parchment paper-2 like the pixi | |
| * stage, ink text, 2px ink borders, Space Grotesk / JetBrains Mono) so the Space | |
| * shell matches the app instead of a bespoke dark theme. | |
| */ | |
| :root { | |
| --tac-w: 240px; | |
| --tac-bg: #ece2cc; /* paper-2 — same cream as the pixi stage */ | |
| --tac-bg-2: #e2d6ba; /* paper-3 — hover */ | |
| --tac-paper: #f3ebdc; /* paper — text on an ink fill */ | |
| --tac-ink: #141821; /* ink — text + borders */ | |
| --tac-muted: #6d6a5f; /* ink-muted */ | |
| --tac-accent: #d8271a; /* transmit — accent */ | |
| --tac-border: #141821; | |
| --tac-font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --tac-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; | |
| } | |
| /* The drawer — a fixed slide-in panel (works inside Gradio's flow). */ | |
| .tac-sidebar { | |
| position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; | |
| width: var(--tac-w); box-sizing: border-box; | |
| background: var(--tac-bg); border-right: 2px solid var(--tac-border); | |
| color: var(--tac-ink); font-family: var(--tac-font); | |
| display: flex; flex-direction: column; | |
| transform: translateX(0); transition: transform .22s ease; | |
| overflow-y: auto; | |
| } | |
| body.tac-collapsed .tac-sidebar { transform: translateX(-100%); } | |
| /* Push the page content over on desktop when the drawer is open; on mobile it | |
| * just overlays (see media query). */ | |
| .gradio-container { transition: margin-left .22s ease; } | |
| body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); } | |
| /* Brand block mirrors the app's `.sidebar-title`: a big display-font title with a | |
| * red dot, plus a small uppercase subtitle. */ | |
| .tac-brand { padding: 16px 14px 12px; border-bottom: 2px solid var(--tac-border); } | |
| .tac-brand-row { display: flex; align-items: flex-start; justify-content: space-between; } | |
| .tac-sidebar .tac-title { | |
| display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 900; | |
| font-size: 28px; line-height: .92; letter-spacing: -.03em; color: var(--tac-ink) ; | |
| } | |
| .tac-sidebar .tac-title::after { content: "·"; color: var(--tac-accent); } | |
| .tac-subtitle { | |
| margin: 8px 0 0 ; font-family: var(--tac-mono); font-size: 9px; | |
| color: var(--tac-muted) ; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; | |
| } | |
| /* Plain ‹ collapse control (like the app's .sidebar-collapse); defend against the | |
| * host button reset so it stays a borderless glyph. */ | |
| .tac-sidebar .tac-brand .tac-collapse { | |
| cursor: pointer; line-height: 1; font-size: 18px; margin-left: 8px; flex-shrink: 0; | |
| background: none ; color: var(--tac-muted) ; | |
| border: 0 ; padding: 0 ; box-shadow: none ; | |
| } | |
| .tac-sidebar .tac-brand .tac-collapse:hover { color: var(--tac-ink) ; } | |
| .tac-section { padding: 12px 8px 0; } | |
| /* Section headers: red (transmit) with a short ink line prefix, like the app's | |
| * `.sidebar h2`. !important on colour so the host text var can't blacken it. */ | |
| .tac-section-title { | |
| display: flex; align-items: center; gap: 6px; | |
| font-family: var(--tac-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; | |
| font-weight: 500; color: var(--tac-accent) ; padding: 6px 8px 4px; | |
| } | |
| .tac-section-title::before { content: ""; height: 2px; width: 18px; background: var(--tac-ink); flex-shrink: 0; } | |
| /* Nav items are <a>, so a host's link theme (e.g. Gradio's prefixed `.gradio- | |
| * container .prose a`) out-specifies a plain class. As an embeddable shell we | |
| * defend colour/underline with `!important` so it looks the same wherever mounted. */ | |
| .tac-sidebar .tac-nav-item { | |
| display: flex; align-items: center; gap: 8px; width: 100%; | |
| padding: 6px 10px; margin: 1px 0; border: 0; border-radius: 0; | |
| background: none; color: var(--tac-ink) ; font: inherit; font-family: var(--tac-font); | |
| font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none ; | |
| } | |
| .tac-sidebar .tac-nav-item:hover { background: var(--tac-bg-2); } | |
| .tac-sidebar .tac-nav-item.active { background: var(--tac-ink); color: var(--tac-paper) ; } | |
| /* Force the label span to inherit the link colour. A host theme (Gradio) sets | |
| * span colour from --body-text-color (dark), which on the active item's dark fill | |
| * would render the label invisible. The icon span keeps its own accent colour. */ | |
| .tac-sidebar .tac-nav-item span:not(.tac-ico) { color: inherit ; } | |
| .tac-sidebar .tac-nav-item .tac-ico { width: 18px; text-align: center; color: var(--tac-accent); } | |
| .tac-sidebar .tac-nav-item.active .tac-ico { color: #e8a72a; } /* amber, like the app's active world icon */ | |
| /* Edge tab to reopen when collapsed. Same host-button defence as above. */ | |
| .tac-reopen { | |
| position: fixed; top: 12px; left: 0; z-index: 1001; display: none; | |
| background: var(--tac-bg) ; color: var(--tac-ink) ; | |
| border: 2px solid var(--tac-border) ; border-left: 0 ; | |
| border-radius: 0 8px 8px 0 ; padding: 8px 10px ; | |
| cursor: pointer; font-size: 14px; line-height: 1; | |
| } | |
| body.tac-collapsed .tac-reopen { display: block; } | |
| /* Mobile: the drawer overlays full-bleed-ish and never pushes content. JS | |
| * auto-collapses below this width on load + resize. */ | |
| @media (max-width: 768px) { | |
| .tac-sidebar { width: min(280px, 86vw); box-shadow: 4px 0 24px rgba(0,0,0,.3); } | |
| body:not(.tac-collapsed) .gradio-container { margin-left: 0; } | |
| } | |