chore: added in the examples
This commit is contained in:
parent
f532456b82
commit
d807a0b4ac
3 changed files with 208 additions and 205 deletions
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
|
||||
<style>
|
||||
:root {
|
||||
--color-hue: 180;
|
||||
--color-priduck-hue: 180;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
min-width: 5em;
|
||||
min-height: 1em;
|
||||
border: 1px solid black;
|
||||
background-color: lch(50% 100 var(--color-hue));
|
||||
background-color: lch(50% 100 var(--color-priduck-hue));
|
||||
}
|
||||
|
||||
td,
|
||||
|
|
@ -69,605 +69,605 @@
|
|||
}
|
||||
|
||||
.fg-c0b0 {
|
||||
color: var(--color-c0b0);
|
||||
color: var(--color-priduck-c0b0);
|
||||
}
|
||||
.fg-c1b0 {
|
||||
color: var(--color-c1b0);
|
||||
color: var(--color-priduck-c1b0);
|
||||
}
|
||||
.fg-c2b0 {
|
||||
color: var(--color-c2b0);
|
||||
color: var(--color-priduck-c2b0);
|
||||
}
|
||||
.fg-c3b0 {
|
||||
color: var(--color-c3b0);
|
||||
color: var(--color-priduck-c3b0);
|
||||
}
|
||||
.fg-c4b0 {
|
||||
color: var(--color-c4b0);
|
||||
color: var(--color-priduck-c4b0);
|
||||
}
|
||||
.fg-c5b0 {
|
||||
color: var(--color-c5b0);
|
||||
color: var(--color-priduck-c5b0);
|
||||
}
|
||||
.fg-c6b0 {
|
||||
color: var(--color-c6b0);
|
||||
color: var(--color-priduck-c6b0);
|
||||
}
|
||||
.fg-c7b0 {
|
||||
color: var(--color-c7b0);
|
||||
color: var(--color-priduck-c7b0);
|
||||
}
|
||||
.fg-c8b0 {
|
||||
color: var(--color-c8b0);
|
||||
color: var(--color-priduck-c8b0);
|
||||
}
|
||||
.fg-c9b0 {
|
||||
color: var(--color-c9b0);
|
||||
color: var(--color-priduck-c9b0);
|
||||
}
|
||||
.fg-c0b1 {
|
||||
color: var(--color-c0b1);
|
||||
color: var(--color-priduck-c0b1);
|
||||
}
|
||||
.fg-c1b1 {
|
||||
color: var(--color-c1b1);
|
||||
color: var(--color-priduck-c1b1);
|
||||
}
|
||||
.fg-c2b1 {
|
||||
color: var(--color-c2b1);
|
||||
color: var(--color-priduck-c2b1);
|
||||
}
|
||||
.fg-c3b1 {
|
||||
color: var(--color-c3b1);
|
||||
color: var(--color-priduck-c3b1);
|
||||
}
|
||||
.fg-c4b1 {
|
||||
color: var(--color-c4b1);
|
||||
color: var(--color-priduck-c4b1);
|
||||
}
|
||||
.fg-c5b1 {
|
||||
color: var(--color-c5b1);
|
||||
color: var(--color-priduck-c5b1);
|
||||
}
|
||||
.fg-c6b1 {
|
||||
color: var(--color-c6b1);
|
||||
color: var(--color-priduck-c6b1);
|
||||
}
|
||||
.fg-c7b1 {
|
||||
color: var(--color-c7b1);
|
||||
color: var(--color-priduck-c7b1);
|
||||
}
|
||||
.fg-c8b1 {
|
||||
color: var(--color-c8b1);
|
||||
color: var(--color-priduck-c8b1);
|
||||
}
|
||||
.fg-c9b1 {
|
||||
color: var(--color-c9b1);
|
||||
color: var(--color-priduck-c9b1);
|
||||
}
|
||||
.fg-c0b2 {
|
||||
color: var(--color-c0b2);
|
||||
color: var(--color-priduck-c0b2);
|
||||
}
|
||||
.fg-c1b2 {
|
||||
color: var(--color-c1b2);
|
||||
color: var(--color-priduck-c1b2);
|
||||
}
|
||||
.fg-c2b2 {
|
||||
color: var(--color-c2b2);
|
||||
color: var(--color-priduck-c2b2);
|
||||
}
|
||||
.fg-c3b2 {
|
||||
color: var(--color-c3b2);
|
||||
color: var(--color-priduck-c3b2);
|
||||
}
|
||||
.fg-c4b2 {
|
||||
color: var(--color-c4b2);
|
||||
color: var(--color-priduck-c4b2);
|
||||
}
|
||||
.fg-c5b2 {
|
||||
color: var(--color-c5b2);
|
||||
color: var(--color-priduck-c5b2);
|
||||
}
|
||||
.fg-c6b2 {
|
||||
color: var(--color-c6b2);
|
||||
color: var(--color-priduck-c6b2);
|
||||
}
|
||||
.fg-c7b2 {
|
||||
color: var(--color-c7b2);
|
||||
color: var(--color-priduck-c7b2);
|
||||
}
|
||||
.fg-c8b2 {
|
||||
color: var(--color-c8b2);
|
||||
color: var(--color-priduck-c8b2);
|
||||
}
|
||||
.fg-c9b2 {
|
||||
color: var(--color-c9b2);
|
||||
color: var(--color-priduck-c9b2);
|
||||
}
|
||||
.fg-c0b3 {
|
||||
color: var(--color-c0b3);
|
||||
color: var(--color-priduck-c0b3);
|
||||
}
|
||||
.fg-c1b3 {
|
||||
color: var(--color-c1b3);
|
||||
color: var(--color-priduck-c1b3);
|
||||
}
|
||||
.fg-c2b3 {
|
||||
color: var(--color-c2b3);
|
||||
color: var(--color-priduck-c2b3);
|
||||
}
|
||||
.fg-c3b3 {
|
||||
color: var(--color-c3b3);
|
||||
color: var(--color-priduck-c3b3);
|
||||
}
|
||||
.fg-c4b3 {
|
||||
color: var(--color-c4b3);
|
||||
color: var(--color-priduck-c4b3);
|
||||
}
|
||||
.fg-c5b3 {
|
||||
color: var(--color-c5b3);
|
||||
color: var(--color-priduck-c5b3);
|
||||
}
|
||||
.fg-c6b3 {
|
||||
color: var(--color-c6b3);
|
||||
color: var(--color-priduck-c6b3);
|
||||
}
|
||||
.fg-c7b3 {
|
||||
color: var(--color-c7b3);
|
||||
color: var(--color-priduck-c7b3);
|
||||
}
|
||||
.fg-c8b3 {
|
||||
color: var(--color-c8b3);
|
||||
color: var(--color-priduck-c8b3);
|
||||
}
|
||||
.fg-c9b3 {
|
||||
color: var(--color-c9b3);
|
||||
color: var(--color-priduck-c9b3);
|
||||
}
|
||||
.fg-c0b4 {
|
||||
color: var(--color-c0b4);
|
||||
color: var(--color-priduck-c0b4);
|
||||
}
|
||||
.fg-c1b4 {
|
||||
color: var(--color-c1b4);
|
||||
color: var(--color-priduck-c1b4);
|
||||
}
|
||||
.fg-c2b4 {
|
||||
color: var(--color-c2b4);
|
||||
color: var(--color-priduck-c2b4);
|
||||
}
|
||||
.fg-c3b4 {
|
||||
color: var(--color-c3b4);
|
||||
color: var(--color-priduck-c3b4);
|
||||
}
|
||||
.fg-c4b4 {
|
||||
color: var(--color-c4b4);
|
||||
color: var(--color-priduck-c4b4);
|
||||
}
|
||||
.fg-c5b4 {
|
||||
color: var(--color-c5b4);
|
||||
color: var(--color-priduck-c5b4);
|
||||
}
|
||||
.fg-c6b4 {
|
||||
color: var(--color-c6b4);
|
||||
color: var(--color-priduck-c6b4);
|
||||
}
|
||||
.fg-c7b4 {
|
||||
color: var(--color-c7b4);
|
||||
color: var(--color-priduck-c7b4);
|
||||
}
|
||||
.fg-c8b4 {
|
||||
color: var(--color-c8b4);
|
||||
color: var(--color-priduck-c8b4);
|
||||
}
|
||||
.fg-c9b4 {
|
||||
color: var(--color-c9b4);
|
||||
color: var(--color-priduck-c9b4);
|
||||
}
|
||||
.fg-c0b5 {
|
||||
color: var(--color-c0b5);
|
||||
color: var(--color-priduck-c0b5);
|
||||
}
|
||||
.fg-c1b5 {
|
||||
color: var(--color-c1b5);
|
||||
color: var(--color-priduck-c1b5);
|
||||
}
|
||||
.fg-c2b5 {
|
||||
color: var(--color-c2b5);
|
||||
color: var(--color-priduck-c2b5);
|
||||
}
|
||||
.fg-c3b5 {
|
||||
color: var(--color-c3b5);
|
||||
color: var(--color-priduck-c3b5);
|
||||
}
|
||||
.fg-c4b5 {
|
||||
color: var(--color-c4b5);
|
||||
color: var(--color-priduck-c4b5);
|
||||
}
|
||||
.fg-c5b5 {
|
||||
color: var(--color-c5b5);
|
||||
color: var(--color-priduck-c5b5);
|
||||
}
|
||||
.fg-c6b5 {
|
||||
color: var(--color-c6b5);
|
||||
color: var(--color-priduck-c6b5);
|
||||
}
|
||||
.fg-c7b5 {
|
||||
color: var(--color-c7b5);
|
||||
color: var(--color-priduck-c7b5);
|
||||
}
|
||||
.fg-c8b5 {
|
||||
color: var(--color-c8b5);
|
||||
color: var(--color-priduck-c8b5);
|
||||
}
|
||||
.fg-c9b5 {
|
||||
color: var(--color-c9b5);
|
||||
color: var(--color-priduck-c9b5);
|
||||
}
|
||||
.fg-c0b6 {
|
||||
color: var(--color-c0b6);
|
||||
color: var(--color-priduck-c0b6);
|
||||
}
|
||||
.fg-c1b6 {
|
||||
color: var(--color-c1b6);
|
||||
color: var(--color-priduck-c1b6);
|
||||
}
|
||||
.fg-c2b6 {
|
||||
color: var(--color-c2b6);
|
||||
color: var(--color-priduck-c2b6);
|
||||
}
|
||||
.fg-c3b6 {
|
||||
color: var(--color-c3b6);
|
||||
color: var(--color-priduck-c3b6);
|
||||
}
|
||||
.fg-c4b6 {
|
||||
color: var(--color-c4b6);
|
||||
color: var(--color-priduck-c4b6);
|
||||
}
|
||||
.fg-c5b6 {
|
||||
color: var(--color-c5b6);
|
||||
color: var(--color-priduck-c5b6);
|
||||
}
|
||||
.fg-c6b6 {
|
||||
color: var(--color-c6b6);
|
||||
color: var(--color-priduck-c6b6);
|
||||
}
|
||||
.fg-c7b6 {
|
||||
color: var(--color-c7b6);
|
||||
color: var(--color-priduck-c7b6);
|
||||
}
|
||||
.fg-c8b6 {
|
||||
color: var(--color-c8b6);
|
||||
color: var(--color-priduck-c8b6);
|
||||
}
|
||||
.fg-c9b6 {
|
||||
color: var(--color-c9b6);
|
||||
color: var(--color-priduck-c9b6);
|
||||
}
|
||||
.fg-c0b7 {
|
||||
color: var(--color-c0b7);
|
||||
color: var(--color-priduck-c0b7);
|
||||
}
|
||||
.fg-c1b7 {
|
||||
color: var(--color-c1b7);
|
||||
color: var(--color-priduck-c1b7);
|
||||
}
|
||||
.fg-c2b7 {
|
||||
color: var(--color-c2b7);
|
||||
color: var(--color-priduck-c2b7);
|
||||
}
|
||||
.fg-c3b7 {
|
||||
color: var(--color-c3b7);
|
||||
color: var(--color-priduck-c3b7);
|
||||
}
|
||||
.fg-c4b7 {
|
||||
color: var(--color-c4b7);
|
||||
color: var(--color-priduck-c4b7);
|
||||
}
|
||||
.fg-c5b7 {
|
||||
color: var(--color-c5b7);
|
||||
color: var(--color-priduck-c5b7);
|
||||
}
|
||||
.fg-c6b7 {
|
||||
color: var(--color-c6b7);
|
||||
color: var(--color-priduck-c6b7);
|
||||
}
|
||||
.fg-c7b7 {
|
||||
color: var(--color-c7b7);
|
||||
color: var(--color-priduck-c7b7);
|
||||
}
|
||||
.fg-c8b7 {
|
||||
color: var(--color-c8b7);
|
||||
color: var(--color-priduck-c8b7);
|
||||
}
|
||||
.fg-c9b7 {
|
||||
color: var(--color-c9b7);
|
||||
color: var(--color-priduck-c9b7);
|
||||
}
|
||||
.fg-c0b8 {
|
||||
color: var(--color-c0b8);
|
||||
color: var(--color-priduck-c0b8);
|
||||
}
|
||||
.fg-c1b8 {
|
||||
color: var(--color-c1b8);
|
||||
color: var(--color-priduck-c1b8);
|
||||
}
|
||||
.fg-c2b8 {
|
||||
color: var(--color-c2b8);
|
||||
color: var(--color-priduck-c2b8);
|
||||
}
|
||||
.fg-c3b8 {
|
||||
color: var(--color-c3b8);
|
||||
color: var(--color-priduck-c3b8);
|
||||
}
|
||||
.fg-c4b8 {
|
||||
color: var(--color-c4b8);
|
||||
color: var(--color-priduck-c4b8);
|
||||
}
|
||||
.fg-c5b8 {
|
||||
color: var(--color-c5b8);
|
||||
color: var(--color-priduck-c5b8);
|
||||
}
|
||||
.fg-c6b8 {
|
||||
color: var(--color-c6b8);
|
||||
color: var(--color-priduck-c6b8);
|
||||
}
|
||||
.fg-c7b8 {
|
||||
color: var(--color-c7b8);
|
||||
color: var(--color-priduck-c7b8);
|
||||
}
|
||||
.fg-c8b8 {
|
||||
color: var(--color-c8b8);
|
||||
color: var(--color-priduck-c8b8);
|
||||
}
|
||||
.fg-c9b8 {
|
||||
color: var(--color-c9b8);
|
||||
color: var(--color-priduck-c9b8);
|
||||
}
|
||||
.fg-c0b9 {
|
||||
color: var(--color-c0b9);
|
||||
color: var(--color-priduck-c0b9);
|
||||
}
|
||||
.fg-c1b9 {
|
||||
color: var(--color-c1b9);
|
||||
color: var(--color-priduck-c1b9);
|
||||
}
|
||||
.fg-c2b9 {
|
||||
color: var(--color-c2b9);
|
||||
color: var(--color-priduck-c2b9);
|
||||
}
|
||||
.fg-c3b9 {
|
||||
color: var(--color-c3b9);
|
||||
color: var(--color-priduck-c3b9);
|
||||
}
|
||||
.fg-c4b9 {
|
||||
color: var(--color-c4b9);
|
||||
color: var(--color-priduck-c4b9);
|
||||
}
|
||||
.fg-c5b9 {
|
||||
color: var(--color-c5b9);
|
||||
color: var(--color-priduck-c5b9);
|
||||
}
|
||||
.fg-c6b9 {
|
||||
color: var(--color-c6b9);
|
||||
color: var(--color-priduck-c6b9);
|
||||
}
|
||||
.fg-c7b9 {
|
||||
color: var(--color-c7b9);
|
||||
color: var(--color-priduck-c7b9);
|
||||
}
|
||||
.fg-c8b9 {
|
||||
color: var(--color-c8b9);
|
||||
color: var(--color-priduck-c8b9);
|
||||
}
|
||||
.fg-c9b9 {
|
||||
color: var(--color-c9b9);
|
||||
color: var(--color-priduck-c9b9);
|
||||
}
|
||||
|
||||
.bg-c0b0 {
|
||||
background-color: var(--color-c0b0);
|
||||
background-color: var(--color-priduck-c0b0);
|
||||
}
|
||||
.bg-c1b0 {
|
||||
background-color: var(--color-c1b0);
|
||||
background-color: var(--color-priduck-c1b0);
|
||||
}
|
||||
.bg-c2b0 {
|
||||
background-color: var(--color-c2b0);
|
||||
background-color: var(--color-priduck-c2b0);
|
||||
}
|
||||
.bg-c3b0 {
|
||||
background-color: var(--color-c3b0);
|
||||
background-color: var(--color-priduck-c3b0);
|
||||
}
|
||||
.bg-c4b0 {
|
||||
background-color: var(--color-c4b0);
|
||||
background-color: var(--color-priduck-c4b0);
|
||||
}
|
||||
.bg-c5b0 {
|
||||
background-color: var(--color-c5b0);
|
||||
background-color: var(--color-priduck-c5b0);
|
||||
}
|
||||
.bg-c6b0 {
|
||||
background-color: var(--color-c6b0);
|
||||
background-color: var(--color-priduck-c6b0);
|
||||
}
|
||||
.bg-c7b0 {
|
||||
background-color: var(--color-c7b0);
|
||||
background-color: var(--color-priduck-c7b0);
|
||||
}
|
||||
.bg-c8b0 {
|
||||
background-color: var(--color-c8b0);
|
||||
background-color: var(--color-priduck-c8b0);
|
||||
}
|
||||
.bg-c9b0 {
|
||||
background-color: var(--color-c9b0);
|
||||
background-color: var(--color-priduck-c9b0);
|
||||
}
|
||||
.bg-c0b1 {
|
||||
background-color: var(--color-c0b1);
|
||||
background-color: var(--color-priduck-c0b1);
|
||||
}
|
||||
.bg-c1b1 {
|
||||
background-color: var(--color-c1b1);
|
||||
background-color: var(--color-priduck-c1b1);
|
||||
}
|
||||
.bg-c2b1 {
|
||||
background-color: var(--color-c2b1);
|
||||
background-color: var(--color-priduck-c2b1);
|
||||
}
|
||||
.bg-c3b1 {
|
||||
background-color: var(--color-c3b1);
|
||||
background-color: var(--color-priduck-c3b1);
|
||||
}
|
||||
.bg-c4b1 {
|
||||
background-color: var(--color-c4b1);
|
||||
background-color: var(--color-priduck-c4b1);
|
||||
}
|
||||
.bg-c5b1 {
|
||||
background-color: var(--color-c5b1);
|
||||
background-color: var(--color-priduck-c5b1);
|
||||
}
|
||||
.bg-c6b1 {
|
||||
background-color: var(--color-c6b1);
|
||||
background-color: var(--color-priduck-c6b1);
|
||||
}
|
||||
.bg-c7b1 {
|
||||
background-color: var(--color-c7b1);
|
||||
background-color: var(--color-priduck-c7b1);
|
||||
}
|
||||
.bg-c8b1 {
|
||||
background-color: var(--color-c8b1);
|
||||
background-color: var(--color-priduck-c8b1);
|
||||
}
|
||||
.bg-c9b1 {
|
||||
background-color: var(--color-c9b1);
|
||||
background-color: var(--color-priduck-c9b1);
|
||||
}
|
||||
.bg-c0b2 {
|
||||
background-color: var(--color-c0b2);
|
||||
background-color: var(--color-priduck-c0b2);
|
||||
}
|
||||
.bg-c1b2 {
|
||||
background-color: var(--color-c1b2);
|
||||
background-color: var(--color-priduck-c1b2);
|
||||
}
|
||||
.bg-c2b2 {
|
||||
background-color: var(--color-c2b2);
|
||||
background-color: var(--color-priduck-c2b2);
|
||||
}
|
||||
.bg-c3b2 {
|
||||
background-color: var(--color-c3b2);
|
||||
background-color: var(--color-priduck-c3b2);
|
||||
}
|
||||
.bg-c4b2 {
|
||||
background-color: var(--color-c4b2);
|
||||
background-color: var(--color-priduck-c4b2);
|
||||
}
|
||||
.bg-c5b2 {
|
||||
background-color: var(--color-c5b2);
|
||||
background-color: var(--color-priduck-c5b2);
|
||||
}
|
||||
.bg-c6b2 {
|
||||
background-color: var(--color-c6b2);
|
||||
background-color: var(--color-priduck-c6b2);
|
||||
}
|
||||
.bg-c7b2 {
|
||||
background-color: var(--color-c7b2);
|
||||
background-color: var(--color-priduck-c7b2);
|
||||
}
|
||||
.bg-c8b2 {
|
||||
background-color: var(--color-c8b2);
|
||||
background-color: var(--color-priduck-c8b2);
|
||||
}
|
||||
.bg-c9b2 {
|
||||
background-color: var(--color-c9b2);
|
||||
background-color: var(--color-priduck-c9b2);
|
||||
}
|
||||
.bg-c0b3 {
|
||||
background-color: var(--color-c0b3);
|
||||
background-color: var(--color-priduck-c0b3);
|
||||
}
|
||||
.bg-c1b3 {
|
||||
background-color: var(--color-c1b3);
|
||||
background-color: var(--color-priduck-c1b3);
|
||||
}
|
||||
.bg-c2b3 {
|
||||
background-color: var(--color-c2b3);
|
||||
background-color: var(--color-priduck-c2b3);
|
||||
}
|
||||
.bg-c3b3 {
|
||||
background-color: var(--color-c3b3);
|
||||
background-color: var(--color-priduck-c3b3);
|
||||
}
|
||||
.bg-c4b3 {
|
||||
background-color: var(--color-c4b3);
|
||||
background-color: var(--color-priduck-c4b3);
|
||||
}
|
||||
.bg-c5b3 {
|
||||
background-color: var(--color-c5b3);
|
||||
background-color: var(--color-priduck-c5b3);
|
||||
}
|
||||
.bg-c6b3 {
|
||||
background-color: var(--color-c6b3);
|
||||
background-color: var(--color-priduck-c6b3);
|
||||
}
|
||||
.bg-c7b3 {
|
||||
background-color: var(--color-c7b3);
|
||||
background-color: var(--color-priduck-c7b3);
|
||||
}
|
||||
.bg-c8b3 {
|
||||
background-color: var(--color-c8b3);
|
||||
background-color: var(--color-priduck-c8b3);
|
||||
}
|
||||
.bg-c9b3 {
|
||||
background-color: var(--color-c9b3);
|
||||
background-color: var(--color-priduck-c9b3);
|
||||
}
|
||||
.bg-c0b4 {
|
||||
background-color: var(--color-c0b4);
|
||||
background-color: var(--color-priduck-c0b4);
|
||||
}
|
||||
.bg-c1b4 {
|
||||
background-color: var(--color-c1b4);
|
||||
background-color: var(--color-priduck-c1b4);
|
||||
}
|
||||
.bg-c2b4 {
|
||||
background-color: var(--color-c2b4);
|
||||
background-color: var(--color-priduck-c2b4);
|
||||
}
|
||||
.bg-c3b4 {
|
||||
background-color: var(--color-c3b4);
|
||||
background-color: var(--color-priduck-c3b4);
|
||||
}
|
||||
.bg-c4b4 {
|
||||
background-color: var(--color-c4b4);
|
||||
background-color: var(--color-priduck-c4b4);
|
||||
}
|
||||
.bg-c5b4 {
|
||||
background-color: var(--color-c5b4);
|
||||
background-color: var(--color-priduck-c5b4);
|
||||
}
|
||||
.bg-c6b4 {
|
||||
background-color: var(--color-c6b4);
|
||||
background-color: var(--color-priduck-c6b4);
|
||||
}
|
||||
.bg-c7b4 {
|
||||
background-color: var(--color-c7b4);
|
||||
background-color: var(--color-priduck-c7b4);
|
||||
}
|
||||
.bg-c8b4 {
|
||||
background-color: var(--color-c8b4);
|
||||
background-color: var(--color-priduck-c8b4);
|
||||
}
|
||||
.bg-c9b4 {
|
||||
background-color: var(--color-c9b4);
|
||||
background-color: var(--color-priduck-c9b4);
|
||||
}
|
||||
.bg-c0b5 {
|
||||
background-color: var(--color-c0b5);
|
||||
background-color: var(--color-priduck-c0b5);
|
||||
}
|
||||
.bg-c1b5 {
|
||||
background-color: var(--color-c1b5);
|
||||
background-color: var(--color-priduck-c1b5);
|
||||
}
|
||||
.bg-c2b5 {
|
||||
background-color: var(--color-c2b5);
|
||||
background-color: var(--color-priduck-c2b5);
|
||||
}
|
||||
.bg-c3b5 {
|
||||
background-color: var(--color-c3b5);
|
||||
background-color: var(--color-priduck-c3b5);
|
||||
}
|
||||
.bg-c4b5 {
|
||||
background-color: var(--color-c4b5);
|
||||
background-color: var(--color-priduck-c4b5);
|
||||
}
|
||||
.bg-c5b5 {
|
||||
background-color: var(--color-c5b5);
|
||||
background-color: var(--color-priduck-c5b5);
|
||||
}
|
||||
.bg-c6b5 {
|
||||
background-color: var(--color-c6b5);
|
||||
background-color: var(--color-priduck-c6b5);
|
||||
}
|
||||
.bg-c7b5 {
|
||||
background-color: var(--color-c7b5);
|
||||
background-color: var(--color-priduck-c7b5);
|
||||
}
|
||||
.bg-c8b5 {
|
||||
background-color: var(--color-c8b5);
|
||||
background-color: var(--color-priduck-c8b5);
|
||||
}
|
||||
.bg-c9b5 {
|
||||
background-color: var(--color-c9b5);
|
||||
background-color: var(--color-priduck-c9b5);
|
||||
}
|
||||
.bg-c0b6 {
|
||||
background-color: var(--color-c0b6);
|
||||
background-color: var(--color-priduck-c0b6);
|
||||
}
|
||||
.bg-c1b6 {
|
||||
background-color: var(--color-c1b6);
|
||||
background-color: var(--color-priduck-c1b6);
|
||||
}
|
||||
.bg-c2b6 {
|
||||
background-color: var(--color-c2b6);
|
||||
background-color: var(--color-priduck-c2b6);
|
||||
}
|
||||
.bg-c3b6 {
|
||||
background-color: var(--color-c3b6);
|
||||
background-color: var(--color-priduck-c3b6);
|
||||
}
|
||||
.bg-c4b6 {
|
||||
background-color: var(--color-c4b6);
|
||||
background-color: var(--color-priduck-c4b6);
|
||||
}
|
||||
.bg-c5b6 {
|
||||
background-color: var(--color-c5b6);
|
||||
background-color: var(--color-priduck-c5b6);
|
||||
}
|
||||
.bg-c6b6 {
|
||||
background-color: var(--color-c6b6);
|
||||
background-color: var(--color-priduck-c6b6);
|
||||
}
|
||||
.bg-c7b6 {
|
||||
background-color: var(--color-c7b6);
|
||||
background-color: var(--color-priduck-c7b6);
|
||||
}
|
||||
.bg-c8b6 {
|
||||
background-color: var(--color-c8b6);
|
||||
background-color: var(--color-priduck-c8b6);
|
||||
}
|
||||
.bg-c9b6 {
|
||||
background-color: var(--color-c9b6);
|
||||
background-color: var(--color-priduck-c9b6);
|
||||
}
|
||||
.bg-c0b7 {
|
||||
background-color: var(--color-c0b7);
|
||||
background-color: var(--color-priduck-c0b7);
|
||||
}
|
||||
.bg-c1b7 {
|
||||
background-color: var(--color-c1b7);
|
||||
background-color: var(--color-priduck-c1b7);
|
||||
}
|
||||
.bg-c2b7 {
|
||||
background-color: var(--color-c2b7);
|
||||
background-color: var(--color-priduck-c2b7);
|
||||
}
|
||||
.bg-c3b7 {
|
||||
background-color: var(--color-c3b7);
|
||||
background-color: var(--color-priduck-c3b7);
|
||||
}
|
||||
.bg-c4b7 {
|
||||
background-color: var(--color-c4b7);
|
||||
background-color: var(--color-priduck-c4b7);
|
||||
}
|
||||
.bg-c5b7 {
|
||||
background-color: var(--color-c5b7);
|
||||
background-color: var(--color-priduck-c5b7);
|
||||
}
|
||||
.bg-c6b7 {
|
||||
background-color: var(--color-c6b7);
|
||||
background-color: var(--color-priduck-c6b7);
|
||||
}
|
||||
.bg-c7b7 {
|
||||
background-color: var(--color-c7b7);
|
||||
background-color: var(--color-priduck-c7b7);
|
||||
}
|
||||
.bg-c8b7 {
|
||||
background-color: var(--color-c8b7);
|
||||
background-color: var(--color-priduck-c8b7);
|
||||
}
|
||||
.bg-c9b7 {
|
||||
background-color: var(--color-c9b7);
|
||||
background-color: var(--color-priduck-c9b7);
|
||||
}
|
||||
.bg-c0b8 {
|
||||
background-color: var(--color-c0b8);
|
||||
background-color: var(--color-priduck-c0b8);
|
||||
}
|
||||
.bg-c1b8 {
|
||||
background-color: var(--color-c1b8);
|
||||
background-color: var(--color-priduck-c1b8);
|
||||
}
|
||||
.bg-c2b8 {
|
||||
background-color: var(--color-c2b8);
|
||||
background-color: var(--color-priduck-c2b8);
|
||||
}
|
||||
.bg-c3b8 {
|
||||
background-color: var(--color-c3b8);
|
||||
background-color: var(--color-priduck-c3b8);
|
||||
}
|
||||
.bg-c4b8 {
|
||||
background-color: var(--color-c4b8);
|
||||
background-color: var(--color-priduck-c4b8);
|
||||
}
|
||||
.bg-c5b8 {
|
||||
background-color: var(--color-c5b8);
|
||||
background-color: var(--color-priduck-c5b8);
|
||||
}
|
||||
.bg-c6b8 {
|
||||
background-color: var(--color-c6b8);
|
||||
background-color: var(--color-priduck-c6b8);
|
||||
}
|
||||
.bg-c7b8 {
|
||||
background-color: var(--color-c7b8);
|
||||
background-color: var(--color-priduck-c7b8);
|
||||
}
|
||||
.bg-c8b8 {
|
||||
background-color: var(--color-c8b8);
|
||||
background-color: var(--color-priduck-c8b8);
|
||||
}
|
||||
.bg-c9b8 {
|
||||
background-color: var(--color-c9b8);
|
||||
background-color: var(--color-priduck-c9b8);
|
||||
}
|
||||
.bg-c0b9 {
|
||||
background-color: var(--color-c0b9);
|
||||
background-color: var(--color-priduck-c0b9);
|
||||
}
|
||||
.bg-c1b9 {
|
||||
background-color: var(--color-c1b9);
|
||||
background-color: var(--color-priduck-c1b9);
|
||||
}
|
||||
.bg-c2b9 {
|
||||
background-color: var(--color-c2b9);
|
||||
background-color: var(--color-priduck-c2b9);
|
||||
}
|
||||
.bg-c3b9 {
|
||||
background-color: var(--color-c3b9);
|
||||
background-color: var(--color-priduck-c3b9);
|
||||
}
|
||||
.bg-c4b9 {
|
||||
background-color: var(--color-c4b9);
|
||||
background-color: var(--color-priduck-c4b9);
|
||||
}
|
||||
.bg-c5b9 {
|
||||
background-color: var(--color-c5b9);
|
||||
background-color: var(--color-priduck-c5b9);
|
||||
}
|
||||
.bg-c6b9 {
|
||||
background-color: var(--color-c6b9);
|
||||
background-color: var(--color-priduck-c6b9);
|
||||
}
|
||||
.bg-c7b9 {
|
||||
background-color: var(--color-c7b9);
|
||||
background-color: var(--color-priduck-c7b9);
|
||||
}
|
||||
.bg-c8b9 {
|
||||
background-color: var(--color-c8b9);
|
||||
background-color: var(--color-priduck-c8b9);
|
||||
}
|
||||
.bg-c9b9 {
|
||||
background-color: var(--color-c9b9);
|
||||
background-color: var(--color-priduck-c9b9);
|
||||
}
|
||||
|
||||
.controls {
|
||||
|
|
@ -1105,7 +1105,10 @@
|
|||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
slider.oninput = function () {
|
||||
document.documentElement.style.setProperty("--color-hue", this.value);
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-priduck-hue",
|
||||
this.value,
|
||||
);
|
||||
output.innerHTML = this.value;
|
||||
};
|
||||
|
||||
2
examples/style.css
Normal file
2
examples/style.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import url("../dist/colors.css");
|
||||
@import url("../dist/theme.css");
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import url("./colors.css");
|
||||
@import url("./theme.css");
|
||||
Loading…
Reference in a new issue