Spaces:

build-small-hackathon
/

tiny-army

Running

polats Claude Opus 4.8 (1M context) commited on 6 days ago

Commit

d6b7853

1 Parent(s): d633da3

Space: mirror auto-battler styling — parchment theme, fonts, paper sidebar

- Re-theme the shell sidebar (sidebar.css) from a bespoke dark palette to the
auto-battler paper theme (paper-2 cream like the stage, ink text, 2px ink
borders, Space Grotesk / JetBrains Mono) so the gray/white-text drift is gone.
- Load Space Grotesk / JetBrains Mono / Fraunces on the Space + a parchment body
theme so the whole UI mirrors the app instead of Gradio's Montserrat-on-grey.
- Defend the extras buttons' font/size/padding with !important so Gradio's button
theme stops enlarging them.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files changed (3) hide show

app.py +14 -1
web/shell/sidebar.css +31 -24
web/shell/spriteScene.css +11 -5

app.py CHANGED Viewed

@@ -39,8 +39,21 @@ WEB = os.path.join(HERE, "web")
 # every tab button present so the sidebar can drive navigation on any viewport.
 HIDE_TABS = ('<style>.tab-container[role="tablist"]{position:absolute!important;'
              'left:-99999px!important;top:0!important;width:1400px!important;}</style>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
-        + HIDE_TABS +
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<link rel="stylesheet" href="/web/shell/spriteScene.css">'
         '<script type="module" src="/web/tiny.js"></script>'

 # every tab button present so the sidebar can drive navigation on any viewport.
 HIDE_TABS = ('<style>.tab-container[role="tablist"]{position:absolute!important;'
              'left:-99999px!important;top:0!important;width:1400px!important;}</style>')
+# Load auto-battler's fonts + a parchment theme so the whole Space mirrors the app
+# (Gradio's default is Montserrat on light grey). Applied with !important to beat
+# Gradio's own theme.css; component cards/inputs keep their styling on top.
+FONTS = ('<link rel="preconnect" href="https://fonts.googleapis.com">'
+         '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'
+         '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?'
+         'family=Fraunces:opsz,wght@9..144,400..900&family=JetBrains+Mono:wght@400;500;700&'
+         'family=Space+Grotesk:wght@400;500;600;700&display=swap">')
+THEME = ('<style>'
+         'body,gradio-app,.gradio-container{background:#f3ebdc !important;color:#141821;'
+         "font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;}"
+         ".gradio-container h1{font-family:'Fraunces',Georgia,serif !important;color:#141821;}"
+         '</style>')
 HEAD = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
+        + HIDE_TABS + FONTS + THEME +
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'
         '<link rel="stylesheet" href="/web/shell/spriteScene.css">'
         '<script type="module" src="/web/tiny.js"></script>'

web/shell/sidebar.css CHANGED Viewed

@@ -3,24 +3,31 @@
  * 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>.
  */
 :root {
-  --tac-w: 248px;
-  --tac-bg: #12161c;
-  --tac-bg-2: #0d1116;
-  --tac-ink: #e7e0cf;
-  --tac-muted: #8b95a3;
-  --tac-accent: #6b5bff;
-  --tac-border: #232a33;
 }
 /* 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: 1px solid var(--tac-border);
-  color: var(--tac-ink); font-family: ui-monospace, Menlo, monospace;
   display: flex; flex-direction: column;
   transform: translateX(0); transition: transform .22s ease;
   overflow-y: auto;
@@ -34,8 +41,8 @@ body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
 .tac-brand {
   display: flex; align-items: center; gap: 8px;
-  padding: 14px 14px 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em;
-  border-bottom: 1px solid var(--tac-border);
 }
 .tac-brand .tac-brand-icon { font-size: 18px; }
 /* The collapse/reopen controls are <button>s; a host button theme (Gradio's
@@ -47,36 +54,36 @@ body:not(.tac-collapsed) .gradio-container { margin-left: var(--tac-w); }
   display: inline-flex !important; align-items: center; justify-content: center;
   width: 28px; height: 28px; padding: 0 !important;
   background: var(--tac-bg-2) !important; color: var(--tac-muted) !important;
-  border: 1px solid var(--tac-border) !important; border-radius: 6px !important;
 }
 .tac-sidebar .tac-brand .tac-collapse:hover {
-  background: #1a2027 !important; color: var(--tac-ink) !important;
 }
-.tac-section { padding: 10px 8px 0; }
 .tac-section-title {
-  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
   color: var(--tac-muted); padding: 4px 8px;
 }
 /* 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 the link-reset with `!important` — framework-neutral, only the colour/
- * underline props, so the sidebar looks identical wherever it's mounted. */
 .tac-sidebar .tac-nav-item {
   display: flex; align-items: center; gap: 8px; width: 100%;
-  padding: 8px 10px; margin: 1px 0; border: 0; border-radius: 8px;
-  background: none; color: var(--tac-ink) !important; font: inherit; text-align: left;
-  cursor: pointer; text-decoration: none !important;
 }
 .tac-sidebar .tac-nav-item:hover { background: var(--tac-bg-2); }
-.tac-sidebar .tac-nav-item.active { background: color-mix(in srgb, var(--tac-accent) 22%, transparent); }
-.tac-sidebar .tac-nav-item .tac-ico { width: 18px; text-align: center; opacity: .9; }
 /* 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) !important; color: var(--tac-ink) !important;
-  border: 1px solid var(--tac-border) !important; border-left: 0 !important;
   border-radius: 0 8px 8px 0 !important; padding: 8px 10px !important;
   cursor: pointer; font-size: 14px; line-height: 1;
 }
@@ -85,6 +92,6 @@ 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,.5); }
   body:not(.tac-collapsed) .gradio-container { margin-left: 0; }
 }

  * 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;
 .tac-brand {
   display: flex; align-items: center; gap: 8px;
+  padding: 14px 14px 12px; font-weight: 700; font-size: 16px; letter-spacing: .01em;
+  color: var(--tac-ink); border-bottom: 2px solid var(--tac-border);
 }
 .tac-brand .tac-brand-icon { font-size: 18px; }
 /* The collapse/reopen controls are <button>s; a host button theme (Gradio's
   display: inline-flex !important; align-items: center; justify-content: center;
   width: 28px; height: 28px; padding: 0 !important;
   background: var(--tac-bg-2) !important; color: var(--tac-muted) !important;
+  border: 1.5px solid var(--tac-border) !important; border-radius: 6px !important;
 }
 .tac-sidebar .tac-brand .tac-collapse:hover {
+  background: var(--tac-ink) !important; color: var(--tac-paper) !important;
 }
+.tac-section { padding: 12px 8px 0; }
 .tac-section-title {
+  font-family: var(--tac-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
   color: var(--tac-muted); padding: 4px 8px;
 }
 /* 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: 7px 10px; margin: 1px 0; border: 0; border-radius: 6px;
+  background: none; color: var(--tac-ink) !important; font: inherit; font-family: var(--tac-font);
+  font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none !important;
 }
 .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) !important; }
+.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) !important; color: var(--tac-ink) !important;
+  border: 2px solid var(--tac-border) !important; border-left: 0 !important;
   border-radius: 0 8px 8px 0 !important; padding: 8px 10px !important;
   cursor: pointer; font-size: 14px; line-height: 1;
 }
 /* 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; }
 }

web/shell/spriteScene.css CHANGED Viewed

@@ -15,8 +15,9 @@
   --mv-card: #fbf6ea;
   --mv-transmit: #d8271a;
   --mv-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
   display: flex; height: 100%; width: 100%; box-sizing: border-box;
-  color: var(--mv-ink);
 }
 .movement-view * { box-sizing: border-box; }
@@ -42,7 +43,8 @@
  * `.prose a`) that would otherwise turn these into blue underlined links. */
 .movement-char {
   display: block; padding: 5px 10px; margin: 1px 0; border-radius: 4px;
-  color: var(--mv-ink) !important; text-decoration: none !important; font-size: 13px; cursor: pointer;
 }
 .movement-char:hover { background: var(--mv-paper); }
 .movement-char.active { background: var(--mv-ink); color: var(--mv-card) !important; }
@@ -89,10 +91,14 @@
   font-family: var(--mv-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-ink-muted);
 }
 .movement-extras-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
 .movement-extra {
-  font-family: var(--mv-mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
-  color: var(--mv-ink) !important; background: var(--mv-card) !important; border: 1.5px solid var(--mv-ink); cursor: pointer;
-  padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px;
 }
 .movement-extra:hover { background: var(--mv-paper) !important; }
 .movement-extra.active { color: var(--mv-card) !important; background: var(--mv-ink) !important; }

   --mv-card: #fbf6ea;
   --mv-transmit: #d8271a;
   --mv-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  --mv-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   display: flex; height: 100%; width: 100%; box-sizing: border-box;
+  color: var(--mv-ink); font-family: var(--mv-sans);
 }
 .movement-view * { box-sizing: border-box; }
  * `.prose a`) that would otherwise turn these into blue underlined links. */
 .movement-char {
   display: block; padding: 5px 10px; margin: 1px 0; border-radius: 4px;
+  color: var(--mv-ink) !important; text-decoration: none !important;
+  font-family: var(--mv-sans); font-size: 13px; font-weight: 500; cursor: pointer;
 }
 .movement-char:hover { background: var(--mv-paper); }
 .movement-char.active { background: var(--mv-ink); color: var(--mv-card) !important; }
   font-family: var(--mv-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-ink-muted);
 }
 .movement-extras-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
+/* Host button themes (Gradio's `.gradio-container button`) enlarge these and swap
+ * the font — defend the type + box props with `!important` so they stay small mono. */
 .movement-extra {
+  font-family: var(--mv-mono) !important; font-size: 9px !important; line-height: 1.2 !important;
+  letter-spacing: .04em !important; text-transform: uppercase !important; font-weight: 500 !important;
+  color: var(--mv-ink) !important; background: var(--mv-card) !important; border: 1.5px solid var(--mv-ink) !important;
+  cursor: pointer; padding: 2px 6px !important; display: inline-flex; align-items: center; gap: 4px;
+  min-height: 0 !important; border-radius: 0 !important; box-shadow: none !important;
 }
 .movement-extra:hover { background: var(--mv-paper) !important; }
 .movement-extra.active { color: var(--mv-card) !important; background: var(--mv-ink) !important; }