~james/core

core/web/src/pierre.css -rw-r--r-- 3.0 KiB
452f17b7 — james chore(import): snapshot james.dad.town/core at f70c71c7696a 14 hours ago 
                                                                                
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

: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.8125rem;
	--diffs-line-height: calc(20 / 13);
	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-subtle);

	--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: var(--color-background-info-subtle-hover);
	--diffs-editor-line-highlight-border: 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-md, 0.375rem);
}

: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);
	}
}