MediaWiki:Common.less/tabber.less

/* ==============================

        <tabber> styling
  ============================== */

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; --tabber-inactive-tab-bg: var(--body-background-color); --tabber-inactive-tab-border-color: @BODY_BORDER; --tabber-inactive-tab-color: var(--text-color); --tabber-inactive-tab-hover-bg: @BODY_LIGHT; --tabber-inactive-tab-hover-border-color: @BODY_BORDER; }

.tabber { margin: 1em 0; // display: inline-grid; moved to Vector because of mobile

.tabbertab { background-color: var(--tabber-tab-bg); border: 1px solid var(--tabber-tab-border-color); box-shadow: @box-shadow; padding: 1em 1.5em; }

}

ul.tabbernav {

   border: none;
   margin-left: 2em;
   margin-bottom: 0;
   margin-right: 2em;
   padding: 0;
   font-family: inherit; // override default Verdana

   li.tabberactive > a {
       background-color: var(--tabber-active-tab-bg);
       color: var(--tabber-active-tab-color);
       border-bottom: none;
       position: relative;

       &:hover {
           color: var(--tabber-active-tab-hover-color);
           background-color: var(--tabber-active-tab-hover-bg);
           border-color: var(--tabber-active-tab-hover-border-color);
           border-bottom: none;
       }

// hide the border between the active button and the tab

       &::after {

content: ; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 2px solid var(--tabber-active-tab-border-hider-color); }

   }

   li a {
       background-color: var(--tabber-inactive-tab-bg);

border-bottom: transparent; border-color: var(--tabber-inactive-tab-border-color);

       color: var(--tabber-inactive-tab-color);
       display: inline-block;
       font-size: 110%;
       padding: 0.5em 1em;

       &:hover {
           background-color: var(--tabber-inactive-tab-hover-bg);
           border-color: var(--tabber-inactive-tab-hover-border-color);
       }

       &:link,
       &:visited {
           color: var(--tabber-inactive-tab-color);
       }

   }

}

/*

 The following styles were used as a temporary fix for TabberNeue.
 We're currently using old Tabber because TabberNeue breaks if a tab
 dynamically changes size, such as multi-infobox.

• /

// .tabber { // margin: 1em 0; // } // // .tabber__header { // box-shadow: none; // } // // .tabber__tabs { // gap: 1px; // padding-left:5px; // overflow: visible; // } // // .tabber__tab { // background-color: var(--body-background-color); // padding: 0.3em 0.8em; // border: 1px solid var(--body-border); // border-bottom: 0; // position:relative; // } // // .tabber__tab[aria-selected='true'], // .tabber__tab[aria-selected='true']:visited { // background-color: var(--body-light); // box-shadow: none; // color: var(--text-color); // } // // .tabber__tab[aria-selected='true']::after { // content: ; // position: absolute; // left: 0; // right: 0; // bottom: -1px; // border-bottom: 2px solid var(--body-light); // } // // body.mediawiki .tabber a:visited, // body.mediawiki .tabber image a:visited, // body.mediawiki .tabber a:active, // body.mediawiki .tabber image a:active { // color: var(--text-color); // } // // .tabber__tab:hover { // background-color: var(--body-light); // color: var(--text-color); // } // // .tabber__section { // background-color: var(--body-light); // border: 1px solid var(--body-border); // padding-bottom: 30px; // } // // .tabber__panel { // padding: 1em 1.5em; // } // // .tabber__panel[aria-hidden='true'] { // display: none; // } // // .tabber__indicator { // display: none; // }