687 lines
12 KiB
CSS
687 lines
12 KiB
CSS
: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;
|
|
}
|