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.
*/

// :root {
//     --tabber-inactive-tab-bg: #C0A886;
//     --tabber-fade-scroll: linear-gradient(to bottom,rgba(226,219,200,0),#d8ccb4 95%,#94866d);
// }

// .tabber__tabs {
//     gap: 1px;
// }

// .tabber__tab {
//     background-color: var(--tabber-inactive-tab-bg);
//     padding: 0.5em 0.8em;
//     border: 1px solid var(--body-border);
//     border-bottom: 0;
// }

// .tabber__tabs .tabber__tab {
//     color: var(--text-color);
// }

// /* Specific styles needed to override color on Minerva. */
// 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:active {
//     color: var(--text-color);
//     box-shadow: none;
// }

// .tabber__tab:hover {
//     background-color: var(--body-light);
//     color: var(--text-color);
//     box-shadow: none;
// }

// .tabber__tab--active, .tabber__tab--active:visited {
//     background-color: var(--body-light);
//     color: var(--text-color);
//     box-shadow: none;
// }

// .tabber__header, .tabber__section, .tabber__tabs {
//     scroll-behavior: unset;
// }

// .tabber__panel {
//     /* Hide non-active tabs. */
//     /* display:none conflicted with tabber somehow and hid all tabs. */
//     width: 0px;
// }

// .tabber__panel.tabber__panel--active {
//     width: 300px;
// }

// .tabber__section {
//     background-color: var(--body-light);
//     border: 1px solid var(--body-border);
//     overflow-y: scroll;
//     padding-bottom: 30px; /* only necessary for fade scroll hack */
// }

// .tabber__panel {
//     padding: 1em 1.5em;
// }