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.

2 files changed, 76 insertions, 1 deletions

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)}