html { width: 100%; height: 100%; } body { overflow: hidden; position: relative; overflow: -moz-hidden-unscrollable; margin: 0; width: 100%; height: 100%; background-color: #eee; font-family: monospace; } pre { margin: 0; } input[type="checkbox"] { vertical-align: middle; } #page { width: 100vw; height: 100vh; flex-direction: column; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 0fr 1fr 150px; grid-template-areas: "controls controls" "assembly machine-code" "assembly-status machine-code-status"; } #page.emulator { grid-template-rows: 0fr 1fr 300px; } @media (max-width: 900px) { #page { grid-template-columns: 1fr; grid-template-rows: 0fr 1fr 100px 1fr 100px; grid-template-areas: "controls" "assembly" "assembly-status" "machine-code" "machine-code-status"; } } #controls { justify-self: start; grid-area: controls; display: flex; padding: 0 10px; } #controls>form { display: grid; column-gap: 20px; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "target-arch syntax-highlighting labels" "output-format source raw-output" "address-format breakpoints focus-emulator"; } #controls>form>div { padding: 0.2em; } #control-send { padding: 0.2em 0.5em; } #config-syntax-highlighting { grid-area: syntax-highlighting; } #config-raw-output { grid-area: raw-output; } #config-focus-emulator { grid-area: focus-emulator; } #config-breakpoints { grid-area: breakpoints; } #config-line-numbers { grid-area: config-line-numbers; } #config-target-arch { grid-area: target-arch; } #config-target-arch button { min-width: 130px; } #config-output-format { grid-area: output-format; } #config-address-format { grid-area: address-format; } #config-labels { grid-area: labels; } #config-source { grid-area: source; } #control-send { grid-area: send; } #assembly { overflow: auto; grid-area: assembly; display: grid; /* TODO: tabs and line numbers */ grid-template-columns: 0px 1fr; grid-template-rows: 0px 1fr; grid-template-areas: "tabs tabs" "lines text"; } #assembly.show-line-numbers { grid-template-columns: 30px 1fr; } #assembly .ldt { grid-area: text; flex: 1px; width: 100%; height: 100%; box-sizing: border-box; display: block; border: none; resize: none; tab-size: 4; /* font-size: 1em; */ /* padding: 0.5em; */ background-color: #fff; color: #000; } #assembly .ldt pre .error { text-decoration: underline dotted red; } #assembly #tabs { grid-area: tabs; background-color: white; } #assembly #line-numbers { grid-area: lines; background-color: white; } #assembly-status { padding: 0.5em; background-color: #eee; overflow: auto; grid-area: assembly-status; } #machine-code { grid-area: machine-code; } #machine-code-status { padding: 0.5em; grid-area: machine-code-status; } #machine-code-text { display: block; flex: 1; border: none; font-size: 1em; padding: 0.5em; background-color: #fff; color: #000; overflow: auto; white-space: nowrap } #machine-code-text .address { margin-right: 2em; color: #aaa; } #machine-code-text .source { margin-left: 2em; color: #aaa; } #machine-code-text .label { font-style: italic; } #machine-code-text > pre.current { background-color: #ffe3c0; } #machine-code-text > pre .address { cursor: pointer; } #machine-code-text > pre.breakpoint .address { background-color: #ffcccc; } #emulator { overflow: auto; font-size: 0.8em; padding: 0.5em; } /* TextareaDecorator.css * written by Colin Kuebler 2012 * Part of LDT, dual licensed under GPLv3 and MIT * Provides styles for rendering a textarea on top of a pre with scrollbars */ /* settings you can play with */ .ldt, .ldt label { padding: 4px; } .ldt, .ldt pre, .ldt textarea { font-size: 1em !important; /* resize algorithm depends on a monospaced font */ font-family: monospace !important; } .ldt textarea { /* hide the text but show the text caret */ color: transparent; /* Firefox caret position is slow to update when color is transparent */ color: rgba(0, 0, 0, 0.004); caret-color: #000; } /* settings you shouldn't play with unless you have a good reason */ .ldt { overflow: auto; position: relative; } .ldt pre { margin: 0; } .ldt label { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: inline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; cursor: text; } .ldt textarea { margin: 0; padding: 0; border: 0; background: 0; outline: none; resize: none; min-width: 100%; min-height: 100%; overflow: hidden; /* IE doesn't support rgba textarea, so use vendor specific alpha filter */ filter: alpha(opacity=20); } /* --- custom --- */ /* .ldt .comment { color: rgb(150, 150, 150); } .ldt .directive { font-weight: bold; color: rgb(0, 90, 0); } .ldt .number { color: navy; } .ldt .label { color: rgb(208, 42, 163); font-weight: bold; } .ldt .instruction { color: rgb(103, 100, 255); } .ldt .register { color: rgb(53, 179, 164); } */ .theme-rars .ldt .comment { color: #35d048; } .theme-rars .ldt .directive { color: #ff5aff; } .theme-rars .ldt .number { color: black; } .theme-rars .ldt .label { color: black; font-style: italic; } .theme-rars .ldt .instruction { color: #1e1eff; } .theme-rars .ldt .register { color: #ff231d; } .theme-rars .ldt .string { color: green; }