165 lines
37 KiB
CSS
165 lines
37 KiB
CSS
/* CSS BASE */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#config {
|
|
display: flex;
|
|
padding: .3em 1em;
|
|
text-align: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
fieldset {
|
|
border: none;
|
|
}
|
|
|
|
.button {
|
|
color: darkblue;
|
|
cursor: pointer;
|
|
border: .1em solid transparent;
|
|
padding: .2em;
|
|
box-shadow: .1em .1em .1em black;
|
|
border-radius: .3em;
|
|
vertical-align: sub;
|
|
background-color: white;
|
|
}
|
|
|
|
.button:hover {
|
|
box-shadow: inset .1em .1em .1em black;
|
|
}
|
|
|
|
.button.circle {
|
|
border-radius: 25%;
|
|
}
|
|
|
|
.button.color {
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
background-color: var(--color);
|
|
}
|
|
|
|
#canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#grid-cells {
|
|
height: calc(100vmin - 2.4em);
|
|
width: calc(100vmin - 2.4em);
|
|
margin: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.cells {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: grid;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
grid-template-rows: repeat(8, 1fr);
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
|
|
#config-indicator {
|
|
position: fixed;
|
|
bottom: 1em;
|
|
right: 1em;
|
|
}
|
|
|
|
.legend {
|
|
width: 2em;
|
|
height: 2em;
|
|
margin: .1em 0;
|
|
border: 1px solid gray;
|
|
display: none;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.legend.color {
|
|
background-color: var(--color);
|
|
}
|
|
|
|
#config-indicator--border::before {
|
|
content: "";
|
|
border: 1px solid black;
|
|
width: 75%;
|
|
display: block;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 10%;
|
|
}
|
|
|
|
#config-indicator--mixing::after,
|
|
#config-indicator--mixing::before {
|
|
content: "";
|
|
border: 1px solid black;
|
|
width: 50%;
|
|
height: 50%;
|
|
display: block;
|
|
position: absolute;
|
|
top: 35%;
|
|
left: 10%;
|
|
}
|
|
|
|
#config-indicator--mixing::before {
|
|
margin-left: 25%;
|
|
margin-top: -25%;
|
|
border-color: lightgray;
|
|
}
|
|
|
|
/* BWRVB */
|
|
#color-black, #select-color-label-black, #config-indicator--black {--color: #000}
|
|
#color-white, #select-color-label-white, #config-indicator--white {--color: #fff}
|
|
#color-red , #select-color-label-red , #config-indicator--red {--color: #f00}
|
|
#color-green, #select-color-label-green, #config-indicator--green {--color: #0f0}
|
|
#color-blue , #select-color-label-blue , #config-indicator--blue {--color: #00f}
|
|
|
|
#opacity-color[type="checkbox"]:checked ~ #grid-cells #color-black {--color: #0008}
|
|
#opacity-color[type="checkbox"]:checked ~ #grid-cells #color-white {--color: #fff8}
|
|
#opacity-color[type="checkbox"]:checked ~ #grid-cells #color-red {--color: #f008}
|
|
#opacity-color[type="checkbox"]:checked ~ #grid-cells #color-green {--color: #0f08}
|
|
#opacity-color[type="checkbox"]:checked ~ #grid-cells #color-blue {--color: #00f8}
|
|
|
|
/* BORDER */
|
|
#color-transparent {
|
|
z-index: 100;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#color-transparent .cell {
|
|
opacity: 100;
|
|
}
|
|
|
|
#show-border[type="checkbox"]:checked ~ #grid-cells,
|
|
#show-border[type="checkbox"]:checked ~ #grid-cells #color-transparent .cell {
|
|
box-shadow: inset 0 0 0 1px grey;
|
|
}
|
|
|
|
/* SELECTOR */
|
|
label.cell{background-color: var(--color); opacity: 0}
|
|
|
|
#select-color-red[type="radio"]:checked ~ #grid-cells #color-red ,
|
|
#select-color-blue[type="radio"]:checked ~ #grid-cells #color-blue ,
|
|
#select-color-black[type="radio"]:checked ~ #grid-cells #color-black ,
|
|
#select-color-white[type="radio"]:checked ~ #grid-cells #color-white ,
|
|
#select-color-green[type="radio"]:checked ~ #grid-cells #color-green
|
|
{pointer-events: auto;}
|
|
|
|
#show-border[type="checkbox"]:checked ~ #config-indicator #config-indicator--border,
|
|
#opacity-color[type="checkbox"]:checked ~ #config-indicator #config-indicator--mixing,
|
|
#select-color-red[type="radio"]:checked ~ #config-indicator #config-indicator--red ,
|
|
#select-color-blue[type="radio"]:checked ~ #config-indicator #config-indicator--blue ,
|
|
#select-color-black[type="radio"]:checked ~ #config-indicator #config-indicator--black,
|
|
#select-color-white[type="radio"]:checked ~ #config-indicator #config-indicator--white,
|
|
#select-color-green[type="radio"]:checked ~ #config-indicator #config-indicator--green
|
|
{display: block}
|
|
|
|
/* COLOR SELECTOR */
|
|
#cell-black-1[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-1, #cell-black-2[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-2, #cell-black-3[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-3, #cell-black-4[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-4, #cell-black-5[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-5, #cell-black-6[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-6, #cell-black-7[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-7, #cell-black-8[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-8, #cell-black-9[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-9, #cell-black-10[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-10, #cell-black-11[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-11, #cell-black-12[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-12, #cell-black-13[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-13, #cell-black-14[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-14, #cell-black-15[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-15, #cell-black-16[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-16, #cell-black-17[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-17, #cell-black-18[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-18, #cell-black-19[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-19, #cell-black-20[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-20, #cell-black-21[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-21, #cell-black-22[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-22, #cell-black-23[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-23, #cell-black-24[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-24, #cell-black-25[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-25, #cell-black-26[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-26, #cell-black-27[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-27, #cell-black-28[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-28, #cell-black-29[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-29, #cell-black-30[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-30, #cell-black-31[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-31, #cell-black-32[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-32, #cell-black-33[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-33, #cell-black-34[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-34, #cell-black-35[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-35, #cell-black-36[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-36, #cell-black-37[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-37, #cell-black-38[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-38, #cell-black-39[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-39, #cell-black-40[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-40, #cell-black-41[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-41, #cell-black-42[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-42, #cell-black-43[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-43, #cell-black-44[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-44, #cell-black-45[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-45, #cell-black-46[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-46, #cell-black-47[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-47, #cell-black-48[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-48, #cell-black-49[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-49, #cell-black-50[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-50, #cell-black-51[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-51, #cell-black-52[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-52, #cell-black-53[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-53, #cell-black-54[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-54, #cell-black-55[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-55, #cell-black-56[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-56, #cell-black-57[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-57, #cell-black-58[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-58, #cell-black-59[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-59, #cell-black-60[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-60, #cell-black-61[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-61, #cell-black-62[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-62, #cell-black-63[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-63, #cell-black-64[type="checkbox"]:checked ~ #grid-cells #color-black #celldraw-black-64 {opacity: 100%} #cell-red-1[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-1, #cell-red-2[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-2, #cell-red-3[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-3, #cell-red-4[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-4, #cell-red-5[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-5, #cell-red-6[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-6, #cell-red-7[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-7, #cell-red-8[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-8, #cell-red-9[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-9, #cell-red-10[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-10, #cell-red-11[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-11, #cell-red-12[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-12, #cell-red-13[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-13, #cell-red-14[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-14, #cell-red-15[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-15, #cell-red-16[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-16, #cell-red-17[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-17, #cell-red-18[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-18, #cell-red-19[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-19, #cell-red-20[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-20, #cell-red-21[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-21, #cell-red-22[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-22, #cell-red-23[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-23, #cell-red-24[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-24, #cell-red-25[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-25, #cell-red-26[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-26, #cell-red-27[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-27, #cell-red-28[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-28, #cell-red-29[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-29, #cell-red-30[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-30, #cell-red-31[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-31, #cell-red-32[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-32, #cell-red-33[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-33, #cell-red-34[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-34, #cell-red-35[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-35, #cell-red-36[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-36, #cell-red-37[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-37, #cell-red-38[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-38, #cell-red-39[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-39, #cell-red-40[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-40, #cell-red-41[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-41, #cell-red-42[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-42, #cell-red-43[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-43, #cell-red-44[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-44, #cell-red-45[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-45, #cell-red-46[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-46, #cell-red-47[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-47, #cell-red-48[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-48, #cell-red-49[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-49, #cell-red-50[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-50, #cell-red-51[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-51, #cell-red-52[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-52, #cell-red-53[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-53, #cell-red-54[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-54, #cell-red-55[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-55, #cell-red-56[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-56, #cell-red-57[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-57, #cell-red-58[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-58, #cell-red-59[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-59, #cell-red-60[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-60, #cell-red-61[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-61, #cell-red-62[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-62, #cell-red-63[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-63, #cell-red-64[type="checkbox"]:checked ~ #grid-cells #color-red #celldraw-red-64 {opacity: 100%} #cell-green-1[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-1, #cell-green-2[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-2, #cell-green-3[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-3, #cell-green-4[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-4, #cell-green-5[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-5, #cell-green-6[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-6, #cell-green-7[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-7, #cell-green-8[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-8, #cell-green-9[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-9, #cell-green-10[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-10, #cell-green-11[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-11, #cell-green-12[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-12, #cell-green-13[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-13, #cell-green-14[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-14, #cell-green-15[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-15, #cell-green-16[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-16, #cell-green-17[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-17, #cell-green-18[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-18, #cell-green-19[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-19, #cell-green-20[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-20, #cell-green-21[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-21, #cell-green-22[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-22, #cell-green-23[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-23, #cell-green-24[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-24, #cell-green-25[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-25, #cell-green-26[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-26, #cell-green-27[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-27, #cell-green-28[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-28, #cell-green-29[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-29, #cell-green-30[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-30, #cell-green-31[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-31, #cell-green-32[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-32, #cell-green-33[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-33, #cell-green-34[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-34, #cell-green-35[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-35, #cell-green-36[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-36, #cell-green-37[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-37, #cell-green-38[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-38, #cell-green-39[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-39, #cell-green-40[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-40, #cell-green-41[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-41, #cell-green-42[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-42, #cell-green-43[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-43, #cell-green-44[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-44, #cell-green-45[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-45, #cell-green-46[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-46, #cell-green-47[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-47, #cell-green-48[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-48, #cell-green-49[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-49, #cell-green-50[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-50, #cell-green-51[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-51, #cell-green-52[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-52, #cell-green-53[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-53, #cell-green-54[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-54, #cell-green-55[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-55, #cell-green-56[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-56, #cell-green-57[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-57, #cell-green-58[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-58, #cell-green-59[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-59, #cell-green-60[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-60, #cell-green-61[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-61, #cell-green-62[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-62, #cell-green-63[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-63, #cell-green-64[type="checkbox"]:checked ~ #grid-cells #color-green #celldraw-green-64 {opacity: 100%} #cell-blue-1[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-1, #cell-blue-2[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-2, #cell-blue-3[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-3, #cell-blue-4[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-4, #cell-blue-5[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-5, #cell-blue-6[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-6, #cell-blue-7[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-7, #cell-blue-8[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-8, #cell-blue-9[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-9, #cell-blue-10[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-10, #cell-blue-11[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-11, #cell-blue-12[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-12, #cell-blue-13[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-13, #cell-blue-14[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-14, #cell-blue-15[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-15, #cell-blue-16[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-16, #cell-blue-17[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-17, #cell-blue-18[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-18, #cell-blue-19[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-19, #cell-blue-20[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-20, #cell-blue-21[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-21, #cell-blue-22[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-22, #cell-blue-23[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-23, #cell-blue-24[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-24, #cell-blue-25[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-25, #cell-blue-26[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-26, #cell-blue-27[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-27, #cell-blue-28[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-28, #cell-blue-29[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-29, #cell-blue-30[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-30, #cell-blue-31[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-31, #cell-blue-32[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-32, #cell-blue-33[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-33, #cell-blue-34[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-34, #cell-blue-35[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-35, #cell-blue-36[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-36, #cell-blue-37[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-37, #cell-blue-38[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-38, #cell-blue-39[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-39, #cell-blue-40[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-40, #cell-blue-41[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-41, #cell-blue-42[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-42, #cell-blue-43[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-43, #cell-blue-44[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-44, #cell-blue-45[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-45, #cell-blue-46[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-46, #cell-blue-47[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-47, #cell-blue-48[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-48, #cell-blue-49[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-49, #cell-blue-50[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-50, #cell-blue-51[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-51, #cell-blue-52[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-52, #cell-blue-53[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-53, #cell-blue-54[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-54, #cell-blue-55[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-55, #cell-blue-56[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-56, #cell-blue-57[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-57, #cell-blue-58[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-58, #cell-blue-59[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-59, #cell-blue-60[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-60, #cell-blue-61[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-61, #cell-blue-62[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-62, #cell-blue-63[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-63, #cell-blue-64[type="checkbox"]:checked ~ #grid-cells #color-blue #celldraw-blue-64 {opacity: 100%} #cell-white-1[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-1, #cell-white-2[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-2, #cell-white-3[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-3, #cell-white-4[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-4, #cell-white-5[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-5, #cell-white-6[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-6, #cell-white-7[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-7, #cell-white-8[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-8, #cell-white-9[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-9, #cell-white-10[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-10, #cell-white-11[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-11, #cell-white-12[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-12, #cell-white-13[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-13, #cell-white-14[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-14, #cell-white-15[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-15, #cell-white-16[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-16, #cell-white-17[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-17, #cell-white-18[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-18, #cell-white-19[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-19, #cell-white-20[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-20, #cell-white-21[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-21, #cell-white-22[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-22, #cell-white-23[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-23, #cell-white-24[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-24, #cell-white-25[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-25, #cell-white-26[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-26, #cell-white-27[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-27, #cell-white-28[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-28, #cell-white-29[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-29, #cell-white-30[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-30, #cell-white-31[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-31, #cell-white-32[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-32, #cell-white-33[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-33, #cell-white-34[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-34, #cell-white-35[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-35, #cell-white-36[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-36, #cell-white-37[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-37, #cell-white-38[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-38, #cell-white-39[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-39, #cell-white-40[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-40, #cell-white-41[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-41, #cell-white-42[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-42, #cell-white-43[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-43, #cell-white-44[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-44, #cell-white-45[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-45, #cell-white-46[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-46, #cell-white-47[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-47, #cell-white-48[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-48, #cell-white-49[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-49, #cell-white-50[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-50, #cell-white-51[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-51, #cell-white-52[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-52, #cell-white-53[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-53, #cell-white-54[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-54, #cell-white-55[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-55, #cell-white-56[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-56, #cell-white-57[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-57, #cell-white-58[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-58, #cell-white-59[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-59, #cell-white-60[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-60, #cell-white-61[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-61, #cell-white-62[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-62, #cell-white-63[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-63, #cell-white-64[type="checkbox"]:checked ~ #grid-cells #color-white #celldraw-white-64 {opacity: 100%} #cell-transparent-1[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-1, #cell-transparent-2[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-2, #cell-transparent-3[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-3, #cell-transparent-4[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-4, #cell-transparent-5[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-5, #cell-transparent-6[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-6, #cell-transparent-7[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-7, #cell-transparent-8[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-8, #cell-transparent-9[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-9, #cell-transparent-10[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-10, #cell-transparent-11[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-11, #cell-transparent-12[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-12, #cell-transparent-13[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-13, #cell-transparent-14[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-14, #cell-transparent-15[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-15, #cell-transparent-16[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-16, #cell-transparent-17[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-17, #cell-transparent-18[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-18, #cell-transparent-19[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-19, #cell-transparent-20[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-20, #cell-transparent-21[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-21, #cell-transparent-22[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-22, #cell-transparent-23[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-23, #cell-transparent-24[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-24, #cell-transparent-25[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-25, #cell-transparent-26[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-26, #cell-transparent-27[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-27, #cell-transparent-28[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-28, #cell-transparent-29[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-29, #cell-transparent-30[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-30, #cell-transparent-31[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-31, #cell-transparent-32[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-32, #cell-transparent-33[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-33, #cell-transparent-34[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-34, #cell-transparent-35[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-35, #cell-transparent-36[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-36, #cell-transparent-37[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-37, #cell-transparent-38[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-38, #cell-transparent-39[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-39, #cell-transparent-40[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-40, #cell-transparent-41[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-41, #cell-transparent-42[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-42, #cell-transparent-43[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-43, #cell-transparent-44[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-44, #cell-transparent-45[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-45, #cell-transparent-46[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-46, #cell-transparent-47[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-47, #cell-transparent-48[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-48, #cell-transparent-49[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-49, #cell-transparent-50[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-50, #cell-transparent-51[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-51, #cell-transparent-52[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-52, #cell-transparent-53[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-53, #cell-transparent-54[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-54, #cell-transparent-55[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-55, #cell-transparent-56[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-56, #cell-transparent-57[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-57, #cell-transparent-58[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-58, #cell-transparent-59[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-59, #cell-transparent-60[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-60, #cell-transparent-61[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-61, #cell-transparent-62[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-62, #cell-transparent-63[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-63, #cell-transparent-64[type="checkbox"]:checked ~ #grid-cells #color-transparent #celldraw-transparent-64 {opacity: 100%}
|