From 19847621867529c1c7fae296d2f27baf8152c870 Mon Sep 17 00:00:00 2001 From: William Gill Date: Sun, 8 Nov 2026 11:45:02 -0600 Subject: [PATCH] =?UTF-8?q?patches:=20dark=20theme=20=E2=80=94=20make=20to?= =?UTF-8?q?asts=20opaque=20and=20lift=20status=20text?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Toasts blended into whatever sat behind them: one landing over the Explorer's Upload button showed the button straight through it. Two separate causes, both in the override layer: - The status tints map bg-*-50 to rgba(..., 0.13). That is right for inline banners, which sit on a solid panel, but a toast floats over page content, so 13% left it see-through. - text-*-800 was never re-pointed. The lifts covered 600/700 only, so Tailwind's near-black green/red/yellow/blue 800s stayed put — and the toast label, every inline warning and info box ("This action cannot be undone", the bucket-policy status line, v1.11.0's new bucket-size readout) rendered dark-on-dark. 25 call sites. Scope matches each cause. The text lift is global, since the inline boxes are just as unreadable as the toasts. The opaque surface is scoped to #toast-container, because the inline boxes should keep their translucent tint — they have a panel behind them. Toasts now get #1a1a2e with the status tint composited back on top as a background-image layer, a hairline on the three non-accent edges (the 4px border-l-* keeps its status colour), and a shadow deep enough to read on a dark page, where shadow-lg is invisible. Also lifts hover:text-gray-600, which the base layer missed the same way it missed the uploads-tray Cancel link: the toast close button, the secret-key reveal and the login endpoint dropdowns all dimmed to Tailwind's #4b5563 on hover instead of lifting. Verified in the patched UI served over HTTP: all four toast types render opaque over a bright button placed behind them, computed background rgb(26, 26, 46) with the tint layer, label colour rgb(74, 222, 128). Co-Authored-By: Claude Opus 5 --- patches/v1.11.0/0001-webui-debrand.patch | 2 +- patches/v1.11.0/0002-webui-dark-theme.patch | 58 ++++++++++++++++++--- 2 files changed, 53 insertions(+), 7 deletions(-) diff --git a/patches/v1.11.0/0001-webui-debrand.patch b/patches/v1.11.0/0001-webui-debrand.patch index 3236a26..f4cb13d 100644 --- a/patches/v1.11.0/0001-webui-debrand.patch +++ b/patches/v1.11.0/0001-webui-debrand.patch @@ -1,4 +1,4 @@ -From 1742140af1376269b3117bee47c097f5e37bad98 Mon Sep 17 00:00:00 2001 +From 4970f980b87f58ed85ed6cf7bd6f0db94f697049 Mon Sep 17 00:00:00 2001 From: s3-gateway CI Date: Mon, 15 Jun 2026 13:05:58 -0500 Subject: [PATCH 1/2] webui: de-brand admin UI (remove Versity branding and diff --git a/patches/v1.11.0/0002-webui-dark-theme.patch b/patches/v1.11.0/0002-webui-dark-theme.patch index cb9bdba..c72d95f 100644 --- a/patches/v1.11.0/0002-webui-dark-theme.patch +++ b/patches/v1.11.0/0002-webui-dark-theme.patch @@ -1,4 +1,4 @@ -From 50a20fa6247b22e6652bf5261bf9b5a7eb88342a Mon Sep 17 00:00:00 2001 +From 56f347d3ac3d20e42404e79f8e93200f7691d161 Mon Sep 17 00:00:00 2001 From: s3-gateway CI Date: Mon, 29 Jun 2026 10:34:49 -0500 Subject: [PATCH 2/2] webui: dark theme (kanrisha palette, indigo on @@ -27,15 +27,15 @@ light from-surface/to-white gradient becomes a solid dark surface): Downstream cosmetic patch for de-branded s3-gateway builds. Base: v1.6.0. --- - webui/web/assets/css/fonts.css | 47 ++++ + webui/web/assets/css/fonts.css | 47 +++ webui/web/assets/css/tailwind-config.js | 51 ++-- - webui/web/assets/css/theme.css | 224 ++++++++++++++++-- + webui/web/assets/css/theme.css | 270 ++++++++++++++++-- webui/web/assets/fonts/inter-latin-ext.woff2 | Bin 0 -> 85068 bytes webui/web/assets/fonts/inter-latin.woff2 | Bin 0 -> 48256 bytes .../fonts/jetbrains-mono-latin-ext.woff2 | Bin 0 -> 11624 bytes .../assets/fonts/jetbrains-mono-latin.woff2 | Bin 0 -> 31432 bytes webui/web/index.html | 2 +- - 8 files changed, 280 insertions(+), 44 deletions(-) + 8 files changed, 326 insertions(+), 44 deletions(-) create mode 100644 webui/web/assets/fonts/inter-latin-ext.woff2 create mode 100644 webui/web/assets/fonts/inter-latin.woff2 create mode 100644 webui/web/assets/fonts/jetbrains-mono-latin-ext.woff2 @@ -172,7 +172,7 @@ index 826e03d..eed94fb 100644 } } diff --git a/webui/web/assets/css/theme.css b/webui/web/assets/css/theme.css -index f223f65..f976989 100644 +index f223f65..275d344 100644 --- a/webui/web/assets/css/theme.css +++ b/webui/web/assets/css/theme.css @@ -16,10 +16,23 @@ @@ -321,7 +321,7 @@ index f223f65..f976989 100644 cursor: pointer; } .advanced-options { -@@ -187,6 +200,171 @@ input:checked + .toggle-slider:before { +@@ -187,6 +200,217 @@ input:checked + .toggle-slider:before { } /* Explorer */ @@ -496,6 +496,52 @@ index f223f65..f976989 100644 + * darker than that, so hovering dimmed the link instead of lifting it. Lift + * the hover one shade brighter, the way hover:text-accent-600 does. */ +.hover\:text-red-700:hover { color: #fca5a5 !important; } ++ ++/* Status text at the 800 shade. The lifts above cover only 600/700, so ++ * Tailwind's near-black green/red/yellow/blue 800s survived onto the dark ++ * page: every inline warning and info box ("This action cannot be undone", ++ * the bucket-policy status line, v1.11.0's bucket-size readout) and every ++ * toast rendered dark-on-dark. Lift them to the same 400 shades the ++ * 600/700 rules use. */ ++.text-green-800 { color: #4ade80 !important; } ++.text-red-800 { color: #f87171 !important; } ++.text-yellow-800 { color: #facc15 !important; } ++.text-blue-800 { color: #60a5fa !important; } ++ ++/* Dismiss / reveal buttons (toast close, secret-key reveal, the login ++ * endpoint dropdowns) are text-gray-400 hover:text-gray-600. The base ++ * layer re-points text-gray-600 but not its hover variant, so hovering ++ * dropped them to Tailwind's #4b5563 and they vanished instead of lifting ++ * — the same trap as the uploads-tray Cancel link above. */ ++.hover\:text-gray-600:hover { color: #e6e6ed !important; } ++ ++/* Toasts float over page content instead of sitting on a panel, so the 13% ++ * status tints above left them see-through — a toast landing over the ++ * Explorer's Upload button blended straight into it. Give the toast stack ++ * an opaque elevated surface with the tint composited back on top as a ++ * background-image layer, a hairline on the three non-accent edges (the 4px ++ * border-l-* keeps its status colour), and a shadow deep enough to read on ++ * a dark page, where Tailwind's shadow-lg is invisible. */ ++#toast-container > div { ++ background-color: #1a1a2e !important; ++ border-top: 1px solid #252540; ++ border-right: 1px solid #252540; ++ border-bottom: 1px solid #252540; ++ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), ++ 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important; ++} ++#toast-container > div.bg-green-50 { ++ background-image: linear-gradient(rgba(34, 197, 94, 0.13), rgba(34, 197, 94, 0.13)); ++} ++#toast-container > div.bg-red-50 { ++ background-image: linear-gradient(rgba(239, 68, 68, 0.13), rgba(239, 68, 68, 0.13)); ++} ++#toast-container > div.bg-yellow-50 { ++ background-image: linear-gradient(rgba(234, 179, 8, 0.13), rgba(234, 179, 8, 0.13)); ++} ++#toast-container > div.bg-blue-50 { ++ background-image: linear-gradient(rgba(59, 130, 246, 0.13), rgba(59, 130, 246, 0.13)); ++} diff --git a/webui/web/assets/fonts/inter-latin-ext.woff2 b/webui/web/assets/fonts/inter-latin-ext.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..479d010d2902fa3a5b48e84a973db1978b2e9949