mirror of https://github.com/zulip/zulip.git
432 lines
19 KiB
CSS
432 lines
19 KiB
CSS
$avatar_column_width: 46px;
|
|
$distance_of_text_elements_from_message_box_top: 8.5px;
|
|
$distance_of_non_text_elements_from_message_box_top: 6px;
|
|
$sender_name_distance_below_flex_center: 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, to prevent ugly
|
|
line-wrapping. In practice, it's unlikely we'll see anything wider
|
|
than 60px; so the precise value of $time_column_max_width should be
|
|
unimportant. */
|
|
$time_column_min_width: 50px; /* + padding */
|
|
$time_column_max_width: 150px;
|
|
|
|
.message_row {
|
|
display: grid;
|
|
/* 2x2 grid:
|
|
date_unread_marker date_row
|
|
message_unread_marker messagebox */
|
|
grid-template: "date_unread_marker date_row" auto "message_unread_marker messagebox" auto / 2px 1fr;
|
|
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;
|
|
background-color: var(--color-background-stream-message-content);
|
|
/* 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);
|
|
/* To match time in message row and date in recipient row. */
|
|
padding-right: 6px;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
/* Total 868px
|
|
1 56px 2 697px 3 55px 4 60px(min) 5
|
|
1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
|
|
| : TEXT : + ⋮ ☆ : 10:00 AM |
|
|
| : TEXT : : |
|
|
| EDITED : TEXT : : |
|
|
| : TEXT : : |
|
|
| : TEXT : : |
|
|
2,3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| : : : |
|
|
| : [EXPAND / COLLAPSE] : : |
|
|
4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| : : : |
|
|
| : [Message Reactions] : : |
|
|
5 |___________:____________________________________________________________________________________________________:______________:____________|
|
|
*/
|
|
display: grid;
|
|
align-items: start;
|
|
padding-left: 10px;
|
|
grid-template-rows: repeat(4, auto);
|
|
|
|
grid-template-columns: $avatar_column_width auto 55px fit-content(
|
|
$time_column_max_width
|
|
);
|
|
|
|
@media (width < $sm_min) {
|
|
grid-template-columns: $avatar_column_width auto max-content fit-content(
|
|
$time_column_max_width
|
|
);
|
|
}
|
|
|
|
.message_controls {
|
|
grid-row-start: 1;
|
|
grid-column-start: 3;
|
|
line-height: 1;
|
|
justify-self: end;
|
|
/* We need to position it from top and not vertically centered since we want it
|
|
to have the same position from top when user is editing the message. */
|
|
position: relative;
|
|
top: $distance_of_non_text_elements_from_message_box_top;
|
|
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-row-start: 1;
|
|
position: relative;
|
|
top: $distance_of_text_elements_from_message_box_top;
|
|
}
|
|
|
|
.message_time {
|
|
line-height: 1;
|
|
justify-self: end;
|
|
padding-right: 5px;
|
|
min-width: $time_column_min_width;
|
|
text-align: end;
|
|
grid-row-start: 1;
|
|
grid-column-start: 4;
|
|
position: relative;
|
|
top: $distance_of_text_elements_from_message_box_top;
|
|
|
|
&.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-row-start: 1;
|
|
grid-column-start: 4;
|
|
position: relative;
|
|
top: $distance_of_text_elements_from_message_box_top;
|
|
}
|
|
|
|
.message_content {
|
|
grid-row-start: 1;
|
|
grid-column-start: 2;
|
|
/*
|
|
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-row-start: 4;
|
|
grid-column-start: 2;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.message_edit {
|
|
grid-row-start: 2;
|
|
grid-column-start: 2;
|
|
}
|
|
|
|
.alert-msg {
|
|
grid-row-start: 1;
|
|
grid-column: 3 / 5;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.message_length_controller {
|
|
grid-row-start: 3;
|
|
grid-column-start: 2;
|
|
}
|
|
}
|
|
|
|
&.include-sender {
|
|
/*
|
|
1 2 3 4 5
|
|
1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
|
|
| ((((\\\ : Sender Name EDITED : + ⋮ ☆ : 10:00 AM |
|
|
2 | 9_9 3)) :_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| \= (( : TEXT : : |
|
|
| : TEXT : : |
|
|
| : TEXT : : |
|
|
| : TEXT : : |
|
|
| : TEXT : : |
|
|
3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| : : : |
|
|
| : [EXPAND / COLLAPSE] : : |
|
|
4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| : : : |
|
|
| : [Message Reactions] : : |
|
|
5 |___________:____________________________________________________________________________________________________:______________:____________|
|
|
*/
|
|
.messagebox .messagebox-content {
|
|
grid-template-rows: 25px repeat(3, auto);
|
|
|
|
.message_content {
|
|
padding-top: 0;
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
.message_time {
|
|
align-self: center;
|
|
position: unset;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.slow-send-spinner {
|
|
align-self: center;
|
|
position: unset;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.message_edit_notice {
|
|
align-self: center;
|
|
top: 2px;
|
|
}
|
|
|
|
.message_controls {
|
|
align-self: center;
|
|
position: unset;
|
|
}
|
|
|
|
.message_sender {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
grid-column: 1 / 3;
|
|
grid-row: 1 / 2;
|
|
|
|
.zulip-icon.zulip-icon-bot {
|
|
align-self: center;
|
|
padding: $sender_name_distance_below_flex_center 0 0 5px;
|
|
}
|
|
|
|
&.is_me_message {
|
|
/*
|
|
1 2 3 4 5
|
|
1,2 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
|
|
| ((((\\\ : : : |
|
|
| 9_9 3)) : Sender Name is excited to write this multiline message that goes to the next line and takes the : + ⋮ ☆ : 10:00 AM |
|
|
| \= (( : edit status with it to the next line. EDITED : : |
|
|
3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| : : : |
|
|
| : [EXPAND / COLLAPSE] : : |
|
|
4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
|
| : : : |
|
|
| : [Message Reactions] : : |
|
|
5 |___________:____________________________________________________________________________________________________:______________:____________|
|
|
*/
|
|
min-height: $avatar_column_width;
|
|
grid-row: 1 / 3;
|
|
display: grid;
|
|
grid-template-columns: $avatar_column_width auto;
|
|
grid-template-rows: auto;
|
|
|
|
& ~ .alert-msg,
|
|
& ~ .message_time,
|
|
& ~ .slow-send-spinner,
|
|
& ~ .message_controls {
|
|
grid-row: 1 / 3;
|
|
}
|
|
|
|
.sender-status {
|
|
display: inline;
|
|
margin: 0;
|
|
margin-top: 13px;
|
|
|
|
.message_edit_notice {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> span {
|
|
display: flex;
|
|
}
|
|
|
|
.inline_profile_picture {
|
|
flex-shrink: 0;
|
|
/* Let user profile picture take extra height without
|
|
having any affect on height of the container. */
|
|
position: absolute;
|
|
margin-top: $distance_of_non_text_elements_from_message_box_top;
|
|
}
|
|
|
|
.sender_name {
|
|
margin-top: $sender_name_distance_below_flex_center;
|
|
}
|
|
|
|
.sender_name,
|
|
.sender_name-in-status {
|
|
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;
|
|
}
|
|
|
|
.sender_name_padding {
|
|
/* Add padding to align user name with the content. This region is
|
|
important to ensure that the hover region for the sender name
|
|
and avatar are continuous with each other. */
|
|
padding-left: $avatar_column_width;
|
|
}
|
|
|
|
.sender_name-in-status .sender_name_padding {
|
|
margin-left: -$avatar_column_width;
|
|
}
|
|
}
|
|
|
|
&.content_edit_mode {
|
|
.is_me_message {
|
|
& ~ .alert-msg,
|
|
& ~ .message_time,
|
|
& ~ .message_controls {
|
|
grid-row: 1 / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|