Viewing File: /usr/local/cpanel/whostmgr/docroot/templates/menu/command.less

/* ------------------------------------------------------------------------------ */
/* Command (Left Frame)
/* ------------------------------------------------------------------------------ */
@import "mixins.less";

.sidebar {
    margin: 0;
    color: #666666;
    background-color: #fbfbfb;
}

.sidebar {
    .hide {
        display: none;
    }

    .commandContainer,
    .commandContainer *,
    .commandContainer *:before,
    .commandContainer *:after {
        box-sizing: border-box;
        width: inherit;
    }

    /*We need to remove our default margin & padding in order to fill the entire width of the left frame */
    div.commandContainer {
        padding: 0;
        margin: 0;
        height: 100%;
        width: inherit;
        background-color: #fafafa;
        position: relative;
    }

    .searchContainer {
        height: 69px;
        padding: 0 0 0 0;
        background-color: #eaeaea;
    }

    .searchBox {
        width: 100%;
        padding: 4px 0 0 0;
        background: none;
        border: none;
        height: 42px;
    }

    .quickJumpWrapper {
        width: 97%;
        padding: 0 1%;
        position: relative;
    }

    #quickJump {
        width: 210px;
        height: 26px;
        font-size: 14px;
        border: 1px solid #ccc;
        overflow: visible;
        line-height: 26px;
        text-indent: 3px;
        .border-radius(3px);
        background: #ffffff;
        .box-shadow(inset 0 0 1px #ccc);
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: textfield;
    }

    #quickJump:focus {
        border: 1px solid #91a8c2;
        .box-shadow(0 0 6px #708eb0);
        outline: 0;
    }

    .quickJumpIcon {
        width: 25px;
        height: 25px;
        background-color: #fb8115;
        position: absolute;
        top: 5px;
        .border-radiuses(3px, 3px, 0, 0);
    }

    .quickJumpIcon.search {
        background: url(/themes/x/images/filter-search.png) no-repeat scroll 0 0;
    }

    .quickJumpIcon.cancel {
        cursor: pointer;
        background: url(/themes/x/images/filter-cancel.png) no-repeat scroll 0 0;
        .opacity (0.7);
    }

    .quickJumpIcon.cancel:hover {
        .opacity (1);
    }

    .collapseExpandContainer {
        display: inline-block;
        width: 100%;
        overflow: hidden;
    }

    a.collapseExpandButton {
        color: #666666;
        text-align: center;
        width: 109px;
        height: 27px;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
        background-color: #e9e9e9;

        border: 1px solid #bebebe;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-top-color: #d0d0d0;
        outline: none;
    }

    a.collapseExpandButton.expand {
        background-image: url(/themes/x/images/expand-all.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    a.collapseExpandButton.collapse {
        background: url(/themes/x/images/collapse-all.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

    a.collapseExpandButton:hover,
    a.collapseExpandButton:focus {
        color: #444444;
        text-decoration: none;
        background-color: #dfdfdf;
        cursor: pointer;
        .box-shadows(inset 0 3px 5px rgba(0,0,0,0.1),inset 0 -10px 20px rgba(0,0,0,0.03));
        border-color: #bebebe;
        border-color: rgba(0, 0, 0, 0.2);
    }

    a.collapseExpandButton:active {
        .box-shadows(inset 0 3px 5px rgba(0,0,0,0.1),inset 0 -10px 20px rgba(0,0,0,0.03));
        border-color: rgba(0, 0, 0, 0.2);
    }

    /* .hideMainCommand is used by <ul id="mainCommand"> to hide itself when all its
        child elements are hidden. Without hiding itself, it shows unwanted blank space. */
    .mainCommandWrapper ul.hideMainCommand {
        display: none;
    }

    .mainCommandWrapper {
        position: absolute;
        top: 69px;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        width: inherit;
    }

    /*commander list*/
    #mainCommand {
        list-style: none;
        padding: 0;
        font-size: 12px;
        border-right: 1px solid #d0d0d0;
        margin: 0;
        width: 100%;
    }

    ul#mainCommand > :first-child .categoryHeader {
        border-top: none;
        width: inherit;
    }

    #mainCommand li.expanded > ul {
        display: block;
    }

    #mainCommand li.collapsed > ul {
        display: none;
    }

    #mainCommand > :first-child .categoryHeader {
        border-top: none;
    }

    .categoryHeader {
        background-color: #eaeaea;
        display: block;
        cursor: pointer;
        border-bottom: 1px solid #cecece;
        position: relative;
    }

    .categoryHeader a:hover {
        color: #000000;
        text-decoration: none;
    }

    .expanded > .categoryHeader:hover {
        color: #000000;
        border-color: #999999;
        background-color: #c8c8c8;
    }

    .collapsed > .categoryHeader:hover {
        color: #000000;
        border-color: #999999;
        text-shadow: 0 0 1px #e9e9e9;
        background-color: #e2e2e2;
    }

    .categoryHeader.highlighted,
    .categoryHeader.highlighted:hover {
        background-color: #9d9d9d;
        border-color: #7b7b7b #9d9d9d #9d9d9d;
    }

    .categoryHeader a,
    .categoryHeader a:link,
    .categoryHeader a:visited {
        display: block;
        color: #4c4c4c;
        text-decoration: none;
        .text-shadow(0 1px 1px rgba(255, 255, 255, 0.75));
        width: 85%;
        word-wrap: break-word;
    }

    .categoryHeader.highlighted a,
    .categoryHeader.highlighted a:hover,
    .categoryHeader.highlighted a:focus {
        color: #ffffff;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        outline: none;
    }

    .categoryHeader a:focus {
        outline: none;
    }

    .categoryHeader a > img {
        position: absolute;
        top: 7px;
        width: 16px;
        height: 16px;
    }

    .categoryHeader a > span {
        width: 100%;
        cursor: pointer; /* This explicit setting is needed for IE 7 */
    }

    .categoryHeader .actionIconContainer {
        position: absolute;
        top: 0;
        width: 15%;
        height: 100%;
    }

    .categoryHeader .actionIcon {
        width: 30px;
        height: 20px;
        margin: 5px auto;
        background: url(/themes/x/images/expand-sprite.png) no-repeat scroll
            transparent;
    }

    .collapsed .categoryHeader.highlighted .actionIcon {
        background: url(/themes/x/images/expand-sprite.png) no-repeat scroll
            transparent;
    }

    .expanded .categoryHeader .actionIcon {
        background: url(/themes/x/images/expand-sprite.png) no-repeat scroll
            transparent;
    }

    .expanded .categoryHeader.highlighted .actionIcon {
        background: url(/themes/x/images/expand-sprite.png) no-repeat scroll
            transparent;
    }

    /*category sublist*/
    ul.sub {
        color: #4c4c4c;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    ul.sub li {
        padding: 0;
        background-color: #fbfbfb;
        border-top: 1px solid #fbfbfb;
        border-bottom: 1px solid #fbfbfb;
    }

    ul.sub li a {
        text-decoration: none;
        color: #4c4c4c;
        /*Entire li clickable*/
        display: block;
    }

    ul.sub li:hover,
    ul.sub li a:hover {
        background-color: #f5f5f5;
        color: #000000;
    }

    ul.sub li.highlighted {
        background-color: #656565;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
    }

    ul.sub li.highlighted:hover,
    ul.sub li.highlighted a:hover {
        text-shadow: none;
        background-color: #4c4c4c;
    }

    ul.sub li.highlighted a {
        color: #ffffff;
        text-decoration: none;
    }

    ul.sub li.highlighted a:focus {
        outline: 0;
    }

    ul.sub li.even {
        background-color: #ededed;
    }

    /* lighter orange FEA83F
       darker orange  f78e1e */
    ul.sub li.activePage,
    .categoryHeader.activePage {
        border-top-color: #708b92;
        border-bottom-color: #708b92;

        background-color: #293a4a;
        .transition(background-color 0.25s ease-in);
    }

    ul.sub li.activePage a,
    .categoryHeader.activePage > a {
        color: #ffffff;
        text-decoration: none;
        text-shadow: none;
    }

    ul.sub li.activePage:hover,
    ul.sub li.activePage a:hover,
    .categoryHeader.activePage:hover,
    .categoryHeader.activePage.highlighted,
    ul.sub li.highlighted.activePage {
        background: none;
        text-decoration: none;
        text-shadow: none;
        background-color: #293a4a;
    }

    .categoryHeader.activePage.highlighted:hover,
    ul.sub li.highlighted.activePage a:hover {
        background-color: #708b92;
    }

    /* Command Footer */
    .commandFooter {
        margin: 0 auto;
        font-size: 11px;
    }

    .commandFooter .legal {
        padding: 4px 0 4px 0;
        text-align: center;
        background-color: #eaeaea;
        border-top: 1px solid #b1b1b1;
        border-right: 1px solid #d0d0d0;
    }

    .commandFooter .legal a:link,
    .commandFooter .legal a:visited,
    .commandFooter .legal a:active {
        color: #4c4c4c;
        cursor: default;
        text-decoration: underline;
    }

    .commandFooter .legal a:hover,
    .commandFooter .legal a:focus {
        color: #000000;
        cursor: pointer;
        text-decoration: underline;
    }

    .commandFooter .copyright {
        display: block;
        margin: 0 0 4px 0;
        text-align: center;
    }

    .jumpUp,
    .jumpUp:hover {
        border-color: #7b7b7b #9d9d9d #9d9d9d;
        border-right: 1px solid #d0d0d0;
    }

    .wraptext {
        word-wrap: break-word;
        overflow: hidden;
        display: block;
    }

    .categoryHeader a > img.backtotop {
        width: auto;
        height: auto;
    }

    .trademark {
        padding: 0 5px 0 5px;
    }
    .soloWrapper {
        align-content: center;
        width: 50%;
    }
}

html[dir="ltr"] {
    .sidebar {
        #quickJump {
            padding: 3px 0 3px 3px;
        }

        .quickJumpIcon {
            right: 0;
        }

        .categoryHeader a {
            /*padding: 0.583em 0 0.583em 2.3em; */ /*accommodate the icon's size*/
            padding: 6px 0 6px 30px;
        }

        .categoryHeader a > img {
            left: 3px;
        }

        .categoryHeader a > span {
            padding-right: 3px;
        }

        .collapsed .categoryHeader a > span {
            border-right: 1px solid #dadada;
        }

        .collapsed .categoryHeader.highlighted a > span {
            border-right: 1px solid #8c8c8c;
        }

        .expanded .categoryHeader a > span {
            border-right: 1px solid #bfbfbf;
        }

        .expanded .categoryHeader.highlighted a > span {
            border-right: 1px solid #8c8c8c;
        }

        .categoryHeader .actionIconContainer {
            right: 0;
        }

        .categoryHeader .actionIcon {
            right: 0;
            background-position: 2px -129px;
        }

        .collapsed .categoryHeader.highlighted .actionIcon {
            background-position: 2px -179px;
        }

        .expanded .categoryHeader .actionIcon {
            background-position: 1px -29px;
        }

        .expanded .categoryHeader.highlighted .actionIcon {
            background-position: 1px -279px;
        }

        ul.sub li a {
            padding: 4px 0 4px 10px;
        }

        .categoryHeader.activePage .actionIcon,
        .categoryHeader.activePage:hover .actionIcon {
            right: 0;
            background-position: 2px -179px;
        }

        .expanded .categoryHeader.activePage .actionIcon {
            background-position: 1px -29px;
        }

        .collapsed .categoryHeader.activePage a > span {
            border-right: 1px solid #ee7b00;
        }

        .collapsed .categoryHeader.activePage:hover a > span,
        .collapsed .categoryHeader.activePage.highlighted a > span {
            border-right: 1px solid #596b70;
        }

        .expanded .categoryHeader.activePage a > span {
            border-right: 1px solid #ee7b00;
        }

        .expanded .categoryHeader.activePage:hover a > span,
        .expanded .categoryHeader.activePage.highlighted a > span {
            border-right: 1px solid #596b70;
        }
    }
}

html[dir="rtl"] {
    .sidebar {
        #quickJump {
            padding: 3px 3px 3px 0;
        }

        .quickJumpIcon {
            left: 0;
        }

        #mainCommand {
            float: none;
            border-left: 1px solid #d0d0d0;
            border-right: none;
        }

        .categoryHeader a {
            padding: 6px 30px 6px 0;
            width: 85%;
        }

        .categoryHeader a > img {
            right: 9px;
        }

        .categoryHeader a > span {
            padding-left: 3px;
        }

        .collapsed .categoryHeader a > span {
            border-left: 1px solid #dadada;
        }

        .collapsed .categoryHeader.highlighted a > span {
            border-left: 1px solid #8c8c8c;
        }

        .expanded .categoryHeader a > span {
            border-left: 1px solid #bfbfbf;
        }

        .expanded .categoryHeader.highlighted a > span {
            border-left: 1px solid #8c8c8c;
        }

        .categoryHeader .actionIconContainer {
            left: 5px;
        }

        .collapsed {
            .actionIconContainer {
                left: 2px;
            }
        }

        .categoryHeader .actionIcon {
            left: 0;
            background-position: 0 -104px;
        }

        .collapsed .categoryHeader.highlighted .actionIcon {
            background-position: 0 -154px;
        }

        .expanded .categoryHeader .actionIcon {
            background-position: -2px -29px;
        }

        .expanded .categoryHeader.highlighted .actionIcon {
            background-position: -2px -279px;
        }

        ul.sub li a {
            padding: 4px 10px 4px 0;
        }

        .categoryHeader.activePage .actionIcon,
        .categoryHeader.activePage:hover .actionIcon {
            left: 0;
            background-position: 0 -154px;
        }

        .expanded .categoryHeader.activePage .actionIcon {
            background-position: -2px -29px;
        }

        .collapsed .categoryHeader.activePage a > span {
            border-left: 1px solid #ee7b00;
        }

        .collapsed .categoryHeader.activePage:hover a > span,
        .collapsed .categoryHeader.activePage.highlighted a > span {
            border-left: 1px solid #596b70;
        }

        .expanded .categoryHeader.activePage a > span {
            border-left: 1px solid #ee7b00;
        }

        .expanded .categoryHeader.activePage:hover a > span,
        .expanded .categoryHeader.activePage.highlighted a > span {
            border-left: 1px solid #596b70;
        }

        .jumpUp,
        .jumpUp:hover {
            border-left: 1px solid #d0d0d0;
            border-right: none;
        }

        .commandFooter {
            width: 100%;
        }

        .commandFooter .legal {
            border-left: 1px solid #d0d0d0;
            border-right: none;
        }
    }
}

body.nav-collapsed #sidebar {
    display: none;
}