MediaWiki:Chameleon.less

/***** MS-Learn styled left nav *****/

/* column itself */

1. navMenu {

 width: 280px;                     /* MS Learn default */
 height: 100vh;                    /* full-height sticky */
 overflow-y: auto;
 background: #F8F9FA;              /* light grey */
 border-right: 1px solid #E1E1E1;
 font-family: "Segoi UI", Arial, sans-serif;
 scrollbar-width: thin;            /* Firefox */

}

1. navMenu::-webkit-scrollbar { width: 8px; }
2. navMenu::-webkit-scrollbar-thumb {

 background: #C4C4C4;
 border-radius: 4px;

}

/* top title */

1. namespaceTitle {

 padding: 12px 24px 8px 24px;
 color: #242424;
 font-size: 1.1rem;
 font-weight: 600;
 border-bottom: 1px solid #E1E1E1;

}

/* search box */

1. custom-searchContainer {

 margin: 16px 24px;

}

1. custom-search-input {

 background: #fff;
 border: 1px solid #C8C8C8;
 border-radius: 4px;
 height: 36px;
 padding-left: 38px;               /* leave room for the icon */
 font-size: .875rem;

}

1. custom-searchContainer i.fa-search {

 position: absolute;
 left: 12px; top: 50%;
 transform: translateY(-50%);
 color: #6B6B6B;
 pointer-events: none;

}

/* section headers (level-1 groups) */ .menu-section > .menu-header {

 padding: 10px 24px;
 cursor: pointer;
 font-weight: 600;
 font-size: .9rem;
 color: #242424;
 user-select: none;

} .menu-section > .menu-header:hover {

 background: #EDEDED;

}

/* chevron rotation */ .menu-header i.fa-angle-right {

 transition: transform .2s;

} .menu-section.open > .menu-header i.fa-angle-right {

 transform: rotate(90deg);

}

/* level 1 list */ .menu-section > .submenu {

 list-style: none;
 margin: 0;
 padding: 0;

}

/* leaf items */ .menu-item > a {

 display: block;
 padding: 8px 24px 8px 48px;       /* indent */
 font-size: .875rem;
 color: #242424;
 text-decoration: none;
 transition: background .15s;

} .menu-item > a:hover {

 background: #EDEDED;

}

/* active page highlight (MS Learn blue bar) */ .menu-item.current-page > a {

 border-left: 4px solid #0067B8;   /* MS blue */
 background: #E1F3FF;
 padding-left: 44px;               /* compensate for the 4-px bar */
 font-weight: 600;

}

/* nested sections (any depth > 1) */ .menu-section ul ul .menu-item > a {

 padding-left: 68px;               /* deeper indent */

}

/* hide default bullets */ .menu-item, .submenu { list-style: none; }