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

    }
}