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

web/styles/print.css
147 строк4 KB
Aman Agrawal
info_overlay: Add printing support for informational overlays.
17 июн 2026, 10:05
17 июн 2026, 10:054d5abda
/* The container used by info_overlay.print_current_pane() to print
   an informational overlay's full scrollable content. Hidden on
   screen; the @media print rules below display only it. This rule
   must precede them so that they win in the cascade. */
#zulip-print-container {
    display: none;
}

@media print {
    /* Hide unnecessary blocks. */
    #navbar_alerts_wrapper,
    #streamlist-toggle,
    #left-sidebar-container,
    #right-sidebar-container,
    .column-left,
    .top-messages-logo,
    #userlist-toggle,
    .message_length_controller,
    #loading_older_messages_indicator,
    #page_loading_indicator,
    #message_feed_errors_container,
    #bottom_whitespace,
    #mark_read_on_scroll_state_banner,
    #mark_read_on_scroll_state_banner_place_holder,
    .trailing_bookend,
    #compose {
        display: none;
    }

    /* Allow printer to set the margins, and
       prevent Safari from using screen-based ones. */
    .column-middle {
        margin: 0;
    }

    /* Prevent headers from running on every page. */
    #navbar-fixed-container,
    .message-feed .message_header {
        position: static;
    }

    /* Save a bit of paper by removing height, which
       otherwise creates a blank final page, and padding. */
    html,
    body {
        height: auto;
    }

    #message_feed_container {
        padding-top: 0;
    }

    /* Hide unnecessary controls, but leave them
       in the document flow. */
    .search_icon,
    #search_exit,
    .settings-dropdown-cog,
    .recipient_bar_controls {
        visibility: hidden;
    }

    /* Try to keep the message header with the messages
       that follow in interleaved views. */
    .message_header_stream {
        break-after: avoid;
    }

    /* Don't highlight the selected message. */
    .selected_message .messagebox-content {
        outline: 0;
    }

    .messagebox-content {
        .message_edit_notice,
        .message-time {
            /* Firefox seems to have a bug that fuzzes out
               small text with opacity; this unsets that
               value, and replaces with a matching gray. */
            opacity: unset;
            color: hsl(0deg 0% 0% / 48%);
        }
    }

    /* Show collapsed content for printing. Note that
       CSS Grid does not yet break very intelligently
       in all browsers, so longer messages may sometimes
       appear at the top of new pages. */
    .message_content.collapsed,
    .message_content.condensed {
        max-height: unset !important;
        min-height: unset !important;
        overflow: auto !important;
        height: auto !important;
        mask-image: none;
    }

    /* Print links in the same color as text, with any
       likely full URL values in parentheses. */
    .message_content a {
        color: inherit;

        &[href^="http"]::after {
            content: " (" attr(href) ")";
        }
    }

    /* Ensure that emoji print. They are background-images,
       which ordinarily do not print, so these properties
       should ensure proper printing of inline, status, and
       other emoji. */
    .emoji {
        color-adjust: exact;
        print-color-adjust: exact;
    }

    /* When a print container has been injected, print only it and
       hide the rest of the app UI. Use :not() to exclude the
       container itself, since the `display: none !important` here
       would otherwise beat the container's `display: block` below,
       regardless of selector specificity. */
    body:has(#zulip-print-container) > *:not(#zulip-print-container) {
        display: none !important;
    }

    #zulip-print-container {
        display: block;

        /* Print the pane with its on-screen colors. Dark theme is
           scoped to `@media screen` (see dark_theme.css), so these
           resolve to light-theme colors regardless of the user's
           theme. */
        color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep each row's keys and description together across a page
       break. This also avoids a Firefox bug where a row's borders
       disappear when it starts at the top of a new printed page. */
    #zulip-print-container tr {
        break-inside: avoid;
    }

    .zulip-print-title {
        font-size: 1.5714em; /* 22px at 14px/1em */
        margin: 0 0 12px;
    }
}