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
0neGal · Apr 24, 2022 · b045d3f · b045d3f
1 parent c8fcc96
commit b045d3f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git 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
@@ -200,7 +200,7 @@ <h2>%%viper.menu.info.credits%%</h2>
 								<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
@@ -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;