waterfox / non color-mix supporting browser fallbacks

copyparty/web/ui.css

@@ -11,6 +11,70 @@
 	accent-color: var(--a);
 	--radius: .3em;
 	
+	--fg-max: #fefefe;
+	--bg-max: #010101;
+
+	--a-hil: rgb(255, 215, 121);
+	--a-dark: rgb(235, 165, 37); /* warning text etc */
+	--a-gray: #ccc;
+
+	--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;
+
+	--bgg: var(--bg);
+}
+html.y {
+	color-scheme: light;
+
+	--fg-max: #000;
+	--bg-max: #fff;
+	color-scheme: light;
+
+	--a: #07c;
+	
+	--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;
+	--txt-bg: var(--bg-d1);
+	--mp-sh: #0002;
+
+	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%);
@@ -28,20 +92,11 @@
 		--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;
-
-	--fg-max: #000;
-	--bg-max: #fff;
-	color-scheme: light;
-
-	--a: #07c;
-	
 		--bg-max: color-mix(#fefefe 95%, var(--a) 5%);
 		--fg-max: color-mix(#010101 95%, var(--a) 5%);
 		
@@ -49,13 +104,7 @@ html.y {
 		--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));
-
+	}
-	--chk-fg: var(--fg);
-	--txt-sh: #aaa;
-	--txt-bg: var(--bg-d1);
-	--mp-sh: #0002;
-
-	text-shadow: none;
 }
 @font-face {
 	font-family: 'scp';