refactor: expanding on the examples
This commit is contained in:
parent
8e1c20bf04
commit
c4b5c02417
686
examples/example.css
Normal file
686
examples/example.css
Normal file
|
@ -0,0 +1,686 @@
|
||||||
|
:root {
|
||||||
|
--color-priduck-hue: 180;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
|
||||||
|
.slidecontainer {
|
||||||
|
width: 100%; /* Width of the outside container */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The slider itself */
|
||||||
|
.slider {
|
||||||
|
-webkit-appearance: none; /* Override default CSS styles */
|
||||||
|
appearance: none;
|
||||||
|
width: 100%; /* Full-width */
|
||||||
|
height: 25px; /* Specified height */
|
||||||
|
background: #d3d3d3; /* Grey background */
|
||||||
|
outline: none; /* Remove outline */
|
||||||
|
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
||||||
|
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mouse-over effects */
|
||||||
|
.slider:hover {
|
||||||
|
opacity: 1; /* Fully shown on mouse-over */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
||||||
|
.slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none; /* Override default look */
|
||||||
|
appearance: none;
|
||||||
|
width: 25px; /* Set a specific slider handle width */
|
||||||
|
height: 25px; /* Slider handle height */
|
||||||
|
background: #04aa6d; /* Green background */
|
||||||
|
cursor: pointer; /* Cursor on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
|
width: 25px; /* Set a specific slider handle width */
|
||||||
|
height: 25px; /* Slider handle height */
|
||||||
|
background: #04aa6d; /* Green background */
|
||||||
|
cursor: pointer; /* Cursor on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
#hue {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hue-box {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 5em;
|
||||||
|
min-height: 1em;
|
||||||
|
border: 1px solid black;
|
||||||
|
background-color: lch(50% 100 var(--color-priduck-hue));
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-lch,
|
||||||
|
.color-rgb {
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fg-dark {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fg-light {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fg-c0b0 {
|
||||||
|
color: var(--color-priduck-c0b0);
|
||||||
|
}
|
||||||
|
.fg-c1b0 {
|
||||||
|
color: var(--color-priduck-c1b0);
|
||||||
|
}
|
||||||
|
.fg-c2b0 {
|
||||||
|
color: var(--color-priduck-c2b0);
|
||||||
|
}
|
||||||
|
.fg-c3b0 {
|
||||||
|
color: var(--color-priduck-c3b0);
|
||||||
|
}
|
||||||
|
.fg-c4b0 {
|
||||||
|
color: var(--color-priduck-c4b0);
|
||||||
|
}
|
||||||
|
.fg-c5b0 {
|
||||||
|
color: var(--color-priduck-c5b0);
|
||||||
|
}
|
||||||
|
.fg-c6b0 {
|
||||||
|
color: var(--color-priduck-c6b0);
|
||||||
|
}
|
||||||
|
.fg-c7b0 {
|
||||||
|
color: var(--color-priduck-c7b0);
|
||||||
|
}
|
||||||
|
.fg-c8b0 {
|
||||||
|
color: var(--color-priduck-c8b0);
|
||||||
|
}
|
||||||
|
.fg-c9b0 {
|
||||||
|
color: var(--color-priduck-c9b0);
|
||||||
|
}
|
||||||
|
.fg-c0b1 {
|
||||||
|
color: var(--color-priduck-c0b1);
|
||||||
|
}
|
||||||
|
.fg-c1b1 {
|
||||||
|
color: var(--color-priduck-c1b1);
|
||||||
|
}
|
||||||
|
.fg-c2b1 {
|
||||||
|
color: var(--color-priduck-c2b1);
|
||||||
|
}
|
||||||
|
.fg-c3b1 {
|
||||||
|
color: var(--color-priduck-c3b1);
|
||||||
|
}
|
||||||
|
.fg-c4b1 {
|
||||||
|
color: var(--color-priduck-c4b1);
|
||||||
|
}
|
||||||
|
.fg-c5b1 {
|
||||||
|
color: var(--color-priduck-c5b1);
|
||||||
|
}
|
||||||
|
.fg-c6b1 {
|
||||||
|
color: var(--color-priduck-c6b1);
|
||||||
|
}
|
||||||
|
.fg-c7b1 {
|
||||||
|
color: var(--color-priduck-c7b1);
|
||||||
|
}
|
||||||
|
.fg-c8b1 {
|
||||||
|
color: var(--color-priduck-c8b1);
|
||||||
|
}
|
||||||
|
.fg-c9b1 {
|
||||||
|
color: var(--color-priduck-c9b1);
|
||||||
|
}
|
||||||
|
.fg-c0b2 {
|
||||||
|
color: var(--color-priduck-c0b2);
|
||||||
|
}
|
||||||
|
.fg-c1b2 {
|
||||||
|
color: var(--color-priduck-c1b2);
|
||||||
|
}
|
||||||
|
.fg-c2b2 {
|
||||||
|
color: var(--color-priduck-c2b2);
|
||||||
|
}
|
||||||
|
.fg-c3b2 {
|
||||||
|
color: var(--color-priduck-c3b2);
|
||||||
|
}
|
||||||
|
.fg-c4b2 {
|
||||||
|
color: var(--color-priduck-c4b2);
|
||||||
|
}
|
||||||
|
.fg-c5b2 {
|
||||||
|
color: var(--color-priduck-c5b2);
|
||||||
|
}
|
||||||
|
.fg-c6b2 {
|
||||||
|
color: var(--color-priduck-c6b2);
|
||||||
|
}
|
||||||
|
.fg-c7b2 {
|
||||||
|
color: var(--color-priduck-c7b2);
|
||||||
|
}
|
||||||
|
.fg-c8b2 {
|
||||||
|
color: var(--color-priduck-c8b2);
|
||||||
|
}
|
||||||
|
.fg-c9b2 {
|
||||||
|
color: var(--color-priduck-c9b2);
|
||||||
|
}
|
||||||
|
.fg-c0b3 {
|
||||||
|
color: var(--color-priduck-c0b3);
|
||||||
|
}
|
||||||
|
.fg-c1b3 {
|
||||||
|
color: var(--color-priduck-c1b3);
|
||||||
|
}
|
||||||
|
.fg-c2b3 {
|
||||||
|
color: var(--color-priduck-c2b3);
|
||||||
|
}
|
||||||
|
.fg-c3b3 {
|
||||||
|
color: var(--color-priduck-c3b3);
|
||||||
|
}
|
||||||
|
.fg-c4b3 {
|
||||||
|
color: var(--color-priduck-c4b3);
|
||||||
|
}
|
||||||
|
.fg-c5b3 {
|
||||||
|
color: var(--color-priduck-c5b3);
|
||||||
|
}
|
||||||
|
.fg-c6b3 {
|
||||||
|
color: var(--color-priduck-c6b3);
|
||||||
|
}
|
||||||
|
.fg-c7b3 {
|
||||||
|
color: var(--color-priduck-c7b3);
|
||||||
|
}
|
||||||
|
.fg-c8b3 {
|
||||||
|
color: var(--color-priduck-c8b3);
|
||||||
|
}
|
||||||
|
.fg-c9b3 {
|
||||||
|
color: var(--color-priduck-c9b3);
|
||||||
|
}
|
||||||
|
.fg-c0b4 {
|
||||||
|
color: var(--color-priduck-c0b4);
|
||||||
|
}
|
||||||
|
.fg-c1b4 {
|
||||||
|
color: var(--color-priduck-c1b4);
|
||||||
|
}
|
||||||
|
.fg-c2b4 {
|
||||||
|
color: var(--color-priduck-c2b4);
|
||||||
|
}
|
||||||
|
.fg-c3b4 {
|
||||||
|
color: var(--color-priduck-c3b4);
|
||||||
|
}
|
||||||
|
.fg-c4b4 {
|
||||||
|
color: var(--color-priduck-c4b4);
|
||||||
|
}
|
||||||
|
.fg-c5b4 {
|
||||||
|
color: var(--color-priduck-c5b4);
|
||||||
|
}
|
||||||
|
.fg-c6b4 {
|
||||||
|
color: var(--color-priduck-c6b4);
|
||||||
|
}
|
||||||
|
.fg-c7b4 {
|
||||||
|
color: var(--color-priduck-c7b4);
|
||||||
|
}
|
||||||
|
.fg-c8b4 {
|
||||||
|
color: var(--color-priduck-c8b4);
|
||||||
|
}
|
||||||
|
.fg-c9b4 {
|
||||||
|
color: var(--color-priduck-c9b4);
|
||||||
|
}
|
||||||
|
.fg-c0b5 {
|
||||||
|
color: var(--color-priduck-c0b5);
|
||||||
|
}
|
||||||
|
.fg-c1b5 {
|
||||||
|
color: var(--color-priduck-c1b5);
|
||||||
|
}
|
||||||
|
.fg-c2b5 {
|
||||||
|
color: var(--color-priduck-c2b5);
|
||||||
|
}
|
||||||
|
.fg-c3b5 {
|
||||||
|
color: var(--color-priduck-c3b5);
|
||||||
|
}
|
||||||
|
.fg-c4b5 {
|
||||||
|
color: var(--color-priduck-c4b5);
|
||||||
|
}
|
||||||
|
.fg-c5b5 {
|
||||||
|
color: var(--color-priduck-c5b5);
|
||||||
|
}
|
||||||
|
.fg-c6b5 {
|
||||||
|
color: var(--color-priduck-c6b5);
|
||||||
|
}
|
||||||
|
.fg-c7b5 {
|
||||||
|
color: var(--color-priduck-c7b5);
|
||||||
|
}
|
||||||
|
.fg-c8b5 {
|
||||||
|
color: var(--color-priduck-c8b5);
|
||||||
|
}
|
||||||
|
.fg-c9b5 {
|
||||||
|
color: var(--color-priduck-c9b5);
|
||||||
|
}
|
||||||
|
.fg-c0b6 {
|
||||||
|
color: var(--color-priduck-c0b6);
|
||||||
|
}
|
||||||
|
.fg-c1b6 {
|
||||||
|
color: var(--color-priduck-c1b6);
|
||||||
|
}
|
||||||
|
.fg-c2b6 {
|
||||||
|
color: var(--color-priduck-c2b6);
|
||||||
|
}
|
||||||
|
.fg-c3b6 {
|
||||||
|
color: var(--color-priduck-c3b6);
|
||||||
|
}
|
||||||
|
.fg-c4b6 {
|
||||||
|
color: var(--color-priduck-c4b6);
|
||||||
|
}
|
||||||
|
.fg-c5b6 {
|
||||||
|
color: var(--color-priduck-c5b6);
|
||||||
|
}
|
||||||
|
.fg-c6b6 {
|
||||||
|
color: var(--color-priduck-c6b6);
|
||||||
|
}
|
||||||
|
.fg-c7b6 {
|
||||||
|
color: var(--color-priduck-c7b6);
|
||||||
|
}
|
||||||
|
.fg-c8b6 {
|
||||||
|
color: var(--color-priduck-c8b6);
|
||||||
|
}
|
||||||
|
.fg-c9b6 {
|
||||||
|
color: var(--color-priduck-c9b6);
|
||||||
|
}
|
||||||
|
.fg-c0b7 {
|
||||||
|
color: var(--color-priduck-c0b7);
|
||||||
|
}
|
||||||
|
.fg-c1b7 {
|
||||||
|
color: var(--color-priduck-c1b7);
|
||||||
|
}
|
||||||
|
.fg-c2b7 {
|
||||||
|
color: var(--color-priduck-c2b7);
|
||||||
|
}
|
||||||
|
.fg-c3b7 {
|
||||||
|
color: var(--color-priduck-c3b7);
|
||||||
|
}
|
||||||
|
.fg-c4b7 {
|
||||||
|
color: var(--color-priduck-c4b7);
|
||||||
|
}
|
||||||
|
.fg-c5b7 {
|
||||||
|
color: var(--color-priduck-c5b7);
|
||||||
|
}
|
||||||
|
.fg-c6b7 {
|
||||||
|
color: var(--color-priduck-c6b7);
|
||||||
|
}
|
||||||
|
.fg-c7b7 {
|
||||||
|
color: var(--color-priduck-c7b7);
|
||||||
|
}
|
||||||
|
.fg-c8b7 {
|
||||||
|
color: var(--color-priduck-c8b7);
|
||||||
|
}
|
||||||
|
.fg-c9b7 {
|
||||||
|
color: var(--color-priduck-c9b7);
|
||||||
|
}
|
||||||
|
.fg-c0b8 {
|
||||||
|
color: var(--color-priduck-c0b8);
|
||||||
|
}
|
||||||
|
.fg-c1b8 {
|
||||||
|
color: var(--color-priduck-c1b8);
|
||||||
|
}
|
||||||
|
.fg-c2b8 {
|
||||||
|
color: var(--color-priduck-c2b8);
|
||||||
|
}
|
||||||
|
.fg-c3b8 {
|
||||||
|
color: var(--color-priduck-c3b8);
|
||||||
|
}
|
||||||
|
.fg-c4b8 {
|
||||||
|
color: var(--color-priduck-c4b8);
|
||||||
|
}
|
||||||
|
.fg-c5b8 {
|
||||||
|
color: var(--color-priduck-c5b8);
|
||||||
|
}
|
||||||
|
.fg-c6b8 {
|
||||||
|
color: var(--color-priduck-c6b8);
|
||||||
|
}
|
||||||
|
.fg-c7b8 {
|
||||||
|
color: var(--color-priduck-c7b8);
|
||||||
|
}
|
||||||
|
.fg-c8b8 {
|
||||||
|
color: var(--color-priduck-c8b8);
|
||||||
|
}
|
||||||
|
.fg-c9b8 {
|
||||||
|
color: var(--color-priduck-c9b8);
|
||||||
|
}
|
||||||
|
.fg-c0b9 {
|
||||||
|
color: var(--color-priduck-c0b9);
|
||||||
|
}
|
||||||
|
.fg-c1b9 {
|
||||||
|
color: var(--color-priduck-c1b9);
|
||||||
|
}
|
||||||
|
.fg-c2b9 {
|
||||||
|
color: var(--color-priduck-c2b9);
|
||||||
|
}
|
||||||
|
.fg-c3b9 {
|
||||||
|
color: var(--color-priduck-c3b9);
|
||||||
|
}
|
||||||
|
.fg-c4b9 {
|
||||||
|
color: var(--color-priduck-c4b9);
|
||||||
|
}
|
||||||
|
.fg-c5b9 {
|
||||||
|
color: var(--color-priduck-c5b9);
|
||||||
|
}
|
||||||
|
.fg-c6b9 {
|
||||||
|
color: var(--color-priduck-c6b9);
|
||||||
|
}
|
||||||
|
.fg-c7b9 {
|
||||||
|
color: var(--color-priduck-c7b9);
|
||||||
|
}
|
||||||
|
.fg-c8b9 {
|
||||||
|
color: var(--color-priduck-c8b9);
|
||||||
|
}
|
||||||
|
.fg-c9b9 {
|
||||||
|
color: var(--color-priduck-c9b9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-c0b0 {
|
||||||
|
background-color: var(--color-priduck-c0b0);
|
||||||
|
}
|
||||||
|
.bg-c1b0 {
|
||||||
|
background-color: var(--color-priduck-c1b0);
|
||||||
|
}
|
||||||
|
.bg-c2b0 {
|
||||||
|
background-color: var(--color-priduck-c2b0);
|
||||||
|
}
|
||||||
|
.bg-c3b0 {
|
||||||
|
background-color: var(--color-priduck-c3b0);
|
||||||
|
}
|
||||||
|
.bg-c4b0 {
|
||||||
|
background-color: var(--color-priduck-c4b0);
|
||||||
|
}
|
||||||
|
.bg-c5b0 {
|
||||||
|
background-color: var(--color-priduck-c5b0);
|
||||||
|
}
|
||||||
|
.bg-c6b0 {
|
||||||
|
background-color: var(--color-priduck-c6b0);
|
||||||
|
}
|
||||||
|
.bg-c7b0 {
|
||||||
|
background-color: var(--color-priduck-c7b0);
|
||||||
|
}
|
||||||
|
.bg-c8b0 {
|
||||||
|
background-color: var(--color-priduck-c8b0);
|
||||||
|
}
|
||||||
|
.bg-c9b0 {
|
||||||
|
background-color: var(--color-priduck-c9b0);
|
||||||
|
}
|
||||||
|
.bg-c0b1 {
|
||||||
|
background-color: var(--color-priduck-c0b1);
|
||||||
|
}
|
||||||
|
.bg-c1b1 {
|
||||||
|
background-color: var(--color-priduck-c1b1);
|
||||||
|
}
|
||||||
|
.bg-c2b1 {
|
||||||
|
background-color: var(--color-priduck-c2b1);
|
||||||
|
}
|
||||||
|
.bg-c3b1 {
|
||||||
|
background-color: var(--color-priduck-c3b1);
|
||||||
|
}
|
||||||
|
.bg-c4b1 {
|
||||||
|
background-color: var(--color-priduck-c4b1);
|
||||||
|
}
|
||||||
|
.bg-c5b1 {
|
||||||
|
background-color: var(--color-priduck-c5b1);
|
||||||
|
}
|
||||||
|
.bg-c6b1 {
|
||||||
|
background-color: var(--color-priduck-c6b1);
|
||||||
|
}
|
||||||
|
.bg-c7b1 {
|
||||||
|
background-color: var(--color-priduck-c7b1);
|
||||||
|
}
|
||||||
|
.bg-c8b1 {
|
||||||
|
background-color: var(--color-priduck-c8b1);
|
||||||
|
}
|
||||||
|
.bg-c9b1 {
|
||||||
|
background-color: var(--color-priduck-c9b1);
|
||||||
|
}
|
||||||
|
.bg-c0b2 {
|
||||||
|
background-color: var(--color-priduck-c0b2);
|
||||||
|
}
|
||||||
|
.bg-c1b2 {
|
||||||
|
background-color: var(--color-priduck-c1b2);
|
||||||
|
}
|
||||||
|
.bg-c2b2 {
|
||||||
|
background-color: var(--color-priduck-c2b2);
|
||||||
|
}
|
||||||
|
.bg-c3b2 {
|
||||||
|
background-color: var(--color-priduck-c3b2);
|
||||||
|
}
|
||||||
|
.bg-c4b2 {
|
||||||
|
background-color: var(--color-priduck-c4b2);
|
||||||
|
}
|
||||||
|
.bg-c5b2 {
|
||||||
|
background-color: var(--color-priduck-c5b2);
|
||||||
|
}
|
||||||
|
.bg-c6b2 {
|
||||||
|
background-color: var(--color-priduck-c6b2);
|
||||||
|
}
|
||||||
|
.bg-c7b2 {
|
||||||
|
background-color: var(--color-priduck-c7b2);
|
||||||
|
}
|
||||||
|
.bg-c8b2 {
|
||||||
|
background-color: var(--color-priduck-c8b2);
|
||||||
|
}
|
||||||
|
.bg-c9b2 {
|
||||||
|
background-color: var(--color-priduck-c9b2);
|
||||||
|
}
|
||||||
|
.bg-c0b3 {
|
||||||
|
background-color: var(--color-priduck-c0b3);
|
||||||
|
}
|
||||||
|
.bg-c1b3 {
|
||||||
|
background-color: var(--color-priduck-c1b3);
|
||||||
|
}
|
||||||
|
.bg-c2b3 {
|
||||||
|
background-color: var(--color-priduck-c2b3);
|
||||||
|
}
|
||||||
|
.bg-c3b3 {
|
||||||
|
background-color: var(--color-priduck-c3b3);
|
||||||
|
}
|
||||||
|
.bg-c4b3 {
|
||||||
|
background-color: var(--color-priduck-c4b3);
|
||||||
|
}
|
||||||
|
.bg-c5b3 {
|
||||||
|
background-color: var(--color-priduck-c5b3);
|
||||||
|
}
|
||||||
|
.bg-c6b3 {
|
||||||
|
background-color: var(--color-priduck-c6b3);
|
||||||
|
}
|
||||||
|
.bg-c7b3 {
|
||||||
|
background-color: var(--color-priduck-c7b3);
|
||||||
|
}
|
||||||
|
.bg-c8b3 {
|
||||||
|
background-color: var(--color-priduck-c8b3);
|
||||||
|
}
|
||||||
|
.bg-c9b3 {
|
||||||
|
background-color: var(--color-priduck-c9b3);
|
||||||
|
}
|
||||||
|
.bg-c0b4 {
|
||||||
|
background-color: var(--color-priduck-c0b4);
|
||||||
|
}
|
||||||
|
.bg-c1b4 {
|
||||||
|
background-color: var(--color-priduck-c1b4);
|
||||||
|
}
|
||||||
|
.bg-c2b4 {
|
||||||
|
background-color: var(--color-priduck-c2b4);
|
||||||
|
}
|
||||||
|
.bg-c3b4 {
|
||||||
|
background-color: var(--color-priduck-c3b4);
|
||||||
|
}
|
||||||
|
.bg-c4b4 {
|
||||||
|
background-color: var(--color-priduck-c4b4);
|
||||||
|
}
|
||||||
|
.bg-c5b4 {
|
||||||
|
background-color: var(--color-priduck-c5b4);
|
||||||
|
}
|
||||||
|
.bg-c6b4 {
|
||||||
|
background-color: var(--color-priduck-c6b4);
|
||||||
|
}
|
||||||
|
.bg-c7b4 {
|
||||||
|
background-color: var(--color-priduck-c7b4);
|
||||||
|
}
|
||||||
|
.bg-c8b4 {
|
||||||
|
background-color: var(--color-priduck-c8b4);
|
||||||
|
}
|
||||||
|
.bg-c9b4 {
|
||||||
|
background-color: var(--color-priduck-c9b4);
|
||||||
|
}
|
||||||
|
.bg-c0b5 {
|
||||||
|
background-color: var(--color-priduck-c0b5);
|
||||||
|
}
|
||||||
|
.bg-c1b5 {
|
||||||
|
background-color: var(--color-priduck-c1b5);
|
||||||
|
}
|
||||||
|
.bg-c2b5 {
|
||||||
|
background-color: var(--color-priduck-c2b5);
|
||||||
|
}
|
||||||
|
.bg-c3b5 {
|
||||||
|
background-color: var(--color-priduck-c3b5);
|
||||||
|
}
|
||||||
|
.bg-c4b5 {
|
||||||
|
background-color: var(--color-priduck-c4b5);
|
||||||
|
}
|
||||||
|
.bg-c5b5 {
|
||||||
|
background-color: var(--color-priduck-c5b5);
|
||||||
|
}
|
||||||
|
.bg-c6b5 {
|
||||||
|
background-color: var(--color-priduck-c6b5);
|
||||||
|
}
|
||||||
|
.bg-c7b5 {
|
||||||
|
background-color: var(--color-priduck-c7b5);
|
||||||
|
}
|
||||||
|
.bg-c8b5 {
|
||||||
|
background-color: var(--color-priduck-c8b5);
|
||||||
|
}
|
||||||
|
.bg-c9b5 {
|
||||||
|
background-color: var(--color-priduck-c9b5);
|
||||||
|
}
|
||||||
|
.bg-c0b6 {
|
||||||
|
background-color: var(--color-priduck-c0b6);
|
||||||
|
}
|
||||||
|
.bg-c1b6 {
|
||||||
|
background-color: var(--color-priduck-c1b6);
|
||||||
|
}
|
||||||
|
.bg-c2b6 {
|
||||||
|
background-color: var(--color-priduck-c2b6);
|
||||||
|
}
|
||||||
|
.bg-c3b6 {
|
||||||
|
background-color: var(--color-priduck-c3b6);
|
||||||
|
}
|
||||||
|
.bg-c4b6 {
|
||||||
|
background-color: var(--color-priduck-c4b6);
|
||||||
|
}
|
||||||
|
.bg-c5b6 {
|
||||||
|
background-color: var(--color-priduck-c5b6);
|
||||||
|
}
|
||||||
|
.bg-c6b6 {
|
||||||
|
background-color: var(--color-priduck-c6b6);
|
||||||
|
}
|
||||||
|
.bg-c7b6 {
|
||||||
|
background-color: var(--color-priduck-c7b6);
|
||||||
|
}
|
||||||
|
.bg-c8b6 {
|
||||||
|
background-color: var(--color-priduck-c8b6);
|
||||||
|
}
|
||||||
|
.bg-c9b6 {
|
||||||
|
background-color: var(--color-priduck-c9b6);
|
||||||
|
}
|
||||||
|
.bg-c0b7 {
|
||||||
|
background-color: var(--color-priduck-c0b7);
|
||||||
|
}
|
||||||
|
.bg-c1b7 {
|
||||||
|
background-color: var(--color-priduck-c1b7);
|
||||||
|
}
|
||||||
|
.bg-c2b7 {
|
||||||
|
background-color: var(--color-priduck-c2b7);
|
||||||
|
}
|
||||||
|
.bg-c3b7 {
|
||||||
|
background-color: var(--color-priduck-c3b7);
|
||||||
|
}
|
||||||
|
.bg-c4b7 {
|
||||||
|
background-color: var(--color-priduck-c4b7);
|
||||||
|
}
|
||||||
|
.bg-c5b7 {
|
||||||
|
background-color: var(--color-priduck-c5b7);
|
||||||
|
}
|
||||||
|
.bg-c6b7 {
|
||||||
|
background-color: var(--color-priduck-c6b7);
|
||||||
|
}
|
||||||
|
.bg-c7b7 {
|
||||||
|
background-color: var(--color-priduck-c7b7);
|
||||||
|
}
|
||||||
|
.bg-c8b7 {
|
||||||
|
background-color: var(--color-priduck-c8b7);
|
||||||
|
}
|
||||||
|
.bg-c9b7 {
|
||||||
|
background-color: var(--color-priduck-c9b7);
|
||||||
|
}
|
||||||
|
.bg-c0b8 {
|
||||||
|
background-color: var(--color-priduck-c0b8);
|
||||||
|
}
|
||||||
|
.bg-c1b8 {
|
||||||
|
background-color: var(--color-priduck-c1b8);
|
||||||
|
}
|
||||||
|
.bg-c2b8 {
|
||||||
|
background-color: var(--color-priduck-c2b8);
|
||||||
|
}
|
||||||
|
.bg-c3b8 {
|
||||||
|
background-color: var(--color-priduck-c3b8);
|
||||||
|
}
|
||||||
|
.bg-c4b8 {
|
||||||
|
background-color: var(--color-priduck-c4b8);
|
||||||
|
}
|
||||||
|
.bg-c5b8 {
|
||||||
|
background-color: var(--color-priduck-c5b8);
|
||||||
|
}
|
||||||
|
.bg-c6b8 {
|
||||||
|
background-color: var(--color-priduck-c6b8);
|
||||||
|
}
|
||||||
|
.bg-c7b8 {
|
||||||
|
background-color: var(--color-priduck-c7b8);
|
||||||
|
}
|
||||||
|
.bg-c8b8 {
|
||||||
|
background-color: var(--color-priduck-c8b8);
|
||||||
|
}
|
||||||
|
.bg-c9b8 {
|
||||||
|
background-color: var(--color-priduck-c9b8);
|
||||||
|
}
|
||||||
|
.bg-c0b9 {
|
||||||
|
background-color: var(--color-priduck-c0b9);
|
||||||
|
}
|
||||||
|
.bg-c1b9 {
|
||||||
|
background-color: var(--color-priduck-c1b9);
|
||||||
|
}
|
||||||
|
.bg-c2b9 {
|
||||||
|
background-color: var(--color-priduck-c2b9);
|
||||||
|
}
|
||||||
|
.bg-c3b9 {
|
||||||
|
background-color: var(--color-priduck-c3b9);
|
||||||
|
}
|
||||||
|
.bg-c4b9 {
|
||||||
|
background-color: var(--color-priduck-c4b9);
|
||||||
|
}
|
||||||
|
.bg-c5b9 {
|
||||||
|
background-color: var(--color-priduck-c5b9);
|
||||||
|
}
|
||||||
|
.bg-c6b9 {
|
||||||
|
background-color: var(--color-priduck-c6b9);
|
||||||
|
}
|
||||||
|
.bg-c7b9 {
|
||||||
|
background-color: var(--color-priduck-c7b9);
|
||||||
|
}
|
||||||
|
.bg-c8b9 {
|
||||||
|
background-color: var(--color-priduck-c8b9);
|
||||||
|
}
|
||||||
|
.bg-c9b9 {
|
||||||
|
background-color: var(--color-priduck-c9b9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
grid-column-gap: 1em;
|
||||||
|
}
|
144
examples/example.js
Normal file
144
examples/example.js
Normal file
|
@ -0,0 +1,144 @@
|
||||||
|
// Set up the hue slider.
|
||||||
|
const slider = document.getElementById("hue-selector");
|
||||||
|
const output = document.getElementById("hue");
|
||||||
|
const box = document.getElementById("hue-box");
|
||||||
|
|
||||||
|
output.innerHTML = slider.value; // Display the default slider value
|
||||||
|
|
||||||
|
// If we have a query parameter, select that.
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const hueParam = urlParams.get("hue");
|
||||||
|
|
||||||
|
if (hueParam) {
|
||||||
|
window.setTimeout(() => setHue(hueParam));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the current slider value (each time you drag the slider handle)
|
||||||
|
slider.oninput = function () {
|
||||||
|
setHue(this.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.setTimeout(() => update(), 250);
|
||||||
|
|
||||||
|
// Color Theme
|
||||||
|
var autoColorTheme = document.getElementById("auto-color-scheme");
|
||||||
|
var lightColorTheme = document.getElementById("light-color-scheme");
|
||||||
|
var darkColorTheme = document.getElementById("dark-color-scheme");
|
||||||
|
|
||||||
|
autoColorTheme.onclick = function () {
|
||||||
|
document.documentElement.removeAttribute("data-prefers-color-scheme");
|
||||||
|
};
|
||||||
|
|
||||||
|
lightColorTheme.onclick = function () {
|
||||||
|
document.documentElement.setAttribute("data-prefers-color-scheme", "light");
|
||||||
|
};
|
||||||
|
|
||||||
|
darkColorTheme.onclick = function () {
|
||||||
|
document.documentElement.setAttribute("data-prefers-color-scheme", "dark");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Prefers Contrast
|
||||||
|
var autoContrast = document.getElementById("auto-contrast-selector");
|
||||||
|
var moreContrast = document.getElementById("more-contrast-selector");
|
||||||
|
var lessContrast = document.getElementById("less-contrast-selector");
|
||||||
|
|
||||||
|
autoContrast.onclick = function () {
|
||||||
|
document.documentElement.removeAttribute("data-prefers-contrast");
|
||||||
|
};
|
||||||
|
|
||||||
|
moreContrast.onclick = function () {
|
||||||
|
document.documentElement.setAttribute("data-prefers-contrast", "more");
|
||||||
|
};
|
||||||
|
|
||||||
|
lessContrast.onclick = function () {
|
||||||
|
document.documentElement.setAttribute("data-prefers-contrast", "less");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Translating colors. We use a canvas to paint the color and then get the
|
||||||
|
// RGB from there for programs that need it (Inkscape and Gimp).
|
||||||
|
//
|
||||||
|
// https://stackoverflow.com/a/76469049
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
|
||||||
|
canvas.width = canvas.height = 1;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||||||
|
|
||||||
|
function getRgb(style) {
|
||||||
|
ctx.fillStyle = style;
|
||||||
|
ctx.fillRect(0, 0, 1, 1);
|
||||||
|
|
||||||
|
const colors = ctx.getImageData(0, 0, 1, 1).data;
|
||||||
|
const r = colors[0].toString(16).padStart(2, "0").toLowerCase();
|
||||||
|
const g = colors[1].toString(16).padStart(2, "0").toLowerCase();
|
||||||
|
const b = colors[2].toString(16).padStart(2, "0").toLowerCase();
|
||||||
|
const channels = [colors[0], colors[1], colors[2]];
|
||||||
|
|
||||||
|
return [channels.join(" "), `#${r}${g}${b}`];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Implements a simple debounce function.
|
||||||
|
*
|
||||||
|
* @param func
|
||||||
|
* @param {number} timeout
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
function debounce(func, timeout = 300) {
|
||||||
|
let timer;
|
||||||
|
|
||||||
|
return (...args) => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
func.apply(this, args);
|
||||||
|
}, timeout);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Used to avoid hammering the CPU while we calculate colors.
|
||||||
|
const update = debounce(_update);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets the hue slider to the given color.
|
||||||
|
*
|
||||||
|
* @param {string} hue
|
||||||
|
*/
|
||||||
|
function setHue(hue) {
|
||||||
|
// Set the hue on the screen.
|
||||||
|
console.log("setting hue", hue);
|
||||||
|
document.documentElement.style.setProperty("--color-priduck-hue", hue);
|
||||||
|
output.innerHTML = hue;
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates all of the boxes and copy icons.
|
||||||
|
*/
|
||||||
|
function _update() {
|
||||||
|
// Set the history URL.
|
||||||
|
console.log("setting url");
|
||||||
|
const url = new URL(location);
|
||||||
|
const hue = output.innerHTML;
|
||||||
|
url.searchParams.set("hue", hue);
|
||||||
|
history.pushState({}, "", url);
|
||||||
|
|
||||||
|
// Update the controls.
|
||||||
|
const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||||
|
for (const c of range) {
|
||||||
|
for (const b of range) {
|
||||||
|
const id = `c${c}b${b}`;
|
||||||
|
const cb = document.getElementById(id);
|
||||||
|
const style = window.getComputedStyle(cb, null);
|
||||||
|
const lch = style["background-color"];
|
||||||
|
const [colors, rgb] = getRgb(lch);
|
||||||
|
|
||||||
|
cb.innerHTML = `
|
||||||
|
<div class='color-name'>${id}</div>
|
||||||
|
<div class='color-lch'>${lch}</div>
|
||||||
|
<div class='color-rgb'>${rgb}</div>
|
||||||
|
<div class='color-rgb'>${rgb}ff</div>
|
||||||
|
<div class='color-rgb'>${colors}</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,678 +4,12 @@
|
||||||
<title>Ideas</title>
|
<title>Ideas</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
|
<link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
|
||||||
<style>
|
<link
|
||||||
:root {
|
rel="stylesheet"
|
||||||
--color-priduck-hue: 180;
|
rel="noopener"
|
||||||
}
|
target="_blank"
|
||||||
|
href="./example.css"
|
||||||
/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
|
/>
|
||||||
.slidecontainer {
|
|
||||||
width: 100%; /* Width of the outside container */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The slider itself */
|
|
||||||
.slider {
|
|
||||||
-webkit-appearance: none; /* Override default CSS styles */
|
|
||||||
appearance: none;
|
|
||||||
width: 100%; /* Full-width */
|
|
||||||
height: 25px; /* Specified height */
|
|
||||||
background: #d3d3d3; /* Grey background */
|
|
||||||
outline: none; /* Remove outline */
|
|
||||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
|
||||||
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mouse-over effects */
|
|
||||||
.slider:hover {
|
|
||||||
opacity: 1; /* Fully shown on mouse-over */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
|
||||||
.slider::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none; /* Override default look */
|
|
||||||
appearance: none;
|
|
||||||
width: 25px; /* Set a specific slider handle width */
|
|
||||||
height: 25px; /* Slider handle height */
|
|
||||||
background: #04aa6d; /* Green background */
|
|
||||||
cursor: pointer; /* Cursor on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider::-moz-range-thumb {
|
|
||||||
width: 25px; /* Set a specific slider handle width */
|
|
||||||
height: 25px; /* Slider handle height */
|
|
||||||
background: #04aa6d; /* Green background */
|
|
||||||
cursor: pointer; /* Cursor on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
#hue {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hue-box {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 5em;
|
|
||||||
min-height: 1em;
|
|
||||||
border: 1px solid black;
|
|
||||||
background-color: lch(50% 100 var(--color-priduck-hue));
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
width: 5em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fg-c0b0 {
|
|
||||||
color: var(--color-priduck-c0b0);
|
|
||||||
}
|
|
||||||
.fg-c1b0 {
|
|
||||||
color: var(--color-priduck-c1b0);
|
|
||||||
}
|
|
||||||
.fg-c2b0 {
|
|
||||||
color: var(--color-priduck-c2b0);
|
|
||||||
}
|
|
||||||
.fg-c3b0 {
|
|
||||||
color: var(--color-priduck-c3b0);
|
|
||||||
}
|
|
||||||
.fg-c4b0 {
|
|
||||||
color: var(--color-priduck-c4b0);
|
|
||||||
}
|
|
||||||
.fg-c5b0 {
|
|
||||||
color: var(--color-priduck-c5b0);
|
|
||||||
}
|
|
||||||
.fg-c6b0 {
|
|
||||||
color: var(--color-priduck-c6b0);
|
|
||||||
}
|
|
||||||
.fg-c7b0 {
|
|
||||||
color: var(--color-priduck-c7b0);
|
|
||||||
}
|
|
||||||
.fg-c8b0 {
|
|
||||||
color: var(--color-priduck-c8b0);
|
|
||||||
}
|
|
||||||
.fg-c9b0 {
|
|
||||||
color: var(--color-priduck-c9b0);
|
|
||||||
}
|
|
||||||
.fg-c0b1 {
|
|
||||||
color: var(--color-priduck-c0b1);
|
|
||||||
}
|
|
||||||
.fg-c1b1 {
|
|
||||||
color: var(--color-priduck-c1b1);
|
|
||||||
}
|
|
||||||
.fg-c2b1 {
|
|
||||||
color: var(--color-priduck-c2b1);
|
|
||||||
}
|
|
||||||
.fg-c3b1 {
|
|
||||||
color: var(--color-priduck-c3b1);
|
|
||||||
}
|
|
||||||
.fg-c4b1 {
|
|
||||||
color: var(--color-priduck-c4b1);
|
|
||||||
}
|
|
||||||
.fg-c5b1 {
|
|
||||||
color: var(--color-priduck-c5b1);
|
|
||||||
}
|
|
||||||
.fg-c6b1 {
|
|
||||||
color: var(--color-priduck-c6b1);
|
|
||||||
}
|
|
||||||
.fg-c7b1 {
|
|
||||||
color: var(--color-priduck-c7b1);
|
|
||||||
}
|
|
||||||
.fg-c8b1 {
|
|
||||||
color: var(--color-priduck-c8b1);
|
|
||||||
}
|
|
||||||
.fg-c9b1 {
|
|
||||||
color: var(--color-priduck-c9b1);
|
|
||||||
}
|
|
||||||
.fg-c0b2 {
|
|
||||||
color: var(--color-priduck-c0b2);
|
|
||||||
}
|
|
||||||
.fg-c1b2 {
|
|
||||||
color: var(--color-priduck-c1b2);
|
|
||||||
}
|
|
||||||
.fg-c2b2 {
|
|
||||||
color: var(--color-priduck-c2b2);
|
|
||||||
}
|
|
||||||
.fg-c3b2 {
|
|
||||||
color: var(--color-priduck-c3b2);
|
|
||||||
}
|
|
||||||
.fg-c4b2 {
|
|
||||||
color: var(--color-priduck-c4b2);
|
|
||||||
}
|
|
||||||
.fg-c5b2 {
|
|
||||||
color: var(--color-priduck-c5b2);
|
|
||||||
}
|
|
||||||
.fg-c6b2 {
|
|
||||||
color: var(--color-priduck-c6b2);
|
|
||||||
}
|
|
||||||
.fg-c7b2 {
|
|
||||||
color: var(--color-priduck-c7b2);
|
|
||||||
}
|
|
||||||
.fg-c8b2 {
|
|
||||||
color: var(--color-priduck-c8b2);
|
|
||||||
}
|
|
||||||
.fg-c9b2 {
|
|
||||||
color: var(--color-priduck-c9b2);
|
|
||||||
}
|
|
||||||
.fg-c0b3 {
|
|
||||||
color: var(--color-priduck-c0b3);
|
|
||||||
}
|
|
||||||
.fg-c1b3 {
|
|
||||||
color: var(--color-priduck-c1b3);
|
|
||||||
}
|
|
||||||
.fg-c2b3 {
|
|
||||||
color: var(--color-priduck-c2b3);
|
|
||||||
}
|
|
||||||
.fg-c3b3 {
|
|
||||||
color: var(--color-priduck-c3b3);
|
|
||||||
}
|
|
||||||
.fg-c4b3 {
|
|
||||||
color: var(--color-priduck-c4b3);
|
|
||||||
}
|
|
||||||
.fg-c5b3 {
|
|
||||||
color: var(--color-priduck-c5b3);
|
|
||||||
}
|
|
||||||
.fg-c6b3 {
|
|
||||||
color: var(--color-priduck-c6b3);
|
|
||||||
}
|
|
||||||
.fg-c7b3 {
|
|
||||||
color: var(--color-priduck-c7b3);
|
|
||||||
}
|
|
||||||
.fg-c8b3 {
|
|
||||||
color: var(--color-priduck-c8b3);
|
|
||||||
}
|
|
||||||
.fg-c9b3 {
|
|
||||||
color: var(--color-priduck-c9b3);
|
|
||||||
}
|
|
||||||
.fg-c0b4 {
|
|
||||||
color: var(--color-priduck-c0b4);
|
|
||||||
}
|
|
||||||
.fg-c1b4 {
|
|
||||||
color: var(--color-priduck-c1b4);
|
|
||||||
}
|
|
||||||
.fg-c2b4 {
|
|
||||||
color: var(--color-priduck-c2b4);
|
|
||||||
}
|
|
||||||
.fg-c3b4 {
|
|
||||||
color: var(--color-priduck-c3b4);
|
|
||||||
}
|
|
||||||
.fg-c4b4 {
|
|
||||||
color: var(--color-priduck-c4b4);
|
|
||||||
}
|
|
||||||
.fg-c5b4 {
|
|
||||||
color: var(--color-priduck-c5b4);
|
|
||||||
}
|
|
||||||
.fg-c6b4 {
|
|
||||||
color: var(--color-priduck-c6b4);
|
|
||||||
}
|
|
||||||
.fg-c7b4 {
|
|
||||||
color: var(--color-priduck-c7b4);
|
|
||||||
}
|
|
||||||
.fg-c8b4 {
|
|
||||||
color: var(--color-priduck-c8b4);
|
|
||||||
}
|
|
||||||
.fg-c9b4 {
|
|
||||||
color: var(--color-priduck-c9b4);
|
|
||||||
}
|
|
||||||
.fg-c0b5 {
|
|
||||||
color: var(--color-priduck-c0b5);
|
|
||||||
}
|
|
||||||
.fg-c1b5 {
|
|
||||||
color: var(--color-priduck-c1b5);
|
|
||||||
}
|
|
||||||
.fg-c2b5 {
|
|
||||||
color: var(--color-priduck-c2b5);
|
|
||||||
}
|
|
||||||
.fg-c3b5 {
|
|
||||||
color: var(--color-priduck-c3b5);
|
|
||||||
}
|
|
||||||
.fg-c4b5 {
|
|
||||||
color: var(--color-priduck-c4b5);
|
|
||||||
}
|
|
||||||
.fg-c5b5 {
|
|
||||||
color: var(--color-priduck-c5b5);
|
|
||||||
}
|
|
||||||
.fg-c6b5 {
|
|
||||||
color: var(--color-priduck-c6b5);
|
|
||||||
}
|
|
||||||
.fg-c7b5 {
|
|
||||||
color: var(--color-priduck-c7b5);
|
|
||||||
}
|
|
||||||
.fg-c8b5 {
|
|
||||||
color: var(--color-priduck-c8b5);
|
|
||||||
}
|
|
||||||
.fg-c9b5 {
|
|
||||||
color: var(--color-priduck-c9b5);
|
|
||||||
}
|
|
||||||
.fg-c0b6 {
|
|
||||||
color: var(--color-priduck-c0b6);
|
|
||||||
}
|
|
||||||
.fg-c1b6 {
|
|
||||||
color: var(--color-priduck-c1b6);
|
|
||||||
}
|
|
||||||
.fg-c2b6 {
|
|
||||||
color: var(--color-priduck-c2b6);
|
|
||||||
}
|
|
||||||
.fg-c3b6 {
|
|
||||||
color: var(--color-priduck-c3b6);
|
|
||||||
}
|
|
||||||
.fg-c4b6 {
|
|
||||||
color: var(--color-priduck-c4b6);
|
|
||||||
}
|
|
||||||
.fg-c5b6 {
|
|
||||||
color: var(--color-priduck-c5b6);
|
|
||||||
}
|
|
||||||
.fg-c6b6 {
|
|
||||||
color: var(--color-priduck-c6b6);
|
|
||||||
}
|
|
||||||
.fg-c7b6 {
|
|
||||||
color: var(--color-priduck-c7b6);
|
|
||||||
}
|
|
||||||
.fg-c8b6 {
|
|
||||||
color: var(--color-priduck-c8b6);
|
|
||||||
}
|
|
||||||
.fg-c9b6 {
|
|
||||||
color: var(--color-priduck-c9b6);
|
|
||||||
}
|
|
||||||
.fg-c0b7 {
|
|
||||||
color: var(--color-priduck-c0b7);
|
|
||||||
}
|
|
||||||
.fg-c1b7 {
|
|
||||||
color: var(--color-priduck-c1b7);
|
|
||||||
}
|
|
||||||
.fg-c2b7 {
|
|
||||||
color: var(--color-priduck-c2b7);
|
|
||||||
}
|
|
||||||
.fg-c3b7 {
|
|
||||||
color: var(--color-priduck-c3b7);
|
|
||||||
}
|
|
||||||
.fg-c4b7 {
|
|
||||||
color: var(--color-priduck-c4b7);
|
|
||||||
}
|
|
||||||
.fg-c5b7 {
|
|
||||||
color: var(--color-priduck-c5b7);
|
|
||||||
}
|
|
||||||
.fg-c6b7 {
|
|
||||||
color: var(--color-priduck-c6b7);
|
|
||||||
}
|
|
||||||
.fg-c7b7 {
|
|
||||||
color: var(--color-priduck-c7b7);
|
|
||||||
}
|
|
||||||
.fg-c8b7 {
|
|
||||||
color: var(--color-priduck-c8b7);
|
|
||||||
}
|
|
||||||
.fg-c9b7 {
|
|
||||||
color: var(--color-priduck-c9b7);
|
|
||||||
}
|
|
||||||
.fg-c0b8 {
|
|
||||||
color: var(--color-priduck-c0b8);
|
|
||||||
}
|
|
||||||
.fg-c1b8 {
|
|
||||||
color: var(--color-priduck-c1b8);
|
|
||||||
}
|
|
||||||
.fg-c2b8 {
|
|
||||||
color: var(--color-priduck-c2b8);
|
|
||||||
}
|
|
||||||
.fg-c3b8 {
|
|
||||||
color: var(--color-priduck-c3b8);
|
|
||||||
}
|
|
||||||
.fg-c4b8 {
|
|
||||||
color: var(--color-priduck-c4b8);
|
|
||||||
}
|
|
||||||
.fg-c5b8 {
|
|
||||||
color: var(--color-priduck-c5b8);
|
|
||||||
}
|
|
||||||
.fg-c6b8 {
|
|
||||||
color: var(--color-priduck-c6b8);
|
|
||||||
}
|
|
||||||
.fg-c7b8 {
|
|
||||||
color: var(--color-priduck-c7b8);
|
|
||||||
}
|
|
||||||
.fg-c8b8 {
|
|
||||||
color: var(--color-priduck-c8b8);
|
|
||||||
}
|
|
||||||
.fg-c9b8 {
|
|
||||||
color: var(--color-priduck-c9b8);
|
|
||||||
}
|
|
||||||
.fg-c0b9 {
|
|
||||||
color: var(--color-priduck-c0b9);
|
|
||||||
}
|
|
||||||
.fg-c1b9 {
|
|
||||||
color: var(--color-priduck-c1b9);
|
|
||||||
}
|
|
||||||
.fg-c2b9 {
|
|
||||||
color: var(--color-priduck-c2b9);
|
|
||||||
}
|
|
||||||
.fg-c3b9 {
|
|
||||||
color: var(--color-priduck-c3b9);
|
|
||||||
}
|
|
||||||
.fg-c4b9 {
|
|
||||||
color: var(--color-priduck-c4b9);
|
|
||||||
}
|
|
||||||
.fg-c5b9 {
|
|
||||||
color: var(--color-priduck-c5b9);
|
|
||||||
}
|
|
||||||
.fg-c6b9 {
|
|
||||||
color: var(--color-priduck-c6b9);
|
|
||||||
}
|
|
||||||
.fg-c7b9 {
|
|
||||||
color: var(--color-priduck-c7b9);
|
|
||||||
}
|
|
||||||
.fg-c8b9 {
|
|
||||||
color: var(--color-priduck-c8b9);
|
|
||||||
}
|
|
||||||
.fg-c9b9 {
|
|
||||||
color: var(--color-priduck-c9b9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-c0b0 {
|
|
||||||
background-color: var(--color-priduck-c0b0);
|
|
||||||
}
|
|
||||||
.bg-c1b0 {
|
|
||||||
background-color: var(--color-priduck-c1b0);
|
|
||||||
}
|
|
||||||
.bg-c2b0 {
|
|
||||||
background-color: var(--color-priduck-c2b0);
|
|
||||||
}
|
|
||||||
.bg-c3b0 {
|
|
||||||
background-color: var(--color-priduck-c3b0);
|
|
||||||
}
|
|
||||||
.bg-c4b0 {
|
|
||||||
background-color: var(--color-priduck-c4b0);
|
|
||||||
}
|
|
||||||
.bg-c5b0 {
|
|
||||||
background-color: var(--color-priduck-c5b0);
|
|
||||||
}
|
|
||||||
.bg-c6b0 {
|
|
||||||
background-color: var(--color-priduck-c6b0);
|
|
||||||
}
|
|
||||||
.bg-c7b0 {
|
|
||||||
background-color: var(--color-priduck-c7b0);
|
|
||||||
}
|
|
||||||
.bg-c8b0 {
|
|
||||||
background-color: var(--color-priduck-c8b0);
|
|
||||||
}
|
|
||||||
.bg-c9b0 {
|
|
||||||
background-color: var(--color-priduck-c9b0);
|
|
||||||
}
|
|
||||||
.bg-c0b1 {
|
|
||||||
background-color: var(--color-priduck-c0b1);
|
|
||||||
}
|
|
||||||
.bg-c1b1 {
|
|
||||||
background-color: var(--color-priduck-c1b1);
|
|
||||||
}
|
|
||||||
.bg-c2b1 {
|
|
||||||
background-color: var(--color-priduck-c2b1);
|
|
||||||
}
|
|
||||||
.bg-c3b1 {
|
|
||||||
background-color: var(--color-priduck-c3b1);
|
|
||||||
}
|
|
||||||
.bg-c4b1 {
|
|
||||||
background-color: var(--color-priduck-c4b1);
|
|
||||||
}
|
|
||||||
.bg-c5b1 {
|
|
||||||
background-color: var(--color-priduck-c5b1);
|
|
||||||
}
|
|
||||||
.bg-c6b1 {
|
|
||||||
background-color: var(--color-priduck-c6b1);
|
|
||||||
}
|
|
||||||
.bg-c7b1 {
|
|
||||||
background-color: var(--color-priduck-c7b1);
|
|
||||||
}
|
|
||||||
.bg-c8b1 {
|
|
||||||
background-color: var(--color-priduck-c8b1);
|
|
||||||
}
|
|
||||||
.bg-c9b1 {
|
|
||||||
background-color: var(--color-priduck-c9b1);
|
|
||||||
}
|
|
||||||
.bg-c0b2 {
|
|
||||||
background-color: var(--color-priduck-c0b2);
|
|
||||||
}
|
|
||||||
.bg-c1b2 {
|
|
||||||
background-color: var(--color-priduck-c1b2);
|
|
||||||
}
|
|
||||||
.bg-c2b2 {
|
|
||||||
background-color: var(--color-priduck-c2b2);
|
|
||||||
}
|
|
||||||
.bg-c3b2 {
|
|
||||||
background-color: var(--color-priduck-c3b2);
|
|
||||||
}
|
|
||||||
.bg-c4b2 {
|
|
||||||
background-color: var(--color-priduck-c4b2);
|
|
||||||
}
|
|
||||||
.bg-c5b2 {
|
|
||||||
background-color: var(--color-priduck-c5b2);
|
|
||||||
}
|
|
||||||
.bg-c6b2 {
|
|
||||||
background-color: var(--color-priduck-c6b2);
|
|
||||||
}
|
|
||||||
.bg-c7b2 {
|
|
||||||
background-color: var(--color-priduck-c7b2);
|
|
||||||
}
|
|
||||||
.bg-c8b2 {
|
|
||||||
background-color: var(--color-priduck-c8b2);
|
|
||||||
}
|
|
||||||
.bg-c9b2 {
|
|
||||||
background-color: var(--color-priduck-c9b2);
|
|
||||||
}
|
|
||||||
.bg-c0b3 {
|
|
||||||
background-color: var(--color-priduck-c0b3);
|
|
||||||
}
|
|
||||||
.bg-c1b3 {
|
|
||||||
background-color: var(--color-priduck-c1b3);
|
|
||||||
}
|
|
||||||
.bg-c2b3 {
|
|
||||||
background-color: var(--color-priduck-c2b3);
|
|
||||||
}
|
|
||||||
.bg-c3b3 {
|
|
||||||
background-color: var(--color-priduck-c3b3);
|
|
||||||
}
|
|
||||||
.bg-c4b3 {
|
|
||||||
background-color: var(--color-priduck-c4b3);
|
|
||||||
}
|
|
||||||
.bg-c5b3 {
|
|
||||||
background-color: var(--color-priduck-c5b3);
|
|
||||||
}
|
|
||||||
.bg-c6b3 {
|
|
||||||
background-color: var(--color-priduck-c6b3);
|
|
||||||
}
|
|
||||||
.bg-c7b3 {
|
|
||||||
background-color: var(--color-priduck-c7b3);
|
|
||||||
}
|
|
||||||
.bg-c8b3 {
|
|
||||||
background-color: var(--color-priduck-c8b3);
|
|
||||||
}
|
|
||||||
.bg-c9b3 {
|
|
||||||
background-color: var(--color-priduck-c9b3);
|
|
||||||
}
|
|
||||||
.bg-c0b4 {
|
|
||||||
background-color: var(--color-priduck-c0b4);
|
|
||||||
}
|
|
||||||
.bg-c1b4 {
|
|
||||||
background-color: var(--color-priduck-c1b4);
|
|
||||||
}
|
|
||||||
.bg-c2b4 {
|
|
||||||
background-color: var(--color-priduck-c2b4);
|
|
||||||
}
|
|
||||||
.bg-c3b4 {
|
|
||||||
background-color: var(--color-priduck-c3b4);
|
|
||||||
}
|
|
||||||
.bg-c4b4 {
|
|
||||||
background-color: var(--color-priduck-c4b4);
|
|
||||||
}
|
|
||||||
.bg-c5b4 {
|
|
||||||
background-color: var(--color-priduck-c5b4);
|
|
||||||
}
|
|
||||||
.bg-c6b4 {
|
|
||||||
background-color: var(--color-priduck-c6b4);
|
|
||||||
}
|
|
||||||
.bg-c7b4 {
|
|
||||||
background-color: var(--color-priduck-c7b4);
|
|
||||||
}
|
|
||||||
.bg-c8b4 {
|
|
||||||
background-color: var(--color-priduck-c8b4);
|
|
||||||
}
|
|
||||||
.bg-c9b4 {
|
|
||||||
background-color: var(--color-priduck-c9b4);
|
|
||||||
}
|
|
||||||
.bg-c0b5 {
|
|
||||||
background-color: var(--color-priduck-c0b5);
|
|
||||||
}
|
|
||||||
.bg-c1b5 {
|
|
||||||
background-color: var(--color-priduck-c1b5);
|
|
||||||
}
|
|
||||||
.bg-c2b5 {
|
|
||||||
background-color: var(--color-priduck-c2b5);
|
|
||||||
}
|
|
||||||
.bg-c3b5 {
|
|
||||||
background-color: var(--color-priduck-c3b5);
|
|
||||||
}
|
|
||||||
.bg-c4b5 {
|
|
||||||
background-color: var(--color-priduck-c4b5);
|
|
||||||
}
|
|
||||||
.bg-c5b5 {
|
|
||||||
background-color: var(--color-priduck-c5b5);
|
|
||||||
}
|
|
||||||
.bg-c6b5 {
|
|
||||||
background-color: var(--color-priduck-c6b5);
|
|
||||||
}
|
|
||||||
.bg-c7b5 {
|
|
||||||
background-color: var(--color-priduck-c7b5);
|
|
||||||
}
|
|
||||||
.bg-c8b5 {
|
|
||||||
background-color: var(--color-priduck-c8b5);
|
|
||||||
}
|
|
||||||
.bg-c9b5 {
|
|
||||||
background-color: var(--color-priduck-c9b5);
|
|
||||||
}
|
|
||||||
.bg-c0b6 {
|
|
||||||
background-color: var(--color-priduck-c0b6);
|
|
||||||
}
|
|
||||||
.bg-c1b6 {
|
|
||||||
background-color: var(--color-priduck-c1b6);
|
|
||||||
}
|
|
||||||
.bg-c2b6 {
|
|
||||||
background-color: var(--color-priduck-c2b6);
|
|
||||||
}
|
|
||||||
.bg-c3b6 {
|
|
||||||
background-color: var(--color-priduck-c3b6);
|
|
||||||
}
|
|
||||||
.bg-c4b6 {
|
|
||||||
background-color: var(--color-priduck-c4b6);
|
|
||||||
}
|
|
||||||
.bg-c5b6 {
|
|
||||||
background-color: var(--color-priduck-c5b6);
|
|
||||||
}
|
|
||||||
.bg-c6b6 {
|
|
||||||
background-color: var(--color-priduck-c6b6);
|
|
||||||
}
|
|
||||||
.bg-c7b6 {
|
|
||||||
background-color: var(--color-priduck-c7b6);
|
|
||||||
}
|
|
||||||
.bg-c8b6 {
|
|
||||||
background-color: var(--color-priduck-c8b6);
|
|
||||||
}
|
|
||||||
.bg-c9b6 {
|
|
||||||
background-color: var(--color-priduck-c9b6);
|
|
||||||
}
|
|
||||||
.bg-c0b7 {
|
|
||||||
background-color: var(--color-priduck-c0b7);
|
|
||||||
}
|
|
||||||
.bg-c1b7 {
|
|
||||||
background-color: var(--color-priduck-c1b7);
|
|
||||||
}
|
|
||||||
.bg-c2b7 {
|
|
||||||
background-color: var(--color-priduck-c2b7);
|
|
||||||
}
|
|
||||||
.bg-c3b7 {
|
|
||||||
background-color: var(--color-priduck-c3b7);
|
|
||||||
}
|
|
||||||
.bg-c4b7 {
|
|
||||||
background-color: var(--color-priduck-c4b7);
|
|
||||||
}
|
|
||||||
.bg-c5b7 {
|
|
||||||
background-color: var(--color-priduck-c5b7);
|
|
||||||
}
|
|
||||||
.bg-c6b7 {
|
|
||||||
background-color: var(--color-priduck-c6b7);
|
|
||||||
}
|
|
||||||
.bg-c7b7 {
|
|
||||||
background-color: var(--color-priduck-c7b7);
|
|
||||||
}
|
|
||||||
.bg-c8b7 {
|
|
||||||
background-color: var(--color-priduck-c8b7);
|
|
||||||
}
|
|
||||||
.bg-c9b7 {
|
|
||||||
background-color: var(--color-priduck-c9b7);
|
|
||||||
}
|
|
||||||
.bg-c0b8 {
|
|
||||||
background-color: var(--color-priduck-c0b8);
|
|
||||||
}
|
|
||||||
.bg-c1b8 {
|
|
||||||
background-color: var(--color-priduck-c1b8);
|
|
||||||
}
|
|
||||||
.bg-c2b8 {
|
|
||||||
background-color: var(--color-priduck-c2b8);
|
|
||||||
}
|
|
||||||
.bg-c3b8 {
|
|
||||||
background-color: var(--color-priduck-c3b8);
|
|
||||||
}
|
|
||||||
.bg-c4b8 {
|
|
||||||
background-color: var(--color-priduck-c4b8);
|
|
||||||
}
|
|
||||||
.bg-c5b8 {
|
|
||||||
background-color: var(--color-priduck-c5b8);
|
|
||||||
}
|
|
||||||
.bg-c6b8 {
|
|
||||||
background-color: var(--color-priduck-c6b8);
|
|
||||||
}
|
|
||||||
.bg-c7b8 {
|
|
||||||
background-color: var(--color-priduck-c7b8);
|
|
||||||
}
|
|
||||||
.bg-c8b8 {
|
|
||||||
background-color: var(--color-priduck-c8b8);
|
|
||||||
}
|
|
||||||
.bg-c9b8 {
|
|
||||||
background-color: var(--color-priduck-c9b8);
|
|
||||||
}
|
|
||||||
.bg-c0b9 {
|
|
||||||
background-color: var(--color-priduck-c0b9);
|
|
||||||
}
|
|
||||||
.bg-c1b9 {
|
|
||||||
background-color: var(--color-priduck-c1b9);
|
|
||||||
}
|
|
||||||
.bg-c2b9 {
|
|
||||||
background-color: var(--color-priduck-c2b9);
|
|
||||||
}
|
|
||||||
.bg-c3b9 {
|
|
||||||
background-color: var(--color-priduck-c3b9);
|
|
||||||
}
|
|
||||||
.bg-c4b9 {
|
|
||||||
background-color: var(--color-priduck-c4b9);
|
|
||||||
}
|
|
||||||
.bg-c5b9 {
|
|
||||||
background-color: var(--color-priduck-c5b9);
|
|
||||||
}
|
|
||||||
.bg-c6b9 {
|
|
||||||
background-color: var(--color-priduck-c6b9);
|
|
||||||
}
|
|
||||||
.bg-c7b9 {
|
|
||||||
background-color: var(--color-priduck-c7b9);
|
|
||||||
}
|
|
||||||
.bg-c8b9 {
|
|
||||||
background-color: var(--color-priduck-c8b9);
|
|
||||||
}
|
|
||||||
.bg-c9b9 {
|
|
||||||
background-color: var(--color-priduck-c9b9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
grid-column-gap: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Options</h1>
|
<h1>Options</h1>
|
||||||
|
@ -783,133 +117,133 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b0</th>
|
<th>b0</th>
|
||||||
<td class="bg-c0b0">c0b0</td>
|
<td id="c0b0" class="fg-dark bg-c0b0">c0b0</td>
|
||||||
<td class="bg-c1b0">c1b0</td>
|
<td id="c1b0" class="fg-dark bg-c1b0">c1b0</td>
|
||||||
<td class="bg-c2b0">c2b0</td>
|
<td id="c2b0" class="fg-dark bg-c2b0">c2b0</td>
|
||||||
<td class="bg-c3b0">c3b0</td>
|
<td id="c3b0" class="fg-dark bg-c3b0">c3b0</td>
|
||||||
<td class="bg-c4b0">c4b0</td>
|
<td id="c4b0" class="fg-dark bg-c4b0">c4b0</td>
|
||||||
<td class="bg-c5b0">c5b0</td>
|
<td id="c5b0" class="fg-dark bg-c5b0">c5b0</td>
|
||||||
<td class="bg-c6b0">c6b0</td>
|
<td id="c6b0" class="fg-dark bg-c6b0">c6b0</td>
|
||||||
<td class="bg-c7b0">c7b0</td>
|
<td id="c7b0" class="fg-dark bg-c7b0">c7b0</td>
|
||||||
<td class="bg-c8b0">c8b0</td>
|
<td id="c8b0" class="fg-dark bg-c8b0">c8b0</td>
|
||||||
<td class="bg-c9b0">c9b0</td>
|
<td id="c9b0" class="fg-dark bg-c9b0">c9b0</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b1</th>
|
<th>b1</th>
|
||||||
<td class="bg-c0b1">c0b1</td>
|
<td id="c0b1" class="fg-dark bg-c0b1">c0b1</td>
|
||||||
<td class="bg-c1b1">c1b1</td>
|
<td id="c1b1" class="fg-dark bg-c1b1">c1b1</td>
|
||||||
<td class="bg-c2b1">c2b1</td>
|
<td id="c2b1" class="fg-dark bg-c2b1">c2b1</td>
|
||||||
<td class="bg-c3b1">c3b1</td>
|
<td id="c3b1" class="fg-dark bg-c3b1">c3b1</td>
|
||||||
<td class="bg-c4b1">c4b1</td>
|
<td id="c4b1" class="fg-dark bg-c4b1">c4b1</td>
|
||||||
<td class="bg-c5b1">c5b1</td>
|
<td id="c5b1" class="fg-dark bg-c5b1">c5b1</td>
|
||||||
<td class="bg-c6b1">c6b1</td>
|
<td id="c6b1" class="fg-dark bg-c6b1">c6b1</td>
|
||||||
<td class="bg-c7b1">c7b1</td>
|
<td id="c7b1" class="fg-dark bg-c7b1">c7b1</td>
|
||||||
<td class="bg-c8b1">c8b1</td>
|
<td id="c8b1" class="fg-dark bg-c8b1">c8b1</td>
|
||||||
<td class="bg-c9b1">c9b1</td>
|
<td id="c9b1" class="fg-dark bg-c9b1">c9b1</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b2</th>
|
<th>b2</th>
|
||||||
<td class="bg-c0b2">c0b2</td>
|
<td id="c0b2" class="fg-dark bg-c0b2">c0b2</td>
|
||||||
<td class="bg-c1b2">c1b2</td>
|
<td id="c1b2" class="fg-dark bg-c1b2">c1b2</td>
|
||||||
<td class="bg-c2b2">c2b2</td>
|
<td id="c2b2" class="fg-dark bg-c2b2">c2b2</td>
|
||||||
<td class="bg-c3b2">c3b2</td>
|
<td id="c3b2" class="fg-dark bg-c3b2">c3b2</td>
|
||||||
<td class="bg-c4b2">c4b2</td>
|
<td id="c4b2" class="fg-dark bg-c4b2">c4b2</td>
|
||||||
<td class="bg-c5b2">c5b2</td>
|
<td id="c5b2" class="fg-dark bg-c5b2">c5b2</td>
|
||||||
<td class="bg-c6b2">c6b2</td>
|
<td id="c6b2" class="fg-dark bg-c6b2">c6b2</td>
|
||||||
<td class="bg-c7b2">c7b2</td>
|
<td id="c7b2" class="fg-dark bg-c7b2">c7b2</td>
|
||||||
<td class="bg-c8b2">c8b2</td>
|
<td id="c8b2" class="fg-dark bg-c8b2">c8b2</td>
|
||||||
<td class="bg-c9b2">c9b2</td>
|
<td id="c9b2" class="fg-dark bg-c9b2">c9b2</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b3</th>
|
<th>b3</th>
|
||||||
<td class="bg-c0b3">c0b3</td>
|
<td id="c0b3" class="fg-dark bg-c0b3">c0b3</td>
|
||||||
<td class="bg-c1b3">c1b3</td>
|
<td id="c1b3" class="fg-dark bg-c1b3">c1b3</td>
|
||||||
<td class="bg-c2b3">c2b3</td>
|
<td id="c2b3" class="fg-dark bg-c2b3">c2b3</td>
|
||||||
<td class="bg-c3b3">c3b3</td>
|
<td id="c3b3" class="fg-dark bg-c3b3">c3b3</td>
|
||||||
<td class="bg-c4b3">c4b3</td>
|
<td id="c4b3" class="fg-dark bg-c4b3">c4b3</td>
|
||||||
<td class="bg-c5b3">c5b3</td>
|
<td id="c5b3" class="fg-dark bg-c5b3">c5b3</td>
|
||||||
<td class="bg-c6b3">c6b3</td>
|
<td id="c6b3" class="fg-dark bg-c6b3">c6b3</td>
|
||||||
<td class="bg-c7b3">c7b3</td>
|
<td id="c7b3" class="fg-dark bg-c7b3">c7b3</td>
|
||||||
<td class="bg-c8b3">c8b3</td>
|
<td id="c8b3" class="fg-dark bg-c8b3">c8b3</td>
|
||||||
<td class="bg-c9b3">c9b3</td>
|
<td id="c9b3" class="fg-dark bg-c9b3">c9b3</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b4</th>
|
<th>b4</th>
|
||||||
<td class="bg-c0b4">c0b4</td>
|
<td id="c0b4" class="fg-dark bg-c0b4">c0b4</td>
|
||||||
<td class="bg-c1b4">c1b4</td>
|
<td id="c1b4" class="fg-dark bg-c1b4">c1b4</td>
|
||||||
<td class="bg-c2b4">c2b4</td>
|
<td id="c2b4" class="fg-dark bg-c2b4">c2b4</td>
|
||||||
<td class="bg-c3b4">c3b4</td>
|
<td id="c3b4" class="fg-dark bg-c3b4">c3b4</td>
|
||||||
<td class="bg-c4b4">c4b4</td>
|
<td id="c4b4" class="fg-dark bg-c4b4">c4b4</td>
|
||||||
<td class="bg-c5b4">c5b4</td>
|
<td id="c5b4" class="fg-dark bg-c5b4">c5b4</td>
|
||||||
<td class="bg-c6b4">c6b4</td>
|
<td id="c6b4" class="fg-dark bg-c6b4">c6b4</td>
|
||||||
<td class="bg-c7b4">c7b4</td>
|
<td id="c7b4" class="fg-dark bg-c7b4">c7b4</td>
|
||||||
<td class="bg-c8b4">c8b4</td>
|
<td id="c8b4" class="fg-dark bg-c8b4">c8b4</td>
|
||||||
<td class="bg-c9b4">c9b4</td>
|
<td id="c9b4" class="fg-dark bg-c9b4">c9b4</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b5</th>
|
<th>b5</th>
|
||||||
<td class="bg-c0b5">c0b5</td>
|
<td id="c0b5" class="fg-light bg-c0b5">c0b5</td>
|
||||||
<td class="bg-c1b5">c1b5</td>
|
<td id="c1b5" class="fg-light bg-c1b5">c1b5</td>
|
||||||
<td class="bg-c2b5">c2b5</td>
|
<td id="c2b5" class="fg-light bg-c2b5">c2b5</td>
|
||||||
<td class="bg-c3b5">c3b5</td>
|
<td id="c3b5" class="fg-light bg-c3b5">c3b5</td>
|
||||||
<td class="bg-c4b5">c4b5</td>
|
<td id="c4b5" class="fg-light bg-c4b5">c4b5</td>
|
||||||
<td class="bg-c5b5">c5b5</td>
|
<td id="c5b5" class="fg-light bg-c5b5">c5b5</td>
|
||||||
<td class="bg-c6b5">c6b5</td>
|
<td id="c6b5" class="fg-light bg-c6b5">c6b5</td>
|
||||||
<td class="bg-c7b5">c7b5</td>
|
<td id="c7b5" class="fg-light bg-c7b5">c7b5</td>
|
||||||
<td class="bg-c8b5">c8b5</td>
|
<td id="c8b5" class="fg-light bg-c8b5">c8b5</td>
|
||||||
<td class="bg-c9b5">c9b5</td>
|
<td id="c9b5" class="fg-light bg-c9b5">c9b5</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b6</th>
|
<th>b6</th>
|
||||||
<td class="bg-c0b6">c0b6</td>
|
<td id="c0b6" class="fg-light bg-c0b6">c0b6</td>
|
||||||
<td class="bg-c1b6">c1b6</td>
|
<td id="c1b6" class="fg-light bg-c1b6">c1b6</td>
|
||||||
<td class="bg-c2b6">c2b6</td>
|
<td id="c2b6" class="fg-light bg-c2b6">c2b6</td>
|
||||||
<td class="bg-c3b6">c3b6</td>
|
<td id="c3b6" class="fg-light bg-c3b6">c3b6</td>
|
||||||
<td class="bg-c4b6">c4b6</td>
|
<td id="c4b6" class="fg-light bg-c4b6">c4b6</td>
|
||||||
<td class="bg-c5b6">c5b6</td>
|
<td id="c5b6" class="fg-light bg-c5b6">c5b6</td>
|
||||||
<td class="bg-c6b6">c6b6</td>
|
<td id="c6b6" class="fg-light bg-c6b6">c6b6</td>
|
||||||
<td class="bg-c7b6">c7b6</td>
|
<td id="c7b6" class="fg-light bg-c7b6">c7b6</td>
|
||||||
<td class="bg-c8b6">c8b6</td>
|
<td id="c8b6" class="fg-light bg-c8b6">c8b6</td>
|
||||||
<td class="bg-c9b6">c9b6</td>
|
<td id="c9b6" class="fg-light bg-c9b6">c9b6</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b7</th>
|
<th>b7</th>
|
||||||
<td class="bg-c0b7">c0b7</td>
|
<td id="c0b7" class="fg-light bg-c0b7">c0b7</td>
|
||||||
<td class="bg-c1b7">c1b7</td>
|
<td id="c1b7" class="fg-light bg-c1b7">c1b7</td>
|
||||||
<td class="bg-c2b7">c2b7</td>
|
<td id="c2b7" class="fg-light bg-c2b7">c2b7</td>
|
||||||
<td class="bg-c3b7">c3b7</td>
|
<td id="c3b7" class="fg-light bg-c3b7">c3b7</td>
|
||||||
<td class="bg-c4b7">c4b7</td>
|
<td id="c4b7" class="fg-light bg-c4b7">c4b7</td>
|
||||||
<td class="bg-c5b7">c5b7</td>
|
<td id="c5b7" class="fg-light bg-c5b7">c5b7</td>
|
||||||
<td class="bg-c6b7">c6b7</td>
|
<td id="c6b7" class="fg-light bg-c6b7">c6b7</td>
|
||||||
<td class="bg-c7b7">c7b7</td>
|
<td id="c7b7" class="fg-light bg-c7b7">c7b7</td>
|
||||||
<td class="bg-c8b7">c8b7</td>
|
<td id="c8b7" class="fg-light bg-c8b7">c8b7</td>
|
||||||
<td class="bg-c9b7">c9b7</td>
|
<td id="c9b7" class="fg-light bg-c9b7">c9b7</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b8</th>
|
<th>b8</th>
|
||||||
<td class="bg-c0b8">c0b8</td>
|
<td id="c0b8" class="fg-light bg-c0b8">c0b8</td>
|
||||||
<td class="bg-c1b8">c1b8</td>
|
<td id="c1b8" class="fg-light bg-c1b8">c1b8</td>
|
||||||
<td class="bg-c2b8">c2b8</td>
|
<td id="c2b8" class="fg-light bg-c2b8">c2b8</td>
|
||||||
<td class="bg-c3b8">c3b8</td>
|
<td id="c3b8" class="fg-light bg-c3b8">c3b8</td>
|
||||||
<td class="bg-c4b8">c4b8</td>
|
<td id="c4b8" class="fg-light bg-c4b8">c4b8</td>
|
||||||
<td class="bg-c5b8">c5b8</td>
|
<td id="c5b8" class="fg-light bg-c5b8">c5b8</td>
|
||||||
<td class="bg-c6b8">c6b8</td>
|
<td id="c6b8" class="fg-light bg-c6b8">c6b8</td>
|
||||||
<td class="bg-c7b8">c7b8</td>
|
<td id="c7b8" class="fg-light bg-c7b8">c7b8</td>
|
||||||
<td class="bg-c8b8">c8b8</td>
|
<td id="c8b8" class="fg-light bg-c8b8">c8b8</td>
|
||||||
<td class="bg-c9b8">c9b8</td>
|
<td id="c9b8" class="fg-light bg-c9b8">c9b8</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>b9</th>
|
<th>b9</th>
|
||||||
<td class="bg-c0b9">c0b9</td>
|
<td id="c0b9" class="fg-light bg-c0b9">c0b9</td>
|
||||||
<td class="bg-c1b9">c1b9</td>
|
<td id="c1b9" class="fg-light bg-c1b9">c1b9</td>
|
||||||
<td class="bg-c2b9">c2b9</td>
|
<td id="c2b9" class="fg-light bg-c2b9">c2b9</td>
|
||||||
<td class="bg-c3b9">c3b9</td>
|
<td id="c3b9" class="fg-light bg-c3b9">c3b9</td>
|
||||||
<td class="bg-c4b9">c4b9</td>
|
<td id="c4b9" class="fg-light bg-c4b9">c4b9</td>
|
||||||
<td class="bg-c5b9">c5b9</td>
|
<td id="c5b9" class="fg-light bg-c5b9">c5b9</td>
|
||||||
<td class="bg-c6b9">c6b9</td>
|
<td id="c6b9" class="fg-light bg-c6b9">c6b9</td>
|
||||||
<td class="bg-c7b9">c7b9</td>
|
<td id="c7b9" class="fg-light bg-c7b9">c7b9</td>
|
||||||
<td class="bg-c8b9">c8b9</td>
|
<td id="c8b9" class="fg-light bg-c8b9">c8b9</td>
|
||||||
<td class="bg-c9b9">c9b9</td>
|
<td id="c9b9" class="fg-light bg-c9b9">c9b9</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
@ -1099,61 +433,5 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</body>
|
</body>
|
||||||
<script>
|
<script src="./example.js"></script>
|
||||||
// Hue
|
|
||||||
var slider = document.getElementById("hue-selector");
|
|
||||||
var output = document.getElementById("hue");
|
|
||||||
var box = document.getElementById("hue-box");
|
|
||||||
|
|
||||||
output.innerHTML = slider.value; // Display the default slider value
|
|
||||||
|
|
||||||
// Update the current slider value (each time you drag the slider handle)
|
|
||||||
slider.oninput = function () {
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
"--color-priduck-hue",
|
|
||||||
this.value,
|
|
||||||
);
|
|
||||||
output.innerHTML = this.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Color Theme
|
|
||||||
var autoColorTheme = document.getElementById("auto-color-scheme");
|
|
||||||
var lightColorTheme = document.getElementById("light-color-scheme");
|
|
||||||
var darkColorTheme = document.getElementById("dark-color-scheme");
|
|
||||||
|
|
||||||
autoColorTheme.onclick = function () {
|
|
||||||
document.documentElement.removeAttribute("data-prefers-color-scheme");
|
|
||||||
};
|
|
||||||
|
|
||||||
lightColorTheme.onclick = function () {
|
|
||||||
document.documentElement.setAttribute(
|
|
||||||
"data-prefers-color-scheme",
|
|
||||||
"light",
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
darkColorTheme.onclick = function () {
|
|
||||||
document.documentElement.setAttribute(
|
|
||||||
"data-prefers-color-scheme",
|
|
||||||
"dark",
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Prefers Contrast
|
|
||||||
var autoContrast = document.getElementById("auto-contrast-selector");
|
|
||||||
var moreContrast = document.getElementById("more-contrast-selector");
|
|
||||||
var lessContrast = document.getElementById("less-contrast-selector");
|
|
||||||
|
|
||||||
autoContrast.onclick = function () {
|
|
||||||
document.documentElement.removeAttribute("data-prefers-contrast");
|
|
||||||
};
|
|
||||||
|
|
||||||
moreContrast.onclick = function () {
|
|
||||||
document.documentElement.setAttribute("data-prefers-contrast", "more");
|
|
||||||
};
|
|
||||||
|
|
||||||
lessContrast.onclick = function () {
|
|
||||||
document.documentElement.setAttribute("data-prefers-contrast", "less");
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue