aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-04-24 20:59:40 +0200
committer0neGal <mail@0negal.com>2022-04-24 20:59:40 +0200
commitb045d3f01a9d49b5ad391bcf3f1404900882c141 (patch)
tree6e21d2118fae7103730f96f166df07ad5394239d
parentc8fcc96cae62a8bb7c4374fc1c5889aa5466b701 (diff)
downloadViper-b045d3f01a9d49b5ad391bcf3f1404900882c141.tar.gz
Viper-b045d3f01a9d49b5ad391bcf3f1404900882c141.zip
more minor improvements to the UI
sped up some animations, added a few more colors to different places, overall just a slight spice up to the UI
-rw-r--r--src/app/browser.js4
-rw-r--r--src/app/index.html2
-rw-r--r--src/app/main.css25
3 files changed, 23 insertions, 8 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
index ba20656..e22ab3c 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -240,8 +240,8 @@ function BrowserEl(properties) {
<div class="text">
<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="install" onclick="installFromURL('${properties.download}')">${installstr}</button>
+ <button class="info" 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 4b3b79f..02a150f 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -200,7 +200,7 @@
<button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button>
<button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
<button id="installmod" onclick="installmod()">%%gui.mods.install%%</button>
- <button id="installmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
+ <button id="findmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
</div>
</div>
</div>
diff --git a/src/app/main.css b/src/app/main.css
index 1e051e1..99d806c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -1,7 +1,13 @@
: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;
@@ -172,7 +178,7 @@ button {
.popup .misc button img {
opacity: 0.6;
width: var(--height);
- transform: scale(0.6);
+ transform: scale(0.5);
height: var(--height) !important;
}
@@ -239,6 +245,10 @@ button {
margin-top: var(--spacing);
}
+.popup .el button.info {
+ background: rgb(var(--blue2));
+}
+
.popup .options {
color: white;
margin: calc(var(--padding) / 2);
@@ -392,7 +402,7 @@ img {pointer-events: none}
background-size: cover;
background-position: center;
background-repeat: no-repeat;
- transition: background-image 0.5s ease-in-out;
+ transition: background-image 0.1s ease-in-out;
filter: brightness(0.4) blur(2px) grayscale(0.6);
}
@@ -570,7 +580,7 @@ img {pointer-events: none}
margin-bottom: 10px;
border-radius: 10px;
background: var(--redbg);
- transition: 0.3s ease-in-out;
+ transition: 0.2s ease-in-out;
filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1));
}
@@ -640,8 +650,13 @@ a:hover {
}
#installmod {background: rgb(var(--blue))}
-#togglemod, #toggleall {background: rgb(var(--orange))}
-#removeall, #removemod {background: rgb(var(--red))}
+#findmod {background: rgb(var(--blue2))}
+
+#togglemod {background: rgb(var(--orange))}
+#toggleall {background: rgb(var(--orange2))}
+
+#removemod {background: rgb(var(--red))}
+#removeall {background: rgb(var(--red2))}
button:disabled {
opacity: 0.5;
pointer-events: none;