You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
1.3 KiB
96 lines
1.3 KiB
@font-face {
|
|
font-family: 'VT323';
|
|
src: url('fonts/VT323-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
font-family: 'VT323', monospace;
|
|
}
|
|
|
|
#menu-bar, #info-bar {
|
|
padding: 10px;
|
|
background-color: #ddd;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#menu-bar {
|
|
order: 1;
|
|
}
|
|
|
|
#info-bar {
|
|
order: 3;
|
|
}
|
|
|
|
#row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
order: 2;
|
|
}
|
|
|
|
#tool-bar, #layer-bar {
|
|
display: flex;
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
background-color: #ddd;
|
|
gap: 10px;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
#canvas-area {
|
|
background-color: darkgray;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
border: 1px solid;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
#canvas-container {
|
|
position: absolute;
|
|
border: 1px solid;
|
|
background-color: white;
|
|
}
|
|
|
|
|
|
#canvas {
|
|
display: block;
|
|
}
|
|
|
|
.button {
|
|
background-color: #ddd;
|
|
border: 1px solid;
|
|
border-radius: 2px;
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.puck {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.button.active, .button:active {
|
|
background-color: darkgray;
|
|
}
|
|
|