aboutsummaryrefslogtreecommitdiff
path: root/src/app/main.css
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-02-08 22:36:25 +0100
committer0neGal <mail@0negal.com>2022-02-08 22:36:25 +0100
commitc1153f19e6323bbc76145d3defe0bca6b2b6088e (patch)
tree37614f44c05cdd4892b55db7c910450ba4e9fe75 /src/app/main.css
parent3ee7928a2412b8041044afd8bd49b922c9941972 (diff)
downloadViper-c1153f19e6323bbc76145d3defe0bca6b2b6088e.tar.gz
Viper-c1153f19e6323bbc76145d3defe0bca6b2b6088e.zip
added toasts
No functional toasts yet, just the code for them, I'll add the actual toasts later...
Diffstat (limited to 'src/app/main.css')
-rw-r--r--src/app/main.css54
1 files changed, 54 insertions, 0 deletions
diff --git a/src/app/main.css b/src/app/main.css
index 94ef767..14348bd 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -558,6 +558,60 @@ code {
margin-bottom: calc(var(--spacing) / 2);
}
+#toasts {
+ position: fixed;
+ z-index: 100000;
+ right: calc(var(--padding) * 1.5);
+ bottom: calc(var(--padding) * 1.5);
+}
+
+@keyframes bodyfadeaway {
+ 0% {opacity: 0.0; transform: scale(0.95)}
+ 100% {opacity: 1.0; transform: scale(1.0)}
+}
+
+#toasts .toast {
+ width: 300px;
+ opacity: 0.0;
+ cursor: pointer;
+ overflow: hidden;
+ max-height: 100vh;
+ background: #FFFFFF;
+ transform: scale(0.95);
+ transition: 0.2s ease-in-out;
+ padding: calc(var(--padding) / 2);
+ margin-top: calc(var(--padding) / 2);
+ border-radius: calc(var(--padding) / 2.5);
+ box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
+
+ animation-duration: 0.2s;
+ animation-iteration-count: 1;
+ animation-name: bodyfadeaway;
+ animation-fill-mode: forwards;
+ animation-timing-function: ease-in-out;
+}
+
+#toasts .toast.hidden {
+ margin-top: 0px;
+ max-height: 0px;
+ padding-top: 0px;
+ padding-bottom: 0px;
+ filter: opacity(0.0);
+ transform: scale(0.95);
+}
+
+#toasts .toast:not(.hidden):hover {filter: opacity(0.9)}
+#toasts .toast:not(.hidden):active {filter: opacity(0.8)}
+
+.toast .title {
+}
+
+.toast .description {
+ opacity: 0.8;
+ font-size: 0.8em;
+ font-weight: 400;
+}
+
/* drag control */
#bgHolder,