@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; background-color: darkgray; } #menu-bar, #info-bar, #tool-bar, #layer-bar { z-index: 2; } #menu-bar { justify-content: space-between; } #menu-bar, #info-bar { padding: 10px; background-color: #ddd; display: flex; flex-direction: row; gap: 10px; justify-content: flex-start; flex-wrap: wrap; } #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 { flex-grow: 1; height: 100%; border: 1px solid; cursor: crosshair; } #canvas-container { position: absolute; border: 1px solid; z-index: -1; } #canvas { display: block; } .button { position: relative; flex-shrink: 0; 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; cursor: pointer; } .puck { position: relative; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid; border-radius: 2px; } .select-handle { position: absolute; bottom: 0; right: 0; font-size: .5em; background-color: black; color: white; padding: 3px 0 1px 4px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 10px 0 0 0; border-left: 1px solid white; border-top: 1px solid white; cursor: pointer; } .update-handle { position: absolute; top: 0; right: 0; font-size: .5em; background-color: black; color: white; padding: 1px 0 3px 4px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 0 0 0 10px; border-left: 1px solid white; border-bottom: 1px solid white; cursor: pointer; } .delete-handle { position: absolute; top: 0; left: 0; font-size: .5em; background-color: black; color: white; padding: 1px 4px 3px 0; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 0 0 10px 0; border-right: 1px solid white; border-bottom: 1px solid white; cursor: pointer; } .jump-key-hint { display: block; height: 12px; width: 8px; line-height: 8px; /* width: 12px; */ position: absolute; top: 0; left: 0; font-size: 1em; /* padding: 2px 2px 2px 2px; */ /* display: flex; */ /* align-items: center; */ justify-content: center; text-align: center; border-radius: 0 0 5px 0; /* border-right: 1px solid; */ /* border-bottom: 1px solid; */ } .button.active, .button:active { background-color: darkgray; }