MediaWiki:Gadget-Tabber.css: Difference between revisions

From SmashWiki, the Super Smash Bros. wiki
Jump to navigationJump to search
mNo edit summary
mNo edit summary
 
(5 intermediate revisions by the same user not shown)
Line 4: Line 4:
.tabber {
.tabber {
max-width: 100%;
max-width: 100%;
vertical-align: top;
margin: 0;
margin: 0;
}
.tabber.gocenter {
margin-left: auto;
margin-right: auto;
}
}
.tabber.goleft {
.tabber.goleft {
float: left;
display: block;
display: block;
margin: 0 1em 0.5em 0;
margin: 0 1em 0.5em 0;
}
}
.tabber.goright {
.tabber.goright {
float: right;
display: block;
display: block;
margin: 0 0 0.5em 1em;
margin: 0 0 0.5em 1em;
Line 42: Line 37:
.tabbernav + p {
.tabbernav + p {
display: none;
display: none;
}
.tabber + br {
display: block;
}
}


Line 67: Line 65:
  --------------------------------------------------*/
  --------------------------------------------------*/
ul.tabbernav {
ul.tabbernav {
display: flow-root;
font: bold 95% Verdana, sans-serif;
font: bold 95% Verdana, sans-serif;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;

Latest revision as of 12:04, March 26, 2024

/* Copied from http://www.barelyfitz.com/projects/tabber/example.css and used under MIT license
   See: http://www.barelyfitz.com/projects/tabber/ */

.tabber {
	max-width: 100%;
	vertical-align: top;
	margin: 0;
}
.tabber.goleft {
	display: block;
	margin: 0 1em 0.5em 0;
}
.tabber.goright {
	display: block;
	margin: 0 0 0.5em 1em;
}
.infobox .tabber {
	min-width: 100%;
}
.tabbertab {
	overflow: auto;
	float: none !important;
	width: auto !important;
}
.tabbertab > .tabber,
.mediawiki .tabbertab .infobox {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	display: block !important;
	margin: 0 !important;
}
.tabbertab .infobox tbody {
	width: 100% !important;
	display: table !important;
}
.tabbernav + p {
	display: none;
}
.tabber + br {
	display: block;
}

/*--------------------------------------------------
 REQUIRED to hide the non-active tab content.
 But do not hide them in the print stylesheet!
 --------------------------------------------------*/
.tabberlive .tabbertabhide {
	display: none;
}

/*--------------------------------------------------
 .tabber = before the tabber interface is set up
 .tabberlive = after the tabber interface is set up
 --------------------------------------------------*/
.tabbertab table {
	float: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/*--------------------------------------------------
 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/
ul.tabbernav {
	display: flow-root;
	font: bold 95% Verdana, sans-serif;
	border-bottom: 1px solid #ccc;
	padding: 3px 0;
	margin: 0;
}

ul.tabbernav li {
	list-style: none;
	display: inline-block !important;
	margin: 5px 0 0;
}

ul.tabbernav li a {
	color: #448;
	background: #f2f7ff;
	border: 1px solid #ccc;
	text-decoration: none;
	padding: 3px 0.5em;
	margin-left: 3px;
}
ul.tabbernav li a:visited {
	color: #667;
}
ul.tabbernav li a:hover {
	background: #fff9f2;
}

ul.tabbernav li.tabberactive a {
	color: #000;
	background: #fff;
	border-bottom: 1px solid #fff;
	cursor: default;
}

/*--------------------------------------------------
 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/
.tabberlive .tabbertab {
	background: #fff;
	border: 1px solid #ccc;
	border-top: 0;
	padding: 5px;
}