https://wiki.runerealm.org/index.php?action=history&feed=atom&title=MediaWiki%3ACommon.less%2Ftabber.less 2026-04-20T15:56:01Z Revision history for this page on the wiki MediaWiki 1.41.1 https://wiki.runerealm.org/index.php?title=MediaWiki:Common.less/tabber.less&diff=38989&oldid=prev 2024-10-17T16:14:35Z

<p></p> <a href="https://wiki.runerealm.org/index.php?title=MediaWiki:Common.less/tabber.less&amp;diff=38989&amp;oldid=38857">Show changes</a>

Alex https://wiki.runerealm.org/index.php?title=MediaWiki:Common.less/tabber.less&diff=38857&oldid=prev 2024-10-17T16:12:16Z

<p></p> <a href="https://wiki.runerealm.org/index.php?title=MediaWiki:Common.less/tabber.less&amp;diff=38857&amp;oldid=34543">Show changes</a>

Alex https://wiki.runerealm.org/index.php?title=MediaWiki:Common.less/tabber.less&diff=34543&oldid=prev 2024-10-16T23:09:50Z

<p>Created page with &quot;<span dir="auto"><span class="autocomment">============================== &lt;tabber&gt; styling ==============================: </span> :root { --tabber-tab-bg: @BODY_LIGHT; --tabber-tab-border-color: @BODY_BORDER; --tabber-active-tab-bg: @BODY_LIGHT; --tabber-active-tab-color: var(--text-color); --tabber-active-tab-hover-bg: @BODY_LIGHT; --tabber-active-tab-hover-border-color: @BODY_BORDER; --tabber-active-tab-hover-color: var(--text-color); --tabber-active-tab-border-hider-color: @BODY_LIGHT; --ta...&quot;</span></p> <p><b>New page</b></p><div>/* ==============================<br /> &lt;tabber&gt; styling<br /> ============================== */<br /> <br /> :root {<br /> --tabber-tab-bg: @BODY_LIGHT;<br /> --tabber-tab-border-color: @BODY_BORDER;<br /> --tabber-active-tab-bg: @BODY_LIGHT;<br /> --tabber-active-tab-color: var(--text-color);<br /> --tabber-active-tab-hover-bg: @BODY_LIGHT;<br /> --tabber-active-tab-hover-border-color: @BODY_BORDER;<br /> --tabber-active-tab-hover-color: var(--text-color);<br /> --tabber-active-tab-border-hider-color: @BODY_LIGHT;<br /> --tabber-inactive-tab-bg: var(--body-background-color);<br /> --tabber-inactive-tab-border-color: @BODY_BORDER;<br /> --tabber-inactive-tab-color: var(--text-color);<br /> --tabber-inactive-tab-hover-bg: @BODY_LIGHT;<br /> --tabber-inactive-tab-hover-border-color: @BODY_BORDER;<br /> }<br /> <br /> .tabber {<br /> margin: 1em 0;<br /> // display: inline-grid; moved to Vector because of mobile<br /> <br /> .tabbertab {<br /> background-color: var(--tabber-tab-bg);<br /> border: 1px solid var(--tabber-tab-border-color);<br /> box-shadow: @box-shadow;<br /> padding: 1em 1.5em;<br /> }<br /> <br /> }<br /> <br /> ul.tabbernav {<br /> border: none;<br /> margin-left: 2em;<br /> margin-bottom: 0;<br /> margin-right: 2em;<br /> padding: 0;<br /> font-family: inherit; // override default Verdana<br /> <br /> li.tabberactive &gt; a {<br /> background-color: var(--tabber-active-tab-bg);<br /> color: var(--tabber-active-tab-color);<br /> border-bottom: none;<br /> position: relative;<br /> <br /> &amp;:hover {<br /> color: var(--tabber-active-tab-hover-color);<br /> background-color: var(--tabber-active-tab-hover-bg);<br /> border-color: var(--tabber-active-tab-hover-border-color);<br /> border-bottom: none;<br /> }<br /> <br /> // hide the border between the active button and the tab<br /> &amp;::after {<br /> content: &#039;&#039;;<br /> position: absolute;<br /> left: 0;<br /> right: 0;<br /> bottom: -1px;<br /> border-bottom: 2px solid var(--tabber-active-tab-border-hider-color);<br /> }<br /> }<br /> <br /> li a {<br /> background-color: var(--tabber-inactive-tab-bg);<br /> border-bottom: transparent;<br /> border-color: var(--tabber-inactive-tab-border-color);<br /> color: var(--tabber-inactive-tab-color);<br /> display: inline-block;<br /> font-size: 110%;<br /> padding: 0.5em 1em;<br /> <br /> &amp;:hover {<br /> background-color: var(--tabber-inactive-tab-hover-bg);<br /> border-color: var(--tabber-inactive-tab-hover-border-color);<br /> }<br /> <br /> &amp;:link,<br /> &amp;:visited {<br /> color: var(--tabber-inactive-tab-color);<br /> }<br /> <br /> }<br /> }<br /> <br /> /*<br /> The following styles were used as a temporary fix for TabberNeue.<br /> We&#039;re currently using old Tabber because TabberNeue breaks if a tab<br /> dynamically changes size, such as multi-infobox.<br /> */<br /> // .tabber {<br /> // margin: 1em 0;<br /> // }<br /> // <br /> // .tabber__header {<br /> // box-shadow: none;<br /> // }<br /> // <br /> // .tabber__tabs {<br /> // gap: 1px;<br /> // padding-left:5px;<br /> // overflow: visible;<br /> // }<br /> // <br /> // .tabber__tab {<br /> // background-color: var(--body-background-color);<br /> // padding: 0.3em 0.8em;<br /> // border: 1px solid var(--body-border);<br /> // border-bottom: 0;<br /> // position:relative;<br /> // }<br /> // <br /> // .tabber__tab[aria-selected=&#039;true&#039;],<br /> // .tabber__tab[aria-selected=&#039;true&#039;]:visited {<br /> // background-color: var(--body-light);<br /> // box-shadow: none;<br /> // color: var(--text-color);<br /> // }<br /> // <br /> // .tabber__tab[aria-selected=&#039;true&#039;]::after {<br /> // content: &#039;&#039;;<br /> // position: absolute;<br /> // left: 0;<br /> // right: 0;<br /> // bottom: -1px;<br /> // border-bottom: 2px solid var(--body-light);<br /> // }<br /> // <br /> // body.mediawiki .tabber a:visited,<br /> // body.mediawiki .tabber image a:visited,<br /> // body.mediawiki .tabber a:active,<br /> // body.mediawiki .tabber image a:active {<br /> // color: var(--text-color);<br /> // }<br /> // <br /> // .tabber__tab:hover {<br /> // background-color: var(--body-light);<br /> // color: var(--text-color);<br /> // }<br /> // <br /> // .tabber__section {<br /> // background-color: var(--body-light);<br /> // border: 1px solid var(--body-border);<br /> // padding-bottom: 30px;<br /> // }<br /> // <br /> // .tabber__panel {<br /> // padding: 1em 1.5em;<br /> // }<br /> // <br /> // .tabber__panel[aria-hidden=&#039;true&#039;] {<br /> // display: none;<br /> // }<br /> // <br /> // .tabber__indicator {<br /> // display: none;<br /> // }</div>

Alex