index.css

/**
Copyright © <BalaM314>, 2025. All Rights Reserved.
This file is part of soodocode. Soodocode is open source and is available at https://github.com/BalaM314/soodocode

This file contains CSS styles for the webpage.
*/

:root {
	/* variables */
	--header-color: #EA0;
	--background-image-url: url("https://balam314.github.io/starfield.png");
	--header-icon-size: 3em;
	--header-text-min-width: 200px;
	--outer-border-color: #008000;
	--container-background-color: #0048;
	--text-input-background-color: #050505;
	--program-block-accent-color: #0FF6;
	--program-expression-outline-color: #0FF8;
	--program-expression-background-color: #0FF2;
	--output-div-border-color: green;

	/* settings */
	font-family: sans-serif;
}
* {
	box-sizing: border-box;
}

body {
	margin: 0px;
	background-color: #000;
	background-image: var(--background-image-url);
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}
html {
	height: 100%;
	overflow: hidden;
}

#header {
	display: grid;
	width: 100%;
	grid-template-columns: var(--header-icon-size) minmax(var(--header-text-min-width), 1fr) var(--header-icon-size);
	margin-bottom: 30px;
}

/* TODO theme */
#theme-button {
	margin-left: auto;
	width: var(--header-icon-size);
	height: var(--header-icon-size);
	place-content: center;
	background-color: rgb(222, 222, 222);
	display: grid;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	border: none;
	transition: box-shadow 400ms ease;
	display: none;
}

button {
	background-color: #070737;
	color: white;
	border: 3px solid #171747;
	border-radius: 5px;
	padding: 4px 10px;
}

button:hover {
	background-color: #101040;
	border: 3px solid #202050;
}

button:active {
	background-color: #171747;
	border: 3px solid #272755;
}

#header-text {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	color: var(--header-color);
	user-select: none;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-name: none;
}

#github-icon {
	background-image:url('https://raw.githubusercontent.com/devicons/devicon/master/icons/github/github-original.svg');
	width: var(--header-icon-size);
	height: var(--header-icon-size);
	display: block;
	transition: box-shadow 400ms ease;
	border-radius: 100%;
	filter: invert();
}
#github-icon:hover {
	box-shadow: 0 0 19px -1px grey;
}

#outer {
	--gap: 10px;
	display: grid;
	grid-template-columns: repeat(2, calc(50vw - (var(--gap) / 2)));
	gap: var(--gap);
	width: 100%;
	height: 100%;
}
#left, #right {
	height: 100%;
	width: 100%;
	font-size: 20px;
	color: #f5f5f5;
}
#right {
	padding: 15px;
	background-color: var(--container-background-color);
	overflow-y: auto;
	background-color: #0004; /* This actually sets the scrollbar color to whatever the browser wants for dark theme */
}
@media screen and (max-width: 400px) {
	#right {
		padding: 2px;
	}
}

#soodocode-input {
	font-size: larger;
	padding: 10px;
	background-color: var(--text-input-background-color);
	color: #FFF;
	tab-size: 4;
	width: 100%;
	height: 100%;
	resize: none;
	border: 2px solid white;
	border-left: none;
	border-top: none;
	border-bottom: none;
}
@media screen and (max-width: 600px) {
	#outer {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
	#container {
		margin: 0px;
		padding: 15px 1.5vw;
		border-width: 5px;
		background-color: #0046;
	}
	#soodocode-input {
		margin: 0px;
		width: 100%;
	}
}
button {
	font-size: larger;
}
#input-wrapper {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
.behind {
	position: absolute;
	z-index: -1;
}
.hidden {
	display: none;
}

table {
	border-collapse: collapse;
}

td {
	border: 2px solid orange;
}

th {
	border: 2px solid purple;
}

td, th {
	padding: 5px;
}

.output-div {
	min-width: 100px;
	width: fit-content;
	max-width: calc(100% - 40px);
	min-height: 50px;
	background-color: black;
	border: 2px dashed var(--output-div-border-color);
	font-family: 'Courier New', Courier, monospace;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	margin: 8px;
	padding: 5px;
	animation-duration: 1000ms;
	animation-timing-function: cubic-bezier(0.08, 1.05, 0.39, 0.87);
	animation-fill-mode: both;
	tab-size: 4;
	/* animation-name: flash-output; */
}
.output-div.state-success {
	--output-div-border-color: green;
}
.output-div.state-error {
	--output-div-border-color: #F22;
}
@media screen and (max-width: 400px) {
	.output-div {
		max-width: unset;
	}
}

.sth-number {
	color: #B5CEA8;
}
.sth-string {
	color: #CE9178;
}
.sth-char {
	color: #CE9178;
}
.sth-boolean {
	color: #569cd6;
}
.sth-date {
	color: #aea8ce;
}
.sth-type {
	color: #4ec9b0;
}
.sth-bracket {
	color: #ffd700;
}
.sth-brace {
	color: #da70d6;
}
.sth-invalid {
	color: #ff4444;
}
.sth-range {
	text-decoration: underline;
}

.error-range-inner {
	text-decoration: underline wavy red;
	text-underline-offset: 1.5px;
}
.error-range-outer {
	background-color: #FF03;
}
.error-message {
	color: red;
}
.error-message-help-clickable {
	cursor: pointer;
	color: #DDF;
	text-decoration: underline solid #DDF 1px;
}
.error-message-help-clickable:hover {
	color: #AFF;
	text-decoration: underline solid #AFF 1px;
}
.error-message-help-clickable:active {
	color: #9FF;
	text-decoration: underline solid #9FF 1px;
}
.error-message-help-clickable.error-message-help-clicked::after {
	content: "✅🔄️";
	display: inline-block;
}

.program-display-inner {
	border-left: 15px solid var(--program-block-accent-color);
	padding: 5px;
}
.program-display-outer {
	border-left: 4px solid var(--program-block-accent-color);
	border-top: 2px solid var(--program-block-accent-color);
	border-bottom: 2px solid var(--program-block-accent-color);
	padding: 3px;
}

.expression-display-block {
	background-color: var(--program-expression-background-color);
}
.expression-container {
	border: 1px solid var(--program-expression-outline-color);
	text-shadow: 0 0 2px black;
}

.display-scroller {
	max-height: 600px;
	width: fit-content;
	overflow-y: scroll;
	border-top: 5px solid gray;
	border-bottom: 5px solid gray;
}

.dialog {
	width: 80vw;
	height: 90vh;
	position: relative;
	background-color: #001;
	color: white;
}
@media screen and (max-width: 400px) {
	.dialog {
		width: 100vw;
		height: 100vh;
		max-width: 100vw;
		max-height: 100vh;
		margin: 0;
		padding: 5px;
		position: relative;
		background-color: #001;
		color: white;
	}	
}
.dialog::backdrop {
	backdrop-filter: blur(2px) brightness(0.7);
	/* background-color: salmon; */
}
.dialog-header {
	font-size: 3em;
	text-align: center;
}
.dialog-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 40px;
}
.dialog-button {
	white-space: nowrap;
}
.settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	column-gap: 8px;
}
@media screen and (max-width: 430px) {
	.settings-grid {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: 8px;
	}
}
.settings-grid-item label {
	font-size: 25px;
	color: #CFC;
}
.settings-section-header {
	font-size: 35px;
	color: yellow;
	display: block;
	margin-top: 20px;
	margin-bottom: 3px;
	border-bottom: 3px solid #FFF5;
}
.settings-section-header:first-of-type {
	margin-top: 0;
}
.settings-description {
	font-size: 18px;
	color: #CCC;
}
.settings-grid-item input {
	margin-right: 10px;
}
.settings-grid-item input:invalid {
	background-color: #FCC;
}
#settings-dialog-footer {
	text-align: center;
	margin-top: 60px;
	padding: 15px 0;
	background-color: #111;
	border: 3px solid #333;
	font-size: 140%;
}
#settings-dialog-reset-default {
	color: #B33;
	font-weight: bold;
}

#files-dialog-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#files-dialog-select-line {
	padding-bottom: 5px;
	font-size: 1.4em;
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 450px) {
	#files-dialog-select-line {
		display: block;
	}
}
#files-dialog-select {
	font-size: 0.7em;
	border: 3px solid green;
	border-radius: 3px;
	min-width: 250px;
	padding: 3px;
}
#files-dialog-select-line-left, #files-dialog-select-line-right {
	gap: 15px;
}
#files-dialog-contents {
	font-size: larger;
	padding: 10px;
	background-color: var(--text-input-background-color);
	color: #FFF;
	tab-size: 4;
	width: 100%;
	height: 100%;
	resize: none;
}
#files-dialog-contents:disabled {
	cursor: not-allowed;
}

.sample-programs-category {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	row-gap: 8px;
}
@media screen and (max-width: 430px) {
	.sample-programs-category {
		grid-template-columns: 1fr;
	}
}
.sample-programs-subheader {
	font-size: 35px;
	color: yellow;
	display: block;
	margin-top: 20px;
	margin-bottom: 3px;
	border-bottom: 3px solid #FFF5;
}

.sample-programs-name {
	font-size: 25px;
	color: #CFC;
	margin-bottom: 6px;
}

.sample-programs-item {
	cursor: pointer;
	padding: 0 6px;
	user-select: none;
}
.sample-programs-item:hover {
	background-color: #FFF2;
}

.text-button {
	cursor: pointer;
}
.text-button:hover {
	text-shadow: 0 0 5px white;
}

h2 {
	margin: 0;
	margin-top: 10px;
	color: #EE0;
}

a {
	color: #00C400;
}
a:hover {
	color: #00EC00;
}
a:active {
	color: #0F0;
}

div.horizontal {
	display: flex;
	gap: 10px;
	align-items: baseline;
}
@media screen and (max-width: 400px) {
	div.horizontal {
		display: block;
		/* Un-flex on small screens */
	}
}

input[type="checkbox"] {
  transform: translateY(-5px) scale(1.5);
}

footer {
	position: sticky;
	top: 100%;
}

@keyframes sizebounce {
	0% {
		transform: scale(1.0);
	}
	25% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.0);
	}
	75% {
		transform: scale(1.3);
	}
	100% {
		transform: scale(1.0);
	}
}

@keyframes highlight-output-div {
	0% {
		background-color: #444;
	}
	100% {
		background-color: #000;
	}
}