Computer/src/style/style.scss

@use "memory_registers";
@use "windows";
@use "buttons";
@use "vars";

* {
	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:
		".      regmemlabel .       cycles"
		".      registers   .       bank "
		"reset  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;
	}
	#labelcontainer {
		grid-area: regmemlabel;
	}
	#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 {
		grid-area: reset;
	}
}

#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;
	}
}

#labelcontainer {
	column-gap: 18px;
	font-size: 0.75em;
	display: flex;
	flex-direction: row;
	align-items: center;
	user-select: none;
}

#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%);
	}
}