better selection background + grabbing css

2 files changed, 32 insertions, 8 deletions

diff --git a/styles/editor.css b/styles/editor.css
index 8461a5a..1279c72 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -175,7 +175,12 @@
 	width: calc(var(--zoom) * var(--total-frames) * 1px);
 	background-color: rgba(0, 0, 255, var(--debug-hitbox-opacity));
 }
-#selection { pointer-events: none; }
+#selection {
+	cursor: grab;
+}
+#selection:active {
+	cursor: grabbing;
+}
 
 .appGrid .timeline .ghostArea {
 	pointer-events: none;
diff --git a/styles/selection.css b/styles/selection.css
index 3c0e78b..6e16cee 100644
--- a/styles/selection.css
+++ b/styles/selection.css
@@ -7,11 +7,21 @@
 }
 
 .selection .bar.top,
+.selection .bar.bottom,
+.selection .background.center {
+	left: var(--corner-size);
+	right: var(--corner-size);
+}
+
+.selection .bar.top,
 .selection .bar.bottom {
 	height: 2px;
+}
 
-	left: var(--corner-size);
-	right: var(--corner-size);
+.selection .background.left,
+.selection .background.right {
+	top: calc(var(--corner-size) - 2px);
+	bottom: calc(var(--corner-size) - 2px);
 }
 
 .selection .bar.left,
@@ -22,6 +32,7 @@
 	bottom: var(--corner-size);
 }
 
+.selection div.fill,
 .selection .bar {
 	background-color: var(--selection-color);
 }
@@ -30,12 +41,20 @@
 	fill: var(--selection-color);
 }
 
-.selection.active .background { opacity: .12; }
-.selection .background {
-	border-radius: 6px;
-	background-color: var(--selection-color);
+.selection .fill {
 	opacity: 0;
-	transition: opacity 200ms;
+	transition-property: opacity;
+	transition-duration: 200ms;
+}
+
+.selection .background.left,
+.selection .background.right {
+	width: var(--corner-size);
+}
+
+.selection:hover .fill,
+.selection.active .fill {
+	opacity: .15;
 }
 
 .selection.hidden {