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