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

231 lines
6.1 KiB
CSS
Raw Normal View History

/********** 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 {
color : #000000;
padding : 0px;
}
.tab-image-left {
background : url(chrome://global/skin/tabbox/tab-unselect-left.gif) no-repeat;
width : 11px;
height : 24px;
}
.tab-image-middle {
background : url(chrome://global/skin/tabbox/tab-unselect-middle.gif) repeat-x;
}
.tab-image-right {
background : url(chrome://global/skin/tabbox/tab-unselect-right.gif) no-repeat;
width : 12px;
height : 24px;
}
.tab-text {
padding : 3px 0px 6px 0px;
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 : url(chrome://global/skin/tabbox/tab-unselect-active-middle.gif) repeat-x;
}
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"], tab:hover:active[selected="1"]{
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 : url(chrome://global/skin/tabbox/tab-select-middle.gif) repeat-x;
}
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 : url(chrome://global/skin/tabbox/tab-border-top.gif) repeat-x bottom;
width : 2px;
}
.tab-border-top-left-cap {
background : url(chrome://global/skin/tabbox/tab-border-top-left-cap.gif) no-repeat bottom;
width : 2px;
}
.tab-border-top-right {
background : url(chrome://global/skin/tabbox/tab-border-top.gif) repeat-x bottom;
}
.tab-border-top-right-cap {
background : url(chrome://global/skin/tabbox/tab-border-top-right-cap.gif) no-repeat bottom;
width : 2px;
}
tabs {
padding : 0px;
}
/*** TAB: BOTTOM <tab class="tab-bottom"> ***/
/* Found in editor.xul & editorOverlay.xul
* SMALL TABS FOR NOW */
.tab-bottom > .tab-image-middle > .tab-text {
font : message-box;
font-weight : bold;
}
.tab-bottom > .tab-image-left {
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-left.gif) no-repeat;
width : 11px;
height : 19px;
}
.tab-bottom > .tab-image-middle {
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-mid.gif) repeat-x;
}
.tab-bottom > .tab-image-right {
background : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-right.gif) no-repeat;
width : 11px;
height : 19px;
}
.tab-bottom > .tab-image-middle > .tab-text {
padding : 4px 0px 1px 0px;
}
.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 : url(chrome://global/skin/tabbox/tab-sm-bot-unsel-acti-mid.gif) repeat-x;
}
.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 : url(chrome://global/skin/tabbox/tab-sm-bot-sel-mid.gif) repeat-x;
}
.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 : url(chrome://global/skin/tabbox/tab-border-bot.gif) repeat-x top;
width : 2px;
}
.tabs-bottom > .tab-border-top-left-cap {
background : url(chrome://global/skin/tabbox/tab-border-bot-left-cap.gif) no-repeat top;
width : 2px;
}
.tabs-bottom > .tab-border-top-right {
background : url(chrome://global/skin/tabbox/tab-border-bot.gif) repeat-x top;
}
.tabs-bottom > .tab-border-top-right-cap {
background : url(chrome://global/skin/tabbox/tab-border-bot-right-cap.gif) no-repeat top;
width : 2px;
}
/* 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 {
border-top: 0px;
border-bottom: 2px ridge #000000;
border-left: 2px groove #000000;
border-right: 2px ridge #000000;
padding: 5px;
background-color : #EEEEEE;
}