mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-08 20:47:44 +00:00
228 lines
6.1 KiB
CSS
228 lines
6.1 KiB
CSS
|
|
/*** TAB: TOP <tab> ***/
|
|
|
|
tab {
|
|
-moz-binding : url(chrome://global/skin/globalBindings.xml#tab);
|
|
padding : 0px;
|
|
color : #1C1D1F;
|
|
margin : 0px;
|
|
}
|
|
|
|
.tab-image-left {
|
|
background : url(chrome://global/skin/tab-unselect-left.gif) no-repeat bottom;
|
|
width : 11px;
|
|
height : 21px;
|
|
}
|
|
|
|
.tab-image-middle {
|
|
background : url(chrome://global/skin/tab-unselect-middle.gif) repeat-x bottom;
|
|
min-height: 21px;
|
|
}
|
|
|
|
.tab-image-right {
|
|
background : url(chrome://global/skin/tab-unselect-right.gif) no-repeat bottom;
|
|
width : 11px;
|
|
height : 21px;
|
|
}
|
|
|
|
.tab-text {
|
|
padding : 3px 0px 3px 0px;
|
|
font-size : 12px;
|
|
font-family : charcoal, ms sans serif;
|
|
}
|
|
|
|
tab:hover:active {
|
|
color : #FEFEFE;
|
|
}
|
|
|
|
tab:hover:active > box > .tab-image-left {
|
|
background : url(chrome://global/skin/tab-clicked-left.gif) no-repeat bottom;
|
|
}
|
|
|
|
tab:hover:active > box > .tab-image-middle {
|
|
background : url(chrome://global/skin/tab-clicked-middle.gif) repeat-x bottom;
|
|
}
|
|
|
|
tab:hover:active > box > .tab-image-right {
|
|
background : url(chrome://global/skin/tab-clicked-right.gif) no-repeat bottom;
|
|
}
|
|
|
|
|
|
/* when a tab is selected this is how it should look */
|
|
tab[selected="true"], tab:hover:active[selected="true"],
|
|
tab[selected="1"], tab:hover:active[selected="1"] {
|
|
color : #1C1D1F;
|
|
}
|
|
|
|
tab[selected="true"] > box > .tab-image-left,
|
|
tab:hover:active[selected="true"] > box > .tab-image-left {
|
|
background : url(chrome://global/skin/tab-select-left.gif) no-repeat bottom;
|
|
}
|
|
|
|
tab[selected="true"] > box > .tab-image-middle,
|
|
tab:hover:active[selected="true"] > box > .tab-image-middle {
|
|
background : url(chrome://global/skin/tab-select-middle.gif) repeat-x bottom;
|
|
}
|
|
|
|
tab[selected="true"] > box > .tab-image-right,
|
|
tab:hover:active[selected="true"] > box > .tab-image-right {
|
|
background : url(chrome://global/skin/tab-select-right.gif) no-repeat bottom;
|
|
}
|
|
|
|
.tab-border-top-left, .tab-border-top-right {
|
|
background : url(chrome://global/skin/tab-top-border.gif) repeat-x bottom;
|
|
height : 2px;
|
|
}
|
|
|
|
.tab-border-top-left-cap {
|
|
background : url(chrome://global/skin/tab-top-border-leftcap.gif) no-repeat bottom;
|
|
width : 2px;
|
|
height : 2px;
|
|
}
|
|
|
|
.tab-border-top-right-cap {
|
|
background : url(chrome://global/skin/tab-top-border-rightcap.gif) no-repeat bottom;
|
|
width : 2px;
|
|
height : 2px;
|
|
}
|
|
|
|
tabbox {
|
|
-moz-binding : url(chrome://global/skin/globalBindings.xml#tabbox);
|
|
padding : 0px;
|
|
}
|
|
|
|
/* top tabs */
|
|
tabcontrol[align="vertical"] > tabbox[align="horizontal"] > tab {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
}
|
|
|
|
/*** TAB: BOTTOM <tab class="tab-bottom"> ***/
|
|
/* Found in editor.xul & editorOverlay.xul
|
|
* SMALL TABS FOR NOW */
|
|
|
|
.tab-bottom:hover:active > box > .tab-image-middle > .tab-text {
|
|
color : #FEFEFE;
|
|
}
|
|
|
|
.tab-bottom > box > .tab-image-left {
|
|
background : url(chrome://global/skin/tab-bot-unselect-left.gif) no-repeat;
|
|
width : 11px;
|
|
height : 19px;
|
|
}
|
|
|
|
.tab-bottom > box > .tab-image-middle {
|
|
background : url(chrome://global/skin/tab-bot-unselect-middle.gif) repeat-x;
|
|
}
|
|
|
|
.tab-bottom > box > .tab-image-right {
|
|
background : url(chrome://global/skin/tab-bot-unselect-right.gif) no-repeat;
|
|
width : 11px;
|
|
height : 19px;
|
|
}
|
|
|
|
.tab-bottom > box > .tab-image-middle > .tab-text {
|
|
padding : 4px 0px 1px 0px;
|
|
}
|
|
|
|
.tab-bottom:hover:active > box > .tab-image-left {
|
|
background : url(chrome://global/skin/tab-bot-clicked-left.gif) no-repeat;
|
|
}
|
|
|
|
.tab-bottom:hover:active > box > .tab-image-middle {
|
|
background : url(chrome://global/skin/tab-bot-clicked-middle.gif) repeat-x;
|
|
}
|
|
|
|
.tab-bottom:hover:active > box > .tab-image-right {
|
|
background : url(chrome://global/skin/tab-bot-clicked-right.gif) no-repeat;
|
|
}
|
|
|
|
/* when a tab is selected this is how it should look */
|
|
|
|
.tab-bottom[selected="true"] > box > .tab-image-left,
|
|
.tab-bottom:hover:active[selected="true"] > box > .tab-image-left {
|
|
background : url(chrome://global/skin/tab-bot-select-left.gif) no-repeat;
|
|
}
|
|
|
|
.tab-bottom[selected="true"] > box > .tab-image-middle,
|
|
.tab-bottom:hover:active[selected="true"] > box > .tab-image-middle {
|
|
background : url(chrome://global/skin/tab-bot-select-middle.gif) repeat-x;
|
|
}
|
|
|
|
.tab-bottom[selected="true"] > box > .tab-image-right,
|
|
.tab-bottom:hover:active[selected="true"] > box > .tab-image-right {
|
|
background : url(chrome://global/skin/tab-bot-select-right.gif) no-repeat;
|
|
}
|
|
|
|
.tabbox-bottom > .tab-border-top-left, .tabbox-bottom > .tab-border-top-right {
|
|
background : url(chrome://global/skin/tab-bot-border.gif) repeat-x top;
|
|
width : 2px;
|
|
}
|
|
|
|
.tabbox-bottom > .tab-border-top-left-cap {
|
|
background : url(chrome://global/skin/tab-bot-border-leftcap.gif) no-repeat top;
|
|
width : 2px;
|
|
height : 2px;
|
|
}
|
|
|
|
.tabbox-bottom > .tab-border-top-right-cap {
|
|
background : url(chrome://global/skin/tab-bot-border-rightcap.gif) no-repeat top;
|
|
width : 2px;
|
|
height : 2px;
|
|
}
|
|
|
|
/* bottom tabs */
|
|
tabcontrol[align="vertical"] tabpanel + tabbox[align="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 */
|
|
tabcontrol[align="horizontal"] tabbox[align="vertical"] tab {
|
|
border-right: none;
|
|
-moz-border-radius: 8px 0px 0px 8px;
|
|
padding-right: 1px;
|
|
margin: 2px 1px 2px 1px;
|
|
}
|
|
|
|
/* right tabs */
|
|
tabcontrol[align="horizontal"] tabpanel + tabbox[align="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;
|
|
}
|
|
|
|
tabcontrol {
|
|
border: none;
|
|
}
|
|
|
|
/* border on bottom only, no padding (used in search) */
|
|
tabpanel.light {
|
|
border: none;
|
|
border-bottom: 1px outset #CCCCCC;
|
|
padding: 0px;
|
|
}
|
|
|
|
tabpanel {
|
|
border-top : 0px;
|
|
background-color : #C2D0D0;
|
|
border-left : 1px solid #313948;
|
|
border-right : 1px solid #313948;
|
|
border-bottom : 1px solid #313948;
|
|
padding : 5px;
|
|
}
|
|
|
|
/* This is horrible CSS style, but is necessary to handle this case */
|
|
tabpanel title {
|
|
background-color : #C2D0D0;
|
|
}
|