humhub/static/less/mobile.less

// Mixins: Community Navbar horizontal scrolling
.scroll-navbar() {
    width: 100%;
    display: inline !important;
    white-space: nowrap;
    float: left;
    position: relative;
    overflow-x: scroll !important;
}

//
// Mobile Theme style.less
// --------------------------------------------------

// The mobile design will load when screen is less then 768px
@responsive: ~"only screen and (max-width : 768px)";

@media @responsive {

    :root {
        --hh-fixed-header-height: 105px;
    }

    // Layout Contents: Adjusting the contents to fit perfectly on mobile devices
    #layout-content {
        // Layout Space: Space navigation
        .left-navigation {
            .list-group {
                -webkit-overflow-scrolling: auto;
                white-space: nowrap;
                overflow-x: auto;
            }
        }

        .left-navigation .list-group::-webkit-scrollbar {
            -webkit-appearance: none;
        }

        .left-navigation .list-group::-webkit-scrollbar:vertical {
            width: 8px;
        }

        .left-navigation .list-group::-webkit-scrollbar:horizontal {
            height: 8px;
        }

        .left-navigation .list-group::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, .5);
            border-radius: 10px;
            border: 2px solid #ffffff;
        }

        .left-navigation .list-group::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #ffffff;
        }

        // Responsive tables
        .table-responsive::-webkit-scrollbar {
            -webkit-appearance: none;
        }

        .table-responsive::-webkit-scrollbar:vertical {
            width: 8px;
        }

        .table-responsive::-webkit-scrollbar:horizontal {
            height: 8px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, .5);
            border-radius: 10px;
            border: 2px solid #ffffff;
        }

        .table-responsive::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #ffffff;
        }


        .panel {
            margin-bottom: 5px;

            .statistics {
                .entry {
                    margin-left: 10px;
                }
            }
        }

        > .container {
            padding-right: 2px !important;
            padding-left: 2px !important;

            .row {
                margin-right: -2px !important;
                margin-left: -2px !important;
            }

            .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
                padding-right: 2px !important;
                padding-left: 2px !important;
            }
        }

        .layout-nav-container .panel-heading {
            display: none;
        }

        .panel-profile-header {
            #profilefileupload, .profile-user-photo-container, .space-acronym {
                height: 100px !important;
                width: 100px !important;
            }

            .profile-user-photo {
                height: 95px !important;
                width: 95px !important;
            }
        }

        .image-upload-container .image-upload-buttons {
            right: 2px !important;
        }


        // Space
        .panel-profile .panel-profile-header .img-profile-header-background {
            min-height: 80px !important;
        }

        .panel-profile .panel-profile-header .img-profile-data {
            padding-top: 50px !important;
            padding-left: 125px;
        }
    }

    // MODAL
    .modal-dialog {
        width: calc(100vw - 4px) !important;
        padding: 0 !important;
        margin: 2px !important;
    }

    .dropdown-menu {
        max-width: 320px;
        > li:not(.dropdown-header) a {
            padding-top: 10px;
            padding-bottom: 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }

    select.form-control:not([multiple]) {
        padding-right: 23px;
        width: auto;
    }

    .modal.in {
        padding-right: 0 !important;
    }

    // STREAM
    .load-suppressed {
        margin-top: -8px;
        margin-bottom: 5px;
    }

    // Richtext
    .ProsemirrorEditor .ProseMirror-menuitem {
        font-size: 1.2em !important;
    }
}