Highlight and center fragment-targeted lines

1 file changed, 31 insertions, 0 deletions

diff --git a/assets/cgit.css b/assets/cgit.css
index 46dfbba..619e46c 100644
--- a/assets/cgit.css
+++ b/assets/cgit.css
@@ -32,6 +32,9 @@ div#cgit {
 	--upd:           light-dark(#0000cc, #6ea8fe);
 	--hunk:          light-dark(#000099, #7aa2f7);
 	--accent:        light-dark(#cc0000, #ff6b6b);
+	/* Faded yellow wash for the fragment-targeted source line. Kept
+	 * translucent so it reads over any token colour in both themes. */
+	--line-hl:       light-dark(rgba(212, 167, 44, 0.18), rgba(224, 192, 80, 0.14));
 
 	--notes-bg:      light-dark(#ffffdd, #33331a);
 	--notes-border:  light-dark(#eeee99, #55551f);
@@ -736,6 +739,34 @@ div#cgit table.blob td.linenumbers a:target:before {
 	content: "\2BA9";
 }
 
+/* Land a fragment-targeted line mid-viewport rather than at the top. */
+div#cgit table.blob td.linenumbers a,
+div#cgit table.blame td.linenumbers a {
+	scroll-margin-top: calc(50vh - 1em);
+}
+
+/* No-JS fallback tints the targeted number itself; cgit.js widens the
+ * highlight into the full-width bar below. */
+div#cgit table.blob td.linenumbers a:target,
+div#cgit table.blame td.linenumbers a:target {
+	background: var(--line-hl);
+	color: var(--fg);
+}
+
+/* Anchor box for the highlight bar cgit.js positions over the target. */
+div#cgit table.blob,
+div#cgit table.blame {
+	position: relative;
+}
+
+div#cgit div.line-hl {
+	position: absolute;
+	left: 0;
+	right: 0;
+	background: var(--line-hl);
+	pointer-events: none;
+}
+
 /* Tokens produced by the syntax-highlight.lua source filter. */
 div#cgit .hl-comment { color: light-dark(#6a737d, #8b949e); font-style: italic; }
 div#cgit .hl-keyword { color: light-dark(#cf222e, #ff7b72); }