window buttons are no longer hidden behind popups

5 files changed, 19 insertions, 10 deletions

diff --git a/src/app/css/popups.css b/src/app/css/popups.css
index 5147aaf..7ece7e3 100644
--- a/src/app/css/popups.css
+++ b/src/app/css/popups.css
@@ -7,17 +7,19 @@
 
 .popup {
 	--spacing: var(--padding);
+	--top-spacing: calc(var(--spacing) + calc(var(--spacing) * 1.6));
 
 	z-index: 2;
 	opacity: 0.0;
 	position: fixed;
 	overflow-y: scroll;
-	top: var(--spacing);
 	pointer-events: none;
 	left: var(--spacing);
-	background: var(--bg);
 	right: var(--spacing);
 	bottom: var(--spacing);
+	top: var(--top-spacing);
+
+	background: var(--bg);
 	transform: scale(0.98);
 	backdrop-filter: blur(15px);
 	border-radius: calc(var(--padding) / 3);
@@ -54,8 +56,9 @@
 }
 
 #overlay.shown {
-	opacity: 0.8;
+	opacity: 1.0;
 	pointer-events: all;
+	backdrop-filter: blur(3px);
 }
 
 /* browser/preview popup { */
diff --git a/src/app/index.html b/src/app/index.html
index 477cd9a..8fbcb8a 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -12,13 +12,13 @@
 		<div id="toasts"></div>
 
 		<div id="winbtns">
-			<div id="settings" tooltip="%%tooltip.settings%%" onclick="Settings.toggle(true)">
+			<div id="settings" tooltip="%%tooltip.settings%%" tooltip-position="horizontal" onclick="Settings.toggle()">
 				<img src="icons/settings.png">
 			</div>
-			<div id="minimize" tooltip="%%tooltip.minimize%%" onclick="ipcRenderer.send('minimize')">
+			<div id="minimize" tooltip="%%tooltip.minimize%%" tooltip-position="horizontal" onclick="ipcRenderer.send('minimize')">
 				<img src="icons/minimize.png">
 			</div>
-			<div id="close" tooltip="%%tooltip.close%%" onclick="ipcRenderer.send('exit')">
+			<div id="close" tooltip="%%tooltip.close%%" tooltip-position="horizontal" onclick="ipcRenderer.send('exit')">
 				<img src="icons/close.png">
 			</div>
 		</div>
diff --git a/src/app/js/browser.js b/src/app/js/browser.js
index 06d3dd9..ec5013a 100644
--- a/src/app/js/browser.js
+++ b/src/app/js/browser.js
@@ -82,7 +82,7 @@ var Browser = {
 			let filterRect = filter.getBoundingClientRect();
 			let spacing = parseInt(getComputedStyle(filters).getPropertyValue("--spacing"));
 
-			filters.style.top = filterRect.bottom - spacing;
+			filters.style.top = filterRect.bottom - (spacing + (spacing * 1.3));
 			filters.style.right = filterRect.right - filterRect.left + filterRect.width - (spacing / 2);
 		},
 	},
diff --git a/src/app/js/settings.js b/src/app/js/settings.js
index 20cd4b6..682aa49 100644
--- a/src/app/js/settings.js
+++ b/src/app/js/settings.js
@@ -1,17 +1,22 @@
+
 var Settings = {
 	toggle: (state) => {
+		let settings_btn = document.getElementById("settings");
+
 		if (state) {
 			Settings.load();
 			options.scrollTo(0, 0);
 			overlay.classList.add("shown");
 			options.classList.add("shown");
+			settings_btn.classList.add("shown");
 
-			return
+			return;
 		} else if (! state) {
 			if (state != undefined) {
 				overlay.classList.remove("shown");
 				options.classList.remove("shown");
-				return
+				settings_btn.classList.remove("shown");
+				return;
 			}
 		}
 
@@ -19,6 +24,7 @@ var Settings = {
 		options.scrollTo(0, 0);
 		overlay.classList.toggle("shown");
 		options.classList.toggle("shown");
+		settings_btn.classList.toggle("shown");
 	},
 	apply: () => {
 		settings = {...settings, ...Settings.get()};
diff --git a/src/app/main.css b/src/app/main.css
index 6b10ff2..9225c54 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -63,7 +63,7 @@ button:active {filter: brightness(90%)}
 	transition: transform 0.25s ease-in-out;
 }
 
-#winbtns #settings:hover img {
+#winbtns #settings.shown img {
 	transform: rotate(90deg);
 }