comty/packages/app/src/components/UserCard/index.less

@import "theme/vars.less";

html {
    &.mobile {
        .userCard {
            width: 100%;
            filter: none;
            box-shadow: none;
            min-width: 0;

            .avatar {
                width: 20%;
                height: fit-content;
            }
        }
    }
}

._mobile_card {
    background-color: var(--background-color-accent);

    border-radius: 12px;

    box-shadow: @card-shadow;
}

._mobile_userCard {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: fit-content;

    gap: 10px;

    &.no-cover {
        ._mobile_userCard_top {
            flex-direction: row;

            ._mobile_userCard_top_avatar {
                padding: 10px;
            }

            ._mobile_userCard_top_texts {
                margin-left: 0;
            }
        }
    }

    ._mobile_userCard_top {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;
        height: auto;

        background-color: var(--background-color-accent);

        border-radius: 12px;

        box-shadow: @card-shadow;

        ._mobile_userCard_top_cover {
            position: relative;

            display: flex;
            flex-direction: row;

            align-items: center;
            justify-content: center;

            width: 100%;

            max-height: 25vh;

            z-index: 100;

            .cover {
                width: 100%;
                height: 25vh;

                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;

                border-radius: 12px;
            }
        }

        ._mobile_userCard_top_avatar_wrapper {
            position: absolute;

            display: flex;
            flex-direction: row;

            align-items: flex-end;

            bottom: 0;
            left: 0;

            padding: 0 10px;

            gap: 20px;

            z-index: 110;

            transform: translateY(80%);
        }

        ._mobile_userCard_top_avatar {
            display: flex;
            flex-direction: row;

            align-items: center;
            justify-content: center;

            width: 120px;
            height: 120px;

            max-height: 120px;
            max-width: 120px;

            border-radius: 12px;

            img {
                width: 100%;
                height: 100%;

                object-fit: contain;
                background-color: black;

                box-shadow: @card-shadow;

                border-radius: 12px;
            }
        }

        ._mobile_userCard_top_texts {
            position: relative;

            display: flex;

            flex-direction: column;
            justify-content: center;

            margin-left: calc(120px + 10px);

            padding: 10px;
            padding-left: 15px;

            ._mobile_userCard_top_badges_wrapper {
                position: absolute;
                top: 0;
                right: 0;

                padding: 10px;
            }

            ._mobile_userCard_top_username {
                font-family: "Space Grotesk", sans-serif;

                h1 {
                    color: var(--text-color);
                    margin: 0;
                }

                svg {
                    color: var(--colorPrimary)
                }

                margin-bottom: 10px;
            }

            ._mobile_userCard_top_description {
                color: var(--text-color);

                p {
                    margin: 0;
                }

                // max-height: 30vh;

                // overflow: hidden;

                // p {
                //     text-overflow: ellipsis;
                //     overflow: hidden;
                //     white-space: nowrap;
                // }
            }
        }
    }

    ._mobile_userCard_actions {
        display: flex;
        flex-direction: row;

        gap: 20px;

        padding: 10px;
    }

    ._mobile_userCard_links {
        display: flex;
        flex-direction: row;

        justify-content: flex-start;

        gap: 15px;

        padding: 10px 20px;

        //padding-top: 0;

        .userLink {
            display: flex;
            flex-direction: column;

            align-items: center;
            justify-content: center;

            font-size: 1.3rem;

            color: var(--text-color);

            p {
                margin: 0;
            }
        }
    }
}

.userCard {
    display: flex;
    flex-direction: column;

    background-color: var(--background-color-accent);
    border-radius: 12px;
    padding: 20px;

    height: fit-content;
    width: 20vw;
    min-width: 400px;

    transition: all 0.3s ease-in-out;

    outline: 1px solid var(--border-color);

    filter: drop-shadow(0 0 20px var(--border-color));

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span {
        margin: 0;
    }

    .avatar {
        display: flex;
        flex-direction: row;
        justify-content: center;

        height: 10vh;
        width: 10vh;

        align-self: center;

        img {
            width: 100%;
            height: 100%;
            border-radius: 12px;
        }
    }

    .username {
        display: flex;
        flex-direction: row;

        margin-top: 20px;

        .username_text {
            display: flex;
            flex-direction: column;
            width: 100%;

            h1 {
                display: inline-flex;
                font-size: 1.5rem;
                font-weight: 600;
                font-family: "Space grotesk", sans-serif;
            }

            span {
                font-size: 0.8rem;
                font-style: italic;
            }

            svg {
                fill: var(--app-color);
                font-size: 0.8rem;
            }
        }

        .indicators {
            display: inline-flex;
            flex-direction: row;

            align-items: center;

            width: fit-content;

            svg {
                font-size: 1.4rem;
            }
        }
    }

    .description {
        margin-top: 20px;

        max-height: 295px;

        overflow: hidden;
        text-overflow: ellipsis;

        h3 {
            margin: 0;
            font-size: 0.9rem;

            height: 100%;

            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .badges {
        justify-content: flex-end;
    }

    .userLinks {
        display: flex;
        flex-direction: column;

        margin-top: 20px;

        gap: 10px;

        .userLink {
            display: flex;
            flex-direction: row;

            align-items: center;

            width: fit-content;

            gap: 5px;

            transition: all 0.3s ease-in-out;

            &.clickable {
                cursor: pointer;

                &:hover {

                    svg,
                    p {
                        color: var(--app-color);
                    }
                }
            }

            svg {
                font-size: 1rem;
                margin-right: 0 !important;
                color: var(--text-color);
            }

            p {
                font-size: 0.8rem;
                font-family: "Space grotesk", sans-serif;
                font-weight: 600;

                user-select: text;
            }
        }
    }
}

.userLinkViewer {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: fit-content;

    padding: 30px 0;

    .userLinkViewer_icon {
        font-size: 3rem;
    }

    .userLinkViewer_value {
        font-size: 1.5rem;
        font-family: "DM Mono", monospace;

        background-color: var(--background-color-accent);

        padding: 10px;

        border-radius: 12px;

        p {
            margin: 0;
        }
    }
}