various changes, aesthetic and functionality

This should fix the window drag not working, however I cannot test that.
As my WM doesn't support it, a Windows contributor will have to test it.

I also added an info button that opens the mod's page in your web
browser, this button is of course localized, along with that I localized
the placeholder in the search input.

There's also a few general aesthetic changes, like adding a tiny border
around #modsdiv and #browser.

4 files changed, 14 insertions, 4 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index 5695661..7b67822 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -100,6 +100,7 @@ function BrowserElFromObj(obj) {
 		title: pkg.name,
 		image: pkg.icon,
 		author: pkg.owner,
+		url: pkg.package_url,
 		download: pkg.download_url,
 		version: pkg.version_number,
 		description: pkg.description
@@ -147,6 +148,7 @@ function BrowserEl(properties) {
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description}</div>
 				<button onclick="installFromURL('${properties.download}')">${installstr}</button>
+				<button onclick="require('electron').shell.openExternal('${properties.url}')">${lang('gui.browser.info')}</button>
 				<button class="visual">${properties.version}</button>
 				<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
 			</div>
diff --git a/src/app/index.html b/src/app/index.html
index c2978bd..b861736 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -16,7 +16,7 @@
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<div id="misc">
-				<input id="search" placeholder="Search...">
+				<input id="search" placeholder="%%gui.browser.search%%">
 				<button id="close" onclick="Browser.toggle(false)">
 					<img src="icons/close.png">
 				</button>
diff --git a/src/app/main.css b/src/app/main.css
index 4f1ddc2..2791488 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -9,7 +9,11 @@
 	--selbg: rgba(80, 80, 80, 0.5);
 	--redbg: linear-gradient(45deg, var(--red), #FA4343);
 	--bluebg: linear-gradient(45deg, var(--blue), #7380ED);
+}
 
+#browser, #modsdiv {
+	outline: 1px solid #444444;
+	border: 3px solid var(--bg);
 }
 
 ::-webkit-scrollbar {
@@ -73,7 +77,7 @@ button {
 	bottom: var(--spacing);
 	transform: scale(0.98);
 	backdrop-filter: blur(15px);
-	border-radius: calc(var(--padding) / 2);
+	border-radius: calc(var(--padding) / 3);
 	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
@@ -556,7 +560,9 @@ code {
 
 /* drag control */
 
-#bgHolder {
+#bgHolder, 
+#overlay.shown + .mainContainer, 
+#overlay.shown + .gamesContainer {
 	user-select: none;
   	-webkit-app-region: drag;
 }
diff --git a/src/lang/en.json b/src/lang/en.json
index 6bef99f..c51c843 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -63,12 +63,14 @@
 	"gui.mods.installing": "Installing mod...",
 	"gui.mods.installedmod": "Installed mod!",
 
+	"gui.browser.info": "Info",
 	"gui.browser.madeby": "by",
+	"gui.browser.search": "Search...",
 	"gui.browser.update": "Update",
-	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 	"gui.browser.install": "Install",
 	"gui.browser.reinstall": "Re-Install",
 	"gui.browser.loading": "Loading mods...",
+	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",