diff --git a/assets/css/style.css b/assets/css/style.css
index 29f044641..a7dd4f97e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -112,40 +112,55 @@ input[type=number] {
}
table {
+ --transparent-canvas: color-mix(in oklab, canvas, oklab(none none none / 0%) 100%);
+ --color-canvastext: color-mix(in oklch, canvastext, oklch(none .05 260) 100%);
+
width: 100%;
- border: 5px solid transparent;
- border-radius: .2em;
border-spacing: 0;
border-collapse: collapse;
- background: var(--rainbow);
- animation: var(--rainbow-scroll);
+ border: 1px solid transparent;
+ background: color-mix(in oklab, var(--color-canvastext) 11%, var(--transparent-canvas));
& th,
& td {
text-align: left;
padding: .2em .4em;
+ border: 1px solid transparent;
+ background: color-mix(in oklab, canvas 95%, var(--transparent-canvas)) padding-box;
}
& thead {
& th {
- color: white;
font-size: 80%;
+ background-color: color-mix(in oklab, canvas 65%, var(--transparent-canvas));
}
}
& tbody,
& tfoot {
+ & tr:nth-of-type(even) {
+ & td,
+ & th {
+ background-color: color-mix(in oklab, canvas 80%, var(--transparent-canvas));
+ }
+ }
+ }
+
+ &.fancy {
+ border: 5px solid transparent;
+ border-radius: .2em;
+ background: var(--rainbow);
+ animation: var(--rainbow-scroll);
+
& th,
& td {
background: hsla(0 0% 100% / .95);
- border: 1px solid transparent;
+
}
- & tr:nth-of-type(even) {
- & td,
- & th {
- background: hsla(0 0% 100% / .8);
- }
+ thead th {
+ background: transparent;
+ color: white;
}
}
}
diff --git a/docs/spaces.njk b/docs/spaces.njk
index d140f7c32..8b3624cec 100644
--- a/docs/spaces.njk
+++ b/docs/spaces.njk
@@ -26,7 +26,7 @@ body_classes: cn-ignore
This just adds the color space to the ColorSpace.registry
object.
-
+
If you are using the prodcedural API, you need to register color spaces yourself, by calling ColorSpace.register(colorSpaceReference)
.
@@ -57,7 +57,7 @@ body_classes: cn-ignore
Id |
---|