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;// }