:root { --text: #fcfcfc; /* almost white */ --text-bright: white; --text-invalid: #f58fc2; /* bright pink */ --border: #555; /* light gray */ --border-focus: #aaa; /* bright gray */ --border-invalid: #70495c; /* dusky pink */ --selection-highlight: #444; /* medium gray */ --page-background: #222; /* dark gray */ --display-background: #020202; /* almost black */ } body { margin: 0px; color: var(--text); background-color: var(--page-background); font-family: 'Fira Sans', sans-serif; } /* sidebar */ #sidebar { display: flex; flex-direction: column; float: left; width: 450px; height: 100vh; margin: 0px; padding: 0px; border-width: 0px 1px 0px 0px; border-style: solid; border-color: var(--border); } /* add-remove */ #add-remove { display: flex; gap: 8px; margin: 8px; } #add-remove > button { width: 32px; height: 32px; font-size: large; } /* KLUDGE */ #add-remove > button.emoji { font-family: 'Noto Emoji', sans-serif; } /* outline */ #outline { flex-grow: 1; margin: 0px; padding: 0px; overflow-y: scroll; } li { user-select: none; } summary { display: flex; } summary.selected { color: var(--text-bright); background-color: var(--selection-highlight); } summary > div, .constraint { padding-top: 4px; padding-bottom: 4px; } .element, .constraint { display: flex; flex-grow: 1; padding-left: 8px; padding-right: 8px; } .element-switch { width: 18px; padding-left: 2px; text-align: center; } details:has(li) .element-switch::after { content: '▸'; } details[open]:has(li) .element-switch::after { content: '▾'; } .element-label { flex-grow: 1; } .constraint-label { flex-grow: 1; } .element-representation { display: flex; } .element-representation > div { padding: 2px 0px 0px 0px; font-size: 10pt; font-variant-numeric: tabular-nums; text-align: right; width: 56px; } .constraint { font-style: italic; } .constraint.invalid { color: var(--text-invalid); } .constraint > input[type=checkbox] { margin: 0px 8px 0px 0px; } .constraint > input[type=text] { color: inherit; background-color: inherit; border: 1px solid var(--border); border-radius: 2px; } .constraint.invalid > input[type=text] { border-color: var(--border-invalid); } .status { width: 20px; padding-left: 4px; text-align: center; font-family: 'Noto Emoji'; font-style: normal; } .invalid > .status::after, details:has(.invalid):not([open]) .status::after { content: '⚠'; color: var(--text-invalid); } /* display */ canvas { float: left; margin-left: 20px; margin-top: 20px; background-color: var(--display-background); border: 1px solid var(--border); border-radius: 16px; } canvas:focus { border-color: var(--border-focus); }