zulip/web/styles/message_row.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;
    /* 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;
        /* 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;
            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_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: $message_box_margin 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;
        }
    }
}