MediaWiki:Gadget-Tab.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/*Copied from http://www.barelyfitz.com/projects/tabber/example.css used under mit license
see http://www.barelyfitz.com/projects/tabber/
*/
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
 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
 --------------------------------------------------*/

.tabberlive {
	margin-top:10px;
	margin-bottom:15px;
}

.tabber.tabberlive .tabberlive {
    margin-left: unset;
}

/*--------------------------------------------------
 ul.tabbernav = the tab navigation list
 li.tabberactive = the active tab
 --------------------------------------------------*/
ul.tabbernav {
 margin:0;
 padding: 13px 0;
 font: bold 12px Roboto, sans-serif;
 display:flex;
 flex-direction:row;
 justify-content:center;
}

@media (max-width:720px){
	ul.tabbernav {
		justify-content: flex-start;
		overflow: auto;
	}
	
	ul.tabbernav li a{
		display:inline-block;
	}
}

ul.tabbernav .tabberactive{
	z-index:2;
}

ul.tabbernav li {
 list-style: none;
 display: inline-block !important;
 z-index:1;
}

ul.tabbernav li:hover{
	z-index:100;
}

ul.tabbernav li a {
 padding:7px;
 text-decoration:none;
 transition:0.1s ease-in-out;
 color: #212121;
}

html.skin-citizen-dark ul.tabbernav li a, body.wgl-darkmode ul.tabbernav li a {
	color: #dedede;
}

ul.tabbernav li a:hover, ul.tabbernav li.tabberactive a:hover {
 color:#0066FF;
 border-bottom: 2px inset #0066FF;
}

ul.tabbernav li.tabberactive a {
	border-bottom: 2px inset #06305b;
	color:#06305b;
}

html.skin-citizen-dark ul.tabbernav li.tabberactive a, body.wgl-darkmode ul.tabbernav li.tabberactive a{
	color: #a4cff9;
	border-color: #a4cff9;
}

/*--------------------------------------------------
 .tabbertab = the tab content
 Add style only after the tabber interface is set up (.tabberlive)
 --------------------------------------------------*/
.tabbertab {
	animation: fadeEffect 1s;
	-webkit-animation: fadeEffect 1s;
} 
 
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #ccc;
 border-top:0;
 border-left:none;
 border-right:none;
 border-bottom:none;
 box-shadow:0 0 4px 0 rgba(0,0,0,0.25);

 /* 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;
}