@highlight-run/rrweb 1.1.0 → 1.1.1
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/dist/index.css +10 -172
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/replay/index.d.ts +2 -2
- package/dist/utils.d.ts +4 -4
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,82 +1,3 @@
|
|
|
1
|
-
.rr-controller.svelte-dxnc1j.svelte-dxnc1j {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 80px;
|
|
4
|
-
background: #fff;
|
|
5
|
-
display: flex;
|
|
6
|
-
flex-direction: column;
|
|
7
|
-
justify-content: space-around;
|
|
8
|
-
align-items: center;
|
|
9
|
-
border-radius: 0 0 5px 5px;
|
|
10
|
-
}
|
|
11
|
-
.rr-timeline.svelte-dxnc1j.svelte-dxnc1j {
|
|
12
|
-
width: 80%;
|
|
13
|
-
display: flex;
|
|
14
|
-
align-items: center;
|
|
15
|
-
}
|
|
16
|
-
.rr-timeline__time.svelte-dxnc1j.svelte-dxnc1j {
|
|
17
|
-
display: inline-block;
|
|
18
|
-
width: 100px;
|
|
19
|
-
text-align: center;
|
|
20
|
-
color: #11103e;
|
|
21
|
-
}
|
|
22
|
-
.rr-progress.svelte-dxnc1j.svelte-dxnc1j {
|
|
23
|
-
flex: 1;
|
|
24
|
-
height: 12px;
|
|
25
|
-
background: #eee;
|
|
26
|
-
position: relative;
|
|
27
|
-
border-radius: 3px;
|
|
28
|
-
cursor: pointer;
|
|
29
|
-
box-sizing: border-box;
|
|
30
|
-
border-top: solid 4px #fff;
|
|
31
|
-
border-bottom: solid 4px #fff;
|
|
32
|
-
}
|
|
33
|
-
.rr-progress.disabled.svelte-dxnc1j.svelte-dxnc1j {
|
|
34
|
-
cursor: not-allowed;
|
|
35
|
-
}
|
|
36
|
-
.rr-progress__step.svelte-dxnc1j.svelte-dxnc1j {
|
|
37
|
-
height: 100%;
|
|
38
|
-
position: absolute;
|
|
39
|
-
left: 0;
|
|
40
|
-
top: 0;
|
|
41
|
-
background: #e0e1fe;
|
|
42
|
-
}
|
|
43
|
-
.rr-progress__handler.svelte-dxnc1j.svelte-dxnc1j {
|
|
44
|
-
width: 20px;
|
|
45
|
-
height: 20px;
|
|
46
|
-
border-radius: 10px;
|
|
47
|
-
position: absolute;
|
|
48
|
-
top: 2px;
|
|
49
|
-
transform: translate(-50%, -50%);
|
|
50
|
-
background: rgb(73, 80, 246);
|
|
51
|
-
}
|
|
52
|
-
.rr-controller__btns.svelte-dxnc1j.svelte-dxnc1j {
|
|
53
|
-
display: flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
justify-content: center;
|
|
56
|
-
font-size: 13px;
|
|
57
|
-
}
|
|
58
|
-
.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j {
|
|
59
|
-
width: 32px;
|
|
60
|
-
height: 32px;
|
|
61
|
-
display: flex;
|
|
62
|
-
padding: 0;
|
|
63
|
-
align-items: center;
|
|
64
|
-
justify-content: center;
|
|
65
|
-
background: none;
|
|
66
|
-
border: none;
|
|
67
|
-
border-radius: 50%;
|
|
68
|
-
cursor: pointer;
|
|
69
|
-
}
|
|
70
|
-
.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:active {
|
|
71
|
-
background: #e0e1fe;
|
|
72
|
-
}
|
|
73
|
-
.rr-controller__btns.svelte-dxnc1j button.active.svelte-dxnc1j {
|
|
74
|
-
color: #fff;
|
|
75
|
-
background: rgb(73, 80, 246);
|
|
76
|
-
}
|
|
77
|
-
.rr-controller__btns.svelte-dxnc1j button.svelte-dxnc1j:disabled {
|
|
78
|
-
cursor: not-allowed;
|
|
79
|
-
}
|
|
80
1
|
.replayer-wrapper {
|
|
81
2
|
position: relative;
|
|
82
3
|
}
|
|
@@ -88,7 +9,7 @@
|
|
|
88
9
|
background-size: contain;
|
|
89
10
|
background-position: center center;
|
|
90
11
|
background-repeat: no-repeat;
|
|
91
|
-
background-image: url('data:image/svg+xml;base64,
|
|
12
|
+
background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
|
|
92
13
|
border-color: transparent; /* otherwise we transition from black when .touch-device class is added */
|
|
93
14
|
}
|
|
94
15
|
.replayer-mouse::after {
|
|
@@ -96,7 +17,6 @@
|
|
|
96
17
|
display: inline-block;
|
|
97
18
|
width: 20px;
|
|
98
19
|
height: 20px;
|
|
99
|
-
border-radius: 10px;
|
|
100
20
|
background: rgb(73, 80, 246);
|
|
101
21
|
border-radius: 100%;
|
|
102
22
|
transform: translate(-50%, -50%);
|
|
@@ -107,23 +27,19 @@
|
|
|
107
27
|
}
|
|
108
28
|
.replayer-mouse.touch-device {
|
|
109
29
|
background-image: none; /* there's no passive cursor on touch-only screens */
|
|
110
|
-
width:
|
|
111
|
-
height:
|
|
112
|
-
border-width:
|
|
30
|
+
width: 70px;
|
|
31
|
+
height: 70px;
|
|
32
|
+
border-width: 4px;
|
|
113
33
|
border-style: solid;
|
|
114
34
|
border-radius: 100%;
|
|
115
35
|
margin-left: -37px;
|
|
116
36
|
margin-top: -37px;
|
|
117
|
-
border-color: rgba(
|
|
118
|
-
|
|
119
|
-
transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out,
|
|
120
|
-
background-color 0.2s ease-in-out;
|
|
37
|
+
border-color: rgba(73, 80, 246, 0);
|
|
38
|
+
transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
|
|
121
39
|
}
|
|
122
40
|
.replayer-mouse.touch-device.touch-active {
|
|
123
|
-
border-color: rgba(
|
|
124
|
-
|
|
125
|
-
transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out,
|
|
126
|
-
background-color 0.2s ease-in-out;
|
|
41
|
+
border-color: rgba(73, 80, 246, 1);
|
|
42
|
+
transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
|
|
127
43
|
}
|
|
128
44
|
.replayer-mouse.touch-device::after {
|
|
129
45
|
opacity: 0; /* there's no passive cursor on touch-only screens */
|
|
@@ -135,6 +51,7 @@
|
|
|
135
51
|
position: absolute;
|
|
136
52
|
pointer-events: none;
|
|
137
53
|
}
|
|
54
|
+
|
|
138
55
|
@keyframes click {
|
|
139
56
|
0% {
|
|
140
57
|
opacity: 0.3;
|
|
@@ -147,6 +64,7 @@
|
|
|
147
64
|
height: 10px;
|
|
148
65
|
}
|
|
149
66
|
}
|
|
67
|
+
|
|
150
68
|
@keyframes touch-click {
|
|
151
69
|
0% {
|
|
152
70
|
opacity: 0;
|
|
@@ -160,85 +78,5 @@
|
|
|
160
78
|
}
|
|
161
79
|
}
|
|
162
80
|
|
|
163
|
-
.rr-player {
|
|
164
|
-
position: relative;
|
|
165
|
-
background: white;
|
|
166
|
-
float: left;
|
|
167
|
-
border-radius: 5px;
|
|
168
|
-
box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
|
|
169
|
-
}
|
|
170
|
-
.rr-player__frame {
|
|
171
|
-
overflow: hidden;
|
|
172
|
-
}
|
|
173
|
-
.replayer-wrapper {
|
|
174
|
-
float: left;
|
|
175
|
-
clear: both;
|
|
176
|
-
transform-origin: top left;
|
|
177
|
-
left: 50%;
|
|
178
|
-
top: 50%;
|
|
179
|
-
}
|
|
180
|
-
.replayer-wrapper > iframe {
|
|
181
|
-
border: none;
|
|
182
|
-
}
|
|
183
|
-
.switch.svelte-1mmdovf.svelte-1mmdovf {
|
|
184
|
-
height: 1em;
|
|
185
|
-
display: flex;
|
|
186
|
-
align-items: center;
|
|
187
|
-
}
|
|
188
|
-
.switch.disabled.svelte-1mmdovf.svelte-1mmdovf {
|
|
189
|
-
opacity: 0.5;
|
|
190
|
-
}
|
|
191
|
-
.label.svelte-1mmdovf.svelte-1mmdovf {
|
|
192
|
-
margin: 0 8px;
|
|
193
|
-
}
|
|
194
|
-
.switch.svelte-1mmdovf input[type='checkbox'].svelte-1mmdovf {
|
|
195
|
-
position: absolute;
|
|
196
|
-
opacity: 0;
|
|
197
|
-
}
|
|
198
|
-
.switch.svelte-1mmdovf label.svelte-1mmdovf {
|
|
199
|
-
width: 2em;
|
|
200
|
-
height: 1em;
|
|
201
|
-
position: relative;
|
|
202
|
-
cursor: pointer;
|
|
203
|
-
display: block;
|
|
204
|
-
}
|
|
205
|
-
.switch.disabled.svelte-1mmdovf label.svelte-1mmdovf {
|
|
206
|
-
cursor: not-allowed;
|
|
207
|
-
}
|
|
208
|
-
.switch.svelte-1mmdovf label.svelte-1mmdovf:before {
|
|
209
|
-
content: '';
|
|
210
|
-
position: absolute;
|
|
211
|
-
width: 2em;
|
|
212
|
-
height: 1em;
|
|
213
|
-
left: 0.1em;
|
|
214
|
-
transition: background 0.1s ease;
|
|
215
|
-
background: rgba(73, 80, 246, 0.5);
|
|
216
|
-
border-radius: 50px;
|
|
217
|
-
}
|
|
218
|
-
.switch.svelte-1mmdovf label.svelte-1mmdovf:after {
|
|
219
|
-
content: '';
|
|
220
|
-
position: absolute;
|
|
221
|
-
width: 1em;
|
|
222
|
-
height: 1em;
|
|
223
|
-
border-radius: 50px;
|
|
224
|
-
left: 0;
|
|
225
|
-
transition: all 0.2s ease;
|
|
226
|
-
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
|
|
227
|
-
background: #fcfff4;
|
|
228
|
-
animation: switch-off 0.2s ease-out;
|
|
229
|
-
z-index: 2;
|
|
230
|
-
}
|
|
231
|
-
.switch
|
|
232
|
-
input[type='checkbox']:checked
|
|
233
|
-
+ label.svelte-1mmdovf.svelte-1mmdovf:before {
|
|
234
|
-
background: rgb(73, 80, 246);
|
|
235
|
-
}
|
|
236
|
-
.switch
|
|
237
|
-
input[type='checkbox']:checked
|
|
238
|
-
+ label.svelte-1mmdovf.svelte-1mmdovf:after {
|
|
239
|
-
animation: switch-on 0.2s ease-out;
|
|
240
|
-
left: 1.1em;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
81
|
|
|
244
82
|
/*# sourceMappingURL=index.css.map*/
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["webpack://highlightLib/./src/replay/styles/style.css"],"names":[],"mappings":"AAAA;EACE,
|
|
1
|
+
{"version":3,"sources":["webpack://highlightLib/./src/replay/styles/style.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,+CAA+C;EAC/C,wBAAwB;EACxB,kCAAkC;EAClC,4BAA4B;EAC5B,+qBAA+qB;EAC/qB,yBAAyB,EAAE,yEAAyE;AACtG;AACA;EACE,WAAW;EACX,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,4BAA4B;EAC5B,mBAAmB;EACnB,gCAAgC;EAChC,YAAY;AACd;AACA;EACE,mCAAmC;AACrC;AACA;EACE,sBAAsB,EAAE,oDAAoD;EAC5E,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,mBAAmB;EACnB,mBAAmB;EACnB,kBAAkB;EAClB,iBAAiB;EACjB,kCAAkC;EAClC,wEAAwE;AAC1E;AACA;EACE,kCAAkC;EAClC,8EAA8E;AAChF;AACA;EACE,UAAU,EAAE,oDAAoD;AAClE;AACA;EACE,yCAAyC;AAC3C;AACA;EACE,kBAAkB;EAClB,oBAAoB;AACtB;;AAEA;EACE;IACE,YAAY;IACZ,WAAW;IACX,YAAY;EACd;EACA;IACE,YAAY;IACZ,WAAW;IACX,YAAY;EACd;AACF;;AAEA;EACE;IACE,UAAU;IACV,WAAW;IACX,YAAY;EACd;EACA;IACE,YAAY;IACZ,WAAW;IACX,YAAY;EACd;AACF","file":"index.css","sourcesContent":[".replayer-wrapper {\n position: relative;\n}\n.replayer-mouse {\n position: absolute;\n width: 20px;\n height: 20px;\n transition: left 0.05s linear, top 0.05s linear;\n background-size: contain;\n background-position: center center;\n background-repeat: no-repeat;\n background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');\n border-color: transparent; /* otherwise we transition from black when .touch-device class is added */\n}\n.replayer-mouse::after {\n content: '';\n display: inline-block;\n width: 20px;\n height: 20px;\n background: rgb(73, 80, 246);\n border-radius: 100%;\n transform: translate(-50%, -50%);\n opacity: 0.3;\n}\n.replayer-mouse.active::after {\n animation: click 0.2s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n background-image: none; /* there's no passive cursor on touch-only screens */\n width: 70px;\n height: 70px;\n border-width: 4px;\n border-style: solid;\n border-radius: 100%;\n margin-left: -37px;\n margin-top: -37px;\n border-color: rgba(73, 80, 246, 0);\n transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n border-color: rgba(73, 80, 246, 1);\n transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n opacity: 0; /* there's no passive cursor on touch-only screens */\n}\n.replayer-mouse.touch-device.active::after {\n animation: touch-click 0.2s ease-in-out 1;\n}\n.replayer-mouse-tail {\n position: absolute;\n pointer-events: none;\n}\n\n@keyframes click {\n 0% {\n opacity: 0.3;\n width: 20px;\n height: 20px;\n }\n 50% {\n opacity: 0.5;\n width: 10px;\n height: 10px;\n }\n}\n\n@keyframes touch-click {\n 0% {\n opacity: 0;\n width: 20px;\n height: 20px;\n }\n 50% {\n opacity: 0.5;\n width: 10px;\n height: 10px;\n }\n}\n"],"sourceRoot":""}
|