Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384:root { /* the "tangled" theme (pierre.ts) binds --diffs-bg/--diffs-fg to these and forces color-scheme: dark. without them the bg chain goes guaranteed-invalid and light-dark() is stuck on the dark branch */ --diffs-background: var(--color-background-default); --diffs-foreground: var(--color-syntax-foreground);
--diffs-token-comment: var(--color-syntax-comment); --diffs-token-string: var(--color-syntax-string); --diffs-token-string-expression: var(--color-syntax-string); --diffs-token-keyword: var(--color-syntax-keyword); --diffs-token-function: var(--color-syntax-function); --diffs-token-constant: var(--color-syntax-constant); --diffs-token-parameter: var(--color-syntax-parameter); --diffs-token-punctuation: var(--color-syntax-punctuation); --diffs-token-link: var(--color-syntax-link); --diffs-token-inserted: var(--color-syntax-inserted); --diffs-token-deleted: var(--color-syntax-deleted); --diffs-token-changed: var(--color-syntax-changed);}
/* Override Pierre's unlayered :host stylesheet using unlayered :root diffs-container. */
:root diffs-container { --diffs-font-family: var(--font-mono); --diffs-font-size: 0.875rem; --diffs-line-height: 1.5; color-scheme: light dark; --diffs-light-bg: var(--color-background-default); --diffs-dark-bg: var(--color-background-default); --diffs-bg-separator-override: var(--color-background-inset); --diffs-fg-number-override: var(--color-foreground-placeholder);
--diffs-bg-gutter: var(--color-background-subtle); --diffs-bg-gutter-wash: transparent;
--diffs-bg-addition-override: var(--color-background-success-subtle); --diffs-bg-deletion-override: var(--color-background-danger-subtle); --diffs-addition-color-override: var(--color-foreground-success); --diffs-deletion-color-override: var(--color-foreground-danger);
--diffs-editor-selection-bg: color-mix(in srgb, Highlight 50%, transparent);}
/* a card whose hunks are still on the wire has pierre's reserved height and nothing to draw in it. the rows it is waiting for are 21px apart, so the wait paints as those rows: a striped fill under a transparent diff background, breathing until the real hunks replace it. geometry is untouched - this is the host's own background, and pierre keeps measuring exactly what it did */:root .codeview diffs-container[data-pending] { --diffs-background: transparent; --diffs-light-bg: transparent; --diffs-dark-bg: transparent; background-image: repeating-linear-gradient( to bottom, var(--color-background-muted) 0 0.75rem, transparent 0.75rem calc(var(--diffs-font-size) * var(--diffs-line-height)) ); animation: bone-breathe 1.6s ease-in-out infinite;}
@keyframes bone-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.7; }}
:root .codeview diffs-container { border-radius: var(--radius-sm, 0.25rem);}
:root diffs-container { @variant dark { --diffs-fg-number-override: var(--color-foreground-subtle);
--diffs-bg-gutter: var(--color-background-default); --diffs-bg-gutter-wash: var(--color-alpha-dark-5); }}