packages/muya/src/assets/styles/inlineSyntax.css - develop - githubmirror/marktext

packages/muya/src/assets/styles/inlineSyntax.css
614 строк13 KB
Ran Luo
fix(muya): follow the link on Ctrl/Cmd-click for reference-linked and raw-HTML linked images (#4865) (#4866)
05 июл 2026, 08:02
05 июл 2026, 08:0267848d7
.mu-gray {
    color: var(--editor-color-30);
    text-decoration: none;
}

.mu-hide,
.mu-hide .mu-highlight,
.mu-hide .mu-selection {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;

    vertical-align: middle;
}

/* Hide syntax markers as zero-size `inline` text, not `inline-block` — atomic
   boxes create a wrap opportunity that breaks punctuation after a link onto its
   own line (#2258 / #3025). `nowrap` stops the hidden URL's `/`,`.` from
   wrapping. Scoped to `.mu-remove` so math/ruby/emoji previews keep inline-block. */
.mu-hide.mu-remove,
.mu-hide.mu-remove .mu-highlight,
.mu-hide.mu-remove .mu-selection {
    display: inline;
    width: auto;
    height: auto;

    font-size: 0;
    white-space: nowrap;
}

/* link and auto-link and reference link */
a.mu-inline-rule,
span.mu-inline-rule.mu-link {
    color: var(--link-color, rgb(20 86 240));
}

/* Note: previously this rule also set `pointer-events: none` to suppress
   native navigation on `<a href>` clicks. That broke our hover-based
   linkTools popover detection because every mouse event hit-tested
   straight through to the editor container. Removed in PR-11b; the
   `editor/linkMouseEvents.ts` click handler calls `preventDefault()`
   on link clicks instead (standard contenteditable rich-text pattern). */

.mu-link-in-bracket {
    color: var(--editor-color-50);
}

/* strong and emphasis — default to `inherit` (the surrounding editor color)
   so the bundled light theme is unchanged; themes can recolor them. */
strong.mu-inline-rule {
    color: var(--strong-color, inherit);
}

em.mu-inline-rule {
    color: var(--em-color, inherit);
}

/* inline code */
code.mu-inline-rule {
    margin: 0;
    padding: 0.2em 0.4em;

    color: var(--editor-color);
    font-size: 0.8em;
    font-family: 'DejaVu Sans Mono', 'Source Code Pro', 'Droid Sans Mono', Consolas, monospace;

    background-color: var(--code-block-bg-color);
    border-radius: 3px;
}

/* emoji */
.mu-emoji-marked-text {
    position: relative;

    color: var(--editor-color-50);
}

.mu-emoji-marked-text[data-emoji] {
    margin-left: 1.1em;
}

.mu-hide.mu-emoji-marked-text[data-emoji],
.mu-hide.mu-html-escape[data-character] {
    overflow: visible;

    color: transparent;
    white-space: nowrap;
}

.mu-emoji-marked-text::before {
    position: absolute;
    top: 0;
    left: -1em;

    color: #000;
    font-size: 1em;

    content: attr(data-emoji);
}

.mu-hide.mu-emoji-marked-text::before {
    top: -0.8em;
}

.mu-warn.mu-emoji-marked-text {
    color: var(--delete-color);
    text-decoration: none;
}

/* html escape */
.mu-html-escape {
    position: relative;

    /* `inline` (overriding the `inline-block` inherited from `.mu-hide`, an
       atomic box the line breaks around) so an entity breaks like the character
       it represents — a `&nbsp;` glyph (U+00A0) is non-breaking; `nowrap` keeps
       the literal entity text together while editing. `baseline` overrides the
       `vertical-align: middle` from `.mu-hide` so the inline glyph sits on the
       text baseline like the character it represents. */
    display: inline;

    white-space: nowrap;
    vertical-align: baseline;
}

/* When the caret is outside the entity, take the literal marker text out of
   flow so the entity shows only its `::before` glyph, at the glyph's own width
   (no extra width from the hidden literal, no break opportunity). */
.mu-hide.mu-html-escape[data-character] .mu-html-escape-marker {
    position: absolute;

    visibility: hidden;
}

/* Render the glyph (`data-character`) inline at its natural width, so every
   entity is exactly as wide as the character it stands for: `&nbsp;` is one
   space, `&amp;` one ampersand, `&mdash;` one em dash — not a fixed 1em slot. */
.mu-html-escape::before {
    color: var(--editor-color);

    content: attr(data-character);
}

/* hard line break and soft line end */
.mu-line-end {
    display: block;
}

.mu-hard-line-break-space::after {
    font-family: monospace;

    opacity: 0.5;

    content: '↩';
}

/* ruby and inline math */
.mu-ruby {
    position: relative;

    vertical-align: bottom;
}

.mu-math {
    position: relative;

    display: inline-block;

    color: var(--editor-color);
    font-family: monospace;
    vertical-align: middle;
}

.mu-math > .mu-math-render,
.mu-ruby > .mu-ruby-render {
    position: absolute;
    top: calc(100% + 0.5em);
    left: 0;
    z-index: 1;

    display: inline-block;
    padding: 0.3em 0.5em;

    color: var(--editor-color);

    background: var(--float-bg-color);
    border-radius: 4px;
    box-shadow: var(--float-shadow);

    user-select: none;
}

/* A long inline-math formula must scroll horizontally (in the editing popup and
   inline when hidden) instead of overflowing the editor area. */
.mu-math > .mu-math-render {
    max-width: calc(var(--editor-area-width, 800px) - 100px);
    overflow: auto hidden;

    scrollbar-width: thin;
}

.mu-math > .mu-math-render::-webkit-scrollbar {
    display: block;
    width: 3px;
    height: 6px;
}

/* KaTeX gives every sub/superscript a 2px `.vlist-s` strut that
   `.vlist-t2 { margin-right: -2px }` cancels visually. The negative margin fixes
   layout width but not scrollWidth, so the `overflow: auto` above draws a
   spurious scrollbar under any short formula ending in a sub/superscript
   (#4837). Zero both to match the scroll extent to the visible width — net-zero
   visually; a genuinely long formula still overflows and stays scrollable. */
.mu-math > .mu-math-render .katex .vlist-s {
    width: 0;
    min-width: 0;
}

.mu-math > .mu-math-render .katex .vlist-t2 {
    margin-right: 0;
}

.mu-ruby > .mu-ruby-render {
    left: 50%;

    padding-bottom: 0;

    transform: translateX(-50%);
}

div .mu-math-error,
.mu-math > .mu-math-render.mu-math-error {
    color: var(--delete-color);
    font-size: 14px;
    font-family: monospace;
    font-style: italic;
}

/* Inline math shows a short error label: keep it on one line in the narrow
   popup, and let it overflow VISIBLE rather than be clipped — the default
   `overflow: auto` on .mu-math-render both clips the label and takes the
   inline-block's baseline from its bottom edge, lifting it off the text. */
.mu-math > .mu-math-render.mu-math-error {
    overflow: visible;

    white-space: nowrap;
}

/* Block math shows the full KaTeX parse-error message, which can be long; wrap
   it within the block instead of overflowing horizontally (#2220). */
.mu-math-preview .mu-math-error {
    white-space: normal;
    overflow-wrap: break-word;
}

.mu-math > .mu-math-render .katex-display {
    margin: 0;
}

/* Inline math */
.mu-math > .mu-math-render .katex {
    white-space: nowrap;
    vertical-align: middle;
}

.mu-hide.mu-ruby,
.mu-hide.mu-math {
    width: auto;
    height: auto;
}

.mu-hide.mu-ruby > .mu-ruby-text,
.mu-hide.mu-math > .mu-math-text {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

.mu-hide.mu-ruby > .mu-ruby-render,
.mu-hide.mu-math > .mu-math-render {
    position: relative;
    top: 0;

    padding: 0;

    color: var(--editor-color);

    background: transparent;
    border: none;
    box-shadow: none;

    user-select: auto;
}

.mu-ruby:not(.mu-hide) > .mu-ruby-render,
.mu-math:not(.mu-hide) > .mu-math-render {
    z-index: 100;

    box-shadow: var(--float-shadow);
}

.mu-ruby > .mu-ruby-render::before,
.mu-math > .mu-math-render::before {
    border-bottom-color: var(--float-bg-color);
}

.mu-gray.mu-ruby > .mu-ruby-render::before,
.mu-gray.mu-math > .mu-math-render::before {
    position: absolute;
    bottom: 100%;
    left: 50%;

    margin-left: -5px;

    border-color: transparent;
    border-style: solid;
    border-width: 5px;

    content: '';
}

.mu-hide.mu-ruby > .mu-ruby-render::before,
.mu-hide.mu-math > .mu-math-render::before {
    content: none;
}

blockquote .mu-hide.mu-ruby > .mu-ruby-render,
blockquote .mu-hide.mu-math > .mu-math-render {
    color: var(--editor-color-50);
}

/* header space */
.mu-header-tight-space {
    margin-left: -0.3em;
}

/* inline image and <img> image */
.mu-inline-image,
.mu-image-container {
    font-size: 0;
    line-height: 0;
}

.mu-inline-image {
    position: relative;

    display: inline-block;

    background: var(--code-block-bg-color);
    border-radius: 2px;
}

.mu-inline-image.left,
.mu-inline-image.center,
.mu-inline-image.right {
    display: block;
    margin: 30px auto 40px;
}

.mu-inline-image.left {
    text-align: left;
}

.mu-inline-image.right {
    text-align: right;
}

.mu-inline-image.center {
    text-align: center;
}

.mu-inline-image .mu-image-container {
    position: relative;

    display: inline-block;
    max-width: 100%;
    overflow: visible;
}

.mu-image-marked-text ~ img {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
}

.mu-inline-image .mu-image-container img {
    max-width: 100%;
}

.mu-inline-image.mu-image-success {
    background: transparent;
}

.mu-inline-image .mu-image-icon-success,
.mu-inline-image .mu-image-icon-fail,
.mu-inline-image .mu-image-icon-close {
    position: absolute;
    top: 15px;

    display: none;
    width: 20px;
    height: 20px;
}

.mu-inline-image .mu-image-icon-success,
.mu-inline-image .mu-image-icon-fail {
    left: 15px;
}

.mu-inline-image i.icon {
    position: relative;

    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;

    color: var(--icon-color);
}

.mu-inline-image i.icon > i[class^='icon-'] {
    position: absolute;
    left: -20px;

    display: inline-block;
    width: 100%;
    height: 100%;

    filter: drop-shadow(20px 0 currentcolor);
}

.mu-inline-image.mu-image-fail,
.mu-inline-image.mu-empty-image {
    width: 100%;
    height: 50px;

    cursor: pointer;
}

.mu-inline-image.mu-image-loading {
    width: 400px;
    height: 250px;
    margin: 0 auto;

    vertical-align: bottom;
}

.mu-inline-image.mu-image-fail::before,
.mu-inline-image.mu-empty-image::before {
    position: absolute;
    top: 15px;
    left: 50px;

    display: block;
    width: calc(100% - 50px);
    height: 20px;
    overflow: hidden;

    color: var(--editor-color);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
}

.mu-inline-image.mu-empty-image::before {
    font-weight: 600;

    content: attr(empty-text);
}

.mu-inline-image.mu-image-fail::before {
    font-weight: 600;

    content: attr(fail-text);
}

.mu-inline-image.mu-image-loading .mu-image-icon-success,
.mu-inline-image.mu-empty-image .mu-image-icon-success {
    display: block;
}

.mu-inline-image.mu-image-fail .mu-image-icon-fail {
    display: block;
}

.mu-inline-image.mu-empty-image:hover .mu-image-icon-close,
.mu-inline-image.mu-image-fail:hover .mu-image-icon-close {
    right: 15px;
    z-index: 1;

    display: block;
    align-items: center;
    justify-content: space-around;

    opacity: 0.5;
}

.mu-inline-image.mu-image-uploading .mu-image-container img {
    opacity: 0.3;
}

.mu-inline-image.mu-image-success.mu-inline-image-selected .mu-image-container img {
    filter: brightness(80%);
}

.mu-inline-image.mu-image-uploading .mu-image-container::before,
.mu-inline-image.mu-image-uploading .mu-image-container::after,
.mu-inline-image.mu-image-loading::before,
.mu-inline-image.mu-image-loading::after {
    position: absolute;
    top: calc(50% - 11px);
    left: calc(50% - 11px);

    display: block;
    width: 22px;
    height: 22px;

    border-radius: 50%;

    content: '';
}

.mu-inline-image.mu-image-uploading .mu-image-container::before,
.mu-inline-image.mu-image-loading::before {
    position: absolute;

    font-size: 10px;
    text-indent: -9999px;

    border-top: 2px solid var(--editor-color-10);
    border-right: 2px solid var(--editor-color-10);
    border-bottom: 2px solid var(--editor-color-10);
    border-left: 2px solid var(--icon-color);
    transform: translateZ(0);

    animation: loading 1.1s infinite linear;
}

.mu-image-marked-text {
    color: var(--editor-color-50);
    font-size: 1em;
    text-decoration: none;
    word-break: break-all;
}

.mu-image-marked-text::before {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 5px;

    vertical-align: sub;

    background: url('../icons/image_light.png');
    background-size: cover;

    content: '';
}

.mu-image-marked-text.mu-image-fail::before {
    background-image: url('../icons/image_light_fail.png');
    background-size: cover;
}

/* text after ``` in paragraph content */
.mu-language {
    color: var(--editor-color-50);
    font-weight: 600;
    font-family: monospace;
    text-decoration: none;
}

/* reference definition */
.mu-reference-marker {
    color: var(--editor-color-50);
    font-size: 0.9em;
}

.mu-reference-title {
    margin: 0 5px;

    font-size: 0.9em;
}

.mu-reference-label {
    margin: 0 5px;

    font-weight: 600;
}

/* inline footnote identifier — `[^id]` rendered as a small superscript pill.
   Marker spans (`[^` / `]`) inherit `.mu-hide` from the syntax renderer when
   the cursor isn't on this token, so the user sees just the identifier text
   inside the pill. */
.mu-inline-footnote-identifier {
    padding: 0 0.4em;

    color: var(--editor-color-80);
    font-size: 0.7em;

    background: var(--code-block-bg-color);
    border-radius: 3px;

    cursor: pointer;
}

.mu-inline-footnote-identifier a {
    color: var(--editor-color);
    text-decoration: none;
}