@streamscloud/embeddable 1.1.7 → 1.1.9

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.
@@ -27,255 +27,134 @@ $effect(() => {
27
27
  opacity: 1;
28
28
  }
29
29
  }
30
- .short-videos-player-modal {
31
- /**
32
- * 1. Correct the line height in all browsers.
33
- * 2. Prevent adjustments of font size after orientation changes in iOS.
34
- */
35
- line-height: 1.15; /* 1 */
36
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
37
- font-weight: 400;
38
- -webkit-text-size-adjust: 100%; /* 2 */
39
- margin: 0;
40
- box-sizing: border-box;
41
- text-align: initial;
42
- /* Reset browser styles */
43
- /*Default margins and paddings are removed*/
44
- /*Images are block-level*/
45
- /*Lists are unstyled*/
46
- /* Normalize styles */
47
- /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
48
- /* Document
49
- ========================================================================== */
50
- /**
51
- * Render the `main` element consistently in IE.
52
- */
53
- /**
54
- * Correct the font size and margin on `h1` elements within `section` and
55
- * `article` contexts in Chrome, Firefox, and Safari.
56
- */
57
- /* Grouping content
58
- ========================================================================== */
59
- /**
60
- * 1. Add the correct box sizing in Firefox.
61
- * 2. Show the overflow in Edge and IE.
62
- */
63
- /**
64
- * 1. Correct the inheritance and scaling of font size in all browsers.
65
- * 2. Correct the odd `em` font sizing in all browsers.
66
- */
67
- /* Text-level semantics
68
- ========================================================================== */
69
- /**
70
- * Remove the gray background on active links in IE 10.
71
- */
72
- /**
73
- * 1. Remove the bottom border in Chrome 57-
74
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
75
- */
76
- /**
77
- * Add the correct font weight in Chrome, Edge, and Safari.
78
- */
79
- /**
80
- * 1. Correct the inheritance and scaling of font size in all browsers.
81
- * 2. Correct the odd `em` font sizing in all browsers.
82
- */
83
- /**
84
- * Add the correct font size in all browsers.
85
- */
86
- /**
87
- * Prevent `sub` and `sup` elements from affecting the line height in
88
- * all browsers.
89
- */
90
- /* Embedded content
91
- ========================================================================== */
92
- /**
93
- * Remove the border on images inside links in IE 10.
94
- */
95
- /* Forms
96
- ========================================================================== */
97
- /**
98
- * 1. Change the font styles in all browsers.
99
- * 2. Remove the margin in Firefox and Safari.
100
- */
101
- /**
102
- * Show the overflow in IE.
103
- * 1. Show the overflow in Edge.
104
- */
105
- /**
106
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
107
- * 1. Remove the inheritance of text transform in Firefox.
108
- */
109
- /**
110
- * Correct the inability to style clickable types in iOS and Safari.
111
- */
112
- /**
113
- * Remove the inner border and padding in Firefox.
114
- */
115
- /**
116
- * Restore the focus styles unset by the previous rule.
117
- */
118
- /**
119
- * Correct the padding in Firefox.
120
- */
121
- /**
122
- * 1. Correct the text wrapping in Edge and IE.
123
- * 2. Correct the color inheritance from `fieldset` elements in IE.
124
- * 3. Remove the padding so developers are not caught out when they zero out
125
- * `fieldset` elements in all browsers.
126
- */
127
- /**
128
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
129
- */
130
- /**
131
- * Remove the default vertical scrollbar in IE 10+.
132
- */
133
- /**
134
- * 1. Add the correct box sizing in IE 10.
135
- * 2. Remove the padding in IE 10.
136
- */
137
- /**
138
- * Correct the cursor style of increment and decrement buttons in Chrome.
139
- */
140
- /**
141
- * 1. Correct the odd appearance in Chrome and Safari.
142
- * 2. Correct the outline style in Safari.
143
- */
144
- /**
145
- * Remove the inner padding in Chrome and Safari on macOS.
146
- */
147
- /**
148
- * 1. Correct the inability to style clickable types in iOS and Safari.
149
- * 2. Change font properties to `inherit` in Safari.
150
- */
151
- /* Misc
152
- ========================================================================== */
153
- /**
154
- * Add the correct display in IE 10+.
155
- */
156
- /**
157
- * Add the correct display in IE 10.
158
- */
159
- position: fixed;
160
- top: 0;
161
- left: 0;
162
- bottom: 0;
163
- right: 0;
164
- z-index: 1000;
165
- }
166
- .short-videos-player-modal :global(a),
167
- .short-videos-player-modal :global(article),
168
- .short-videos-player-modal :global(aside),
169
- .short-videos-player-modal :global(blockquote),
170
- .short-videos-player-modal :global(body),
171
- .short-videos-player-modal :global(dd),
172
- .short-videos-player-modal :global(div),
173
- .short-videos-player-modal :global(dl),
174
- .short-videos-player-modal :global(dt),
175
- .short-videos-player-modal :global(figcaption),
176
- .short-videos-player-modal :global(figure),
177
- .short-videos-player-modal :global(footer),
178
- .short-videos-player-modal :global(form),
179
- .short-videos-player-modal :global(h1),
180
- .short-videos-player-modal :global(h2),
181
- .short-videos-player-modal :global(h3),
182
- .short-videos-player-modal :global(h4),
183
- .short-videos-player-modal :global(h5),
184
- .short-videos-player-modal :global(h6),
185
- .short-videos-player-modal :global(header),
186
- .short-videos-player-modal :global(html),
187
- .short-videos-player-modal :global(img),
188
- .short-videos-player-modal :global(li),
189
- .short-videos-player-modal :global(nav),
190
- .short-videos-player-modal :global(ol),
191
- .short-videos-player-modal :global(p),
192
- .short-videos-player-modal :global(section),
193
- .short-videos-player-modal :global(table),
194
- .short-videos-player-modal :global(td),
195
- .short-videos-player-modal :global(ul) {
30
+ /* Reset browser styles */
31
+ /*Default margins and paddings are removed*/
32
+ :global(a),
33
+ :global(article),
34
+ :global(aside),
35
+ :global(blockquote),
36
+ :global(body),
37
+ :global(dd),
38
+ :global(div),
39
+ :global(dl),
40
+ :global(dt),
41
+ :global(figcaption),
42
+ :global(figure),
43
+ :global(footer),
44
+ :global(form),
45
+ :global(h1),
46
+ :global(h2),
47
+ :global(h3),
48
+ :global(h4),
49
+ :global(h5),
50
+ :global(h6),
51
+ :global(header),
52
+ :global(html),
53
+ :global(img),
54
+ :global(li),
55
+ :global(nav),
56
+ :global(ol),
57
+ :global(p),
58
+ :global(section),
59
+ :global(table),
60
+ :global(td),
61
+ :global(ul) {
196
62
  margin: 0;
197
63
  padding: 0;
198
64
  }
199
- .short-videos-player-modal :global(header),
200
- .short-videos-player-modal :global(section),
201
- .short-videos-player-modal :global(footer),
202
- .short-videos-player-modal :global(aside),
203
- .short-videos-player-modal :global(nav),
204
- .short-videos-player-modal :global(article),
205
- .short-videos-player-modal :global(figure),
206
- .short-videos-player-modal :global(figcaption) {
65
+
66
+ :global(header),
67
+ :global(section),
68
+ :global(footer),
69
+ :global(aside),
70
+ :global(nav),
71
+ :global(article),
72
+ :global(figure),
73
+ :global(figcaption) {
207
74
  display: block;
208
75
  }
209
- .short-videos-player-modal :global(img),
210
- .short-videos-player-modal :global(svg),
211
- .short-videos-player-modal :global(video),
212
- .short-videos-player-modal :global(canvas),
213
- .short-videos-player-modal :global(audio),
214
- .short-videos-player-modal :global(iframe),
215
- .short-videos-player-modal :global(embed),
216
- .short-videos-player-modal :global(object) {
76
+
77
+ /*Images are block-level*/
78
+ :global(img),
79
+ :global(svg),
80
+ :global(video),
81
+ :global(canvas),
82
+ :global(audio),
83
+ :global(iframe),
84
+ :global(embed),
85
+ :global(object) {
217
86
  display: block;
218
87
  vertical-align: middle;
219
88
  max-width: 100%;
220
89
  }
221
- .short-videos-player-modal :global(table) {
90
+
91
+ :global(table) {
222
92
  border-collapse: collapse;
223
93
  }
224
- .short-videos-player-modal :global(img) {
94
+
95
+ :global(img) {
225
96
  border: none;
226
97
  height: auto;
227
98
  }
228
- .short-videos-player-modal :global(video) {
99
+
100
+ :global(video) {
229
101
  outline: none;
230
102
  }
231
- .short-videos-player-modal :global(ul),
232
- .short-videos-player-modal :global(ol) {
103
+
104
+ /*Lists are unstyled*/
105
+ :global(ul),
106
+ :global(ol) {
233
107
  list-style: none;
234
108
  margin: 0;
235
109
  padding: 0;
236
110
  }
237
- .short-videos-player-modal :global(li) {
111
+
112
+ :global(li) {
238
113
  list-style: inherit;
239
114
  }
240
- .short-videos-player-modal :global(input) {
115
+
116
+ :global(input) {
241
117
  vertical-align: middle;
242
118
  min-width: 0;
243
119
  /* Chrome, Safari, Edge, Opera */
244
120
  }
245
- .short-videos-player-modal :global(input)::placeholder {
121
+ :global(input)::placeholder {
246
122
  color: var(--input--placeholder--color, #c1c1c1) !important;
247
123
  }
248
- .short-videos-player-modal :global(input):-webkit-autofill, .short-videos-player-modal :global(input):-webkit-autofill:hover, .short-videos-player-modal :global(input):-webkit-autofill:focus {
124
+ :global(input):-webkit-autofill, :global(input):-webkit-autofill:hover, :global(input):-webkit-autofill:focus {
249
125
  -webkit-background-clip: text;
250
126
  }
251
- .short-videos-player-modal :global(input)::-webkit-outer-spin-button, .short-videos-player-modal :global(input)::-webkit-inner-spin-button {
127
+ :global(input)::-webkit-outer-spin-button, :global(input)::-webkit-inner-spin-button {
252
128
  -webkit-appearance: none;
253
129
  margin: 0;
254
130
  }
255
- .short-videos-player-modal :global(textarea) {
131
+
132
+ :global(textarea) {
256
133
  vertical-align: top;
257
134
  resize: vertical;
258
135
  scrollbar-color: var(--custom-scrollbar-color, #b0b0b0) var(--custom-scrollbar-background, #f1f1f1);
259
136
  scrollbar-width: thin;
260
137
  }
261
- .short-videos-player-modal :global(textarea)::-webkit-scrollbar {
138
+ :global(textarea)::-webkit-scrollbar {
262
139
  width: 3px;
263
140
  height: 3px;
264
141
  background: var(--custom-scrollbar-background, transparent);
265
142
  visibility: hidden;
266
143
  }
267
- .short-videos-player-modal :global(textarea)::-webkit-scrollbar-thumb {
144
+ :global(textarea)::-webkit-scrollbar-thumb {
268
145
  background: var(--custom-scrollbar-color, #b0b0b0);
269
146
  }
270
- .short-videos-player-modal :global(textarea)::placeholder {
147
+ :global(textarea)::placeholder {
271
148
  color: var(--input--placeholder--color, #c1c1c1) !important;
272
149
  }
273
- .short-videos-player-modal :global(input:focus),
274
- .short-videos-player-modal :global(textarea:focus) {
150
+
151
+ :global(input:focus),
152
+ :global(textarea:focus) {
275
153
  outline: none;
276
154
  }
277
- .short-videos-player-modal :global(button),
278
- .short-videos-player-modal :global(input[type="submit"]) {
155
+
156
+ :global(button),
157
+ :global(input[type="submit"]) {
279
158
  cursor: pointer;
280
159
  -webkit-appearance: none;
281
160
  background-color: transparent;
@@ -285,122 +164,226 @@ $effect(() => {
285
164
  color: inherit;
286
165
  box-sizing: border-box;
287
166
  }
288
- .short-videos-player-modal :global(button):disabled,
289
- .short-videos-player-modal :global(input[type="submit"]):disabled {
167
+ :global(button):disabled,
168
+ :global(input[type="submit"]):disabled {
290
169
  cursor: default;
291
170
  }
292
- .short-videos-player-modal :global(button):focus, .short-videos-player-modal :global(button):focus-visible,
293
- .short-videos-player-modal :global(input[type="submit"]):focus,
294
- .short-videos-player-modal :global(input[type="submit"]):focus-visible {
171
+ :global(button):focus, :global(button):focus-visible,
172
+ :global(input[type="submit"]):focus,
173
+ :global(input[type="submit"]):focus-visible {
295
174
  outline: none;
296
175
  }
297
- .short-videos-player-modal :global(a) {
176
+
177
+ :global(a) {
298
178
  color: inherit;
299
179
  text-decoration: none;
300
180
  transition: color linear 0.2s;
301
181
  }
302
- .short-videos-player-modal :global(*),
303
- .short-videos-player-modal :global(*:before),
304
- .short-videos-player-modal :global(*:after) {
182
+
183
+ :global(*),
184
+ :global(*:before),
185
+ :global(*:after) {
305
186
  box-sizing: inherit;
306
187
  border-width: 0;
307
188
  border-style: solid;
308
189
  }
309
- .short-videos-player-modal :global(main) {
190
+
191
+ /* Normalize styles */
192
+ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
193
+ /* Document
194
+ ========================================================================== */
195
+ /**
196
+ * Render the `main` element consistently in IE.
197
+ */
198
+ :global(main) {
310
199
  display: block;
311
200
  }
312
- .short-videos-player-modal :global(h1) {
201
+
202
+ /**
203
+ * Correct the font size and margin on `h1` elements within `section` and
204
+ * `article` contexts in Chrome, Firefox, and Safari.
205
+ */
206
+ :global(h1) {
313
207
  font-size: 2em;
314
208
  margin: 0.67em 0;
315
209
  }
316
- .short-videos-player-modal :global(hr) {
210
+
211
+ /* Grouping content
212
+ ========================================================================== */
213
+ /**
214
+ * 1. Add the correct box sizing in Firefox.
215
+ * 2. Show the overflow in Edge and IE.
216
+ */
217
+ :global(hr) {
317
218
  box-sizing: content-box; /* 1 */
318
219
  height: 0; /* 1 */
319
220
  overflow: visible; /* 2 */
320
221
  }
321
- .short-videos-player-modal :global(pre) {
222
+
223
+ /**
224
+ * 1. Correct the inheritance and scaling of font size in all browsers.
225
+ * 2. Correct the odd `em` font sizing in all browsers.
226
+ */
227
+ :global(pre) {
322
228
  font-family: monospace, monospace; /* 1 */
323
229
  font-size: 1em; /* 2 */
324
230
  }
325
- .short-videos-player-modal :global(a) {
231
+
232
+ /* Text-level semantics
233
+ ========================================================================== */
234
+ /**
235
+ * Remove the gray background on active links in IE 10.
236
+ */
237
+ :global(a) {
326
238
  background-color: transparent;
327
239
  }
328
- .short-videos-player-modal :global(abbr[title]) {
240
+
241
+ /**
242
+ * 1. Remove the bottom border in Chrome 57-
243
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
244
+ */
245
+ :global(abbr[title]) {
329
246
  border-bottom: none; /* 1 */
330
247
  text-decoration: underline; /* 2 */
331
248
  }
332
- .short-videos-player-modal :global(b),
333
- .short-videos-player-modal :global(strong) {
249
+
250
+ /**
251
+ * Add the correct font weight in Chrome, Edge, and Safari.
252
+ */
253
+ :global(b),
254
+ :global(strong) {
334
255
  font-weight: bolder;
335
256
  }
336
- .short-videos-player-modal :global(code),
337
- .short-videos-player-modal :global(kbd),
338
- .short-videos-player-modal :global(samp) {
257
+
258
+ /**
259
+ * 1. Correct the inheritance and scaling of font size in all browsers.
260
+ * 2. Correct the odd `em` font sizing in all browsers.
261
+ */
262
+ :global(code),
263
+ :global(kbd),
264
+ :global(samp) {
339
265
  font-family: monospace, monospace; /* 1 */
340
266
  font-size: 1em; /* 2 */
341
267
  }
342
- .short-videos-player-modal :global(small) {
268
+
269
+ /**
270
+ * Add the correct font size in all browsers.
271
+ */
272
+ :global(small) {
343
273
  font-size: 80%;
344
274
  }
345
- .short-videos-player-modal :global(sub),
346
- .short-videos-player-modal :global(sup) {
275
+
276
+ /**
277
+ * Prevent `sub` and `sup` elements from affecting the line height in
278
+ * all browsers.
279
+ */
280
+ :global(sub),
281
+ :global(sup) {
347
282
  font-size: 75%;
348
283
  line-height: 0;
349
284
  position: relative;
350
285
  vertical-align: baseline;
351
286
  }
352
- .short-videos-player-modal :global(sub) {
287
+
288
+ :global(sub) {
353
289
  bottom: -0.25em;
354
290
  }
355
- .short-videos-player-modal :global(sup) {
291
+
292
+ :global(sup) {
356
293
  top: -0.5em;
357
294
  }
358
- .short-videos-player-modal :global(img) {
295
+
296
+ /* Embedded content
297
+ ========================================================================== */
298
+ /**
299
+ * Remove the border on images inside links in IE 10.
300
+ */
301
+ :global(img) {
359
302
  border-style: none;
360
303
  }
361
- .short-videos-player-modal :global(button),
362
- .short-videos-player-modal :global(input),
363
- .short-videos-player-modal :global(optgroup),
364
- .short-videos-player-modal :global(select),
365
- .short-videos-player-modal :global(textarea) {
304
+
305
+ /* Forms
306
+ ========================================================================== */
307
+ /**
308
+ * 1. Change the font styles in all browsers.
309
+ * 2. Remove the margin in Firefox and Safari.
310
+ */
311
+ :global(button),
312
+ :global(input),
313
+ :global(optgroup),
314
+ :global(select),
315
+ :global(textarea) {
366
316
  font-family: inherit; /* 1 */
367
317
  font-size: 100%; /* 1 */
368
318
  line-height: 1.15; /* 1 */
369
319
  margin: 0; /* 2 */
370
320
  }
371
- .short-videos-player-modal :global(button),
372
- .short-videos-player-modal :global(input) {
321
+
322
+ /**
323
+ * Show the overflow in IE.
324
+ * 1. Show the overflow in Edge.
325
+ */
326
+ :global(button),
327
+ :global(input) {
373
328
  /* 1 */
374
329
  overflow: visible;
375
330
  }
376
- .short-videos-player-modal :global(button),
377
- .short-videos-player-modal :global(select) {
331
+
332
+ /**
333
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
334
+ * 1. Remove the inheritance of text transform in Firefox.
335
+ */
336
+ :global(button),
337
+ :global(select) {
378
338
  /* 1 */
379
339
  text-transform: none;
380
340
  }
381
- .short-videos-player-modal :global(button),
382
- .short-videos-player-modal :global([type="button"]),
383
- .short-videos-player-modal :global([type="reset"]),
384
- .short-videos-player-modal :global([type="submit"]) {
341
+
342
+ /**
343
+ * Correct the inability to style clickable types in iOS and Safari.
344
+ */
345
+ :global(button),
346
+ :global([type="button"]),
347
+ :global([type="reset"]),
348
+ :global([type="submit"]) {
385
349
  -webkit-appearance: button;
386
350
  }
387
- .short-videos-player-modal :global(button::-moz-focus-inner),
388
- .short-videos-player-modal :global([type="button"]::-moz-focus-inner),
389
- .short-videos-player-modal :global([type="reset"]::-moz-focus-inner),
390
- .short-videos-player-modal :global([type="submit"]::-moz-focus-inner) {
351
+
352
+ /**
353
+ * Remove the inner border and padding in Firefox.
354
+ */
355
+ :global(button::-moz-focus-inner),
356
+ :global([type="button"]::-moz-focus-inner),
357
+ :global([type="reset"]::-moz-focus-inner),
358
+ :global([type="submit"]::-moz-focus-inner) {
391
359
  border-style: none;
392
360
  padding: 0;
393
361
  }
394
- .short-videos-player-modal :global(button:-moz-focusring),
395
- .short-videos-player-modal :global([type="button"]:-moz-focusring),
396
- .short-videos-player-modal :global([type="reset"]:-moz-focusring),
397
- .short-videos-player-modal :global([type="submit"]:-moz-focusring) {
362
+
363
+ /**
364
+ * Restore the focus styles unset by the previous rule.
365
+ */
366
+ :global(button:-moz-focusring),
367
+ :global([type="button"]:-moz-focusring),
368
+ :global([type="reset"]:-moz-focusring),
369
+ :global([type="submit"]:-moz-focusring) {
398
370
  outline: 1px dotted ButtonText;
399
371
  }
400
- .short-videos-player-modal :global(fieldset) {
372
+
373
+ /**
374
+ * Correct the padding in Firefox.
375
+ */
376
+ :global(fieldset) {
401
377
  padding: 0.35em 0.75em 0.625em;
402
378
  }
403
- .short-videos-player-modal :global(legend) {
379
+
380
+ /**
381
+ * 1. Correct the text wrapping in Edge and IE.
382
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
383
+ * 3. Remove the padding so developers are not caught out when they zero out
384
+ * `fieldset` elements in all browsers.
385
+ */
386
+ :global(legend) {
404
387
  box-sizing: border-box; /* 1 */
405
388
  color: inherit; /* 2 */
406
389
  display: table; /* 1 */
@@ -408,35 +391,96 @@ $effect(() => {
408
391
  padding: 0; /* 3 */
409
392
  white-space: normal; /* 1 */
410
393
  }
411
- .short-videos-player-modal :global(progress) {
394
+
395
+ /**
396
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
397
+ */
398
+ :global(progress) {
412
399
  vertical-align: baseline;
413
400
  }
414
- .short-videos-player-modal :global(textarea) {
401
+
402
+ /**
403
+ * Remove the default vertical scrollbar in IE 10+.
404
+ */
405
+ :global(textarea) {
415
406
  overflow: auto;
416
407
  }
417
- .short-videos-player-modal :global([type="checkbox"]),
418
- .short-videos-player-modal :global([type="radio"]) {
408
+
409
+ /**
410
+ * 1. Add the correct box sizing in IE 10.
411
+ * 2. Remove the padding in IE 10.
412
+ */
413
+ :global([type="checkbox"]),
414
+ :global([type="radio"]) {
419
415
  box-sizing: border-box; /* 1 */
420
416
  padding: 0; /* 2 */
421
417
  }
422
- .short-videos-player-modal :global([type="number"]::-webkit-inner-spin-button),
423
- .short-videos-player-modal :global([type="number"]::-webkit-outer-spin-button) {
418
+
419
+ /**
420
+ * Correct the cursor style of increment and decrement buttons in Chrome.
421
+ */
422
+ :global([type="number"]::-webkit-inner-spin-button),
423
+ :global([type="number"]::-webkit-outer-spin-button) {
424
424
  height: auto;
425
425
  }
426
- .short-videos-player-modal :global([type="search"]) {
426
+
427
+ /**
428
+ * 1. Correct the odd appearance in Chrome and Safari.
429
+ * 2. Correct the outline style in Safari.
430
+ */
431
+ :global([type="search"]) {
427
432
  -webkit-appearance: textfield; /* 1 */
428
433
  outline-offset: -2px; /* 2 */
429
434
  }
430
- .short-videos-player-modal :global([type="search"]::-webkit-search-decoration) {
435
+
436
+ /**
437
+ * Remove the inner padding in Chrome and Safari on macOS.
438
+ */
439
+ :global([type="search"]::-webkit-search-decoration) {
431
440
  -webkit-appearance: none;
432
441
  }
433
- .short-videos-player-modal :global(::-webkit-file-upload-button) {
442
+
443
+ /**
444
+ * 1. Correct the inability to style clickable types in iOS and Safari.
445
+ * 2. Change font properties to `inherit` in Safari.
446
+ */
447
+ :global(::-webkit-file-upload-button) {
434
448
  -webkit-appearance: button; /* 1 */
435
449
  font: inherit; /* 2 */
436
450
  }
437
- .short-videos-player-modal :global(template) {
451
+
452
+ /* Misc
453
+ ========================================================================== */
454
+ /**
455
+ * Add the correct display in IE 10+.
456
+ */
457
+ :global(template) {
438
458
  display: none;
439
459
  }
440
- .short-videos-player-modal :global([hidden]) {
460
+
461
+ /**
462
+ * Add the correct display in IE 10.
463
+ */
464
+ :global([hidden]) {
441
465
  display: none;
466
+ }
467
+
468
+ .short-videos-player-modal {
469
+ /**
470
+ * 1. Correct the line height in all browsers.
471
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
472
+ */
473
+ line-height: 1.15; /* 1 */
474
+ font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
475
+ font-weight: 400;
476
+ -webkit-text-size-adjust: 100%; /* 2 */
477
+ margin: 0;
478
+ box-sizing: border-box;
479
+ text-align: initial;
480
+ position: fixed;
481
+ top: 0;
482
+ left: 0;
483
+ bottom: 0;
484
+ right: 0;
485
+ z-index: 1000;
442
486
  }</style>