MediaWiki:Common.less/tabber.less
Jump to navigation
Jump to search
/* ==============================
<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);
}
}
}