helpcenter/Web/css/mobile.less

@import "base.less";

@media screen and (max-width: 998px) {
    html {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: 100%;
    }
    body {
        margin: 0;
        min-width: 100px;
        padding: 0;
        width: @mobileDefaultWidth;
    }
    .mobile_table_contents {
        background-color: @mobileMenuColor;
        color: @textColorLinkMain;
        cursor: pointer;
        display: block;
        display: block;
        font-size: 14px;
        font-weight: 700;
        height: 40px;
        left: 0;
        padding: 0;
        position: fixed;
        top: 50px;
        width: @mobileDefaultWidth;
        z-index: 999;
        &:after {
            background: url(/images/Site/Icons/search.png) no-repeat 50% 50%;
            border-left: 1px solid #C9CDD4;
            content: '';
            display: block;
            height: 26px;
            position: absolute;
            right: 0;
            top: 7px;
            width: 72px;
        }
        span {
            display: inline-block;
            margin-top: 7px;
            padding: 6px 30px 6px 20px;
            position: relative;
            text-align: left;
            overflow-x: hidden;
            white-space: nowrap;
            max-width: 65%;
            text-overflow: ellipsis;
            &:after {
                background: url(/images/buttons.png) -4px -74px no-repeat;
                content: '';
                display: block;
                height: 20px;
                position: absolute;
                right: 3px;
                top: 3px;
                width: 20px;
            }
        }
    }
    .InnerPage {
        .description {
            border: 0 none;
            margin: 0;
            padding: 15px 20px 20px;
            width: auto;
            .menuleft {
                background-color: @mobileMenuColor;
                .shadowFullCustomizable (@byX: 1px, @byY: 1px, @radius: 2px, @color: rgba(102,102,102,0.8));
                display: none;
                height: auto;
                left: 0;
                margin: 0;
                max-height: 85vh;
                padding: 0;
                position: fixed;
                top: 50px;
                width: @mobileDefaultWidth;
                z-index: 1000;
                ul {
                    &:first-child {
                        padding-top: 60px;
                    }
                    li {
                        padding: 0 10px;
                    }
                }
            }
        }
    }
    .search_line {
        background-color: @mobileMenuColor;
        display: none;
        left: 0;
        padding: 15px 10px;
        position: fixed;
        top: 50px;
        width: @mobileDefaultWidth;
        z-index: 100000;
    }
    .langselector {
        div.title {
            span.underline {
                color: transparent;
                width: 0;
            }
        }
    }
    div.custom-select {
        ul.options {
            li.option {
                a {
                    color: transparent;
                    width: 0;
                }
            }
        }
    }
    #LanguageSelector {
        width: 46px;
    }
    div.custom-select.open {
        ul.options {
            width: 21px;
        }
    }
    nav {
        ul.header_menu {
            color: @buttonTextColor;
            display: block;
            margin: 0;
            position: absolute;
            top: 50px;
            width: 296px;
        }
        ul {
            li {
                display: block;
                width: auto;
                ul {
                    color: @buttonTextColor;
                    margin: 0;
                    width: auto;
                    li {
                        a.menusubitem {
                            background-color: @textColorLinkMain;
                            color: @buttonTextColor;
                            display: block;
                            height: auto;
                            padding: 15px 15px 15px 30px;
                            text-align: left;
                        }
                    }
                }
                a.menuitem {
                    background-color: @textColorLinkMain;
                    color: @buttonTextColor;
                    display: block;
                    display: block;
                    height: auto;
                    padding: 15px;
                    text-align: left;
                }
            }
        }
    }
    .menuitem.menu_normal_color {
        background-color: @textColorLinkMain !important;
    }
    #navitem_features {
        color: @buttonTextColor;
    }
    #navitem_saas {
        color: @buttonTextColor;
    }
    #navitem_mobile {
        color: @buttonTextColor;
    }
    #navitem_prices {
        color: @buttonTextColor;
    }
    #navitem_server {
        color: @buttonTextColor;
    }
    #navitem_desktop {
        color: @buttonTextColor;
    }
    .dropit {
        .dropit-submenu {
            .shadowFullCustomizable (none);
        }
    }
    .mail_server #navitem_mail, .document_server #navitem_document, .community_server #navitem_community, .one_click_install #navitem_one_click, .enterprise_edition #navitem_enterprise, .modules_list #navitem_modules, .document_editors #navitem_editors, .desktop_windows_version #navitem_desktop_docs, .desktop_linux_version #navitem_desktop_docs, .desktop_macos_version #navitem_desktop_docs, .mobile_version #navitem_mobile_docs, nav ul li a.menusubitem.active  {
        color: @buttonTextColor;
    }
    .features_all #navitem_features, .modules_section #navitem_features, .saas_version #navitem_saas, .windows_version #navitem_server, .desktop_windows_version #navitem_desktop, .desktop_linux_version #navitem_desktop, .desktop_macos_version #navitem_desktop, .linux_version #navitem_server, .docker_version #navitem_server, .mobile_version #navitem_mobile, nav ul li a.menuitem.active, nav ul li a.menuitem:hover  {
        background-color: #333F5B;
        color: @buttonTextColor;
    }
    .block_also {
        display: none !important;
    }
    .bottommenu {
        display: none !important;
    }
    #floatSubMenu {
        display: none !important;
    }
    .undertop {
        margin: 0;
        padding: 120px 20px 0;
        width: auto;
    }
    footer {
        position: relative;
    }
    header {
        background-color: rgba(61,74,107,0.99);
        left: 0;
        position: fixed;
        top: 0;
        width: @mobileDefaultWidth;
        z-index: 1000;
    }
    .copyReserved {
        height: 33px;
        margin-left: 0;
        padding: 17px 0 0 20px;
        text-align: left;
    }
    #back-top {
        bottom: 50px;
        left: auto;
        margin: 0;
        padding: 0;
        right: 20px;
        a {
            .borderRadius (0);
            height: 50px;
            width: 50px;
        }
    }
    .logo {
        margin-left: 60px;
        z-index: 10000000;
    }
    .ham_menu {
        cursor: pointer;
        display: block;
        height: 20px;
        left: 0;
        margin: 0;
        padding: 15px;
        position: absolute;
        top: 0;
        width: 30px;
        z-index: 10000000;
        span {
            background-color: @buttonTextColor;
            display: block;
            height: 3px;
            margin: 0 0 6px;
            width: 30px;
        }
    }
    .video_trips {
        .video_block {
            float: none;
        }
    }
    .MainHelpCenter {
        p {
            img {
                max-width: @mobileDefaultWidth;
                vertical-align: middle;
            }
        }
        table {
            width: 100%;
        }
        .video_ground {
            .video_block {
                margin-left: 0;
            }
        }
        img.screen_guides {
            display: none;
        }
        .block_of_step {
            .screen_block {
                max-width: @mobileDefaultWidth;
                width: auto;
            }
        }
    }
    .VideoMainContainer {
        width: 98%;
        iframe {
            height: 51vw;
            width: @mobileDefaultWidth;
        }
    }
    .bigVideoCont {
        iframe {
            height: 51vw;
            width: @mobileDefaultWidth;
        }
    }
    .textHelpContainer {
        height: auto;
        width: 98%;
        h5 {
            margin-left: 0;
        }
    }
    .text-content {
        ul {
            margin: 0;
        }
    }
    .watchvideo_block {
        display: none;
    }
    .bigphoto_screen {
        border: 1px solid @helpBorderColor;
        display: inline-block;
        margin: 10px 0 20px;
        max-width: @mobileDefaultWidth;
    }
    .GettingStarted {
        .screen_block {
            max-width: @mobileDefaultWidth;
        }
    }
}

@media screen and (max-width: 429px) {
    span.toggler {
        position: relative;
    }
}