4 files changed, 61 insertions, 12 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
index 1fe6930..ae3e453 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,11 +1,28 @@
-function Browser() {
+function Browser(state) {
+	if (state) {
+		overlay.classList.add("shown")
+		browser.classList.add("shown")
+		return
+	} else if (! state) {
+		if (state != undefined) {
+			overlay.classList.remove("shown")
+			browser.classList.remove("shown")
+			return
+		}
+	}
+
+	overlay.classList.toggle("shown")
 	browser.classList.toggle("shown")
 };Browser()
 
+document.body.addEventListener("keyup", (e) => {
+	if (e.key == "Escape") {Browser(false)}
+})
+
 function BrowserEl(properties) {
 	properties = {
 		title: "No name",
-		image: "",
+		image: "icons/no-image.png",
 		author: "Unnamed Pilot",
 		description: "No description",
 		...properties
diff --git a/src/app/icons/no-image.png b/src/app/icons/no-image.png
new file mode 100644
index 0000000..43265d1
--- /dev/null
+++ b/src/app/icons/no-image.png
diff --git a/src/app/index.html b/src/app/index.html
index 424265e..0866816 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -13,7 +13,10 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
-		<div id="browser"></div>
+		<div id="overlay" onclick="Browser()"></div>
+		<div id="browser">
+			<input id="search" placeholder="Search...">
+		</div>
 		
 		<nav class="gamesContainer">
 			<button id="vpBtn" onclick="page(0)"></button>
diff --git a/src/app/main.css b/src/app/main.css
index a2c144c..d3d3b72 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -33,7 +33,7 @@
 #browser {
 	--spacing: calc(var(--padding) * 3);
 
-	z-index: 1;
+	z-index: 2;
 	opacity: 0.0;
 	position: fixed;
 	overflow-y: scroll;
@@ -43,17 +43,37 @@
 	background: var(--bg);
 	right: var(--spacing);
 	bottom: var(--spacing);
+	transform: scale(0.98);
 	backdrop-filter: blur(15px);
-	transition: opacity 0.15s ease-in-out;
 	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 .el, #browser #search {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 2.5);
 
@@ -68,16 +88,25 @@
 	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: 1;
+	z-index: 2;
 	display: flex;
 	position: fixed;
 	top: var(--padding);
@@ -104,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}
@@ -131,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;
@@ -441,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;
 }