styles/keyframes.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

.appGrid .timeline .keyframes .frame .keyframeWrapper {
	--keyframe-color: var(--gruble);
	color: var(--keyframe-color);
	line-height: 0;
	width: 24px;
	height: 24px;

	background-color: rgba(255, 0, 255, var(--debug-hitbox-opacity));
	pointer-events: initial;
}

.appGrid .timeline .keyframes .frame.current .keyframeWrapper { color: var(--piss); }
.appGrid .timeline .keyframes .frame.current .keyframeWrapper .loop .connector { background-color: var(--piss); }

.appGrid .timeline .keyframes .frame .keyframeWrapper,
.appGrid .timeline .keyframes .frame .keyframeWrapper .loop .connector {
	transition-property: color, background-color;
	transition-duration: .2s;
}

.timeline .keyframes .frame .keyframeWrapper { cursor: grab; }
.timeline .keyframes .frame .keyframeWrapper:active { cursor: grabbing; }

.loop .connector {
	height: 16px;
	background-color: var(--keyframe-color);
	opacity: .25;
	inset: 4px 13px;
	position: absolute;
}

.loop {
	position: absolute;
	width: calc((var(--frame) - var(--begin)) * var(--zoom) * 1px + 24px);
	height: 24px;
	right: 0;
}

.loop .start,
.loop .end {
	z-index: 1;
}

.keyframe {
	line-height: 0;
	fill: currentColor;
}

.keyframe .background,
.keyframe .outline {
	opacity: 1;
	transition-property: opacity;
	transition-duration: 200ms;
}

.keyframe.ghost .background { opacity: .2; }
.keyframe.ghost .outline { opacity: .7; }

#ghost {
	background-color: rgba(255, 128, 0, var(--debug-hitbox-opacity));
	--negative-offset-weight: calc(1 - var(--offset-weight));
	--offset-x: calc(0.5 * var(--zoom) * var(--negative-offset-weight) * 1px - 12px * var(--negative-offset-weight) + -16px * var(--offset-weight));
	transform: translateX(var(--offset-x)) translateY(-16px);

	top: calc(var(--y) * 1px);
	left: calc(var(--zoom) * var(--frame) * 1px);

	pointer-events: none;
	line-height: 0;
	color: var(--gruble);
	transition-property: opacity;
	transition-duration: 150ms;
	opacity: 0;
}
#ghost.loop.placed {
	--offset-x: -16px;
}
.timeline:hover #ghost {
	opacity: 1;
}

#ghost .keyframeWrapper .loop.ghost {
	width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 24px);

	transition-property: transform;
	transition-duration: 100ms;
	transform: translateX(100%);
}
#ghost.placed .keyframeWrapper .loop.ghost {
	transform: translateX(100%) translateX(10px);
}

.keyframeWrapper .loop.ghost .connector {
	height: 14px;
	margin: 0 5px;
	border-top: 1px dashed var(--gruble);
	border-bottom: 1px dashed var(--gruble);
	opacity: .7;
}