https://wiki.runerealm.org/index.php?action=history&feed=atom&title=MediaWiki%3AVector.less%2Fvectortabs.less 2026-04-26T06:46:55Z Revision history for this page on the wiki MediaWiki 1.41.1 https://wiki.runerealm.org/index.php?title=MediaWiki:Vector.less/vectortabs.less&diff=34901&oldid=prev 2024-10-16T23:11:33Z

<p>Created page with &quot;:root { // for more granular control for dark mode --vector-tab-background: var(--body-background-color); --vector-tab-background--hover: var(--body-mid); --vector-tab-link-color: var(--background-link-color); // uses --background-link-color (#52351e) --watch-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; width=&#039;16&#039; height=&#039;16&#039;%3E%3Cpath fill=&#039;transparent&#039; stroke=&#039;%2352351e&#039; stroke-width=&#039;.8&#039; d=&#039;m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l...&quot;</p> <p><b>New page</b></p><div>:root {<br /> // for more granular control for dark mode<br /> --vector-tab-background: var(--body-background-color);<br /> --vector-tab-background--hover: var(--body-mid);<br /> --vector-tab-link-color: var(--background-link-color);<br /> <br /> // uses --background-link-color (#52351e)<br /> --watch-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; width=&#039;16&#039; height=&#039;16&#039;%3E%3Cpath fill=&#039;transparent&#039; stroke=&#039;%2352351e&#039; stroke-width=&#039;.8&#039; d=&#039;m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z&#039;/%3E%3C/svg%3E&quot;);<br /> --unwatch-icon: url(&quot;data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; width=&#039;16&#039; height=&#039;16&#039;%3E%3Cpath fill=&#039;%2352351e&#039; stroke=&#039;%2352351e&#039; stroke-width=&#039;.8&#039; d=&#039;m8.1 1.1 2.2 4.5 4.8.7-3.5 3.4.9 4.8L8 12.2l-4.3 2.3.8-4.8L1 6.3l4.8-.7z&#039;/%3E%3C/svg%3E&quot;);<br /> }<br /> <br /> .vector-menu-tabs-legacy {<br /> // Part of the css required to fix external link heights regardless of font size<br /> //.vector-menu-content {<br /> // height: 100%; still needed?<br /> //}<br /> <br /> // pixel padding for border<br /> padding: 0;<br /> <br /> // redlink in tab<br /> .new {<br /> a,<br /> a:visited {<br /> color: var(--redlink-color);<br /> }<br /> }<br /> <br /> // selected tab<br /> .selected {<br /> background: var(--body-main);<br /> <br /> a,<br /> a:visited {<br /> color: var(--text-color);<br /> }<br /> }<br /> <br /> // padding for tabs<br /> li a {<br /> color: var(--vector-tab-link-color);<br /> padding: 0 .75em;<br /> padding-top: 1em;<br /> <br /> &amp;:visited {<br /> color: var(--vector-tab-link-color);<br /> }<br /> }<br /> <br /> // background for tabs<br /> ul {<br /> li {<br /> background: var(--vector-tab-background);<br /> }<br /> <br /> a:hover {<br /> text-decoration: none;<br /> }<br /> }<br /> }<br /> <br /> // hide &quot;Read&quot; tab<br /> #ca-view {<br /> display: none !important; // for beating the inline style in lower widths<br /> }<br /> <br /> // Tabs hover<br /> .vector-menu-tabs ul li:not(.selected):hover,<br /> // &quot;More options&quot; dropdown<br /> #p-cactions:hover #p-cactions-label {<br /> background: var(--vector-tab-background--hover);<br /> }<br /> <br /> <br /> // inner shadow for tabs<br /> .vector-menu-tabs ul li:not(.selected),<br /> #mw-head .vector-menu-dropdown .vector-menu-heading {<br /> box-shadow: inset 0 -7px 7px -7px rgba(0, 0, 0, 0.15);<br /> }<br /> <br /> // remove image borders between all tabs<br /> .vector-menu-tabs,<br /> .vector-menu-tabs a,<br /> #mw-head .vector-menu-dropdown .vector-menu-heading {<br /> background-image: none;<br /> }<br /> <br /> // remove remaining blue border in VisualEditor<br /> .ve-activated .vector-menu-tabs .selected {<br /> box-shadow: none;<br /> }<br /> <br /> // Watch icon<br /> .vector-menu-tabs {<br /> #ca-watch.icon a {<br /> &amp;:before,<br /> &amp;:hover:before,<br /> &amp;:focus:before {<br /> background-image: var(--watch-icon);<br /> }<br /> }<br /> <br /> #ca-unwatch.icon a {<br /> &amp;:before,<br /> &amp;:hover:before,<br /> &amp;:focus:before {<br /> background-image: var(--unwatch-icon);<br /> }<br /> }<br /> }</div>

Alex