From 52b85f6c992e13669dbc8de687544bd5e2a2f121 Mon Sep 17 00:00:00 2001 From: Til Schmitter Date: Sun, 3 May 2026 17:24:44 +0200 Subject: [PATCH] fix color mix for waterfox by adding color space qualifier --- copyparty/web/browser.css | 46 +++++++++++++++++++-------------------- copyparty/web/browser.js | 2 +- copyparty/web/splash.css | 8 +++---- copyparty/web/ui.css | 44 ++++++++++++++++++------------------- 4 files changed, 50 insertions(+), 50 deletions(-) diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index f71d2fc0..f81abf6e 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -16,11 +16,11 @@ --btn-fg: var(--a); --btn-bg-a: rgba(128,128,128,0.15); - --btn-bg-a: color-mix(var(--bg-max) 85%, var(--fg-max) 20%); + --btn-bg-a: color-mix(in oklab, var(--bg-max) 85%, var(--fg-max) 20%); --btn-bg: rgba(128,128,128,0.15); - --btn-bg: linear-gradient(-5deg, color-mix(var(--btn-bg-a) 40%, transparent), color-mix(var(--btn-bg-a)70%, var(--a-gray))); + --btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a) 40%, transparent), color-mix(in oklab, var(--btn-bg-a)70%, var(--a-gray))); --btn-h-fg: var(--a-hil); - --btn-h-bg: color-mix(var(--a-gray) 45%, var(--bg-max)); + --btn-h-bg: color-mix(in oklab, var(--a-gray) 45%, var(--bg-max)); --btn-1-fg: var(--bg); --btn-1-bg: var(--a); --btn-h-bs: var(--btn-bs); @@ -38,7 +38,7 @@ --op-aa-fg: var(--a); --op-aa-bg: var(--bg-d2); - --op-a-sh: color-mix(var(--bg-max) 50%, transparent 50%); + --op-a-sh: color-mix(in oklab, var(--bg-max) 50%, transparent 50%); --u2-btn-b1: #999; --u2-sbtn-b1: #999; @@ -99,7 +99,7 @@ --g-f-bg: var(--bg-u3); --g-f-b1: var(--bg-u5); --g-f-fg: var(--fg-max); - --g-sh: color-mix(var(--bg-max) 30%, transparent 70%); + --g-sh: color-mix(in oklab, var(--bg-max) 30%, transparent 70%); --f-sh1: 0.33; --f-sh2: 0.02; @@ -113,7 +113,7 @@ --fm-off: var(--a-hil); --mp-sh: #1116; - --mp-b-bg: color-mix(var(--bg-max) 20%, transparent 80%); + --mp-b-bg: color-mix(in oklab, var(--bg-max) 20%, transparent 80%); --scrl-hint: var(--bg-u2); @@ -135,13 +135,13 @@ html.az { --btn-1-bs: .05em .1em .2em var(--a-dark) inset; } html.ay { - --btn-bg: linear-gradient(-5deg, color-mix(var(--btn-bg-a)80%, var(--a)), color-mix(var(--btn-bg-a) 50%, transparent)); + --btn-bg: linear-gradient(-5deg, color-mix(in oklab, var(--btn-bg-a)80%, var(--a)), color-mix(in oklab, var(--btn-bg-a) 50%, transparent)); } html.b { --btn-bs: 0 .05em 0 var(--bg-d3) inset; --btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset; - --btn-bg: color-mix(var(--bg-u5), transparent); + --btn-bg: color-mix(in oklab, var(--bg-u5), transparent); --tree-bg: var(--bg); @@ -529,7 +529,7 @@ html .ayjump:focus-visible { cursor: pointer; } #qs_btns a { - background: color-mix(var(--txt-bg), transparent); + background: color-mix(in oklab, var(--txt-bg), transparent); width: 1em; display: inline-block; text-align: center; @@ -544,7 +544,7 @@ html.y #path { } #path a.dtarget { text-shadow: var(--f-sel-sh) 0 0 5px; - background: color-mix(var(--a), transparent); + background: color-mix(in oklab, var(--a), transparent); } #path #entree { margin-left: -.7em; @@ -597,7 +597,7 @@ a:hover { } #files a:hover { color: var(--fg-max); - background: color-mix(var(--a) 20%, transparent); + background: color-mix(in oklab, var(--a) 20%, transparent); text-decoration: underline; } #files thead th { @@ -631,7 +631,7 @@ a:hover { } #files tbody tr:hover td, #files tbody tr:hover td+td { - background: color-mix(var(--a) 15%, transparent); + background: color-mix(in oklab, var(--a) 15%, transparent); } a.dir { color: var(--a); @@ -722,7 +722,7 @@ html.y #files span.fsz_P { font-weight: bold } } #files tr.dtarget { box-shadow: 0 0 5px 0 var(--f-sel-sh) inset; - background: color-mix(var(--a), transparent); + background: color-mix(in oklab, var(--a), transparent); } #files tr.dtarget td { background: none; @@ -743,7 +743,7 @@ html.y #files span.fsz_P { font-weight: bold } transform: skew(-25deg); border-right: #222 solid 2px; border-right: var(--bg) solid 2px; - background: linear-gradient(70deg, transparent 40%, color-mix(var(--bg-max) 25%, transparent) 75%, color-mix(var(--bg-max) 35%, transparent)); + background: linear-gradient(70deg, transparent 40%, color-mix(in oklab, var(--bg-max) 25%, transparent) 75%, color-mix(in oklab, var(--bg-max) 35%, transparent)); } html.a #path i { border-right: var(--bg) solid 1px; @@ -1097,7 +1097,7 @@ html:not(.e) #ggrid>a.dir:before { } #ggrid a.dtarget { box-shadow: 0 0 5px 0 var(--f-sel-sh); - background: color-mix(var(--a), transparent); + background: color-mix(in oklab, var(--a), transparent); } #files tr.sel a, #files tr.sel a.play { @@ -1250,13 +1250,13 @@ html:not(.e) #ggrid>a.dir:before { right: .4em; font-size: xx-large; font-weight: bold; - box-shadow: 0 0 .5em color-mix(var(--a) 20%, transparent); + box-shadow: 0 0 .5em color-mix(in oklab, var(--a) 20%, transparent); border-radius: 10px; border-radius: calc(var(--radius) * 1.2); text-align: right; } #up_quick.open { - box-shadow: 0 0 .5em color-mix(var(--mp-sh) 20%, transparent); + box-shadow: 0 0 .5em color-mix(in oklab, var(--mp-sh) 20%, transparent); } #up_quick_more { display: none; @@ -1297,7 +1297,7 @@ html:not(.e):not(.d) #up_quick .btn { } html:not(.e):not(.d) #up_quick .btn.on { transform: rotate(-90deg); - box-shadow: -.05em .02em .3em color-mix(var(--a) 20%, transparent); + box-shadow: -.05em .02em .3em color-mix(in oklab, var(--a) 20%, transparent); } #up_quick .btn .rotatable { transition: all .20s; @@ -1980,7 +1980,7 @@ html.a .btn { } #tree li a.dtarget { box-shadow: 0 0 5px 0 var(--f-sel-sh) inset; - background: color-mix(var(--a) 30%, transparent); + background: color-mix(in oklab, var(--a) 30%, transparent); } #tree ul a.sel { background: #000; @@ -2468,7 +2468,7 @@ html.noscroll .sbar::-webkit-scrollbar { opacity: 1; } #bbox-overlay.sel { - background: color-mix(var(--a-dark) 70%, transparent); + background: color-mix(in oklab, var(--a-dark) 70%, transparent); } .full-image { display: inline-block; @@ -3024,7 +3024,7 @@ html.c .modalcontent { font-size: 1.1em; } #u2btn:hover { - background: linear-gradient(var(--a) 0%, var(--a) 20%, color-mix(transparent 85%, var(--a) 15%)); + background: linear-gradient(var(--a) 0%, var(--a) 20%, color-mix(in oklab, transparent 85%, var(--a) 15%)); border-color: var(--bg); border-style: solid; color: var(--fg-max); @@ -3474,7 +3474,7 @@ html.cz { } } html.c .modal .setting:hover { - background: color-mix(var(--bg-u5) 30%, transparent); + background: color-mix(in oklab, var(--bg-u5) 30%, transparent); } html.ay #u2btn { box-shadow: .4em .4em 0 #ccc; @@ -3574,7 +3574,7 @@ html.b * { } html.b #path, html.b #ops { - background: color-mix(var(--bg-u5), transparent); + background: color-mix(in oklab, var(--bg-u5), transparent); } html.b #treepar { margin-left: .63em; diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 30003fca..27ebae10 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -2793,7 +2793,7 @@ var vbar = (function () { if (gradh != gh) { gradh = gh; style1 = auto_grad(r.can, accent, accent); - style2 = light ? 'color-mix(' + bg + ' 85%, #000 15%' : 'color-mix(' + bg + ' 85%, #fff 15%'; + style2 = light ? 'color-mix(in oklab, ' + bg + ' 85%, #000 15%' : 'color-mix(in oklab, ' + bg + ' 85%, #fff 15%'; } if(IE){ style1 = 'rgb(85, 144, 255)'; diff --git a/copyparty/web/splash.css b/copyparty/web/splash.css index 4a040451..d27397fd 100644 --- a/copyparty/web/splash.css +++ b/copyparty/web/splash.css @@ -20,7 +20,7 @@ html { border-bottom: 2px solid rgb(7, 130, 212); position: fixed; z-index: 10; - box-shadow: 0 0 1em color-mix(var(--bg-max) 60%, transparent 40%); + box-shadow: 0 0 1em color-mix(in oklab, var(--bg-max) 60%, transparent 40%); } #homebtn:hover, #homebtn:focus-visible { background: var(--bg-u5); @@ -51,13 +51,13 @@ html { padding: 1.5em; padding-bottom: 0em; line-height: 1.3em; - background: color-mix(var(--a-gray) 27%, var(--bg-max)); + background: color-mix(in oklab, var(--a-gray) 27%, var(--bg-max)); border-radius: .5em; border: var(--bg-u5) solid 1px; - box-shadow: 0 0 2em color-mix(var(--bg-max) 60%, transparent 40%); + box-shadow: 0 0 2em color-mix(in oklab, var(--bg-max) 60%, transparent 40%); } html.y #wrap { - background: color-mix(var(--a-gray) 18%, var(--bg-max)); + background: color-mix(in oklab, var(--a-gray) 18%, var(--bg-max)); } #wrap.w { max-width: 96%; diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css index 845fbde3..1ae3e583 100644 --- a/copyparty/web/ui.css +++ b/copyparty/web/ui.css @@ -73,37 +73,37 @@ html.y { --a-gray: hsl(from var(--a) h calc(s * 0.1) l); } } -@supports (background: color-mix(black, white)){ +@supports (background: color-mix(in oklab, 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%); + --fg-max: color-mix(in oklab, #fefefe 95%, var(--a) 5%); + --bg-max: color-mix(in oklab, #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-hil: hsl(from color-mix(in oklab, var(--a) 80%, var(--fg-max) 20%) h calc(s * 1.2) l); + --a-dark: hsl(from color-mix(in oklab, 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%); + --fg: color-mix(in oklab, var(--fg-max) 90%, var(--bg-max) 10%); + --fg-weak: color-mix(in oklab, 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%); + --bg: color-mix(in oklab, var(--bg-max) 85%, var(--fg-max) 15%); + --bg-half: color-mix(in oklab, var(--bg) 50%, transparent 50%); + --bg-u1: color-mix(in oklab, var(--bg-max) 80%, var(--fg-max) 20%); + --bg-u2: color-mix(in oklab, var(--bg-max) 75%, var(--fg-max) 25%); + --bg-u3: color-mix(in oklab, var(--bg-max) 70%, var(--fg-max) 30%); + --bg-u5: color-mix(in oklab, var(--bg-max) 65%, var(--fg-max) 35%); + --bg-d1: color-mix(in oklab, var(--bg-max) 90%, var(--fg-max) 10%); + --bg-d2: color-mix(in oklab, var(--bg-max) 92%, var(--fg-max) 8%); + --bg-d3: color-mix(in oklab, 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-max: color-mix(in oklab, #fefefe 95%, var(--a) 5%); + --fg-max: color-mix(in oklab, #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)); + --bg-u1: color-mix(in oklab, var(--bg-max) 92%, var(--fg-max)); + --bg-u2: color-mix(in oklab, var(--bg-max) 95%, var(--fg-max)); + --bg-u5: color-mix(in oklab, var(--bg-max) 82%, var(--fg-max)); + --bg: color-mix(in oklab, var(--bg-max) 98%, var(--fg-max)); } } @font-face {