priduck-color-theme-cli-js/examples/example.css

686 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;
}