202 lines
3 KiB
SCSS
202 lines
3 KiB
SCSS
@use "memory_registers";
|
|
@use "hover_text_box";
|
|
@use "article";
|
|
@use "windows";
|
|
@use "top_meta";
|
|
@use "buttons";
|
|
@use "table";
|
|
@use "vars";
|
|
|
|
#isa_container summary {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
pre {
|
|
font-size: 0.5em;
|
|
}
|
|
|
|
img {
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
body {
|
|
color: #808080;
|
|
background-color: black;
|
|
font-size: 2.5em;
|
|
font-family: monospace;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#grid {
|
|
justify-content: center;
|
|
display: grid;
|
|
grid-template-columns: min-content min-content min-content;
|
|
grid-template-rows: min-content min-content min-content;
|
|
grid-template-areas:
|
|
". reglabel . ."
|
|
". registers . bank "
|
|
"memlabel memory memory memory"
|
|
"title memory memory memory"
|
|
". buttons buttons buttons";
|
|
|
|
#window_box {
|
|
grid-area: windowbox;
|
|
}
|
|
#registers {
|
|
grid-area: registers;
|
|
}
|
|
#memory_bank_view {
|
|
grid-area: bank;
|
|
}
|
|
#reg_label {
|
|
grid-area: reglabel;
|
|
}
|
|
#mem_label {
|
|
grid-area: memlabel;
|
|
}
|
|
#cycles {
|
|
grid-area: cycles;
|
|
text-align: right;
|
|
align-self: center;
|
|
font-size: 0.48em;
|
|
user-select: none;
|
|
}
|
|
#title {
|
|
grid-area: title;
|
|
writing-mode: vertical-lr;
|
|
text-align: left;
|
|
user-select: none;
|
|
transform: scale(-1, -1);
|
|
}
|
|
#memory {
|
|
grid-area: memory;
|
|
}
|
|
}
|
|
|
|
#reset_buttons {
|
|
flex-direction: column;
|
|
display: flex;
|
|
align-items: end;
|
|
button {
|
|
margin-bottom: 7px;
|
|
margin-right: 7px;
|
|
border: 5px solid yellow;
|
|
padding: 5px;
|
|
width: fit-content;
|
|
}
|
|
}
|
|
|
|
#reg_label,
|
|
#mem_label {
|
|
font-size: 0.75em;
|
|
user-select: none;
|
|
}
|
|
|
|
#mem_label {
|
|
writing-mode: vertical-lr;
|
|
text-align: right;
|
|
margin-top: 5px;
|
|
user-select: none;
|
|
transform: scale(-1, -1);
|
|
}
|
|
|
|
#memory_bank_view {
|
|
display: flex;
|
|
#bank_boxes {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
$pad: 8px;
|
|
$border-width: 5px;
|
|
$border: $border-width solid var(--border);
|
|
button {
|
|
border-top: $border;
|
|
border-bottom: unset;
|
|
padding-inline: $pad + $border-width;
|
|
}
|
|
button:first-child {
|
|
border-left: $border;
|
|
padding-left: $pad;
|
|
}
|
|
button:last-child {
|
|
padding-right: $pad;
|
|
border-right: $border;
|
|
}
|
|
button.selected {
|
|
color: lightgray;
|
|
padding-block: 5px;
|
|
padding-inline: $pad;
|
|
border-inline: $border;
|
|
}
|
|
}
|
|
}
|
|
|
|
.invalid {
|
|
--color: var(--mem-invalid);
|
|
}
|
|
.constant {
|
|
--color: var(--mem-constant);
|
|
}
|
|
.register {
|
|
--color: var(--mem-register);
|
|
}
|
|
.memory {
|
|
--color: var(--mem-memory);
|
|
}
|
|
.instruction {
|
|
--color: var(--mem-instruction);
|
|
}
|
|
|
|
div#main.editor {
|
|
#memory,
|
|
#registers {
|
|
border-style: dashed;
|
|
div {
|
|
cursor: text;
|
|
}
|
|
}
|
|
}
|
|
|
|
#controls_bar {
|
|
grid-area: buttons;
|
|
|
|
display: flex;
|
|
gap: 10px;
|
|
#controls_buttons {
|
|
display: flex;
|
|
gap: inherit;
|
|
justify-content: inherit;
|
|
}
|
|
#save_load_buttons {
|
|
display: flex;
|
|
gap: inherit;
|
|
justify-content: inherit;
|
|
}
|
|
}
|
|
|
|
#edit_button {
|
|
aspect-ratio: 1;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
img {
|
|
min-height: 30px;
|
|
min-width: 30px;
|
|
&:hover {
|
|
filter: grayscale(100%) brightness(500%);
|
|
}
|
|
}
|
|
&.on img {
|
|
filter: grayscale(100%) brightness(500%);
|
|
}
|
|
}
|