mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-18 20:22:27 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

waterfox / non color-mix supporting browser fallbacks

Browse source
This commit is contained in:
Til Schmitter 2026-05-03 15:59:20 +02:00
parent 790dc38ff6
commit 58ff2fbfeb
1 changed files with 73 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
copyparty/web/ui.css
View file

@ -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;