patches: dark theme — make toasts opaque and lift status text
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 <noreply@anthropic.com>
This commit is contained in:
57_WolveandClaude Opus 5 committed
1 parent
4852777c57
commit
041b69d15d
2 files changed
+53
-7
No files matched your search
@@ -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 <ci@s3-gateway.local>
|
||||
Date: Mon, 15 Jun 2026 13:05:58 -0500
|
||||
Subject: [PATCH 1/2] webui: de-brand admin UI (remove Versity branding and
|
||||
|
||||
@@ -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 <ci@s3-gateway.local>
|
||||
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
|
||||
|
||||
Reference in new issue
Block a user