@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; padding-bottom: 0; background-color: #ddd; gap: 10px; height: 100%; flex-direction: column; justify-content: flex-start; } #studio { flex-grow: 1; height: 100%; border: 1px solid; cursor: crosshair; } #easel { position: absolute; border: 1px solid; z-index: -1; } canvas { position: absolute; top: 0; left: 0; } .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; } .delete-handle { position: absolute; top: 0; right: 0; font-size: .6em; 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; } .key-hint { display: block; height: 13px; width: 9px; line-height: 8px; /* width: 12px; */ position: absolute; top: 2px; left: 1px; 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; */ text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000; color: white; pointer-events: none; } .button.active, .button:active { background-color: darkgray; } #layer-controllers { background-color: darkgrey; border: 1px solid; height: 100%; } .layer-controller { background-color: lightgray; height: 30px; width: 60px; border: 1px solid; border-radius: 2px; padding: 5px; position: relative; margin: 1px; } .layer-controller > i { color: darkgray; cursor: pointer; } .layer-controller.active > i { color: black; } .handle { display: block; font-size: 9px; height: 11px; width: 24px; position: absolute; justify-content: center; text-align: center; cursor: pointer; border-radius: 2px; border: 1px solid; margin: 2px; } .layer-add-button { background-color: lightgray; height: 12px; width: 60px; border: 1px solid; border-radius: 2px; position: relative; margin: 1px; text-align: center; font-size: 10px; cursor: pointer; } .layer-add-button:hover { background-color: darkgray; } .handle:hover { background-color: darkgray; } .top-left { top: 0; left: 0; } .bottom-right { bottom: 0; right: 0; } .top-right { top: 0; right: 0; } .bottom-left { bottom: 0; left: 0; }