storytold/storyteller-bevy
2
0
Fork 0
mirror of https://github.com/storytold/storyteller-bevy.git synced 2026-10-28 08:58:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Animation Timeline Initial (#88)

Browse Source 
This PR adds an initial animation timeline.

---------

Co-authored-by: Brandon Thomas <echelon@gmail.com>
Co-authored-by: Danny McGee <dannymcgee@gmail.com>
This commit is contained in:
Lee-Orr
2024-03-20 20:53:24 -04:00
committed by GitHub
parent 03f87b2544
commit 0eff115eb5
21 changed files with 1481 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-frontend/src/app/anim-timeline.element.scss
+19 -10
View File
@@ -1,6 +1,9 @@
:host {
position: relative;
overflow: hidden;
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / span var(--row-count);
}
*:focus-visible {
@@ -8,19 +11,26 @@
}
.wrapper {
position: absolute;
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: subgrid;
inset: 0;
grid-row: 1 / span var(--row-count);
background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) calc(var(--clip-start) - 1px), rgba(255,255,255,0.1) var(--clip-start), rgba(255,255,255,0.1) var(--clip-end), rgba(0,0,0,0.2) calc(var(--clip-end) + 1px));
&.panning {
cursor: grabbing;
}
}
.clip-region {
position: absolute;
top: 0;
bottom: 0;
background: #0004;
.zoom-controls {
grid-row: var(--row-count);
background: rgba(0,0,0,1);
height: 10px;
width: 100%;
z-index: 1;
}
}
.hash {
@@ -37,7 +47,7 @@
.timestamp {
position: absolute;
top: 8px;
grid-row: 1;
color: #FFF6;
font: {
family: "Fira Sans", sans-serif;
@@ -100,8 +110,7 @@
.keyframe {
position: absolute;
top: 50%;
transform: translateX(-4.5px) translateY(-4.5px);
transform: translateX(-4.5px);
&::before {
content: "";