@vonaffenfels/slate-editor 1.1.71 → 1.2.10

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.
Files changed (96) hide show
  1. package/.babelrc +43 -43
  2. package/README.md +5 -5
  3. package/componentLoader.js +93 -93
  4. package/dist/BlockEditor.css +4 -1871
  5. package/dist/BlockEditor.js +336 -3960
  6. package/dist/BlockEditor.js.LICENSE.txt +61 -0
  7. package/dist/Renderer.js +2 -2081
  8. package/dist/Renderer.js.LICENSE.txt +15 -0
  9. package/dist/fromHTML.js +1 -78
  10. package/dist/index.css +4 -1871
  11. package/dist/index.js +336 -4037
  12. package/dist/index.js.LICENSE.txt +69 -0
  13. package/dist/toHTML.js +2 -1689
  14. package/dist/toHTML.js.LICENSE.txt +23 -0
  15. package/dist/toText.js +2 -1689
  16. package/dist/toText.js.LICENSE.txt +23 -0
  17. package/package.json +2 -2
  18. package/postcss.config.js +6 -6
  19. package/scss/demo.scss +148 -148
  20. package/scss/editor.scss +17 -5
  21. package/scss/sidebarEditor.scss +185 -181
  22. package/scss/toolbar.scss +161 -161
  23. package/src/BlockEditor.js +6 -3
  24. package/src/Blocks/EmptyBlock.js +11 -11
  25. package/src/Blocks/EmptyWrapper.js +4 -4
  26. package/src/Blocks/ErrorBoundary.js +40 -40
  27. package/src/Blocks/LayoutBlock.js +274 -274
  28. package/src/Blocks/LayoutSlot.js +90 -90
  29. package/src/CollapsableMenu/CollapsableMenu.js +48 -48
  30. package/src/Context/StorybookContext.js +6 -6
  31. package/src/ElementAutocomplete.js +133 -133
  32. package/src/Loader.js +137 -137
  33. package/src/Nodes/Default.js +158 -158
  34. package/src/Nodes/Leaf.js +54 -54
  35. package/src/Nodes/Text.js +97 -97
  36. package/src/ObjectId.js +3 -3
  37. package/src/Renderer.js +73 -73
  38. package/src/Serializer/Html.js +42 -42
  39. package/src/Serializer/Serializer.js +371 -371
  40. package/src/Serializer/Text.js +17 -17
  41. package/src/Serializer/ads.js +174 -174
  42. package/src/Serializer/index.js +3 -3
  43. package/src/SidebarEditor/AssetList.js +181 -181
  44. package/src/SidebarEditor/Fields/CloudinaryContentSelect.js +89 -89
  45. package/src/SidebarEditor/Fields/ColorPicker.js +89 -89
  46. package/src/SidebarEditor/Fields/ContentfulContentSelect.js +62 -62
  47. package/src/SidebarEditor/Fields/DateTime.js +55 -55
  48. package/src/SidebarEditor/Fields/MVP.js +66 -66
  49. package/src/SidebarEditor/Fields/MultiSelect.js +13 -13
  50. package/src/SidebarEditor/Fields/RemoteMultiSelect.js +40 -40
  51. package/src/SidebarEditor/Fields/RemoteSelect.js +39 -39
  52. package/src/SidebarEditor/Fields/Select.js +47 -47
  53. package/src/SidebarEditor/Fields/StreamSelect.js +15 -15
  54. package/src/SidebarEditor/Fields/Switch.js +34 -34
  55. package/src/SidebarEditor/Fields/Textarea.js +21 -21
  56. package/src/SidebarEditor/Resizable.js +85 -85
  57. package/src/Storybook.js +151 -151
  58. package/src/Toolbar/Align.js +64 -64
  59. package/src/Toolbar/Anchor.js +94 -94
  60. package/src/Toolbar/Block.js +135 -135
  61. package/src/Toolbar/Element.js +44 -44
  62. package/src/Toolbar/Formats.js +71 -71
  63. package/src/Toolbar/Insert.js +28 -28
  64. package/src/Toolbar/Layout.js +399 -399
  65. package/src/Toolbar/Link.js +164 -164
  66. package/src/Toolbar/Toolbar.js +235 -235
  67. package/src/Tools/Margin.js +51 -51
  68. package/src/Translation/TranslationToolbarButton.js +119 -115
  69. package/src/dev/draftToSlate.json +3147 -3147
  70. package/src/dev/index.css +2 -2
  71. package/src/dev/index.html +10 -10
  72. package/src/dev/index.js +4 -4
  73. package/src/dev/sampleValue1.json +4294 -4294
  74. package/src/dev/sampleValueValid.json +410 -410
  75. package/src/dev/testComponents/TestStory.js +74 -74
  76. package/src/dev/testComponents/TestStory.stories.js +216 -216
  77. package/src/dev/testComponents/TestStory2.js +74 -74
  78. package/src/dev/testComponents/TestStory2.stories.js +197 -197
  79. package/src/dev/testComponents/TestStory3.js +74 -74
  80. package/src/dev/testComponents/TestStory3.stories.js +197 -197
  81. package/src/dev/testSampleValue.json +746 -746
  82. package/src/fromHTML.js +4 -4
  83. package/src/helper/array.js +8 -8
  84. package/src/index.js +10 -10
  85. package/src/plugins/ListItem.js +48 -48
  86. package/src/plugins/SoftBreak.js +23 -23
  87. package/src/toHTML.js +6 -6
  88. package/src/toText.js +6 -6
  89. package/src/util/reduceContentfulResponse.js +64 -64
  90. package/src/util.js +19 -19
  91. package/storyLoader.js +47 -47
  92. package/tailwind.config.js +4 -4
  93. package/webpack.config.build.js +55 -55
  94. package/webpack.config.dev.js +60 -60
  95. package/webpack.config.js +130 -130
  96. package/webpack.config.watch.js +4 -4
@@ -1,1871 +1,4 @@
1
- .toolbar {
2
- background-color: rgba(255, 255, 255, 0.95);
3
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
4
- display: none;
5
- flex-direction: row;
6
- justify-content: space-between;
7
- font-family: Arial, sans-serif;
8
- padding: 5px;
9
- position: absolute;
10
- z-index: 500;
11
- }
12
- .toolbar.toolbar-static {
13
- display: block;
14
- position: fixed;
15
- width: 100%;
16
- max-width: 100%;
17
- top: 0px;
18
- left: 0px;
19
- }
20
- .toolbar.active {
21
- display: block;
22
- }
23
- .toolbar .toolbar-btns {
24
- display: flex;
25
- align-items: center;
26
- }
27
- .toolbar .toolbar-btn {
28
- border-radius: 3px;
29
- color: black;
30
- cursor: pointer;
31
- font-weight: bold;
32
- margin-right: 5px;
33
- padding: 5px 7px;
34
- z-index: 500;
35
- position: relative;
36
- display: block;
37
- }
38
- .toolbar .toolbar-btn.active {
39
- background-color: rgba(0, 0, 0, 0.3);
40
- }
41
- .toolbar .toolbar-btn:last-child {
42
- margin-right: 0px;
43
- }
44
- .toolbar .toolbar-btn:hover, .toolbar .toolbar-btn:active {
45
- background-color: rgba(0, 0, 0, 0.2);
46
- }
47
- .toolbar .toolbar-btn:hover .toolbar-btn-config, .toolbar .toolbar-btn:active .toolbar-btn-config {
48
- display: block;
49
- }
50
- .toolbar .toolbar-btn .toolbar-btn-config {
51
- position: absolute;
52
- top: 28px;
53
- left: 0px;
54
- display: none;
55
- background-color: rgba(255, 255, 255, 0.95);
56
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
57
- padding: 5px 7px;
58
- }
59
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner {
60
- display: flex;
61
- flex-direction: column;
62
- }
63
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row {
64
- min-width: 250px;
65
- padding: 5px 7px;
66
- display: flex;
67
- flex-direction: row;
68
- }
69
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-label {
70
- flex-grow: 0;
71
- padding: 0 7px 0 0;
72
- }
73
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input {
74
- flex-grow: 1;
75
- }
76
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input {
77
- padding: 5px;
78
- border: 1px solid grey;
79
- background-color: white;
80
- color: black;
81
- }
82
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input[type=checkbox]:checked {
83
- color: white;
84
- background-color: black;
85
- }
86
- .toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-btn {
87
- display: flex;
88
- flex-grow: 1;
89
- border: 1px solid black;
90
- }
91
- .toolbar .toolbar-btn-expand {
92
- z-index: 500;
93
- display: block;
94
- max-height: 28px;
95
- overflow: hidden;
96
- }
97
- .toolbar .toolbar-btn-expand .toolbar-btn-expand-inner {
98
- display: flex;
99
- flex-direction: column;
100
- }
101
- .toolbar .toolbar-btn-expand .toolbar-btn-expand-inner .toolbar-btn.active {
102
- order: -1;
103
- }
104
- .toolbar .toolbar-btn-expand:hover {
105
- overflow: visible;
106
- }
107
- .toolbar .toolbar-btn-expand:hover .toolbar-btn-expand-inner {
108
- background-color: rgba(255, 255, 255, 0.95);
109
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
110
- }
111
- .toolbar .toolbar-btn-expand-right {
112
- z-index: 500;
113
- display: block;
114
- max-height: 28px;
115
- overflow: hidden;
116
- }
117
- .toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner {
118
- left: 100%;
119
- display: flex;
120
- flex-direction: column;
121
- }
122
- .toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner .toolbar-btn.active {
123
- order: -1;
124
- }
125
- .toolbar .toolbar-btn-expand-right:hover {
126
- overflow: visible;
127
- }
128
- .toolbar .toolbar-btn-expand-right:hover .toolbar-btn-expand-inner {
129
- background-color: rgba(255, 255, 255, 0.95);
130
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
131
- }
132
- .storybook-element-wrapper {
133
- max-width: 100vw;
134
- width: 100%;
135
- margin-left: auto;
136
- margin-right: auto;
137
- }
138
-
139
- .storybook-element {
140
- display: inline-block;
141
- width: 100%;
142
- }
143
- .storybook-element .storybook-element-component-overlay {
144
- display: none;
145
- width: 100%;
146
- height: 100%;
147
- position: absolute;
148
- z-index: 20;
149
- background-color: rgba(255, 255, 255, 0.7);
150
- -webkit-backdrop-filter: blur(4px);
151
- backdrop-filter: blur(4px);
152
- color: black;
153
- font-size: 1em;
154
- align-items: center;
155
- justify-content: center;
156
- content-visibility: auto;
157
- outline: 3px dashed #036fe3;
158
- }
159
- .storybook-element.storybook-element-missing-attributes .storybook-element-component-overlay {
160
- display: flex;
161
- outline: 3px dashed #ff0000;
162
- }
163
- .storybook-element.storybook-inline {
164
- display: inline-block;
165
- }
166
- .storybook-element.storybook-inline .options-toolbar {
167
- display: inline-block;
168
- }
169
- .storybook-element.storybook-inline .options-toolbar .options-container {
170
- padding: 0.15em;
171
- }
172
- .storybook-element.storybook-inline .options-toolbar .options-container .options-container-option {
173
- width: 16px;
174
- }
175
- .storybook-element.storybook-inline .storybook-element-component {
176
- display: inline-block;
177
- }
178
- .storybook-element.storybook-inline .storybook-element-component .editor-empty-element {
179
- min-width: 220px;
180
- min-height: 10px;
181
- padding: 0.15em;
182
- }
183
- .storybook-element.storybook-inline .storybook-element-component-overlay {
184
- font-size: 0.75em;
185
- min-width: 220px;
186
- text-align: center;
187
- }
188
- .storybook-element.storybook-element-float-left {
189
- float: left;
190
- }
191
- .storybook-element.storybook-element-float-right {
192
- float: right;
193
- }
194
- .storybook-element .storybook-element-component {
195
- -webkit-user-select: none;
196
- -moz-user-select: none;
197
- user-select: none;
198
- display: block;
199
- position: relative;
200
- }
201
- .storybook-element .storybook-element-component:hover .storybook-element-component-overlay {
202
- -webkit-user-select: none;
203
- -moz-user-select: none;
204
- user-select: none;
205
- display: flex;
206
- cursor: pointer;
207
- }
208
- .storybook-element .storybook-element-component .editor-empty-element {
209
- display: block;
210
- background-color: #42000b;
211
- color: white;
212
- border: 1px solid black;
213
- min-height: 40px;
214
- padding: 2em;
215
- min-width: 100%;
216
- }
217
- .storybook-element .storybook-element-component .editor-empty-element.editor-select-element {
218
- background-color: #555555;
219
- }
220
- .storybook-element .storybook-element-component.storybook-inline .editor-empty-element {
221
- min-height: 20px;
222
- min-width: 100px;
223
- }
224
- .storybook-element .storybook-element-component .storybook-element-display:empty {
225
- display: block;
226
- background-color: red;
227
- border: 1px solid black;
228
- min-height: 30px;
229
- min-width: 100px;
230
- }
231
- .storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty {
232
- display: block;
233
- background-color: red;
234
- border: 1px solid black;
235
- color: white;
236
- font-weight: bold;
237
- font-size: 110%;
238
- padding: 10px;
239
- min-height: 30px;
240
- min-width: 100px;
241
- position: relative;
242
- }
243
- .storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty::after {
244
- position: absolute;
245
- top: 0px;
246
- left: 0px;
247
- content: attr(data-content);
248
- }
249
- .storybook-element .storybook-element-error {
250
- background-color: red;
251
- padding: 15px;
252
- font-size: 18px;
253
- font-weight: bold;
254
- min-height: 100px;
255
- min-width: 100px;
256
- }
257
-
258
- @container (min-width: 100px) {
259
- .storybook-element-component-overlay {
260
- font-size: 2em;
261
- }
262
- }
263
- @charset "UTF-8";
264
- /*
265
- ! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
266
- */ /*
267
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
268
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
269
- */
270
- *,
271
- ::before,
272
- ::after {
273
- box-sizing: border-box; /* 1 */
274
- border-width: 0; /* 2 */
275
- border-style: solid; /* 2 */
276
- border-color: #e5e7eb; /* 2 */
277
- }
278
-
279
- ::before,
280
- ::after {
281
- --tw-content: "";
282
- }
283
-
284
- /*
285
- 1. Use a consistent sensible line-height in all browsers.
286
- 2. Prevent adjustments of font size after orientation changes in iOS.
287
- 3. Use a more readable tab size.
288
- 4. Use the user's configured `sans` font-family by default.
289
- 5. Use the user's configured `sans` font-feature-settings by default.
290
- 6. Use the user's configured `sans` font-variation-settings by default.
291
- */
292
- html {
293
- line-height: 1.5; /* 1 */
294
- -webkit-text-size-adjust: 100%; /* 2 */
295
- -moz-tab-size: 4; /* 3 */
296
- -o-tab-size: 4;
297
- tab-size: 4; /* 3 */
298
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
299
- font-feature-settings: normal; /* 5 */
300
- font-variation-settings: normal; /* 6 */
301
- }
302
-
303
- /*
304
- 1. Remove the margin in all browsers.
305
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
306
- */
307
- body {
308
- margin: 0; /* 1 */
309
- line-height: inherit; /* 2 */
310
- }
311
-
312
- /*
313
- 1. Add the correct height in Firefox.
314
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
315
- 3. Ensure horizontal rules are visible by default.
316
- */
317
- hr {
318
- height: 0; /* 1 */
319
- color: inherit; /* 2 */
320
- border-top-width: 1px; /* 3 */
321
- }
322
-
323
- /*
324
- Add the correct text decoration in Chrome, Edge, and Safari.
325
- */
326
- abbr:where([title]) {
327
- -webkit-text-decoration: underline dotted;
328
- text-decoration: underline dotted;
329
- }
330
-
331
- /*
332
- Remove the default font size and weight for headings.
333
- */
334
- h1,
335
- h2,
336
- h3,
337
- h4,
338
- h5,
339
- h6 {
340
- font-size: inherit;
341
- font-weight: inherit;
342
- }
343
-
344
- /*
345
- Reset links to optimize for opt-in styling instead of opt-out.
346
- */
347
- a {
348
- color: inherit;
349
- text-decoration: inherit;
350
- }
351
-
352
- /*
353
- Add the correct font weight in Edge and Safari.
354
- */
355
- b,
356
- strong {
357
- font-weight: bolder;
358
- }
359
-
360
- /*
361
- 1. Use the user's configured `mono` font family by default.
362
- 2. Correct the odd `em` font sizing in all browsers.
363
- */
364
- code,
365
- kbd,
366
- samp,
367
- pre {
368
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
369
- font-size: 1em; /* 2 */
370
- }
371
-
372
- /*
373
- Add the correct font size in all browsers.
374
- */
375
- small {
376
- font-size: 80%;
377
- }
378
-
379
- /*
380
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
381
- */
382
- sub,
383
- sup {
384
- font-size: 75%;
385
- line-height: 0;
386
- position: relative;
387
- vertical-align: baseline;
388
- }
389
-
390
- sub {
391
- bottom: -0.25em;
392
- }
393
-
394
- sup {
395
- top: -0.5em;
396
- }
397
-
398
- /*
399
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
400
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
401
- 3. Remove gaps between table borders by default.
402
- */
403
- table {
404
- text-indent: 0; /* 1 */
405
- border-color: inherit; /* 2 */
406
- border-collapse: collapse; /* 3 */
407
- }
408
-
409
- /*
410
- 1. Change the font styles in all browsers.
411
- 2. Remove the margin in Firefox and Safari.
412
- 3. Remove default padding in all browsers.
413
- */
414
- button,
415
- input,
416
- optgroup,
417
- select,
418
- textarea {
419
- font-family: inherit; /* 1 */
420
- font-feature-settings: inherit; /* 1 */
421
- font-variation-settings: inherit; /* 1 */
422
- font-size: 100%; /* 1 */
423
- font-weight: inherit; /* 1 */
424
- line-height: inherit; /* 1 */
425
- color: inherit; /* 1 */
426
- margin: 0; /* 2 */
427
- padding: 0; /* 3 */
428
- }
429
-
430
- /*
431
- Remove the inheritance of text transform in Edge and Firefox.
432
- */
433
- button,
434
- select {
435
- text-transform: none;
436
- }
437
-
438
- /*
439
- 1. Correct the inability to style clickable types in iOS and Safari.
440
- 2. Remove default button styles.
441
- */
442
- button,
443
- [type=button],
444
- [type=reset],
445
- [type=submit] {
446
- -webkit-appearance: button; /* 1 */
447
- background-color: transparent; /* 2 */
448
- background-image: none; /* 2 */
449
- }
450
-
451
- /*
452
- Use the modern Firefox focus style for all focusable elements.
453
- */
454
- :-moz-focusring {
455
- outline: auto;
456
- }
457
-
458
- /*
459
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
460
- */
461
- :-moz-ui-invalid {
462
- box-shadow: none;
463
- }
464
-
465
- /*
466
- Add the correct vertical alignment in Chrome and Firefox.
467
- */
468
- progress {
469
- vertical-align: baseline;
470
- }
471
-
472
- /*
473
- Correct the cursor style of increment and decrement buttons in Safari.
474
- */
475
- ::-webkit-inner-spin-button,
476
- ::-webkit-outer-spin-button {
477
- height: auto;
478
- }
479
-
480
- /*
481
- 1. Correct the odd appearance in Chrome and Safari.
482
- 2. Correct the outline style in Safari.
483
- */
484
- [type=search] {
485
- -webkit-appearance: textfield; /* 1 */
486
- outline-offset: -2px; /* 2 */
487
- }
488
-
489
- /*
490
- Remove the inner padding in Chrome and Safari on macOS.
491
- */
492
- ::-webkit-search-decoration {
493
- -webkit-appearance: none;
494
- }
495
-
496
- /*
497
- 1. Correct the inability to style clickable types in iOS and Safari.
498
- 2. Change font properties to `inherit` in Safari.
499
- */
500
- ::-webkit-file-upload-button {
501
- -webkit-appearance: button; /* 1 */
502
- font: inherit; /* 2 */
503
- }
504
-
505
- /*
506
- Add the correct display in Chrome and Safari.
507
- */
508
- summary {
509
- display: list-item;
510
- }
511
-
512
- /*
513
- Removes the default spacing and border for appropriate elements.
514
- */
515
- blockquote,
516
- dl,
517
- dd,
518
- h1,
519
- h2,
520
- h3,
521
- h4,
522
- h5,
523
- h6,
524
- hr,
525
- figure,
526
- p,
527
- pre {
528
- margin: 0;
529
- }
530
-
531
- fieldset {
532
- margin: 0;
533
- padding: 0;
534
- }
535
-
536
- legend {
537
- padding: 0;
538
- }
539
-
540
- ol,
541
- ul,
542
- menu {
543
- list-style: none;
544
- margin: 0;
545
- padding: 0;
546
- }
547
-
548
- /*
549
- Reset default styling for dialogs.
550
- */
551
- dialog {
552
- padding: 0;
553
- }
554
-
555
- /*
556
- Prevent resizing textareas horizontally by default.
557
- */
558
- textarea {
559
- resize: vertical;
560
- }
561
-
562
- /*
563
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
564
- 2. Set the default placeholder color to the user's configured gray 400 color.
565
- */
566
- input::-moz-placeholder, textarea::-moz-placeholder {
567
- opacity: 1; /* 1 */
568
- color: #9ca3af; /* 2 */
569
- }
570
-
571
- input::placeholder,
572
- textarea::placeholder {
573
- opacity: 1; /* 1 */
574
- color: #9ca3af; /* 2 */
575
- }
576
-
577
- /*
578
- Set the default cursor for buttons.
579
- */
580
- button,
581
- [role=button] {
582
- cursor: pointer;
583
- }
584
-
585
- /*
586
- Make sure disabled buttons don't get the pointer cursor.
587
- */
588
- :disabled {
589
- cursor: default;
590
- }
591
-
592
- /*
593
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
594
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
595
- This can trigger a poorly considered lint error in some tools but is included by design.
596
- */
597
- img,
598
- svg,
599
- video,
600
- canvas,
601
- audio,
602
- iframe,
603
- embed,
604
- object {
605
- display: block; /* 1 */
606
- vertical-align: middle; /* 2 */
607
- }
608
-
609
- /*
610
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
611
- */
612
- img,
613
- video {
614
- max-width: 100%;
615
- height: auto;
616
- }
617
-
618
- /* Make elements with the HTML hidden attribute stay hidden by default */
619
- [hidden] {
620
- display: none;
621
- }
622
-
623
- *, ::before, ::after {
624
- --tw-border-spacing-x: 0;
625
- --tw-border-spacing-y: 0;
626
- --tw-translate-x: 0;
627
- --tw-translate-y: 0;
628
- --tw-rotate: 0;
629
- --tw-skew-x: 0;
630
- --tw-skew-y: 0;
631
- --tw-scale-x: 1;
632
- --tw-scale-y: 1;
633
- --tw-pan-x: ;
634
- --tw-pan-y: ;
635
- --tw-pinch-zoom: ;
636
- --tw-scroll-snap-strictness: proximity;
637
- --tw-gradient-from-position: ;
638
- --tw-gradient-via-position: ;
639
- --tw-gradient-to-position: ;
640
- --tw-ordinal: ;
641
- --tw-slashed-zero: ;
642
- --tw-numeric-figure: ;
643
- --tw-numeric-spacing: ;
644
- --tw-numeric-fraction: ;
645
- --tw-ring-inset: ;
646
- --tw-ring-offset-width: 0px;
647
- --tw-ring-offset-color: #fff;
648
- --tw-ring-color: rgb(59 130 246 / 0.5);
649
- --tw-ring-offset-shadow: 0 0 #0000;
650
- --tw-ring-shadow: 0 0 #0000;
651
- --tw-shadow: 0 0 #0000;
652
- --tw-shadow-colored: 0 0 #0000;
653
- --tw-blur: ;
654
- --tw-brightness: ;
655
- --tw-contrast: ;
656
- --tw-grayscale: ;
657
- --tw-hue-rotate: ;
658
- --tw-invert: ;
659
- --tw-saturate: ;
660
- --tw-sepia: ;
661
- --tw-drop-shadow: ;
662
- --tw-backdrop-blur: ;
663
- --tw-backdrop-brightness: ;
664
- --tw-backdrop-contrast: ;
665
- --tw-backdrop-grayscale: ;
666
- --tw-backdrop-hue-rotate: ;
667
- --tw-backdrop-invert: ;
668
- --tw-backdrop-opacity: ;
669
- --tw-backdrop-saturate: ;
670
- --tw-backdrop-sepia: ;
671
- }
672
-
673
- ::backdrop {
674
- --tw-border-spacing-x: 0;
675
- --tw-border-spacing-y: 0;
676
- --tw-translate-x: 0;
677
- --tw-translate-y: 0;
678
- --tw-rotate: 0;
679
- --tw-skew-x: 0;
680
- --tw-skew-y: 0;
681
- --tw-scale-x: 1;
682
- --tw-scale-y: 1;
683
- --tw-pan-x: ;
684
- --tw-pan-y: ;
685
- --tw-pinch-zoom: ;
686
- --tw-scroll-snap-strictness: proximity;
687
- --tw-gradient-from-position: ;
688
- --tw-gradient-via-position: ;
689
- --tw-gradient-to-position: ;
690
- --tw-ordinal: ;
691
- --tw-slashed-zero: ;
692
- --tw-numeric-figure: ;
693
- --tw-numeric-spacing: ;
694
- --tw-numeric-fraction: ;
695
- --tw-ring-inset: ;
696
- --tw-ring-offset-width: 0px;
697
- --tw-ring-offset-color: #fff;
698
- --tw-ring-color: rgb(59 130 246 / 0.5);
699
- --tw-ring-offset-shadow: 0 0 #0000;
700
- --tw-ring-shadow: 0 0 #0000;
701
- --tw-shadow: 0 0 #0000;
702
- --tw-shadow-colored: 0 0 #0000;
703
- --tw-blur: ;
704
- --tw-brightness: ;
705
- --tw-contrast: ;
706
- --tw-grayscale: ;
707
- --tw-hue-rotate: ;
708
- --tw-invert: ;
709
- --tw-saturate: ;
710
- --tw-sepia: ;
711
- --tw-drop-shadow: ;
712
- --tw-backdrop-blur: ;
713
- --tw-backdrop-brightness: ;
714
- --tw-backdrop-contrast: ;
715
- --tw-backdrop-grayscale: ;
716
- --tw-backdrop-hue-rotate: ;
717
- --tw-backdrop-invert: ;
718
- --tw-backdrop-opacity: ;
719
- --tw-backdrop-saturate: ;
720
- --tw-backdrop-sepia: ;
721
- }
722
-
723
- .container {
724
- width: 100%;
725
- }
726
-
727
- @media (min-width: 640px) {
728
- .container {
729
- max-width: 640px;
730
- }
731
- }
732
- @media (min-width: 768px) {
733
- .container {
734
- max-width: 768px;
735
- }
736
- }
737
- @media (min-width: 1024px) {
738
- .container {
739
- max-width: 1024px;
740
- }
741
- }
742
- @media (min-width: 1280px) {
743
- .container {
744
- max-width: 1280px;
745
- }
746
- }
747
- @media (min-width: 1536px) {
748
- .container {
749
- max-width: 1536px;
750
- }
751
- }
752
- .pointer-events-none {
753
- pointer-events: none;
754
- }
755
-
756
- .collapse {
757
- visibility: collapse;
758
- }
759
-
760
- .static {
761
- position: static;
762
- }
763
-
764
- .fixed {
765
- position: fixed;
766
- }
767
-
768
- .absolute {
769
- position: absolute;
770
- }
771
-
772
- .relative {
773
- position: relative;
774
- }
775
-
776
- .sticky {
777
- position: sticky;
778
- }
779
-
780
- .left-0 {
781
- left: 0px;
782
- }
783
-
784
- .right-0 {
785
- right: 0px;
786
- }
787
-
788
- .top-0 {
789
- top: 0px;
790
- }
791
-
792
- .top-\[80px\] {
793
- top: 80px;
794
- }
795
-
796
- .z-50 {
797
- z-index: 50;
798
- }
799
-
800
- .z-\[999999\] {
801
- z-index: 999999;
802
- }
803
-
804
- .m-2 {
805
- margin: 0.5rem;
806
- }
807
-
808
- .mx-2 {
809
- margin-left: 0.5rem;
810
- margin-right: 0.5rem;
811
- }
812
-
813
- .mx-auto {
814
- margin-left: auto;
815
- margin-right: auto;
816
- }
817
-
818
- .my-2 {
819
- margin-top: 0.5rem;
820
- margin-bottom: 0.5rem;
821
- }
822
-
823
- .my-4 {
824
- margin-top: 1rem;
825
- margin-bottom: 1rem;
826
- }
827
-
828
- .mb-1 {
829
- margin-bottom: 0.25rem;
830
- }
831
-
832
- .mb-16 {
833
- margin-bottom: 4rem;
834
- }
835
-
836
- .mb-2 {
837
- margin-bottom: 0.5rem;
838
- }
839
-
840
- .mb-4 {
841
- margin-bottom: 1rem;
842
- }
843
-
844
- .ml-16 {
845
- margin-left: 4rem;
846
- }
847
-
848
- .ml-2 {
849
- margin-left: 0.5rem;
850
- }
851
-
852
- .ml-4 {
853
- margin-left: 1rem;
854
- }
855
-
856
- .mr-1 {
857
- margin-right: 0.25rem;
858
- }
859
-
860
- .mr-16 {
861
- margin-right: 4rem;
862
- }
863
-
864
- .mr-2 {
865
- margin-right: 0.5rem;
866
- }
867
-
868
- .mr-4 {
869
- margin-right: 1rem;
870
- }
871
-
872
- .mt-1 {
873
- margin-top: 0.25rem;
874
- }
875
-
876
- .mt-16 {
877
- margin-top: 4rem;
878
- }
879
-
880
- .mt-2 {
881
- margin-top: 0.5rem;
882
- }
883
-
884
- .mt-4 {
885
- margin-top: 1rem;
886
- }
887
-
888
- .mt-\[3px\] {
889
- margin-top: 3px;
890
- }
891
-
892
- .block {
893
- display: block;
894
- }
895
-
896
- .inline-block {
897
- display: inline-block;
898
- }
899
-
900
- .\!inline {
901
- display: inline !important;
902
- }
903
-
904
- .inline {
905
- display: inline;
906
- }
907
-
908
- .flex {
909
- display: flex;
910
- }
911
-
912
- .inline-flex {
913
- display: inline-flex;
914
- }
915
-
916
- .table {
917
- display: table;
918
- }
919
-
920
- .grid {
921
- display: grid;
922
- }
923
-
924
- .contents {
925
- display: contents;
926
- }
927
-
928
- .list-item {
929
- display: list-item;
930
- }
931
-
932
- .h-5 {
933
- height: 1.25rem;
934
- }
935
-
936
- .h-6 {
937
- height: 1.5rem;
938
- }
939
-
940
- .h-full {
941
- height: 100%;
942
- }
943
-
944
- .max-h-\[28px\] {
945
- max-height: 28px;
946
- }
947
-
948
- .max-h-full {
949
- max-height: 100%;
950
- }
951
-
952
- .\!w-auto {
953
- width: auto !important;
954
- }
955
-
956
- .w-11 {
957
- width: 2.75rem;
958
- }
959
-
960
- .w-5 {
961
- width: 1.25rem;
962
- }
963
-
964
- .w-52 {
965
- width: 13rem;
966
- }
967
-
968
- .w-full {
969
- width: 100%;
970
- }
971
-
972
- .min-w-\[28px\] {
973
- min-width: 28px;
974
- }
975
-
976
- .min-w-\[32px\] {
977
- min-width: 32px;
978
- }
979
-
980
- .max-w-\[150px\] {
981
- max-width: 150px;
982
- }
983
-
984
- .shrink-0 {
985
- flex-shrink: 0;
986
- }
987
-
988
- .grow {
989
- flex-grow: 1;
990
- }
991
-
992
- .translate-x-0 {
993
- --tw-translate-x: 0px;
994
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
995
- }
996
-
997
- .translate-x-5 {
998
- --tw-translate-x: 1.25rem;
999
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1000
- }
1001
-
1002
- .transform {
1003
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1004
- }
1005
-
1006
- .cursor-pointer {
1007
- cursor: pointer;
1008
- }
1009
-
1010
- .select-none {
1011
- -webkit-user-select: none;
1012
- -moz-user-select: none;
1013
- user-select: none;
1014
- }
1015
-
1016
- .grid-cols-1 {
1017
- grid-template-columns: repeat(1, minmax(0, 1fr));
1018
- }
1019
-
1020
- .grid-cols-2 {
1021
- grid-template-columns: repeat(2, minmax(0, 1fr));
1022
- }
1023
-
1024
- .grid-cols-3 {
1025
- grid-template-columns: repeat(3, minmax(0, 1fr));
1026
- }
1027
-
1028
- .grid-cols-4 {
1029
- grid-template-columns: repeat(4, minmax(0, 1fr));
1030
- }
1031
-
1032
- .grid-cols-5 {
1033
- grid-template-columns: repeat(5, minmax(0, 1fr));
1034
- }
1035
-
1036
- .flex-col {
1037
- flex-direction: column;
1038
- }
1039
-
1040
- .items-center {
1041
- align-items: center;
1042
- }
1043
-
1044
- .justify-end {
1045
- justify-content: flex-end;
1046
- }
1047
-
1048
- .justify-center {
1049
- justify-content: center;
1050
- }
1051
-
1052
- .gap-2 {
1053
- gap: 0.5rem;
1054
- }
1055
-
1056
- .gap-4 {
1057
- gap: 1rem;
1058
- }
1059
-
1060
- .space-x-4 > :not([hidden]) ~ :not([hidden]) {
1061
- --tw-space-x-reverse: 0;
1062
- margin-right: calc(1rem * var(--tw-space-x-reverse));
1063
- margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
1064
- }
1065
-
1066
- .space-y-8 > :not([hidden]) ~ :not([hidden]) {
1067
- --tw-space-y-reverse: 0;
1068
- margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
1069
- margin-bottom: calc(2rem * var(--tw-space-y-reverse));
1070
- }
1071
-
1072
- .overflow-hidden {
1073
- overflow: hidden;
1074
- }
1075
-
1076
- .overflow-scroll {
1077
- overflow: scroll;
1078
- }
1079
-
1080
- .overflow-y-auto {
1081
- overflow-y: auto;
1082
- }
1083
-
1084
- .truncate {
1085
- overflow: hidden;
1086
- text-overflow: ellipsis;
1087
- white-space: nowrap;
1088
- }
1089
-
1090
- .rounded-full {
1091
- border-radius: 9999px;
1092
- }
1093
-
1094
- .rounded-md {
1095
- border-radius: 0.375rem;
1096
- }
1097
-
1098
- .\!border-0 {
1099
- border-width: 0px !important;
1100
- }
1101
-
1102
- .border {
1103
- border-width: 1px;
1104
- }
1105
-
1106
- .border-2 {
1107
- border-width: 2px;
1108
- }
1109
-
1110
- .border-black {
1111
- --tw-border-opacity: 1;
1112
- border-color: rgb(0 0 0/var(--tw-border-opacity));
1113
- }
1114
-
1115
- .border-transparent {
1116
- border-color: transparent;
1117
- }
1118
-
1119
- .\!bg-green-600 {
1120
- --tw-bg-opacity: 1 !important;
1121
- background-color: rgb(22 163 74/var(--tw-bg-opacity)) !important;
1122
- }
1123
-
1124
- .bg-\[\#036fe3\] {
1125
- --tw-bg-opacity: 1;
1126
- background-color: rgb(3 111 227/var(--tw-bg-opacity));
1127
- }
1128
-
1129
- .bg-gray-200 {
1130
- --tw-bg-opacity: 1;
1131
- background-color: rgb(229 231 235/var(--tw-bg-opacity));
1132
- }
1133
-
1134
- .bg-green-500 {
1135
- --tw-bg-opacity: 1;
1136
- background-color: rgb(34 197 94/var(--tw-bg-opacity));
1137
- }
1138
-
1139
- .bg-white {
1140
- --tw-bg-opacity: 1;
1141
- background-color: rgb(255 255 255/var(--tw-bg-opacity));
1142
- }
1143
-
1144
- .\!p-1 {
1145
- padding: 0.25rem !important;
1146
- }
1147
-
1148
- .p-2 {
1149
- padding: 0.5rem;
1150
- }
1151
-
1152
- .p-4 {
1153
- padding: 1rem;
1154
- }
1155
-
1156
- .px-4 {
1157
- padding-left: 1rem;
1158
- padding-right: 1rem;
1159
- }
1160
-
1161
- .px-8 {
1162
- padding-left: 2rem;
1163
- padding-right: 2rem;
1164
- }
1165
-
1166
- .py-2 {
1167
- padding-top: 0.5rem;
1168
- padding-bottom: 0.5rem;
1169
- }
1170
-
1171
- .py-4 {
1172
- padding-top: 1rem;
1173
- padding-bottom: 1rem;
1174
- }
1175
-
1176
- .pb-2 {
1177
- padding-bottom: 0.5rem;
1178
- }
1179
-
1180
- .pr-2 {
1181
- padding-right: 0.5rem;
1182
- }
1183
-
1184
- .pt-1 {
1185
- padding-top: 0.25rem;
1186
- }
1187
-
1188
- .pt-2 {
1189
- padding-top: 0.5rem;
1190
- }
1191
-
1192
- .\!text-sm {
1193
- font-size: 0.875rem !important;
1194
- line-height: 1.25rem !important;
1195
- }
1196
-
1197
- .\!text-xl {
1198
- font-size: 1.25rem !important;
1199
- line-height: 1.75rem !important;
1200
- }
1201
-
1202
- .\!text-xs {
1203
- font-size: 0.75rem !important;
1204
- line-height: 1rem !important;
1205
- }
1206
-
1207
- .text-lg {
1208
- font-size: 1.125rem;
1209
- line-height: 1.75rem;
1210
- }
1211
-
1212
- .text-sm {
1213
- font-size: 0.875rem;
1214
- line-height: 1.25rem;
1215
- }
1216
-
1217
- .font-bold {
1218
- font-weight: 700;
1219
- }
1220
-
1221
- .italic {
1222
- font-style: italic;
1223
- }
1224
-
1225
- .\!leading-\[18px\] {
1226
- line-height: 18px !important;
1227
- }
1228
-
1229
- .\!text-red-500 {
1230
- --tw-text-opacity: 1 !important;
1231
- color: rgb(239 68 68/var(--tw-text-opacity)) !important;
1232
- }
1233
-
1234
- .\!text-white {
1235
- --tw-text-opacity: 1 !important;
1236
- color: rgb(255 255 255/var(--tw-text-opacity)) !important;
1237
- }
1238
-
1239
- .text-black {
1240
- --tw-text-opacity: 1;
1241
- color: rgb(0 0 0/var(--tw-text-opacity));
1242
- }
1243
-
1244
- .text-white {
1245
- --tw-text-opacity: 1;
1246
- color: rgb(255 255 255/var(--tw-text-opacity));
1247
- }
1248
-
1249
- .shadow {
1250
- --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1251
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1252
- box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
1253
- }
1254
-
1255
- .ring-0 {
1256
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1257
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1258
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));
1259
- }
1260
-
1261
- .filter {
1262
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1263
- }
1264
-
1265
- .transition {
1266
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1267
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1268
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1269
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1270
- transition-duration: 150ms;
1271
- }
1272
-
1273
- .duration-100 {
1274
- transition-duration: 100ms;
1275
- }
1276
-
1277
- .ease-in-out {
1278
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1279
- }
1280
-
1281
- .block-editor-wrapper {
1282
- position: relative;
1283
- display: flex;
1284
- height: 100%;
1285
- max-height: 100%;
1286
- max-width: 100%;
1287
- width: 100%;
1288
- }
1289
- .block-editor-wrapper .slate-editor-element-selected:not(.storybook-element-missing-attributes) .storybook-element-component {
1290
- outline: 2px dashed #61a2e9;
1291
- }
1292
- .block-editor-wrapper.storybook-active .slate-editor {
1293
- display: none;
1294
- overflow: hidden;
1295
- }
1296
- .block-editor-wrapper .storybook-target {
1297
- display: block;
1298
- height: 100%;
1299
- left: 0px;
1300
- position: fixed;
1301
- top: 0px;
1302
- width: 100%;
1303
- z-index: 1000;
1304
- }
1305
- .block-editor-wrapper .storybook-target:empty {
1306
- display: none;
1307
- }
1308
- .block-editor-wrapper .storybook-target .storybook-frame {
1309
- height: 100%;
1310
- width: 100%;
1311
- }
1312
- .block-editor-wrapper .storybook-target .storybook-frame iframe {
1313
- height: 100%;
1314
- width: 100%;
1315
- }
1316
- .block-editor-wrapper .slate-editor {
1317
- width: 100%;
1318
- height: 100%;
1319
- z-index: 100;
1320
- overflow-y: auto;
1321
- padding: 45px 0 0 0;
1322
- position: relative;
1323
- }
1324
- .block-editor-wrapper .slate-editor .editor-empty-element {
1325
- display: block !important;
1326
- }
1327
- .block-editor-wrapper .slate-editor p[data-slate-node=element] {
1328
- position: relative;
1329
- }
1330
- .block-editor-wrapper .slate-editor p[data-slate-node=element]:after {
1331
- font-size: 16px;
1332
- content: "P";
1333
- color: #CECECE;
1334
- position: absolute;
1335
- left: -20px;
1336
- text-transform: uppercase;
1337
- top: 0;
1338
- -webkit-user-select: none;
1339
- -moz-user-select: none;
1340
- user-select: none;
1341
- }
1342
- .block-editor-wrapper .slate-editor h1[data-slate-node=element] {
1343
- position: relative;
1344
- }
1345
- .block-editor-wrapper .slate-editor h1[data-slate-node=element]:after {
1346
- content: "h1";
1347
- font-size: 26px;
1348
- color: #CECECE;
1349
- position: absolute;
1350
- left: -36px;
1351
- text-transform: uppercase;
1352
- top: 6px;
1353
- -webkit-user-select: none;
1354
- -moz-user-select: none;
1355
- user-select: none;
1356
- }
1357
- .block-editor-wrapper .slate-editor h2[data-slate-node=element] {
1358
- position: relative;
1359
- }
1360
- .block-editor-wrapper .slate-editor h2[data-slate-node=element]:after {
1361
- content: "h2";
1362
- font-size: 24px;
1363
- color: #CECECE;
1364
- position: absolute;
1365
- left: -30px;
1366
- text-transform: uppercase;
1367
- top: 0;
1368
- -webkit-user-select: none;
1369
- -moz-user-select: none;
1370
- user-select: none;
1371
- }
1372
- .block-editor-wrapper .slate-editor h3[data-slate-node=element] {
1373
- position: relative;
1374
- }
1375
- .block-editor-wrapper .slate-editor h3[data-slate-node=element]:after {
1376
- content: "h3";
1377
- font-size: 20px;
1378
- color: #CECECE;
1379
- position: absolute;
1380
- left: -26px;
1381
- text-transform: uppercase;
1382
- top: 0;
1383
- -webkit-user-select: none;
1384
- -moz-user-select: none;
1385
- user-select: none;
1386
- }
1387
- .block-editor-wrapper .slate-editor h4[data-slate-node=element] {
1388
- position: relative;
1389
- }
1390
- .block-editor-wrapper .slate-editor h4[data-slate-node=element]:after {
1391
- content: "h4";
1392
- font-size: 16px;
1393
- color: #CECECE;
1394
- position: absolute;
1395
- left: -36px;
1396
- text-transform: uppercase;
1397
- top: 0;
1398
- -webkit-user-select: none;
1399
- -moz-user-select: none;
1400
- user-select: none;
1401
- }
1402
- .block-editor-wrapper .slate-editor h5[data-slate-node=element] {
1403
- position: relative;
1404
- }
1405
- .block-editor-wrapper .slate-editor h5[data-slate-node=element]:after {
1406
- content: "h5";
1407
- font-size: 14px;
1408
- color: #CECECE;
1409
- position: absolute;
1410
- left: -36px;
1411
- text-transform: uppercase;
1412
- top: 0;
1413
- -webkit-user-select: none;
1414
- -moz-user-select: none;
1415
- user-select: none;
1416
- }
1417
- .block-editor-wrapper .slate-editor h6[data-slate-node=element] {
1418
- position: relative;
1419
- }
1420
- .block-editor-wrapper .slate-editor h6[data-slate-node=element]:after {
1421
- content: "h6";
1422
- font-size: 12px;
1423
- color: #CECECE;
1424
- position: absolute;
1425
- left: -36px;
1426
- text-transform: uppercase;
1427
- top: 0;
1428
- -webkit-user-select: none;
1429
- -moz-user-select: none;
1430
- user-select: none;
1431
- }
1432
- .block-editor-wrapper .slate-editor .arrow-list {
1433
- list-style-type: "🠆" !important;
1434
- }
1435
- .block-editor-wrapper .slate-editor .arrow-list li::before {
1436
- content: none !important;
1437
- }
1438
- .block-editor-wrapper .slate-editor div[data-slate-editor=true] {
1439
- height: 100%;
1440
- }
1441
- .block-editor-wrapper .slate-editor .align-left {
1442
- text-align: left;
1443
- }
1444
- .block-editor-wrapper .slate-editor .align-right {
1445
- text-align: right;
1446
- }
1447
- .block-editor-wrapper .slate-editor .align-center {
1448
- text-align: center;
1449
- }
1450
- .block-editor-wrapper .slate-editor .align-justify {
1451
- text-align: justify;
1452
- }
1453
- .block-editor-wrapper .slate-editor .block-align-left {
1454
- display: inline-block;
1455
- float: left;
1456
- margin-right: 15px;
1457
- }
1458
- .block-editor-wrapper .slate-editor .block-align-undefined {
1459
- display: inline-block;
1460
- }
1461
- .block-editor-wrapper .slate-editor .block-align-right {
1462
- display: inline-block;
1463
- float: right;
1464
- margin-left: 15px;
1465
- }
1466
- .block-editor-wrapper .options-wrapper {
1467
- font-family: Arial, sans-serif;
1468
- position: relative;
1469
- color: #161616;
1470
- }
1471
- .block-editor-wrapper .options-wrapper:hover .options-container {
1472
- display: flex;
1473
- }
1474
- .block-editor-wrapper .options-wrapper .options-toolbar {
1475
- justify-content: space-between;
1476
- display: flex;
1477
- background-color: rgb(235, 235, 235);
1478
- padding: 0.25em;
1479
- }
1480
- .block-editor-wrapper .options-wrapper .options-container {
1481
- display: flex;
1482
- flex-direction: row;
1483
- justify-content: flex-end;
1484
- position: relative;
1485
- z-index: 200;
1486
- padding: 0.25em;
1487
- }
1488
- .block-editor-wrapper .options-wrapper .options-container .options-container-option {
1489
- cursor: pointer;
1490
- width: 26px;
1491
- margin-right: 0.25em;
1492
- }
1493
- .block-editor-wrapper .options-wrapper .options-container .options-container-option > svg {
1494
- width: 100%;
1495
- }
1496
- .block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-expand-text {
1497
- width: 100px;
1498
- }
1499
- .block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-delete {
1500
- color: red;
1501
- }
1502
- .block-editor-wrapper .options-wrapper .options-container.options-container-right {
1503
- self-align: flex-end;
1504
- }
1505
- .block-editor-wrapper .layout-slot-option-padding {
1506
- position: relative;
1507
- width: 26px;
1508
- height: 26px;
1509
- display: inline-block;
1510
- }
1511
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item {
1512
- background-color: black;
1513
- display: block;
1514
- position: absolute;
1515
- cursor: pointer;
1516
- }
1517
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item:hover {
1518
- background-color: #61a2e9;
1519
- z-index: 10;
1520
- }
1521
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item.active {
1522
- background-color: #3490f3;
1523
- z-index: 10;
1524
- }
1525
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-top {
1526
- height: 20%;
1527
- width: 100%;
1528
- top: 0;
1529
- left: 0;
1530
- }
1531
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-right {
1532
- height: 100%;
1533
- width: 20%;
1534
- right: 0;
1535
- top: 0;
1536
- }
1537
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-bottom {
1538
- height: 20%;
1539
- width: 100%;
1540
- bottom: 0;
1541
- left: 0;
1542
- }
1543
- .block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-left {
1544
- height: 100%;
1545
- width: 20%;
1546
- top: 0;
1547
- left: 0;
1548
- }
1549
- .block-editor-wrapper .layout-block-grid {
1550
- display: grid;
1551
- }
1552
- .block-editor-wrapper .layout-block-flex {
1553
- display: flex;
1554
- }
1555
- .block-editor-wrapper .layout-block.article-width {
1556
- width: 44.4444444444%;
1557
- }
1558
- .block-editor-wrapper .layout-block.site-width {
1559
- width: 66.6666666667%;
1560
- }
1561
- .block-editor-wrapper .layout-block .layout-slot {
1562
- display: flex;
1563
- flex-direction: column;
1564
- position: relative;
1565
- outline: 1px dashed grey;
1566
- }
1567
- .block-editor-wrapper .layout-block .layout-slot .storybook-element-component {
1568
- display: block;
1569
- }
1570
- .block-editor-wrapper .layout-block .layout-slot .layout-slot-content {
1571
- flex-grow: 1;
1572
- }
1573
- .block-editor-wrapper .layout-block .layout-slot .layout-slot-options {
1574
- background-color: grey;
1575
- color: white;
1576
- font-size: 24px;
1577
- padding: 10px;
1578
- display: flex;
1579
- flex-direction: row;
1580
- justify-content: space-between;
1581
- }
1582
- .block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-option {
1583
- text-transform: uppercase;
1584
- display: inline-block;
1585
- }
1586
- .block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-name {
1587
- text-transform: uppercase;
1588
- display: inline-block;
1589
- }
1590
- .block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-fill {
1591
- flex-grow: 1;
1592
- }
1593
- .block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-auto {
1594
- flex-grow: 0;
1595
- width: auto;
1596
- }
1597
- @media only screen and (max-width: 360px) {
1598
- .block-editor-wrapper .layout-block {
1599
- grid-template-columns: 1fr;
1600
- }
1601
- }
1602
-
1603
- .button {
1604
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
1605
- width: 100%;
1606
- padding: 8px 0.75rem !important;
1607
- color: #FFFFFF !important;
1608
- border: 1px solid #036fe3 !important;
1609
- transition: all 100ms ease-in-out;
1610
- background-color: #036fe3 !important;
1611
- font-size: 0.875rem !important;
1612
- border-radius: 4px !important;
1613
- }
1614
-
1615
- .button:hover {
1616
- background-color: #0275F0 !important;
1617
- }
1618
-
1619
- .button:active {
1620
- background-color: #0262C9 !important;
1621
- }
1622
-
1623
- .button.button--secondary {
1624
- color: #036fe3 !important;
1625
- border: 1px solid #036fe3 !important;
1626
- background-color: transparent !important;
1627
- }
1628
-
1629
- .button.button--secondary:hover {
1630
- background-color: #036fe3 !important;
1631
- color: #FFFFFF !important;
1632
- }
1633
-
1634
- .button.button--secondary:active {
1635
- background-color: #0262C9 !important;
1636
- color: #FFFFFF !important;
1637
- }
1638
-
1639
- .button.button--tertiary {
1640
- color: rgb(90, 101, 124) !important;
1641
- background-color: white !important;
1642
- border: 1px solid #cfd9e0 !important;
1643
- }
1644
-
1645
- .button.button--tertiary:hover {
1646
- background-color: rgb(248, 248, 248) !important;
1647
- }
1648
-
1649
- .button.button--tertiary:active {
1650
- background-color: rgb(237, 237, 237) !important;
1651
- }
1652
-
1653
- .resizable.enabled .resizable-left {
1654
- max-width: calc(100vw - 300px);
1655
- }
1656
- .resizable .resizable-left {
1657
- scrollbar-width: none;
1658
- max-width: 100vw;
1659
- position: relative;
1660
- }
1661
- .resizable .resizable-right {
1662
- scrollbar-width: none;
1663
- max-width: calc(100vw - 300px);
1664
- position: relative;
1665
- }
1666
- .resizable .resizable-x-handle {
1667
- cursor: ew-resize;
1668
- content: "";
1669
- position: absolute;
1670
- height: 100%;
1671
- width: 10px;
1672
- text-align: center;
1673
- top: 0;
1674
- left: -2px;
1675
- background-color: transparent;
1676
- }
1677
-
1678
- .hover\:\!bg-green-700:hover {
1679
- --tw-bg-opacity: 1 !important;
1680
- background-color: rgb(21 128 61/var(--tw-bg-opacity)) !important;
1681
- }
1682
-
1683
- .focus\:outline-none:focus {
1684
- outline: 2px solid transparent;
1685
- outline-offset: 2px;
1686
- }
1687
-
1688
- @media (min-width: 768px) {
1689
- .md\:ml-4 {
1690
- margin-left: 1rem;
1691
- }
1692
- .md\:mr-4 {
1693
- margin-right: 1rem;
1694
- }
1695
- .md\:grid-cols-1 {
1696
- grid-template-columns: repeat(1, minmax(0, 1fr));
1697
- }
1698
- .md\:grid-cols-2 {
1699
- grid-template-columns: repeat(2, minmax(0, 1fr));
1700
- }
1701
- .md\:grid-cols-3 {
1702
- grid-template-columns: repeat(3, minmax(0, 1fr));
1703
- }
1704
- .md\:grid-cols-4 {
1705
- grid-template-columns: repeat(4, minmax(0, 1fr));
1706
- }
1707
- .md\:grid-cols-5 {
1708
- grid-template-columns: repeat(5, minmax(0, 1fr));
1709
- }
1710
- .md\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
1711
- --tw-space-x-reverse: 0;
1712
- margin-right: calc(1rem * var(--tw-space-x-reverse));
1713
- margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
1714
- }
1715
- }
1716
- #sidebar-editor-wrapper {
1717
- padding-top: 45px;
1718
- height: 100%;
1719
- flex-basis: 400px;
1720
- flex-shrink: 0;
1721
- }
1722
-
1723
- #sidebar-editor {
1724
- display: flex;
1725
- flex-direction: column;
1726
- background-color: rgb(247, 249, 250);
1727
- max-height: 100%;
1728
- height: 100%;
1729
- overflow-y: auto;
1730
- padding: 16px;
1731
- /* button[data-test-id="cf-ui-button"] span {
1732
- color: #036fe3 !important;
1733
- }
1734
-
1735
- button[data-test-id="cf-ui-button"] svg {
1736
- fill: #036fe3 !important;
1737
- }
1738
-
1739
- button[data-test-id="cf-ui-button"]:hover span {
1740
- color: #FFFFFF !important;
1741
- }
1742
-
1743
- button[data-test-id="cf-ui-button"]:hover svg {
1744
- fill: #FFFFFF !important;
1745
- } */
1746
- }
1747
- #sidebar-editor * {
1748
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
1749
- }
1750
- #sidebar-editor p, #sidebar-editor label, #sidebar-editor b, #sidebar-editor span {
1751
- color: rgb(90, 101, 124);
1752
- }
1753
- #sidebar-editor label {
1754
- margin: 0 0 2px 0 !important;
1755
- }
1756
- #sidebar-editor input[type=text],
1757
- #sidebar-editor input[type=time],
1758
- #sidebar-editor input[type=date],
1759
- #sidebar-editor input[type=number],
1760
- #sidebar-editor input[type=color],
1761
- #sidebar-editor input[type=datetime-local],
1762
- #sidebar-editor input[type=search],
1763
- #sidebar-editor select,
1764
- #sidebar-editor textarea {
1765
- display: block;
1766
- font-size: 0.875rem !important;
1767
- color: rgb(90, 101, 124) !important;
1768
- background-color: white !important;
1769
- border: 1px solid #cfd9e0 !important;
1770
- border-radius: 6px !important;
1771
- box-shadow: none !important;
1772
- filter: none !important;
1773
- width: 100% !important;
1774
- padding: 8px 0.75rem !important;
1775
- }
1776
- #sidebar-editor textarea {
1777
- height: 42px;
1778
- max-height: 200px;
1779
- }
1780
- #sidebar-editor input[type=color] {
1781
- padding: 4px !important;
1782
- }
1783
- #sidebar-editor input[type=range] {
1784
- display: block;
1785
- width: 100%;
1786
- }
1787
- #sidebar-editor input[type=radio],
1788
- #sidebar-editor input[type=checkbox] {
1789
- margin-right: 8px;
1790
- margin-left: 4px;
1791
- }
1792
- #sidebar-editor option[disabled] {
1793
- color: rgba(0, 0, 0, 0.3);
1794
- }
1795
- #sidebar-editor .inline-check-wrapper {
1796
- display: inline-block;
1797
- margin-right: 8px;
1798
- }
1799
- #sidebar-editor details {
1800
- display: block;
1801
- font-size: 0.875rem !important;
1802
- color: rgb(90, 101, 124) !important;
1803
- background-color: white !important;
1804
- border: 1px solid #cfd9e0 !important;
1805
- border-radius: 6px !important;
1806
- box-shadow: none !important;
1807
- filter: none !important;
1808
- width: 100% !important;
1809
- padding: 16px !important;
1810
- }
1811
- #sidebar-editor summary {
1812
- cursor: pointer;
1813
- }
1814
- #sidebar-editor .disabled {
1815
- opacity: 0.4;
1816
- cursor: not-allowed !important;
1817
- }
1818
- #sidebar-editor .icon-button {
1819
- display: inline-block;
1820
- color: rgb(90, 101, 124) !important;
1821
- background-color: white !important;
1822
- border: 1px solid #cfd9e0 !important;
1823
- border-radius: 6px;
1824
- filter: none !important;
1825
- width: auto !important;
1826
- text-align: center;
1827
- }
1828
- #sidebar-editor .icon-button:not(.disabled):hover {
1829
- background-color: rgb(248, 248, 248) !important;
1830
- }
1831
- #sidebar-editor .icon-button:not(.disabled):active {
1832
- background-color: rgb(237, 237, 237) !important;
1833
- }
1834
- #sidebar-editor .icon-button-group {
1835
- display: inline-flex;
1836
- border-radius: 6px !important;
1837
- overflow: hidden;
1838
- border: 1px solid #cfd9e0 !important;
1839
- }
1840
- #sidebar-editor .icon-button-group .icon-button {
1841
- border-radius: 0 !important;
1842
- border: none !important;
1843
- border-right: 1px solid #cfd9e0 !important;
1844
- }
1845
- #sidebar-editor .icon-button-group .icon-button:last-child {
1846
- border: none !important;
1847
- }
1848
- #sidebar-editor .message {
1849
- font-size: 0.875rem;
1850
- padding: 16px;
1851
- border-radius: 4px;
1852
- }
1853
- #sidebar-editor .message.message--negative {
1854
- background-color: rgba(238, 26, 26, 0.2);
1855
- }
1856
- #sidebar-editor .collapsable-menu {
1857
- background-color: white !important;
1858
- border: 1px solid #cfd9e0 !important;
1859
- border-radius: 6px;
1860
- z-index: 2;
1861
- overflow: hidden;
1862
- }
1863
- #sidebar-editor .collapsable-menu-item {
1864
- color: rgb(90, 101, 124) !important;
1865
- }
1866
- #sidebar-editor .collapsable-menu-item:not(.disabled):hover {
1867
- background-color: rgb(248, 248, 248) !important;
1868
- }
1869
- #sidebar-editor .collapsable-menu-item:not(.disabled):active {
1870
- background-color: rgb(237, 237, 237) !important;
1871
- }
1
+ .toolbar{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3);display:none;flex-direction:row;justify-content:space-between;font-family:Arial,sans-serif;padding:5px;position:absolute;z-index:500}.toolbar.toolbar-static{display:block;position:fixed;width:100%;max-width:100%;top:0px;left:0px}.toolbar.active{display:block}.toolbar .toolbar-btns{display:flex;align-items:center}.toolbar .toolbar-btn{border-radius:3px;color:#000;cursor:pointer;font-weight:bold;margin-right:5px;padding:5px 7px;z-index:500;position:relative;display:block}.toolbar .toolbar-btn.active{background-color:rgba(0,0,0,.3)}.toolbar .toolbar-btn:last-child{margin-right:0px}.toolbar .toolbar-btn:hover,.toolbar .toolbar-btn:active{background-color:rgba(0,0,0,.2)}.toolbar .toolbar-btn:hover .toolbar-btn-config,.toolbar .toolbar-btn:active .toolbar-btn-config{display:block}.toolbar .toolbar-btn .toolbar-btn-config{position:absolute;top:28px;left:0px;display:none;background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3);padding:5px 7px}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner{display:flex;flex-direction:column}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row{min-width:250px;padding:5px 7px;display:flex;flex-direction:row}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-label{flex-grow:0;padding:0 7px 0 0}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input{flex-grow:1}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input{padding:5px;border:1px solid gray;background-color:#fff;color:#000}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-form-input input[type=checkbox]:checked{color:#fff;background-color:#000}.toolbar .toolbar-btn .toolbar-btn-config .toolbar-btn-config-inner .toolbar-btn-config-row .toolbar-btn{display:flex;flex-grow:1;border:1px solid #000}.toolbar .toolbar-btn-expand{z-index:500;display:block;max-height:28px;overflow:hidden}.toolbar .toolbar-btn-expand .toolbar-btn-expand-inner{display:flex;flex-direction:column}.toolbar .toolbar-btn-expand .toolbar-btn-expand-inner .toolbar-btn.active{order:-1}.toolbar .toolbar-btn-expand:hover{overflow:visible}.toolbar .toolbar-btn-expand:hover .toolbar-btn-expand-inner{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3)}.toolbar .toolbar-btn-expand-right{z-index:500;display:block;max-height:28px;overflow:hidden}.toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner{left:100%;display:flex;flex-direction:column}.toolbar .toolbar-btn-expand-right .toolbar-btn-expand-inner .toolbar-btn.active{order:-1}.toolbar .toolbar-btn-expand-right:hover{overflow:visible}.toolbar .toolbar-btn-expand-right:hover .toolbar-btn-expand-inner{background-color:rgba(255,255,255,.95);border-bottom:1px solid rgba(0,0,0,.3)}
2
+ .storybook-element-wrapper{max-width:100vw;width:100%;margin-left:auto;margin-right:auto}.storybook-element{display:inline-block;width:100%}.storybook-element .storybook-element-component-overlay{display:none;width:100%;height:100%;position:absolute;z-index:20;background-color:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#000;font-size:1em;align-items:center;justify-content:center;content-visibility:auto;outline:3px dashed #036fe3}.storybook-element.storybook-element-missing-attributes .storybook-element-component-overlay{display:flex;outline:3px dashed red}.storybook-element.storybook-inline{display:inline-block}.storybook-element.storybook-inline .options-toolbar{display:inline-block}.storybook-element.storybook-inline .options-toolbar .options-container{padding:.15em}.storybook-element.storybook-inline .options-toolbar .options-container .options-container-option{width:16px}.storybook-element.storybook-inline .storybook-element-component{display:inline-block}.storybook-element.storybook-inline .storybook-element-component .editor-empty-element{min-width:220px;min-height:10px;padding:.15em}.storybook-element.storybook-inline .storybook-element-component-overlay{font-size:.75em;min-width:220px;text-align:center}.storybook-element.storybook-element-float-left{float:left}.storybook-element.storybook-element-float-right{float:right}.storybook-element .storybook-element-component{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:block;position:relative}.storybook-element .storybook-element-component:hover .storybook-element-component-overlay{-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;cursor:pointer}.storybook-element .storybook-element-component .editor-empty-element{display:block;background-color:#42000b;color:#fff;border:1px solid #000;min-height:40px;padding:2em;min-width:100%}.storybook-element .storybook-element-component .editor-empty-element.editor-select-element{background-color:#555}.storybook-element .storybook-element-component.storybook-inline .editor-empty-element{min-height:20px;min-width:100px}.storybook-element .storybook-element-component .storybook-element-display:empty{display:block;background-color:red;border:1px solid #000;min-height:30px;min-width:100px}.storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty{display:block;background-color:red;border:1px solid #000;color:#fff;font-weight:bold;font-size:110%;padding:10px;min-height:30px;min-width:100px;position:relative}.storybook-element .storybook-element-component .storybook-element-display.storybook-element-display-empty::after{position:absolute;top:0px;left:0px;content:attr(data-content)}.storybook-element .storybook-element-error{background-color:red;padding:15px;font-size:18px;font-weight:bold;min-height:100px;min-width:100px}@container (min-width: 100px){.storybook-element-component-overlay{font-size:2em}}
3
+ *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:rgba(0,0,0,0);background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::before,::after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media(min-width: 640px){.container{max-width:640px}}@media(min-width: 768px){.container{max-width:768px}}@media(min-width: 1024px){.container{max-width:1024px}}@media(min-width: 1280px){.container{max-width:1280px}}@media(min-width: 1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-0{left:0px}.right-0{right:0px}.top-0{top:0px}.top-\[80px\]{top:80px}.z-50{z-index:50}.z-\[999999\]{z-index:999999}.m-2{margin:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-1{margin-bottom:.25rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.ml-16{margin-left:4rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mr-16{margin-right:4rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-\[3px\]{margin-top:3px}.block{display:block}.inline-block{display:inline-block}.\!inline{display:inline !important}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.list-item{display:list-item}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-full{height:100%}.max-h-\[28px\]{max-height:28px}.max-h-full{max-height:100%}.\!w-auto{width:auto !important}.w-11{width:2.75rem}.w-5{width:1.25rem}.w-52{width:13rem}.w-full{width:100%}.min-w-\[28px\]{min-width:28px}.min-w-\[32px\]{min-width:32px}.max-w-\[150px\]{max-width:150px}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.\!border-0{border-width:0px !important}.border{border-width:1px}.border-2{border-width:2px}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-transparent{border-color:rgba(0,0,0,0)}.\!bg-green-600{--tw-bg-opacity: 1 !important;background-color:rgb(22 163 74/var(--tw-bg-opacity)) !important}.bg-\[\#036fe3\]{--tw-bg-opacity: 1;background-color:rgb(3 111 227/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.\!p-1{padding:.25rem !important}.p-2{padding:.5rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.pr-2{padding-right:.5rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.\!text-sm{font-size:.875rem !important;line-height:1.25rem !important}.\!text-xl{font-size:1.25rem !important;line-height:1.75rem !important}.\!text-xs{font-size:.75rem !important;line-height:1rem !important}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.italic{font-style:italic}.\!leading-\[18px\]{line-height:18px !important}.\!text-red-500{--tw-text-opacity: 1 !important;color:rgb(239 68 68/var(--tw-text-opacity)) !important}.\!text-white{--tw-text-opacity: 1 !important;color:rgb(255 255 255/var(--tw-text-opacity)) !important}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255/var(--tw-text-opacity))}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 rgba(0, 0, 0, 0))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}input{background-image:none !important}.block-editor-wrapper{position:relative;display:flex;height:100%;max-height:100%;max-width:100%;width:100%}.block-editor-wrapper .slate-editor-element-selected:not(.storybook-element-missing-attributes) .storybook-element-component{outline:2px dashed #61a2e9}.block-editor-wrapper.storybook-active .slate-editor{display:none;overflow:hidden}.block-editor-wrapper .storybook-target{display:block;height:100%;left:0px;position:fixed;top:0px;width:100%;z-index:1000}.block-editor-wrapper .storybook-target:empty{display:none}.block-editor-wrapper .storybook-target .storybook-frame{height:100%;width:100%}.block-editor-wrapper .storybook-target .storybook-frame iframe{height:100%;width:100%}.block-editor-wrapper .slate-editor{width:100%;height:100%;z-index:100;overflow-y:auto;padding:45px 0 0 0;position:relative}.block-editor-wrapper .slate-editor .editor-empty-element{display:block !important}.block-editor-wrapper .slate-editor p[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor p[data-slate-node=element]:after{font-size:16px;content:"P";color:#cecece;position:absolute;left:-20px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h1[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h1[data-slate-node=element]:after{content:"h1";font-size:26px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h2[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h2[data-slate-node=element]:after{content:"h2";font-size:24px;color:#cecece;position:absolute;left:-30px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h3[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h3[data-slate-node=element]:after{content:"h3";font-size:20px;color:#cecece;position:absolute;left:-26px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h4[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h4[data-slate-node=element]:after{content:"h4";font-size:16px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h5[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h5[data-slate-node=element]:after{content:"h5";font-size:14px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor h6[data-slate-node=element]{position:relative}.block-editor-wrapper .slate-editor h6[data-slate-node=element]:after{content:"h6";font-size:12px;color:#cecece;position:absolute;left:-36px;text-transform:uppercase;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.block-editor-wrapper .slate-editor .arrow-list{list-style-type:"🠆" !important}.block-editor-wrapper .slate-editor .arrow-list li::before{content:none !important}.block-editor-wrapper .slate-editor div[data-slate-editor=true]{height:100%}.block-editor-wrapper .slate-editor .align-left{text-align:left}.block-editor-wrapper .slate-editor .align-right{text-align:right}.block-editor-wrapper .slate-editor .align-center{text-align:center}.block-editor-wrapper .slate-editor .align-justify{text-align:justify}.block-editor-wrapper .slate-editor .block-align-left{display:inline-block;float:left;margin-right:15px}.block-editor-wrapper .slate-editor .block-align-undefined{display:inline-block}.block-editor-wrapper .slate-editor .block-align-right{display:inline-block;float:right;margin-left:15px}.block-editor-wrapper .options-wrapper{font-family:Arial,sans-serif;position:relative;color:#161616}.block-editor-wrapper .options-wrapper:hover .options-container{display:flex}.block-editor-wrapper .options-wrapper .options-toolbar{justify-content:space-between;display:flex;background-color:#ebebeb;padding:.25em}.block-editor-wrapper .options-wrapper .options-container{display:flex;flex-direction:row;justify-content:flex-end;position:relative;z-index:200;padding:.25em}.block-editor-wrapper .options-wrapper .options-container .options-container-option{cursor:pointer;width:26px;margin-right:.25em}.block-editor-wrapper .options-wrapper .options-container .options-container-option>svg{width:100%}.block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-expand-text{width:100px}.block-editor-wrapper .options-wrapper .options-container .options-container-option.options-container-option-delete{color:red}.block-editor-wrapper .options-wrapper .options-container.options-container-right{self-align:flex-end}.block-editor-wrapper .layout-slot-option-padding{position:relative;width:26px;height:26px;display:inline-block}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item{background-color:#000;display:block;position:absolute;cursor:pointer}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item:hover{background-color:#61a2e9;z-index:10}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-item.active{background-color:#3490f3;z-index:10}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-top{height:20%;width:100%;top:0;left:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-right{height:100%;width:20%;right:0;top:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-bottom{height:20%;width:100%;bottom:0;left:0}.block-editor-wrapper .layout-slot-option-padding .layout-slot-option-padding-left{height:100%;width:20%;top:0;left:0}.block-editor-wrapper .layout-block-grid{display:grid}.block-editor-wrapper .layout-block-flex{display:flex}.block-editor-wrapper .layout-block.article-width{width:44.4444444444%}.block-editor-wrapper .layout-block.site-width{width:66.6666666667%}.block-editor-wrapper .layout-block .layout-slot{display:flex;flex-direction:column;position:relative;outline:1px dashed gray}.block-editor-wrapper .layout-block .layout-slot .storybook-element-component{display:block}.block-editor-wrapper .layout-block .layout-slot .layout-slot-content{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options{background-color:gray;color:#fff;font-size:24px;padding:10px;display:flex;flex-direction:row;justify-content:space-between}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-option{text-transform:uppercase;display:inline-block}.block-editor-wrapper .layout-block .layout-slot .layout-slot-options .layout-slot-name{text-transform:uppercase;display:inline-block}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-fill{flex-grow:1}.block-editor-wrapper .layout-block .layout-slot.layout-slot-grid-auto{flex-grow:0;width:auto}@media only screen and (max-width: 360px){.block-editor-wrapper .layout-block{grid-template-columns:1fr}}.button{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;width:100%;padding:8px .75rem !important;color:#fff !important;border:1px solid #036fe3 !important;transition:all 100ms ease-in-out;background-color:#036fe3 !important;font-size:.875rem !important;border-radius:4px !important}.button:hover{background-color:#0275f0 !important}.button:active{background-color:#0262c9 !important}.button.button--secondary{color:#036fe3 !important;border:1px solid #036fe3 !important;background-color:rgba(0,0,0,0) !important}.button.button--secondary:hover{background-color:#036fe3 !important;color:#fff !important}.button.button--secondary:active{background-color:#0262c9 !important;color:#fff !important}.button.button--tertiary{color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important}.button.button--tertiary:hover{background-color:#f8f8f8 !important}.button.button--tertiary:active{background-color:#ededed !important}@media(max-width: 360px){.resizable.enabled .resizable-left{max-width:calc(100vw - 300px)}.resizable.enabled .resizable-right{width:100%}}.resizable .resizable-left{scrollbar-width:none;position:relative}.resizable .resizable-right{scrollbar-width:none;max-width:300px;height:100%;position:absolute;right:0;top:0}.resizable .resizable-x-handle{cursor:ew-resize;content:"";position:absolute;height:100%;width:10px;text-align:center;top:0;left:-2px;background-color:rgba(0,0,0,0)}.hover\:\!bg-green-700:hover{--tw-bg-opacity: 1 !important;background-color:rgb(21 128 61/var(--tw-bg-opacity)) !important}.focus\:outline-none:focus{outline:2px solid rgba(0,0,0,0);outline-offset:2px}@media(min-width: 768px){.md\:ml-4{margin-left:1rem}.md\:mr-4{margin-right:1rem}.md\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.md\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}}
4
+ #sidebar-editor-wrapper{padding-top:51px;height:100%;flex-basis:400px;flex-shrink:0}@media(max-width: 768px){#sidebar-editor-wrapper{padding-top:66px}}#sidebar-editor{display:flex;flex-direction:column;background-color:#f7f9fa;max-height:100%;height:100%;overflow-y:auto;padding:16px}#sidebar-editor *{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important}#sidebar-editor p,#sidebar-editor label,#sidebar-editor b,#sidebar-editor span{color:#5a657c}#sidebar-editor label{margin:0 0 2px 0 !important}#sidebar-editor input[type=text],#sidebar-editor input[type=time],#sidebar-editor input[type=date],#sidebar-editor input[type=number],#sidebar-editor input[type=color],#sidebar-editor input[type=datetime-local],#sidebar-editor input[type=search],#sidebar-editor select,#sidebar-editor textarea{display:block;font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important;width:100% !important;padding:8px .75rem !important}#sidebar-editor textarea{height:42px;max-height:200px}#sidebar-editor input[type=color]{padding:4px !important}#sidebar-editor input[type=range]{display:block;width:100%}#sidebar-editor input[type=radio],#sidebar-editor input[type=checkbox]{margin-right:8px;margin-left:4px}#sidebar-editor option[disabled]{color:rgba(0,0,0,.3)}#sidebar-editor .inline-check-wrapper{display:inline-block;margin-right:8px}#sidebar-editor details{display:block;font-size:.875rem !important;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px !important;box-shadow:none !important;filter:none !important;width:100% !important;padding:16px !important}#sidebar-editor summary{cursor:pointer}#sidebar-editor .disabled{opacity:.4;cursor:not-allowed !important}#sidebar-editor .icon-button{display:inline-block;color:#5a657c !important;background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px;filter:none !important;width:auto !important;text-align:center}#sidebar-editor .icon-button:not(.disabled):hover{background-color:#f8f8f8 !important}#sidebar-editor .icon-button:not(.disabled):active{background-color:#ededed !important}#sidebar-editor .icon-button-group{display:inline-flex;border-radius:6px !important;overflow:hidden;border:1px solid #cfd9e0 !important}#sidebar-editor .icon-button-group .icon-button{border-radius:0 !important;border:none !important;border-right:1px solid #cfd9e0 !important}#sidebar-editor .icon-button-group .icon-button:last-child{border:none !important}#sidebar-editor .message{font-size:.875rem;padding:16px;border-radius:4px}#sidebar-editor .message.message--negative{background-color:rgba(238,26,26,.2)}#sidebar-editor .collapsable-menu{background-color:#fff !important;border:1px solid #cfd9e0 !important;border-radius:6px;z-index:2;overflow:hidden}#sidebar-editor .collapsable-menu-item{color:#5a657c !important}#sidebar-editor .collapsable-menu-item:not(.disabled):hover{background-color:#f8f8f8 !important}#sidebar-editor .collapsable-menu-item:not(.disabled):active{background-color:#ededed !important}