aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-01-31 00:20:21 +0100
committer0neGal <mail@0negal.com>2023-01-31 00:20:21 +0100
commitff85ee5136d535a45ce87fa1d34b18eee24f09a2 (patch)
tree24ed4e4f47ba9f4aa49cba02dbcc3f898e0c3e95 /src/app
parentce3204a4dbbf7579fdc3ab066f2cba596562896a (diff)
downloadViper-ff85ee5136d535a45ce87fa1d34b18eee24f09a2.tar.gz
Viper-ff85ee5136d535a45ce87fa1d34b18eee24f09a2.zip
different colored switches
When a red switch is placed besides a red button that says "Remove", it makes it seem far more destructive to click that switch, even if it's not, and a blue color doesn't fit in very well either (perhaps we need more colors). And so because of all that the modlist switches are now orange, and we can easily add more colors. The switch colors overall are also far more vibrant now, as it looks far better that way.
Diffstat (limited to 'src/app')
-rw-r--r--src/app/css/theming.css12
-rw-r--r--src/app/index.html8
-rw-r--r--src/app/js/browser.js6
-rw-r--r--src/app/js/mods.js4
-rw-r--r--src/app/main.css13
5 files changed, 27 insertions, 16 deletions
diff --git a/src/app/css/theming.css b/src/app/css/theming.css
index 6d7e223..d92c42e 100644
--- a/src/app/css/theming.css
+++ b/src/app/css/theming.css
@@ -61,11 +61,11 @@ a:hover {
background: rgb(var(--red)) !important;
}
-.blue {background: rgb(var(--blue)) !important}
-.blue2 {background: rgb(var(--blue2)) !important}
+.bg-blue {background: rgb(var(--blue)) !important}
+.bg-blue2 {background: rgb(var(--blue2)) !important}
-.orange {background: rgb(var(--orange)) !important}
-.orange2 {background: rgb(var(--orange2)) !important}
+.bg-orange {background: rgb(var(--orange)) !important}
+.bg-orange2 {background: rgb(var(--orange2)) !important}
-.red {background: rgb(var(--red)) !important}
-.red2 {background: rgb(var(--red2)) !important}
+.bg-red {background: rgb(var(--red)) !important}
+.bg-red2 {background: rgb(var(--red2)) !important}
diff --git a/src/app/index.html b/src/app/index.html
index 0e96486..30bee9e 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -230,10 +230,10 @@
<div class="line">
<div class="text" id="modcount">%%gui.mods%%</div>
<div class="buttons modbtns">
- <button id="removeall" class="red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
- <button id="toggleall" class="orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
- <button id="installmod" class="blue" onclick="installmod()">%%gui.mods.install%%</button>
- <button id="findmod" class="blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+ <button id="removeall" class="bg-red2" onclick="mods.remove('allmods')">%%gui.mods.removeall%%</button>
+ <button id="toggleall" class="bg-orange2" onclick="mods.toggle('allmods')">%%gui.mods.toggleall%%</button>
+ <button id="installmod" class="bg-blue" onclick="installmod()">%%gui.mods.install%%</button>
+ <button id="findmod" class="bg-blue2" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
</div>
</div>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index 05bf01d..c859024 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -263,6 +263,10 @@ var Browser = {
}
}
+if (navigator.onLine) {
+ Browser.loadfront();
+}
+
function openExternal(url) {
require("electron").shell.openExternal(url);
}
@@ -362,7 +366,7 @@ function BrowserEl(properties) {
<div class="text">
<div class="title">${properties.title}</div>
<div class="description">${properties.description}</div>
- <button class="install blue" onclick=''>${installstr}</button>
+ <button class="install bg-blue" onclick=''>${installstr}</button>
<button class="info" onclick="Preview.set('${properties.url}')">${lang('gui.browser.view')}</button>
<button class="visual">${properties.version}</button>
<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
diff --git a/src/app/js/mods.js b/src/app/js/mods.js
index 6c2fc22..a2e4492 100644
--- a/src/app/js/mods.js
+++ b/src/app/js/mods.js
@@ -34,8 +34,8 @@ mods.load = (mods_obj) => {
<div class="text">
<div class="title">${mod.Name}</div>
<div class="description">${mod.Description}</div>
- <button class="switch on"></button>
- <button class="red" onclick="mods.remove('${mod.Name}')">Remove</button>
+ <button class="switch on orange"></button>
+ <button class="bg-red" onclick="mods.remove('${mod.Name}')">Remove</button>
<button class="visual">${mod.Version}</button>
<button class="visual">by ${mod.Author || "Unknown"}</button>
</div>
diff --git a/src/app/main.css b/src/app/main.css
index 671be13..5779fa8 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -120,7 +120,8 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
}
.switch.on {
- background: rgba(var(--red), 0.2) !important;
+ --on-color: var(--red);
+ background: rgba(var(--on-color), 0.4) !important;
}
.switch::after {
@@ -139,10 +140,16 @@ a, button, #close, #nsRelease, #vpReleaseNotes,
.switch.on::after {
left: 15px;
width: 20px;
- opacity: 0.5;
- background: rgb(var(--red));
+ opacity: 0.8;
+ background: rgb(var(--on-color));
}
+.switch.on.red2 {--on-color: var(--red2)}
+.switch.on.blue {--on-color: var(--blue)}
+.switch.on.blue2 {--on-color: var(--blue2)}
+.switch.on.orange {--on-color: var(--orange)}
+.switch.on.orange2 {--on-color: var(--orange2)}
+
.switch.on:hover::after {
transform: scale(1.2);
}