rhodecode/public/css/navigation.less

// navigation.less
// For use in RhodeCode applications;
// see style guide documentation for guidelines.

// TOP MAIN DARK NAVIGATION

.header .main_nav.horizontal-list {
    float: right;
    color: @grey4;
        > li {
            a {
                color: @grey4;
                }
            }
}

// HEADER NAVIGATION

.horizontal-list {
    display: block;
    margin: 0;
    padding: 0;
    -webkit-padding-start: 0;
    text-align: left;
    font-size: @navigation-fontsize;
    color: @grey6;
    z-index:10;

    li {
        line-height: 1em;
        list-style-type: none;
        margin: 0 20px 0 0;

        a {
            padding: 0 .5em;

            &.menu_link_notifications {
                .pill(7px,@rcblue);
                display: inline;
                margin: 0 7px 0 .7em;
                font-size: @basefontsize;
                color: white;

                &.empty {
                    background-color: @grey4;
                }

                &:hover {
                    background-color: @rcdarkblue;
                }
            }
        }
        .pill_container {
            margin: 1.25em 0px 0px 0px;
            float: right;
        }

        &#quick_login_li {
            &:hover {
                color: @grey5;
            }

            a.menu_link_notifications {
                color: white;
            }

            .user {
                padding-bottom: 10px;
            }
        }

        &:before { content: none; }

        &:last-child {
            .menulabel {
                padding-right: 0;
                border-right: none;

                .show_more {
                    padding-right: 0;
                }
            }

            &> a {
                border-bottom: none;
            }
        }

        &.open {

            a {
                color: white;
            }
        }

        &:focus {
            outline: none;
        }

        ul li  {
            display: block;

            &:last-child> a {
                border-bottom: none;
            }

            ul li:last-child a {
                /* we don't expect more then 3 levels of submenu and the third
                level can have different html structure */
                border-bottom: none;
            }
        }
    }

    > li {
        float: left;
        display: block;
        padding: 0;

        > a,
        &.has_select2 a {
            display: block;
            padding: 10px 0;
        }

        .menulabel {
            line-height: 1em;
            // for this specifically we do not use a variable
        }

        .pr_notifications {
            padding-left: .5em;
        }

        .pr_notifications + .menulabel {
            display:inline;
            padding-left: 0;
        }

        &:hover,
        &.open,
        &.active {
            a {
                color: @rcblue;
            }
        }
    }

    pre {
        margin: 0;
        padding: 0;
    }

    .select2-container,
    .menulink.childs {
        position: relative;
    }

    #quick_login {

        li a {
            padding: .5em 0;
            border-bottom: none;
            color: @grey2;

            &:hover { color: @grey1; }
        }
    }

    #quick_login_link {
        display: inline-block;

        .gravatar {
            border: 1px solid @grey5;
        }

        .gravatar-login {
            height: 20px;
            width: 20px;
            margin: -8px 0;
            padding: 0;
        }

        &:hover .user {
            color: @grey6;
        }
    }
}
.header .horizontal-list {

    li {

        &#quick_login_li {
            padding-left: .5em;

            &:hover #quick_login_link {
                color: inherit;
            }

            .menu_link_user {
                padding: 0 2px;
            }
        }
        list-style-type: none;
    }

    > li {

        a {
            padding: 18px 0 12px 0;
            color: @nav-grey;

            &.menu_link_notifications {
                padding: 1px 8px;
            }
        }

        &:hover,
        &.open,
        &.active {
            .pill_container a {
                // don't select text for the pill container, it has it' own
                // hover behaviour
                color: @nav-grey;
            }
        }

        &:hover,
        &.open,
        &.active {
            a {
                color: @grey6;
            }
        }

        .select2-dropdown-open a {
            color: @grey6;
        }

        .repo-switcher {
            padding-left: 0;

            .menulabel {
                padding-left: 0;
            }
        }
    }

    li ul li  {
        background-color:@grey2;

        a {
            padding: .5em 0;
            border-bottom: @border-thickness solid @border-default-color;
            color: @grey6;
        }

         &:last-child a, &.last a{
            border-bottom: none;
        }

        &:hover {
            background-color: @grey3;
        }
    }

    .submenu {
        margin-top: 5px;
    }
}

// SUBMENUS
.navigation .submenu {
    display: none;
}

.navigation li.open {
    .submenu {
        display: block;
    }
}

.navigation li:last-child .submenu {
    right: auto;
    left: 0;
    border: 1px solid @grey5;
    background: @white;
    box-shadow: @dropdown-shadow;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    margin: 2px 0 0;
    padding: 0;
    text-align: left;
    font-family: @text-light;
    border-radius: @border-radius;
    z-index: 20;

    li {
        display: block;
        margin: 0;
        padding: 0 .5em;
        line-height: 1em;
        color: @grey3;
        background-color: @white;
        list-style-type: none;

        a {
            display: block;
            width: 100%;
            padding: .5em 0;
            border-right: none;
            border-bottom: @border-thickness solid white;
            color: @grey3;
        }

        ul {
            display: none;
            position: absolute;
            top: 0;
            right: 100%;
            padding: 0;
            z-index: 30;
        }
        &:hover {
            background-color: @grey7;
            -webkit-transition: background .3s;
               -moz-transition: background .3s;
                 -o-transition: background .3s;
                    transition: background .3s;

            ul {
                display: block;
            }
        }
    }

}




// repo dropdown
.quick_repo_menu {
    width: 15px;
    text-align: center;
    position: relative;
    cursor: pointer;

    div {
        overflow: visible !important;
    }

    &.sorting {
        cursor: auto;
    }

    &:hover {
        .menu_items_container {
            position: absolute;
            display: block;
        }
        .menu_items {
            display: block;
        }
    }

    i {
        margin: 0;
        color: @grey4;
    }

    .menu_items_container {
        position: absolute;
        top: 0;
        left: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: @grey6;
        z-index: 999;
        text-align: left;

        a {
            color: @grey2;
        }

        ul.menu_items {
            margin: 0;
            padding: 0;
        }

        li {
            margin: 0;
            padding: 0;
            line-height: 1em;
            list-style-type: none;

            a {
                display: block;
                height: 16px;
                padding: 8px; //must add up to td height (28px)
                width: 120px; // set width

                &:hover {
                    background-color: @grey5;
                    -webkit-transition: background .3s;
                       -moz-transition: background .3s;
                         -o-transition: background .3s;
                            transition: background .3s;
                }
            }
        }
    }
}

// Header Repository Switcher
// Select2 Dropdown
#select2-drop.select2-drop.repo-switcher-dropdown  {
    width: auto !important;
    margin-top: 5px;
    padding: 1em 0;
    text-align: left;
    .border-radius-bottom(@border-radius);
    border-color: transparent;
    color: @grey6;
    background-color: @grey2;

    input {
        min-width: 90%;
    }

    ul.select2-result-sub {

        li {
            line-height: 1em;

            &:hover,
            &.select2-highlighted {
                background-color: @grey3;
            }
        }

        &:before { content: none; }
    }

    ul.select2-results {
        min-width: 200px;
        margin: 0;
        padding: 0;
        list-style-type: none;
        overflow-x: visible;
        overflow-y: scroll;

        li {
            padding: 0 8px;
            line-height: 1em;
            color: @grey6;

            &>.select2-result-label {
                padding: 8px 0;
                border-bottom: @border-thickness solid @grey3;
                white-space: nowrap;
                color: @grey5;
                cursor: pointer;
            }

            &.select2-result-with-children {
                margin: 0;
                padding: 0;
            }

            &.select2-result-unselectable > .select2-result-label {
                margin: 0 8px;
            }

        }
    }

    ul.select2-result-sub {
        margin: 0;
        padding: 0;

        li {
            display: block;
            margin: 0;
            border-right: none;
            line-height: 1em;
            font-family: @text-light;
            color: @grey2;
            list-style-type: none;

            &:hover {
                background-color: @grey3;
            }
        }
    }
}


#context-bar {
    display: block;
    margin: 0 auto 20px 0;
    padding: 0 @header-padding;
    background-color: @grey7;
    border-bottom: 1px solid @grey5;

    .clear {
        clear: both;
    }
}

ul#context-pages {
    li {
        list-style-type: none;

        a {
            color: @grey2;

            &:hover {
                color: @grey1;
            }
        }

        &.active {
            // special case, non-variable color
            border-bottom: 2px solid @rcblue;

            a {
                color: @rcblue;
            }
        }
    }
}

// PAGINATION

.pagination {
    border: @border-thickness solid @grey5;
    color: @grey2;
    box-shadow: @button-shadow;

    .current {
        color: @grey4;
    }
}

.dataTables_processing {
    text-align: center;
    font-size: 1.1em;
    position: relative;
    top: 95px;
}

.dataTables_paginate, .pagination-wh {
    text-align: left;
    display: inline-block;
    border-left: 1px solid @grey5;
    float: none;
    overflow: hidden;
    box-shadow: @button-shadow;

    .paginate_button, .pager_curpage,
    .pager_link, .pg-previous, .pg-next, .pager_dotdot {
        display: inline-block;
        padding: @menupadding/4 @menupadding;
        border: 1px solid @grey5;
        border-left: 0;
        color: @grey2;
        cursor: pointer;
        float: left;

        &:hover {
            color: @rcdarkblue;
        }
    }

    .paginate_button.disabled,
    .disabled {
        color: @grey3;
        cursor: default;
        opacity: 0.5;
    }

    .paginate_button.current, .pager_curpage {
        background: @rcblue;
        border-color: @rcblue;
        color: @white;
    }

    .ellipsis {
        display: inline-block;
        text-align: left;
        padding: @menupadding/4 @menupadding;
        border: 1px solid @grey5;
        border-left: 0;
        float: left;
    }
}

// SIDEBAR

.sidebar {
    .block-left;
    clear: left;
    max-width: @sidebar-width;
    margin-right: @sidebarpadding;
    padding-right: @sidebarpadding;
    font-family: @text-regular;
    color: @grey1;

    &#graph_nodes {
        clear:both;
        width: auto;
        margin-left: -100px;
        padding: 0;
        border: none;
    }

    .nav-pills {
        margin: 0;
    }

    .nav {
        list-style: none;
        padding: 0;

        li {
            padding-bottom: @menupadding;
            line-height: 1em;
            color: @grey4;
            list-style-type: none;

            &.active a {
                color: @grey2;
            }

            a {
                color: @grey4;
            }
        }

    }
}

.main_filter_help_box {
    padding: 7px 7px;
    display: inline-block;
    vertical-align: top;
    background: inherit;
    position: absolute;
    right: 0;
    top: 9px;
}

.main_filter_input_box {
    display: inline-block;

    .searchItems {
        display:flex;
        background: @black;
        padding: 0px;
        border-radius: 3px;
        border: 1px solid @black;

        a {
            border: none !important;
        }
    }

    .searchTag {
        line-height: 28px;
        padding: 0 5px;

        .tag {
            color: @grey5;
            border-color: @grey2;
            background: @grey1;
        }
    }

    .searchTagFilter {
        background-color: @black !important;
        margin-right: 0;
    }

    .searchTagHelp {
        background-color: @grey1 !important;
        margin: 0;
    }
    .searchTagHelp:hover {
        background-color: @grey1 !important;
    }
    .searchTagInput {
        background-color: @grey1 !important;
        margin-right: 0;
    }
}

.main_filter_box {
    margin: 9px 0 0 0;
}

#main_filter_help {
    background: @grey3;
    border: 1px solid black;
    position: absolute;
    white-space: pre;
    z-index: 9999;
    color: @nav-grey;
    margin: 1px 7px;
    padding: 0 10px;
}

input {

    &.main_filter_input {
        padding: 5px 10px;
        min-width: 260px;
        color: @grey7;
        background: @black;
        min-height: 18px;
        border: 0;

        &:active {
          color: @grey2 !important;
          background: white !important;
        }
        &:focus {
          color: @grey2 !important;
          background: white !important;
        }
    }
}



.main_filter_input::placeholder {
    color: @nav-grey;
    opacity: 1;
}

.notice-box {
    display:block !important;
    padding: 9px 0 !important;
}

.menulabel-notice {
    border: 1px solid @color5;
    padding:7px 10px;
    color: @color5;
}