aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-05-17 00:46:40 +0200
committer0neGal <mail@0negal.com>2022-05-17 00:46:40 +0200
commit17a0a0e752ef515e4ea1e735e52efdb81d63f7dd (patch)
tree16bc3e4d956cee901dd386f3ad0b0b3ff94316d3
parent31545f96ac56e0bbc7d0ed59f86015d693d464d9 (diff)
downloadViper-17a0a0e752ef515e4ea1e735e52efdb81d63f7dd.tar.gz
Viper-17a0a0e752ef515e4ea1e735e52efdb81d63f7dd.zip
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.
-rw-r--r--src/app/browser.js9
-rw-r--r--src/app/css/theming.css62
-rw-r--r--src/app/css/webview.css15
-rw-r--r--src/app/main.css65
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;
}