improvements to the preview

It now looks a lot better overall. Still missing a few things, like
showing when it's loading, but besides that it's pretty much done.

4 files changed, 91 insertions, 60 deletions

diff --git a/src/app/browser.js b/src/app/browser.js
index b3b1b59..5a5a752 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -437,10 +437,17 @@ events.forEach((event) => {
 });
 
 view.addEventListener("dom-ready", () => {
-	view.insertCSS(fs.readFileSync(__dirname + "/css/webview.css", "utf8"));
+	let css = [
+		fs.readFileSync(__dirname + "/css/theming.css", "utf8"),
+		fs.readFileSync(__dirname + "/css/webview.css", "utf8")
+	]
+
+	view.insertCSS(css.join(" "));
 })
 
 let checks = document.querySelectorAll(".check");
 for (let i = 0; i < checks.length; i++) {
 	checks[i].setAttribute("onclick", "this.classList.toggle('checked');Browser.loadfront();search.value = ''")
 }
+
+Preview.set("https://northstar.thunderstore.io/package/odds/DamageFlyout/")
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
new file mode 100644
index 0000000..2d45b1d
--- /dev/null
+++ b/src/app/css/theming.css
@@ -0,0 +1,62 @@
+/*
+   the only reason some of these properties have an !important property
+   is for it to overwrite Thunderstore's CSS in the preview <webview>
+*/
+
+:root {
+	--red: 199, 119, 127 !important;
+	--red2: 181 97 105;
+
+	--blue: 129, 161, 193;
+	--blue2: 139, 143, 185;
+
+	--orange: 213, 151, 131;
+	--orange2: 197 129 107;
+
+
+	--padding: 25px;
+
+	--bg: rgba(0, 0, 0, 0.5);
+	--selbg: rgba(80, 80, 80, 0.5);
+	--redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343);
+	--bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED);
+}
+
+body, button, input {
+	font-family: "Roboto", sans-serif !important;
+}
+
+body, button, img, a {
+	user-select: none;
+	-webkit-user-drag: none;
+}
+
+a {
+	text-decoration: none !important;
+	color: rgb(var(--red)) !important;
+	transition: filter 0.2s ease-in !important;
+}
+
+a:hover {
+	filter: brightness(80%) !important;
+}
+
+
+::-webkit-scrollbar {
+	width: 8px !important;
+}
+ 
+::-webkit-scrollbar-track {
+	border-radius: 10px !important;
+	background: transparent !important;
+}
+ 
+::-webkit-scrollbar-thumb {
+	border-radius: 10px !important;
+	background: rgb(var(--red)) !important;
+}
+
+::selection {
+	color: black !important;
+	background: rgb(var(--red)) !important;
+}
diff --git a/src/app/css/webview.css b/src/app/css/webview.css
index 4a3fd85..9e26b5d 100644
--- a/src/app/css/webview.css
+++ b/src/app/css/webview.css
@@ -1 +1,14 @@
-/* this gets imported into the preview <webview> */
+body {
+	overflow-x: hidden;
+	background: transparent !important;
+	background-color: transparent !important;
+}
+
+.navbar, .bottom-padding,
+.card-header, .breadcrumb,
+.list-group, .mb-4, .my-2, .mt-2 {
+	display: none !important;
+}
+
+.mt-2.mb-2 {display: block !important}
+.card {transform: translateY(-1.0rem)}
diff --git a/src/app/main.css b/src/app/main.css
index d51509b..e4c6a2c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,58 +1,15 @@
-:root {
-	--red: 199, 119, 127;
-	--red2: 181 97 105;
-
-	--blue: 129, 161, 193;
-	--blue2: 139, 143, 185;
-
-	--orange: 213, 151, 131;
-	--orange2: 197 129 107;
-
-
-	--padding: 25px;
-
-	--bg: rgba(0, 0, 0, 0.5);
-	--selbg: rgba(80, 80, 80, 0.5);
-	--redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343);
-	--bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED);
-}
+@import "css/theming.css";
 
 .popup, #modsdiv {
 	outline: 1px solid #444444;
 	border: 3px solid var(--bg);
 }
 
-::-webkit-scrollbar {
-	width: 8px;
-}
- 
-::-webkit-scrollbar-track {
-	border-radius: 10px;
-	background: transparent;
-}
- 
-::-webkit-scrollbar-thumb {
-	border-radius: 10px;
-	background: rgb(var(--red));
-}
-
-::selection {
-	color: black;
-	background: rgb(var(--red));
-}
-
 body {
 	margin: 0;
 	overflow: hidden;
 }
 
-body, button, input {font-family: "Roboto", sans-serif}
-
-body, button, img, a {
-	-webkit-user-drag: none;
-	user-select: none;
-}
-
 button {outline: none}
 b, strong {font-weight: 700}
 body, input, button {font-weight: 500}
@@ -98,8 +55,8 @@ button {
 }
 
 .popup.small {
-	left: 30vw;
-	right: 30vw;
+	left: 20vw;
+	right: 20vw;
 	top: calc(var(--padding) * 2);
 	bottom: calc(var(--padding) * 2);
 }
@@ -133,8 +90,10 @@ button {
 }
 
 .popup webview {
-	width: 100%;
-	height: 100%;
+	width: 78%;
+	margin: 0 auto;
+	margin-top: calc(var(--spacing) / 2);
+	height: calc(100% - calc(var(--spacing) / 2));
 }
 
 .popup .el, .popup .misc, .popup .loading {
@@ -629,16 +588,6 @@ img {pointer-events: none}
 	background: var(--bluebg);
 }
 
-a {
-	color: rgb(var(--red));
-	text-decoration: none;
-	transition: filter 0.2s ease-in;
-}
-
-a:hover {
-	filter: brightness(80%);
-}
-
 #nsContent .contentMenu {
 	margin-bottom: 0;
 }