body { margin: 0px; color: #fcfcfc; background-color: #222; } /* outline */ #outline { float: left; width: 450px; height: 100vh; margin: 0px; padding: 0px; border-width: 0px 1px 0px 0px; border-style: solid; border-color: #555; overflow-y: scroll; } summary { display: flex; user-select: none; } summary.selected { color: #fff; background-color: #444; } summary > div, .cst { padding-top: 4px; padding-bottom: 4px; } .elt, .cst { display: flex; flex-grow: 1; padding-left: 8px; padding-right: 8px; } .elt-switch { width: 18px; padding-left: 2px; text-align: center; } details:has(li) .elt-switch::after { content: '▸'; } details[open]:has(li) .elt-switch::after { content: '▾'; } .elt-label { flex-grow: 1; } .elt-rep { display: flex; } .elt-rep > div { padding: 2px 0px 0px 0px; font-size: 10pt; text-align: center; width: 56px; } /* display */ canvas { float: left; margin-left: 20px; margin-top: 20px; background-color: #020202; border: 1px solid #555; border-radius: 16px; } canvas:focus { border-color: #aaa; }