@import "./icon.less";

html{
    scroll-behavior: smooth;
}
body {
    padding-top: @header-height;
    color: @color;
}

// 三角
.u-delta {
    .pa;
    background-clip: padding-box;
    background-color: #fff;
    color: @color;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    right: -5px;
    list-style: none;
    margin: -6px 0 0 0;
    position: absolute;
    z-index: 820;
    top: 100%;

    &:before {
        content: "";
        display: inline-block;
        position: absolute;
        left: auto;
        right: 14px;
        top: -16px;
        border: 8px solid transparent;
        border-bottom-color: rgba(27, 31, 35, 0.15);
    }

    &:after {
        content: "";
        display: inline-block;
        position: absolute;
        left: auto;
        right: 15px;
        top: -14px;
        border: 7px solid transparent;
        border-bottom-color: #fff;
    }
}

.c-header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 601;
    width: 100%;
    height: @header-height;
    background-color: @bg-black;
    color: #fff;
    transition: 0.5s ease-in-out;
    // overflow: hidden;
}
.c-header.isOverlay {
    background-color: rgba(0, 0, 0, 0.85);
}

.c-header-inner {
    // padding: 16px;
    // *zoom: 1;
    // height:@header-height;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    .flex;
}

//用户相关
.c-header-user {
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;

    .u-dropdown {
        border-bottom: 0 solid transparent;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top-style: solid;
        border-top-width: 4px;
        content: "";
        display: inline-block;
        height: 0;
        vertical-align: middle;
        width: 0;
    }
    svg {
        fill: #fff;
        .size(18px);
        &:hover{
            opacity: 0.7;
        }
    }

    .u-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

    .u-menu {
        .u-delta;
        padding: 5px 0;
        width: 160px;

        a {
            display: block;
            line-height: 21px;
            color: #454545;
            &:hover {
                color: #fff;
            }
            outline: none;
            text-decoration: none;
            overflow: hidden;
            padding: 5px 10px 5px 16px;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:hover {
                background-color: @color-link;
            }
        }

        hr {
            .mt(2px);
            .mb(2px);
        }
    }

    .i-icon-vip {
        .dbi;
        vertical-align: baseline;
        padding: 2px 5px;
        .fz(12px, 14px);
        font-style: normal;
        border-radius: 2px;
        background-color: #ddd;
        color: #fff;
        &.on {
            background-color: #6f42c1;
        }
    }
    .u-expire,
    .u-vip-type {
        .fz(12px);
        // color:#999;
        .ml(5px);
    }
    .u-vip-left {
        color: #999;
        .ml(5px);
    }

    .u-superauthor-profile {
        width: 16px;
        vertical-align: -2px;
        display: inline-block;
        margin-right: 3px;
    }

    .off {
        filter: grayscale(100%);
    }
}

//操作面板
.c-header-panel {
    position: relative;
    height: 100%;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;

    .u-pop-content {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.15s, opacity 0.15s linear;
    }

    &:hover {
        .u-pop-content {
            opacity: 1;
            visibility: visible;
        }
    }

    .u-post {
        padding: 0 10px;
        height: 100%;
        .flex;
        align-items: center;
    }

    &.on {
        .u-menu {
            display: block;
        }
    }

    &:hover {
        .u-dropdown {
            opacity: 0.7;
        }
    }
}

@media screen and (max-width: @phone) {
    .c-header-panel {
        &:not(&.c-header-info) {
            display: none;
        }
    }
}

//登录、注册
.c-header-login {
    margin: 16px 5px 16px 0;

    transition: 0.4s;
    *zoom: 1;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    border: 1px solid @border-hr;
    border-radius: 3px;

    .u-default,
    .u-extend {
        float: left;
    }

    .u-default {
        display: block;
        line-height: @logo-size - 2px;
        padding: 0 8px;
        color: #fff;

        &:hover {
            color: hsla(0, 0%, 100%, 0.75);
        }
    }

    em {
        color: #a4acb5;
        .fl;
        font-style: normal;
        .lh(30px);
    }

    .u-extend {
        //background-color: hsla(0,0%,100%,.125);
        background-color: #fafafa;
        height: @logo-size - 2px;
        padding-left: 5px;

        .c-passport {
            *zoom: 1;
            &:after {
                content: "";
                display: table;
                clear: both;
            }
            padding: (@logo-size - 24px - 2px) / 2 0;
        }

        a {
            float: left;
            display: block;
            margin-right: 5px;
        }

        img {
            vertical-align: middle;
            width: 24px !important;
            height: auto;
        }

        display: none;
    }
}

.c-header-info {
    height: 100%;
    .flex;
    align-items: center;
}

.c-header-userdata {
    .u-delta;
    &:after {
        border-bottom-color: #f4f6f7;
        right: 20px;
    }

    top: calc(100% + 17px);
    // padding: 5px 0;
    width: 400px;
}

// 用户信息
.c-header-profile {
    cursor: pointer;
    position: relative;
    padding: 4px 5px 2px 6px;

    .u-menu {
        margin-top: 8px;
    }
    .u-me {
        .nobreak;
        em {
            font-style: normal;
            color: #999;
            font-size: 12px;
        }
        b {
            .mr(3px);
        }
    }
    .u-vip {
        .u-icon-vip {
            .y(-2px);
        }
    }
    .u-name {
        line-height: 30px;
        padding: 0 16px;
        white-space: nowrap;
        word-wrap: normal;
        word-break: keep-all;
        text-overflow: ellipsis;
        overflow: hidden;
        b {
            font-weight: bold;
            display: block;
            float: left;

            white-space: nowrap;
            word-wrap: normal;
            word-break: keep-all;
            text-overflow: ellipsis;
            overflow: hidden;

            max-width: 60px;
        }
        span {
            color: #666;
            letter-spacing: 0.5px;
            margin-left: 3px;
        }
        cursor: default;
    }
    .u-avatar {
        vertical-align: middle;
        margin-right: 2px;
    }

    hr {
        margin: 8px 0;
        border-top: 1px solid @border-hr;
    }

    &.on {
        .u-menu {
            display: block;
        }
    }
    .u-hr {
        border-top: 1px solid @border-hr;
    }

    &:hover {
        .u-dropdown {
            opacity: 0.7;
        }
    }
}

.c-header-userdata {
    background-clip: padding-box;
    // background-color: #fff;
    color: #3d454d;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    right: 0;
    list-style: none;
    position: absolute;
    z-index: 820;
    top: 100%;
    width: 400px;
    margin-top: 10px;
    margin-right: -10px;

    .u-profile {
        background-color: #f4f6f7;
        padding: 12px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .u-expire {
        font-size: 12px;
        color: #999;
    }

    .u-basic {
        .flex;
        align-items: center;
        gap: 3px;
    }

    .u-displayname {
        .fz(15px);
        .nobreak;
        max-width: 200px;
        color: @color;
        .bold;
        &:hover {
            color: @color-link;
        }
    }

    .u-id {
        font-size: 12px;
        color: #999;
        margin-top: 6px;
        b {
            color: @color;
        }
    }
    .u-copy {
        margin-left: 5px;
        .pointer;

        &:hover {
            color: @primary;
        }
    }

    .u-actions {
        width: 100%;
        .flex;

        .el-button {
            border-radius: 0;
            flex: 1;

            &:first-of-type {
                border-left-width: 0;
            }
            &:last-of-type {
                border-right-width: 0;
            }
        }
    }

    .u-other {
        padding: 10px 5px;
        .u-item {
            display: block;
            padding: 5px 10px;
            color: #454545;

            &:hover {
                background: @primary;
                color: #fff;
            }

            i {
                .mr(5px);
            }
        }
    }

    .u-logout {
        padding: 0 10px 10px 10px;
        .mt(10px);

        .el-button {
            width: 100%;
        }
    }
}

@media print {
    .c-header {
        .none;
    }
}

@media screen and (max-width: @phone) {
    .env-app,.v-miniprogram,.wechat-miniprogram {
        .c-header {
            .none;
        }
        body {
            padding-top: 0;
        }
    }

    .wechat-miniprogram {
        .c-header {
            .none;
        }
    }
}

.c-header-jx3box {
    top: @header-height;
    left: 0;
}

// tooltip
.c-header-tooltip {
    margin-top: -5px !important;
}