:root { --bgcolor: white; --textcolor: black; --bordercolor: black; --regbgcolor: #99ccff; --regtextcolor: black; --breakbg: #ff6666; --currentbg: #99ccff; --breakcurrentbg: purple; --touchedbg: green; --touchedfg: white; --readbg: pink; --readfg: red; --highlightedbg: #999900; --expr1bg: #a2b9bc; --expr1fg: black; --expr2bg: #b2ad7f; --expr2fg: black; --expr3bg: #878f99; --expr3fg: white; --expr4bg: #6b5b95; --expr4fg: white; } /* :root { */ /* --bgcolor: black; */ /* --textcolor: white; */ /* --bordercolor: white; */ /* --regbgcolor: #99ccff; */ /* --regtextcolor: purple; */ /* --breakbg: #ff6666; */ /* --currentbg: #99ccff; */ /* --breakcurrentbg: purple; */ /* --touchedbg: green; */ /* --touchedfg: white; */ /* --readbg: pink; */ /* --readfg: red; */ /* --highlightedbg: #999900; */ /* --expr1bg: #a2b9bc; */ /* --expr1fg: white; */ /* --expr2bg: #b2ad7f; */ /* --expr2fg: white; */ /* --expr3bg: #878f99; */ /* --expr3fg: gray; */ /* --expr4bg: #6b5b95; */ /* --expr4fg: gray; */ /* --codecolor: white; */ /* } */ html { background: var(--bgcolor); color: var(--textcolor); } #body{ display: grid; grid-template-columns: [ctrl] 300px [code] 250px [outcfg] 600px [state] 700px; grid-template-rows: [row1] 200px [row2] 200px [row3] 400px [row4]; } #code { grid-column-start: code; grid-column-end: code; grid-row-start: row1; grid-row-end: row4; border: 1px solid var(--bordercolor); overflow-y: auto; color: var(--codecolor); } #output { grid-column-start: outcfg; grid-column-end: outcfg; grid-row-start: row1; grid-row-end: row2; border: 1px solid var(--bordercolor); overflow-y: auto; } #log { grid-column-start: outcfg; grid-column-end: outcfg; grid-row-start: row2; grid-row-end: row3; border: 1px solid var(--bordercolor); overflow-y: auto; } #state { grid-column-start: state; grid-column-end: state; grid-row-start: row1; grid-row-end: row4; border: 1px solid var(--bordercolor); overflow-y: auto; } #expr { grid-column-start: ctrl; grid-column-end: ctrl; grid-row-start: row1; grid-row-end: row1; border: 1px solid var(--bordercolor); } #legend{ grid-column-start: ctrl; grid-column-end: ctrl; grid-row-start: row2; grid-row-end: row4; border: 1px solid var(--bordercolor); } #status{ font-size: 11pt; } #step_navigator{ /* grid-column-start: ctrl; */ /* grid-column-end: ctrl; */ /* grid-row-start: row1; */ /* grid-row-end: row1; */ /* font-size: 20pt; */ } #cfg{ grid-column-start: outcfg; grid-column-end: outcfg; grid-row-start: row3; grid-row-end: row4; border: 1px solid var(--bordercolor); } #cfg_cont{ width: 100%; height: 80%; background: #dddddd; } td { width: 40px; text-align: center; } .regname { background: var(--regbgcolor); color: var(--regtextcolor); } .break { background: var(--breakbg); } .current { background: var(--currentbg); } .break.current { background: var(--breakcurrentbg); } pre{ font-size: 10pt; font-family: courier; } .touched { background: var(--touchedbg); color: var(--touchedfg); } .read { background: var(--readbg); color: var(--readfg); } .highlighted { background: var(--highlightedbg); } .expr1 { background: var(--expr1bg); color: var(--expr1fg); } .expr2 { background: var(--expr2bg); color: var(--expr2fg); } .expr3 { background: var(--expr3bg); color: var(--expr3fg); } .expr4 { background: var(--expr4bg); color: var(--expr4fg); }