@import "./style/themes/default.less";

.nav-phone-icon {
    position: absolute;
    top: 25px;
    right: 30px;
    z-index: 1;
    display: none;
    width: 16px;
    height: 22px;
    cursor: pointer;
}

@media only screen and (max-width: @screen-xl) {
    #search-box {
        display: none;
    }
    #logo {
        padding: 0 40px;
    }
    .banner-wrapper .banner-title-wrapper {
        h1 {
            font-size: 36px;
        }
        p {
            font-size: 16px;
        }
    }
}

@media only screen and (max-width: 991.99px) {
    .main-menu {
        > div > .ant-affix {
            position: static !important;
        }
        .main-menu-inner {
            max-height: none;
            overflow: hidden;
        }
    }
    .code-boxes-col-2-1,
    .code-boxes-col-1-1 {
        float: none;
        width: 100%;
    }
}

@media only screen and (max-width: 767.99px) {
    #header {
        text-align: center;
        #logo {
            float: initial;
            img:last-child {
                margin-right: 0;
            }
        }
    }
    #search-box {
        display: none;
    }
    .preview-image-boxes {
        float: none;
        width: 100%;
        margin: 0 !important;
    }
    .preview-image-box {
        width: 100%;
        margin: 10px 0;
        padding: 0;
    }
    .image-wrapper {
        display: none;
    }
    div.version {
        display: block;
        margin: 29px auto 16px;
    }
    .popover-menu {
        width: 300px;
        div.version {
            margin: 16px auto;
        }
        .ant-popover-inner {
            overflow: hidden;
            &-content {
                padding: 0;
                .ant-select {
                    display: block;
                    width: 60%;
                }
                .ant-btn {
                    margin: 16px 8% 0 8px;
                }
            }
        }
        #nav a.header-link {
            color: #333;
        }
    }
    ul#nav,
    ul#nav li {
        width: 100%;
        font-size: 14px;
    }
    ul#nav li {
        padding: 0 !important;
        line-height: 40px;
        border: 0;
        a {
            color: #333;
        }
    }
    .toc {
        display: none;
    }
    .nav-phone-icon {
        display: block;
    }
    .main {
        height: calc(100% - 86px);
    }
    .aside-container {
        float: none;
        width: auto;
        padding-bottom: 30px;
        border-right: 0;
    }
    .main-container {
        margin-right: 0;
        padding-right: 16px;
        padding-left: 16px;
        > .markdown > * {
            width: 100% !important;
        }
    }
    .main-wrapper {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
    #footer {
        text-align: center;
        .footer-wrap {
            padding: 40px;
            .ant-row {
                padding: 0;
                > div {
                    &:nth-child(2),
                    &:nth-child(4) {
                        display: none;
                    }
                    a {
                        font-weight: 300;
                    }
                }
            }
        }
        .footer-center {
            text-align: center;
        }
        h2 {
            margin-top: 16px;
        }
    }
    .prev-next-nav {
        width: ~"calc(100% - 32px)";
        margin-left: 16px;
    }
    .drawer {
        .ant-menu-inline .ant-menu-item::after,
        .ant-menu-vertical .ant-menu-item::after {
            right: auto;
            left: 0;
        }
    }
    #_hj_feedback_container {
        display: none;
    }

    /** home 区块 **/
    .home-page-wrapper {
        .page {
            h2 {
                margin: 80px auto 64px;
            }
        }
        .parallax-bg {
            display: none;
        }
    }
    .banner {
        display: block;
        height: 632px;
        &-bg-wrapper {
            display: none;
        }
        .img-wrapper,
        .text-wrapper {
            display: inline-block;
            width: 100%;
            min-width: unset;
            max-width: unset;
            margin: auto;
            text-align: center;
        }
        .img-wrapper {
            position: initial;
            margin-top: 32px;
            text-align: center;
            svg {
                width: 100%;
                max-width: 360px;
                height: auto;
                margin: 0 auto;
            }
        }
        .text-wrapper {
            min-height: 200px;
            margin-top: 48px;
            padding: 0 16px;
            h1 {
                display: none;
            }
            p {
                color: @home-text-color;
                font-size: 14px;
                line-height: 28px;
            }
            .banner-btns {
                display: block;
                min-width: 100%;
                white-space: nowrap;
                text-align: center;
            }
        }
    }
    .page1 {
        min-height: 1300px;
        .ant-row {
            margin: 24px auto 64px;
            > div {
                margin-bottom: 48px;
            }
        }
    }
    .page2 {
        min-height: 840px;
        background: #FFF;
        &-content {
            box-shadow: none;
        }
        &-components {
            display: none;
        }
        &-product {
            min-height: auto;
            padding: 0 16px;
            .product-block {
                margin-bottom: 34px;
                padding-bottom: 35px;
                border-bottom: 1px solid @site-border-color-split;
                &:last-child {
                    margin-bottom: 32px;
                    border-bottom: none;
                    .block-text-wrapper {
                        height: auto;
                    }
                }
                .block-image-wrapper {
                    height: 88px;
                    img {
                        height: 100%;
                    }
                }
                .block-text-wrapper {
                    padding-bottom: 0;
                    border-bottom: none;
                    h4 {
                        margin-bottom: 4px;
                        font-size: 18px;
                        line-height: 24px;
                    }
                    p {
                        margin-bottom: 8px;
                        font-size: 12px;
                        line-height: 20px;
                    }
                    a {
                        line-height: 20px;
                    }
                    .components-button-wrapper {
                        margin-top: 16px;
                        font-size: 12px;
                        a {
                            display: block;
                        }
                    }
                    a.more-mobile-react,
                    a.more-mobile-angular {
                        margin-top: 0;
                        color: @link-color;
                    }
                    a.more-mobile-react:hover,
                    a.more-mobile-angular:hover {
                        color: #40A9FF;
                    }
                }
            }
        }
    }
    .page3 {
        min-height: 688px;
        background: url("https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg") no-repeat;
        background-size: cover;
        .ant-row {
            margin: 0 8px;
        }
        .page3-block {
            margin-bottom: 32px;
            padding: 24px;
            background: #FFF;
            border-radius: 4px;
            box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
            &:nth-child(2) {
                .page3-img-wrapper img {
                    display: block;
                    width: 70%;
                    margin: auto;
                }
            }
            p {
                font-size: 12px;
            }
            .page3-img-wrapper {
                width: 20%;
                img {
                    width: 100%;
                }
            }
            .page3-text-wrapper {
                width: 80%;
                max-width: initial;
                margin: 0;
                padding-left: 16px;
            }
        }
    }
}