https://wiki.runerealm.org/index.php?action=history&feed=atom&title=MediaWiki%3AMinerva.less%2Fnavbox.less 2026-04-26T09:48:50Z Revision history for this page on the wiki MediaWiki 1.41.1 https://wiki.runerealm.org/index.php?title=MediaWiki:Minerva.less/navbox.less&diff=34734&oldid=prev 2024-10-16T23:11:02Z

<p>Created page with &quot;<span dir="auto"><span class="autocomment">==================== navboxes ====================: </span> @navbox-indent: .85em; @navbox-breakpoint-mobile: @width-breakpoint-tablet - 1; @navbox-breakpoint-tablet: @width-breakpoint-tablet; :root { --mobile-navbox-wide-bg-color: desaturate( lighten( #d8ccb4, 3% ), 2% ); --mobile-navbox-linear-gradient: linear-gradient(to right, fade( @white, 0% ), var(--body-main) 95%, var(--body-main) ); } .navbox { border: 1px solid @BODY_BORDER; box-shadow: @b...&quot;</span></p> <p><b>New page</b></p><div>/* ====================<br /> navboxes<br /> ==================== */<br /> <br /> @navbox-indent: .85em;<br /> @navbox-breakpoint-mobile: @width-breakpoint-tablet - 1;<br /> @navbox-breakpoint-tablet: @width-breakpoint-tablet;<br /> <br /> :root {<br /> --mobile-navbox-wide-bg-color: desaturate( lighten( #d8ccb4, 3% ), 2% );<br /> --mobile-navbox-linear-gradient: linear-gradient(to right, fade( @white, 0% ), var(--body-main) 95%, var(--body-main) );<br /> }<br /> <br /> .navbox {<br /> border: 1px solid @BODY_BORDER;<br /> box-shadow: @box-shadow;<br /> font-size: .85em;<br /> <br /> // get rid of stray default mobile css<br /> .content &amp; ul {<br /> padding-left: 0;<br /> <br /> li {<br /> margin-bottom: 0;<br /> }<br /> <br /> }<br /> <br /> @media screen and (max-width: @navbox-breakpoint-mobile) {<br /> <br /> td,<br /> th,<br /> tr,<br /> tbody,<br /> .navbox-subgroup {<br /> display: block;<br /> }<br /> <br /> }<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> <br /> .content table&amp;,<br /> .content &amp; table {<br /> width: 100% !important;<br /> }<br /> <br /> }<br /> <br /> .navbox-subgroup {<br /> margin: 0;<br /> }<br /> <br /> .navbar {<br /> display: none;<br /> }<br /> <br /> // hide images to improve performance<br /> .plink-template,<br /> img {<br /> display: none;<br /> }<br /> <br /> }<br /> <br /> // main navbox heading<br /> .navbox-title {<br /> color: @TEXT_COLOR;<br /> background-color: @BODY_DARK;<br /> font-size: 140%;<br /> text-align: center;<br /> padding: .25em @navbox-indent;<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> border-bottom: 1px solid @BODY_BORDER;<br /> }<br /> <br /> }<br /> <br /> // group headings<br /> .navbox-group-title {<br /> background-color: @BODY_MID;<br /> text-align: left;<br /> padding: .2em @navbox-indent;<br /> <br /> // truncate header<br /> @media screen and (max-width: @navbox-breakpoint-mobile) {<br /> overflow: hidden;<br /> white-space: nowrap;<br /> text-overflow: ellipsis;<br /> }<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> border: 1px solid @BODY_BORDER;<br /> border-width: 0 1px 1px 0;<br /> width: 12vw;<br /> }<br /> <br /> }<br /> <br /> // hide title for half-normal-half-subgroup groups<br /> .navbox-group-title-hidden {<br /> display: none;<br /> }<br /> <br /> .navbox-list {<br /> padding: 0;<br /> position: relative; // needed for ::after<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> border-bottom: 1px solid @BODY_BORDER;<br /> }<br /> <br /> ul {<br /> display: flex;<br /> <br /> @media screen and (max-width: @navbox-breakpoint-mobile) {<br /> white-space: nowrap;<br /> overflow-x: auto; // don&#039;t combine these into one overflow:<br /> overflow-y: hidden;<br /> -webkit-overflow-scrolling: touch; // for inertia scrolling<br /> }<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> padding: .2em @navbox-indent .5em !important;<br /> flex-wrap: wrap;<br /> }<br /> <br /> }<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> &amp;[style*=&quot;center&quot;] ul {<br /> justify-content: center;<br /> }<br /> }<br /> <br /> li {<br /> display: inline-flex;<br /> align-items: center;<br /> height: 3.5em;<br /> margin: 0 0 0 @navbox-indent;<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> height: 2.1em;<br /> <br /> &amp;:first-child {<br /> margin-left: 0;<br /> }<br /> <br /> }<br /> <br /> // create separator between links<br /> &amp; + li::before {<br /> content: &#039;•&#039;;<br /> display: inline-block;<br /> white-space: pre-wrap;<br /> position: relative;<br /> left: -@navbox-indent / 2;<br /> color: var(--text-color);<br /> pointer-events: none;<br /> }<br /> <br /> // for list items that use [[File: instead of plink/chatl,<br /> // hide the second interpunct<br /> &amp; + li &gt; a + a::before {<br /> display: none;<br /> }<br /> <br /> &amp;:last-child {<br /> margin-right: 2em;<br /> }<br /> <br /> }<br /> <br /> // gradient fade to indicate more content<br /> // &lt;https://stackoverflow.com/questions/35801932/&gt;<br /> &amp;::after {<br /> content: &#039;&#039;;<br /> display: block;<br /> position: absolute;<br /> background-image: var(--mobile-navbox-linear-gradient);<br /> height: 100%;<br /> width: 2.5em;<br /> top: 0;<br /> right: 0;<br /> pointer-events: none;<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> display: none;<br /> }<br /> <br /> }<br /> <br /> // for lists with subgroups as children instead of actual items<br /> &amp;.navbox-parent {<br /> border-bottom: 0;<br /> padding: 0;<br /> <br /> &amp;::after {<br /> display: none;<br /> }<br /> <br /> }<br /> <br /> }<br /> <br /> // nested groups<br /> .navbox-group {<br /> <br /> // two levels deep<br /> &amp; &amp; {<br /> <br /> .navbox-group-title {<br /> background-color: @BODY_LIGHT;<br /> padding: 0 @navbox-indent 0 @navbox-indent * 2;<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> padding-left: @navbox-indent;<br /> }<br /> <br /> }<br /> <br /> .navbox-list {<br /> <br /> ul {<br /> padding-left: @navbox-indent * 2;<br /> }<br /> <br /> li {<br /> margin-bottom: 0;<br /> <br /> // realign first list item with heading<br /> &amp;:first-child {<br /> margin-left: 0;<br /> }<br /> <br /> }<br /> <br /> }<br /> <br /> // fake only one level of indentation<br /> &amp;.navbox-group-split .navbox-list ul {<br /> padding-left: @navbox-indent;<br /> }<br /> <br /> }<br /> <br /> // three levels deep<br /> &amp; &amp; &amp; {<br /> <br /> &amp;:first-child .navbox-group-title {<br /> padding-top: .5em;<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> padding-top: 0;<br /> }<br /> <br /> }<br /> <br /> .navbox-group-title {<br /> background-color: transparent;<br /> padding-left: @navbox-indent * 3;<br /> <br /> @media screen and (min-width: @navbox-breakpoint-tablet) {<br /> background-color: var(--mobile-navbox-wide-bg-color);<br /> padding-left: @navbox-indent;<br /> }<br /> <br /> }<br /> <br /> .navbox-list ul {<br /> padding-left: @navbox-indent * 3;<br /> }<br /> <br /> // fake only two levels of indentation<br /> &amp;.navbox-group-split .navbox-list ul {<br /> padding-left: @navbox-indent * 2;<br /> }<br /> <br /> }<br /> <br /> }</div>

Alex