66 lines
1.3 KiB
CSS
66 lines
1.3 KiB
CSS
body {
|
|
font-family: sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 20px;
|
|
}
|
|
#controls {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
#controls input[type='text'],
|
|
#controls input[type='checkbox'] {
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
#controls label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
#controls select,
|
|
#controls button {
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #f8f8f8;
|
|
}
|
|
#canvases {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
#canvases > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
#sourceCanvas {
|
|
border: 1px solid #ccc;
|
|
margin-top: 5px;
|
|
image-rendering: pixelated; /* Maintain pixelated look when scaled by CSS */
|
|
}
|
|
#outputCanvas {
|
|
border: 1px solid #ccc;
|
|
margin-top: 5px;
|
|
width: 512px; /* Display size - 4x the drawing width */
|
|
height: 512px; /* Display size - 4x the drawing height */
|
|
image-rendering: pixelated; /* Keeps pixels sharp when scaled */
|
|
}
|
|
#statsContainer {
|
|
width: 512px;
|
|
}
|
|
#status {
|
|
margin-top: 15px;
|
|
font-weight: bold;
|
|
min-height: 1.2em; /* Prevent layout shift */
|
|
}
|