MediaWiki:Vector.less/navbox.less

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

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

root {

--navbox-background: @BODY_LIGHT; --navbox-border: @BODY_DARK; --navbox-title-background: @BODY_DARK; --navbox-footer-background: @BODY_DARK; --navbox-group-title-background: @BODY_MID; }

.navbox { font-size: .85em; background: var(--navbox-background); border-collapse: collapse; margin: 1em auto 0; // 0 as .catlinks has margin already + navboxes are expected to be the last element on the page width: 100%; clear: both; box-shadow: @box-shadow;

img { // retina support .pixelate(); }

// nested navboxes .navbox { font-size: 100%; margin: 0.5em auto 0; box-shadow: none; } }

@header-padding: 0.25em 1em; // main header .navbox-title { font-size: 110%; line-height: 1.6em; background: var(--navbox-title-background); text-align: center; padding: @header-padding;

&-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; }

// nested navboxes .navbox { font-size: 100%; } }

.navbox-group:nth-child(2) { // separating border in case group-title and title background match e.g. dark mode border-top: 1px solid var(--navbox-border); }

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

   background: var(--navbox-group-title-background);
   border: 1px solid var(--navbox-border);
   border-width: 0 1px 1px 0; // right and bottom
   text-align: left;
   padding: @header-padding;
   // needs 
 tags in cases of long titles

width: 1%; white-space: nowrap; }

// navbox group content .navbox-list {

   border-bottom: 1px solid var(--navbox-border);
   padding: 0.25em 0.5em;
   
   ul {
   	margin: 0;
   }

   // list styling
   li {
       display: inline;
       white-space: nowrap;

       & + 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 > th, > tbody > tr:last-child > td { border-bottom: none; } }

// footer .navbox-footer { background: var(--navbox-footer-background); text-align: center; padding: @header-padding; }

.navbox-data { display: none; }