MediaWiki:Vector.less/navbox.less

/* ===========================

      Template:Navbox
  =========================== */

.navbox {

   font-size: .85em;
   background: @BODY_LIGHT;
   border-collapse: collapse;
   margin: 1em auto;
   width: 100%;
   clear: both;

   // only main navbox, not subnavboxes
   &:not(.navbox-collapsible) {
       box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.1);
   }
   

// images

   img {
       height: auto;
       width: auto;
       padding: 0 1px;
       .pixelate();
   }

   // reduce gap between adjacent navboxes
   & + & {
       margin-top: -.5em;
   }

}

// main header .navbox-title { font-size: 110%; background: @BODY_DARK; text-align: center; padding: 3px 8px;

&-name { // Navbox title text - prev done via fixed width on both collapse button // and navbar to prevent title shift margin: 0 4em; }

// Fix toggle style being different before JS takes over. .mw-collapsible-toggle { font-size: .9em; text-align: right; }

}

// footer .navbox-footer { background: @BODY_DARK; border-top: 1px; text-align: center; font-size: smaller; }

// navbox group title .navbox-group-title {

   background: @BODY_MID;
   border: 1px solid @BODY_DARK;
   border-width: 0 1px 1px 0; // right and bottom
   font-weight: bold;
   padding-left: 10px;
   width: 15%;

   a {
       white-space: normal;
   }

}

// navbox group content .navbox-list {

   border-bottom: 1px solid @BODY_DARK;
   padding: 4px 8px;
   
   ul {
   	margin: 0;
   }

   // list styling
   li {
       display: inline-block;

       & + li::before {
           content: '• ';
       }

   }

}

// parent of a subgroup .navbox-parent {

   padding: 0;

}

// nested group content .navbox-subgroup {

   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;

   // if the nested group title ever needs to be changed
   .navbox-group-title {
       // background: @BODY_LIGHT;
   }

> tbody > tr:last-child > td { border-bottom: none; } }

// nested navboxes only .navbox.navbox-collapsible {

   font-size: 100%;
   margin: .5em 0 0;

   .navbox-title {
       background: @BODY_DARK;
       padding: 0 8px;
   }

}

.navbox-data { display: none;

& + .navbox { margin-top: -.5em; } }

// collapsible wikitables // TODO: move this out of navbox subpage .mw-collapsible {

   &.mw-collapsed {
       min-width: 250px;
   }

// Fix toggle style being different before JS takes over. &:not( .mw-made-collapsible) th::before,

   .mw-collapsible-toggle {
       font-weight: normal;
   }

}