aboutsummaryrefslogtreecommitdiff
path: root/styles
diff options
context:
space:
mode:
Diffstat (limited to 'styles')
-rw-r--r--styles/editor.css24
-rw-r--r--styles/keyframes.css6
2 files changed, 22 insertions, 8 deletions
diff --git a/styles/editor.css b/styles/editor.css
index 3005be7..62fa103 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -142,34 +142,42 @@
margin: 4px;
}
+.appGrid .timeline {
+ --zoom: 4;
+}
+
.appGrid .timeline .frames {
height: 100%;
}
.appGrid .timeline .frames .frame {
background-color: transparent;
- margin-top: 28px;
height: 100%;
- width: 4px;
+ width: calc(var(--zoom) * 1px);
display: inline-block;
border-radius: 2px 2px 0 0;
position: relative;
overflow: visible;
}
+.appGrid .timeline .frames .frame:nth-child(30n) .line {
+ background-color: var(--c300);
+ top: 28px;
+ width: 2px;
+ border-radius: 2px 2px 0 0;
+}
+
.appGrid .timeline .frames .frame .timecode {
display: none;
}
.appGrid .timeline .frames .frame .keyframeWrapper {
line-height: 0;
- top: 16px;
+ top: 44px;
z-index: 999;
color: var(--gruble);
-}
-
-.appGrid .timeline .frames .frame:nth-child(30n) {
- background-color: var(--c300);
+ width: 24px;
+ height: 24px;
}
.appGrid .timeline .frames .frame:nth-child(30n) .timecode {
@@ -177,7 +185,7 @@
font-weight: 500;
line-height: 1;
display: inline-block;
- top: -16px;
+ top: 12px;
}
.appGrid .timeline {
diff --git a/styles/keyframes.css b/styles/keyframes.css
index 8e7e3d2..53fba20 100644
--- a/styles/keyframes.css
+++ b/styles/keyframes.css
@@ -6,6 +6,12 @@
margin: 4px -11px;
}
+.loop {
+ width: calc(var(--loop-length) * var(--zoom) * 1px + 24px);
+ position: absolute;
+ right: 0;
+}
+
.keyframe > * {
fill: currentColor;
}