gecko-dev/themes/classic/global/mac/tabbox.css

/********** Tab widget *********/
/*******************************/
/* This Mac-specific CSS styles tabs that are located on the top of their content,
 * as Macintosh tabs generally are.  An example of using bottom tab images can be 
 * found in EditorToolbar.css in classic/editor/.
 *******************************/

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*** TAB: TOP <tab> ***/

tab {
  -moz-appearance: tab;
  -moz-box-align: stretch;
  color				: #000000;
}

/* we use |tab-left-edge| for all 3, which is not drawn in the theme impl
 * and let the |tab| take care of everything.
 */
.tab-image-left {
  -moz-appearance: tab-left-edge;
  background		: url(chrome://global/skin/tabbox/tab-unselect-left.gif) no-repeat;
  width				: 11px;
  height			: 25px;
}

.tab-image-middle {
  -moz-appearance: tab-left-edge;
  background-color  : #CECECE;
  border-top        : 3px solid;
  border-bottom     : 3px solid;
  -moz-border-top-colors: #000000 #CECECE #DEDEDE;
  -moz-border-bottom-colors: #FFFFFF #CECECE #000000;
}

.tab-image-right {
  -moz-appearance: tab-left-edge;
  background		: url(chrome://global/skin/tabbox/tab-unselect-right.gif) no-repeat;
  width				: 12px;
  height			: 25px;
}

.tab-text {
  font				: menu;
}

tab:hover:active {
  color				: #FFFFFF;
}

tab:hover:active > .tab-image-left { 
  background		: url(chrome://global/skin/tabbox/tab-unselect-active-left.gif) no-repeat;
}

tab:hover:active > .tab-image-middle { 
  background-color: #666666;
  -moz-border-top-colors: #000000 #444444 #555555;
  -moz-border-bottom-colors: #FFFFFF #CCCCCC #000000;
}

tab:hover:active > .tab-image-right { 
  background		: url(chrome://global/skin/tabbox/tab-unselect-active-right.gif) no-repeat;
}


/* when a tab is selected this is how it should look */
tab:hover:active[selected="true"] {
	color			: #000000;
}

tab[selected="true"] > .tab-image-left,
tab:hover:active[selected="true"] > .tab-image-left { 
  background		: url(chrome://global/skin/tabbox/tab-select-left.gif) no-repeat;
}

tab[selected="true"] > .tab-image-middle,
tab:hover:active[selected="true"] > .tab-image-middle { 
  background-color: #EEEEEE;
  -moz-border-top-colors: #000000 #CCCCCC #FFFFFF;
  -moz-border-bottom-colors: #EEEEEE;
}

tab[selected="true"] > .tab-image-right,
tab:hover:active[selected="true"] > .tab-image-right { 
  background		: url(chrome://global/skin/tabbox/tab-select-right.gif) no-repeat;
}

.tab-border-top-left {
  background-color  : #DEDEDE;
  border-bottom     : 3px solid;
  -moz-border-bottom-colors: #FFFFFF #CECECE #000000;
  width				: 3px;
}

.tab-border-top-right {
  background-color  : #DEDEDE;
  border-bottom     : 3px solid;
  -moz-border-bottom-colors: #FFFFFF #CECECE #000000;
}

.tab-border-top-left-cap, .tab-border-top-right-cap {
  background-color  : #DEDEDE;
  border-bottom     : 3px solid;
  -moz-border-bottom-colors: #000000;
  width				: 1px;
}

tabs {
  padding			: 0px;
}

/*** TAB: BOTTOM <tab class="tab-bottom"> ***/
/* Found in editor.xul & editorOverlay.xul 
 * SMALL TABS FOR NOW */

.tab-bottom > .tab-image-left {
  background		: url(chrome://global/skin/tabbox/tab-sm-bot-unsel-left.gif) no-repeat;
  width				: 11px;
  height			: 22px;
}

.tab-bottom > .tab-image-middle {
  -moz-border-top-colors: #FFFFFF #CECECE #000000;
  -moz-border-bottom-colors: #000000 #CECECE #DEDEDE;
}

.tab-bottom > .tab-image-right {
  background		: url(chrome://global/skin/tabbox/tab-sm-bot-unsel-right.gif) no-repeat;
  width				: 11px;
  height			: 22px;
}

.tab-bottom > .tab-image-middle > .tab-text {
  font			    : message-box;
  font-weight		: bold;
  padding           : 0px;
  margin            : 0px !important;
}

.tab-bottom:hover:active > .tab-image-left { 
  background		: url(chrome://global/skin/tabbox/tab-sm-bot-unsel-acti-left.gif) no-repeat;
}

.tab-bottom:hover:active > .tab-image-middle { 
  background-color: #666666;
  -moz-border-top-colors: #FFFFFF #CCCCCC #000000;
  -moz-border-bottom-colors: #000000 #444444 #555555;
}

.tab-bottom:hover:active > .tab-image-right { 
  background		: url(chrome://global/skin/tabbox/tab-sm-bot-unsel-acti-right.gif) no-repeat;
}

/* when a tab is selected this is how it should look */

.tab-bottom[selected="true"] > .tab-image-left,
.tab-bottom:hover:active[selected="true"] > .tab-image-left { 
  background		: url(chrome://global/skin/tabbox/tab-sm-bot-sel-left.gif) no-repeat;
}

.tab-bottom[selected="true"] > .tab-image-middle,
.tab-bottom:hover:active[selected="true"] > .tab-image-middle { 
  background-color: #EEEEEE;
  -moz-border-top-colors: #EEEEEE;
  -moz-border-bottom-colors: #000000 #CCCCCC #FFFFFF;
}

.tab-bottom[selected="true"] > .tab-image-right,
.tab-bottom:hover:active[selected="true"] > .tab-image-right { 
  background		: url(chrome://global/skin/tabbox/tab-sm-bot-sel-right.gif) no-repeat;
}

.tabs-bottom > .tab-border-top-left {
  background-color  : #DEDEDE;
  border-bottom     : 0px;
  border-top        : 3px solid;
  -moz-border-top-colors: #FFFFFF #CECECE #000000;
  width				: 3px;
}

.tabs-bottom > stack > .tab-border-top-right {
  background-color  : #DEDEDE;
  border-bottom     : 0px;
  border-top        : 3px solid;
  -moz-border-top-colors: #FFFFFF #CECECE #000000;
}

.tabs-bottom > .tab-border-top-left-cap, .tabs-bottom > .tab-border-top-right-cap {
  background-color  : #DEDEDE;
  border-bottom     : 0px;
  border-top        : 3px solid;
  -moz-border-top-colors: #000000;
  width				: 1px;
}

    /* top tabs */
tabbox[orient="vertical"] tabs[orient="horizontal"] tab { 
  padding: 0px;
  margin: 0px;
}

	/* bottom tabs */
tabbox[orient="vertical"] tabpanels + tabs[orient="horizontal"] tab { 
  border-top: none;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  -moz-border-radius: 0px 0px 8px 8px;
  padding: 1px 5px 3px 5px;
  margin: 1px 2px 1px 2px;
}

	/* left tabs */
tabbox[orient="horizontal"] tabs[orient="vertical"] tab { 
  border-right: none;
  -moz-border-radius: 8px 0px 0px 8px;
  padding-right: 1px;
  margin: 2px 1px 2px 1px;
}

	/* right tabs */
tabbox[orient="horizontal"] tabpanels + tabs[orient="vertical"]  tab { 
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: none;
  border-right: 1px solid #666666;
  -moz-border-radius: 0px 8px 8px 0px;
  padding: 3px 5px 1px 5px;
  margin: 2px 1px 2px 1px;
}

tabbox { 
  border: none; 
}

/* border on bottom only, no padding (used in search) */
tabpanels.light {
  border: none;
  border-bottom: 1px outset #CCCCCC;
  padding: 0px;
}

tabpanels {
  -moz-appearance: tabpanels; 
  border-top: 0px;
  border-bottom: 2px ridge #000000;
  border-left: 2px groove #000000;
  border-right: 2px ridge #000000;
  padding: 5px;
  background-color		: #EEEEEE;
}