body { margin-left: 20px; margin-top: 20px; color: #fcfcfc; background-color: #222; } /* outline */ #outline { float: left; width: 450px; height: 750px; margin: 0px; padding: 8px; border: 1px solid #555; border-radius: 16px; box-sizing: border-box; } li { list-style-type: none; } li:not(:last-child) { margin-bottom: 8px; } .elt { display: flex; padding: 3px; background-color: #444; border-radius: 8px; } .elt.selected { color: #fff; background-color: #666; } .elt > .elt-label { flex-grow: 1; padding: 2px 0px 2px 4px; } .elt > .elt-rep { display: flex; } .elt > .elt-rep > div { padding: 2px; margin-left: 3px; text-align: center; width: 60px; background-color: #333; } .elt.selected > .elt-rep > div { background-color: #555; } .elt-rep > div:first-child { border-radius: 6px 0px 0px 6px; } .elt-rep > div:last-child { border-radius: 0px 6px 6px 0px; } .constraints > li { margin-top: 4px; margin-bottom: 4px; padding: 5px; background-color: #444; border-radius: 8px; } /* display */ canvas { float: left; margin-left: 16px; background-color: #020202; border: 1px solid #555; border-radius: 16px; } canvas:focus { border-color: #aaa; }