https://hna.wiki/MediaWiki:CustomTabs.css?action=history&feed=atom 2026-07-15T03:41:52Z Revision history for this page on the wiki MediaWiki 1.46.0 https://hna.wiki/MediaWiki:CustomTabs.css?diff=472&oldid=prev 2025-08-29T16:54:37Z

<p>Created page with &quot;<span class="autocomment">* For Template:CustomTabs *: </span> .custom-tabs { display: flex; flex-direction: row; gap: 5px; width: 100%; margin: 5px 0; flex-wrap: wrap; justify-content: space-evenly; } .custom-tabs &gt; span { border-radius: 4px; display: flex; align-items: center; text-align: center; justify-content: center; flex: 1; transition: .25s; } .custom-tabs a, .custom-tabs .selflink, .custom-tabs span.new { display: flex; width: 100%; height: 100%; padding: 8px 10px; border...&quot;</p> <p><b>New page</b></p><div>/** For Template:CustomTabs **/<br /> .custom-tabs {<br /> display: flex;<br /> flex-direction: row;<br /> gap: 5px;<br /> width: 100%;<br /> margin: 5px 0;<br /> flex-wrap: wrap;<br /> justify-content: space-evenly;<br /> }<br /> <br /> .custom-tabs &gt; span {<br /> border-radius: 4px;<br /> display: flex;<br /> align-items: center;<br /> text-align: center;<br /> justify-content: center;<br /> flex: 1;<br /> transition: .25s;<br /> }<br /> <br /> .custom-tabs a,<br /> .custom-tabs .selflink,<br /> .custom-tabs span.new {<br /> display: flex;<br /> width: 100%;<br /> height: 100%;<br /> padding: 8px 10px;<br /> border-radius: 4px;<br /> align-items: center;<br /> text-align: center;<br /> justify-content: center;<br /> }<br /> <br /> /* Mobile 2 column format */<br /> .skin-fandommobile div.custom-tabs {<br /> display: grid;<br /> grid-template-columns: repeat(2, 50%);<br /> grid-auto-flow: row;<br /> flex-wrap: wrap;<br /> }<br /> <br /> .skin-fandommobile .custom-tabs a,<br /> .skin-fandommobile .custom-tabs .selflink,<br /> .skin-fandommobile .custom-tabs span.new {<br /> font-size: 90%;<br /> }<br /> <br /> /* Define Colors for Dark Theme */<br /> .theme-fandomdesktop-dark .custom-tabs, .theme-fandommobile-dark .custom-tabs {<br /> --language-tabs-active-color: var(--pi-tabber-bg-color);<br /> --language-tabs-inactive-color: var(--pi-rows-color);<br /> --language-tabs-inactive-hover-color: var(--pi-tabber-bg-color);<br /> --secondary-tabs-active-color: var(--theme-color-10);<br /> --secondary-tabs-inactive-color: var(--theme-color-9);<br /> --secondary-tabs-inactive-hover-color: var(--theme-color-7);<br /> --tertiary-tabs-active-color: #48549a;<br /> --tertiary-tabs-inactive-color: #333e90;<br /> --tertiary-tabs-inactive-hover-color: #48549a;<br /> }<br /> <br /> /* Define Colors for Light Theme */<br /> .theme-fandomdesktop-light .custom-tabs, .theme-fandommobile-light .custom-tabs {<br /> --language-tabs-active-color: var(--pi-header-bg-color);<br /> --language-tabs-inactive-color: var(--pi-tabber-bg-color);<br /> --language-tabs-inactive-hover-color: var(--pi-header-bg-color);<br /> --secondary-tabs-active-color: var(--theme-color-6);<br /> --secondary-tabs-inactive-color: var(--theme-color-8);<br /> --secondary-tabs-inactive-hover-color: var(--theme-color-6);<br /> --tertiary-tabs-active-color: #afacba;<br /> --tertiary-tabs-inactive-color: #ece5d8;<br /> --tertiary-tabs-inactive-hover-color: #afacba;<br /> }<br /> <br /> /* Default Color Scheme */<br /> .custom-tabs-default {<br /> --active-tab-background-color: var(--theme-accent-color);<br /> --active-tab-color: var(--custom-tabs-active-color);<br /> --inactive-tab-background-color: rgba(var(--theme-accent-color--rgba), 0.5);<br /> --inactive-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-hover-background-color: var(--theme-accent-color);<br /> --inactive-tab-hover-color: var(--custom-tabs-active-color);<br /> }<br /> <br /> /* Language Color Scheme */<br /> .custom-tabs-language {<br /> --active-tab-background-color: var(--language-tabs-active-color);<br /> --active-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-background-color: var(--language-tabs-inactive-color);<br /> --inactive-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-hover-background-color: var(--language-tabs-inactive-hover-color);<br /> --inactive-tab-hover-color: var(--theme-page-text-color);<br /> }<br /> <br /> /* Secondary Color Scheme */<br /> .custom-tabs-secondary {<br /> --active-tab-background-color: var(--secondary-tabs-active-color);<br /> --active-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-background-color: var(--secondary-tabs-inactive-color);<br /> --inactive-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-hover-background-color: var(--secondary-tabs-inactive-hover-color);<br /> --inactive-tab-hover-color: var(--theme-page-text-color);<br /> }<br /> <br /> /* Tertiary Color Scheme */<br /> .custom-tabs-tertiary {<br /> --active-tab-background-color: var(--tertiary-tabs-active-color);<br /> --active-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-background-color: var(--tertiary-tabs-inactive-color);<br /> --inactive-tab-color: var(--theme-page-text-color);<br /> --inactive-tab-hover-background-color: var(--tertiary-tabs-inactive-hover-color);<br /> --inactive-tab-hover-color: var(--theme-page-text-color);<br /> }<br /> <br /> /* Apply Color Scheme */<br /> .custom-tabs span.active-tab {<br /> background-color: var(--active-tab-background-color);<br /> }<br /> <br /> .custom-tabs span.active-tab strong {<br /> color: var(--active-tab-color);<br /> }<br /> <br /> .custom-tabs span.active-tab a:not(.new) {<br /> color: var(--active-tab-color);<br /> font-weight: bold;<br /> }<br /> <br /> .custom-tabs span.inactive-tab {<br /> background: var(--inactive-tab-background-color);<br /> }<br /> <br /> .custom-tabs span.inactive-tab a:not(.new) {<br /> color: var(--inactive-tab-color);<br /> }<br /> <br /> .custom-tabs span.inactive-tab:hover {<br /> background: var(--inactive-tab-hover-background-color);<br /> }<br /> <br /> .custom-tabs span.inactive-tab:hover a:not(.new) {<br /> color: var(--inactive-tab-hover-color);<br /> }</div>

ReinDevildom