responsive.scss

@use "../mixins/colors.scss";
@import "breakpoints";
@import "buttons";
@import "sidebar";

$header-bar-container-height: 40px;

$responsive-menu-width: 1.5 * $sidebar-width;

$sidebarIn: -15px;
$sidebarOut: -330px;

#responsive-toggle-desktop,
#responsive-toggle-fullscreen,
#responsive-toggle-focusmode {
    display: none;
}

#responsive-toggle-fullscreen,
#responsive-toggle-focusmode {
    img {
        cursor: pointer;
    }
}

#non-responsive-toggle-fullscreen {
    margin-left: auto;

    button {
        padding: 0;
    }

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}


#responsive-menu {
    font-size: $font-size-base;
    margin-top: 4px;
    z-index: 1002;

    .responsive-navigation-header {
        display: flex;
        padding: 2px 0;

        .menu-closed {
            cursor: pointer;
            transform: rotate(0deg);
            transition: var(--transition-duration) ease-in-out;
        }

        .menu-open {
            cursor: pointer;
            transform: rotate(90deg);

            transition: var(--transition-duration) ease-in-out;
        }
    }

}

#responsive-navigation-button:not(.slide-enter-active):not(.slide-leave-active) {
    cursor: pointer;
    margin-left: -3px;
}

#responsive-navigation-items {
    background-color: var(--base-color);
    left: 0;
    max-height: calc(100vh - $header-bar-container-height - 5px);
    max-width: $responsive-menu-width;
    overflow-y: auto;
    padding-bottom: 5px;
    position: fixed;
    top: 40px;

    /* Safari only */
    @media not all and (min-resolution: .001dpcm) {
        @supports (-webkit-appearance: none) {
            top: 43px;
        }
    }

    width: $responsive-menu-width;

    transition: all var(--transition-duration) ease-in-out;

    header {
        background-image: url("#{$image-path}/sidebar/noicon-sidebar.png");
        background-size: cover;
        display: flex;
        flex-wrap: wrap;
        max-height: 250px;
        overflow-y: auto;
        padding: 10px;

        .profile-info {
            flex: auto;
            font-size: $font-size-small;
            padding: 20px;
            position: relative;

            .profile-pic {
                width: 100%;

                img,
                svg {
                    cursor: pointer;
                    height: 50px;
                    width: 50px;
                }
            }
        }

        > div {
            display: flex;
            width: 100%;

            .avatar-navigation {
                flex: auto;
                padding-left: 10px;

                .navigation-item {
                    background-color: transparent;

                    &:hover {
                        background-color: var(--base-color-80);
                    }
                }
            }
        }

        .open-avatarmenu,
        .close-avatarmenu {
            button {
                cursor: pointer;
                position: relative;
                top: calc(50% - 12px);
            }
        }
    }

    .main-navigation {
        margin: 0 5px;
        padding: 0 5px;
    }

    .navigation-item {
        background-color: var(--base-color);
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        margin: 0px;

        &:not(:last-child) {
            border-bottom: 1px solid var(--white);
        }

        &.navigation-up,
        &.navigation-current {
            .navigation-icon {
                img {
                    padding-top: 0;
                }
            }

            .navigation-title {
                padding: 10px 10px 10px 0;
            }

            &:hover {
                background-color: var(--base-color-80);
            }

        }

        &.navigation-item-active {
            background-color: var(--base-color-80);
        }

        a {
            color: var(--white);
            cursor: pointer;
        }

        button {
            color: var(--white);
            cursor: pointer;
            display: flex;
            flex: 0;
            text-align: center;
            width: 100%;

            img,
            svg {
                padding-top: 12px;
            }

            &.navigation-in {
                border-left: 1px solid var(--base-color-60);
            }
        }

        &:not(.navigation-current):not(.navigation-up) {
            button:hover {
                background-color: var(--base-color-80);
            }
        }

    }

    .navigation-title {
        color: var(--white);
        flex: 1;

        > a,
        button {
            display: inline-block;
            padding: 10px 10px 10px 5px;
            text-align: left;
            width: calc(100% - 15px);

            .navigation-icon {
                flex: 0;
                width: 35px;
            }

            .navigation-text {
                flex: 1;
                padding-top: 2px;
                vertical-align: text-bottom;
            }

        }

        img,
        svg {
            &:not(.avatar) {
                filter: contrast(0) brightness(2);
            }
            margin-right: 10px;
            vertical-align: text-bottom;
        }

    }

    a {
        flex: 0;

        &:hover {
            background-color: var(--base-color-80);
        }

    }

    img, svg {
        vertical-align: text-bottom;
    }
}

#responsive-contentbar-container {
    position: fixed;
    width: 100vw;
    z-index: 1000;
}

.responsive-display,
.fullscreen-mode body:not(.consuming_mode) {

    body {
        display: inherit;
    }

    #responsive-menu {
        flex: 0 0 36px;
    }

    #site-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #quicksearch_item,
    #avatar-menu-container,
    #current-page-structure {
        display: none;
    }

    #header-links {
        > ul {
            > li:not(#responsive-toggle-fullscreen):not(#responsive-toggle-focusmode):not(.helpbar-container) {
                display: none;
            }

            > li.helpbar-container {
                float: unset;
                margin-top: 5px;
            }
        }

        #notification-container,
        .header_avatar_container,
        #sidebar-menu {
            display: none;
        }
    }

    #navigation-level-1 {
        display: none;
    }

    #sidebar {
        background-color: var(--white);
        max-height: calc(100vh - 100px);
        margin-top: 60px;
        left: 15px;
        position: absolute;
        top: 116px;
        transform: translateX($sidebarOut);
        visibility: hidden;
        z-index: 100;

        &.responsive-hide {
            animation: slide-out var(--transition-duration) backwards;
        }

        &.responsive-show {
            animation: slide-in var(--transition-duration) forwards;
            position: sticky;
            top: 110px;
            visibility: visible;
        }

        > .sidebar-widget {
            margin-top: 0;
        }

        > .sidebar-widget ~ .sidebar-widget {
            margin-top: 15px;
        }

        @keyframes slide-in {
            0% {
                transform: translateX($sidebarOut);
            }
            100% {
                transform: translateX($sidebarIn);
            }
        }


        @keyframes slide-out {
            0% {
                transform: translateX($sidebarIn);
            }
            100% {
                transform: translateX($sidebarOut);
            }
        }
    }

    #sidebar-navigation {
        display: none !important;
    }

    #current-page-structure {
        #navigation-level-2 {
            display: none !important;
        }
    }

    #content-wrapper {
        margin-top: 65px;
        width: calc(100vw - 2 * $page-margin);
    }

    .cw-ribbon-sticky-bottom,
    .cw-ribbon-sticky-spacer,
    .cw-ribbon-sticky-top {
        display: none;
    }

    #responsive-contentbar {
        .contentbar-nav,
        .cw-ribbon-nav {
            .contentbar-button {

                &.contentbar-button-sidebar {
                    cursor: pointer;
                    margin-right: 10px;

                    img {
                        transform: rotate(0deg);
                    }

                    &.contentbar-button-sidebar-open {
                        img {
                            transform: rotate(180deg);
                        }
                    }
                }
            }

            img {
                vertical-align: middle;
            }
        }

        .cw-ribbon-tools {
            right: 16px;
        }

    }

    #toc {
        margin-right: -2px;
        margin-top: -7px;
    }

    #main-footer {
        display: none;
    }
}

.responsive-display:not(.fullscreen-mode) {
    #top-bar {
        padding: 0 3px;
    }

    #index,
    #login {
        #top-bar {
            padding: 0 20px;
        }

        #responsive-contentbar-container {
            display: none;
        }
    }

    #responsive-menu {
        margin-left: -7px;
        padding: 0 5px;
        width: calc(100% - 56px);
    }

    #responsive-navigation-items {
        max-width: unset;
        width: 100%;
    }

    #responsive-contentbar {
        &.cw-ribbon-sticky {
            position: unset;
            width: unset;
        }

        .cw-ribbon-breadcrumb {
            max-width: 100%;
            min-width: unset;
        }

        .cw-ribbon-info-text,
        .contentbar-icon {
            display: none;
        }

        &:not(.cw-ribbon) {
            .contentbar-wrapper-left {
                flex: 1;
                max-width: 100%;
                text-overflow: ellipsis;
            }
        }

        .cw-ribbon-tools {
            max-width: 100vw;
            right: 0;
        }
    }

    #toggle-sidebar {
        margin-left: -10px;
    }

    #sidebar {
        border-right: none;
        height: calc(100% - 100px);
        margin-top: 0;
        overflow-y: auto;
        position: fixed;
        transform: translateX($sidebarOut);
        -webkit-transform: translateX($sidebarOut);
        top: 110px;
        z-index: 100;

        &.responsive-show {
            width: calc(100% - 15px);

            .sidebar-widget {
                width: calc(100% - 30px);
            }
        }
    }

    #toc {
        margin-right: -16px;
        max-width: 100vw;
        width: 100vw;
    }

    #system-notifications {
        top: 0;
        position: fixed;
        left: 0;
        width: 100%;
        z-index: 1001;
    }

    .system-notification {
        &.system-notification-slide-enter,
        &.system-notification-slide-leave-to {
            transform: translateY(-100%);
        }

        &.system-notification-slide-leave,
        &.system-notification-slide-enter-to {
            transform: translateY(0);
        }
    }
}

/* Settings especially for fullscreen mode */
.fullscreen-mode:not(.responsive-display) {
    body:not(.consuming_mode) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        &.fullscreen-sidebar-shown {
            display: grid;
            grid-template-columns: ($sidebar-width + $sidebar-padding) calc(100vw - $sidebar-width - $sidebar-padding - 35px);

            #content-wrapper {
                max-width: calc(100% - $sidebar-padding);
            }
        }

        #top-bar {
            max-height: unset;
            opacity: 1;
            overflow: unset;
        }

        #main-header {
            flex-basis: 100%;
        }

        #header-links {
            margin-left: auto;

            ul {
                li {
                    &:not(#responsive-toggle-fullscreen):not(#responsive-toggle-focusmode) {
                        padding: 0;
                    }

                    .helpbar-container {
                        right: 0;
                    }
                }
            }
        }

        #responsive-toggle-fullscreen,
        #responsive-toggle-focusmode {
            margin-top: 4px;
            padding: 4px 0 0;
        }

        #responsive-toggle-fullscreen {
            display: block;
        }

        .contentbar:not(#responsive-contentbar) {
            display: none;
        }

        #responsive-contentbar {
            padding-left: 15px;

            .contentbar-nav,
            .cw-ribbon-nav {
                margin-left: -6px;
            }
        }

        #content-wrapper {
            flex: 1;
            margin-top: 55px;
            min-height: calc(100vh - 150px);
        }
    }
}

.consuming_mode {
    display: unset;
    overflow-y: auto;

    #skip_link_navigation,
    #main-header,
    #sidebar,
    #main-footer,
    #wikifooter {
        display: none;
    }

    #content-wrapper {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: $max-content-width;
        min-height: 100vh;
        padding-top: 10px;
    }

    #content {
        .contentbar {
            margin: 10px;
            padding-left: 20px;
            padding-right: 20px;
            width: calc(100% - 60px);

            .action-menu {
                display: none;
            }
        }

        .cw-structural-element-consumemode {
            position: unset;

            .cw-container-wrapper-consume {
                padding-top: 15px;
            }

            .cw-ribbon-wrapper-consume {
                position: unset;

                .cw-ribbon-consume {
                    position: unset;

                    .cw-ribbon-consume-bottom {
                        display: none;
                    }
                }
            }
        }
    }

    #toc {
        margin-right: 12px;
    }
}

html:not(.responsive-display):not(.fullscreen-mode) {
    #responsive-navigation {
        display: none;
    }

    body.fixed {
        #responsive-navigation {
            display: block;
        }

        #responsive-navigation-items {
            margin-top: -5px;
            width: 100%;
        }

        // See https://github.com/ckeditor/ckeditor5/issues/5465 why this is necessary
        .ck .ck-sticky-panel .ck-sticky-panel__content_sticky {
            top: 120px !important;
        }
    }

}

/* content from old responsive.less */
.responsive-display {
    @include media-breakpoint-small-down() {
        #navigation-level-1,
        #navigation-level1-items,
        .current_page,
        #tabs,
        #footer,
        .tabs_wrapper .colorblock {
            display: none !important;
        }

        #layout_wrapper #current-page-structure {
            #navigation-level-2 {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;

                background-color: var(--dark-gray-color-10);
                border-bottom: 1px solid var(--dark-gray-color-40);

                .colorblock,
                #context-title,
                .context_icon,
                .tabs_wrapper {
                    transition: unset;
                }

                #context-title,
                .tabs_wrapper {
                    background: transparent;
                    border-width: 0;
                    flex: 1;
                }

                #context-title {
                    flex: 1;

                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    + .tabs_wrapper {
                        flex: 0;
                        align-self: flex-end;
                    }
                }
            }
        }
        #layout_wrapper #current-page-structure .tabs_wrapper {
            justify-content: flex-end;
            .helpbar-container {
                top: 0px;
                right: 6px;
            }
        }
        .responsive-hidden {
            display: none;
        }
        #notification_marker {
            display: inline-block;
            margin-top: 0;
            vertical-align: initial;

            width: 22px;
            padding-left: 5px;
            padding-right: 5px;
            height: 20px;
            line-height: 20px;
        }

        #avatar-menu-container {
            position: relative;
            bottom: 0px;
            right: 0px;
            line-height: 20px !important;

            #avatar-menu {
                display: none;
            }

            &::after {
                display: none !important;
            }
        }

        #top-bar {
            box-sizing: border-box;
            height: $header-bar-container-height;
            position: fixed;
            top: 0;
            margin-left: 0px;
            margin-right: 0px;
            width: 100%;
        }

        #header-links, #header-links ul {
            box-sizing: border-box;
            flex: 1;
        }

        #header-links {
            flex: 1 !important;
            .list {
                &::before,
                &::after {
                    display: none;
                }
                $width: 300px;
                $arrow-height: 10px;

                margin-top: 2px;
                width: $width;
                max-width: $width;

                &.below {
                    left: (-$width + 90px);
                    &:before {
                        left: ($width - 90px);
                    }
                }

            }

            > ul > li {
                flex: 1 0 auto;

                &:first-child {
                    flex: 1 1 100%;
                }
            }
        }

        #notification-container {
            position: inherit !important;
            /*top: 8px;*/
            width: 32px;
            height: 20px;
        }

        #responsive-container {
            display: block;
        }

        #current-page-structure {
            margin-left: 0;
            margin-right: 0;
        }

        #current-page-structure,
        #top-bar,
        #navigation-level-1 {
            min-width: inherit !important;
        }

        #index,
        #login,
        #request_new_password,
        #web_migrate {
            #background-desktop,
            #background-mobile {
                position: fixed;
            }
        }
    }

    @include media-breakpoint-tiny-down() {
        #index,
        #login,
        #request_new_password,
        #web_migrate {

            #responsive-contentbar {
                display: none;
            }

            #content {
                margin: 0;
                padding: 0;

                .messagebox {
                    margin: 0;
                    width: calc(100vw - 74px);
                }
            }

        }

        #header-links {
            display: none;
        }

        #background-desktop {
            display: none;
        }

        #background-mobile {
            display: inherit;
            width: 100vw;
            height: 100vh;
            top:0;
            left: 0;
        }

        #loginbox,
        #faq_box {
            box-shadow: unset;
            margin: 0;
            width: calc(100vw - 40px);

            nav ul {
                display: flex;
                flex-direction: column;
                width: 100%;

                .login_link {
                    width: unset;
                }
            }
        }

        #faq_box {
            margin: -20px 0 0 0;
        }
    }
}

.responsive-display {
    #quicksearch_item {
        padding: 0;
    }
    #search_sem_quick_search_frame {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        .quicksearchbox {
            transition: all var(--transition-duration);
            opacity: 0;
            max-width: 0;
        }

        &.open {
            .quicksearchbox {
                opacity: 1;
                max-width: 1000px;
                width: 100% !important;
            }
        }
    }

    #header-links {
        ul {
            li:first-child {
                flex: 1 0 auto;
            }
            li#quicksearch_item {
                flex: 1 1 100%;
            }
        }
    }

    table.default tfoot .button {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .ui-dialog.ui-widget.ui-widget-content.studip-confirmation {
        min-width: 20vw;
        max-width: 100vw;
    }

    #system-notifications.bottom-right {
        bottom: unset;
        left: 0;
        right: unset;
        top: 0;

        &:not(.system-notifications-login) {
            width: 100%;
        }

        .system-notification {
            &.system-notification-slide-enter,
            &.system-notification-slide-leave-to {
                opacity: 0;
                transform: translateY(-100%);
            }

            &.system-notification-slide-leave,
            &.system-notification-slide-enter-to {
                opacity: 1;
                transform: translateY(0);
            }

            &.system-notification-slide-enter-active,
            &.system-notification-slide-leave-active {
                transition: all var(--transition-duration-slow) ease-in-out;
            }

        }
    }
}