MediaWiki:Gadget-Tabber.css: Difference between revisions

From the Kingdom Hearts Wiki, the Kingdom Hearts encyclopedia
Jump to navigationJump to search
 
mNo edit summary
 
(79 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
/* Copied from http://www.barelyfitz.com/projects/tabber/example.css and used under MIT license
see http://www.barelyfitz.com/projects/tabber/
  See: http://www.barelyfitz.com/projects/tabber/ */
*/
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */


.tabberlive .tabbertab .infobox,
.tabber {
.tabberlive .tabbertab table,
max-width: 100%;
.tabbertab .tabber {
vertical-align: top;
float: none !important;
margin: 0;
width: 100% !important;
}
margin: 0 !important;
.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 {
.tabbertab {
float: none !important;
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 {
.tabbernav + p {
display: none;
display: none;
}
.tabber + br {
display: block;
}
}


Line 23: Line 47:
  --------------------------------------------------*/
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
.tabberlive .tabbertabhide {
display:none;
display: none;
}
}


Line 30: Line 54:
  .tabberlive = after the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
  --------------------------------------------------*/
.tabberlive.goright {
margin-left:15px;
margin-bottom:5px;
}
.tabbertab table {
.tabbertab table {
margin-top: 0;
float: none !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}


Line 43: Line 65:
  --------------------------------------------------*/
  --------------------------------------------------*/
ul.tabbernav {
ul.tabbernav {
margin:0;
display: flow-root;
padding: 3px 0;
font: bold 95% Verdana, sans-serif;
border-bottom: 1px solid #CCC;
border-bottom: 1px solid #ccc;
font: bold 12px Verdana, sans-serif;
padding: 3px 0;
margin: 0;
}
}


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


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


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


Line 89: Line 105:
  --------------------------------------------------*/
  --------------------------------------------------*/
.tabberlive .tabbertab {
.tabberlive .tabbertab {
padding:5px;
background: #fff;
border:1px solid #ccc;
border: 1px solid #ccc;
border-top:0;
border-top: 0;
 
padding: 5px;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
 
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
 
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
 
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
}
/* </nowiki></pre> */

Latest revision as of 17:02, 26 March 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;
}