From 883804e49af1b35037ae27f605198698297ea61f Mon Sep 17 00:00:00 2001
From: awsr <43862868+awsr@users.noreply.github.com>
Date: Fri, 24 Apr 2026 15:25:28 -0700
Subject: [PATCH] Update themes to be compatible with new layout

---
 javascript/amethyst-nightfall.css    |  2 +-
 javascript/base.css                  | 13 ++++---
 javascript/black-gray.css            |  2 +-
 javascript/black-orange.css          |  2 +-
 javascript/black-teal-reimagined.css |  2 +-
 javascript/black-teal.css            |  2 +-
 javascript/emerald-paradise.css      |  2 +-
 javascript/invoked.css               |  2 +-
 javascript/light-teal.css            |  2 +-
 javascript/midnight-barbie.css       |  2 +-
 javascript/orchid-dreams.css         |  2 +-
 javascript/sdnext.css                | 51 +++++++++++++++++-----------
 javascript/timeless-beige.css        |  2 +-
 13 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css
index 929bd9e77..a06a5609c 100644
--- a/javascript/amethyst-nightfall.css
+++ b/javascript/amethyst-nightfall.css
@@ -69,7 +69,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 16px 0px 8px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; }
diff --git a/javascript/base.css b/javascript/base.css
index cc2e22061..7ea5b8ad7 100644
--- a/javascript/base.css
+++ b/javascript/base.css
@@ -4,11 +4,14 @@
 .gradio-button.tool { max-width: min-content; min-width: min-content !important; align-self: end; font-size: 1.4em; color: var(--body-text-color) !important; }
 
 /* token counters */
-.token-counter { position: absolute; display: inline-block; right: 0; min-width: 0 !important; width: auto; z-index: 100; top: 0; }
-.token-counter span { background: var(--input-background-fill) !important; box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075); border: 2px solid rgba(192,192,192,0.4) !important; }
-.token-counter.error span{ box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075); border: 2px solid rgba(255,0,0,0.4) !important; }
-.token-counter div { display: inline; }
-.token-counter span { padding: 0.1em 0.75em; }
+.token-counter > .token-counter-contents { display: flex; flex-direction: row; line-height: normal; padding: 2px 4px 4px 4px; margin: 0 !important; color: white; background: var(--input-background-fill); border: 2px solid rgba(192, 192, 192, 0.4); box-shadow: 0 0 0.0 0.3em rgba(192, 192, 192, 0.15), inset 0 0 0.6em rgba(192, 192, 192, 0.075); }
+.token-counter-detailed { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
+.token-counter-totals { flex-shrink: 0;
+  &:not(:only-of-type) { margin-left: 6px; }
+}
+.token-counter:not(:has(> .token-counter-contents)) { min-width: 0 !important; position: absolute !important; right: 2em; top: -1em; width: auto !important; z-index: 100; background: transparent !important;
+  &.error .token-counter-contents { border: 2px solid rgba(255, 0, 0, 0.4) !important; box-shadow: 0 0 0.0 0.3em rgba(255, 0, 0, 0.15), inset 0 0 0.6em rgba(255, 0, 0, 0.075); }
+}
 
 /* tooltips and statuses */
 .infotext { overflow-wrap: break-word; }
diff --git a/javascript/black-gray.css b/javascript/black-gray.css
index 299875b1b..b8a5a439d 100644
--- a/javascript/black-gray.css
+++ b/javascript/black-gray.css
@@ -79,7 +79,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; border: none !important; font-size: 0.7rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; border: none !important; font-size: 0.7rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 8px 0px 4px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; filter: hue-rotate(340deg) saturate(0.5); }
diff --git a/javascript/black-orange.css b/javascript/black-orange.css
index 467c53d1d..0acb59696 100644
--- a/javascript/black-orange.css
+++ b/javascript/black-orange.css
@@ -86,7 +86,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 16px 0px 8px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; }
diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css
index df5b2ccc5..2ecb386c9 100644
--- a/javascript/black-teal-reimagined.css
+++ b/javascript/black-teal-reimagined.css
@@ -583,7 +583,7 @@ svg.feather.feather-image,
   background-color: var(--background-color);
 }
 
-.block.token-counter span {
+.token-counter > .token-counter-contents {
   background-color: var(--input-background-fill) !important;
   box-shadow: 2px 2px 2px #111;
   border: none !important;
diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index bcfe7f74d..469115388 100644
--- a/javascript/black-teal.css
+++ b/javascript/black-teal.css
@@ -121,7 +121,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.7rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.7rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 8px 0px 4px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; filter: hue-rotate(340deg) saturate(0.5); }
diff --git a/javascript/emerald-paradise.css b/javascript/emerald-paradise.css
index 476c18d4f..7d6d5a302 100644
--- a/javascript/emerald-paradise.css
+++ b/javascript/emerald-paradise.css
@@ -70,7 +70,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 div.tab-nav button.selected {background-color: var(--button-primary-background-fill);}
 #settings div.tab-nav button.selected {background-color: var(--background-color); color: var(--primary-800); font-weight: bold;}
diff --git a/javascript/invoked.css b/javascript/invoked.css
index af5f63a9a..4283aefdd 100644
--- a/javascript/invoked.css
+++ b/javascript/invoked.css
@@ -70,7 +70,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 div.tab-nav button.selected {background-color: var(--button-primary-background-fill);}
 #settings div.tab-nav button.selected {background-color: var(--background-color); color: var(--primary-800); font-weight: bold;}
diff --git a/javascript/light-teal.css b/javascript/light-teal.css
index 5d0ccfc22..fb24a909f 100644
--- a/javascript/light-teal.css
+++ b/javascript/light-teal.css
@@ -80,7 +80,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.7rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.7rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 16px 0px 8px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; filter: hue-rotate(340deg) saturate(0.5); }
diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css
index 9facd698d..202bdc605 100644
--- a/javascript/midnight-barbie.css
+++ b/javascript/midnight-barbie.css
@@ -75,7 +75,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 .label-wrap { margin: 16px 0px 8px 0px; }
 .gradio-button.tool { border: none; background: none; box-shadow: none; }
diff --git a/javascript/orchid-dreams.css b/javascript/orchid-dreams.css
index a28e894a4..ba43f6613 100644
--- a/javascript/orchid-dreams.css
+++ b/javascript/orchid-dreams.css
@@ -70,7 +70,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 div.tab-nav button.selected {background-color: var(--button-primary-background-fill);}
 #settings div.tab-nav button.selected {background-color: var(--background-color); color: var(--primary-800); font-weight: bold;}
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index c34b5c951..e06ed40e2 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -416,32 +416,45 @@ button.custom-button {
   z-index: 999;
 }
 
-.token-counter {
-  min-width: 0 !important;
-  position: absolute;
-  right: 1em;
-  top: -0.5em;
-  width: auto;
-  z-index: 100;
-}
-
-.token-counter span {
-  background: var(--input-background-fill) !important;
-  border: 2px solid rgba(192, 192, 192, 0.4) !important;
+.token-counter > .token-counter-contents {
+  display: flex;
+  flex-direction: row;
+  line-height: normal;
+  padding: 2px 4px 4px 4px;
+  margin: 0 !important;
+  color: var(--body-text-color);
+  background: var(--input-background-fill);
+  border: 2px solid rgba(192, 192, 192, 0.4);
   box-shadow: 0 0 0.0 0.3em rgba(192, 192, 192, 0.15), inset 0 0 0.6em rgba(192, 192, 192, 0.075);
 }
 
-.token-counter.error span {
-  border: 2px solid rgba(255, 0, 0, 0.4) !important;
-  box-shadow: 0 0 0.0 0.3em rgba(255, 0, 0, 0.15), inset 0 0 0.6em rgba(255, 0, 0, 0.075);
+.token-counter-detailed {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
 }
 
-.token-counter div {
-  display: inline;
+.token-counter-totals {
+  &:not(:only-of-type) {
+    margin-left: 6px;
+  }
+  flex-shrink: 0;
 }
 
-.token-counter span {
-  padding: 0.1em 0.75em;
+/* Outermost instance of .token-counter */
+.token-counter:not(:has(> .token-counter-contents)) {
+  min-width: 0 !important;
+  position: absolute !important;
+  right: 2em;
+  top: -1em;
+  width: auto !important;
+  z-index: 100;
+  background: transparent !important;
+  &.error .token-counter-contents {
+    border: 2px solid rgba(255, 0, 0, 0.4) !important;
+    box-shadow: 0 0 0.0 0.3em rgba(255, 0, 0, 0.15), inset 0 0 0.6em rgba(255, 0, 0, 0.075);
+  }
 }
 
 .performance {
diff --git a/javascript/timeless-beige.css b/javascript/timeless-beige.css
index f611dbbeb..24aa4e83a 100644
--- a/javascript/timeless-beige.css
+++ b/javascript/timeless-beige.css
@@ -70,7 +70,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 .px-4 { padding-lefT: 1rem; padding-right: 1rem; }
 .py-6 { padding-bottom: 0; }
 .tabs { background-color: var(--background-color); }
-.block.token-counter span { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
+.token-counter > .token-counter-contents { background-color: var(--input-background-fill) !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; }
 .tab-nav { zoom: 110%; margin-top: 10px; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; }
 div.tab-nav button.selected {background-color: var(--button-primary-background-fill);}
 #settings div.tab-nav button.selected {background-color: var(--background-color); color: var(--primary-800); font-weight: bold;}