Module:Navbox/styles.css

/***** Variables *****/
.ranger-navbox{
	--navbox-background: var(--color-surface-2);
	--navbox-margin: 0.5em auto;
	--navbox-padding: 4px;
	--navbox-gap: 3px;
	--navbox-outer-border-color: var(--border-color-base);
	--navbox-outer-border-width: 1px;
	--navbox-outer-border-style: solid;
	--navbox-outer-border-radius: 5px;
	--navbox-custom-border-radius: 3px;
	--navbox-font-size: 0.875em;
	--navbox-line-height: 1.5;
	--navbox-title-color: var(--color-base);
	--navbox-title-font-size: 125%;
	--navbox-title-background: var(--color-surface-1);
	--navbox-title-icon-color: #fff;
	--navbox-title-link-color: #fff;
	--navbox-title-link-color--visited: #fff;
	--navbox-title-link-color--hover: #ffcc00;
	--navbox-title-redlink-color: #ff6666;
	--navbox-title-link-decoration: underline;
	--navbox-title-redlink-decoration: underline wavy;
	--navbox-title-padding--y: 0.5em;
	--navbox-above-background: #f8f9fa;
	--navbox-above-color: #202122;
	--navbox-above-padding: 0.25em 0.5em;
	--navbox-below-background: #f8f9fa;
	--navbox-below-color: #202122;
	--navbox-below-padding: 0.25em 0.5em;
	--navbox-header-color: #fff;
	--navbox-header-font-size: 110%;
	--navbox-header-background: #0066cc;
	--navbox-header-icon-color: #fff;
	--navbox-header-link-color: #fff;
	--navbox-header-link-color--visited: #fff;
	--navbox-header-link-color--hover: #ffcc00;
	--navbox-header-redlink-color: #ff6666;
	--navbox-header-link-decoration: underline;
	--navbox-header-redlink-decoration: underline wavy;
	--navbox-header-padding--y: 0.3em;
	--navbox-subheader-font-size: 100%;
	--navbox-subheader-padding--y: 0.15em;
	--navbox-list-background: var(--color-surface-0);
	--navbox-list-background--striped: var(--color-surface-1);
	--navbox-list-color: var(--color-base);
	--navbox-list-padding: 0.25em 0.5em;
	--navbox-list-line-height: 1.5;
	--navbox-list-item-padding-y: 0px;
	--navbox-list-dot-spacing: 0px;
	--navbox-group-text-align: left;
	--navbox-group-text-align--mobile: left;
	--navbox-group-background: var(--color-surface-1);
	--navbox-group-color: var(--color-base);
	--navbox-group-padding: 0.25em 0.5em;
	--navbox-group-line-height: 1.5;
	--navbox-tree-line-color: #c8ccd1;
	--navbox-tree-line-width: 2px;
	--navbox-tree-indent: 1em;
	--navbox-tree-line-indent: 0.5em;
	--navbox-tree-line-spacing: 3px;
	--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
	--icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
	--navbox-icon-offset--x: 0.5rem;
}

.ranger-navbox.pill, 
.ranger-navbox.pill-mobile{
	--navbox-pill-gap: 0.3em;
	--navbox-pill-padding: 0.25em 0.75em;
	--navbox-pill-border-radius: 3px;
	--navbox-pill-box-shadow: none;
	--navbox-pill-background: #f8f9fa;
	--navbox-pill-box-shadow--hover: inset 0 0 3px #202122;
	--navbox-pill-background--hover: #f8f9fa;
	--navbox-pill-selflink-background: #eaf3ff;
	--navbox-list-background: none;
	--navbox-list-background--striped: #f0f0f0;
}

.ranger-navbox.no-underline-title-links{
	--navbox-title-link-color: #0066cc;
	--navbox-title-link-decoration: none;
	--navbox-title-redlink-decoration: none;
}

.ranger-navbox.noborder,
.ranger-navbox.no-border{
	--navbox-padding: 0px;
	--navbox-outer-border-width: 0px;
}

/***** Main *****/
.ranger-navbox{
	border-color: var(--navbox-outer-border-color);
	border-style: var(--navbox-outer-border-style);
	border-width: var(--navbox-outer-border-width);
	border-radius: var(--navbox-outer-border-radius);
	padding: var(--navbox-padding);
	font-size: var(--navbox-font-size);
	margin: var(--navbox-margin);
	background: var(--navbox-background);
	line-height: var(--navbox-line-height);
	clear:both;
}

.ranger-navbox * {
	border: 0;
}

.ranger-navbox .center *{
	margin-left: unset;
	margin-right: unset;
}

.ranger-navbox,
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
	display: flex;
	flex-direction: column;
	gap: var(--navbox-gap);
}

.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
	text-align: center;
	min-height: 1.5em;
	position: relative;
	z-index: 0;
	font-weight: bold;
}

.ranger-navbox .ranger-title{
	color: var(--navbox-title-color);
	background: var(--navbox-title-background);
	font-size: var(--navbox-title-font-size);
	padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x));
	border-radius: var(--navbox-custom-border-radius);
}

.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
	text-decoration: var(--navbox-title-link-decoration);
}

.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
	text-decoration: var(--navbox-title-redlink-decoration);
}

.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
	color: var(--navbox-title-link-color);
}

.ranger-navbox .ranger-title a:visited{
	color: var(--navbox-title-link-color--visited);
}

.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
	color: var(--navbox-title-redlink-color);
}

.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
	color: var(--navbox-title-link-color--hover);
}

.ranger-navbox .ranger-header{
	color: var(--navbox-header-color);
	background: var(--navbox-header-background);
	font-size: var(--navbox-header-font-size);
	padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x));
}

.ranger-navbox .ranger-sublist .ranger-header{
	font-size: var(--navbox-subheader-font-size);
	padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x));
}

.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
	text-decoration: var(--navbox-header-link-decoration);
}

.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
	text-decoration: var(--navbox-header-redlink-decoration);
}

.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
	color: var(--navbox-header-link-color);
}

.ranger-navbox .ranger-header a:visited{
	color: var(--navbox-header-link-color--visited);
}

.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
	color: var(--navbox-header-redlink-color);
}

.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
	color: var(--navbox-header-link-color--hover);
}

.ranger-navbox .ranger-meta{
	font-size: var(--navbox-title-font-size);
	position: absolute;
	left: var(--navbox-icon-offset--x);
	top: calc(var(--navbox-title-padding--y) + 0.08em);
	display: block;
}

.ranger-navbox .ranger-meta .nv{
	background-image: var(--icon-metalinks);
	display: block;
	width: 0.84em;
	height: 0.84em;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

.ranger-navbox .ranger-meta .nv > a{
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.ranger-navbox .ranger-meta .nv > a > span{
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* 255
.ranger-navbox .ranger-meta:has(.mw-selflink){
	display: none;
}
*/

.ranger-navbox,
.ranger-navbox .ranger-section{
	position: relative;
}

.ranger .mw-collapsible-toggle-placeholder{
	display: none;
}

.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
	pointer-events: none;
}

.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
	pointer-events: auto;
}

.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
	background-image: var(--icon-chevron-down);
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-size: 1.5em 1.5em;
	background-position: right var(--navbox-icon-offset--x) top var(--navbox-title-padding--y);
	background-repeat: no-repeat;
	transform: scaleY(-1);
}

.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed{
	transform: none;
}

.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
	display: none;
}

.ranger-navbox .ranger-list{
	width: unset;
	padding: var(--navbox-list-padding);
	line-height: var(--navbox-list-line-height);
}

.ranger-navbox .hlist li,
.ranger-navbox .hlist dt,
.ranger-navbox .hlist dd{
	padding-top: var(--navbox-list-item-padding-y);
	padding-bottom: var(--navbox-list-item-padding-y);
}

.ranger-navbox .hlist li:not(:last-child)::after{
	padding-left: var(--navbox-list-dot-spacing);
	padding-right: var(--navbox-list-dot-spacing);
}

.ranger-navbox .ranger-above{
	background: var(--navbox-above-background);
	color: var(--navbox-above-color);
	padding: var(--navbox-above-padding);
	width: unset;
}

.ranger-navbox .ranger-below{
	background: var(--navbox-below-background);
	color: var(--navbox-below-color);
	padding: var(--navbox-below-padding);
	width: unset;
}

.ranger-navbox .ranger-sublist{
	display: flex;
	flex-direction: column;
	gap: var(--navbox-gap);
}

.ranger-navbox .ranger-section-body{
	display: grid;
	gap: var(--navbox-gap);
	grid-template-columns: auto minmax(0,1fr);
}

.ranger-navbox [class^="ranger-"][hidden="until-found"]{
	margin-top: calc(0px - var(--navbox-gap)) !important;
}

.ranger-navbox .ranger-row{
	display: contents;
}

.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
	text-align: var(--navbox-group-text-align);
	font-weight: bold;
	line-height: var(--navbox-group-line-height);
	background: var(--navbox-group-background);
	color: var(--navbox-group-color);
	padding: var(--navbox-group-padding);
	width: unset;
	border-radius: var(--navbox-custom-border-radius);
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
	text-align: left;
	background: var(--navbox-list-background);
	color: var(--navbox-list-color);
	flex-grow: 1;
	border-radius: var(--navbox-custom-border-radius);
}

.ranger-navbox .ranger-sublist{
	flex-grow: var(--count);
}

.ranger-navbox .ranger-listbox:first-child{
	grid-column-end: span 2;
}

.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
	display: grid;
	justify-items: stretch;
	align-items: center;
}

.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
	background: var(--navbox-list-background--striped);
}

.ranger-navbox .hlist a{
	display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
	text-align: left;
}

.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
	text-align: center;
}

.ranger-navbox .align-right,
.ranger-navbox .alignright{
	text-align: right;
}

/* Responsive */
@media screen and (max-width: 720px) {
	.ranger-navbox .ranger-section-body,
	.ranger-navbox .ranger-sublist {
		display: flex;
		flex-flow: column;
	}
	
	.ranger-navbox .ranger-row{
		display: block;
	}
	
	.ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
	.ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
		margin-top: var(--navbox-gap);
	}
	
	.ranger-navbox .ranger-listbox.empty{
		display: none;
	}
	
	.ranger-navbox .ranger-group,
	.ranger-navbox .ranger-subgroup{
		text-align: var(--navbox-group-text-align--mobile, left);
		max-width: unset !important;
	}
	
	.ranger-navbox .ranger-group > *,
	.ranger-navbox .ranger-subgroup > *{
		max-width: unset !important;
	}
	
	.ranger-navbox .ranger-sublist {
		padding-left: var(--navbox-tree-indent);
		margin-left: var(--navbox-tree-line-indent);
	}
	
	.ranger-navbox .ranger-subgroup,
	.ranger-navbox .ranger-listbox {
		position: relative;
	}
	
	.ranger-navbox .ranger-group br,
	.ranger-navbox .ranger-subgroup br{
		display: none;
	}
	
	.ranger-navbox .ranger-listbox > .ranger-wrap{
		text-align: var(--navbox-list-text-align--mobile, left);
		border-radius: 0 0 var(--navbox-custom-border-radius) var(--navbox-custom-border-radius);
	}
	
	.ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
		margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
	}
	
	.ranger-navbox .ranger-sublist .ranger-row > ::before{
		position: absolute;
		left: calc(0px - var(--navbox-tree-indent));
		top: 0;
		width: var(--navbox-tree-line-width);
		height: 100%;
		content: '';
		display: block;
		background-color: var(--navbox-tree-line-color);
	}
	
	.ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
	.ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
		height: calc(100% + var(--navbox-gap));
	}
	
	.ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
		display: none;
	}
	
	.ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
		display: block;
		height: calc(50% + var(--navbox-tree-line-width)/2);
	}
	
	.ranger-navbox .ranger-subgroup::after,
	.ranger-navbox .ranger-row .ranger-row.empty-group > .ranger-listbox > .ranger-wrap::after{
		position: absolute;
		left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
		width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
		height: var(--navbox-tree-line-width);
		content: '';
		background-color: var(--navbox-tree-line-color);
	}
	
	.ranger-subgroup{
		border-radius: var(--navbox-custom-border-radius) var(--navbox-custom-border-radius) 0 0 !important;
	}
	
	.ranger-navbox .hlist{
		line-height: 2;
	}
}

/* Pill styles */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
	display: none;
}

.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
	display: inline-flex;
	gap: var(--navbox-pill-gap);
	flex-wrap: wrap;
}

.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
	padding: var(--navbox-pill-padding);
	border-radius: var(--navbox-pill-border-radius);
	box-shadow: var(--navbox-pill-box-shadow);
	background: var(--navbox-pill-background);
	display: flex;
	align-items: center;
	gap: var(--navbox-pill-gap);
	flex-wrap: wrap;
}

.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
	box-shadow: var(--navbox-pill-box-shadow--hover);
	background: var(--navbox-pill-background--hover);
}

/* 551
.ranger-navbox.pill .hlist li:has(.mw-selflink),
.ranger-navbox.pill .hlist dt:has(.mw-selflink),
.ranger-navbox.pill .hlist dd:has(.mw-selflink){
	background: var(--navbox-pill-selflink-background);
}
*/

/* Mobile pill styles */
@media screen and (max-width: 720px) {
	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
		display: none;
	}
	
	.ranger-navbox.pill-mobile .hlist ul,
	.ranger-navbox.pill-mobile .hlist ol,
	.ranger-navbox.pill-mobile .hlist dl{
		display: inline-flex;
		gap: var(--navbox-pill-gap);
		flex-wrap: wrap;
	}
	
	.ranger-navbox.pill-mobile .hlist li,
	.ranger-navbox.pill-mobile .hlist dt,
	.ranger-navbox.pill-mobile .hlist dd{
		padding: var(--navbox-pill-padding);
		border-radius: var(--navbox-pill-border-radius);
		box-shadow: var(--navbox-pill-box-shadow);
		background: var(--navbox-pill-background);
		display: flex;
		align-items: center;
		gap: var(--navbox-pill-gap);
		flex-wrap: wrap;
	}
	
	.ranger-navbox.pill-mobile .hlist dd:hover,
	.ranger-navbox.pill-mobile .hlist dd:focus,
	.ranger-navbox.pill-mobile .hlist dt:hover,
	.ranger-navbox.pill-mobile .hlist dt:focus,
	.ranger-navbox.pill-mobile .hlist li:hover,
	.ranger-navbox.pill-mobile .hlist li:focus {
		box-shadow: var(--navbox-pill-box-shadow--hover);
		background: var(--navbox-pill-background--hover);
	}
	
/* 596
	.ranger-navbox.pill-mobile .hlist li:has(.mw-selflink),
	.ranger-navbox.pill-mobile .hlist dt:has(.mw-selflink),
	.ranger-navbox.pill-mobile .hlist dd:has(.mw-selflink){
		background: var(--navbox-pill-selflink-background);
	}
*/
}

.hlist dl, .hlist ol, .hlist ul {
	margin: 0;
	padding: 0;
}

.hlist dd:not(:last-child)::after, .hlist li:not(:last-child)::after {
	content: "\20\A0\2022\A0\20";
	font-weight: inherit;
}

.hlist dd, .hlist dt, .hlist li {
    margin: 0;
    display: inline-block;
}