From fce479419c4f6b61f181257d69e5ac43f63ef7fe Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Sun, 13 Jun 2021 18:44:59 +0200
Subject: this is the sauce selection

---
 styles/editor.css    |  5 ++---
 styles/selection.css | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

(limited to 'styles')

diff --git a/styles/editor.css b/styles/editor.css
index fc56488..792db3f 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -169,9 +169,8 @@
 	width: calc(var(--zoom) * var(--total-frames) * 1px);
 }
 
-.appGrid .timeline .keyframes .selectionarea {
-	width: calc(var(--zoom) * var(--total-frames) * 1px);
-}
+.appGrid .timeline .keyframes .selectionarea { width: calc(var(--zoom) * var(--total-frames) * 1px); }
+#selection { pointer-events: none; }
 
 .appGrid .timeline .ghostArea {
 	pointer-events: none;
diff --git a/styles/selection.css b/styles/selection.css
index 6bcbd88..dc49fe6 100644
--- a/styles/selection.css
+++ b/styles/selection.css
@@ -1,7 +1,9 @@
 .selection {
 	--selection-color: var(--gruble);
 	--corner-size: 12px;
-	filter: drop-shadow(0px 0px 10px var(--selection-color));
+	filter: drop-shadow(0px 0px 16px var(--selection-color));
+	transition-duration: 100ms;
+	transition-property: transform, opacity;
 }
 
 .selection .bar.top,
@@ -27,3 +29,15 @@
 .selection .corner {
 	fill: var(--selection-color);
 }
+
+.selection.active .background { opacity: .12; }
+.selection .background {
+	background-color: var(--selection-color);
+	opacity: 0;
+	transition: opacity 200ms;
+}
+
+.selection.hidden {
+	transform: scale(0.5);
+	opacity: 0;
+}
-- 
cgit v1.2.3