mirror of
https://github.com/9001/copyparty.git
synced 2026-06-18 20:22:27 -06:00
fix color mix for waterfox by adding color space qualifier
This commit is contained in:
Til Schmitter
parent
58ff2fbfeb
commit
52b85f6c99
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)';
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue