line links in s

This commit is contained in:
Mateusz Gruszczyński
2026-08-07 10:30:11 +02:00
parent 249e5a4fcd
commit d4e64f4e50
5 changed files with 40 additions and 14 deletions
+35 -12
View File
@@ -7350,6 +7350,19 @@ dialog::backdrop {
scroll-margin-top: 88px;
}
/*
* Line linking is opt-in on published notes. When regular line numbers are
* hidden, enabling links restores the same gutter so link targets stay inside
* the document instead of protruding past its left edge.
*/
.public-page .public-content {
transition: padding-left .18s ease;
}
.public-page.hide-preview-line-numbers.line-links-enabled .public-content {
padding-left: clamp(24px, 4vw, 52px);
}
/*
* The permalink occupies the same gutter slot as the regular source number.
* It stays invisible until the row is approached, then behaves like the
@@ -7360,7 +7373,7 @@ dialog::backdrop {
top: 0;
left: var(--preview-line-left, -50px);
z-index: 3;
display: block;
display: none;
width: 32px;
height: 1.32em;
padding: 0 2px 0 0;
@@ -7378,30 +7391,34 @@ dialog::backdrop {
transition: opacity .14s ease, transform .14s ease, background-color .14s ease, color .14s ease;
}
.public-content .preview-source-line::before {
.public-page.line-links-enabled .public-content .public-permalink {
display: block;
}
.public-page.line-links-enabled .public-content .preview-source-line::before {
transition: opacity .1s ease;
}
.public-content .preview-source-line:hover::before,
.public-content .preview-source-line:focus-within::before {
.public-page.line-links-enabled .public-content .preview-source-line:hover::before,
.public-page.line-links-enabled .public-content .preview-source-line:focus-within::before {
opacity: 0;
}
.public-content .preview-source-line:hover > .public-permalink,
.public-content .preview-source-line:focus-within > .public-permalink,
.public-content .public-permalink:focus-visible {
.public-page.line-links-enabled .public-content .preview-source-line:hover > .public-permalink,
.public-page.line-links-enabled .public-content .preview-source-line:focus-within > .public-permalink,
.public-page.line-links-enabled .public-content .public-permalink:focus-visible {
opacity: 1;
transform: translateX(0);
}
.public-content .public-permalink:hover,
.public-content .public-permalink:focus-visible {
.public-page.line-links-enabled .public-content .public-permalink:hover,
.public-page.line-links-enabled .public-content .public-permalink:focus-visible {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--text);
outline: none;
}
.public-content .public-permalink.is-copied {
.public-page.line-links-enabled .public-content .public-permalink.is-copied {
background: color-mix(in srgb, var(--success) 18%, transparent);
color: var(--text);
opacity: 1;
@@ -7415,16 +7432,22 @@ dialog::backdrop {
}
@media (hover: none), (pointer: coarse) {
.public-content .public-permalink {
.public-page.line-links-enabled .public-content .public-permalink {
opacity: .62;
transform: none;
}
.public-content .preview-source-line::before {
.public-page.line-links-enabled .public-content .preview-source-line::before {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.public-page .public-content {
transition: none;
}
}
/* Per-user, per-note navigation-bar focus mode ---------------------------- */
.pad-page .navbar-collapse-toggle {
position: fixed;