<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://wiki.you107657.duckdns.org/index.php?action=history&amp;feed=atom&amp;title=MediaWiki%3AGadgets%2Franger%2Fnavbox.css</id>
	<title>MediaWiki:Gadgets/ranger/navbox.css - Revision history</title>
	<link rel="self" type="application/atom+xml" href="https://wiki.you107657.duckdns.org/index.php?action=history&amp;feed=atom&amp;title=MediaWiki%3AGadgets%2Franger%2Fnavbox.css"/>
	<link rel="alternate" type="text/html" href="https://wiki.you107657.duckdns.org/index.php?title=MediaWiki:Gadgets/ranger/navbox.css&amp;action=history"/>
	<updated>2026-09-27T02:46:55Z</updated>
	<subtitle>Revision history for this page on the wiki</subtitle>
	<generator>MediaWiki 1.43.9</generator>
	<entry>
		<id>https://wiki.you107657.duckdns.org/index.php?title=MediaWiki:Gadgets/ranger/navbox.css&amp;diff=12544&amp;oldid=prev</id>
		<title>imported&gt;Merge: merge.py</title>
		<link rel="alternate" type="text/html" href="https://wiki.you107657.duckdns.org/index.php?title=MediaWiki:Gadgets/ranger/navbox.css&amp;diff=12544&amp;oldid=prev"/>
		<updated>2026-09-25T10:55:52Z</updated>

		<summary type="html">&lt;p&gt;merge.py&lt;/p&gt;
&lt;table style=&quot;background-color: #fff; color: #202122;&quot; data-mw=&quot;interface&quot;&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;tr class=&quot;diff-title&quot; lang=&quot;en&quot;&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;← Older revision&lt;/td&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;Revision as of 10:55, 25 September 2026&lt;/td&gt;
				&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;4&quot; class=&quot;diff-notice&quot; lang=&quot;en&quot;&gt;&lt;div class=&quot;mw-diff-empty&quot;&gt;(No difference)&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;!-- diff cache key tensura:diff:1.41:old-4727:rev-12544 --&gt;
&lt;/table&gt;</summary>
		<author><name>imported&gt;Merge</name></author>
	</entry>
	<entry>
		<id>https://wiki.you107657.duckdns.org/index.php?title=MediaWiki:Gadgets/ranger/navbox.css&amp;diff=4727&amp;oldid=prev</id>
		<title>imported&gt;Merge: merge.py</title>
		<link rel="alternate" type="text/html" href="https://wiki.you107657.duckdns.org/index.php?title=MediaWiki:Gadgets/ranger/navbox.css&amp;diff=4727&amp;oldid=prev"/>
		<updated>2026-09-25T10:55:52Z</updated>

		<summary type="html">&lt;p&gt;merge.py&lt;/p&gt;
&lt;p&gt;&lt;b&gt;New page&lt;/b&gt;&lt;/p&gt;&lt;div&gt;/** as of Module:navbox version 1.2.1 **/&lt;br /&gt;
&lt;br /&gt;
/*********************************************************************************************************************&lt;br /&gt;
* Semantically-correct horizontal lists (for Module:Navbox, and they&amp;#039;re more machine-readable than {{*}}-formatting) *&lt;br /&gt;
**********************************************************************************************************************/&lt;br /&gt;
.hlist dl,&lt;br /&gt;
.hlist ol,&lt;br /&gt;
.hlist ul {&lt;br /&gt;
	margin: 0;&lt;br /&gt;
	padding: 0;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Display list items inline */&lt;br /&gt;
.hlist dd,&lt;br /&gt;
.hlist dt,&lt;br /&gt;
.hlist li {&lt;br /&gt;
	/*&lt;br /&gt;
	 * don&amp;#039;t trust the note that says margin doesn&amp;#039;t work with inline&lt;br /&gt;
	 * removing margin: 0 makes dds have margins again&lt;br /&gt;
	 * We also want to reset margin-right in Minerva&lt;br /&gt;
	 */&lt;br /&gt;
	margin: 0; &lt;br /&gt;
	display: inline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Display requested top-level lists inline */&lt;br /&gt;
.hlist.inline,&lt;br /&gt;
.hlist.inline dl,&lt;br /&gt;
.hlist.inline ol,&lt;br /&gt;
.hlist.inline ul,&lt;br /&gt;
/* Display nested lists inline */&lt;br /&gt;
.hlist dl dl,&lt;br /&gt;
.hlist dl ol,&lt;br /&gt;
.hlist dl ul,&lt;br /&gt;
.hlist ol dl,&lt;br /&gt;
.hlist ol ol,&lt;br /&gt;
.hlist ol ul,&lt;br /&gt;
.hlist ul dl,&lt;br /&gt;
.hlist ul ol,&lt;br /&gt;
.hlist ul ul {&lt;br /&gt;
	display: inline;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Hide empty list items */&lt;br /&gt;
.hlist .mw-empty-li {&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* TODO: :not() can maybe be used here to remove the later rule. naive test&lt;br /&gt;
 * seems to work. more testing needed. like so: */&lt;br /&gt;
.hlist dt:not(:last-child)::after {&lt;br /&gt;
	content: &amp;quot;:\20&amp;quot;;&lt;br /&gt;
}&lt;br /&gt;
.hlist dd:not(:last-child)::after,&lt;br /&gt;
.hlist li:not(:last-child)::after {&lt;br /&gt;
	/* &amp;quot;space, Middle Dot, space&amp;quot; &lt;br /&gt;
	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.&lt;br /&gt;
	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */&lt;br /&gt;
	/* content: &amp;quot;\20\00B7\20&amp;quot;; font-weight: bold; */&lt;br /&gt;
    /* &amp;quot;space &amp;amp;nbsp; • &amp;amp;nbsp; space&amp;quot; &lt;br /&gt;
       There may (and likely) be an extra whitespace between &amp;lt;li&amp;gt;s, &lt;br /&gt;
       therefore we have to use a space character as last character of this sequence. &lt;br /&gt;
       By this way, the last space and the next whitespce will collapse as a single space,&lt;br /&gt;
       to make the whitespace on both sides of the middle dot the same width.&lt;br /&gt;
    */&lt;br /&gt;
	content: &amp;quot;\20\A0\2022\A0\20&amp;quot;; &lt;br /&gt;
	font-weight: inherit;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Add parentheses around nested lists */&lt;br /&gt;
.hlist dd ol::before,&lt;br /&gt;
.hlist dd ul::before,&lt;br /&gt;
.hlist dd dl::before,&lt;br /&gt;
.hlist dt ol::before,&lt;br /&gt;
.hlist dt ul::before,&lt;br /&gt;
.hlist dt dl::before,&lt;br /&gt;
.hlist li ol::before,&lt;br /&gt;
.hlist li ul::before,&lt;br /&gt;
.hlist li dl::before {&lt;br /&gt;
	content: &amp;quot;\20(&amp;quot;;&lt;br /&gt;
	font-weight: inherit;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.hlist dd ol::after,&lt;br /&gt;
.hlist dd ul::after,&lt;br /&gt;
.hlist dd dl::after,&lt;br /&gt;
.hlist dt ol::after,&lt;br /&gt;
.hlist dt ul::after,&lt;br /&gt;
.hlist dt dl::after,&lt;br /&gt;
.hlist li ol::after,&lt;br /&gt;
.hlist li ul::after,&lt;br /&gt;
.hlist li dl::after {&lt;br /&gt;
	content: &amp;quot;)&amp;quot;;&lt;br /&gt;
	font-weight: inherit;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Put ordinals in front of ordered list items */&lt;br /&gt;
.hlist ol {&lt;br /&gt;
	counter-reset: listitem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.hlist ol &amp;gt; li {&lt;br /&gt;
	counter-increment: listitem;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.hlist ol &amp;gt; li::before {&lt;br /&gt;
	content: &amp;quot; &amp;quot; counter(listitem) &amp;quot;.\20&amp;quot;;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* Progressive enhancement:&lt;br /&gt;
 * try to make the dot always follow the list item in same line&lt;br /&gt;
 */&lt;br /&gt;
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/********************************************&lt;br /&gt;
* End semantically-correct horizontal lists *&lt;br /&gt;
*********************************************/&lt;br /&gt;
&lt;br /&gt;
/**********************************************************&lt;br /&gt;
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *&lt;br /&gt;
***********************************************************/&lt;br /&gt;
.ranger-navbox{&lt;br /&gt;
  --navbox-background: none; /* for entire navbox */&lt;br /&gt;
  --navbox-margin: 0.5em auto;&lt;br /&gt;
  --navbox-padding: 4px;&lt;br /&gt;
  --navbox-gap: 3px; /* when using zero-value, it must be 0px */&lt;br /&gt;
  --navbox-outer-border-color: var(--wiki-content-border-color--accent);&lt;br /&gt;
  --navbox-outer-border-width: 1px;&lt;br /&gt;
  --navbox-outer-border-style: solid;&lt;br /&gt;
  --navbox-outer-border-radius: 0px;&lt;br /&gt;
  --navbox-font-size: calc(1em - 2px);&lt;br /&gt;
  --navbox-title-color: var(--wiki-accent-label-color);&lt;br /&gt;
  --navbox-title-font-size: calc(125%);&lt;br /&gt;
  --navbox-title-background: var(--wiki-accent-color);&lt;br /&gt;
  --navbox-title-icon-color: var(--wiki-accent-label-color);&lt;br /&gt;
  --navbox-title-link-color: var(--navbox-title-color);&lt;br /&gt;
  --navbox-title-link-color--visited: var(--navbox-title-link-color);&lt;br /&gt;
  --navbox-title-link-color--hover: var(--wiki-accent-link-color);&lt;br /&gt;
  --navbox-title-redlink-color: var(--navbox-title-link-color);&lt;br /&gt;
  --navbox-title-link-decoration: underline solid;&lt;br /&gt;
  --navbox-title-redlink-decoration: underline wavy;&lt;br /&gt;
  --navbox-title-padding--y: 0.5em;&lt;br /&gt;
  --navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);&lt;br /&gt;
  --navbox-above-color: var(--wiki-content-text-color);&lt;br /&gt;
  --navbox-above-padding: var(--navbox-list-padding);&lt;br /&gt;
  --navbox-below-background: var(--navbox-above-background);&lt;br /&gt;
  --navbox-below-color: var(--navbox-above-color);&lt;br /&gt;
  --navbox-below-padding: var(--navbox-above-padding);&lt;br /&gt;
  --navbox-header-color: var(--navbox-title-color);&lt;br /&gt;
  --navbox-header-font-size: calc(110%);&lt;br /&gt;
  --navbox-header-background: var(--navbox-title-background);&lt;br /&gt;
  --navbox-header-icon-color: var(--navbox-title-icon-color);&lt;br /&gt;
  --navbox-header-link-color: var(--navbox-title-link-color);&lt;br /&gt;
  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);&lt;br /&gt;
  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);&lt;br /&gt;
  --navbox-header-redlink-color: var(--navbox-title-redlink-color);&lt;br /&gt;
  --navbox-header-link-decoration: var(--navbox-title-link-decoration);&lt;br /&gt;
  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);&lt;br /&gt;
  --navbox-header-padding--y: 0.3em;&lt;br /&gt;
  --navbox-subheader-font-size: calc(100%);&lt;br /&gt;
  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);&lt;br /&gt;
  --navbox-list-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);&lt;br /&gt;
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);&lt;br /&gt;
  --navbox-list-color: var(--wiki-content-text-color);&lt;br /&gt;
  --navbox-list-padding: 0.25em 0.5em;&lt;br /&gt;
  /* --navbox-group-* also apply to .ranger-subgroup */&lt;br /&gt;
  --navbox-group-text-align: left;&lt;br /&gt;
  --navbox-group-text-align--mobile: left; /* only for mobile view */&lt;br /&gt;
  --navbox-group-background: color-mix(in srgb, var(--wiki-accent-color) 20%, transparent);&lt;br /&gt;
  --navbox-group-color: var(--wiki-content-text-color);&lt;br /&gt;
  --navbox-group-padding: var(--navbox-list-padding);&lt;br /&gt;
  --navbox-tree-line-color: var(--navbox-group-background);&lt;br /&gt;
  --navbox-tree-line-width: 2px;&lt;br /&gt;
  --navbox-tree-indent: 1em;&lt;br /&gt;
  --navbox-tree-line-indent: 0.5em;&lt;br /&gt;
  --navbox-tree-line-spacing: var(--navbox-gap);&lt;br /&gt;
  --icon-chevron-down: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&amp;#039;http://www.w3.org/2000/svg&amp;#039; class=&amp;#039;icon icon-tabler icon-tabler-chevron-down&amp;#039; width=&amp;#039;24&amp;#039; height=&amp;#039;24&amp;#039; viewBox=&amp;#039;0 0 24 24&amp;#039; stroke-width=&amp;#039;2&amp;#039; stroke=&amp;#039;currentColor&amp;#039; fill=&amp;#039;none&amp;#039; stroke-linecap=&amp;#039;round&amp;#039; stroke-linejoin=&amp;#039;round&amp;#039;%3E%3Cpath stroke=&amp;#039;none&amp;#039; d=&amp;#039;M0 0h24v24H0z&amp;#039; fill=&amp;#039;none&amp;#039;%3E%3C/path%3E%3Cpath d=&amp;#039;M6 9l6 6l6 -6&amp;#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
  --icon-metalinks: url(&amp;quot;data:image/svg+xml,%3Csvg xmlns=&amp;#039;http://www.w3.org/2000/svg&amp;#039; class=&amp;#039;icon icon-tabler icon-tabler-edit&amp;#039; width=&amp;#039;24&amp;#039; height=&amp;#039;24&amp;#039; viewBox=&amp;#039;0 0 24 24&amp;#039; stroke-width=&amp;#039;2&amp;#039; stroke=&amp;#039;currentColor&amp;#039; fill=&amp;#039;none&amp;#039; stroke-linecap=&amp;#039;round&amp;#039; stroke-linejoin=&amp;#039;round&amp;#039;%3E%3Cpath stroke=&amp;#039;none&amp;#039; d=&amp;#039;M0 0h24v24H0z&amp;#039; fill=&amp;#039;none&amp;#039;%3E%3C/path%3E%3Cpath d=&amp;#039;M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1&amp;#039;%3E%3C/path%3E%3Cpath d=&amp;#039;M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z&amp;#039;%3E%3C/path%3E%3Cpath d=&amp;#039;M16 5l3 3&amp;#039;%3E%3C/path%3E%3C/svg%3E&amp;quot;);&lt;br /&gt;
  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.pill, &lt;br /&gt;
.ranger-navbox.pill-mobile{&lt;br /&gt;
  /** vars for the &amp;quot;pill&amp;quot; style only (`.pill` and &amp;quot;.pill-mobile&amp;quot; clases) **/&lt;br /&gt;
  --navbox-pill-gap: 0.3em;&lt;br /&gt;
  --navbox-pill-padding: 0.25em 0.75em;&lt;br /&gt;
  --navbox-pill-border-radius: 3px;&lt;br /&gt;
  --navbox-pill-box-shadow: none;&lt;br /&gt;
  --navbox-pill-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);&lt;br /&gt;
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);&lt;br /&gt;
  --navbox-pill-background--hover: var(--navbox-pill-background);&lt;br /&gt;
  /* remove list cell background */&lt;br /&gt;
  --navbox-list-background: none;&lt;br /&gt;
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.no-underline-title-links{&lt;br /&gt;
  --navbox-title-link-color: var(--wiki-accent-link-color);&lt;br /&gt;
  --navbox-title-link-decoration: none;&lt;br /&gt;
  --navbox-title-redlink-decoration: none;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.noborder,&lt;br /&gt;
.ranger-navbox.no-border{&lt;br /&gt;
  --navbox-padding: 0px;&lt;br /&gt;
  --navbox-outer-border-width: 0px;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/******************************&lt;br /&gt;
* Fallback for older browsers *&lt;br /&gt;
*******************************/&lt;br /&gt;
@supports not (color:color-mix(in srgb, #000, transparent)) {&lt;br /&gt;
	.ranger-navbox {&lt;br /&gt;
		--navbox-above-background: var(--wiki-content-background-color--secondary);&lt;br /&gt;
		--navbox-list-background: transparent;&lt;br /&gt;
		--navbox-list-background--striped: var(--wiki-content-background-color--secondary);&lt;br /&gt;
		--navbox-group-background: var(--wiki-content-background-color--secondary);&lt;br /&gt;
	}&lt;br /&gt;
	.ranger-navbox.pill {&lt;br /&gt;
	  --navbox-pill-background: var(--wiki-content-background-color--secondary);&lt;br /&gt;
	  --navbox-list-background--striped: transparent;&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
/***************&lt;br /&gt;
* End fallback *&lt;br /&gt;
****************/&lt;br /&gt;
&lt;br /&gt;
.ranger-navbox{&lt;br /&gt;
  border-color: var(--navbox-outer-border-color);&lt;br /&gt;
  border-style: var(--navbox-outer-border-style);&lt;br /&gt;
  border-width: var(--navbox-outer-border-width);&lt;br /&gt;
  border-radius: var(--navbox-outer-border-radius);&lt;br /&gt;
  padding: var(--navbox-padding);&lt;br /&gt;
  font-size: var(--navbox-font-size);&lt;br /&gt;
  margin: var(--navbox-margin);&lt;br /&gt;
  background: var(--navbox-background);&lt;br /&gt;
  line-height: 1.5;&lt;br /&gt;
  clear:both;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ranger-navbox * {&lt;br /&gt;
  border: 0;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .center *{&lt;br /&gt;
  margin-left: unset;&lt;br /&gt;
  margin-right: unset;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox, &lt;br /&gt;
.ranger-navbox .ranger-section,&lt;br /&gt;
.ranger-navbox .ranger-listbox{&lt;br /&gt;
  display: flex;&lt;br /&gt;
  flex-direction: column;&lt;br /&gt;
  gap: var(--navbox-gap);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title,&lt;br /&gt;
.ranger-navbox .ranger-header{&lt;br /&gt;
  text-align: center;&lt;br /&gt;
  min-height: 1.5em;&lt;br /&gt;
  position: relative;&lt;br /&gt;
  z-index: 0;&lt;br /&gt;
  font-weight: bold;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title{&lt;br /&gt;
  color: var(--navbox-title-color);&lt;br /&gt;
  background: var(--navbox-title-background);&lt;br /&gt;
  font-size: var(--navbox-title-font-size);&lt;br /&gt;
  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title a,&lt;br /&gt;
.ranger-navbox .ranger-title a:visited,&lt;br /&gt;
.ranger-navbox .ranger-title a:hover,&lt;br /&gt;
.ranger-navbox .ranger-title a.external,&lt;br /&gt;
.ranger-navbox .ranger-title a.external:visited,&lt;br /&gt;
.ranger-navbox .ranger-title a.external:hover {&lt;br /&gt;
	text-decoration: var(--navbox-title-link-decoration);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title a.new,&lt;br /&gt;
.ranger-navbox .ranger-title a.new:visited {&lt;br /&gt;
	text-decoration: var(--navbox-title-redlink-decoration);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title a,&lt;br /&gt;
.ranger-navbox .ranger-title a.external,&lt;br /&gt;
.ranger-navbox .ranger-title a.external:visited {&lt;br /&gt;
  color: var(--navbox-title-link-color);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title a:visited{&lt;br /&gt;
  color: var(--navbox-title-link-color--visited);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title a.new,&lt;br /&gt;
.ranger-navbox .ranger-title a.new:visited{&lt;br /&gt;
    color:var(--navbox-title-redlink-color);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title a:hover,&lt;br /&gt;
.ranger-navbox .ranger-title a:visited:hover,&lt;br /&gt;
.ranger-navbox .ranger-title a.external:hover,&lt;br /&gt;
.ranger-navbox .ranger-title a.external:visited:hover {&lt;br /&gt;
  color:var(--navbox-title-link-color--hover);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header{&lt;br /&gt;
  color: var(--navbox-header-color);&lt;br /&gt;
  background: var(--navbox-header-background);&lt;br /&gt;
  font-size: var(--navbox-header-font-size);&lt;br /&gt;
  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-sublist .ranger-header{&lt;br /&gt;
  font-size: var(--navbox-subheader-font-size);&lt;br /&gt;
  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header a,&lt;br /&gt;
.ranger-navbox .ranger-header a:visited,&lt;br /&gt;
.ranger-navbox .ranger-header a:hover,&lt;br /&gt;
.ranger-navbox .ranger-header a.external,&lt;br /&gt;
.ranger-navbox .ranger-header a.external:visited,&lt;br /&gt;
.ranger-navbox .ranger-header a.external:hover {&lt;br /&gt;
	text-decoration: var(--navbox-header-link-decoration);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header a.new,&lt;br /&gt;
.ranger-navbox .ranger-header a.new:visited {&lt;br /&gt;
	text-decoration: var(--navbox-header-redlink-decoration);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header a,&lt;br /&gt;
.ranger-navbox .ranger-header a.external,&lt;br /&gt;
.ranger-navbox .ranger-header a.external:visited {&lt;br /&gt;
  color: var(--navbox-header-link-color);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header a:visited{&lt;br /&gt;
  color: var(--navbox-header-link-color--visited);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header a.new,&lt;br /&gt;
.ranger-navbox .ranger-header a.new:visited{&lt;br /&gt;
    color:var(--navbox-header-redlink-color);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header a:hover,&lt;br /&gt;
.ranger-navbox .ranger-header a:visited:hover,&lt;br /&gt;
.ranger-navbox .ranger-header a.external:hover,&lt;br /&gt;
.ranger-navbox .ranger-header a.external:visited:hover {&lt;br /&gt;
  color:var(--navbox-header-link-color--hover);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-meta{&lt;br /&gt;
  font-size: var(--navbox-title-font-size);&lt;br /&gt;
  position: absolute;&lt;br /&gt;
  left: var(--navbox-icon-offset--x);&lt;br /&gt;
  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */&lt;br /&gt;
  display: block;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-meta .nv{&lt;br /&gt;
  --mask: var(--icon-metalinks);&lt;br /&gt;
  display: block;&lt;br /&gt;
  width: 0.84em; /* based on the icon graph */&lt;br /&gt;
  height: 0.84em;&lt;br /&gt;
  -webkit-mask: var(--mask);&lt;br /&gt;
  mask: var(--mask);&lt;br /&gt;
  -webkit-mask-size: 100% 100%;&lt;br /&gt;
  mask-size: 100% 100%;&lt;br /&gt;
  -webkit-mask-position: center center;&lt;br /&gt;
  mask-position: center center;&lt;br /&gt;
  background-color: var(--navbox-title-icon-color);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-meta .nv &amp;gt; a{&lt;br /&gt;
  display: block;&lt;br /&gt;
  width: 100%;&lt;br /&gt;
  height: 100%;&lt;br /&gt;
  opacity: 0;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-meta .nv &amp;gt; a &amp;gt; span{&lt;br /&gt;
  display: block;&lt;br /&gt;
  width: 100%;&lt;br /&gt;
  height: 100%;&lt;br /&gt;
  overflow: hidden;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-meta:has(.mw-selflink){&lt;br /&gt;
	display: none;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox,&lt;br /&gt;
.ranger-navbox .ranger-section{&lt;br /&gt;
  position: relative;&lt;br /&gt;
}&lt;br /&gt;
.ranger .mw-collapsible-toggle-placeholder{&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .ranger-title-text,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .ranger-header-text{&lt;br /&gt;
  pointer-events: none;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .ranger-title-text a,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .ranger-header-text a{&lt;br /&gt;
  pointer-events: auto;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .mw-collapsible-toggle,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle{&lt;br /&gt;
  --mask: var(--icon-chevron-down);&lt;br /&gt;
  position: absolute;&lt;br /&gt;
  right: 0;&lt;br /&gt;
  top: 0;&lt;br /&gt;
  z-index: -1;&lt;br /&gt;
  display: block;&lt;br /&gt;
  width: 100%;&lt;br /&gt;
  height: 100%;&lt;br /&gt;
  overflow:hidden;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title &amp;gt; .mw-collapsible-toggle,&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header &amp;gt; .mw-collapsible-toggle{&lt;br /&gt;
  width: 1.5em;&lt;br /&gt;
  height: 1.5em;&lt;br /&gt;
  right: var(--navbox-icon-offset--x);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title &amp;gt; .mw-collapsible-toggle{&lt;br /&gt;
  top: var(--navbox-title-padding--y);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header &amp;gt; .mw-collapsible-toggle{&lt;br /&gt;
  top: var(--navbox-header-padding--y);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header &amp;gt; .mw-collapsible-toggle{&lt;br /&gt;
  top: var(--navbox-subheader-padding--y);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .mw-collapsible-toggle::before,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle::before{&lt;br /&gt;
  content: &amp;quot;&amp;quot;;&lt;br /&gt;
  display: block;&lt;br /&gt;
  width: 1.5em;&lt;br /&gt;
  height: 1.5em;&lt;br /&gt;
  position: absolute;&lt;br /&gt;
  right: var(--navbox-icon-offset--x);&lt;br /&gt;
  -webkit-mask: var(--mask);&lt;br /&gt;
  mask: var(--mask);&lt;br /&gt;
  -webkit-mask-size: 100% 100%;&lt;br /&gt;
  mask-size: 100% 100%;&lt;br /&gt;
  -webkit-mask-position: center center;&lt;br /&gt;
  mask-position: center center;&lt;br /&gt;
  background-color: var(--navbox-title-icon-color);&lt;br /&gt;
  transform: scaleY(-1);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .mw-collapsible-toggle::before{&lt;br /&gt;
  top: var(--navbox-title-padding--y);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle::before{&lt;br /&gt;
  top: var(--navbox-header-padding--y);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-sublist .ranger-header &amp;gt; .mw-collapsible-toggle::before{&lt;br /&gt;
  top: var(--navbox-subheader-padding--y);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title &amp;gt; .mw-collapsible-toggle::before,&lt;br /&gt;
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header &amp;gt; .mw-collapsible-toggle::before{&lt;br /&gt;
  top: 0;&lt;br /&gt;
  right: 0;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle::before{&lt;br /&gt;
  background-color: var(--navbox-header-icon-color);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{&lt;br /&gt;
  transform: none;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .mw-collapsible-toggle *,&lt;br /&gt;
.ranger-navbox .ranger-title &amp;gt; .mw-collapsible-toggle::after,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle *,&lt;br /&gt;
.ranger-navbox .ranger-header &amp;gt; .mw-collapsible-toggle::after{&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-list{&lt;br /&gt;
  width: unset;&lt;br /&gt;
  padding: var(--navbox-list-padding);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-above{&lt;br /&gt;
  background: var(--navbox-above-background);&lt;br /&gt;
  color: var(--navbox-above-color);&lt;br /&gt;
  padding: var(--navbox-above-padding);&lt;br /&gt;
  width: unset;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-below{&lt;br /&gt;
  background: var(--navbox-below-background);&lt;br /&gt;
  color: var(--navbox-below-color);&lt;br /&gt;
  padding: var(--navbox-below-padding);&lt;br /&gt;
  width: unset;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-sublist{&lt;br /&gt;
  display: flex;&lt;br /&gt;
  flex-direction: column;&lt;br /&gt;
  gap: var(--navbox-gap);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-section-body{&lt;br /&gt;
  display: grid;&lt;br /&gt;
  gap: var(--navbox-gap);&lt;br /&gt;
  grid-template-columns: auto minmax(0,1fr);&lt;br /&gt;
}&lt;br /&gt;
/* gap fix for collapsed content */&lt;br /&gt;
.ranger-navbox [class^=&amp;quot;ranger-&amp;quot;][hidden=&amp;quot;until-found&amp;quot;]{&lt;br /&gt;
  margin-top: calc(0px - var(--navbox-gap)) !important;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-row{&lt;br /&gt;
  display: contents;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-group,&lt;br /&gt;
.ranger-navbox .ranger-subgroup{&lt;br /&gt;
  text-align: var(--navbox-group-text-align);&lt;br /&gt;
  white-space: nowrap;&lt;br /&gt;
  font-weight: bold;&lt;br /&gt;
  background: var(--navbox-group-background);&lt;br /&gt;
  color: var(--navbox-group-color);&lt;br /&gt;
  padding: var(--navbox-group-padding);&lt;br /&gt;
  width: unset;&lt;br /&gt;
}&lt;br /&gt;
/* for desktop view */&lt;br /&gt;
.ranger-navbox.group-align-left .ranger-group,&lt;br /&gt;
.ranger-navbox.group-align-left .ranger-subgroup{&lt;br /&gt;
  --navbox-group-text-align: left;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.group-align-center .ranger-group,&lt;br /&gt;
.ranger-navbox.group-align-center .ranger-subgroup{&lt;br /&gt;
  --navbox-group-text-align: center;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.group-align-right .ranger-group,&lt;br /&gt;
.ranger-navbox.group-align-right .ranger-subgroup{&lt;br /&gt;
  --navbox-group-text-align: right;&lt;br /&gt;
}&lt;br /&gt;
/* for mobile view */&lt;br /&gt;
.ranger-navbox.mobile-group-align-left .ranger-group,&lt;br /&gt;
.ranger-navbox.mobile-group-align-left .ranger-subgroup{&lt;br /&gt;
  --navbox-group-text-align--mobile: left;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ranger-navbox.mobile-group-align-center .ranger-group,&lt;br /&gt;
.ranger-navbox.mobile-group-align-center .ranger-subgroup{&lt;br /&gt;
  --navbox-group-text-align--mobile: center;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ranger-navbox.mobile-group-align-right .ranger-group,&lt;br /&gt;
.ranger-navbox.mobile-group-align-right .ranger-subgroup{&lt;br /&gt;
  --navbox-group-text-align--mobile: right;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ranger-navbox .ranger-listbox &amp;gt; .ranger-wrap{&lt;br /&gt;
  background: var(--navbox-list-background);&lt;br /&gt;
  color: var(--navbox-list-color);&lt;br /&gt;
  flex-grow: 1;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-sublist{&lt;br /&gt;
  flex-grow: var(--count);&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */&lt;br /&gt;
  grid-column-end: span 2;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .ranger-group,&lt;br /&gt;
.ranger-navbox .ranger-subgroup,&lt;br /&gt;
.ranger-navbox .ranger-listbox &amp;gt; .ranger-wrap{&lt;br /&gt;
  display: grid;&lt;br /&gt;
  justify-items: stretch;&lt;br /&gt;
  align-items: center;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox.striped-even .ranger-even,&lt;br /&gt;
.ranger-navbox.striped-odd .ranger-odd{&lt;br /&gt;
  background: var(--navbox-list-background--striped);&lt;br /&gt;
}&lt;br /&gt;
/* make links use full line height (larger click box)*/&lt;br /&gt;
.ranger-navbox .hlist a{&lt;br /&gt;
	display: inline-block;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
.ranger-navbox .align-left,&lt;br /&gt;
.ranger-navbox .alignleft{&lt;br /&gt;
  text-align: left;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .align-center,&lt;br /&gt;
.ranger-navbox .aligncenter{&lt;br /&gt;
  text-align: center;&lt;br /&gt;
}&lt;br /&gt;
.ranger-navbox .align-right,&lt;br /&gt;
.ranger-navbox .alignright{&lt;br /&gt;
  text-align: right;&lt;br /&gt;
}&lt;br /&gt;
&lt;br /&gt;
/* responsive */&lt;br /&gt;
@media screen and (max-width: 720px) {&lt;br /&gt;
  .ranger-navbox .ranger-section-body,&lt;br /&gt;
  .ranger-navbox .ranger-sublist {&lt;br /&gt;
    display: flex;&lt;br /&gt;
    flex-flow: column;&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-row{&lt;br /&gt;
    display: block;&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-group + .ranger-listbox &amp;gt; .ranger-sublist:first-child,&lt;br /&gt;
  .ranger-navbox .ranger-subgroup + .ranger-listbox &amp;gt; .ranger-sublist:first-child{&lt;br /&gt;
    margin-top: var(--navbox-gap);&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-listbox.empty{&lt;br /&gt;
    display: none;&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-group,&lt;br /&gt;
  .ranger-navbox .ranger-subgroup{&lt;br /&gt;
    text-align: var(--navbox-group-text-align--mobile);&lt;br /&gt;
    white-space: normal;&lt;br /&gt;
  }&lt;br /&gt;
  &lt;br /&gt;
  .ranger-navbox .ranger-sublist {&lt;br /&gt;
    padding-left: var(--navbox-tree-indent);&lt;br /&gt;
    margin-left: var(--navbox-tree-line-indent);&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-subgroup,&lt;br /&gt;
  .ranger-navbox .ranger-listbox {&lt;br /&gt;
    position:relative;&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-group br,&lt;br /&gt;
  .ranger-navbox .ranger-subgroup br{&lt;br /&gt;
    display: none;&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-sublist &amp;gt; .ranger-section &amp;gt; .ranger-header{&lt;br /&gt;
    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-sublist .ranger-row &amp;gt; ::before{&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    left: calc(0px - var(--navbox-tree-indent));&lt;br /&gt;
    top: 0;&lt;br /&gt;
    width: var(--navbox-tree-line-width);&lt;br /&gt;
    height: 100%;&lt;br /&gt;
    content: &amp;#039;&amp;#039;;&lt;br /&gt;
    display: block;&lt;br /&gt;
    background-color: var(--navbox-tree-line-color);&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-sublist .ranger-row &amp;gt; .ranger-listbox::before,&lt;br /&gt;
  .ranger-navbox .ranger-row.empty-list &amp;gt; .ranger-subgroup::before{&lt;br /&gt;
    height: calc(100% + var(--navbox-gap));&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-sublist .ranger-row:last-child &amp;gt; ::before {&lt;br /&gt;
    display: none;&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-sublist .ranger-row:last-child &amp;gt; :first-child::before {&lt;br /&gt;
    display: block;&lt;br /&gt;
    height: calc(50% + var(--navbox-tree-line-width)/2);&lt;br /&gt;
  }&lt;br /&gt;
  .ranger-navbox .ranger-subgroup::after,&lt;br /&gt;
  .ranger-navbox .empty-group &amp;gt; .ranger-listbox &amp;gt; .ranger-wrap::after{&lt;br /&gt;
    position: absolute;&lt;br /&gt;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));&lt;br /&gt;
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));&lt;br /&gt;
    height: var(--navbox-tree-line-width);&lt;br /&gt;
    content: &amp;#039;&amp;#039;;&lt;br /&gt;
    background-color: var(--navbox-tree-line-color);&lt;br /&gt;
  }&lt;br /&gt;
  /* increase height for links */&lt;br /&gt;
  .ranger-navbox .hlist{&lt;br /&gt;
    line-height: 2;&lt;br /&gt;
  }&lt;br /&gt;
}&lt;br /&gt;
/**** `.pill` class: the &amp;quot;pill&amp;quot; style  ****/&lt;br /&gt;
/* remove middle dots betweem items */&lt;br /&gt;
.ranger-navbox.pill .hlist dd:not(:last-child)::after,&lt;br /&gt;
.ranger-navbox.pill .hlist li:not(:last-child)::after{&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
/* remove parentheses around nested lists*/&lt;br /&gt;
.ranger-navbox.pill .hlist dd ol::before,&lt;br /&gt;
.ranger-navbox.pill .hlist dd ul::before,&lt;br /&gt;
.ranger-navbox.pill .hlist dd dl::before,&lt;br /&gt;
.ranger-navbox.pill .hlist dt ol::before,&lt;br /&gt;
.ranger-navbox.pill .hlist dt ul::before,&lt;br /&gt;
.ranger-navbox.pill .hlist dt dl::before,&lt;br /&gt;
.ranger-navbox.pill .hlist li ol::before,&lt;br /&gt;
.ranger-navbox.pill .hlist li ul::before,&lt;br /&gt;
.ranger-navbox.pill .hlist li dl::before,&lt;br /&gt;
.ranger-navbox.pill .hlist dd ol::after,&lt;br /&gt;
.ranger-navbox.pill .hlist dd ul::after,&lt;br /&gt;
.ranger-navbox.pill .hlist dd dl::after,&lt;br /&gt;
.ranger-navbox.pill .hlist dt ol::after,&lt;br /&gt;
.ranger-navbox.pill .hlist dt ul::after,&lt;br /&gt;
.ranger-navbox.pill .hlist dt dl::after,&lt;br /&gt;
.ranger-navbox.pill .hlist li ol::after,&lt;br /&gt;
.ranger-navbox.pill .hlist li ul::after,&lt;br /&gt;
.ranger-navbox.pill .hlist li dl::after {&lt;br /&gt;
  display: none;&lt;br /&gt;
}&lt;br /&gt;
/* make lists inline-flex */&lt;br /&gt;
.ranger-navbox.pill .hlist ul,&lt;br /&gt;
.ranger-navbox.pill .hlist ol,&lt;br /&gt;
.ranger-navbox.pill .hlist dl{&lt;br /&gt;
  display: inline-flex;&lt;br /&gt;
  gap: var(--navbox-pill-gap);&lt;br /&gt;
  flex-wrap: wrap;&lt;br /&gt;
}&lt;br /&gt;
/* &amp;quot;pill&amp;quot; style for items */&lt;br /&gt;
.ranger-navbox.pill .hlist li,&lt;br /&gt;
.ranger-navbox.pill .hlist dt,&lt;br /&gt;
.ranger-navbox.pill .hlist dd{&lt;br /&gt;
  padding: var(--navbox-pill-padding);&lt;br /&gt;
  border-radius: var(--navbox-pill-border-radius);&lt;br /&gt;
  box-shadow: var(--navbox-pill-box-shadow);&lt;br /&gt;
  background: var(--navbox-pill-background);&lt;br /&gt;
  /* 100% height */&lt;br /&gt;
  display: flex;&lt;br /&gt;
  align-items: center;&lt;br /&gt;
  /* for nested lists */&lt;br /&gt;
  gap: var(--navbox-pill-gap); &lt;br /&gt;
  flex-wrap: wrap;&lt;br /&gt;
}&lt;br /&gt;
/* Add a hover / focus feedback style */&lt;br /&gt;
.ranger-navbox.pill .hlist dd:hover,&lt;br /&gt;
.ranger-navbox.pill .hlist dd:focus,&lt;br /&gt;
.ranger-navbox.pill .hlist dt:hover,&lt;br /&gt;
.ranger-navbox.pill .hlist dt:focus,&lt;br /&gt;
.ranger-navbox.pill .hlist li:hover,&lt;br /&gt;
.ranger-navbox.pill .hlist li:focus {&lt;br /&gt;
  box-shadow: var(--navbox-pill-box-shadow--hover);&lt;br /&gt;
  background: var(--navbox-pill-background--hover);&lt;br /&gt;
}&lt;br /&gt;
/**** `.pill-mobile` class: only apply the &amp;quot;pill&amp;quot; style on mobile ****/&lt;br /&gt;
@media screen and (max-width: 720px) {&lt;br /&gt;
	/* remove middle dots betweem items */&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{&lt;br /&gt;
	  display: none;&lt;br /&gt;
	}&lt;br /&gt;
	/* remove parentheses around nested lists*/&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd ol::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd ul::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd dl::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt ol::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt ul::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt dl::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li ol::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li ul::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li dl::before,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd ol::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd ul::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd dl::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt ol::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt ul::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt dl::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li ol::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li ul::after,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li dl::after {&lt;br /&gt;
	  display: none;&lt;br /&gt;
	}&lt;br /&gt;
	/* make lists inline-flex */&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist ul,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist ol,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dl{&lt;br /&gt;
	  display: inline-flex;&lt;br /&gt;
	  gap: var(--navbox-pill-gap);&lt;br /&gt;
	  flex-wrap: wrap;&lt;br /&gt;
	}&lt;br /&gt;
	/* &amp;quot;pill&amp;quot; style for items */&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd{&lt;br /&gt;
	  /* 100% height */&lt;br /&gt;
	  display: flex;&lt;br /&gt;
	  align-items: center;&lt;br /&gt;
	  /* for nested lists */&lt;br /&gt;
	  gap: var(--navbox-pill-gap);&lt;br /&gt;
	  flex-wrap: wrap;&lt;br /&gt;
	}&lt;br /&gt;
	/* further tweak to make text flow looks better for &amp;lt;li&amp;gt; in &amp;lt;ol&amp;gt; */&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li:not(:has(li,ul,ol)){&lt;br /&gt;
	  display: inline-block;&lt;br /&gt;
	}&lt;br /&gt;
	/* Add a hover / focus feedback style */&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd:hover,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dd:focus,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt:hover,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist dt:focus,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li:hover,&lt;br /&gt;
	.ranger-navbox.pill-mobile .hlist li:focus {&lt;br /&gt;
	  box-shadow: var(--navbox-pill-box-shadow--hover);&lt;br /&gt;
	  background: var(--navbox-pill-background--hover);&lt;br /&gt;
	}&lt;br /&gt;
}&lt;br /&gt;
/*********************&lt;br /&gt;
* End Template:Navbox*&lt;br /&gt;
**********************/&lt;/div&gt;</summary>
		<author><name>imported&gt;Merge</name></author>
	</entry>
</feed>