File size: 2,882 Bytes
b91e262 | 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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view'
export const PSEUDO_HTML_DIFF_STYLES = `
[data-nextjs-container-errors-pseudo-html] {
padding: 8px 0;
margin: 8px 0;
border: 1px solid var(--color-gray-400);
background: var(--color-background-200);
color: var(--color-syntax-constant);
font-family: var(--font-stack-monospace);
font-size: var(--size-12);
line-height: 1.33em; /* 16px in 12px font size */
border-radius: var(--rounded-md-2);
}
[data-nextjs-container-errors-pseudo-html-line] {
display: inline-block;
width: 100%;
padding-left: 40px;
line-height: calc(5 / 3);
}
[data-nextjs-container-errors-pseudo-html--diff='error'] {
background: var(--color-amber-100);
box-shadow: 2px 0 0 0 var(--color-amber-900) inset;
font-weight: bold;
}
[data-nextjs-container-errors-pseudo-html-collapse-button] {
all: unset;
margin-left: 12px;
&:focus {
outline: none;
}
}
[data-nextjs-container-errors-pseudo-html--diff='add'] {
background: var(--color-green-300);
}
[data-nextjs-container-errors-pseudo-html-line-sign] {
margin-left: calc(24px * -1);
margin-right: 24px;
}
[data-nextjs-container-errors-pseudo-html--diff='add']
[data-nextjs-container-errors-pseudo-html-line-sign] {
color: var(--color-green-900);
}
[data-nextjs-container-errors-pseudo-html--diff='remove'] {
background: var(--color-red-300);
}
[data-nextjs-container-errors-pseudo-html--diff='remove']
[data-nextjs-container-errors-pseudo-html-line-sign] {
color: var(--color-red-900);
margin-left: calc(24px * -1);
margin-right: 24px;
}
[data-nextjs-container-errors-pseudo-html--diff='error']
[data-nextjs-container-errors-pseudo-html-line-sign] {
color: var(--color-amber-900);
}
${/* hide but text are still accessible in DOM */ ''}
[data-nextjs-container-errors-pseudo-html--hint] {
display: inline-block;
font-size: 0;
height: 0;
}
[data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {
color: var(--color-accents-1);
}
.nextjs__container_errors__component-stack {
margin: 0;
}
[data-nextjs-container-errors-pseudo-html-collapse='true']
.nextjs__container_errors__component-stack
code {
max-height: 120px;
mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);
padding-bottom: 40px;
}
.nextjs__container_errors__component-stack code {
display: block;
width: 100%;
white-space: pre-wrap;
scroll-snap-type: y mandatory;
overflow-y: hidden;
}
[data-nextjs-container-errors-pseudo-html--diff] {
scroll-snap-align: center;
}
.error-overlay-hydration-error-diff-plus-icon {
color: var(--color-green-900);
}
.error-overlay-hydration-error-diff-minus-icon {
color: var(--color-red-900);
}
`
|