mirror of https://github.com/zulip/zulip.git
244 lines
13 KiB
CSS
244 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_top: 6px;
|
|
$sender_name_distance_below_flex_center: 3px;
|
|
$time_column_min_width: 50px; /* + padding */
|
|
|
|
.message_row {
|
|
.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 auto;
|
|
|
|
@media (width < $sm_min) {
|
|
grid-template-columns: $avatar_column_width auto max-content auto;
|
|
}
|
|
|
|
.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: 10px;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.message_content {
|
|
grid-row-start: 1;
|
|
grid-column-start: 2;
|
|
padding: 4px 0 1px;
|
|
}
|
|
|
|
.message_reactions {
|
|
grid-row-start: 4;
|
|
grid-column-start: 2;
|
|
}
|
|
|
|
.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);
|
|
padding-top: 2px;
|
|
|
|
.message_content {
|
|
padding-top: 0;
|
|
grid-row-start: 2;
|
|
}
|
|
|
|
.message_time {
|
|
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,
|
|
& ~ .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 {
|
|
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;
|
|
/* Add padding to align user name with the content */
|
|
padding-left: $avatar_column_width;
|
|
outline: none;
|
|
margin-top: $sender_name_distance_below_flex_center;
|
|
}
|
|
}
|
|
|
|
&.content_edit_mode {
|
|
.is_me_message {
|
|
& ~ .alert-msg,
|
|
& ~ .message_time,
|
|
& ~ .message_controls {
|
|
grid-row: 1 / 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|