@andymcloid/trakk 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/trakk.css +1 -1
- package/dist/trakk.css.map +1 -1
- package/package.json +1 -1
- package/src/trakk.css +56 -30
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
<a href="#usage">Usage</a> •
|
|
13
13
|
<a href="#api">API</a> •
|
|
14
14
|
<a href="#events">Events</a> •
|
|
15
|
+
<a href="#styling">Styling</a> •
|
|
15
16
|
<a href="#demo">Demo</a>
|
|
16
17
|
</p>
|
|
17
18
|
|
|
@@ -218,6 +219,54 @@ timeline.setCallbacks({
|
|
|
218
219
|
});
|
|
219
220
|
```
|
|
220
221
|
|
|
222
|
+
## Styling
|
|
223
|
+
|
|
224
|
+
Customize Trakk's appearance using CSS custom properties:
|
|
225
|
+
|
|
226
|
+
```css
|
|
227
|
+
trakk-editor {
|
|
228
|
+
/* Core colors */
|
|
229
|
+
--trakk-bg: #191b1d; /* Background color */
|
|
230
|
+
--trakk-text: #ffffff; /* Text color */
|
|
231
|
+
--trakk-accent: #5297FF; /* Accent color (cursor, selection border) */
|
|
232
|
+
|
|
233
|
+
/* Block colors */
|
|
234
|
+
--trakk-block-bg: #2f3134; /* Block background */
|
|
235
|
+
--trakk-block-bg-hover: #3a3d40; /* Block hover state */
|
|
236
|
+
--trakk-block-bg-selected: #4a7ba7; /* Selected block background */
|
|
237
|
+
|
|
238
|
+
/* Borders */
|
|
239
|
+
--trakk-border: rgba(255, 255, 255, 0.1); /* Subtle borders */
|
|
240
|
+
--trakk-border-strong: rgba(255, 255, 255, 0.3); /* Prominent borders */
|
|
241
|
+
|
|
242
|
+
/* Text variations */
|
|
243
|
+
--trakk-text-muted: rgba(255, 255, 255, 0.6); /* Secondary text */
|
|
244
|
+
--trakk-text-subtle: rgba(255, 255, 255, 0.4); /* Subtle text/icons */
|
|
245
|
+
|
|
246
|
+
/* State */
|
|
247
|
+
--trakk-danger: #ff6464; /* Delete button hover */
|
|
248
|
+
--trakk-disabled-opacity: 0.6; /* Disabled elements */
|
|
249
|
+
--trakk-locked-opacity: 0.7; /* Locked elements */
|
|
250
|
+
}
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### Light Theme Example
|
|
254
|
+
|
|
255
|
+
```css
|
|
256
|
+
trakk-editor.light {
|
|
257
|
+
--trakk-bg: #f5f5f5;
|
|
258
|
+
--trakk-text: #1a1a1a;
|
|
259
|
+
--trakk-accent: #0066cc;
|
|
260
|
+
--trakk-block-bg: #e0e0e0;
|
|
261
|
+
--trakk-block-bg-hover: #d0d0d0;
|
|
262
|
+
--trakk-block-bg-selected: #b3d4fc;
|
|
263
|
+
--trakk-border: rgba(0, 0, 0, 0.1);
|
|
264
|
+
--trakk-border-strong: rgba(0, 0, 0, 0.2);
|
|
265
|
+
--trakk-text-muted: rgba(0, 0, 0, 0.6);
|
|
266
|
+
--trakk-text-subtle: rgba(0, 0, 0, 0.4);
|
|
267
|
+
}
|
|
268
|
+
```
|
|
269
|
+
|
|
221
270
|
## Demo
|
|
222
271
|
|
|
223
272
|
Open `demo.html` in a browser or check out the [live demo](https://sidcom-ab.github.io/trakk).
|
package/dist/trakk.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.timeline-editor{height:100%;width:100%;min-height:100px;position:relative;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color
|
|
1
|
+
.timeline-editor{--trakk-bg:#191b1d;--trakk-text:#ffffff;--trakk-accent:#5297FF;--trakk-block-bg:#2f3134;--trakk-block-bg-hover:#3a3d40;--trakk-block-bg-selected:#4a7ba7;--trakk-border:rgba(255, 255, 255, 0.1);--trakk-border-strong:rgba(255, 255, 255, 0.3);--trakk-text-muted:rgba(255, 255, 255, 0.6);--trakk-text-subtle:rgba(255, 255, 255, 0.4);--trakk-danger:#ff6464;--trakk-disabled-opacity:0.6;--trakk-locked-opacity:0.7;height:100%;width:100%;min-height:100px;position:relative;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:var(--trakk-bg);display:flex;flex-direction:column;overflow:hidden;color:var(--trakk-text);box-sizing:border-box;user-select:none}.timeline-editor-time-area{position:relative;height:32px;flex:0 0 auto;background-color:var(--trakk-bg);overflow:hidden;z-index:150}.timeline-editor-time-area-wrapper{position:relative;height:100%}.timeline-editor-time-area-interact{position:absolute;cursor:pointer;left:0;top:0;height:100%;display:flex;align-items:flex-end}.timeline-editor-time-unit{border-right:1px solid var(--trakk-border);position:relative;box-sizing:border-box;height:6px;bottom:0;flex-shrink:0}.timeline-editor-time-unit-big{height:12px;border-right:1px solid var(--trakk-border-strong)}.timeline-editor-time-unit-scale{color:var(--trakk-text-muted);position:absolute;right:0;top:0;transform:translate(50%,-100%);padding-bottom:4px;font-size:11px}.timeline-editor-edit-area{flex:1 1 0;margin-top:0;overflow-x:scroll;overflow-y:auto;position:relative;min-height:48px;min-width:0;height:100%;width:0;scrollbar-color:var(--trakk-border-strong) rgba(0,0,0,0.2);scrollbar-width:auto}.timeline-editor-rows{position:relative;z-index:1}.timeline-editor-edit-area::-webkit-scrollbar{width:14px;height:14px}.timeline-editor-edit-area::-webkit-scrollbar-track{background-color:rgba(0,0,0,.2);border-radius:10px}.timeline-editor-edit-area::-webkit-scrollbar-thumb{background-color:var(--trakk-border-strong);border-radius:10px}.timeline-editor-edit-area::-webkit-scrollbar-thumb:hover{background-color:var(--trakk-text-subtle)}.timeline-editor-edit-area::-webkit-scrollbar-corner{background-color:rgba(0,0,0,.2)}.timeline-editor-edit-row{--timeline-scale-width:160px;background-repeat:no-repeat,repeat;background-image:linear-gradient(var(--trakk-bg),var(--trakk-bg)),linear-gradient(90deg,var(--trakk-border) 1px,transparent 0);background-size:var(--timeline-scale-width) 100%;display:flex;flex-direction:row;box-sizing:border-box;position:relative;border-bottom:1px solid var(--trakk-border);min-height:32px}.timeline-editor-edit-row:first-child{border-top:1px solid var(--trakk-border)}.timeline-editor-edit-row::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:transparent;pointer-events:none;transition:background-color .1s}.timeline-editor-edit-row:hover::before{background-color:rgba(255,255,255,.02)}.timeline-editor-row-label{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;padding:0 8px;color:var(--trakk-text-muted);font-size:12px;font-weight:500;background-color:var(--trakk-bg);border-right:1px solid var(--trakk-border);z-index:2;pointer-events:auto}.timeline-editor-row-label:hover{color:var(--trakk-text)}.timeline-editor-row-label-locked::after{content:'';margin-left:6px;width:10px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.4)'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;flex-shrink:0}.timeline-editor-row-label-input{user-select:text}.timeline-editor-row-delete{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:16px;height:16px;cursor:pointer;opacity:0;transition:opacity .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.5)'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.timeline-editor-label-row:hover .timeline-editor-row-delete,.timeline-editor-row-label:hover .timeline-editor-row-delete{opacity:1}.timeline-editor-label-row:hover .timeline-editor-lock-icon{opacity:0}.timeline-editor-row-delete:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6464'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")}.timeline-editor-action-locked{opacity:var(--trakk-locked-opacity)}.timeline-editor-action-delete{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:12px;height:12px;cursor:pointer;opacity:0;transition:opacity .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.5)'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;z-index:2}.timeline-editor-action:hover .timeline-editor-action-delete{opacity:1}.timeline-editor-action-delete:hover{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6464'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")}.timeline-editor-action{position:absolute;left:0;top:4px;background-color:var(--trakk-block-bg);border-radius:4px;cursor:move;user-select:none;height:calc(100% - 8px);display:flex;align-items:center;justify-content:center;border:1px solid var(--trakk-border);box-sizing:border-box;transition:background-color .2s}.timeline-editor-action:hover{background-color:var(--trakk-block-bg-hover)}.timeline-editor-action.selected{background-color:var(--trakk-block-bg-selected);border-color:var(--trakk-accent)}.timeline-editor-action-left-stretch,.timeline-editor-action-right-stretch{position:absolute;top:0;width:10px;border-radius:4px;height:100%;overflow:hidden;cursor:ew-resize;z-index:1}.timeline-editor-action-left-stretch::after,.timeline-editor-action-right-stretch::after{content:"";position:absolute;top:0;bottom:0;margin:auto;border-radius:4px;border-top:14px solid transparent;border-bottom:14px solid transparent}.timeline-editor-action-left-stretch{left:0}.timeline-editor-action-left-stretch::after{left:0;border-left:7px solid var(--trakk-border);border-right:7px solid transparent}.timeline-editor-action-right-stretch{right:0}.timeline-editor-action-right-stretch::after{right:0;border-right:7px solid var(--trakk-border);border-left:7px solid transparent}.timeline-editor-cursor{cursor:ew-resize;position:absolute;top:32px;height:calc(100% - 32px);box-sizing:border-box;border-left:1px solid var(--trakk-accent);border-right:1px solid var(--trakk-accent);transform:translateX(-50%);pointer-events:none;z-index:100;will-change:left}.timeline-editor-cursor-top{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:8px;height:12px;pointer-events:none}.timeline-editor-cursor-top::before{content:'';position:absolute;top:0;left:0;width:8px;height:12px;background:var(--trakk-accent);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}.timeline-editor-cursor-area{width:16px;height:100%;cursor:ew-resize;position:absolute;top:0;left:50%;transform:translateX(-50%);pointer-events:all}.timeline-editor-disable .timeline-editor-action{cursor:not-allowed;opacity:var(--trakk-disabled-opacity)}.timeline-editor-disable .timeline-editor-cursor{cursor:not-allowed}.timeline-editor-action-content{padding:0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;width:100%;text-align:center}
|
package/dist/trakk.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["$stdin"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["$stdin"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/trakk.css
CHANGED
|
@@ -1,16 +1,42 @@
|
|
|
1
1
|
/* Trakk - Timeline Editor Styles */
|
|
2
|
+
|
|
3
|
+
/* CSS Custom Properties - Override these to customize Trakk */
|
|
2
4
|
.timeline-editor {
|
|
5
|
+
/* Core colors */
|
|
6
|
+
--trakk-bg: #191b1d;
|
|
7
|
+
--trakk-text: #ffffff;
|
|
8
|
+
--trakk-accent: #5297FF;
|
|
9
|
+
|
|
10
|
+
/* Block colors */
|
|
11
|
+
--trakk-block-bg: #2f3134;
|
|
12
|
+
--trakk-block-bg-hover: #3a3d40;
|
|
13
|
+
--trakk-block-bg-selected: #4a7ba7;
|
|
14
|
+
|
|
15
|
+
/* Border & subtle elements */
|
|
16
|
+
--trakk-border: rgba(255, 255, 255, 0.1);
|
|
17
|
+
--trakk-border-strong: rgba(255, 255, 255, 0.3);
|
|
18
|
+
|
|
19
|
+
/* Text variations */
|
|
20
|
+
--trakk-text-muted: rgba(255, 255, 255, 0.6);
|
|
21
|
+
--trakk-text-subtle: rgba(255, 255, 255, 0.4);
|
|
22
|
+
|
|
23
|
+
/* State colors */
|
|
24
|
+
--trakk-danger: #ff6464;
|
|
25
|
+
--trakk-disabled-opacity: 0.6;
|
|
26
|
+
--trakk-locked-opacity: 0.7;
|
|
27
|
+
|
|
28
|
+
/* Base styles */
|
|
3
29
|
height: 100%;
|
|
4
30
|
width: 100%;
|
|
5
31
|
min-height: 100px;
|
|
6
32
|
position: relative;
|
|
7
33
|
font-size: 12px;
|
|
8
34
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
9
|
-
background-color:
|
|
35
|
+
background-color: var(--trakk-bg);
|
|
10
36
|
display: flex;
|
|
11
37
|
flex-direction: column;
|
|
12
38
|
overflow: hidden;
|
|
13
|
-
color:
|
|
39
|
+
color: var(--trakk-text);
|
|
14
40
|
box-sizing: border-box;
|
|
15
41
|
user-select: none;
|
|
16
42
|
}
|
|
@@ -20,7 +46,7 @@
|
|
|
20
46
|
position: relative;
|
|
21
47
|
height: 32px;
|
|
22
48
|
flex: 0 0 auto;
|
|
23
|
-
background-color:
|
|
49
|
+
background-color: var(--trakk-bg);
|
|
24
50
|
overflow: hidden;
|
|
25
51
|
z-index: 150;
|
|
26
52
|
}
|
|
@@ -41,7 +67,7 @@
|
|
|
41
67
|
}
|
|
42
68
|
|
|
43
69
|
.timeline-editor-time-unit {
|
|
44
|
-
border-right: 1px solid
|
|
70
|
+
border-right: 1px solid var(--trakk-border);
|
|
45
71
|
position: relative;
|
|
46
72
|
box-sizing: border-box;
|
|
47
73
|
height: 6px;
|
|
@@ -51,11 +77,11 @@
|
|
|
51
77
|
|
|
52
78
|
.timeline-editor-time-unit-big {
|
|
53
79
|
height: 12px;
|
|
54
|
-
border-right: 1px solid
|
|
80
|
+
border-right: 1px solid var(--trakk-border-strong);
|
|
55
81
|
}
|
|
56
82
|
|
|
57
83
|
.timeline-editor-time-unit-scale {
|
|
58
|
-
color:
|
|
84
|
+
color: var(--trakk-text-muted);
|
|
59
85
|
position: absolute;
|
|
60
86
|
right: 0;
|
|
61
87
|
top: 0;
|
|
@@ -84,7 +110,7 @@
|
|
|
84
110
|
|
|
85
111
|
/* Scrollbar - Firefox fallback */
|
|
86
112
|
.timeline-editor-edit-area {
|
|
87
|
-
scrollbar-color:
|
|
113
|
+
scrollbar-color: var(--trakk-border-strong) rgba(0, 0, 0, 0.2);
|
|
88
114
|
scrollbar-width: auto;
|
|
89
115
|
}
|
|
90
116
|
|
|
@@ -100,12 +126,12 @@
|
|
|
100
126
|
}
|
|
101
127
|
|
|
102
128
|
.timeline-editor-edit-area::-webkit-scrollbar-thumb {
|
|
103
|
-
background-color:
|
|
129
|
+
background-color: var(--trakk-border-strong);
|
|
104
130
|
border-radius: 10px;
|
|
105
131
|
}
|
|
106
132
|
|
|
107
133
|
.timeline-editor-edit-area::-webkit-scrollbar-thumb:hover {
|
|
108
|
-
background-color:
|
|
134
|
+
background-color: var(--trakk-text-subtle);
|
|
109
135
|
}
|
|
110
136
|
|
|
111
137
|
.timeline-editor-edit-area::-webkit-scrollbar-corner {
|
|
@@ -116,18 +142,18 @@
|
|
|
116
142
|
.timeline-editor-edit-row {
|
|
117
143
|
--timeline-scale-width: 160px; /* fallback, overridden by JS */
|
|
118
144
|
background-repeat: no-repeat, repeat;
|
|
119
|
-
background-image: linear-gradient(
|
|
145
|
+
background-image: linear-gradient(var(--trakk-bg), var(--trakk-bg)), linear-gradient(90deg, var(--trakk-border) 1px, transparent 0);
|
|
120
146
|
background-size: var(--timeline-scale-width) 100%;
|
|
121
147
|
display: flex;
|
|
122
148
|
flex-direction: row;
|
|
123
149
|
box-sizing: border-box;
|
|
124
150
|
position: relative;
|
|
125
|
-
border-bottom: 1px solid
|
|
151
|
+
border-bottom: 1px solid var(--trakk-border);
|
|
126
152
|
min-height: 32px;
|
|
127
153
|
}
|
|
128
154
|
|
|
129
155
|
.timeline-editor-edit-row:first-child {
|
|
130
|
-
border-top: 1px solid
|
|
156
|
+
border-top: 1px solid var(--trakk-border);
|
|
131
157
|
}
|
|
132
158
|
|
|
133
159
|
.timeline-editor-edit-row::before {
|
|
@@ -154,17 +180,17 @@
|
|
|
154
180
|
display: flex;
|
|
155
181
|
align-items: center;
|
|
156
182
|
padding: 0 8px;
|
|
157
|
-
color:
|
|
183
|
+
color: var(--trakk-text-muted);
|
|
158
184
|
font-size: 12px;
|
|
159
185
|
font-weight: 500;
|
|
160
|
-
background-color:
|
|
161
|
-
border-right: 1px solid
|
|
186
|
+
background-color: var(--trakk-bg);
|
|
187
|
+
border-right: 1px solid var(--trakk-border);
|
|
162
188
|
z-index: 2;
|
|
163
189
|
pointer-events: auto;
|
|
164
190
|
}
|
|
165
191
|
|
|
166
192
|
.timeline-editor-row-label:hover {
|
|
167
|
-
color:
|
|
193
|
+
color: var(--trakk-text);
|
|
168
194
|
}
|
|
169
195
|
|
|
170
196
|
.timeline-editor-row-label-locked::after {
|
|
@@ -207,11 +233,11 @@
|
|
|
207
233
|
}
|
|
208
234
|
|
|
209
235
|
.timeline-editor-row-delete:hover {
|
|
210
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='
|
|
236
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6464'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
|
|
211
237
|
}
|
|
212
238
|
|
|
213
239
|
.timeline-editor-action-locked {
|
|
214
|
-
opacity:
|
|
240
|
+
opacity: var(--trakk-locked-opacity);
|
|
215
241
|
}
|
|
216
242
|
|
|
217
243
|
.timeline-editor-action-delete {
|
|
@@ -235,7 +261,7 @@
|
|
|
235
261
|
}
|
|
236
262
|
|
|
237
263
|
.timeline-editor-action-delete:hover {
|
|
238
|
-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='
|
|
264
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6464'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
|
|
239
265
|
}
|
|
240
266
|
|
|
241
267
|
/* Action Block */
|
|
@@ -243,7 +269,7 @@
|
|
|
243
269
|
position: absolute;
|
|
244
270
|
left: 0;
|
|
245
271
|
top: 4px;
|
|
246
|
-
background-color:
|
|
272
|
+
background-color: var(--trakk-block-bg);
|
|
247
273
|
border-radius: 4px;
|
|
248
274
|
cursor: move;
|
|
249
275
|
user-select: none;
|
|
@@ -251,18 +277,18 @@
|
|
|
251
277
|
display: flex;
|
|
252
278
|
align-items: center;
|
|
253
279
|
justify-content: center;
|
|
254
|
-
border: 1px solid
|
|
280
|
+
border: 1px solid var(--trakk-border);
|
|
255
281
|
box-sizing: border-box;
|
|
256
282
|
transition: background-color 0.2s;
|
|
257
283
|
}
|
|
258
284
|
|
|
259
285
|
.timeline-editor-action:hover {
|
|
260
|
-
background-color:
|
|
286
|
+
background-color: var(--trakk-block-bg-hover);
|
|
261
287
|
}
|
|
262
288
|
|
|
263
289
|
.timeline-editor-action.selected {
|
|
264
|
-
background-color:
|
|
265
|
-
border-color:
|
|
290
|
+
background-color: var(--trakk-block-bg-selected);
|
|
291
|
+
border-color: var(--trakk-accent);
|
|
266
292
|
}
|
|
267
293
|
|
|
268
294
|
.timeline-editor-action-left-stretch,
|
|
@@ -295,7 +321,7 @@
|
|
|
295
321
|
|
|
296
322
|
.timeline-editor-action-left-stretch::after {
|
|
297
323
|
left: 0;
|
|
298
|
-
border-left: 7px solid
|
|
324
|
+
border-left: 7px solid var(--trakk-border);
|
|
299
325
|
border-right: 7px solid transparent;
|
|
300
326
|
}
|
|
301
327
|
|
|
@@ -305,7 +331,7 @@
|
|
|
305
331
|
|
|
306
332
|
.timeline-editor-action-right-stretch::after {
|
|
307
333
|
right: 0;
|
|
308
|
-
border-right: 7px solid
|
|
334
|
+
border-right: 7px solid var(--trakk-border);
|
|
309
335
|
border-left: 7px solid transparent;
|
|
310
336
|
}
|
|
311
337
|
|
|
@@ -316,8 +342,8 @@
|
|
|
316
342
|
top: 32px;
|
|
317
343
|
height: calc(100% - 32px);
|
|
318
344
|
box-sizing: border-box;
|
|
319
|
-
border-left: 1px solid
|
|
320
|
-
border-right: 1px solid
|
|
345
|
+
border-left: 1px solid var(--trakk-accent);
|
|
346
|
+
border-right: 1px solid var(--trakk-accent);
|
|
321
347
|
transform: translateX(-50%);
|
|
322
348
|
pointer-events: none;
|
|
323
349
|
z-index: 100;
|
|
@@ -341,7 +367,7 @@
|
|
|
341
367
|
left: 0;
|
|
342
368
|
width: 8px;
|
|
343
369
|
height: 12px;
|
|
344
|
-
background:
|
|
370
|
+
background: var(--trakk-accent);
|
|
345
371
|
clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
|
|
346
372
|
}
|
|
347
373
|
|
|
@@ -359,7 +385,7 @@
|
|
|
359
385
|
/* Disabled state */
|
|
360
386
|
.timeline-editor-disable .timeline-editor-action {
|
|
361
387
|
cursor: not-allowed;
|
|
362
|
-
opacity:
|
|
388
|
+
opacity: var(--trakk-disabled-opacity);
|
|
363
389
|
}
|
|
364
390
|
|
|
365
391
|
.timeline-editor-disable .timeline-editor-cursor {
|