mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
7ebbdd942d
Previously, the typing notifications used to appear between the message list and the mark as read banner in a thread. This would cause the banner to shift down whenever someone starts typing, and shift back up if everyone stops typing. This frequent bouncing of the banner could be distracting, and hence, is fixed by moving the typing notifications to below the mark as read banner.
108 lines
2.8 KiB
CSS
108 lines
2.8 KiB
CSS
@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;
|
|
}
|
|
}
|