From cdab6e7d543b90cf1e60c74f8d38767bbce7f3a7 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Fri, 20 May 2022 23:06:25 +0200 Subject: split main.css into multiple files This is easier to manage, and a lot less annoying to navigate, having to scroll through many lines of code is annoying, categorizing makes it easier, I also overall improved the layout of many of the CSS files. --- src/app/css/dragui.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/app/css/dragui.css (limited to 'src/app/css/dragui.css') 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; +} -- cgit v1.2.3