Bureaucrats, editor, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
47,327
edits
MediaWiki:Common.less/tabber.less: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
Line 1:
/* ==============================
<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;
// }
| |||