div.source_plate, div.dest_plate { padding: 3px 3px 3px 3px; } div.source_plate { border: 2px solid blue; } div.dest_plate { border: 2px solid red; } table, tr, td { user-select: none; /* Prevents dragging issue */ border-spacing: 0px; } th { font-family: monospace; } td.plate_cell { background: none; } div.plate_cell_inner { aspect-ratio: 1 / 1; height: 90%; border-radius: 50%; border: 1px solid black; } td.plate_cell:hover div.plate_cell_inner { background: black !important; } td.plate_cell.in_transfer div.plate_cell_inner::after { content: ""; width: 100%; height: 100%; display: block; border-radius: 50%; background-image: repeating-linear-gradient( 45deg, rgba(0,0,0,0.8), rgba(0,0,0,0.8) 2px, transparent 2px, transparent 5px ); } td.current_select div.plate_cell_inner { border: 3px solid black; } // Styles for specific plate types: .W1536 { th { font-size: 0.9rem; line-height: 0px; } tr:first-child { th { line-height: inherit; } } td { padding: 0; } td.current_select div.plate_cell_inner { border: 2px solid black; } } .W3456 { th { font-size: 0.6rem; line-height: 0px; } tr:first-child { th { line-height: inherit; } } td { padding: 0; } td.current_select div.plate_cell_inner { border: 2px solid black; } }