@rc-component/dialog 1.0.0 → 1.1.0

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 (128) hide show
  1. package/dist/10509781610555453368.hot-update-url-map.json +1 -0
  2. package/dist/10509781610555453368.hot-update.json +1 -0
  3. package/dist/11977476592833392720.hot-update-url-map.json +1 -0
  4. package/dist/11977476592833392720.hot-update.json +1 -0
  5. package/dist/14397576132152343869.hot-update-url-map.json +1 -0
  6. package/dist/14397576132152343869.hot-update.json +1 -0
  7. package/dist/14597408625395534096.hot-update-url-map.json +1 -0
  8. package/dist/14597408625395534096.hot-update.json +1 -0
  9. package/dist/15104553912779929595.hot-update-url-map.json +1 -0
  10. package/dist/15104553912779929595.hot-update.json +1 -0
  11. package/dist/4361192314875393955.hot-update-url-map.json +1 -0
  12. package/dist/4361192314875393955.hot-update.json +1 -0
  13. package/dist/4704580574928883170.hot-update-url-map.json +1 -0
  14. package/dist/4704580574928883170.hot-update.json +1 -0
  15. package/dist/5496443382647786649.hot-update-url-map.json +1 -0
  16. package/dist/5496443382647786649.hot-update.json +1 -0
  17. package/dist/7338948553039754745.hot-update-url-map.json +1 -0
  18. package/dist/7338948553039754745.hot-update.json +1 -0
  19. package/dist/7441995189917427860.hot-update-url-map.json +1 -0
  20. package/dist/7441995189917427860.hot-update.json +1 -0
  21. package/dist/8425845753817463333.hot-update-url-map.json +1 -0
  22. package/dist/8425845753817463333.hot-update.json +1 -0
  23. package/dist/8742625841545363477.hot-update-url-map.json +1 -0
  24. package/dist/8742625841545363477.hot-update.json +1 -0
  25. package/dist/960384830459946830.hot-update-url-map.json +1 -0
  26. package/dist/960384830459946830.hot-update.json +1 -0
  27. package/dist/9707589364653732454.hot-update-url-map.json +1 -0
  28. package/dist/9707589364653732454.hot-update.json +1 -0
  29. package/dist/common-async.10509781610555453368.hot-update.js +268 -0
  30. package/dist/common-async.10509781610555453368.hot-update.js.map +1 -0
  31. package/dist/common-async.11977476592833392720.hot-update.js +395 -0
  32. package/dist/common-async.11977476592833392720.hot-update.js.map +1 -0
  33. package/dist/common-async.14397576132152343869.hot-update.js +395 -0
  34. package/dist/common-async.14397576132152343869.hot-update.js.map +1 -0
  35. package/dist/common-async.14597408625395534096.hot-update.js +268 -0
  36. package/dist/common-async.14597408625395534096.hot-update.js.map +1 -0
  37. package/dist/common-async.15104553912779929595.hot-update.js +268 -0
  38. package/dist/common-async.15104553912779929595.hot-update.js.map +1 -0
  39. package/dist/common-async.4361192314875393955.hot-update.js +268 -0
  40. package/dist/common-async.4361192314875393955.hot-update.js.map +1 -0
  41. package/dist/common-async.4704580574928883170.hot-update.js +268 -0
  42. package/dist/common-async.4704580574928883170.hot-update.js.map +1 -0
  43. package/dist/common-async.5496443382647786649.hot-update.js +391 -0
  44. package/dist/common-async.5496443382647786649.hot-update.js.map +1 -0
  45. package/dist/common-async.7338948553039754745.hot-update.js +395 -0
  46. package/dist/common-async.7338948553039754745.hot-update.js.map +1 -0
  47. package/dist/common-async.7441995189917427860.hot-update.js +394 -0
  48. package/dist/common-async.7441995189917427860.hot-update.js.map +1 -0
  49. package/dist/common-async.8425845753817463333.hot-update.js +268 -0
  50. package/dist/common-async.8425845753817463333.hot-update.js.map +1 -0
  51. package/dist/common-async.8742625841545363477.hot-update.js +268 -0
  52. package/dist/common-async.8742625841545363477.hot-update.js.map +1 -0
  53. package/dist/common-async.960384830459946830.hot-update.js +268 -0
  54. package/dist/common-async.960384830459946830.hot-update.js.map +1 -0
  55. package/dist/common-async.9707589364653732454.hot-update.js +268 -0
  56. package/dist/common-async.9707589364653732454.hot-update.js.map +1 -0
  57. package/dist/common-async.js +1180 -0
  58. package/dist/common-async.js.map +1 -0
  59. package/dist/demos-async.7338948553039754745.hot-update.js +395 -0
  60. package/dist/demos-async.7338948553039754745.hot-update.js.map +1 -0
  61. package/dist/demos-async.css +396 -0
  62. package/dist/demos-async.css.map +1 -0
  63. package/dist/demos-async.js +1242 -0
  64. package/dist/demos-async.js.map +1 -0
  65. package/dist/docs_changelog_md-async.js +2159 -0
  66. package/dist/docs_changelog_md-async.js.map +1 -0
  67. package/dist/docs_demo_ant-design_md-async.js +119 -0
  68. package/dist/docs_demo_ant-design_md-async.js.map +1 -0
  69. package/dist/docs_demo_bootstrap_md-async.js +119 -0
  70. package/dist/docs_demo_bootstrap_md-async.js.map +1 -0
  71. package/dist/docs_demo_draggable_md-async.js +119 -0
  72. package/dist/docs_demo_draggable_md-async.js.map +1 -0
  73. package/dist/docs_demo_multiple-Portal_md-async.js +119 -0
  74. package/dist/docs_demo_multiple-Portal_md-async.js.map +1 -0
  75. package/dist/docs_demo_pure_md-async.js +119 -0
  76. package/dist/docs_demo_pure_md-async.js.map +1 -0
  77. package/dist/docs_index_md-async.js +1717 -0
  78. package/dist/docs_index_md-async.js.map +1 -0
  79. package/dist/dumi__tmp__dumi__theme__ContextWrapper-async.js +201 -0
  80. package/dist/dumi__tmp__dumi__theme__ContextWrapper-async.js.map +1 -0
  81. package/dist/meta__docs-async.7338948553039754745.hot-update.js +395 -0
  82. package/dist/meta__docs-async.7338948553039754745.hot-update.js.map +1 -0
  83. package/dist/meta__docs-async.css +396 -0
  84. package/dist/meta__docs-async.css.map +1 -0
  85. package/dist/meta__docs-async.js +2391 -0
  86. package/dist/meta__docs-async.js.map +1 -0
  87. package/dist/nm__dumi__dist__client__pages__404-async.js +69 -0
  88. package/dist/nm__dumi__dist__client__pages__404-async.js.map +1 -0
  89. package/dist/nm__dumi__dist__client__pages__Demo__index-async.js +63 -0
  90. package/dist/nm__dumi__dist__client__pages__Demo__index-async.js.map +1 -0
  91. package/dist/node_modules__dumi_2_4_17_dumi_dist_client_misc_reactDemoCompiler_js-async.js +368 -0
  92. package/dist/node_modules__dumi_2_4_17_dumi_dist_client_misc_reactDemoCompiler_js-async.js.map +1 -0
  93. package/dist/node_modules__dumi_2_4_17_dumi_theme-default_layouts_DocLayout_index_js-async.js +1077 -0
  94. package/dist/node_modules__dumi_2_4_17_dumi_theme-default_layouts_DocLayout_index_js-async.js.map +1 -0
  95. package/dist/node_modules__react-dom_18_3_1_react-dom_server_browser_js-async.js +18 -0
  96. package/dist/node_modules__react-dom_18_3_1_react-dom_server_browser_js-async.js.map +1 -0
  97. package/dist/umi.css +1302 -0
  98. package/dist/umi.css.map +1 -0
  99. package/dist/umi.js +80442 -0
  100. package/dist/umi.js.map +1 -0
  101. package/dist/vendors-async.css +22545 -0
  102. package/dist/vendors-async.css.map +1 -0
  103. package/dist/vendors-async.js +53289 -0
  104. package/dist/vendors-async.js.map +1 -0
  105. package/es/Dialog/Content/MemoChildren.js +5 -7
  106. package/es/Dialog/Content/Panel.d.ts +2 -2
  107. package/es/Dialog/Content/Panel.js +89 -78
  108. package/es/Dialog/Content/index.d.ts +4 -1
  109. package/es/Dialog/Content/index.js +45 -37
  110. package/es/Dialog/Mask.js +23 -20
  111. package/es/Dialog/index.js +97 -93
  112. package/es/DialogWrap.js +17 -22
  113. package/es/IDialogPropTypes.d.ts +2 -1
  114. package/es/context.js +1 -1
  115. package/es/util.js +9 -9
  116. package/lib/Dialog/Content/MemoChildren.js +7 -10
  117. package/lib/Dialog/Content/Panel.d.ts +2 -2
  118. package/lib/Dialog/Content/Panel.js +93 -83
  119. package/lib/Dialog/Content/index.d.ts +4 -1
  120. package/lib/Dialog/Content/index.js +49 -42
  121. package/lib/Dialog/Mask.js +27 -25
  122. package/lib/Dialog/index.js +103 -100
  123. package/lib/DialogWrap.js +21 -27
  124. package/lib/IDialogPropTypes.d.ts +2 -1
  125. package/lib/context.js +3 -4
  126. package/lib/index.js +2 -2
  127. package/lib/util.js +9 -9
  128. package/package.json +11 -16
package/dist/umi.css ADDED
@@ -0,0 +1,1302 @@
1
+ #nprogress {
2
+ pointer-events: none;
3
+ }
4
+ #nprogress .bar {
5
+ background: var;
6
+ position: fixed;
7
+ z-index: 1031;
8
+ top: 0;
9
+ left: 0;
10
+ width: 100%;
11
+ height: 2px;
12
+ }
13
+ #nprogress .peg {
14
+ display: block;
15
+ position: absolute;
16
+ right: 0px;
17
+ width: 100px;
18
+ height: 100%;
19
+ box-shadow: 0 0 10px undefined, 0 0 5px undefined;
20
+ opacity: 1.0;
21
+ transform: rotate(3deg) translate(0px, -4px);
22
+ }
23
+ #nprogress .spinner {
24
+ display: block;
25
+ position: fixed;
26
+ z-index: 1031;
27
+ top: 15px;
28
+ right: 15px;
29
+ }
30
+ #nprogress .spinner-icon {
31
+ width: 18px;
32
+ height: 18px;
33
+ box-sizing: border-box;
34
+ border: solid 2px transparent;
35
+ border-top-color: undefined;
36
+ border-left-color: undefined;
37
+ border-radius: 50%;
38
+ -webkit-animation: nprogress-spinner 400ms linear infinite;
39
+ animation: nprogress-spinner 400ms linear infinite;
40
+ }
41
+ .nprogress-custom-parent {
42
+ overflow: hidden;
43
+ position: relative;
44
+ }
45
+ .nprogress-custom-parent #nprogress .spinner,
46
+ .nprogress-custom-parent #nprogress .bar {
47
+ position: absolute;
48
+ }
49
+ @keyframes nprogress-spinner {
50
+ 0% {
51
+ transform: rotate(0deg);
52
+ }
53
+ 100% {
54
+ transform: rotate(360deg);
55
+ }
56
+ }
57
+ @keyframes react-loading-skeleton {
58
+ 100% {
59
+ transform: translateX(100%);
60
+ }
61
+ }
62
+ .react-loading-skeleton {
63
+ --base-color: #ebebeb;
64
+ --highlight-color: #f5f5f5;
65
+ --animation-duration: 1.5s;
66
+ --animation-direction: normal;
67
+ --pseudo-element-display: block;
68
+ background-color: var(--base-color);
69
+ width: 100%;
70
+ border-radius: 0.25rem;
71
+ display: inline-flex;
72
+ line-height: 1;
73
+ position: relative;
74
+ user-select: none;
75
+ overflow: hidden;
76
+ }
77
+ .react-loading-skeleton::after {
78
+ content: ' ';
79
+ display: var(--pseudo-element-display);
80
+ position: absolute;
81
+ top: 0;
82
+ left: 0;
83
+ right: 0;
84
+ height: 100%;
85
+ background-repeat: no-repeat;
86
+ background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100%));
87
+ transform: translateX(-100%);
88
+ -webkit-animation-name: react-loading-skeleton;
89
+ animation-name: react-loading-skeleton;
90
+ animation-direction: var(--animation-direction);
91
+ -webkit-animation-duration: var(--animation-duration);
92
+ animation-duration: var(--animation-duration);
93
+ -webkit-animation-timing-function: ease-in-out;
94
+ animation-timing-function: ease-in-out;
95
+ -webkit-animation-iteration-count: infinite;
96
+ animation-iteration-count: infinite;
97
+ }
98
+ @media (prefers-reduced-motion) {
99
+ .react-loading-skeleton {
100
+ --pseudo-element-display: none;
101
+ }
102
+ }
103
+ .dumi-default-loading-skeleton .react-loading-skeleton {
104
+ margin-block-end: 0.38em;
105
+ }
106
+ .dumi-default-loading-skeleton .react-loading-skeleton.first-line {
107
+ width: calc(100% - 2em);
108
+ margin-inline-start: 2em;
109
+ }
110
+ [data-prefers-color="dark"] .dumi-default-loading-skeleton .react-loading-skeleton {
111
+ --highlight-color: rgba(198, 201, 205, 0.22);
112
+ --base-color: #30363f;
113
+ }
114
+ .dumi-default-tabs-nav {
115
+ position: relative;
116
+ display: flex;
117
+ padding: 0 12px;
118
+ }
119
+ .dumi-default-tabs-nav::after {
120
+ content: '';
121
+ position: absolute;
122
+ left: 0;
123
+ bottom: 0;
124
+ width: 100%;
125
+ height: 0;
126
+ border-bottom: 1px dashed #e4e9ec;
127
+ }
128
+ [data-prefers-color="dark"] .dumi-default-tabs-nav::after {
129
+ border-bottom-color: #2a353c;
130
+ }
131
+ .dumi-default-tabs-nav-wrap {
132
+ display: flex;
133
+ white-space: nowrap;
134
+ overflow: hidden;
135
+ }
136
+ .dumi-default-tabs-nav-wrap.dumi-default-tabs-nav-wrap-ping-left {
137
+ box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.1) inset;
138
+ }
139
+ .dumi-default-tabs-nav-wrap.dumi-default-tabs-nav-wrap-ping-right ~ * > .dumi-default-tabs-nav-more {
140
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
141
+ }
142
+ .dumi-default-tabs-nav-list {
143
+ position: relative;
144
+ z-index: 1;
145
+ display: flex;
146
+ transition: transform 0.2s;
147
+ }
148
+ .dumi-default-tabs-nav-more {
149
+ height: 100%;
150
+ cursor: pointer;
151
+ background: none;
152
+ border: 0;
153
+ transition: box-shadow 0.2s;
154
+ }
155
+ .dumi-default-tabs-tab {
156
+ display: flex;
157
+ margin: 0 12px;
158
+ }
159
+ .dumi-default-tabs-tab-btn {
160
+ padding: 0;
161
+ color: #4f5866;
162
+ font-size: 14px;
163
+ line-height: 36px;
164
+ border: 0;
165
+ outline: none;
166
+ background: transparent;
167
+ box-sizing: border-box;
168
+ cursor: pointer;
169
+ transition: all 0.2s;
170
+ }
171
+ [data-prefers-color="dark"] .dumi-default-tabs-tab-btn {
172
+ color: #8590a0;
173
+ }
174
+ .dumi-default-tabs-tab-btn:hover {
175
+ color: #30363f;
176
+ }
177
+ [data-prefers-color="dark"] .dumi-default-tabs-tab-btn:hover {
178
+ color: #c6c9cd;
179
+ }
180
+ .dumi-default-tabs-tab-active .dumi-default-tabs-tab-btn {
181
+ color: #30363f;
182
+ }
183
+ [data-prefers-color="dark"] .dumi-default-tabs-tab-active .dumi-default-tabs-tab-btn {
184
+ color: #c6c9cd;
185
+ }
186
+ .dumi-default-tabs-ink-bar {
187
+ position: absolute;
188
+ height: 1px;
189
+ background: #1677ff;
190
+ transition: left 0.2s, width 0.2s;
191
+ pointer-events: none;
192
+ bottom: 0;
193
+ }
194
+ [data-prefers-color="dark"] .dumi-default-tabs-ink-bar {
195
+ background: #0053c8;
196
+ }
197
+ .dumi-default-tabs-dropdown {
198
+ position: absolute;
199
+ background: inherit;
200
+ border: 1px solid #d0d5d8;
201
+ max-height: 200px;
202
+ overflow: auto;
203
+ }
204
+ [data-prefers-color="dark"] .dumi-default-tabs-dropdown {
205
+ border-color: #1c2022;
206
+ }
207
+ .dumi-default-tabs-dropdown > ul {
208
+ list-style: none;
209
+ margin: 0;
210
+ padding: 0;
211
+ }
212
+ .dumi-default-tabs-dropdown > ul > li {
213
+ padding: 4px 12px;
214
+ font-size: 14px;
215
+ cursor: pointer;
216
+ }
217
+ .dumi-default-tabs-dropdown > ul > li:hover {
218
+ color: #1677ff;
219
+ }
220
+ [data-prefers-color="dark"] .dumi-default-tabs-dropdown > ul > li:hover {
221
+ color: #0053c8;
222
+ }
223
+ .dumi-default-tabs-dropdown > ul > li:not(:last-child) {
224
+ border-bottom: 1px dashed #d0d5d8;
225
+ }
226
+ [data-prefers-color="dark"] .dumi-default-tabs-dropdown > ul > li:not(:last-child) {
227
+ border-bottom-color: #1c2022;
228
+ }
229
+ .dumi-default-tabs-dropdown-hidden {
230
+ display: none;
231
+ }
232
+ .dumi-default-tabs-tabpane-hidden {
233
+ display: none;
234
+ }
235
+ code[class*="language-"],
236
+ pre[class*="language-"] {
237
+ background: hsl(230, 1%, 98%);
238
+ color: hsl(230, 8%, 24%);
239
+ font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
240
+ direction: ltr;
241
+ text-align: left;
242
+ white-space: pre;
243
+ word-spacing: normal;
244
+ word-break: normal;
245
+ line-height: 1.5;
246
+ -moz-tab-size: 2;
247
+ -o-tab-size: 2;
248
+ tab-size: 2;
249
+ -webkit-hyphens: none;
250
+ -moz-hyphens: none;
251
+ -ms-hyphens: none;
252
+ hyphens: none;
253
+ }
254
+ code[class*="language-"]::-moz-selection,
255
+ code[class*="language-"] *::-moz-selection,
256
+ pre[class*="language-"] *::-moz-selection {
257
+ background: hsl(230, 1%, 90%);
258
+ color: inherit;
259
+ }
260
+ code[class*="language-"]::selection,
261
+ code[class*="language-"] *::selection,
262
+ pre[class*="language-"] *::selection {
263
+ background: hsl(230, 1%, 90%);
264
+ color: inherit;
265
+ }
266
+ pre[class*="language-"] {
267
+ padding: 1em;
268
+ margin: 0.5em 0;
269
+ overflow: auto;
270
+ border-radius: 0.3em;
271
+ }
272
+ :not(pre) > code[class*="language-"] {
273
+ padding: 0.2em 0.3em;
274
+ border-radius: 0.3em;
275
+ white-space: normal;
276
+ }
277
+ .token.comment,
278
+ .token.prolog,
279
+ .token.cdata {
280
+ color: hsl(230, 4%, 64%);
281
+ }
282
+ .token.doctype,
283
+ .token.punctuation,
284
+ .token.entity {
285
+ color: hsl(230, 8%, 24%);
286
+ }
287
+ .token.attr-name,
288
+ .token.class-name,
289
+ .token.boolean,
290
+ .token.constant,
291
+ .token.number,
292
+ .token.atrule {
293
+ color: hsl(35, 99%, 36%);
294
+ }
295
+ .token.keyword {
296
+ color: hsl(301, 63%, 40%);
297
+ }
298
+ .token.property,
299
+ .token.tag,
300
+ .token.symbol,
301
+ .token.deleted,
302
+ .token.important {
303
+ color: hsl(5, 74%, 59%);
304
+ }
305
+ .token.selector,
306
+ .token.string,
307
+ .token.char,
308
+ .token.builtin,
309
+ .token.inserted,
310
+ .token.regex,
311
+ .token.attr-value,
312
+ .token.attr-value > .token.punctuation {
313
+ color: hsl(119, 34%, 47%);
314
+ }
315
+ .token.variable,
316
+ .token.operator,
317
+ .token.function {
318
+ color: hsl(221, 87%, 60%);
319
+ }
320
+ .token.url {
321
+ color: hsl(198, 99%, 37%);
322
+ }
323
+ .token.attr-value > .token.punctuation.attr-equals,
324
+ .token.special-attr > .token.attr-value > .token.value.css {
325
+ color: hsl(230, 8%, 24%);
326
+ }
327
+ .language-css .token.selector {
328
+ color: hsl(5, 74%, 59%);
329
+ }
330
+ .language-css .token.property {
331
+ color: hsl(230, 8%, 24%);
332
+ }
333
+ .language-css .token.function,
334
+ .language-css .token.url > .token.function {
335
+ color: hsl(198, 99%, 37%);
336
+ }
337
+ .language-css .token.url > .token.string.url {
338
+ color: hsl(119, 34%, 47%);
339
+ }
340
+ .language-css .token.important,
341
+ .language-css .token.atrule .token.rule {
342
+ color: hsl(301, 63%, 40%);
343
+ }
344
+ .language-javascript .token.operator {
345
+ color: hsl(301, 63%, 40%);
346
+ }
347
+ .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
348
+ color: hsl(344, 84%, 43%);
349
+ }
350
+ .language-json .token.operator {
351
+ color: hsl(230, 8%, 24%);
352
+ }
353
+ .language-json .token.null.keyword {
354
+ color: hsl(35, 99%, 36%);
355
+ }
356
+ .language-markdown .token.url,
357
+ .language-markdown .token.url > .token.operator,
358
+ .language-markdown .token.url-reference.url > .token.string {
359
+ color: hsl(230, 8%, 24%);
360
+ }
361
+ .language-markdown .token.url > .token.content {
362
+ color: hsl(221, 87%, 60%);
363
+ }
364
+ .language-markdown .token.url > .token.url,
365
+ .language-markdown .token.url-reference.url {
366
+ color: hsl(198, 99%, 37%);
367
+ }
368
+ .language-markdown .token.blockquote.punctuation,
369
+ .language-markdown .token.hr.punctuation {
370
+ color: hsl(230, 4%, 64%);
371
+ font-style: italic;
372
+ }
373
+ .language-markdown .token.code-snippet {
374
+ color: hsl(119, 34%, 47%);
375
+ }
376
+ .language-markdown .token.bold .token.content {
377
+ color: hsl(35, 99%, 36%);
378
+ }
379
+ .language-markdown .token.italic .token.content {
380
+ color: hsl(301, 63%, 40%);
381
+ }
382
+ .language-markdown .token.strike .token.content,
383
+ .language-markdown .token.strike .token.punctuation,
384
+ .language-markdown .token.list.punctuation,
385
+ .language-markdown .token.title.important > .token.punctuation {
386
+ color: hsl(5, 74%, 59%);
387
+ }
388
+ .token.bold {
389
+ font-weight: bold;
390
+ }
391
+ .token.comment,
392
+ .token.italic {
393
+ font-style: italic;
394
+ }
395
+ .token.entity {
396
+ cursor: help;
397
+ }
398
+ .token.namespace {
399
+ opacity: 0.8;
400
+ }
401
+ .token.token.tab:not(:empty):before,
402
+ .token.token.cr:before,
403
+ .token.token.lf:before,
404
+ .token.token.space:before {
405
+ color: hsla(230, 8%, 24%, 0.2);
406
+ }
407
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item {
408
+ margin-right: 0.4em;
409
+ }
410
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
411
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
412
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
413
+ background: hsl(230, 1%, 90%);
414
+ color: hsl(230, 6%, 44%);
415
+ padding: 0.1em 0.4em;
416
+ border-radius: 0.3em;
417
+ }
418
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
419
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
420
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
421
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
422
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
423
+ div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
424
+ background: hsl(230, 1%, 78%);
425
+ color: hsl(230, 8%, 24%);
426
+ }
427
+ .line-highlight.line-highlight {
428
+ background: hsla(230, 8%, 24%, 0.05);
429
+ }
430
+ .line-highlight.line-highlight:before,
431
+ .line-highlight.line-highlight[data-end]:after {
432
+ background: hsl(230, 1%, 90%);
433
+ color: hsl(230, 8%, 24%);
434
+ padding: 0.1em 0.6em;
435
+ border-radius: 0.3em;
436
+ box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
437
+ }
438
+ pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
439
+ background-color: hsla(230, 8%, 24%, 0.05);
440
+ }
441
+ .line-numbers.line-numbers .line-numbers-rows,
442
+ .command-line .command-line-prompt {
443
+ border-right-color: hsla(230, 8%, 24%, 0.2);
444
+ }
445
+ .line-numbers .line-numbers-rows > span:before,
446
+ .command-line .command-line-prompt > span:before {
447
+ color: hsl(230, 1%, 62%);
448
+ }
449
+ .rainbow-braces .token.token.punctuation.brace-level-1,
450
+ .rainbow-braces .token.token.punctuation.brace-level-5,
451
+ .rainbow-braces .token.token.punctuation.brace-level-9 {
452
+ color: hsl(5, 74%, 59%);
453
+ }
454
+ .rainbow-braces .token.token.punctuation.brace-level-2,
455
+ .rainbow-braces .token.token.punctuation.brace-level-6,
456
+ .rainbow-braces .token.token.punctuation.brace-level-10 {
457
+ color: hsl(119, 34%, 47%);
458
+ }
459
+ .rainbow-braces .token.token.punctuation.brace-level-3,
460
+ .rainbow-braces .token.token.punctuation.brace-level-7,
461
+ .rainbow-braces .token.token.punctuation.brace-level-11 {
462
+ color: hsl(221, 87%, 60%);
463
+ }
464
+ .rainbow-braces .token.token.punctuation.brace-level-4,
465
+ .rainbow-braces .token.token.punctuation.brace-level-8,
466
+ .rainbow-braces .token.token.punctuation.brace-level-12 {
467
+ color: hsl(301, 63%, 40%);
468
+ }
469
+ pre.diff-highlight > code .token.token.deleted:not(.prefix),
470
+ pre > code.diff-highlight .token.token.deleted:not(.prefix) {
471
+ background-color: hsla(353, 100%, 66%, 0.15);
472
+ }
473
+ pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
474
+ pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
475
+ pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
476
+ pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
477
+ background-color: hsla(353, 95%, 66%, 0.25);
478
+ }
479
+ pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
480
+ pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
481
+ pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
482
+ pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
483
+ background-color: hsla(353, 95%, 66%, 0.25);
484
+ }
485
+ pre.diff-highlight > code .token.token.inserted:not(.prefix),
486
+ pre > code.diff-highlight .token.token.inserted:not(.prefix) {
487
+ background-color: hsla(137, 100%, 55%, 0.15);
488
+ }
489
+ pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
490
+ pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
491
+ pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
492
+ pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
493
+ background-color: hsla(135, 73%, 55%, 0.25);
494
+ }
495
+ pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
496
+ pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
497
+ pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
498
+ pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
499
+ background-color: hsla(135, 73%, 55%, 0.25);
500
+ }
501
+ .prism-previewer.prism-previewer:before,
502
+ .prism-previewer-gradient.prism-previewer-gradient div {
503
+ border-color: hsl(0, 0, 95%);
504
+ }
505
+ .prism-previewer-color.prism-previewer-color:before,
506
+ .prism-previewer-gradient.prism-previewer-gradient div,
507
+ .prism-previewer-easing.prism-previewer-easing:before {
508
+ border-radius: 0.3em;
509
+ }
510
+ .prism-previewer.prism-previewer:after {
511
+ border-top-color: hsl(0, 0, 95%);
512
+ }
513
+ .prism-previewer-flipped.prism-previewer-flipped.after {
514
+ border-bottom-color: hsl(0, 0, 95%);
515
+ }
516
+ .prism-previewer-angle.prism-previewer-angle:before,
517
+ .prism-previewer-time.prism-previewer-time:before,
518
+ .prism-previewer-easing.prism-previewer-easing {
519
+ background: hsl(0, 0%, 100%);
520
+ }
521
+ .prism-previewer-angle.prism-previewer-angle circle,
522
+ .prism-previewer-time.prism-previewer-time circle {
523
+ stroke: hsl(230, 8%, 24%);
524
+ stroke-opacity: 1;
525
+ }
526
+ .prism-previewer-easing.prism-previewer-easing circle,
527
+ .prism-previewer-easing.prism-previewer-easing path,
528
+ .prism-previewer-easing.prism-previewer-easing line {
529
+ stroke: hsl(230, 8%, 24%);
530
+ }
531
+ .prism-previewer-easing.prism-previewer-easing circle {
532
+ fill: transparent;
533
+ }
534
+ [data-prefers-color="dark"] .token.doctype,
535
+ [data-prefers-color="dark"] .token.punctuation,
536
+ [data-prefers-color="dark"] .token.entity,
537
+ [data-prefers-color="dark"] code[class*='language-'],
538
+ [data-prefers-color="dark"] pre[class*='language-'] {
539
+ color: #8590a0;
540
+ }
541
+ [data-prefers-color="dark"] .token.comment,
542
+ [data-prefers-color="dark"] .token.prolog,
543
+ [data-prefers-color="dark"] .token.cdata {
544
+ color: #616d7f;
545
+ }
546
+ .dumi-default-source-code {
547
+ position: relative;
548
+ background-color: #fbfcfd;
549
+ border-bottom-left-radius: 4px;
550
+ border-bottom-right-radius: 4px;
551
+ }
552
+ .dumi-default-source-code-scroll-container {
553
+ overflow: auto;
554
+ width: 100%;
555
+ height: 100%;
556
+ }
557
+ .dumi-default-source-code-scroll-content {
558
+ position: relative;
559
+ width: max-content;
560
+ height: max-content;
561
+ min-width: 100%;
562
+ min-height: 100%;
563
+ }
564
+ .dumi-default-source-code-scroll-content > pre.prism-code {
565
+ width: max-content;
566
+ position: relative;
567
+ overflow: visible;
568
+ }
569
+ .dumi-default-source-code > pre.prism-code {
570
+ overflow: auto;
571
+ }
572
+ .dumi-default-source-code > pre.prism-code,
573
+ .dumi-default-source-code-scroll-content > pre.prism-code {
574
+ margin: 0;
575
+ padding: 18px 24px;
576
+ font-size: 14px;
577
+ line-height: 1.58;
578
+ direction: ltr;
579
+ background: transparent;
580
+ }
581
+ .dumi-default-source-code > pre.prism-code::before,
582
+ .dumi-default-source-code-scroll-content > pre.prism-code::before,
583
+ .dumi-default-source-code > pre.prism-code::after,
584
+ .dumi-default-source-code-scroll-content > pre.prism-code::after {
585
+ content: none;
586
+ }
587
+ .dumi-default-source-code > pre.prism-code > .highlighted,
588
+ .dumi-default-source-code-scroll-content > pre.prism-code > .highlighted {
589
+ position: relative;
590
+ width: calc(100% + 24px);
591
+ background-color: #eeeff0;
592
+ }
593
+ .dumi-default-source-code > pre.prism-code > .highlighted .line-cell,
594
+ .dumi-default-source-code-scroll-content > pre.prism-code > .highlighted .line-cell {
595
+ position: relative;
596
+ }
597
+ .dumi-default-source-code > pre.prism-code > .highlighted .line-cell::after,
598
+ .dumi-default-source-code-scroll-content > pre.prism-code > .highlighted .line-cell::after {
599
+ content: '';
600
+ position: absolute;
601
+ top: 0;
602
+ right: -24px;
603
+ bottom: 0;
604
+ width: 24px;
605
+ background-color: #eeeff0;
606
+ }
607
+ .dumi-default-source-code > pre.prism-code > .highlighted::after,
608
+ .dumi-default-source-code-scroll-content > pre.prism-code > .highlighted::after {
609
+ content: '';
610
+ position: absolute;
611
+ top: 0;
612
+ left: -24px;
613
+ bottom: 0;
614
+ width: 24px;
615
+ background-color: #eeeff0;
616
+ }
617
+ .dumi-default-source-code > pre.prism-code > .wrap,
618
+ .dumi-default-source-code-scroll-content > pre.prism-code > .wrap {
619
+ display: table-row;
620
+ }
621
+ .dumi-default-source-code > pre.prism-code > .wrap > .token-line-num,
622
+ .dumi-default-source-code-scroll-content > pre.prism-code > .wrap > .token-line-num {
623
+ display: table-cell;
624
+ text-align: right;
625
+ padding-right: 1em;
626
+ user-select: none;
627
+ opacity: 0.5;
628
+ }
629
+ .dumi-default-source-code > pre.prism-code > .wrap > .line-cell,
630
+ .dumi-default-source-code-scroll-content > pre.prism-code > .wrap > .line-cell {
631
+ display: table-cell;
632
+ width: 100%;
633
+ }
634
+ .dumi-default-source-code-copy {
635
+ position: absolute;
636
+ z-index: 2;
637
+ top: 9px;
638
+ right: 12px;
639
+ display: inline-block;
640
+ padding: 8px 12px;
641
+ background-color: rgba(251, 252, 253, 0.8);
642
+ border: 0;
643
+ border-radius: 2px;
644
+ cursor: pointer;
645
+ transition: all 0.2s;
646
+ }
647
+ .dumi-default-source-code-copy > svg {
648
+ width: 16px;
649
+ fill: #98a3aa;
650
+ transition: fill 0.2s;
651
+ }
652
+ [data-prefers-color="dark"] .dumi-default-source-code-copy > svg {
653
+ fill: #4a545a;
654
+ }
655
+ .dumi-default-source-code-copy:hover > svg {
656
+ fill: #7c8a93;
657
+ }
658
+ [data-prefers-color="dark"] .dumi-default-source-code-copy:hover > svg {
659
+ fill: #616e75;
660
+ }
661
+ .dumi-default-source-code-copy[data-copied] > svg {
662
+ fill: #208a41;
663
+ }
664
+ [data-prefers-color="dark"] .dumi-default-source-code-copy[data-copied] > svg {
665
+ fill: #124c24;
666
+ }
667
+ .dumi-default-source-code:not(:hover) .dumi-default-source-code-copy {
668
+ opacity: 0;
669
+ visibility: hidden;
670
+ }
671
+ [data-prefers-color="dark"] .dumi-default-source-code {
672
+ background-color: #020305;
673
+ }
674
+ [data-prefers-color="dark"] .dumi-default-source-code-copy {
675
+ background-color: rgba(2, 3, 5, 0.2);
676
+ }
677
+ [data-prefers-color="dark"] .dumi-default-source-code > pre.prism-code > .highlighted {
678
+ background-color: #1c1d1e;
679
+ }
680
+ [data-prefers-color="dark"] .dumi-default-source-code > pre.prism-code > .highlighted::after {
681
+ background-color: #1c1d1e;
682
+ }
683
+ [data-prefers-color="dark"] .dumi-default-source-code > pre.prism-code > .highlighted .line-cell::after {
684
+ background-color: #1c1d1e;
685
+ }
686
+ .dumi-default-source-code-editor {
687
+ position: relative;
688
+ }
689
+ .dumi-default-source-code-editor-textarea {
690
+ position: absolute;
691
+ z-index: 1;
692
+ display: block;
693
+ top: 0;
694
+ left: 0;
695
+ width: 100%;
696
+ height: 100%;
697
+ color: transparent;
698
+ caret-color: #30363f;
699
+ overflow-wrap: normal;
700
+ white-space: pre;
701
+ box-sizing: border-box;
702
+ background: transparent;
703
+ opacity: 1;
704
+ border: 0;
705
+ resize: none;
706
+ outline: none;
707
+ overflow: hidden;
708
+ border-bottom-left-radius: 3px;
709
+ border-bottom-right-radius: 3px;
710
+ }
711
+ [data-prefers-color="dark"] .dumi-default-source-code-editor-textarea {
712
+ caret-color: #c6c9cd;
713
+ }
714
+ [data-prefers-color="dark"] .dumi-default-source-code-editor-textarea:focus::selection {
715
+ background-color: rgba(0, 83, 200, 0.3);
716
+ }
717
+ .dumi-default-source-code-editor::after {
718
+ content: '';
719
+ position: absolute;
720
+ z-index: 0;
721
+ top: 0;
722
+ left: 0;
723
+ width: 100%;
724
+ height: 100%;
725
+ border-bottom-left-radius: 3px;
726
+ border-bottom-right-radius: 3px;
727
+ pointer-events: none;
728
+ }
729
+ .dumi-default-source-code-editor:focus-within::after {
730
+ box-shadow: 0 0 0 1px #1677ff inset;
731
+ }
732
+ [data-prefers-color="dark"] .dumi-default-source-code-editor:focus-within::after {
733
+ box-shadow: 0 0 0 1px #0053c8 inset;
734
+ }
735
+ [data-dumi-tooltip] {
736
+ position: relative;
737
+ }
738
+ [data-dumi-tooltip]::before,
739
+ [data-dumi-tooltip]::after {
740
+ position: absolute;
741
+ bottom: 100%;
742
+ left: 50%;
743
+ transform: translateX(-50%);
744
+ display: inline-block;
745
+ opacity: 0.7;
746
+ pointer-events: none;
747
+ transition: all 0.2s;
748
+ }
749
+ [data-dumi-tooltip]::before {
750
+ content: attr(data-dumi-tooltip);
751
+ min-width: 30px;
752
+ margin-bottom: 8px;
753
+ padding: 5px 8px;
754
+ color: #fff;
755
+ font-size: 13px;
756
+ line-height: 1.1;
757
+ white-space: nowrap;
758
+ background-color: #000;
759
+ border-radius: 2px;
760
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
761
+ box-sizing: border-box;
762
+ }
763
+ [data-prefers-color="dark"] [data-dumi-tooltip]::before {
764
+ background-color: #222;
765
+ }
766
+ [data-dumi-tooltip]::after {
767
+ content: '';
768
+ width: 0;
769
+ height: 0;
770
+ border: 4px solid transparent;
771
+ border-top-color: #000;
772
+ }
773
+ [data-prefers-color="dark"] [data-dumi-tooltip]::after {
774
+ border-top-color: #222;
775
+ }
776
+ [data-dumi-tooltip]:not(:hover)::before,
777
+ [data-dumi-tooltip]:not(:hover)::after {
778
+ visibility: hidden;
779
+ opacity: 0;
780
+ }
781
+ [data-dumi-tooltip][data-dumi-tooltip-bottom]::before,
782
+ [data-dumi-tooltip][data-dumi-tooltip-bottom]::after {
783
+ bottom: auto;
784
+ top: 100%;
785
+ }
786
+ [data-dumi-tooltip][data-dumi-tooltip-bottom]::before {
787
+ margin-top: 8px;
788
+ margin-bottom: 0;
789
+ }
790
+ [data-dumi-tooltip][data-dumi-tooltip-bottom]::after {
791
+ border-top-color: transparent;
792
+ border-bottom-color: #000;
793
+ }
794
+ [data-prefers-color="dark"] [data-dumi-tooltip][data-dumi-tooltip-bottom]::after {
795
+ border-bottom-color: #222;
796
+ }
797
+ .dumi-default-previewer-actions {
798
+ display: flex;
799
+ height: 32px;
800
+ align-items: center;
801
+ justify-content: center;
802
+ }
803
+ .dumi-default-previewer-actions:not(:last-child) {
804
+ border-bottom: 1px dashed #e4e9ec;
805
+ }
806
+ [data-prefers-color="dark"] .dumi-default-previewer-actions:not(:last-child) {
807
+ border-bottom-color: #2a353c;
808
+ }
809
+ .dumi-default-previewer-action-btn {
810
+ display: flex;
811
+ align-items: center;
812
+ justify-content: center;
813
+ width: 24px;
814
+ height: 24px;
815
+ padding: 0;
816
+ border: 0;
817
+ background: transparent;
818
+ cursor: pointer;
819
+ }
820
+ .dumi-default-previewer-action-btn > svg {
821
+ width: 16px;
822
+ fill: #98a3aa;
823
+ transition: fill 0.2s;
824
+ }
825
+ [data-prefers-color="dark"] .dumi-default-previewer-action-btn > svg {
826
+ fill: #4a545a;
827
+ }
828
+ .dumi-default-previewer-action-btn:hover > svg {
829
+ fill: #7c8a93;
830
+ }
831
+ [data-prefers-color="dark"] .dumi-default-previewer-action-btn:hover > svg {
832
+ fill: #616e75;
833
+ }
834
+ .dumi-default-previewer-action-btn:not(:last-child) {
835
+ margin-inline-end: 4px;
836
+ }
837
+ .dumi-default-previewer-action-sketch > select {
838
+ position: absolute;
839
+ -webkit-appearance: none;
840
+ appearance: none;
841
+ width: 100%;
842
+ height: 100%;
843
+ opacity: 0;
844
+ cursor: pointer;
845
+ }
846
+ .dumi-default-previewer-action-sketch[data-copied] > svg {
847
+ fill: #208a41;
848
+ }
849
+ .dumi-default-previewer-tabs-single .dumi-default-tabs-nav {
850
+ display: none;
851
+ }
852
+ .dumi-default-previewer-editor-tip-btn {
853
+ position: absolute;
854
+ -webkit-appearance: none;
855
+ appearance: none;
856
+ z-index: 2;
857
+ right: 42px;
858
+ top: 9px;
859
+ padding: 8px 12px;
860
+ cursor: help;
861
+ background: transparent;
862
+ border: 0;
863
+ transition: all 0.2s;
864
+ }
865
+ .dumi-default-previewer-editor-tip-btn > svg {
866
+ width: 16px;
867
+ fill: #98a3aa;
868
+ }
869
+ [data-prefers-color="dark"] .dumi-default-previewer-editor-tip-btn > svg {
870
+ fill: #4a545a;
871
+ }
872
+ .dumi-default-previewer-editor-tip-btn[data-readonly] > span {
873
+ position: absolute;
874
+ top: 50%;
875
+ left: 50%;
876
+ display: block;
877
+ width: 16px;
878
+ height: 2px;
879
+ background: #98a3aa;
880
+ transform: rotate(45deg) translate(-50%, 120%);
881
+ }
882
+ .dumi-default-tabs-tabpane:not(:hover) .dumi-default-previewer-editor-tip-btn {
883
+ opacity: 0;
884
+ visibility: hidden;
885
+ }
886
+ .dumi-theme-default-tooltip {
887
+ position: fixed;
888
+ min-width: 30px;
889
+ margin-bottom: 8px;
890
+ box-sizing: border-box;
891
+ }
892
+ .dumi-theme-default-tooltip-hidden {
893
+ display: none;
894
+ }
895
+ .dumi-theme-default-tooltip-arrow {
896
+ border: 4px solid transparent;
897
+ opacity: 0.7;
898
+ }
899
+ .dumi-theme-default-tooltip-placement-top .dumi-theme-default-tooltip-arrow {
900
+ border-top-color: #000;
901
+ transform: translate(-50%, 100%);
902
+ }
903
+ .dumi-theme-default-tooltip-bottom .dumi-theme-default-tooltip-arrow {
904
+ border-bottom-color: #000;
905
+ transform: translateY(-50%, -100%);
906
+ }
907
+ .dumi-theme-default-tooltip-content {
908
+ padding: 5px 8px;
909
+ color: #fff;
910
+ font-size: 13px;
911
+ line-height: 1.1;
912
+ white-space: nowrap;
913
+ background-color: #000;
914
+ opacity: 0.7;
915
+ border-radius: 2px;
916
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
917
+ box-sizing: border-box;
918
+ }
919
+ [data-prefers-color="dark"] .dumi-theme-default-tooltip-content {
920
+ background-color: #222;
921
+ }
922
+ .dumi-default-previewer {
923
+ margin: 24px 0 32px;
924
+ border: 1px solid #e4e9ec;
925
+ border-radius: 4px;
926
+ background-color: inherit;
927
+ }
928
+ [data-prefers-color="dark"] .dumi-default-previewer {
929
+ border-color: #2a353c;
930
+ }
931
+ [data-dumi-demo-grid] .dumi-default-previewer {
932
+ margin: 0 0 16px;
933
+ }
934
+ [data-dumi-demo-grid] .dumi-default-previewer:first-child {
935
+ margin-top: 24px;
936
+ }
937
+ [data-dumi-demo-grid] .dumi-default-previewer:last-child {
938
+ margin-bottom: 32px;
939
+ }
940
+ .dumi-default-previewer-demo {
941
+ border-top-left-radius: 2px;
942
+ border-top-right-radius: 2px;
943
+ padding: 40px 24px;
944
+ }
945
+ .dumi-default-previewer-demo > iframe {
946
+ display: block;
947
+ width: 100%;
948
+ height: 300px;
949
+ border: 0;
950
+ }
951
+ .dumi-default-previewer-demo[data-iframe] {
952
+ position: relative;
953
+ padding: 0;
954
+ border-top: 24px solid #e4e9ec;
955
+ box-sizing: border-box;
956
+ }
957
+ [data-prefers-color="dark"] .dumi-default-previewer-demo[data-iframe] {
958
+ border-top-color: #2a353c;
959
+ }
960
+ .dumi-default-previewer-demo[data-iframe]::after {
961
+ content: '';
962
+ position: absolute;
963
+ top: -19px;
964
+ left: 8px;
965
+ display: inline-block;
966
+ width: 12px;
967
+ height: 12px;
968
+ border-radius: 50%;
969
+ background-color: #fd6458;
970
+ box-shadow: 20px 0 0 #ffbf2b, 40px 0 0 #24cc3d;
971
+ }
972
+ .dumi-default-previewer-demo[data-transform] {
973
+ transform: translate(0, 0);
974
+ }
975
+ .dumi-default-previewer-demo[data-compact] {
976
+ padding: 0;
977
+ }
978
+ .dumi-default-previewer-demo[data-error][data-compact] {
979
+ min-height: 30px;
980
+ }
981
+ .dumi-default-previewer-demo[data-error][data-compact] + .dumi-default-previewer-demo-error {
982
+ border-top-left-radius: 3px;
983
+ border-top-right-radius: 3px;
984
+ }
985
+ .dumi-default-previewer-demo[data-loading] {
986
+ position: relative;
987
+ }
988
+ .dumi-default-previewer-demo[data-loading]::before {
989
+ position: absolute;
990
+ top: 50%;
991
+ left: 50%;
992
+ content: '';
993
+ display: block;
994
+ height: 28px;
995
+ max-height: 90%;
996
+ aspect-ratio: 1;
997
+ border-radius: 50%;
998
+ border: 2.8px solid;
999
+ border-color: #1677ff transparent;
1000
+ box-sizing: border-box;
1001
+ -webkit-animation: dumi-previewer-loading 1s infinite;
1002
+ animation: dumi-previewer-loading 1s infinite;
1003
+ transform: translate(-50%, -50%);
1004
+ }
1005
+ [data-prefers-color="dark"] .dumi-default-previewer-demo[data-loading]::before {
1006
+ border-color: #0053c8 transparent;
1007
+ }
1008
+ @keyframes dumi-previewer-loading {
1009
+ to {
1010
+ transform: translate(-50%, -50%) rotate(0.5turn);
1011
+ }
1012
+ }
1013
+ .dumi-default-previewer-demo[data-loading] > * {
1014
+ opacity: 0.3 !important;
1015
+ }
1016
+ .dumi-default-previewer-demo-error {
1017
+ position: relative;
1018
+ margin-top: -30px;
1019
+ height: 30px;
1020
+ padding: 0 24px;
1021
+ line-height: 30px;
1022
+ color: #b23642;
1023
+ font-size: 13px;
1024
+ white-space: nowrap;
1025
+ text-overflow: ellipsis;
1026
+ background: #fdf4f5;
1027
+ box-sizing: border-box;
1028
+ overflow: hidden;
1029
+ }
1030
+ [data-prefers-color="dark"] .dumi-default-previewer-demo-error {
1031
+ color: #c6414e;
1032
+ background: #2a060a;
1033
+ }
1034
+ [data-prefers-color="dark"] .dumi-default-previewer-demo-error > svg {
1035
+ fill: #c6414e;
1036
+ }
1037
+ .dumi-default-previewer-demo-error > svg {
1038
+ width: 14px;
1039
+ padding-right: 4px;
1040
+ fill: #ce1f31;
1041
+ vertical-align: -0.14em;
1042
+ }
1043
+ .dumi-default-previewer-meta {
1044
+ border-top: 1px solid #e4e9ec;
1045
+ }
1046
+ [data-prefers-color="dark"] .dumi-default-previewer-meta {
1047
+ border-top-color: #2a353c;
1048
+ }
1049
+ .dumi-default-previewer-desc {
1050
+ position: relative;
1051
+ }
1052
+ .dumi-default-previewer-desc > .markdown {
1053
+ padding: 14px 24px;
1054
+ border-bottom: 1px dashed #e4e9ec;
1055
+ }
1056
+ [data-prefers-color="dark"] .dumi-default-previewer-desc > .markdown {
1057
+ border-bottom-color: #2a353c;
1058
+ }
1059
+ .dumi-default-previewer-desc > h5 {
1060
+ position: absolute;
1061
+ top: -7px;
1062
+ left: 20px;
1063
+ margin: 0;
1064
+ padding: 0 4px;
1065
+ display: inline-block;
1066
+ font-size: 14px;
1067
+ line-height: 1;
1068
+ font-weight: bold;
1069
+ background: linear-gradient(to top, #ffffff, #ffffff 50%, rgba(255, 255, 255, 0)) 100%;
1070
+ }
1071
+ [data-prefers-color="dark"] .dumi-default-previewer-desc > h5 {
1072
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95) 50%, rgba(0, 0, 0, 0)) 100%;
1073
+ }
1074
+ .dumi-default-previewer-desc > h5 > a {
1075
+ color: #30363f;
1076
+ }
1077
+ [data-prefers-color="dark"] .dumi-default-previewer-desc > h5 > a {
1078
+ color: #c6c9cd;
1079
+ }
1080
+ .dumi-default-previewer-desc > h5 > a:not(:hover) {
1081
+ text-decoration: none;
1082
+ }
1083
+ .dumi-default-previewer-desc > h5 > a > strong {
1084
+ float: inline-start;
1085
+ padding-inline-end: 8px;
1086
+ color: #d59200;
1087
+ font-size: 12px;
1088
+ line-height: 15px;
1089
+ }
1090
+ [data-prefers-color="dark"] .dumi-default-previewer-desc > h5 > a > strong {
1091
+ color: #895e00;
1092
+ }
1093
+ .dumi-default-previewer[data-active] {
1094
+ box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.1);
1095
+ border-color: #7cb3ff;
1096
+ }
1097
+ [data-prefers-color="dark"] .dumi-default-previewer[data-active] {
1098
+ box-shadow: 0 0 0 4px rgba(0, 83, 200, 0.1);
1099
+ border-color: #002962;
1100
+ }
1101
+ .dumi-default-previewer[data-debug] {
1102
+ border-color: #ffc23c;
1103
+ }
1104
+ [data-prefers-color="dark"] .dumi-default-previewer[data-debug] {
1105
+ border-color: #231800;
1106
+ }
1107
+ .dumi-default-previewer[data-debug][data-active] {
1108
+ box-shadow: 0 0 0 4px rgba(213, 146, 0, 0.1);
1109
+ }
1110
+ [data-prefers-color="dark"] .dumi-default-previewer[data-debug][data-active] {
1111
+ box-shadow: 0 0 0 4px rgba(137, 94, 0, 0.1);
1112
+ }
1113
+ .dumi-default-content-tabs {
1114
+ list-style-type: none;
1115
+ display: flex;
1116
+ align-items: center;
1117
+ height: 60px;
1118
+ margin: -48px -48px 48px -48px;
1119
+ padding: 0 48px;
1120
+ border-bottom: 1px solid #e4e9ec;
1121
+ }
1122
+ [data-prefers-color="dark"] .dumi-default-content-tabs {
1123
+ border-bottom-color: #2a353c;
1124
+ }
1125
+ @media only screen and (max-width: 767px) {
1126
+ .dumi-default-content-tabs {
1127
+ margin: -24px -24px 24px;
1128
+ padding: 0 24px;
1129
+ height: 42px;
1130
+ }
1131
+ }
1132
+ [data-no-sidebar] .dumi-default-content-tabs {
1133
+ margin: 0 0 48px;
1134
+ padding: 0;
1135
+ }
1136
+ @media only screen and (max-width: 767px) {
1137
+ [data-no-sidebar] .dumi-default-content-tabs {
1138
+ margin-bottom: 24px;
1139
+ }
1140
+ }
1141
+ .dumi-default-content-tabs > li {
1142
+ height: inherit;
1143
+ }
1144
+ .dumi-default-content-tabs > li > button {
1145
+ padding: 0;
1146
+ height: inherit;
1147
+ color: #4f5866;
1148
+ font-size: 17px;
1149
+ border: 0;
1150
+ background: transparent;
1151
+ cursor: pointer;
1152
+ transition: all 0.2s;
1153
+ }
1154
+ [data-prefers-color="dark"] .dumi-default-content-tabs > li > button {
1155
+ color: #8590a0;
1156
+ }
1157
+ .dumi-default-content-tabs > li > button:hover {
1158
+ color: #1677ff;
1159
+ }
1160
+ [data-prefers-color="dark"] .dumi-default-content-tabs > li > button:hover {
1161
+ color: #0053c8;
1162
+ }
1163
+ .dumi-default-content-tabs > li:not(last-child) {
1164
+ margin-inline-end: 42px;
1165
+ }
1166
+ @media only screen and (max-width: 767px) {
1167
+ .dumi-default-content-tabs > li:not(last-child) {
1168
+ margin-inline-end: 20px;
1169
+ }
1170
+ }
1171
+ .dumi-default-content-tabs > li[data-active] {
1172
+ position: relative;
1173
+ }
1174
+ .dumi-default-content-tabs > li[data-active] > button {
1175
+ color: #30363f;
1176
+ }
1177
+ [data-prefers-color="dark"] .dumi-default-content-tabs > li[data-active] > button {
1178
+ color: #c6c9cd;
1179
+ }
1180
+ .dumi-default-content-tabs > li[data-active]::after {
1181
+ content: '';
1182
+ position: absolute;
1183
+ left: 0;
1184
+ right: 0;
1185
+ bottom: -1px;
1186
+ height: 1px;
1187
+ background-color: #1677ff;
1188
+ }
1189
+ [data-prefers-color="dark"] .dumi-default-content-tabs > li[data-active]::after {
1190
+ background-color: #0053c8;
1191
+ }
1192
+ .dumi-default-container.markdown {
1193
+ padding: 18px 0;
1194
+ padding-inline-start: 44px;
1195
+ padding-inline-end: 16px;
1196
+ border-radius: 4px;
1197
+ }
1198
+ .dumi-default-container.markdown:not(:first-child) {
1199
+ margin-bottom: 24px;
1200
+ }
1201
+ .dumi-default-container.markdown:not(:last-child) {
1202
+ margin-top: 32px;
1203
+ }
1204
+ .dumi-default-container.markdown > svg {
1205
+ float: left;
1206
+ fill: currentcolor;
1207
+ margin-inline-start: -26px;
1208
+ width: 18px;
1209
+ }
1210
+ [data-direction='rtl'] .dumi-default-container.markdown > svg {
1211
+ float: right;
1212
+ }
1213
+ .dumi-default-container.markdown > h4 {
1214
+ clear: none;
1215
+ margin: 0 0 12px;
1216
+ font-size: 15px;
1217
+ line-height: 17px;
1218
+ }
1219
+ .dumi-default-container.markdown > section {
1220
+ font-size: 15px;
1221
+ }
1222
+ .dumi-default-container.markdown[data-type='info'] {
1223
+ background: #ecf4ff;
1224
+ }
1225
+ .dumi-default-container.markdown[data-type='info'] > h4,
1226
+ .dumi-default-container.markdown[data-type='info'] > svg {
1227
+ color: #3367af;
1228
+ }
1229
+ .dumi-default-container.markdown[data-type='info'] > section {
1230
+ color: #496a99;
1231
+ }
1232
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='info'] {
1233
+ background: #001c44;
1234
+ }
1235
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='info'] > h4,
1236
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='info'] > svg {
1237
+ color: #5e8ed0;
1238
+ }
1239
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='info'] > section {
1240
+ color: #7391bc;
1241
+ }
1242
+ .dumi-default-container.markdown[data-type='warning'] {
1243
+ background: #fff3da;
1244
+ }
1245
+ .dumi-default-container.markdown[data-type='warning'] > h4,
1246
+ .dumi-default-container.markdown[data-type='warning'] > svg {
1247
+ color: #b78314;
1248
+ }
1249
+ .dumi-default-container.markdown[data-type='warning'] > section {
1250
+ color: #9e7a2d;
1251
+ }
1252
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='warning'] {
1253
+ background: #2d1f00;
1254
+ }
1255
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='warning'] > h4,
1256
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='warning'] > svg {
1257
+ color: #cd9417;
1258
+ }
1259
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='warning'] > section {
1260
+ color: #b78c2e;
1261
+ }
1262
+ .dumi-default-container.markdown[data-type='success'] {
1263
+ background: #dff8e7;
1264
+ }
1265
+ .dumi-default-container.markdown[data-type='success'] > h4,
1266
+ .dumi-default-container.markdown[data-type='success'] > svg {
1267
+ color: #238241;
1268
+ }
1269
+ .dumi-default-container.markdown[data-type='success'] > section {
1270
+ color: #357047;
1271
+ }
1272
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='success'] {
1273
+ background: #082210;
1274
+ }
1275
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='success'] > h4,
1276
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='success'] > svg {
1277
+ color: #2a9a4d;
1278
+ }
1279
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='success'] > section {
1280
+ color: #3d8654;
1281
+ }
1282
+ .dumi-default-container.markdown[data-type='error'] {
1283
+ background: #fdf4f5;
1284
+ }
1285
+ .dumi-default-container.markdown[data-type='error'] > h4,
1286
+ .dumi-default-container.markdown[data-type='error'] > svg {
1287
+ color: #b23642;
1288
+ }
1289
+ .dumi-default-container.markdown[data-type='error'] > section {
1290
+ color: #955359;
1291
+ }
1292
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='error'] {
1293
+ background: #2a060a;
1294
+ }
1295
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='error'] > h4,
1296
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='error'] > svg {
1297
+ color: #c6414e;
1298
+ }
1299
+ [data-prefers-color="dark"] .dumi-default-container.markdown[data-type='error'] > section {
1300
+ color: #ad5962;
1301
+ }
1302
+ /*# sourceMappingURL=umi.css.map*/