Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179/* injected into pierre's shadow dom through FileDiff's unsafeCSS option, which lands in its last cascade layer. pierre guarantees nothing about this markup between releases, patch ones included: https://diffs.com/docs#styling */
:host { /* we render our own file header, pierre's is disabled */ --diffs-gap-block: 0; --diffs-overflow-override: auto;}
[data-line],[data-no-newline] { --mix-light: 0%;}
[data-gutter],[data-column-number],[data-gutter-buffer] { background-color: var(--diffs-bg-gutter); background-image: linear-gradient(var(--diffs-bg-gutter-wash), var(--diffs-bg-gutter-wash));}
[data-line-type="change-addition"][data-column-number]::before,[data-line-type="change-deletion"][data-column-number]::before { width: 2px;}
[data-line-type="change-addition"][data-column-number],[data-line-type="change-deletion"][data-column-number] { --diffs-bg-number-wash: 60%; --mix-light: 0%; --mix-dark: 0%; --diffs-diff-line-mix-target: var(--diffs-bg); background-image: linear-gradient(var(--diffs-bg-number-tint), var(--diffs-bg-number-tint)), linear-gradient(var(--diffs-bg-gutter-wash), var(--diffs-bg-gutter-wash));}
[data-line-type="change-addition"][data-column-number] { --diffs-bg-number-tint: color-mix( in srgb, var(--diffs-bg-addition-override) var(--diffs-bg-number-wash), transparent );}
[data-line-type="change-deletion"][data-column-number] { --diffs-bg-number-tint: color-mix( in srgb, var(--diffs-bg-deletion-override) var(--diffs-bg-number-wash), transparent );}
[data-diff] { border: 1px solid var(--color-border-default); border-top: 0; border-bottom-right-radius: var(--radius-sm, 0.25rem); border-bottom-left-radius: var(--radius-sm, 0.25rem);}
[data-code][data-unified] { border-bottom-right-radius: calc(var(--radius-sm, 0.25rem) - 1px); border-bottom-left-radius: calc(var(--radius-sm, 0.25rem) - 1px);}
[data-code][data-deletions] { border-bottom-left-radius: calc(var(--radius-sm, 0.25rem) - 1px);}
[data-code][data-additions] { border-bottom-right-radius: calc(var(--radius-sm, 0.25rem) - 1px);}
[data-separator] { block-size: calc(var(--diffs-font-size) * var(--diffs-line-height)); font-size: var(--diffs-font-size); line-height: calc(var(--diffs-font-size) * var(--diffs-line-height)); color: var(--diffs-fg-number-override, #9ca3af);}
[data-separator="line-info"] { margin-block: 0;}
[data-unified] [data-separator="line-info"] [data-separator-wrapper] { padding-inline: 0;}
[data-gutter] [data-separator="line-info"] [data-separator-wrapper] { padding-left: 0;}
/* pierre full-widths the unified separator and the split additions bar but not the split deletions one, and that is the one carrying the count text */[data-deletions] [data-gutter] [data-separator="line-info"] [data-separator-wrapper] { width: 100cqi;}
[data-separator="line-info"] [data-separator-content],[data-separator="line-info"] [data-expand-button],[data-additions] [data-gutter] [data-separator="line-info"] [data-separator-wrapper] { border-radius: 0;}
[data-separator-content] { justify-content: center;}
[data-separator="simple"] { display: flex; align-items: center; justify-content: center;}
[data-separator="simple"]::after { content: "···";}
[data-diff-type="split"][data-overflow="scroll"] { & [data-deletions] { border-right-color: var(--color-border-default); }
& [data-additions] { border-left: 0; }}
[data-diff-type="split"][data-overflow="wrap"] { & [data-deletions] [data-content] { border-right-color: var(--color-border-default); }
& [data-additions] [data-gutter] { border-left: 0; }}
[data-column-number],[data-gutter-buffer],[data-expand-button] { border-right: 0;}
/* pierre pads every line with a trailing 1ch, and the content column sizes to max-content, so that pad rides into the scroll width: a file whose longest line stops within 1ch of the edge scrolls sideways over nothing. wrap mode keeps it, there the pad is the right inset of the text block */[data-overflow="scroll"] [data-line],[data-overflow="scroll"] [data-no-newline] { padding-inline-end: 0;}
/* firefox reserves an inline-end gutter for a vertical scrollbar that overflow-y:hidden can never show, so the scrollport ends up ~11px narrower than the box — but 100cqi, which pierre uses to full-width the separator bars, still measures the full box. those 11px are a sideways scroll over nothing. chromium never saw it: pierre zeroes its webkit scrollbar, so its reserved gutter is already 0 */[data-code] { scrollbar-gutter: auto;}
[data-expand-button] { & > svg[data-icon] { width: 14px; height: 14px; }}
[data-separator-wrapper] [data-separator-multi-button] > [data-expand-button] { border: none;}
[data-line-type="change-deletion"]::before { background-size: 2px 3px;}