header.scss

/* --- header.css ----------------------------------------------------------- */
#main-header {
    box-sizing: border-box;
    padding-top: $bar-bottom-container-height;
}

#top-bar {
    background-color: $base-color;
    border: 1px $brand-color-darker;
    color: $contrast-content-white;
    border-bottom-style: solid;
    height: $bar-bottom-container-height;
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;

    padding: 0 10px;
    transform: translate(0, 0) !important; // We need !important due to the horizontal scroll handler
    position: fixed;
    top: 0;
    z-index: 1000;

}

#responsive-menu,
#site-title {
    flex: 0 0 auto;
    z-index: 2;
}

#site-title {
    padding: 0 5px;
}

// Fix header covering relevant other areas
// $see https://gitlab.studip.de/studip/studip/-/issues/1019
html {
    scroll-padding-top: calc($bar-bottom-container-height + 1em);
}

#header-links {
    > ul > li > a {
        color: $white;
        margin: 0 6px;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}

#header-links {
    flex: 0 1 auto;
    justify-self: flex-end;
    > ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style-type: none;
        height: 40px;
        padding: 0;
        > li {
            margin: 2px;
            padding: 0 10px;
        }
    }
}

#avatar-menu-container {
    display: inline-flex;
}

#avatar-menu {
    height: 30px;
    margin: 0;
    vertical-align: text-bottom;
    z-index: 1003;

    .action-menu-icon {
        border: 1px solid $dark-gray-color-40;
        background-color: $dark-gray-color-5;
        height: 28px;
        margin: 0 32px 0 0;
        position: relative;
        width: 28px;
        z-index: 1;

        img {
            height: 100%;
            width: 100%;
        }

        // Add arrow on the right
        @include icon(after, arr_1down, info_alt);

        &::after {
            background-position: center;
            background-repeat: no-repeat;
            padding: 7px 8px;
            position: absolute;
            left: 100%;
            top: 0;
        }
    }
}
.action-menu.avatar-menu {
    z-index: 1002;

    .action-menu-title{
        margin: 0 0 0.3em;
    }

    .action-menu-content {
        position: absolute;
        top: 41px;
        right: 0;

        /*padding: 4px 28px 4px 8px;*/
        background: $white;
        box-shadow: 1px 1px 1px $dark-gray-color-60;
        text-align: left;
        white-space: nowrap;

        a:link,
        a:visited {
            color: $base-color;
        }
        a:hover,
        a:active {
            color: $active-color;
        }

        div {
            color: $black;
        }
    }
}

.header_avatar_container {
    align-items: end;
    flex: 0;
}

#site-title {
    flex: 1;
    color: $white;
    margin-left: 0;
    z-index: 1002;
    line-height: $bar-bottom-container-height;
    white-space: nowrap;
}

.studip-logo {
    @include hide-text();
    background-repeat: no-repeat;

    @include retina-background-image('logos/studip4-logo.png', 'logos/studip4-logo@2x.png', 130px, 92px);
    background-image: none, url("#{$image-path}/logos/studip4-logo.svg");

    background-size: 130px 92px;
    display: block;
    width: 130px;
    height: 81px;
}

#top-logo {
    margin-left: 20px;
    margin-right: 12px;
}

#navigation-level-1 {
    background-color: $dark-gray-color-5;
    height: $header-height;
    z-index: 3;
}