aboutsummaryrefslogtreecommitdiff
path: root/src/app/css/dragui.css
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-06-29 23:29:02 +0200
committerGitHub <noreply@github.com>2022-06-29 23:29:02 +0200
commitcbca61d836ee573a469f6339c22c2891cef9428c (patch)
tree6175a5f57a32a2f3bc90b4d4247444f3dd94ed5f /src/app/css/dragui.css
parent99209092b6ad1079202208833e542201f1197e2d (diff)
parent0c7f6f438ca530a192577907d3af9a7d95949ef3 (diff)
downloadViper-cbca61d836ee573a469f6339c22c2891cef9428c.tar.gz
Viper-cbca61d836ee573a469f6339c22c2891cef9428c.zip
Merge branch 'main' into add-badges
Diffstat (limited to 'src/app/css/dragui.css')
-rw-r--r--src/app/css/dragui.css58
1 files changed, 58 insertions, 0 deletions
diff --git a/src/app/css/dragui.css b/src/app/css/dragui.css
new file mode 100644
index 0000000..fb5b1a7
--- /dev/null
+++ b/src/app/css/dragui.css
@@ -0,0 +1,58 @@
+@import "theming.css";
+
+/*
+ This stylesheet is meant for the DragUI, i.e the UI that pops up when dragging
+ a modfile over the window.
+*/
+
+#dragUI {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ color: white;
+ opacity: 0.0;
+ position: fixed;
+ z-index: 1000000;
+ pointer-events: none;
+ background: var(--bg);
+ backdrop-filter: blur(15px);
+ transition: 0.1s ease-in-out;
+}
+
+#dragUI.shown {
+ opacity: 1.0;
+ pointer-events: all;
+}
+
+#dragUI #dragitems {
+ --size: 25vw;
+ top: 50%;
+ left: 50%;
+ opacity: 0.6;
+ position: absolute;
+ text-align: center;
+ width: var(--size);
+ height: var(--size);
+ margin-top: calc(var(--size) / 2 * -1);
+ margin-left: calc(var(--size) / 2 * -1);
+}
+
+#dragUI #dragitems #icon {
+ width: 100%;
+ height: 100%;
+ filter: invert(1);
+ transform: scale(0.45);
+ background-size: cover;
+ background-image: url("../icons/download.png");
+ transition: 0.1s ease-in-out;
+}
+
+#dragUI.shown #dragitems #icon {
+ transform: scale(0.5);
+}
+
+#dragUI #dragitems #text {
+ top: -5vw;
+ position: relative;
+}