aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2023-07-31 14:33:31 +0200
committer0neGal <mail@0negal.com>2023-07-31 14:33:31 +0200
commitc1040516db8ec60b6922c989399f0fc43d8ab18a (patch)
tree666535b9885f29744abd3eef092f3f8d588a93d0 /src
parent3a58a8b5c4980a1ac4147adbc0f159c24b41084b (diff)
downloadViper-c1040516db8ec60b6922c989399f0fc43d8ab18a.tar.gz
Viper-c1040516db8ec60b6922c989399f0fc43d8ab18a.zip
window buttons are no longer hidden behind popups
Diffstat (limited to 'src')
-rw-r--r--src/app/css/popups.css9
-rw-r--r--src/app/index.html6
-rw-r--r--src/app/js/browser.js2
-rw-r--r--src/app/js/settings.js10
-rw-r--r--src/app/main.css2
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);
}