102 lines
2.1 KiB
CSS
102 lines
2.1 KiB
CSS
|
:root {
|
||
|
|
--min-hue: 150;
|
||
|
|
--max-hue: 260;
|
||
|
|
--sat-scale: 1.5;
|
||
|
|
--y0-lum: 800;
|
||
|
|
--y1-lum: 0;
|
||
|
|
--y0-hue: 800;
|
||
|
|
--y1-hue: 0;
|
||
|
|
--scale-y: 0.01;
|
||
|
|
--randomisation: 0.2;
|
||
|
|
--template-scale: 1;
|
||
|
|
--hue-interpolation: longer hue;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
svg {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100%;
|
||
|
|
border: 1px solid black;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
display: grid;
|
||
|
|
grid-template:
|
||
|
|
"drawing controls" / 1fr 1fr;
|
||
|
|
gap: 1em;
|
||
|
|
}
|
||
|
|
fieldset {
|
||
|
|
display: grid;
|
||
|
|
gap: 1em;
|
||
|
|
grid-template-columns: auto 1fr auto;
|
||
|
|
|
||
|
|
& label {
|
||
|
|
justify-self: end;
|
||
|
|
grid-column: 1;
|
||
|
|
}
|
||
|
|
& input {
|
||
|
|
grid-column: 2;
|
||
|
|
}
|
||
|
|
& output {
|
||
|
|
justify-self: start;
|
||
|
|
grid-column: 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.colour-input-wrapper {
|
||
|
|
display: inline-block;
|
||
|
|
background-image: linear-gradient(in hsl longer hue to right, hsl(0, 100%, 50%), hsl(360, 100%, 50%));
|
||
|
|
|
||
|
|
& input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.spectre {
|
||
|
|
--sat: calc(var(--t) * var(--sat-scale) * 1%);
|
||
|
|
--min-r: calc(1 - var(--randomisation));
|
||
|
|
--max-r: calc(1 + var(--randomisation));
|
||
|
|
--random: calc(var(--min-r) + (var(--max-r) - var(--min-r)) * var(--r));
|
||
|
|
--lum: calc(100% * ((var(--y) - var(--y0-lum)) / (var(--y1-lum) - var(--y0-lum))) * var(--random));
|
||
|
|
--mix: calc(100% * ((var(--y) - var(--y0-hue)) / (var(--y1-hue) - var(--y0-hue))));
|
||
|
|
|
||
|
|
--col1: hsl(var(--min-hue), var(--sat), var(--lum));
|
||
|
|
--col2: hsl(var(--max-hue), var(--sat), var(--lum));
|
||
|
|
fill: color-mix(in hsl var(--hue-interpolation), var(--col1), var(--col2) var(--mix));
|
||
|
|
}
|
||
|
|
|
||
|
|
#draggables circle {
|
||
|
|
r: calc(5px / var(--zoom));
|
||
|
|
stroke-width: calc(0.5px / var(--zoom));
|
||
|
|
stroke: white;
|
||
|
|
fill: black;
|
||
|
|
|
||
|
|
&#y1-lum {
|
||
|
|
fill: white;
|
||
|
|
stroke: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
&#y0-hue {
|
||
|
|
fill: hsl(var(--min-hue), 100%, 50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
&#y1-hue {
|
||
|
|
fill: hsl(var(--max-hue), 100%, 50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#draggables image {
|
||
|
|
width: calc(20px * var(--template-scale));
|
||
|
|
}
|
||
|
|
|
||
|
|
svg:not([data-template="hoodie"]) #draggables image.template.hoodie {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg:not([data-template="tshirt"]) #draggables image.template.tshirt {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#link {
|
||
|
|
display: none;
|
||
|
|
}
|