mirror of https://github.com/zulip/zulip.git
402 lines
13 KiB
CSS
402 lines
13 KiB
CSS
$avatar_column_width: 46px;
|
|
$distance_of_text_elements_from_message_box_top: 8.5px;
|
|
$distance_of_non_text_elements_from_message_box: 6px;
|
|
$message_box_margin: 3px;
|
|
|
|
/* The time column usually just needs enough space to display the
|
|
timestamp. The minimum width here is enough for "22:22 PM", which
|
|
is roughly the widest this will be in English; this is nice as the
|
|
timestamps and message controls will be vertically aligned.
|
|
|
|
But in some locales, the time encoding is wider, (especially where
|
|
the "PM" abbreviation is longer), so we allow the column to be
|
|
wider for individual messages if required, up to `max-content`, to
|
|
prevent ugly line-wrapping. In practice, it's unlikely we'll see
|
|
anything wider than 60px. */
|
|
$time_column_min_width: 50px; /* + padding */
|
|
|
|
.message_row {
|
|
display: grid;
|
|
grid-template: auto auto / 2px 1fr;
|
|
grid-template-areas:
|
|
"date_unread_marker date_row "
|
|
"message_unread_marker messagebox";
|
|
|
|
border-left: 1px solid var(--color-message-list-border);
|
|
border-right: 1px solid var(--color-message-list-border);
|
|
background-color: var(--color-background-stream-message-content);
|
|
|
|
&.direct_mention {
|
|
background-color: var(--color-background-direct-mention);
|
|
}
|
|
|
|
&.group_mention {
|
|
background-color: var(--color-background-group-mention);
|
|
}
|
|
|
|
.date_row {
|
|
grid-area: date_row;
|
|
/* We only want padding for the date rows between recipient blocks */
|
|
padding-bottom: 0;
|
|
|
|
& span {
|
|
font-size: calc(12em / 14);
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
line-height: 17px; /* identical to box height, or 131% */
|
|
text-align: right;
|
|
letter-spacing: 0.04em;
|
|
color: var(--color-date);
|
|
/* Right padding matches time in message row and date in recipient row. */
|
|
padding: 8px 6px 8px 4px;
|
|
}
|
|
}
|
|
|
|
.unread_marker {
|
|
margin-left: var(--unread-marker-left);
|
|
opacity: 0;
|
|
transition: all 0.3s ease-out;
|
|
|
|
&.slow_fade {
|
|
transition: all 2s ease-out;
|
|
}
|
|
|
|
&.fast_fade {
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
&.date_unread_marker {
|
|
grid-area: date_unread_marker;
|
|
|
|
.unread-marker-fill {
|
|
border-radius: 0 !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
|
|
&.message_unread_marker {
|
|
grid-area: message_unread_marker;
|
|
}
|
|
}
|
|
|
|
.unread-marker-fill {
|
|
height: 100%;
|
|
width: 2px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-unread-marker) 30%,
|
|
hsl(217deg 64% 59% / 0%)
|
|
);
|
|
}
|
|
|
|
&.unread .unread_marker {
|
|
transition: all 0.3s ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
.messagebox {
|
|
grid-area: messagebox;
|
|
word-wrap: break-word;
|
|
cursor: pointer;
|
|
border: none;
|
|
/* The left padding value accounts for a 2px
|
|
unread marker, ensuring a uniform 5px of
|
|
padding on either side of the message box. */
|
|
padding: 0 5px 0 3px;
|
|
|
|
&:hover .message_controls,
|
|
&:focus-within .message_controls,
|
|
&:hover .message_failed,
|
|
&:focus-within .message_failed {
|
|
.empty-star:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
> div {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.messagebox .messagebox-content {
|
|
display: grid;
|
|
align-items: baseline;
|
|
padding-left: 10px;
|
|
grid-template:
|
|
25px repeat(3, auto) /
|
|
$avatar_column_width auto 55px 3px minmax(
|
|
$time_column_min_width,
|
|
max-content
|
|
);
|
|
/* Named grid areas provide flexibility for positioning grid items
|
|
reliably, even if the row or column definitions of the grid change. */
|
|
grid-template-areas:
|
|
"edited message controls . time"
|
|
". message . . . "
|
|
". more . . . "
|
|
". reactions . . . ";
|
|
|
|
@media (width < $sm_min) {
|
|
grid-template-columns: $avatar_column_width auto max-content 3px minmax(
|
|
$time_column_min_width,
|
|
max-content
|
|
);
|
|
}
|
|
|
|
.message_controls {
|
|
grid-area: controls;
|
|
justify-self: end;
|
|
padding: 0;
|
|
|
|
@media (width < $sm_min) {
|
|
padding: 0 4px;
|
|
|
|
/* This is intended to target the first message_controls child
|
|
when there are 3 displayed. 4 = 3 + hidden message_failed element. */
|
|
.message_control_button:nth-last-child(4) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message_edit_notice {
|
|
grid-area: edited;
|
|
}
|
|
|
|
.message_time {
|
|
justify-self: end;
|
|
padding-right: 5px;
|
|
text-align: end;
|
|
grid-area: time;
|
|
|
|
&.notvisible {
|
|
/* This happens when message failed to send. We don't want to
|
|
display time but still want it to occupy space. */
|
|
width: 45px !important;
|
|
position: unset !important;
|
|
}
|
|
}
|
|
|
|
.slow-send-spinner {
|
|
display: none;
|
|
justify-self: end;
|
|
margin-right: 10px;
|
|
text-align: end;
|
|
grid-area: time;
|
|
}
|
|
|
|
.message_content {
|
|
grid-area: message;
|
|
/*
|
|
Space between two single line messages in a paragraph is 10px.
|
|
There is 3px margin above and below a message. So, having a 2px
|
|
padding above and below the message will make the space between
|
|
all single paragraphs the same.
|
|
*/
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.message_reactions {
|
|
grid-area: reactions;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.message_edit {
|
|
grid-area: message;
|
|
/* Align self to start, rather than baseline, so the baseline
|
|
is preserved from the message itself--keeping the time,
|
|
edit message, and controls at the same vertical alignment. */
|
|
align-self: start;
|
|
/* Keep previewed messages from overflowing the grid area
|
|
that .message_edit is assigned to. */
|
|
overflow: hidden;
|
|
margin-top: $distance_of_non_text_elements_from_message_box;
|
|
}
|
|
|
|
.alert-msg {
|
|
/* Span both the controls and time columns */
|
|
grid-row: controls-start;
|
|
grid-column: controls-start / time-end;
|
|
}
|
|
|
|
.message_length_controller {
|
|
grid-area: more;
|
|
}
|
|
}
|
|
|
|
&.include-sender {
|
|
.messagebox .messagebox-content {
|
|
grid-template-areas:
|
|
"avatar sender controls . time"
|
|
"avatar message . . . "
|
|
". more . . . "
|
|
". reactions . . . ";
|
|
|
|
.message_edit {
|
|
/* No top margin when there's a sender row */
|
|
margin-top: 0;
|
|
}
|
|
|
|
&.is-me-message {
|
|
grid-template-areas:
|
|
"avatar sender controls . time"
|
|
"avatar sender . . . "
|
|
". more . . . "
|
|
". reactions . . . ";
|
|
|
|
.message-avatar {
|
|
/* Set the line-height to match the height of the avatar image
|
|
to center me-messages within the baseline group. */
|
|
line-height: var(--message-box-avatar-height);
|
|
align-self: baseline;
|
|
}
|
|
|
|
.message_sender {
|
|
/* Don't display message sender as flexbox for me-messages. */
|
|
display: block;
|
|
/* This preserves a consistent bottom spacing on the me-message
|
|
grid, which ordinarily benefits from the margin of <p>
|
|
elements in the markdown--which single-line me-messages do
|
|
not receive.
|
|
|
|
It also ensures a uniform space-relationship between the top: of the avatar and the top of the sender_name line.
|
|
|
|
However, this should all arguably be handled from the grid
|
|
container or the grid definition itself. */
|
|
margin: $message_box_margin 0;
|
|
|
|
/* Set the same line-height as on message content for
|
|
me-messages. */
|
|
line-height: var(--message-box-line-height);
|
|
|
|
/* Display message components inline, with wrapping white-space,
|
|
so the sender name and message display as a continuous line
|
|
of wrapping text. */
|
|
.sender_name {
|
|
white-space: normal;
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
&.content_edit_mode {
|
|
.message_sender {
|
|
/* Keep the me-message participating in the baseline */
|
|
visibility: hidden;
|
|
}
|
|
|
|
.message_edit {
|
|
/* Use the sender grid area for the me-message edit/view-source box */
|
|
grid-area: sender;
|
|
margin-top: $distance_of_non_text_elements_from_message_box;
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-avatar {
|
|
grid-area: avatar;
|
|
/* The picture should not participate in the baseline group. */
|
|
align-self: start;
|
|
/* Because the avatar may be the tallest element in a
|
|
single-line me message, this margin preserves the
|
|
overall height of the message box. */
|
|
margin: $distance_of_non_text_elements_from_message_box 0;
|
|
}
|
|
|
|
.status-message {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.message_content {
|
|
padding-top: 0;
|
|
grid-area: message;
|
|
}
|
|
|
|
.message_time {
|
|
grid-area: time;
|
|
}
|
|
|
|
.slow-send-spinner {
|
|
align-self: center;
|
|
position: unset;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.message_edit_notice {
|
|
/* When the edit notice is inline, as on edited me-messages,
|
|
the inline-block and accompanying vertical-align styles will
|
|
apply */
|
|
display: inline-block;
|
|
vertical-align: baseline;
|
|
/* A bit of margin here helps these not look associated with the name. */
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.message_controls {
|
|
grid-area: controls;
|
|
}
|
|
|
|
.message_sender {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
grid-area: sender;
|
|
display: flex;
|
|
/* Ensure flexed sender info (name, status emoji, inline EDITED)
|
|
forms a baseline group, which will participate with the
|
|
message-box grid's baseline group, too. */
|
|
align-items: baseline;
|
|
|
|
margin-top: $message_box_margin;
|
|
|
|
.zulip-icon.zulip-icon-bot {
|
|
align-self: center;
|
|
padding: 0 0 0 5px;
|
|
}
|
|
|
|
.sender_name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
/* It is important to use line-height `normal` here since user's name can
|
|
be in any language and `line-height: 1` doesn't work to accommodate text
|
|
from start and end vertically in all languages. */
|
|
line-height: normal;
|
|
outline: none;
|
|
align-self: baseline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Locally echoed messages. */
|
|
&.locally-echoed .message_time {
|
|
opacity: 0;
|
|
/* Don't show pointer when message_time doesn't has a link. */
|
|
cursor: default;
|
|
}
|
|
|
|
/* Show the spinner only for messages that are still locally echoed. */
|
|
&.locally-echoed .slow-send-spinner {
|
|
display: unset !important;
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
.recipient_row {
|
|
/* See https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107
|
|
for details on how this works */
|
|
.message_row.unread {
|
|
.date_unread_marker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Select all but the first .message_row.unread,
|
|
and remove the properties set from the previous rule. */
|
|
.message_row.unread ~ .message_row.unread {
|
|
.date_unread_marker {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|