fixed settings' animation messing with tooltip

2 files changed, 15 insertions, 7 deletions

diff --git a/src/app/index.html b/src/app/index.html
index 2b2abd1..477cd9a 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -12,9 +12,15 @@
 		<div id="toasts"></div>
 
 		<div id="winbtns">
-			<div id="settings" tooltip="%%tooltip.settings%%" onclick="Settings.toggle(true)"></div>
-			<div id="minimize" tooltip="%%tooltip.minimize%%" onclick="ipcRenderer.send('minimize')"></div>
-			<div id="close" tooltip="%%tooltip.close%%" onclick="ipcRenderer.send('exit')"></div>
+			<div id="settings" tooltip="%%tooltip.settings%%" onclick="Settings.toggle(true)">
+				<img src="icons/settings.png">
+			</div>
+			<div id="minimize" tooltip="%%tooltip.minimize%%" onclick="ipcRenderer.send('minimize')">
+				<img src="icons/minimize.png">
+			</div>
+			<div id="close" tooltip="%%tooltip.close%%" onclick="ipcRenderer.send('exit')">
+				<img src="icons/close.png">
+			</div>
 		</div>
 
 		<div id="dragUI">
diff --git a/src/app/main.css b/src/app/main.css
index fa2fff2..6b10ff2 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -57,11 +57,13 @@ button:active {filter: brightness(90%)}
 	margin-right: calc(var(--padding) / 2);
 }
 
-#winbtns #close {background-image: url("icons/close.png")}
-#winbtns #minimize {background-image: url("icons/minimize.png")}
-#winbtns #settings {background-image: url("icons/settings.png")}
+#winbtns div img {
+	width: 100%;
+	height: 100%;
+	transition: transform 0.25s ease-in-out;
+}
 
-#winbtns #settings:hover {
+#winbtns #settings:hover img {
 	transform: rotate(90deg);
 }