aboutsummaryrefslogtreecommitdiff
path: root/styles
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-06-13 18:44:59 +0200
committerlonkaars <loek@pipeframe.xyz>2021-06-13 18:44:59 +0200
commitfce479419c4f6b61f181257d69e5ac43f63ef7fe (patch)
treede39ac77e757becbc5f678de98c0ffd14a181746 /styles
parent1b4a0b417c6f346016c09a665fab5b554c6c1618 (diff)
this is the sauce selection
Diffstat (limited to 'styles')
-rw-r--r--styles/editor.css5
-rw-r--r--styles/selection.css16
2 files changed, 17 insertions, 4 deletions
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;
+}