chat/_src/style/common.scss

@charset "UTF-8";

.pub-scroll-box {
    &::-webkit-scrollbar {
        width: 8px;
        height: 6px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: rgba($color: #8d8a8a, $alpha: 0.2);
    }
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
}

.pub-modal-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: 0.7);
    text-align: center;
    &::after {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
}

.pub-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 888;
    text-align: center;
    &:after {
        content: "";
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
    .pub-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background: #000;
        z-index: 1014;
    }
}
.pub-modal {
    display: inline-block;
    vertical-align: middle;
    background-color: #ffffff;
    min-width: 330px;
    position: relative;
    z-index: 1015;
    padding: 0 18px 18px;
    box-sizing: border-box;
    .modal-hd {
        .title {
            font-size: 14px;
            color: #333333;
            text-align: center;
            height: 30px;
            line-height: 30px;
            padding-top: 10px;
        }
        i {
            position: absolute;
            right: 6px;
            top: 6px;
            font-size: 20px;
            cursor: pointer;
        }
    }
}

.mini-wrap {
    .pub-modal {
        min-width: 275px;
    }
}

.pub-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: url(../../assets/loading.gif) center 36% /100px no-repeat;
}

.router-link-exact-active,
.router-link-active {
    text-decoration: none;
    &:hover,
    &:active,
    &:visited {
        text-decoration: none;
    }
}

// 头像
.avatar_bg0 {
    background: #f5882b;
}
.avatar_bg1 {
    background: #cc90e2;
}
.avatar_bg2 {
    background: #80d066;
}
.avatar_bg3 {
    background: #6fb1e4;
}
.avatar_bg4 {
    background: #f98bae;
}
.avatar_bg5 {
    background: #ecd074;
}
.avatar_bg6 {
    background: #e57979;
}
.avatar_bg7 {
    background: #fba76f;
}
.avatar_bg8 {
    background: #73cdd0;
}
.avatar_bg9 {
    background: #fb60c4;
}

.user-avatar {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
    &::before {
        content: attr(data-name);
        color: #ffffff;
        font-size: 14px;
    }
    &:hover {
        opacity: 0.8;
    }
}

.h5-wrap {
    .user-avatar {
        width: px2rem(90);
        height: px2rem(90);
        line-height: px2rem(90);
        &::before {
            font-size: px2rem(32);
        }
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.hidden {
    visibility: hidden;
}

.el-loading-mask {
    background-color: rgba(0, 0, 0, 0.3);
    .el-loading-spinner {
        &:before {
            content: "";
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(../../assets/msg-loading-icon.png) center/100%
                no-repeat;
            animation: rotate 0.8s ease 0.2s infinite;
        }
        svg {
            display: none;
        }
    }
}

.msg-item.you {
    .pub-pop-toolbar {
        left: 0;
        right: auto;
        &:before {
            left: 10px;
        }
    }
}

.pub-pop-toolbar {
    position: absolute;
    top: -46px;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 5px;
    box-shadow: 1px 1px 50px rgba(212, 180, 180, 0.3);
    z-index: 11;
    user-select: none;
    text-align: center;
    height: 34px;
    line-height: 34px;
    display: flex;
    color: #fff;
    &.ext-username {
        top: -60px;
    }
    &:before {
        content: "";
        position: absolute;
        bottom: -12px;
        right: 10px;
        @include triangle-down(6px, rgba(0, 0, 0, 0.85));
    }
    &.ext-session {
        right: auto;
        background: #fff;
        color: #333333;
        display: block;
        height: auto;
        text-align: left;
        overflow: hidden;
        box-shadow: 0px 1px 5px 1px #4f4f4f;
        &::before {
            display: none;
        }
        li {
            padding: 0 10px;
            border-top: 1px solid #f5f5f5;
            &:hover {
                background: #f5f5f5;
            }
            &:first-child {
                border: 0;
            }
        }
    }
    li {
        cursor: pointer;
        font-size: 14px;
        position: relative;
        padding: 0 10px;
        white-space: nowrap;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -10px;
            width: 1px;
            height: 20px;
            background: rgba(255, 255, 255, 0.5);
        }
        &:first-child {
            &:before {
                display: none;
            }
        }
        &.split-line {
            display: none;
        }
        &:hover {
            opacity: 0.8;
        }
    }
}

.h5-wrap {
    .pub-pop-toolbar {
        top: px2rem(-84);
        height: px2rem(69);
        line-height: px2rem(69);
        &:before {
            bottom: px2rem(-12);
            right: px2rem(24);
            @include triangle-down(px2rem(6), rgba(0, 0, 0, 0.85));
        }
        &.ext-session {
            height: auto;
            box-shadow: 0 1px 5px 1px #cdcdcd;
        }
        li {
            padding: 0 px2rem(21);
            &:before {
                margin-top: px2rem(-15);
                height: px2rem(30);
            }
        }
    }
    .msg-item.you {
        .pub-pop-toolbar {
            &:before {
                left: px2rem(24);
            }
        }
    }
}