feat(gui): egui color, sidebar, flat layout

tapa-visualizer/.editorconfig

@@ -16,3 +16,7 @@ insert_final_newline = true
 [*.{js,jsx,ts,tsx,mjs,cjs}]
 indent_style = space
 indent_size = 2
+
+[*.json]
+indent_style = space
+indent_size = 4

tapa-visualizer/css/button.css

@@ -5,19 +5,45 @@
 */
 
 .btn {
+	/* https://github.com/emilk/egui/blob/cf965aaa/crates/egui/src/style.rs#L1453 */
+	--btn-txt: #3C3C3C; /* rgb(60, 60, 60) */
+	--btn-bg: #E6E6E6; /* rgb(230, 230, 230) */
+	--btn-bg-hover: #DCDCDC; /* rgb(220, 220, 220) */
+	--btn-bg-active: #A5A5A5; /* rgb(165, 165, 165) */
+	--btn-bg-select: #90D1FF; /* rgb(144, 209, 255) */
+
 	position: relative;
+	box-sizing: border-box;
 	padding: 2px;
-	border: 1px solid #CCC;
-	border-radius: 2px;
+	border: none;
+	border-radius: 3px;
+	color: var(--btn-txt);
+	background-color: var(--btn-bg);
 	font-size: smaller; /* for non-<button> .btn element like <label> */
+	cursor: pointer;
+}
+
+.btn:hover, .btn:focus {
+	background-color: var(--btn-bg-hover);
+}
+.btn:active {
+	background-color: var(--btn-bg-active);
+}
+.btn:has(:checked) {
+	background-color: var(--btn-bg-select);
+}
+.btn:disabled {
+	color: gray;
+	background-color: transparent;
 }
 
 /* button text tooltip
 	set top / right / bottom / left to position the text tooltip;
 	Center .btn-text in the parent element, instead of translate(-50%) */
 .btn > .btn-text {
 	position: absolute;
-	padding: .5rem;
+	z-index: 10;
+	padding: .5rem .4rem;
 	border: 1px solid;
 	border-radius: 4px;
 	background-color: white;
@@ -42,34 +68,30 @@
 	display: none;
 }
 
+/* btn in header */
 header .btn {
 	display: inline-flex;
 	flex-direction: column;
 	align-items: center;
 }
 header .btn > .btn-text {
-	top: 1.9rem;
+	top: 2rem;
 }
 header .btn > .btn-text::before {
 	top: -4px;
 	left: calc(50% - 4px);
 	transform: rotate(45deg);
 }
 
-/* Don't wrap "Toggle Sidebar" on wide screen */
-@media (min-width: 75em) { /* 75em * 16px = 1200px = xl in Bootstrap */
-	header { padding: .1rem 2.5rem; }
-	header .btn > .btn-text { white-space: pre; }
-}
-
-aside > .tabs .btn {
+/* btn in .aside-tabs */
+.aside-tabs .btn {
 	display: flex;
 	align-items: center;
 }
-aside > .tabs .btn > .btn-text {
-	right: 1.5rem;
+.aside-tabs .btn > .btn-text {
+	right: 2rem;
 }
-aside > .tabs .btn > .btn-text::before {
+.aside-tabs .btn > .btn-text::before {
 	top: calc(50% - 4px);
 	right: -4px;
 	transform: rotate(135deg);

tapa-visualizer/css/style.css

@@ -6,28 +6,47 @@
 
 @import url("./button.css");
 
-/* reset */
-header ul,
-aside ul {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
+/* Ref: light theme of egui
+https://github.com/emilk/egui/blob/cf965aaa/crates/egui/src/style.rs#L1339 */
+:root {
+	--fg1: #3C3C3C; /* rgb(60, 60, 60) */
+	--fg2: #505050; /* rgb(80, 80, 80) */
+	--bg1: #FCFCFC; /* rgb(252, 252, 252) ≈ from_additive_luminance(5) */
+	--bg2: #F8F8F8; /* rgb(248, 248, 248) */
+	--border: #BEBEBE; /* rgb(190, 190, 190) */
+	--select: #90D1FF; /* rgb(144, 209, 255) */
+	--warn:   #FF6400; /* rgb(255, 100, 0) */
+	--error:  #FF0000; /* rgb(255, 0, 0) */
+
+	color: var(--fg1);
+	background-color: var(--bg1);
 }
 
+:link {
+	color: #009BFF; /* rgb(0, 155, 255) */
+}
+::selection {
+	background-color: #90D1FF;
+}
 
-/* body */
-body {
-	display: grid;
-	grid-template: auto 1fr / auto 1fr;
+header,
+.aside-tabs,
+.aside-contents details > summary {
+	color: var(--fg2);
+	background-color: var(--bg2);
 }
 
 /* header */
 header {
-	grid-column: 1 / -1;
 	box-sizing: border-box;
 	min-height: 2rem;
-	padding: .1rem 1rem;
-	border-bottom: 1px solid gray;
+	padding: .1rem 1.5rem;
+}
+
+/* Don't wrap btn tooltip like "Toggle Sidebar" on wide screen */
+@media (min-width: 75rem) { /* 75rem * 16px = 1200px = xl in Bootstrap */
+	header { padding: .1rem 2.75rem; }
+	header .btn > .btn-text { white-space: pre; }
 }
 
 header,
@@ -40,20 +59,13 @@ header .flex {
 header .tools { margin-left: auto; }
 header .tools hr { height: 1rem; margin: 0; }
 
-header .grouping > li > label:hover {
-	background-color: #EEE;
-}
-header .grouping > li > label:has(:checked) {
-	background-color: #CCC;
-}
 
 /* main */
-
 main {
 	width: 75vw;
 	min-width: 40vw;
 	max-width: 85vw;
-	overflow: auto;
+	overflow: hidden;
 	resize: horizontal;
 }
 
@@ -62,21 +74,77 @@ main > .graph-container > .tooltip {
 }
 
 /* aside */
-
-aside {
+.aside-tabs {
 	display: flex;
+	flex-direction: column;
+	gap: .5rem;
+	padding: .5rem .25rem;
+}
+
+.aside-contents {
+	flex: 1;
+	font-size: .9rem;
+}
+
+.aside-contents section {
+	display: none;
+}
+.aside-tabs:has(.btn-details     > input:checked) + .aside-contents > .details,
+.aside-tabs:has(.btn-connections > input:checked) + .aside-contents > .connections,
+.aside-tabs:has(.btn-source      > input:checked) + .aside-contents > .source {
+	display: block;
 }
 
-aside > .tabs {
+.aside-contents details > summary,
+.aside-contents details > div {
+	contain: content;
+	box-sizing: border-box;
+	border-bottom: 1px solid var(--border);
+}
+
+/* aside contents - summary */
+.aside-contents .source-summary,
+.aside-contents details > summary {
 	display: flex;
-	flex-direction: column;
-	gap: .5rem;
+	justify-content: space-between;
+	align-items: center;
 	padding: .5rem;
-	border-left: 1px solid gray;
-	border-right: 1px solid gray;
+	line-height: 1;
+}
+
+.aside-contents details > summary {
+	list-style: none;
+}
+.aside-contents details > summary > .lucide-chevron-down {
+	transition: transform .1s linear;
+}
+.aside-contents details[open] > summary > .lucide-chevron-down {
+	transform: rotate(180deg);
 }
 
+.aside-contents details > div > p:only-child {
+	text-align: center;
+}
 
-aside > .contents {
-	flex: 1;
+/* aside contents - ol ul dl */
+.aside-contents ol, ul {
+	padding-inline-start: 1em;
+}
+.aside-contents ul {
+	list-style-type: "• ";
+}
+.aside-contents dl {
+	margin: 0;
+	padding: .3rem .5rem;
+}
+.aside-contents dl > dt {
+	color: var(--fg2);
+	font-weight: bold;
+	font-size: .85rem;
+}
+.aside-contents dl > dd {
+	margin: 0;
+	margin-top: .1rem;
+	margin-bottom: .25rem;
+	font-family: monospace;
 }