move web source files to web/,

move dev configs to config/
2025-02-24 20:36:51 +00:00
parent a80492605d
commit 84cbe0e45d
66 changed files with 18 additions and 28 deletions
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -0,0 +1,176 @@
+:root {
+	--negative-color: #f00;
+	--positive-color: #0f0;
+	--highlight-color: yellow;
+	--lightbg-text-color: black;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root, :root.dark-theme {
+		--main-bg-color: #404040;
+		--main-text-color: white;
+		--main-card-bg-color: #202020;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
+		--main-table-header-bg-color: black;
+		--main-input-bg-color: #404040;
+	}
+
+	:root.light-theme {
+		--main-bg-color: white;
+		--main-text-color: black;
+		--main-card-bg-color: white;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
+		--main-table-header-bg-color: #808080;
+		--main-input-bg-color: white;
+	}
+}
+
+@media screen and (prefers-color-scheme: light) {
+	:root, :root.light-theme {
+		--main-bg-color: white;
+		--main-text-color: black;
+		--main-card-bg-color: white;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
+		--main-table-header-bg-color: #808080;
+		--main-input-bg-color: white;
+	}
+
+	:root.dark-theme {
+		--main-bg-color: #404040;
+		--main-text-color: white;
+		--main-card-bg-color: #202020;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
+		--main-table-header-bg-color: black;
+		--main-input-bg-color: #404040;
+	}
+}
+
+html {
+	box-sizing: border-box;
+	background-color: var(--main-bg-color);
+}
+
+* {
+	font-family: monospace;
+}
+
+body {
+	min-height: 100vh;
+	max-width: 100vw;
+	display: grid;
+	grid-template-rows: auto 1fr;
+}
+
+main, dialog {
+	max-width: 100vw;
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
+}
+
+main {
+	padding: 0 16px 16px;
+}
+
+.w3-card {
+	background-color: var(--main-card-bg-color);
+	box-shadow: var(--main-card-box-shadow);
+}
+
+.w3-card + .w3-card {
+	margin-top: 16px;
+}
+
+th {
+	background-color: var(--main-table-header-bg-color);
+}
+
+td {
+	background-color: var(--main-card-bg-color);
+}
+
+input, select, textarea {
+	background-color: var(--main-input-bg-color);
+	color: var(--main-text-color);
+}
+
+img.clickable, svg.clickable {
+	cursor: pointer;
+}
+
+img, svg {
+	height: 1em;
+	width: 1em;
+	color: var(--main-text-color)
+}
+
+hr, * {
+	border-color: var(--main-text-color);
+}
+
+.flex {
+	display: flex;
+}
+
+.row {
+	flex-direction: row;
+	column-gap: 10px;
+	align-items: center;
+}
+
+.wrap {
+	flex-wrap: wrap;
+	row-gap: 10px;
+}
+
+.nowrap {
+	flex-wrap: nowrap;
+}
+
+.hidden {
+	visibility: hidden;
+}
+
+.none {
+	display: none;
+}
+
+.spacer {
+	min-height: 1em;
+}
+
+@media screen and (width >= 440px) {
+	button .large {
+		display: block;
+	}
+
+	button .small {
+		display: none;
+	}
+}
+
+@media screen and (width <= 440px) {
+	button .large {
+		display: none;
+	}
+
+	button .small {
+		display: block;
+	}
+}
+
+/* add hide large class similar to w3-hide-medium and w3-hide-small */
+@media (width >=993px) {
+	.w3-hide-large {
+		display: none !important;
+	}
+}
+
+/* fix edge case in w3-hide-medium where width between 992 and 993 */
+@media (width <=993px) and (width >=601px){
+	.w3-hide-medium{display:none!important}
+}
+
+/* fix edge case in w3-hide-small when width between 600 and 601 */
+@media (width <=601px) {
+	.w3-hide-small{display:none!important}
+}