TeaWeb/shared/js/ui/frames/side/ClientInfoRenderer.scss

@import "../../../../css/static/mixin";
@import "../../../../css/static/properties";

$color_client_normal: #cccccc;
$client_info_avatar_size: 10em;
$bot_thumbnail_width: 16em;
$bot_thumbnail_height: 9em;

.container {
    position: relative;

    height: 100%;

    flex-grow: 1;
    flex-shrink: 1;

    display: flex;
    flex-direction: column;
    justify-content: stretch;

    padding-right: 5px;
    padding-left: 5px;

    .heading {
        flex-shrink: 0;
        flex-grow: 0;

        display: flex;
        flex-direction: column;
        justify-content: stretch;

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

            .htmltag {
                text-align: center;
                font-size: 1.5em;
                color: $color_client_normal;
                font-weight: bold;
            }
        }

        .containerDescription {
            padding-right: calc(#{$client_info_avatar_size} / 2);
            padding-left: calc(#{$client_info_avatar_size} / 2);
            text-align: center;

            display: flex;
            flex-direction: column;
            justify-content: stretch;

            .description {
                color: #6f6f6f;

                max-width: 100%;
                flex-shrink: 1;
                flex-grow: 1;
                overflow-wrap: break-word;
            }
        }
    }

    .buttonClose {
        font-size: 4em;

        cursor: pointer;

        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;

        opacity: 0.3;

        width: .5em;
        height: .5em;

        margin-right: .1em;
        margin-top: .1em;

        &:hover {
            opacity: 1;
        }
        @include transition(opacity $button_hover_animation_time ease-in-out);

        &:before, &:after {
            position: absolute;
            left: .25em;
            content: ' ';
            height: .5em;
            width: .05em;
            background-color: #5a5a5a;
        }

        &:before {
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

    .buttonMore {
        flex-grow: 0;
        flex-shrink: 0;

        height: 1.5em;
        font-size: 1.25em;

        text-align: center;

        color: #999999;
        cursor: pointer;

        margin-left: -5px;
        margin-right: -5px;

        background-color: #2d2d2d;

        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;

        &:hover {
            background-color: #393939;
        }
        @include transition($button_hover_animation_time ease-in-out);
    }
}

.containerAvatar {
    flex-grow: 0;
    flex-shrink: 0;

    position: relative;

    display: inline-block;
    margin: calc(#{$client_info_avatar_size} / -2) .75em .5em .5em;

    align-self: center;

    border-radius: 50%;
    overflow: hidden;

    -moz-box-shadow: inset 0 0 5px var(--side-info-shadow);
    -webkit-box-shadow: inset 0 0 5px var(--side-info-shadow);
    box-shadow: inset 0 0 5px var(--side-info-shadow);

    .avatar {
        overflow: hidden;

        width: $client_info_avatar_size;
        height: $client_info_avatar_size;

        @include transition(opacity $button_hover_animation_time ease-in-out);

        display: flex;
        flex-direction: row;
        justify-content: center;

        .avatarImage {
            height: 100%;
            width: 100%;

            &.loading {
                height: $client_info_avatar_size * .8;
                width: $client_info_avatar_size * .8;

                align-self: center;
            }
        }
    }

    .edit {
        position: absolute;

        display: none;
        pointer-events: none;

        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        z-index: 2;

        text-align: center;
        overflow: hidden;

        border-radius: inherit;
        cursor: pointer;

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

        transition: opacity $button_hover_animation_time ease-in-out;

        .icon {
            font-size: $client_info_avatar_size * 0.7;
            align-self: center;
        }

        &:hover {
            opacity: .75;
        }

        &.disabled {
            opacity: 0!important;
            pointer-events: none!important;
        }
    }

    &.editable {
        .edit {
            display: flex;
            pointer-events: all;
        }
    }
}

.generalInfo {
    padding-top: 1em;

    overflow-x: hidden;
    overflow-y: auto;

    @include chat-scrollbar-vertical();

    display: flex;
    flex-direction: row;
    justify-content: stretch;

    flex-grow: 1;
    flex-shrink: 1;

    .block {
        display: inline-block;
        height: 100%;

        flex-grow: 1;
        flex-shrink: 1;

        min-width: 6em;

        &.blockRight {
            text-align: right;

            .containerProperty {
                flex-direction: row-reverse;

                .icon {
                    margin-left: .2em;
                }

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

        &.blockLeft {
            text-align: left;

            .containerProperty {
                .icon {
                    margin-right: .2em;
                }

                .value {
                    justify-content: flex-start;
                }
            }
        }
    }
}

.containerProperty {
    display: flex;
    flex-direction: row;
    justify-content: stretch;

    > .icon {
        margin-bottom: .1em;

        font-size: 2em;

        flex-shrink: 0;
        flex-grow: 0;

        width: 1em;
        height: 1em;

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

    &.list {
        > .icon_em {
            margin-top: 0; /* for lists the .1em patting on the top looks odd */
        }
    }

    .property {
        line-height: 1.1em;

        flex-shrink: 1;
        flex-grow: 1;

        min-width: 4em; /* 2em for the icon the last 4 for the text */

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .title, .value {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title {
            color: #636363;
            font-weight: bold;
            text-transform: uppercase;
        }

        .value {
            color: #d9d9d9;

            display: flex;
            flex-direction: row;

            .country {
                margin-right: .2em;
                align-self: center;
            }

            &.status, &.groups {
                flex-direction: column;

                .statusEntry, .groupEntry {
                    .icon {
                        vertical-align: text-top;
                    }

                    .awayMessage {
                        margin-left: .25em;
                    }
                }

                .groupEntry {
                    display: flex;

                    justify-content: flex-start;
                    flex-direction: row-reverse;
                }

                .channelGroupInherited {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                }
            }

            &.clientTeaforoAccount {
                a, a:visited {
                    color: #d9d9d9;
                }
            }
        }
    }

    &.list {
        .property {
            .value {
                flex-direction: column;
            }
        }
    }

    &:not(first-of-type) {
        margin-top: 1em;
    }
}