1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | const ERROR_OVERLAY_TEMPLATE = `
|
36 | <style>
|
37 | :host {
|
38 | all: initial;
|
39 |
|
40 | /* the direction property is not reset by 'all' */
|
41 | direction: ltr;
|
42 | }
|
43 |
|
44 | /*!
|
45 | * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
|
46 | * Copyright 2011-2019 The Bootstrap Authors
|
47 | * Copyright 2011-2019 Twitter, Inc.
|
48 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
49 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
50 | */
|
51 | *,
|
52 | *::before,
|
53 | *::after {
|
54 | box-sizing: border-box;
|
55 | }
|
56 |
|
57 | :host {
|
58 | font-family: sans-serif;
|
59 | line-height: 1.15;
|
60 | -webkit-text-size-adjust: 100%;
|
61 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
62 | }
|
63 |
|
64 | article,
|
65 | aside,
|
66 | figcaption,
|
67 | figure,
|
68 | footer,
|
69 | header,
|
70 | hgroup,
|
71 | main,
|
72 | nav,
|
73 | section {
|
74 | display: block;
|
75 | }
|
76 |
|
77 | :host {
|
78 | margin: 0;
|
79 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
80 | 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
81 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
82 | 'Noto Color Emoji';
|
83 | font-size: 1rem;
|
84 | font-weight: 400;
|
85 | line-height: 1.5;
|
86 | color: #212529;
|
87 | text-align: left;
|
88 | background-color: #fff;
|
89 | }
|
90 |
|
91 | [tabindex='-1']:focus:not(:focus-visible) {
|
92 | outline: 0 !important;
|
93 | }
|
94 |
|
95 | hr {
|
96 | box-sizing: content-box;
|
97 | height: 0;
|
98 | overflow: visible;
|
99 | }
|
100 |
|
101 | h1,
|
102 | h2,
|
103 | h3,
|
104 | h4,
|
105 | h5,
|
106 | h6 {
|
107 | margin-top: 0;
|
108 | margin-bottom: 0.5rem;
|
109 | }
|
110 |
|
111 | p {
|
112 | margin-top: 0;
|
113 | margin-bottom: 1rem;
|
114 | }
|
115 |
|
116 | abbr[title],
|
117 | abbr[data-original-title] {
|
118 | text-decoration: underline;
|
119 | -webkit-text-decoration: underline dotted;
|
120 | text-decoration: underline dotted;
|
121 | cursor: help;
|
122 | border-bottom: 0;
|
123 | -webkit-text-decoration-skip-ink: none;
|
124 | text-decoration-skip-ink: none;
|
125 | }
|
126 |
|
127 | address {
|
128 | margin-bottom: 1rem;
|
129 | font-style: normal;
|
130 | line-height: inherit;
|
131 | }
|
132 |
|
133 | ol,
|
134 | ul,
|
135 | dl {
|
136 | margin-top: 0;
|
137 | margin-bottom: 1rem;
|
138 | }
|
139 |
|
140 | ol ol,
|
141 | ul ul,
|
142 | ol ul,
|
143 | ul ol {
|
144 | margin-bottom: 0;
|
145 | }
|
146 |
|
147 | dt {
|
148 | font-weight: 700;
|
149 | }
|
150 |
|
151 | dd {
|
152 | margin-bottom: 0.5rem;
|
153 | margin-left: 0;
|
154 | }
|
155 |
|
156 | blockquote {
|
157 | margin: 0 0 1rem;
|
158 | }
|
159 |
|
160 | b,
|
161 | strong {
|
162 | font-weight: bolder;
|
163 | }
|
164 |
|
165 | small {
|
166 | font-size: 80%;
|
167 | }
|
168 |
|
169 | sub,
|
170 | sup {
|
171 | position: relative;
|
172 | font-size: 75%;
|
173 | line-height: 0;
|
174 | vertical-align: baseline;
|
175 | }
|
176 |
|
177 | sub {
|
178 | bottom: -0.25em;
|
179 | }
|
180 |
|
181 | sup {
|
182 | top: -0.5em;
|
183 | }
|
184 |
|
185 | a {
|
186 | color: #007bff;
|
187 | text-decoration: none;
|
188 | background-color: transparent;
|
189 | }
|
190 |
|
191 | a:hover {
|
192 | color: #0056b3;
|
193 | text-decoration: underline;
|
194 | }
|
195 |
|
196 | a:not([href]) {
|
197 | color: inherit;
|
198 | text-decoration: none;
|
199 | }
|
200 |
|
201 | a:not([href]):hover {
|
202 | color: inherit;
|
203 | text-decoration: none;
|
204 | }
|
205 |
|
206 | pre,
|
207 | code,
|
208 | kbd,
|
209 | samp {
|
210 | font-family: SFMono-Regular, Menlo, Monaco, Consolas,
|
211 | 'Liberation Mono', 'Courier New', monospace;
|
212 | font-size: 1em;
|
213 | }
|
214 |
|
215 | pre {
|
216 | margin-top: 0;
|
217 | margin-bottom: 1rem;
|
218 | overflow: auto;
|
219 | }
|
220 |
|
221 | figure {
|
222 | margin: 0 0 1rem;
|
223 | }
|
224 |
|
225 | img {
|
226 | vertical-align: middle;
|
227 | border-style: none;
|
228 | }
|
229 |
|
230 | svg {
|
231 | overflow: hidden;
|
232 | vertical-align: middle;
|
233 | }
|
234 |
|
235 | table {
|
236 | border-collapse: collapse;
|
237 | }
|
238 |
|
239 | caption {
|
240 | padding-top: 0.75rem;
|
241 | padding-bottom: 0.75rem;
|
242 | color: #6c757d;
|
243 | text-align: left;
|
244 | caption-side: bottom;
|
245 | }
|
246 |
|
247 | th {
|
248 | text-align: inherit;
|
249 | }
|
250 |
|
251 | label {
|
252 | display: inline-block;
|
253 | margin-bottom: 0.5rem;
|
254 | }
|
255 |
|
256 | button {
|
257 | border-radius: 0;
|
258 | }
|
259 |
|
260 | button:focus {
|
261 | outline: 1px dotted;
|
262 | outline: 5px auto -webkit-focus-ring-color;
|
263 | }
|
264 |
|
265 | input,
|
266 | button,
|
267 | select,
|
268 | optgroup,
|
269 | textarea {
|
270 | margin: 0;
|
271 | font-family: inherit;
|
272 | font-size: inherit;
|
273 | line-height: inherit;
|
274 | }
|
275 |
|
276 | button,
|
277 | input {
|
278 | overflow: visible;
|
279 | }
|
280 |
|
281 | button,
|
282 | select {
|
283 | text-transform: none;
|
284 | }
|
285 |
|
286 | select {
|
287 | word-wrap: normal;
|
288 | }
|
289 |
|
290 | button,
|
291 | [type='button'],
|
292 | [type='reset'],
|
293 | [type='submit'] {
|
294 | -webkit-appearance: button;
|
295 | }
|
296 |
|
297 | button:not(:disabled),
|
298 | [type='button']:not(:disabled),
|
299 | [type='reset']:not(:disabled),
|
300 | [type='submit']:not(:disabled) {
|
301 | cursor: pointer;
|
302 | }
|
303 |
|
304 | button::-moz-focus-inner,
|
305 | [type='button']::-moz-focus-inner,
|
306 | [type='reset']::-moz-focus-inner,
|
307 | [type='submit']::-moz-focus-inner {
|
308 | padding: 0;
|
309 | border-style: none;
|
310 | }
|
311 |
|
312 | input[type='radio'],
|
313 | input[type='checkbox'] {
|
314 | box-sizing: border-box;
|
315 | padding: 0;
|
316 | }
|
317 |
|
318 | input[type='date'],
|
319 | input[type='time'],
|
320 | input[type='datetime-local'],
|
321 | input[type='month'] {
|
322 | -webkit-appearance: listbox;
|
323 | }
|
324 |
|
325 | textarea {
|
326 | overflow: auto;
|
327 | resize: vertical;
|
328 | }
|
329 |
|
330 | fieldset {
|
331 | min-width: 0;
|
332 | padding: 0;
|
333 | margin: 0;
|
334 | border: 0;
|
335 | }
|
336 |
|
337 | legend {
|
338 | display: block;
|
339 | width: 100%;
|
340 | max-width: 100%;
|
341 | padding: 0;
|
342 | margin-bottom: 0.5rem;
|
343 | font-size: 1.5rem;
|
344 | line-height: inherit;
|
345 | color: inherit;
|
346 | white-space: normal;
|
347 | }
|
348 |
|
349 | progress {
|
350 | vertical-align: baseline;
|
351 | }
|
352 |
|
353 | [type='number']::-webkit-inner-spin-button,
|
354 | [type='number']::-webkit-outer-spin-button {
|
355 | height: auto;
|
356 | }
|
357 |
|
358 | [type='search'] {
|
359 | outline-offset: -2px;
|
360 | -webkit-appearance: none;
|
361 | }
|
362 |
|
363 | [type='search']::-webkit-search-decoration {
|
364 | -webkit-appearance: none;
|
365 | }
|
366 |
|
367 | ::-webkit-file-upload-button {
|
368 | font: inherit;
|
369 | -webkit-appearance: button;
|
370 | }
|
371 |
|
372 | output {
|
373 | display: inline-block;
|
374 | }
|
375 |
|
376 | summary {
|
377 | display: list-item;
|
378 | cursor: pointer;
|
379 | }
|
380 |
|
381 | template {
|
382 | display: none;
|
383 | }
|
384 |
|
385 | [hidden] {
|
386 | display: none !important;
|
387 | }
|
388 | </style><style>
|
389 | :host {
|
390 | --size-gap-half: 0.25rem; /* 4px */
|
391 | --size-gap: 0.5rem; /* 8px */
|
392 | --size-gap-double: 1rem; /* 16px */
|
393 | --size-gap-quad: 2rem; /* 32px */
|
394 |
|
395 | --size-font-small: 0.875rem; /* 14px */
|
396 | --size-font: 1rem; /* 16px */
|
397 | --size-font-big: 1.25rem; /* 20px */
|
398 | --size-font-bigger: 1.5rem; /* 24px */
|
399 |
|
400 | --color-accents-1: #808080;
|
401 | --color-accents-2: #222222;
|
402 | --color-accents-3: #404040;
|
403 |
|
404 | --font-stack-monospace: 'SFMono-Regular', Consolas,
|
405 | 'Liberation Mono', Menlo, Courier, monospace;
|
406 |
|
407 | --color-ansi-selection: rgba(95, 126, 151, 0.48);
|
408 | --color-ansi-bg: #111111;
|
409 | --color-ansi-fg: #cccccc;
|
410 |
|
411 | --color-ansi-white: #777777;
|
412 | --color-ansi-black: #141414;
|
413 | --color-ansi-blue: #00aaff;
|
414 | --color-ansi-cyan: #88ddff;
|
415 | --color-ansi-green: #98ec65;
|
416 | --color-ansi-magenta: #aa88ff;
|
417 | --color-ansi-red: #ff5555;
|
418 | --color-ansi-yellow: #ffcc33;
|
419 | --color-ansi-bright-white: #ffffff;
|
420 | --color-ansi-bright-black: #777777;
|
421 | --color-ansi-bright-blue: #33bbff;
|
422 | --color-ansi-bright-cyan: #bbecff;
|
423 | --color-ansi-bright-green: #b6f292;
|
424 | --color-ansi-bright-magenta: #cebbff;
|
425 | --color-ansi-bright-red: #ff8888;
|
426 | --color-ansi-bright-yellow: #ffd966;
|
427 | }
|
428 |
|
429 | .mono {
|
430 | font-family: var(--font-stack-monospace);
|
431 | }
|
432 |
|
433 | h1,
|
434 | h2,
|
435 | h3,
|
436 | h4,
|
437 | h5,
|
438 | h6 {
|
439 | margin-bottom: var(--size-gap);
|
440 | font-weight: 500;
|
441 | line-height: 1.5;
|
442 | }
|
443 |
|
444 | h1 {
|
445 | font-size: 2.5rem;
|
446 | }
|
447 | h2 {
|
448 | font-size: 2rem;
|
449 | }
|
450 | h3 {
|
451 | font-size: 1.75rem;
|
452 | }
|
453 | h4 {
|
454 | font-size: 1.5rem;
|
455 | }
|
456 | h5 {
|
457 | font-size: 1.25rem;
|
458 | }
|
459 | h6 {
|
460 | font-size: 1rem;
|
461 | }
|
462 | </style><style>
|
463 |
|
464 | [data-nextjs-dialog-overlay] {
|
465 | position: fixed;
|
466 | top: 0;
|
467 | right: 0;
|
468 | bottom: 0;
|
469 | left: 0;
|
470 | overflow: auto;
|
471 | z-index: 9000;
|
472 |
|
473 | display: flex;
|
474 | align-content: center;
|
475 | align-items: center;
|
476 | flex-direction: column;
|
477 | padding: 10vh 15px 0;
|
478 | }
|
479 |
|
480 | @media (max-height: 812px) {
|
481 | [data-nextjs-dialog-overlay] {
|
482 | padding: 15px 15px 0;
|
483 | }
|
484 | }
|
485 |
|
486 | [data-nextjs-dialog-backdrop] {
|
487 | position: fixed;
|
488 | top: 0;
|
489 | right: 0;
|
490 | bottom: 0;
|
491 | left: 0;
|
492 | background-color: rgba(42, 42, 42, 0.3);
|
493 | background: linear-gradient(to bottom, rgba(42, 42, 42, 0.2) 0%,rgba(20, 20, 20, 0.3) 100%);
|
494 |
|
495 | pointer-events: all;
|
496 | z-index: -1;
|
497 | }
|
498 |
|
499 | [data-nextjs-dialog-backdrop-fixed] {
|
500 | cursor: not-allowed;
|
501 | -webkit-backdrop-filter: blur(8px);
|
502 | backdrop-filter: blur(8px);
|
503 | }
|
504 |
|
505 |
|
506 | [data-nextjs-toast] {
|
507 | position: fixed;
|
508 | bottom: var(--size-gap-double);
|
509 | left: var(--size-gap-double);
|
510 | max-width: 420px;
|
511 | z-index: 9000;
|
512 | }
|
513 |
|
514 | @media (max-width: 440px) {
|
515 | [data-nextjs-toast] {
|
516 | max-width: 90vw;
|
517 | left: 5vw;
|
518 | }
|
519 | }
|
520 |
|
521 | [data-nextjs-toast-wrapper] {
|
522 | padding: 1rem;
|
523 | border-radius: var(--size-gap-half);
|
524 | font-weight: 500;
|
525 | color: var(--color-ansi-bright-white);
|
526 | background-color: var(--color-ansi-red);
|
527 | box-shadow: 0px var(--size-gap-double) var(--size-gap-quad)
|
528 | rgba(0, 0, 0, 0.25);
|
529 | }
|
530 |
|
531 |
|
532 | [data-nextjs-dialog] {
|
533 | display: flex;
|
534 | flex-direction: column;
|
535 | width: 100%;
|
536 | margin-right: auto;
|
537 | margin-left: auto;
|
538 | outline: none;
|
539 | background: white;
|
540 | border-radius: var(--size-gap);
|
541 | box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
|
542 | rgba(0, 0, 0, 0.25);
|
543 | max-height: calc(100% - 3.5rem);
|
544 | overflow-y: hidden;
|
545 | }
|
546 |
|
547 | @media (max-height: 812px) {
|
548 | [data-nextjs-dialog-overlay] {
|
549 | max-height: calc(100% - 15px);
|
550 | }
|
551 | }
|
552 |
|
553 | @media (min-width: 576px) {
|
554 | [data-nextjs-dialog] {
|
555 | max-width: 540px;
|
556 | box-shadow: 0 var(--size-gap) var(--size-gap-quad) rgba(0, 0, 0, 0.25);
|
557 | }
|
558 | }
|
559 |
|
560 | @media (min-width: 768px) {
|
561 | [data-nextjs-dialog] {
|
562 | max-width: 720px;
|
563 | }
|
564 | }
|
565 |
|
566 | @media (min-width: 992px) {
|
567 | [data-nextjs-dialog] {
|
568 | max-width: 960px;
|
569 | }
|
570 | }
|
571 |
|
572 | [data-nextjs-dialog-banner] {
|
573 | position: relative;
|
574 | }
|
575 | [data-nextjs-dialog-banner].banner-warning {
|
576 | border-color: var(--color-ansi-yellow);
|
577 | }
|
578 | [data-nextjs-dialog-banner].banner-error {
|
579 | border-color: var(--color-ansi-red);
|
580 | }
|
581 |
|
582 | [data-nextjs-dialog-banner]::after {
|
583 | z-index: 2;
|
584 | content: '';
|
585 | position: absolute;
|
586 | top: 0;
|
587 | right: 0;
|
588 | width: 100%;
|
589 | /* banner width: */
|
590 | border-top-width: var(--size-gap-half);
|
591 | border-bottom-width: 0;
|
592 | border-top-style: solid;
|
593 | border-bottom-style: solid;
|
594 | border-top-color: inherit;
|
595 | border-bottom-color: transparent;
|
596 | }
|
597 |
|
598 | [data-nextjs-dialog-content] {
|
599 | overflow-y: auto;
|
600 | border: none;
|
601 | margin: 0;
|
602 | /* calc(padding + banner width offset) */
|
603 | padding: calc(var(--size-gap-double) + var(--size-gap-half))
|
604 | var(--size-gap-double);
|
605 | height: 100%;
|
606 | display: flex;
|
607 | flex-direction: column;
|
608 | }
|
609 | [data-nextjs-dialog-content] > [data-nextjs-dialog-header] {
|
610 | flex-shrink: 0;
|
611 | margin-bottom: var(--size-gap-double);
|
612 | }
|
613 | [data-nextjs-dialog-content] > [data-nextjs-dialog-body] {
|
614 | position: relative;
|
615 | flex: 1 1 auto;
|
616 | }
|
617 |
|
618 |
|
619 | [data-nextjs-dialog-left-right] {
|
620 | display: flex;
|
621 | flex-direction: row;
|
622 | align-content: center;
|
623 | align-items: center;
|
624 | justify-content: space-between;
|
625 | }
|
626 | [data-nextjs-dialog-left-right] > nav > button {
|
627 | display: inline-flex;
|
628 | align-items: center;
|
629 | justify-content: center;
|
630 |
|
631 | width: calc(var(--size-gap-double) + var(--size-gap));
|
632 | height: calc(var(--size-gap-double) + var(--size-gap));
|
633 | font-size: 0;
|
634 | border: none;
|
635 | background-color: rgba(255, 85, 85, 0.1);
|
636 | color: var(--color-ansi-red);
|
637 | cursor: pointer;
|
638 | transition: background-color 0.25s ease;
|
639 | }
|
640 | [data-nextjs-dialog-left-right] > nav > button > svg {
|
641 | width: auto;
|
642 | height: calc(var(--size-gap) + var(--size-gap-half));
|
643 | }
|
644 | [data-nextjs-dialog-left-right] > nav > button:hover {
|
645 | background-color: rgba(255, 85, 85, 0.2);
|
646 | }
|
647 | [data-nextjs-dialog-left-right] > nav > button:disabled {
|
648 | background-color: rgba(255, 85, 85, 0.1);
|
649 | color: rgba(255, 85, 85, 0.4);
|
650 | cursor: not-allowed;
|
651 | }
|
652 |
|
653 | [data-nextjs-dialog-left-right] > nav > button:first-of-type {
|
654 | border-radius: var(--size-gap-half) 0 0 var(--size-gap-half);
|
655 | margin-right: 1px;
|
656 | }
|
657 | [data-nextjs-dialog-left-right] > nav > button:last-of-type {
|
658 | border-radius: 0 var(--size-gap-half) var(--size-gap-half) 0;
|
659 | }
|
660 |
|
661 | [data-nextjs-dialog-left-right] > button:last-of-type {
|
662 | border: 0;
|
663 | padding: 0;
|
664 |
|
665 | background-color: transparent;
|
666 | appearance: none;
|
667 |
|
668 | opacity: 0.4;
|
669 | transition: opacity 0.25s ease;
|
670 | }
|
671 | [data-nextjs-dialog-left-right] > button:last-of-type:hover {
|
672 | opacity: 0.7;
|
673 | }
|
674 |
|
675 |
|
676 | [data-nextjs-codeframe] {
|
677 | border-radius: var(--size-gap-half);
|
678 | background-color: var(--color-ansi-bg);
|
679 | color: var(--color-ansi-fg);
|
680 | }
|
681 | [data-nextjs-codeframe]::selection,
|
682 | [data-nextjs-codeframe] *::selection {
|
683 | background-color: var(--color-ansi-selection);
|
684 | }
|
685 | [data-nextjs-codeframe] * {
|
686 | color: inherit;
|
687 | background-color: transparent;
|
688 | font-family: var(--font-stack-monospace);
|
689 | font-size: var(--size-font-small);
|
690 | }
|
691 |
|
692 | [data-nextjs-codeframe] > * {
|
693 | margin: 0;
|
694 | padding: calc(var(--size-gap) + var(--size-gap-half))
|
695 | calc(var(--size-gap-double) + var(--size-gap-half));
|
696 | }
|
697 | [data-nextjs-codeframe] > hr {
|
698 | margin: 0;
|
699 | padding: 0;
|
700 |
|
701 | border: none;
|
702 | border-style: solid;
|
703 | border-width: 0;
|
704 | border-bottom-width: 1px;
|
705 | border-color: var(--color-ansi-bright-black);
|
706 | }
|
707 |
|
708 | [data-nextjs-codeframe] > p {
|
709 | display: flex;
|
710 | align-items: center;
|
711 | justify-content: space-between;
|
712 | user-select: all;
|
713 | }
|
714 | [data-nextjs-codeframe] > p:hover {
|
715 | background: #FFF2;
|
716 |
|
717 | }
|
718 | [data-nextjs-codeframe] > p > svg {
|
719 | width: auto;
|
720 | height: 1em;
|
721 | margin-left: 0.5rem;
|
722 | }
|
723 |
|
724 |
|
725 | [data-nextjs-terminal] {
|
726 | border-radius: var(--size-gap-half);
|
727 | background-color: var(--color-ansi-bg);
|
728 | color: var(--color-ansi-fg);
|
729 | }
|
730 | [data-nextjs-terminal]::selection,
|
731 | [data-nextjs-terminal] *::selection {
|
732 | background-color: var(--color-ansi-selection);
|
733 | }
|
734 | [data-nextjs-terminal] * {
|
735 | color: inherit;
|
736 | background-color: transparent;
|
737 | font-family: var(--font-stack-monospace);
|
738 | }
|
739 | [data-nextjs-terminal] > * {
|
740 | margin: 0;
|
741 | padding: calc(var(--size-gap) + var(--size-gap-half))
|
742 | calc(var(--size-gap-double) + var(--size-gap-half));
|
743 | }
|
744 |
|
745 | [data-nextjs-terminal] pre {
|
746 | white-space: pre-wrap;
|
747 | word-break: break-word;
|
748 | }
|
749 |
|
750 |
|
751 |
|
752 | .nextjs-container-build-error-header > h4 {
|
753 | line-height: 1.5;
|
754 | margin: 0;
|
755 | padding: 0;
|
756 | }
|
757 |
|
758 | .nextjs-container-build-error-body footer {
|
759 | margin-top: var(--size-gap);
|
760 | }
|
761 | .nextjs-container-build-error-body footer p {
|
762 | margin: 0;
|
763 | }
|
764 |
|
765 | .nextjs-container-build-error-body small {
|
766 | color: #757575;
|
767 | }
|
768 |
|
769 |
|
770 | .nextjs-container-errors-header > h1 {
|
771 | font-size: var(--size-font-big);
|
772 | line-height: var(--size-font-bigger);
|
773 | font-weight: bold;
|
774 | margin: 0;
|
775 | margin-top: calc(var(--size-gap-double) + var(--size-gap-half));
|
776 | }
|
777 | .nextjs-container-errors-header small {
|
778 | font-size: var(--size-font-small);
|
779 | color: var(--color-accents-1);
|
780 | margin-left: var(--size-gap-double);
|
781 | }
|
782 | .nextjs-container-errors-header small > span {
|
783 | font-family: var(--font-stack-monospace);
|
784 | }
|
785 | .nextjs-container-errors-header > p {
|
786 | font-family: var(--font-stack-monospace);
|
787 | font-size: var(--size-font-small);
|
788 | line-height: var(--size-font-big);
|
789 | font-weight: bold;
|
790 | margin: 0;
|
791 | margin-top: var(--size-gap-half);
|
792 | color: var(--color-ansi-red);
|
793 | white-space: pre-wrap;
|
794 | }
|
795 | .nextjs-container-errors-header > div > small {
|
796 | margin: 0;
|
797 | margin-top: var(--size-gap-half);
|
798 | }
|
799 | .nextjs-container-errors-header > p > a {
|
800 | color: var(--color-ansi-red);
|
801 | }
|
802 |
|
803 | .nextjs-container-errors-body > h5:not(:first-child) {
|
804 | margin-top: calc(var(--size-gap-double) + var(--size-gap));
|
805 | }
|
806 | .nextjs-container-errors-body > h5 {
|
807 | margin-bottom: var(--size-gap);
|
808 | }
|
809 |
|
810 | .nextjs-toast-errors-parent {
|
811 | cursor: pointer;
|
812 | transition: transform 0.2s ease;
|
813 | }
|
814 | .nextjs-toast-errors-parent:hover {
|
815 | transform: scale(1.1);
|
816 | }
|
817 | .nextjs-toast-errors {
|
818 | display: flex;
|
819 | align-items: center;
|
820 | justify-content: flex-start;
|
821 | }
|
822 | .nextjs-toast-errors > svg {
|
823 | margin-right: var(--size-gap);
|
824 | }
|
825 |
|
826 |
|
827 | button[data-nextjs-data-runtime-error-collapsed-action] {
|
828 | background: none;
|
829 | border: none;
|
830 | padding: 0;
|
831 | font-size: var(--size-font-small);
|
832 | line-height: var(--size-font-bigger);
|
833 | color: var(--color-accents-3);
|
834 | }
|
835 |
|
836 | [data-nextjs-call-stack-frame]:not(:last-child) {
|
837 | margin-bottom: var(--size-gap-double);
|
838 | }
|
839 |
|
840 | [data-nextjs-call-stack-frame] > h6 {
|
841 | margin-top: 0;
|
842 | margin-bottom: var(--size-gap);
|
843 | font-family: var(--font-stack-monospace);
|
844 | color: #222;
|
845 | }
|
846 | [data-nextjs-call-stack-frame] > h6[data-nextjs-frame-expanded='false'] {
|
847 | color: #666;
|
848 | }
|
849 | [data-nextjs-call-stack-frame] > div {
|
850 | display: flex;
|
851 | align-items: center;
|
852 | padding-left: calc(var(--size-gap) + var(--size-gap-half));
|
853 | font-size: var(--size-font-small);
|
854 | color: #999;
|
855 | }
|
856 | [data-nextjs-call-stack-frame] > div > svg {
|
857 | width: auto;
|
858 | height: var(--size-font-small);
|
859 | margin-left: var(--size-gap);
|
860 |
|
861 | display: none;
|
862 | }
|
863 |
|
864 | [data-nextjs-call-stack-frame] > div[data-has-source] {
|
865 | cursor: pointer;
|
866 | }
|
867 | [data-nextjs-call-stack-frame] > div[data-has-source]:hover {
|
868 | text-decoration: underline dotted;
|
869 | }
|
870 | [data-nextjs-call-stack-frame] > div[data-has-source] > svg {
|
871 | display: unset;
|
872 | }
|
873 |
|
874 | </style>
|
875 |
|
876 | <div data-nextjs-dialog-overlay="true"><div data-nextjs-dialog-backdrop="true"></div><div data-nextjs-dialog="true" tabindex="-1" role="dialog" aria-labelledby="nextjs__container_errors_label" aria-describedby="nextjs__container_errors_desc" aria-modal="true"><div data-nextjs-dialog-banner="true" class="banner-error"></div><div data-nextjs-dialog-content="true"><div data-nextjs-dialog-header="true" class="nextjs-container-errors-header"><div data-nextjs-dialog-left-right="true">
|
877 | <nav>
|
878 | <button type="button" disabled="" aria-disabled="true"><svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.99996 1.16666L1.16663 6.99999L6.99996 12.8333M12.8333 6.99999H1.99996H12.8333Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button type="button" disabled="" aria-disabled="true"><svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
|
879 | <small><span>1</span> of <span>1</span> unhandled error</small>
|
880 | </nav>
|
881 | <button id="close-button" type="button" aria-label="Close"><span aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></button></div><h1 id="nextjs__container_errors_label">Error</h1><p id="nextjs__container_errors_desc"></p></div><div data-nextjs-dialog-body="true" class="nextjs-container-errors-body"><h5>Source</h5><div data-nextjs-codeframe="true">
|
882 | <p>
|
883 | <span id="error-file-loc">Loading...</span>
|
884 | <!--<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>-->
|
885 | </p>
|
886 | <hr><pre>Loading...</pre></div>
|
887 | </div></div></div></div>
|
888 | `;
|
889 |
|
890 | const template = document.createElement('template');
|
891 | template.innerHTML = ERROR_OVERLAY_TEMPLATE;
|
892 |
|
893 | customElements.define('hmr-error-overlay', class HmrErrorOverlay extends HTMLElement {
|
894 | constructor({ title, errorMessage, fileLoc, errorStackTrace }) {
|
895 | super();
|
896 | this.title = title;
|
897 | this.errorMessage = errorMessage;
|
898 | this.fileLoc = fileLoc;
|
899 | this.errorStackTrace = errorStackTrace;
|
900 | this.sr = this.attachShadow({ mode: 'open' });
|
901 | this.sr.appendChild(template.content.cloneNode(true));
|
902 | this.close = this.close.bind(this);
|
903 | }
|
904 |
|
905 | connectedCallback() {
|
906 | this.sr
|
907 | .getElementById('close-button')
|
908 | .addEventListener('click', this.close);
|
909 | this.sr
|
910 | .querySelector('[data-nextjs-dialog-backdrop]')
|
911 | .addEventListener('click', this.close);
|
912 |
|
913 | this.sr.getElementById(
|
914 | 'nextjs__container_errors_label',
|
915 | ).innerText = this.title;
|
916 | this.sr.getElementById(
|
917 | 'nextjs__container_errors_desc',
|
918 | ).innerText = this.errorMessage;
|
919 | if (this.fileLoc) {
|
920 | this.sr.getElementById('error-file-loc').innerText = this.fileLoc;
|
921 | } else {
|
922 | this.sr.getElementById('error-file-loc').innerText = 'No source file.';
|
923 | }
|
924 | if (this.errorStackTrace) {
|
925 | this.sr.querySelector('pre').innerText = this.errorStackTrace;
|
926 | } else {
|
927 | this.sr.querySelector('pre').style.display = 'none';
|
928 | }
|
929 | }
|
930 |
|
931 | disconnectedCallback() {
|
932 | this.sr
|
933 | .getElementById('close-button')
|
934 | .removeEventListener('click', this.close);
|
935 | this.sr
|
936 | .querySelector('[data-nextjs-dialog-backdrop]')
|
937 | .removeEventListener('click', this.close);
|
938 | }
|
939 |
|
940 | close() {
|
941 | this.parentNode.removeChild(this);
|
942 | }
|
943 |
|
944 | _watchEscape(event) {
|
945 | if (event.key === 'Escape') {
|
946 | this.close();
|
947 | }
|
948 | }
|
949 | }); |
\ | No newline at end of file |