mirror of
https://github.com/discourse/discourse.git
synced 2026-08-09 21:45:25 +08:00
ea6ffc4852Nested footnotes do not work, but still render as if they do. This commit strips out any nested footnotes, and pretends they aren't there. | Then | Now | |--------|--------| | <img width="437" height="106" alt="CleanShot 2026-07-01 at 11 39 03" src="https://github.com/user-attachments/assets/1bb915c4-d63d-438f-a51b-a5e246be3dcf" /> | <img width="325" height="103" alt="CleanShot 2026-07-01 at 14 49 20" src="https://github.com/user-attachments/assets/b74594ab-84dc-437c-bea5-089aa72178e0" /> | Also deleted old CSS to hide the `footnote-backref `, since these are no longer rendered in the inline-footnote at all. --------- Co-authored-by: David Taylor <david@taylorhq.com>
109 lines
2.3 KiB
SCSS
Vendored
109 lines
2.3 KiB
SCSS
Vendored
.inline-footnotes {
|
|
counter-reset: inline-footnote;
|
|
|
|
a.expand-footnote {
|
|
user-select: none;
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
padding: 0 0.125em;
|
|
display: inline-block;
|
|
content: "[" counter(inline-footnote) "]";
|
|
vertical-align: super;
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
counter-increment: inline-footnote;
|
|
}
|
|
}
|
|
|
|
.inline-footnote {
|
|
display: inline-block;
|
|
}
|
|
|
|
// This is hack to work with lazy-loading, we will trick the browser
|
|
// to believe the image is in the DOM and can be loaded
|
|
.footnotes-list,
|
|
.footnotes-sep {
|
|
position: absolute;
|
|
|
|
// the left/right positioning prevents overflow issues
|
|
// with long words causing overflow on small screens
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.footnotes-sep,
|
|
.footnotes-list,
|
|
.footnote-ref {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.fk-d-tooltip__content[data-identifier="inline-footnote"] {
|
|
overflow-wrap: break-word;
|
|
font-size: var(--font-down-1);
|
|
|
|
.fk-d-tooltip__inner-content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
img {
|
|
object-fit: cover;
|
|
max-width: 100%;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.ProseMirror {
|
|
counter-reset: prosemirror-footnote;
|
|
|
|
.footnote {
|
|
display: inline-block;
|
|
|
|
&::after {
|
|
padding: 0 0.125em;
|
|
display: inline-block;
|
|
content: "[" counter(prosemirror-footnote) "]";
|
|
vertical-align: super;
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
counter-increment: prosemirror-footnote;
|
|
}
|
|
}
|
|
|
|
.footnote-tooltip {
|
|
cursor: auto;
|
|
|
|
// Position is fixed to be relative to the .ProseMirror editor
|
|
// See https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block#identifying_the_containing_block
|
|
position: fixed;
|
|
max-height: 40%;
|
|
overflow: auto;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0.5rem;
|
|
padding-top: 0.5rem;
|
|
background-color: var(--primary-50);
|
|
border-radius: var(--d-border-radius);
|
|
z-index: z("modal", "tooltip");
|
|
|
|
&:focus-within {
|
|
outline: 1px solid var(--content-border-color);
|
|
}
|
|
|
|
&::before {
|
|
top: 0.1rem;
|
|
left: 0.25rem;
|
|
position: absolute;
|
|
content: "[" var(--footnote-counter) "]:";
|
|
font-size: 0.75rem;
|
|
color: var(--primary-low-mid);
|
|
}
|
|
}
|
|
}
|
