mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-28 05:14:21 +08:00
4025dad5da
Fixes the footnote editor positioning inside list items by using a different approach than absolute/relative to anchor the footnote position to the ProsMirror editor: `contain: layout` with `position: fixed`: > If the position property is absolute or **fixed**, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has any of the following: > [...] > - A [contain](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/contain) value of **layout**, paint, strict or content (e.g., contain: paint;). Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Containing_block#identifying_the_containing_block ## Before <img width="754" height="305" alt="image" src="https://github.com/user-attachments/assets/34864dda-4bdc-47b5-976f-bfd5e05e4d8b" /> ## After <img width="756" height="311" alt="image" src="https://github.com/user-attachments/assets/2edad908-8e76-43b0-8862-280470efc6c5" />
113 lines
2.3 KiB
SCSS
Vendored
113 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;
|
|
}
|
|
|
|
.footnote-backref {
|
|
display: none;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
