comment.scss

TLDR

This file defines the styling for the comment component. It includes styles for the comment container, comment menu, comment header, comment avatar, comment username, comment date, and comment text.

Classes

.Comment

This class represents the comment container. It is a flex container with a column layout and has a margin of 5 pixels on the top and bottom. On hover, it displays the comment menu.

.MenuWrapper

This class represents the comment menu wrapper. It is initially hidden and positioned absolutely to the right of the comment container.

.comment-header

This class represents the comment header. It is a flex container with a row layout and is positioned relative to the comment container.

.comment-avatar

This class represents the comment avatar. It defines the styling for the comment user's avatar, such as width, height, border-radius, and box-shadow.

.comment-username

This class represents the comment username. It defines the styling for the username text, such as font-weight and margin.

.comment-date

This class represents the comment date. It defines the styling for the comment date text, such as color and font-size.

.comment-text

This class represents the comment text. It defines the styling for the comment content, such as color, width, padding-left, and overflow-wrap.

.comment-text a

This class represents the anchor tags within the comment text. It defines the styling for the comment text links, such as color. On hover, it adds an underline text-decoration.

.comment-text p:first-child

This class represents the first paragraph within the comment text. It defines the margin-top.

.comment-text *

This class represents all elements within the comment text. It sets the user-select property to "text".

.Comment {
    display: flex;
    flex-direction: column;
    margin: 5px 0;

    &:hover {
        .MenuWrapper {
            display: block;
        }
    }

    .MenuWrapper {
        display: none;
        position: absolute;
        right: 0;
    }

    .comment-header {
        align-items: center;
        display: flex;
        flex-direction: row;

        position: relative;
    }

    .comment-avatar {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        box-shadow: rgba(15, 15, 15, 0.1) 0 2px 4px;
    }

    .comment-username {
        font-weight: bold;
        margin: 0 6px 0 8px;
    }

    .comment-date {
        color: #ccc;
        font-size: 12px;
    }

    .comment-text {
        color: rgb(var(--center-channel-color-rgb));
        width: 100%;
        padding-left: 32px;
        overflow-wrap: anywhere;

        a {
            color: rgb(var(--link-color-rgb));

            &:hover {
                text-decoration: underline;
            }
        }

        p {
            &:first-child {
                margin-top: 0;
            }
        }
    }

    .comment-text * {
        user-select: text;
    }
}