aboutsummaryrefslogtreecommitdiff
path: root/src/app/main.css
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-01-20 13:45:57 +0100
committer0neGal <mail@0negal.com>2022-01-20 13:45:57 +0100
commitfd967f570985339905c52238ead049555c5efcdc (patch)
tree9a4d1c0bf1ab7f3e32ecfa4c5416d190933a243f /src/app/main.css
parent20bf62f42f41638733e0b02affe90c04b1cb2938 (diff)
downloadViper-fd967f570985339905c52238ead049555c5efcdc.tar.gz
Viper-fd967f570985339905c52238ead049555c5efcdc.zip
added fallback icon, and ways to close the browser
You can either click "Escape" or simply click on the darkened background and it'll then close it. Ideally the fallback icon should never be shown, and it is more for testing. I also added a search bar that does nothing currently.
Diffstat (limited to 'src/app/main.css')
-rw-r--r--src/app/main.css47
1 files changed, 38 insertions, 9 deletions
diff --git a/src/app/main.css b/src/app/main.css
index a2c144c..d3d3b72 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -33,7 +33,7 @@
#browser {
--spacing: calc(var(--padding) * 3);
- z-index: 1;
+ z-index: 2;
opacity: 0.0;
position: fixed;
overflow-y: scroll;
@@ -43,17 +43,37 @@
background: var(--bg);
right: var(--spacing);
bottom: var(--spacing);
+ transform: scale(0.98);
backdrop-filter: blur(15px);
- transition: opacity 0.15s ease-in-out;
border-radius: calc(var(--padding) / 2);
+ transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
#browser.shown {
opacity: 1.0;
pointer-events: all;
+ transform: scale(1.0);
+}
+
+#overlay {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+ opacity: 0.0;
+ position: fixed;
+ background: var(--bg);
+ pointer-events: none;
+ transition: opacity 0.15s ease-in-out;
+}
+
+#overlay.shown {
+ opacity: 0.8;
+ pointer-events: all;
}
-#browser .el {
+#browser .el, #browser #search {
--spacing: calc(var(--padding) / 2);
--height: calc(var(--padding) * 2.5);
@@ -68,16 +88,25 @@
width: calc(100% - var(--spacing) * 4);
}
+#browser #search {
+ --height: calc(var(--padding) * 1.5);
+
+ border: none;
+ outline: none;
+ width: calc(100% - var(--spacing) * 2);
+}
+
#browser .el .image, #browser .el .image img {
width: var(--height);
height: var(--height);
margin-right: var(--spacing);
}
+
#browser .el .title {font-size: 1.2em}
#browser .el .description {font-size: 0.8em}
#winbtns {
- z-index: 1;
+ z-index: 2;
display: flex;
position: fixed;
top: var(--padding);
@@ -104,9 +133,10 @@ body {
margin: 0;
overflow: hidden;
user-select: none;
- font-family: "Roboto", sans-serif;
}
+body, button, input {font-family: "Roboto", sans-serif}
+
button {outline: none}
b, strong {font-weight: 700}
body, input, button {font-weight: 500}
@@ -131,9 +161,8 @@ img {pointer-events: none}
left: 0;
right: 0;
bottom: 0;
- pointer-events: none;
- position: fixed;
- transform: scale(1.1);
+ z-index: -1;
+ position: absolute;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@@ -441,6 +470,6 @@ code {
-webkit-app-region: drag;
}
-a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod {
+a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay {
-webkit-app-region: no-drag;
}