@twab/visualization 0.9.4 → 0.9.6

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.
@@ -1,340 +0,0 @@
1
-
2
- .frame-container > div[data-v-20a23fbe] {
3
- max-height: 100%;
4
- }
5
- .frame-container[data-v-20a23fbe] {
6
- background-color: black;
7
- display: flex;
8
- justify-content: center;
9
- }
10
- .frame-content[data-v-20a23fbe],
11
- .dummy-frame[data-v-20a23fbe] {
12
- display: flex;
13
- align-items: center;
14
- justify-content: center;
15
- }
16
- .frame-content video[data-v-20a23fbe] {
17
- flex-grow: 1;
18
- -o-object-fit: fill;
19
- object-fit: fill;
20
- z-index: 0;
21
- }
22
- .overlay[data-v-20a23fbe] {
23
- width: 100%;
24
- height: 100%;
25
- z-index: 5;
26
- position: absolute;
27
- top: 0;
28
- left: 0;
29
- border: 4px solid transparent;
30
- }
31
- .active .overlay[data-v-20a23fbe] {
32
- border-color: var(--visualization-primary);
33
- }
34
- .between-time .overlay[data-v-20a23fbe] {
35
- border-top-color: var(--visualization-secondary);
36
- }
37
- .between-time.active .overlay[data-v-20a23fbe] {
38
- border-color: var(--visualization-secondary);
39
- }
40
- .initial-time .overlay[data-v-20a23fbe] {
41
- border-top-color: var(--visualization-start);
42
- }
43
- .initial-time.active .overlay[data-v-20a23fbe] {
44
- border-color: var(--visualization-start);
45
- }
46
- .end-time .overlay[data-v-20a23fbe] {
47
- border-top-color: var(--visualization-end);
48
- }
49
- .end-time.active .overlay[data-v-20a23fbe] {
50
- border-color: var(--visualization-end);
51
- }
52
- .initial-time.end-time .overlay[data-v-20a23fbe] {
53
- border-top-color: var(--visualization-start);
54
- border-bottom-color: var(--visualization-end);
55
- }
56
- .initial-time.end-time.active .overlay[data-v-20a23fbe] {
57
- border-top-color: var(--visualization-start);
58
- border-left-color: var(--visualization-start);
59
- border-bottom-color: var(--visualization-end);
60
- border-right-color: var(--visualization-end);
61
- }
62
-
63
-
64
- #progress[data-v-7fe6f244] {
65
- position: relative;
66
- cursor: pointer;
67
- width: 80%;
68
- height: 15px;
69
- background-color: #dfdfdf;
70
- margin: 5px auto;
71
- border-radius: 6px;
72
- }
73
- .progressBar[data-v-7fe6f244] {
74
- display: absolute;
75
- height: 15px;
76
- position: absolute;
77
- top: 0;
78
- left: 0;
79
- background-color: var(--visualization-secondary);
80
- z-index: 2;
81
- width: 50%;
82
- border-radius: inherit;
83
- }
84
- .progressBar[data-v-7fe6f244]::after {
85
- content: '';
86
- width: 17px;
87
- height: 17px;
88
- position: absolute;
89
- top: -1px;
90
- right: -8.5px;
91
- border-radius: 50%;
92
- background-color: var(--visualization-primary);
93
- z-index: 3;
94
- }
95
- .progressLabel[data-v-7fe6f244] {
96
- z-index: 4;
97
- margin: 0 auto;
98
- font-weight: bold;
99
- line-height: 17px;
100
- font-size: 14px;
101
- text-shadow: -1px 0 #dfdfdf, 0 1px #dfdfdf, 1px 0 #dfdfdf, 0 -1px #dfdfdf;
102
-
103
- -webkit-user-select: none;
104
-
105
- -moz-user-select: none;
106
-
107
- user-select: none;
108
- }
109
-
110
-
111
- dialog[data-v-9f47e4d0] {
112
- max-width: 60vw;
113
- /* padding: 12px; */
114
- border: none;
115
- background: white;
116
- border-radius: 6px;
117
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
118
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);
119
- position: fixed;
120
- top: 50%;
121
- left: 50%;
122
- transform: translateY(-50%) translateX(-50%);
123
- }
124
-
125
- .visualization-row {
126
- display: flex;
127
- flex-wrap: wrap;
128
- flex: 1 1 auto;
129
- }
130
- .visualization-col {
131
- flex-basis: 0;
132
- flex-grow: 1;
133
- max-width: 100%;
134
- padding: 12px;
135
- }
136
- .visualization-divider {
137
- display: block;
138
- flex: 1 1 100%;
139
- height: 0px;
140
- max-height: 0px;
141
- opacity: 1;
142
- transition: inherit;
143
- border-style: solid;
144
- border-width: thin 0 0 0;
145
- border-color: rgba(0, 0, 0, 0.12);
146
- margin: 0;
147
- }
148
- .visualization-divider.vertical {
149
- align-self: stretch;
150
- border-width: 0 thin 0 0;
151
- display: inline-flex;
152
- height: inherit;
153
- margin-left: -1px;
154
- max-height: 100%;
155
- max-width: 0px;
156
- vertical-align: text-bottom;
157
- width: 0px;
158
- }
159
- .visualization-card {
160
- flex-basis: 0;
161
- flex-grow: 1;
162
- max-width: 100%;
163
- padding: 12px;
164
- width: 100%;
165
- transition-property: box-shadow, opacity;
166
- overflow-wrap: break-word;
167
- /*box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
168
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);*/
169
- }
170
- .visualization-justify-center {
171
- justify-content: center;
172
- }
173
- .visualization-align-center {
174
- align-items: center;
175
- }
176
- #visualization-container {
177
- max-width: 100% !important;
178
- margin: 0 auto !important;
179
- height: 100%;
180
- border-bottom: none;
181
- }
182
- #visualization-container > .card {
183
- border-radius: 0 !important;
184
- font-size: 12px;
185
- width: 100%;
186
- box-shadow: none;
187
- height: 100%;
188
- }
189
- #command-bar,
190
- #info-bar {
191
- background-color: #f5f5f5;
192
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
193
- 0 1px 5px 0 rgba(0, 0, 0, 0.12);
194
- }
195
- #command-bar button {
196
- width: 42px;
197
- height: 36px;
198
- border: none;
199
- background: none;
200
- }
201
- #command-bar button:hover {
202
- cursor: pointer;
203
- background: rgba(0, 0, 0, 0.12);
204
- }
205
- #command-bar svg {
206
- font-size: 16px;
207
- }
208
- #command-bar {
209
- padding: 0 !important;
210
- }
211
- #info-bar {
212
- padding: 4px;
213
- font-size: 14px;
214
- position: relative;
215
- }
216
- .settings-container {
217
- position: absolute;
218
- right: 14px;
219
- top: 50%;
220
- transform: translateY(-50%);
221
- }
222
- .settings-container > * {
223
- margin: 0 2px;
224
- cursor: pointer;
225
- }
226
- #info-bar svg {
227
- font-size: 16px;
228
- }
229
- #info-bar .divider {
230
- margin: 0 8px;
231
- }
232
- svg:focus {
233
- border: none;
234
- }
235
- .visualization-card {
236
- border-left: 8px solid #eee;
237
- }
238
- .active-tab {
239
- border-left: 8px solid var(--visualization-primary) !important;
240
- border-image-slice: 1;
241
- }
242
- [id^='frame-'] {
243
- padding: 1px;
244
- display: flex;
245
- flex-flow: column;
246
- }
247
- .tooltip {
248
- display: block !important;
249
- z-index: 10000;
250
- }
251
- .tooltip .tooltip-inner {
252
- background: var(--visualization-primary);
253
- color: white;
254
- border-radius: 16px;
255
- padding: 5px 10px 4px;
256
- }
257
- .tooltip .tooltip-arrow {
258
- width: 0;
259
- height: 0;
260
- border-style: solid;
261
- position: absolute;
262
- margin: 5px;
263
- border-color: var(--visualization-primary);
264
- z-index: 1;
265
- }
266
- .tooltip[x-placement^='top'] {
267
- margin-bottom: 5px;
268
- }
269
- .tooltip[x-placement^='top'] .tooltip-arrow {
270
- border-width: 5px 5px 0 5px;
271
- border-left-color: transparent !important;
272
- border-right-color: transparent !important;
273
- border-bottom-color: transparent !important;
274
- bottom: -5px;
275
- left: calc(50% - 5px);
276
- margin-top: 0;
277
- margin-bottom: 0;
278
- }
279
- .tooltip[x-placement^='bottom'] {
280
- margin-top: 5px;
281
- }
282
- .tooltip[x-placement^='bottom'] .tooltip-arrow {
283
- border-width: 0 5px 5px 5px;
284
- border-left-color: transparent !important;
285
- border-right-color: transparent !important;
286
- border-top-color: transparent !important;
287
- top: -5px;
288
- left: calc(50% - 5px);
289
- margin-top: 0;
290
- margin-bottom: 0;
291
- }
292
- .tooltip[x-placement^='right'] {
293
- margin-left: 5px;
294
- }
295
- .tooltip[x-placement^='right'] .tooltip-arrow {
296
- border-width: 5px 5px 5px 0;
297
- border-left-color: transparent !important;
298
- border-top-color: transparent !important;
299
- border-bottom-color: transparent !important;
300
- left: -5px;
301
- top: calc(50% - 5px);
302
- margin-left: 0;
303
- margin-right: 0;
304
- }
305
- .tooltip[x-placement^='left'] {
306
- margin-right: 5px;
307
- }
308
- .tooltip[x-placement^='left'] .tooltip-arrow {
309
- border-width: 5px 0 5px 5px;
310
- border-top-color: transparent !important;
311
- border-right-color: transparent !important;
312
- border-bottom-color: transparent !important;
313
- right: -5px;
314
- top: calc(50% - 5px);
315
- margin-left: 0;
316
- margin-right: 0;
317
- }
318
- .tooltip.popover .popover-inner {
319
- background: #f9f9f9;
320
- color: black;
321
- padding: 24px;
322
- border-radius: 5px;
323
- box-shadow: 0 5px 30px rgba(black, 0.1);
324
- }
325
- .tooltip.popover .popover-arrow {
326
- border-color: #f9f9f9;
327
- }
328
- .tooltip[aria-hidden='true'] {
329
- visibility: hidden;
330
- opacity: 0;
331
- transition: opacity 0.15s, visibility 0.15s;
332
- }
333
- .tooltip[aria-hidden='false'] {
334
- visibility: visible;
335
- opacity: 1;
336
- transition: opacity 0.15s;
337
- }
338
-
339
-
340
-
package/dist/demo.html DELETED
@@ -1 +0,0 @@
1
- <!doctype html><meta charset="utf-8"><title>visualization demo</title><script src="./visualization.umd.js"></script><link rel="stylesheet" href="./visualization.css"><script>console.log(visualization)</script>