web/styles/rendered_markdown.css - main - githubmirror/zulip

web/styles/rendered_markdown.css
1 156 строк35 KB
faithlee
highlight: Fix color contrast and theming in dark mode.
21 июл 2026, 08:03
21 июл 2026, 08:035d26507
/* We have Unicode list-style-type values below.  @charset is a
   special directive which webpack will relocate to the first bytes of
   the generated output bundle, so browsers decode the bytes correctly. */
@charset "UTF-8";

/* We use a custom counter here for Safari to
   get better control of its counter positioning.
   Because Safari does not recognize `content`
   properties on `::marker`, the style here better
   approximates the same styles set on `::marker`
   below. */
@counter-style numbers {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: ".";
}

.rendered_markdown {
    & p {
        margin: 0 0 var(--markdown-interelement-space-px);

        &:has(+ ul, + ol) {
            /* When a paragraph is immediately followed
               by a list sibling, we reduce the paragraph's
               ordinary bottom space by half. */
            margin-bottom: calc(var(--markdown-interelement-space-px) / 2);
        }
    }

    /* The spacing between two paragraphs is double the usual value.
       We coordinate this spacing matches so that it matches the
       spacing between paragraphs in two consecutive 1-line messages. */
    & p + p {
        margin-top: var(--markdown-interelement-doubled-space-px);
    }

    & ul {
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        /* Because browsers use inline padding, we set the
           same property here to offset bullets. */
        padding-inline-start: 1.1ch;
        /* By setting Unicode characters of our own, we
           gain better, cross-browser alignment of bullets. */
        list-style-type: "•";

        & ul {
            list-style-type: "◦";

            & ul {
                list-style-type: "▪︎";
            }
        }

        & > li {
            /* This aligns bullets to roughly the
               center of a single-digit counter.
               11.2px at 16px/1em */
            padding-inline-start: 0.7em;
        }

        & > li::marker {
            /* This is an eyeballed value, but it makes the
               otherwise diminutive markers specified above
               both larger *and* better vertically centered. */
            font-size: 1.3em;
            /* We do not want the line-height for the item text
               affected by the larger font-size, though. So we
               zero it out. */
            line-height: 0;
        }
    }

    & ol {
        /* For the sake of Safari, we reference the `numbers`
           counter defined on `@counter-style` above. */
        list-style: numbers;
        /* To preserve the `start` attribute on lists that
           begin with a number other than 1, we update the
           `counter-reset` in postprocess_content.ts. */
        counter-reset: count;
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        /* Because browsers use inline padding, we set the
           same here to offset the counters. */
        padding-inline-start: 2.1ch;

        & > li {
            counter-increment: count 1;
            /* 3.2px at 16px/1em */
            padding-inline-start: 0.2em;
        }

        & > li::marker {
            content: counter(count, decimal) ". ";
        }
    }

    /* To avoid cutting off the focus ring on links, we set
       padding on first children most likely to take links.
       We account for this extra space on `.message_content`. */
    & > p:first-child,
    & > ul:first-child,
    & > ol:first-child {
        padding-top: var(--message-box-link-focus-ring-block-padding);
    }

    /* We set margin according to the length of the longest list counter.
       The values here keep the counters flush left, just like paragraph
       text. */
    .counter-length-1 {
        padding-inline-start: 2.1ch;
    }

    .counter-length-2 {
        padding-inline-start: 3.1ch;
    }

    .counter-length-3 {
        padding-inline-start: 4.1ch;
    }

    .counter-length-4 {
        padding-inline-start: 5.1ch;
    }

    .counter-length-5 {
        padding-inline-start: 6.1ch;
    }

    .counter-length-6 {
        padding-inline-start: 7.1ch;
    }

    & hr {
        border-bottom: 1px solid hsl(0deg 0% 87%);
        border-top: 1px solid hsl(0deg 0% 87%);
        /* Override Bootstrap with doubled interelement space */
        margin: calc(var(--markdown-interelement-space-px) * 2) 0;
    }

    /* Headings */
    & h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600;
        line-height: 1.4;
        /* Headings take a margin-top because of the pronounced extra
           space they require, but are zeroed out below when they open
           a message. */
        margin-top: 15px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

    /* Headings: Ensure that messages that start with a heading don't have
       a weirdly blank area at the very start of the message. */
    & h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child,
    h6:first-child {
        margin-top: 0;
    }

    /* We use a modest progression of heading sizes to make them stand out
       from normal next but avoid taking up too much space. */
    & h1 {
        font-size: 1.4em;
    }

    & h2 {
        font-size: 1.3em;
    }

    & h3 {
        font-size: 1.2em;
    }

    & h4 {
        font-size: 1.1em;
    }

    & h5 {
        font-size: 1.05em;
    }

    & h6 {
        font-size: 1em;
    }

    /* Formatting for blockquotes */
    & blockquote {
        /* This keeps the blockquote text block
           aligned with list-item text blocks.
           12.4px at 16px/1em */
        padding: 0;
        padding-inline-start: 0.775em;
    }

    & blockquote,
    .message_embed {
        /* We want to keep the border roughly centered
           with bullets and single-digit list markers.
           3.5px at 16px/1em */
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        margin-inline-start: 0.2188em;
        border-inline-start: 4px solid
            var(--color-text-message-blockquote-border);
    }

    /* Formatting for Markdown tables */
    & table {
        padding-right: 10px;
        margin: 0 5px var(--markdown-interelement-space-px);
        max-width: fit-content;
        /* The `display: block` property is critical, given the
           current markup, to allowing oversize tables to scroll.
           It's possible that in the future we'll want to wrap
           a `<div>` element around tables and allow it to handle
           overscroll, allowing the table to take its normal
           `display: table` property. */
        display: block;
        overflow-x: auto;
        /* Firefox's devtools will report that this property has
           no effect because of `display: block`, but that is
           incorrect. Without this, cells separate in ways we
           do not want. */
        border-collapse: collapse;
    }

    & thead {
        background-color: var(--color-background-rendered-markdown-thead);
    }

    & tr {
        display: table-row;
        vertical-align: top;
    }

    & tr th {
        border: 1px solid var(--color-border-rendered-markdown-table);
        padding: 4px;
        text-align: left;
    }

    & tr td {
        border: 1px solid var(--color-border-rendered-markdown-table);
        padding: 4px;
    }

    /* Emoji; sized to be easily understood while not overwhelming text. */
    .emoji {
        /* The box for emoji is allowed to be larger than the size of the
           line-height. */
        height: var(--length-line-oversize-block);
        width: var(--length-line-oversize-block);
        /* A negative top and bottom margin adjustment allows emoji
           to size larger than the size of the line, without disturbing
           the surrounding lines of text. */
        margin: var(--length-line-oversize-block-margin-adjust) auto;
        /* We set the alignment programmatically, as an em value.
           Because the negative margins above are equal, top and bottom,
           this vertical offset value works without adjustment for
           oversize emoji blocks. */
        vertical-align: var(--line-fitted-vertical-align-offset-em);
    }

    /* We double the size of emoji on emoji-only messages. As there
       is by definition no adjacent text in these messages, there is
       no need to adjust the `margin` or `vertical-align` properties
       declared above. */
    .emoji-only .emoji {
        height: calc(var(--length-line-oversize-block) * 2);
        width: calc(var(--length-line-oversize-block) * 2);
    }

    /* Mentions and alert words */
    .user-group-mention,
    .user-mention,
    .topic-mention {
        padding: 0 3px;
        border-radius: 3px;
        white-space: nowrap;
        /* Reduce the font-size to reduce the
           footprint of the background highlight. */
        font-size: 0.95em;
    }

    .mention-content-wrapper {
        /* Restore the font-size to match the rest
           of the message area. */
        font-size: 1.0526em;
    }

    .user-mention {
        color: var(--color-text-other-mention);
        background-color: var(--color-background-text-direct-mention);

        &.user-mention-me {
            color: var(--color-text-self-direct-mention);
            font-weight: 600;
        }

        &:hover {
            background-color: var(--color-background-text-hover-direct-mention);
        }
    }

    .user-mention,
    .user-group-mention {
        /* We have to explicitly mention this for compose box preview
           where cursor is set to not-allowed */
        cursor: pointer;
    }

    /* We show the same cursor as the parent element for `@all`
       mention */
    .user-mention-all {
        cursor: inherit;
    }

    .user-mention[data-user-id="*"],
    .user-group-mention,
    .topic-mention {
        color: var(--color-text-other-mention);
        background-color: var(--color-background-text-group-mention);

        &.user-mention-me {
            color: var(--color-text-self-group-mention);
            font-weight: 600;
        }
    }

    .stream-topic {
        /* Display whitespace within channel and topic names. */
        .stream-topic-inner,
        .decorated-channel-name {
            white-space: pre;
        }
    }

    .user-group-mention {
        &:hover {
            background-color: var(--color-background-text-hover-group-mention);
        }
    }

    .alert-word {
        background-color: var(--color-background-alert-word);
        color: var(--color-text-alert-word);
    }

    /* Timestamps */
    & time {
        background: hsl(0deg 0% 93%);
        border-radius: 3px;
        box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
        white-space: nowrap;
        margin: 0 2px;
        /* Reduce the font-size to reduce the
           footprint of the timestamp block. */
        font-size: 0.95em;

        .timestamp-content-wrapper {
            /* Restore the font-size to match the rest
               of the message area, and apply the layout
               for the icon. */
            font-size: 1.0526em;
            padding: 0 0.2em;
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
        }

        .markdown-timestamp-icon {
            align-self: center;
        }
    }

    /* LaTeX styling */
    .katex-display {
        /* KaTeX sometimes overdraws its bounding box by a little, so we
           enlarge its scrolling area by adding 3px of padding to its top
           and bottom. To prevent what will appear as extra whitespace,
           we reduce surrounding margins by the same 3px. */
        padding: 3px 0;
        margin: -3px 0;
        overflow: auto hidden;
    }

    .katex-mathml annotation {
        /* Because annotations are never displayable, browser user-agent
           stylesheets mark them as not displayable, which has the
           side effect of having them not be included in the HTML
           version of copying the content. Override this, so KaTeX can
           be copy/pasted within Zulip. */
        user-select: all;
        display: inline;
    }

    .tex-error {
        color: hsl(0deg 0% 50%);
    }

    /* Spoiler styling */
    .spoiler-block {
        border: hsl(0deg 0% 50%) 1px solid;
        padding: 2px 8px 2px 10px;
        border-radius: 10px;
        /* Space any subsequent Markdown content the same
           distance as adjacent paragraphs are spaced. */
        margin: 0 0 var(--markdown-interelement-doubled-space-px);

        .spoiler-header {
            /* We use flexbox to display the spoiler message
               and button. */
            display: flex;
            align-items: center;
            padding: 8px 5px;
            font-weight: bold;

            .spoiler-header-text {
                /* Disallow margin from ordinary rendered-markdown
                   elements. The header's vertical space is handled
                   independently by padding on .spoiler-header. */
                margin-bottom: 0;
                /* Message grows to push the arrow to the right,
                   but shrinks so as to allow long multi-line
                   spoiler messages to wrap. */
                flex: 1 1 auto;
            }

            time {
                /* Time tag pushes the arrow out of view when overflow,
                   adding white-space property prevents this by wrapping
                   the element */
                white-space: normal;
            }
        }

        .spoiler-content {
            overflow: hidden;
            border-top: hsl(0deg 0% 50%) 0 solid;
            transition:
                /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                height 0.4s ease-in-out,
                border-top 0.4s step-end,
                padding 0.4s step-end; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
            padding: 0;
            height: 0;

            &.spoiler-content-open {
                border-top: hsl(0deg 0% 50%) 1px solid;
                transition:
                    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                    height 0.4s ease-in-out,
                    border-top 0.4s step-start,
                    padding 0.4s step-start; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
                padding: 5px;
                height: auto;
            }
        }

        .spoiler-button {
            /* Keep the button to a consistent right-hand edge. */
            padding-right: 3px;

            &:hover .spoiler-arrow {
                &::before,
                &::after {
                    background-color: hsl(0deg 0% 50%);
                }
            }
        }

        .spoiler-arrow {
            float: right;
            width: 15px;
            cursor: pointer;
            transition: transform 0.4s ease;
            transform: rotate(45deg);

            &::before,
            &::after {
                position: absolute;
                content: "";
                display: inline-block;
                width: 12px;
                height: 3px;
                background-color: hsl(0deg 0% 83%);
                transition: transform 0.4s ease;
            }

            &::after {
                position: absolute;
                transform: rotate(90deg);
                top: -5px;
                left: 5px;
            }

            &.spoiler-button-open {
                transform: rotate(45deg) translate(-5px, -5px);

                &::before {
                    transform: translate(10px, 0);
                }

                &::after {
                    transform: rotate(90deg) translate(10px, 0);
                }
            }
        }
    }

    /* embedded link previews */
    .message-thumbnail-gallery {
        display: flex;
        flex-flow: row wrap;
        place-items: center center;
        gap: 5px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

    /* When a gallery appears inside a paragraph, we equalize
       the space above and below the gallery. Thanks to margin
       collapsing, this value will have no effect when a gallery
       is the last element in a paragraph. */
    p .message-thumbnail-gallery {
        margin: var(--markdown-interelement-halved-space-px) 0;
    }

    /* We used to use this for certain dropbox previews, we are keeping
       this around as to not break any previous instances of these
       previews. */
    .message_inline_image_title {
        font-weight: bold;
    }

    .message-media-inline-image:not(.message-media-gallery-image) {
        margin: 0 0.125em; /* 2px at 16px/1em */

        &:has(.image-opens-message) {
            /* When a message opens with an inline image, don't
               present any margin before the image starts (e.g.,
               to the left in LTR languages). */
            margin-inline-start: 0;
        }

        .media-anchor-element {
            /* We want the image to behave as inline, which the
               .message-media-inline-image will ensure, but in
               order to keep inline images from touching each
               other when they flow over separate lines, we
               introduce top/bottom margins of 3px--a value
               derived from the border around legacy images and
               images presented in galleries. */
            display: inline-block;
            margin: 3px 0;
        }
    }

    .twitter-image,
    .message-media-gallery-image,
    .message-media-preview-image,
    .message-media-preview-video {
        /* Set a background for the image; the background will be visible
           behind the width of the transparent border. */
        border: solid 3px transparent;
        transition: background 0.3s ease;
        background: var(--color-background-image-thumbnail);

        &:hover {
            background: var(--color-background-image-thumbnail-hover);
        }

        & .media-anchor-element {
            display: block;
        }

        & .media-image-element {
            display: block;
            object-fit: scale-down;

            /* Sizing CSS for inline images requires care, because images load
               asynchronously, and browsers will unfortunately jump your
               scroll position when elements load above the current
               position in the message feed in a way that changes the
               height of elements. (As of March 2022, both Firefox and
               Chrome exhibit this problem, though in Chrome it is pretty
               subtle).

               We prevent this by utilizing dimensions on the `<img>` elements,
               but further care is needed because different layout mechanisms,
               including inline-block, can ignore those dimensions. For that
               reason, we enforce a minimum 4em square for "dinky" images,
               and set the scaled-down width on all others via JavaScript.

               If there are several images next to each other, we display
               them in a grid format; the same considerations require
               use to either use a scrollable region or set a predictable
               size for images so that the browser statically knows whether
               it'll need to overflow. We choose predictable sizes here. */

            /* Ensure a reasonable clickable area on
               extremely tall or extremely wide images. */
            min-width: 4em;
            min-height: 4em;

            /* Constrain height based on the organization's
               media preview size setting, but otherwise keep
               the width to the size of the gallery, and
               therefore the message area. */
            max-height: var(--media-preview-max-height);
            max-width: 100%;

            /* Allow height and width to grow as needed, though
               note we set the scaled-down `width` property on
               each image in JavaScript to keep flexbox from
               collapsing to the min-height and min-width values
               set above... */
            width: auto;
            height: auto;
        }

        img.image-loading-placeholder {
            content: var(--svg-url-thumbnail-loader);
        }
    }

    .inline-image {
        display: inline;
    }

    .twitter-tweet {
        border: 1px solid hsl(0deg 0% 87%);
        padding: 0.5em 0.75em;
        margin-bottom: 0.25em;
        overflow-wrap: anywhere;
        min-height: 48px;
    }

    .twitter-avatar {
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 0.75em;
    }

    /* We used to use this for certain dropbox previews, we are keeping
       this around as to not break any previous instances of these
       previews. */
    .message_inline_ref {
        margin-bottom: var(--markdown-interelement-space-px);
        margin-inline-start: 5px;
        height: 50px;
        display: block !important;
        border: none !important;
    }

    .media-image-element {
        cursor: zoom-in;
    }

    .youtube-video .media-image-element,
    .vimeo-video .media-image-element,
    .embed-video .media-image-element {
        cursor: pointer;
    }

    .youtube-video .media-image-element {
        /* We do this for the sake of increasing
           the size of older YouTube thumbnail
           previews, but there are no ill effects
           on newer preview images. */
        object-fit: contain;
    }

    .message_inline_video,
    .message_inline_animated_image_still,
    .youtube-video .media-anchor-element {
        /* 32px at 14px/1em */
        --play-button-length: 2.2857em;
        /* Once collections of thumbnails are set to render as
           flex items, this can be updated to use `display: grid`
           instead of `display: inline-grid`. */
        display: inline-grid;
        grid-template: "media" minmax(0, auto) / minmax(0, auto);
        place-items: center center;

        &:hover {
            &::after {
                transform: scale(1);
            }
        }

        /* The .media-anchor-selector is for all media
           except YouTube, which needs to place
           .media-image-element on the grid. */
        & .media-anchor-element,
        & .media-image-element {
            grid-area: media;
        }

        &::after {
            grid-area: media;
            content: "";
            background-image: url("../images/play_button.svg");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: var(--play-button-length);
            /* Match the box to the play button's
               background-size value. */
            width: var(--play-button-length);
            height: var(--play-button-length);
            border-radius: 100%;
            transform: scale(0.8);
            transition: transform 0.2s;
        }

        & .media-video-element {
            display: block;
            object-fit: contain;
            /* Since we do not yet read height and width
               values for media thumbnails, we carry forward
               reasonable dimensions for a landscape thumbnail
               here, scaling with the image thumbnail size setting. */
            height: var(--media-preview-max-height);
            width: calc(var(--media-preview-max-height) * 1.5);
        }
    }

    /* For the sake of ultra-narrow or ultra-wide
       animated stills, we want to keep the image
       area at least as wide and tall as the play
       button. */
    .message_inline_animated_image_still {
        min-width: var(--play-button-length);
        min-height: var(--play-button-length);
    }

    /* We add an .animated-preview-hover class to hide
       the play button and zero its width so the button
       itself cannot be hovered. Users can still
       click anywhere on the image to open it in the
       lightbox. */
    .message_inline_animated_image_still.animated-preview-hover::after {
        background-image: none;
        width: 0;
    }

    .message_inline_video.video-format-unsupported {
        display: none;
    }

    .youtube-video .media-anchor-element {
        /* We display the youtube-video anchor
           as a grid, not inline grid, to avoid
           additional space beneath the thumbnail. */
        display: grid;
    }

    .media-audio-wrapper {
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
        max-width: 100%;
    }

    .media-audio-element {
        flex: 0 1 auto;
        /* Allow browser-native media players
           to resize in narrow viewports. */
        max-width: calc(100% - 30px);
    }

    .media-audio-download {
        flex: 0 0 20px;
        margin-left: 5px;
        display: flex;
        place-content: center center;

        &:hover {
            text-decoration: none;
        }
    }

    .message_embed {
        display: grid;
        grid-template-columns:
            [thumbnail-start] var(--length-message-preview-embeds)
            [thumbnail-end fader-start data-container-start] minmax(0, 1fr)
            [data-container-end fader-end];
        grid-template-rows:
            [border-start thumbnail-start data-container-start] calc(
                var(--length-message-preview-embeds) - 10%
            )
            [fader-start] 10% [data-container-end thumbnail-end border-end fader-end];
        column-gap: 5px;
        /* We want to control the height without worrying about
           padding... */
        box-sizing: border-box;
        /* ...though we will account for 10px of padding in the
           height itself, so that the fade effect on long description
           text works as expected. */
        height: calc(var(--length-message-preview-embeds) + 10px);
        padding: 5px;

        .message_embed_title {
            font-size: 1.2em;
            /* 5px at 16.8px (1.2 * 14px) */
            margin-top: -0.2976em;
            /* We set the markdown link colors here so
               that the ellipsis takes it on truncated
               lines. The ellipsis will not take an
               underline even if we specify one, so
               that is deliberately omitted here. */
            color: var(--color-markdown-link);

            &:hover {
                color: var(--color-markdown-link-hover);
            }

            .message-embed-title-link {
                /* Line-clamp lines seem to have a small
                   interline area that's not clickable
                   unless we set the anchor to display as
                   a block. */
                display: block;
            }
        }

        .message_embed_title,
        .message_embed_description {
            /* Clamp multi-line titles and descriptions
               to two lines. */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            /* Break overflowing words as necessary. */
            overflow-wrap: break-word;
        }

        .message_embed_image {
            display: block;
            grid-area: thumbnail;
            /* Keep the embed image square. */
            max-height: var(--length-message-preview-embeds);
            background-size: cover;
            background-position: center;
        }

        .data-container {
            grid-area: data-container;
        }
    }

    & a:not(.icon-button) {
        color: var(--color-markdown-link);
        text-decoration: none;

        & code {
            color: var(--color-markdown-code-link);
        }

        &:hover,
        &:focus {
            color: var(--color-markdown-link-hover);
            text-decoration: underline;

            & code {
                color: var(--color-markdown-code-link-hover);
            }
        }

        /* Link styles that are also related to alert words */
        &:has(.alert-word) {
            &:hover,
            &:focus {
                text-decoration-color: var(
                    --color-markdown-link-alert-word-hover
                );
            }
        }

        & .alert-word {
            color: var(--color-markdown-link-alert-word);
            font-weight: 500;
        }

        &:hover .alert-word,
        &:focus .alert-word {
            color: var(--color-markdown-link-alert-word-hover);
        }
    }

    & pre {
        direction: ltr;
        /* code block text is a bit smaller than normal text */
        font-size: 0.825em;
        line-height: 1.4;
        white-space: pre;
        overflow-x: auto;
        word-break: break-all;
        overflow-wrap: normal;
        margin: 0 0 var(--markdown-interelement-space-px);
        padding: 5px 7px 3px;
        display: block;
        border-radius: 4px;

        &:hover .code-buttons-container {
            visibility: visible;
        }

        /* Hide the code buttons container when the user is
           clicking on the code block other than the buttons.
           This allows the user to select part of the the code
           without the buttons interfering with the selection. */
        &:active .code-buttons-container:not(:hover) {
            visibility: hidden;
        }
    }

    & pre code {
        font-size: inherit;
        padding: 0;
        white-space: inherit;
        overflow-x: scroll;
        /* Unset to avoid compounding alpha values */
        background-color: unset;
        color: inherit;
        border: 0;
    }

    & code {
        /* 11.55px when body is the default 14px; this is chosen to be
        slightly above the 11.5px threshold where the height jumps by a
        pixel on most platforms. */
        font-size: 0.825em;
        unicode-bidi: embed;
        direction: ltr;
        white-space: pre-wrap;
        /* 1px at 14px/1em */
        padding: 0.0714em 2px;
        color: var(--color-markdown-code-text);
        background-color: var(--color-markdown-code-background);
        border-radius: 3px;
    }

    /* Container for buttons inside code blocks. */
    .code-buttons-container {
        /* Break white-space treatment inherited from <pre> */
        white-space: collapse;
        /* Present buttons in a flexbox layout. */
        display: flex;
        align-items: center;
        gap: 3px;
        /* Having absolute positioning here ensures that the element
        doesn't scroll along with the code div in narrow windows */
        position: absolute;
        top: 4px;
        right: 0;
        padding: 0 4px;
        /* Invisible unless <pre> is hovered. */
        visibility: hidden;
        z-index: 0;
    }

    /* The properties of the code_external_link button are copied from the
       copy-button class in app_components.css. */
    .code_external_link {
        display: flex;
        border-radius: 4px;
        color: var(--color-copy-button);
        /* 2px at 16px/1em */
        padding: 0.125em;
        cursor: pointer;

        &:hover,
        :focus-visible {
            background-color: var(--color-copy-button-square-bg-hover);
        }

        &:active {
            background-color: var(--color-copy-button-square-bg-active);
            color: var(--color-copy-button-square-active);
        }
    }

    .copy_codeblock,
    .code_external_link {
        font-size: 1.1363em;
        border: 1px solid var(--color-copy-button-square-bg-active);
        backdrop-filter: blur(20px);
    }
}

.group_mention,
.direct_mention {
    & .rendered_markdown pre {
        background-color: var(--color-markdown-pre-background-mentions);
        border-color: var(--color-markdown-pre-border-mentions);
    }

    & .rendered_markdown code {
        background-color: var(--color-markdown-code-background-mentions);
    }

    & .rendered_markdown pre code {
        background-color: unset;
        border-color: unset;
    }
}

.preview_content .copy_codeblock {
    /* We avoid displaying copy_codeblock button in previews, because it
       feels odd given that you can just copy-paste the code out of
       the "edit" state.  We may change this decision when we add
       menu options for viewing the code in a coding playground. */
    display: none;
}

.informational-overlays .copy_codeblock {
    display: none;
}

.message_edit_history_content .copy_codeblock {
    /*  Copy code block button is hidden in edit history, this is done
        because of issues faced in copying code blocks in edit history
        modal. This may be changed later as we decide upon a proper ux
        for displaying edit-history. */
    display: none;
}

.message_edit_history_content .code_external_link {
    right: 5px;
}

.preview_content .code_external_link {
    right: 12px;
}

@media (width < $sm_min) {
    .rendered_markdown .message_embed {
        height: auto;

        .message_embed_image {
            width: 100%;
            height: 100px;
        }

        .data-container {
            display: block;
            max-width: 100%;
            margin-top: 10px;
        }
    }
}

.codehilite {
    display: block !important;
    border: none !important;
    background: none !important;

    /* Set a relative positioning context to more precisely
       position .code-buttons-container. This eliminates
       problems with positioning shifts associated with
       code blocks in spoilers, too. */
    position: relative;

    & pre {
        color: var(--color-markdown-pre-text);
        /* This is necessary to remove the background color
           set by Pygments. */
        background-color: var(--color-markdown-pre-background);
        border: 1px solid var(--color-markdown-pre-border);
    }
}

/* Both the horizontal scrollbar in <pre/> as well as
   vertical scrollbar in the view source <textarea/> is styled similarly. */
.message_edit_form textarea:read-only,
.rendered_markdown pre {
    /* Ensure the horizontal scrollbar is visible on Mac */
    &::-webkit-scrollbar {
        height: 8px;
        width: 10px;
        background-color: hsl(0deg 0% 0% / 5%);
    }

    &::-webkit-scrollbar-thumb {
        background-color: hsl(0deg 0% 0% / 30%);
        border-radius: 20px;
        cursor: auto;
        transition: background-color 0.2s ease;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: hsl(0deg 0% 0% / 60%);
    }
}

/* Search highlight used in both topics and rendered_markdown */
.highlight {
    background-color: var(--color-background-search-highlight);
    color: var(--color-text-search-highlight);
}

/* Link styles that are also related to search highlights */
a:not(.icon-button) {
    &:has(.highlight) {
        &:hover,
        &:focus {
            text-decoration-color: var(--color-markdown-link-highlight-hover);
        }
    }

    & .highlight {
        color: var(--color-markdown-link-highlight);
        font-weight: 500;
    }

    &:hover .highlight,
    &:focus .highlight {
        color: var(--color-markdown-link-highlight-hover);
    }
}

/* For elements where we want to show as much markdown content we can
   in a single line and then hide the overflowing part. */
.single-line-rendered-markdown {
    /* Any element which can `wrap` in the above defined elements. */
    code,
    .stream-topic {
        white-space: nowrap;
    }
}

.user-mention {
    i.zulip-icon-bot {
        vertical-align: middle;
        position: relative;
        top: -1px;
        padding-left: 0.3em;
    }
}

/* This is required to align the time-example output in the "?" menu. */
#markdown-instructions p:has(time) {
    display: flex;
    align-items: center;
    margin: calc(var(--markdown-interelement-space-px) / 2) 0;
    padding: calc(var(--message-box-link-focus-ring-block-padding) / 2) 0;
}