From 58ff2fbfebf7ad26ed948c43179757244da59b2f Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Sun, 3 May 2026 15:59:20 +0200
Subject: [PATCH] waterfox / non color-mix supporting browser fallbacks

---
 copyparty/web/ui.css | 97 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 73 insertions(+), 24 deletions(-)

diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css
index 3e9c92e4..845fbde3 100644
--- a/copyparty/web/ui.css
+++ b/copyparty/web/ui.css
@@ -11,27 +11,27 @@
 	accent-color: var(--a);
 	--radius: .3em;
 	
-	/* accent color in everything */
-	--fg-max: color-mix(#fefefe 95%, var(--a) 5%);
-	--bg-max: color-mix(#010101 95%, var(--a) 5%);
+	--fg-max: #fefefe;
+	--bg-max: #010101;
 
-	--a-hil: hsl(from color-mix(var(--a) 80%, var(--fg-max) 20%) h calc(s * 1.2) l);
-	--a-dark: hsl(from color-mix(var(--a) 60%, var(--bg-max) 40%) h calc(s * 1.3) l); /* warning text etc */
-	--a-gray: hsl(from var(--a) h calc(s * 0.1) l);
+	--a-hil: rgb(255, 215, 121);
+	--a-dark: rgb(235, 165, 37); /* warning text etc */
+	--a-gray: #ccc;
 
-	--fg: color-mix(var(--fg-max) 90%, var(--bg-max) 10%);
-	--fg-weak: color-mix(var(--fg-max) 70%, var(--bg-max) 30%);
+	--fg: #efefef;
+	--fg-weak: #c4c4c4;
+
+	--bg: #1f1f1f;
+	--bg-half: #01010182;
+	--bg-u1: #212121;
+	--bg-u2: #353535;
+	--bg-u3: #404040;
+	--bg-u5: #4e4e4e;
+	--bg-d1: #111111;
+	--bg-d2: #0e0e0e;
+	--bg-d3: #0b0b0b;
 
-	--bg: color-mix(var(--bg-max) 85%, var(--fg-max) 15%);
-	--bg-half: color-mix(var(--bg) 50%, transparent 50%);
-	--bg-u1: color-mix(var(--bg-max) 80%, var(--fg-max) 20%);
-	--bg-u2: color-mix(var(--bg-max) 75%, var(--fg-max) 25%);
-	--bg-u3: color-mix(var(--bg-max) 70%, var(--fg-max) 30%);
-	--bg-u5: color-mix(var(--bg-max) 65%, var(--fg-max) 35%);
 	--bgg: var(--bg);
-	--bg-d1: color-mix(var(--bg-max) 90%, var(--fg-max) 10%);
-	--bg-d2: color-mix(var(--bg-max) 92%, var(--fg-max) 8%);
-	--bg-d3: color-mix(var(--bg-max) 95%, var(--fg-max) 5%);
 }
 html.y {
 	color-scheme: light;
@@ -42,13 +42,22 @@ html.y {
 
 	--a: #07c;
 	
-	--bg-max: color-mix(#fefefe 95%, var(--a) 5%);
-	--fg-max: color-mix(#010101 95%, var(--a) 5%);
-	
-	--bg-u1: color-mix(var(--bg-max) 92%, var(--fg-max));
-	--bg-u2: color-mix(var(--bg-max) 95%, var(--fg-max));
-	--bg-u5: color-mix(var(--bg-max) 82%, var(--fg-max));
-	--bg: color-mix(var(--bg-max) 98%, var(--fg-max));
+	--a-hil: rgb(121, 193, 255);
+	--a-dark: rgb(7, 95, 183); /* warning text etc */
+	--a-gray: #ccc;
+
+	--fg: #101010;
+	--fg-weak: #323232;
+
+	--bg: #eeeeee;
+	--bg-half: #eeeeee82;
+	--bg-u1: #e3e3e3;
+	--bg-u2: #d6d6d6;
+	--bg-u3: #c7c7c7;
+	--bg-u5: #bcbcbc;
+	--bg-d1: #f4f4f4;
+	--bg-d2: #f5f5f5;
+	--bg-d3: #f6f6f6;
 
 	--chk-fg: var(--fg);
 	--txt-sh: #aaa;
@@ -57,6 +66,46 @@ html.y {
 
 	text-shadow: none;
 }
+@supports (background: hsl(from #ccc, h s l)){
+	:root {
+		--a-hil: hsl(from var(--a) h calc(s * 1.2) l);
+		--a-dark: hsl(from var(--a) h calc(s * 1.3) l); /* warning text etc */
+		--a-gray: hsl(from var(--a) h calc(s * 0.1) l);
+	}
+}
+@supports (background: color-mix(black, white)){
+	:root, html.y {
+		/* accent color in everything */
+		--fg-max: color-mix(#fefefe 95%, var(--a) 5%);
+		--bg-max: color-mix(#010101 95%, var(--a) 5%);
+
+		--a-hil: hsl(from color-mix(var(--a) 80%, var(--fg-max) 20%) h calc(s * 1.2) l);
+		--a-dark: hsl(from color-mix(var(--a) 60%, var(--bg-max) 40%) h calc(s * 1.3) l); /* warning text etc */
+		--a-gray: hsl(from var(--a) h calc(s * 0.1) l);
+
+		--fg: color-mix(var(--fg-max) 90%, var(--bg-max) 10%);
+		--fg-weak: color-mix(var(--fg-max) 70%, var(--bg-max) 30%);
+
+		--bg: color-mix(var(--bg-max) 85%, var(--fg-max) 15%);
+		--bg-half: color-mix(var(--bg) 50%, transparent 50%);
+		--bg-u1: color-mix(var(--bg-max) 80%, var(--fg-max) 20%);
+		--bg-u2: color-mix(var(--bg-max) 75%, var(--fg-max) 25%);
+		--bg-u3: color-mix(var(--bg-max) 70%, var(--fg-max) 30%);
+		--bg-u5: color-mix(var(--bg-max) 65%, var(--fg-max) 35%);
+		--bg-d1: color-mix(var(--bg-max) 90%, var(--fg-max) 10%);
+		--bg-d2: color-mix(var(--bg-max) 92%, var(--fg-max) 8%);
+		--bg-d3: color-mix(var(--bg-max) 95%, var(--fg-max) 5%);
+	}
+	html.y {
+		--bg-max: color-mix(#fefefe 95%, var(--a) 5%);
+		--fg-max: color-mix(#010101 95%, var(--a) 5%);
+		
+		--bg-u1: color-mix(var(--bg-max) 92%, var(--fg-max));
+		--bg-u2: color-mix(var(--bg-max) 95%, var(--fg-max));
+		--bg-u5: color-mix(var(--bg-max) 82%, var(--fg-max));
+		--bg: color-mix(var(--bg-max) 98%, var(--fg-max));
+	}
+}
 @font-face {
 	font-family: 'scp';
 	font-display: swap;