1 files changed, 81 insertions, 6 deletions

diff --git a/src/app/main.css b/src/app/main.css
index de0db46..d3d3b72 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -30,8 +30,83 @@
 	cursor: pointer;
 }
 
-#winbtns {
+#browser {
+	--spacing: calc(var(--padding) * 3);
+
+	z-index: 2;
+	opacity: 0.0;
+	position: fixed;
+	overflow-y: scroll;
+	top: var(--spacing);
+	pointer-events: none;
+	left: var(--spacing);
+	background: var(--bg);
+	right: var(--spacing);
+	bottom: var(--spacing);
+	transform: scale(0.98);
+	backdrop-filter: blur(15px);
+	border-radius: calc(var(--padding) / 2);
+	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
+}
+
+#browser.shown {
+	opacity: 1.0;
+	pointer-events: all;
+	transform: scale(1.0);
+}
+
+#overlay {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	z-index: 1;
+	opacity: 0.0;
+	position: fixed;
+	background: var(--bg);
+	pointer-events: none;
+	transition: opacity 0.15s ease-in-out;
+}
+
+#overlay.shown {
+	opacity: 0.8;
+	pointer-events: all;
+}
+
+#browser .el, #browser #search {
+	--spacing: calc(var(--padding) / 2);
+	--height: calc(var(--padding) * 2.5);
+
+	color: white;
+	display: flex;
+	align-items: center;
+	height: var(--height);
+	margin: var(--spacing);
+	padding: var(--spacing);
+	background: var(--selbg);
+	border-radius: var(--spacing);
+	width: calc(100% - var(--spacing) * 4);
+}
+
+#browser #search {
+	--height: calc(var(--padding) * 1.5);
+
+	border: none;
+	outline: none;
+	width: calc(100% - var(--spacing) * 2);
+}
+
+#browser .el .image, #browser .el .image img {
+	width: var(--height);
+	height: var(--height);
+	margin-right: var(--spacing);
+}
+
+#browser .el .title {font-size: 1.2em}
+#browser .el .description {font-size: 0.8em}
+
+#winbtns {
+	z-index: 2;
 	display: flex;
 	position: fixed;
 	top: var(--padding);
@@ -58,9 +133,10 @@ body {
 	margin: 0;
 	overflow: hidden;
 	user-select: none;
-	font-family: "Roboto", sans-serif;
 }
 
+body, button, input {font-family: "Roboto", sans-serif}
+
 button {outline: none}
 b, strong {font-weight: 700}
 body, input, button {font-weight: 500}
@@ -85,9 +161,8 @@ img {pointer-events: none}
 	left: 0;
 	right: 0;
 	bottom: 0;
-	pointer-events: none;
-	position: fixed;
-	transform: scale(1.1);
+	z-index: -1;
+	position: absolute;
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
@@ -395,6 +470,6 @@ code {
   	-webkit-app-region: drag;
 }
 
-a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod {
+a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay {
 	-webkit-app-region: no-drag;
 }