зеркало из https://github.com/mozilla/gecko-dev.git
284 строки
8.3 KiB
CSS
284 строки
8.3 KiB
CSS
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
|
|
|
|
/*============ tabpanel widget =============*/
|
|
|
|
tabpanel {
|
|
/*-moz-binding: url("chrome://global/skin/tabBindings.xml#tabpanel"); */
|
|
padding: 5px;
|
|
}
|
|
|
|
/* top tabs */
|
|
tabcontrol[orient="vertical"] > tabbox + tabpanel {
|
|
border-top: none !important;
|
|
border-bottom: 1px solid ThreeDShadow !important;
|
|
}
|
|
|
|
/* bottom tabs */
|
|
tabcontrol[orient="vertical"] > tabpanel {
|
|
border-top: 1px solid ThreeDHighlight;
|
|
border-bottom: none;
|
|
border-left: 1px solid ThreeDHighlight;
|
|
border-right: 1px solid ThreeDShadow;
|
|
}
|
|
|
|
/* left tabs */
|
|
tabcontrol[orient="horizontal"] > tabbox + tabpanel {
|
|
border-left: none !important;
|
|
border-right: 1px solid ThreeDShadow !important;
|
|
}
|
|
|
|
/* right tabs */
|
|
tabcontrol[orient="horizontal"] > tabpanel {
|
|
border-top: 1px solid ThreeDHighlight;
|
|
border-bottom: 1px solid ThreeDShadow;
|
|
border-right: none;
|
|
border-left: 1px solid ThreeDHighlight;
|
|
}
|
|
|
|
/* border on bottom only, no padding (used in search) */
|
|
tabpanel.light {
|
|
border: none;
|
|
border-bottom: 1px outset #CCCCCC;
|
|
padding: 0px;
|
|
}
|
|
|
|
.tabpanel-inner-box {
|
|
border-right: 1px solid ThreeDShadow;
|
|
border-bottom: 1px solid ThreeDShadow;
|
|
}
|
|
|
|
/*============ tabbox widget ============*/
|
|
|
|
tabbox {
|
|
-moz-binding: url("chrome://global/skin/tabBindings.xml#tabbox");
|
|
}
|
|
|
|
/* tabbox-spring ========================== */
|
|
|
|
/* top tabs */
|
|
tabcontrol[orient="vertical"] > tabbox > .tabbox-spring {
|
|
border-bottom: 1px solid ThreeDHighlight;
|
|
}
|
|
|
|
/* bottom tabs */
|
|
tabcontrol[orient="vertical"] > tabpanel + tabbox > .tabbox-spring {
|
|
border-top: 1px solid ThreeDShadow !important;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* left tabs */
|
|
tabcontrol[orient="horizontal"] > tabbox > .tabbox-spring {
|
|
border-right: 1px solid ThreeDHighlight;
|
|
}
|
|
|
|
/* right tabs */
|
|
tabcontrol[orient="horizontal"] > tabpanel + tabbox > .tabbox-spring {
|
|
border-left: 1px solid ThreeDShadow !important;
|
|
border-right: none;
|
|
}
|
|
|
|
/*============ tab widget ============*/
|
|
/* NOTE: there should be code in here for indenting the first tab
|
|
by two pixels, however, this needs to be done with a spring to
|
|
fill in the border, but current attempts to use said spring
|
|
result in said spring not rendering. Will revisit. - JRH */
|
|
|
|
tab {
|
|
border: none;
|
|
color: ButtonText;
|
|
-moz-user-focus: normal;
|
|
}
|
|
|
|
tab > .tab-box > .tab-text {
|
|
border: 1px solid transparent;
|
|
padding: 0px 1px 0px 1px;
|
|
}
|
|
|
|
tab:focus > .tab-box > .tab-text {
|
|
border: 1px dotted ButtonText;
|
|
}
|
|
|
|
.tab-box {
|
|
margin: 0px;
|
|
padding: 1px 3px 1px 3px !important;
|
|
}
|
|
|
|
/* top tabs */
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] tab[first-tab="true"] {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] tab {
|
|
margin-top: 2px;
|
|
border-right: 1px solid ThreeDDarkShadow;
|
|
-moz-border-radius: 4px 4px 0px 0px;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] tab > .tab-box {
|
|
border-left: 1px solid ThreeDHighlight;
|
|
border-top: 1px solid ThreeDHighlight;
|
|
border-right: 1px solid ThreeDShadow;
|
|
border-bottom: 1px solid ThreeDHighlight;
|
|
-moz-border-radius: 4px 4px 0px 0px;
|
|
}
|
|
|
|
/* bottom tabs */
|
|
tabcontrol[orient="vertical"] > tabpanel + tabbox[orient="horizontal"] > tab {
|
|
margin-top: 0px;
|
|
margin-bottom: 2px;
|
|
border-right: 1px solid ThreeDDarkShadow;
|
|
border-bottom: 1px solid ThreeDDarkShadow;
|
|
-moz-border-radius: 0px 0px 4px 4px;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabpanel + tabbox[orient="horizontal"] > tab > .tab-box {
|
|
border-top: 1px solid ThreeDShadow;
|
|
border-right: 1px solid ThreeDShadow;
|
|
border-bottom: 1px solid ThreeDShadow;
|
|
-moz-border-radius: 0px 0px 4px 4px;
|
|
}
|
|
|
|
/* left tabs */
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] tab[first-tab="true"] {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] tab {
|
|
margin-left: 2px;
|
|
border-bottom: 1px solid ThreeDDarkShadow;
|
|
-moz-border-radius: 4px 0px 0px 4px;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] tab > .tab-box {
|
|
border-left: 1px solid ThreeDHighlight;
|
|
border-top: 1px solid ThreeDHighlight;
|
|
border-right: 1px solid ThreeDHighlight;
|
|
border-bottom: 1px solid ThreeDShadow;
|
|
-moz-border-radius: 4px 0px 0px 4px;
|
|
}
|
|
|
|
/* right tabs */
|
|
tabcontrol[orient="horizontal"] > tabpanel + tabbox[orient="vertical"] > tab {
|
|
margin-right: 2px;
|
|
margin-left: 0px;
|
|
border-bottom: 1px solid ThreeDDarkShadow;
|
|
border-right: 1px solid ThreeDDarkShadow;
|
|
-moz-border-radius: 0px 4px 4px 0px !important;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabpanel + tabbox[orient="vertical"] > tab > .tab-box {
|
|
border-left: 1px solid ThreeDShadow !important;
|
|
border-right: 1px solid ThreeDShadow;
|
|
border-bottom: 1px solid ThreeDShadow !important;
|
|
-moz-border-radius: 0px 4px 4px 0px !important;
|
|
}
|
|
|
|
/* selected tabs ============================= */
|
|
/* EXPLANATION (using top tabs as scenario):
|
|
When a tab is selected, it must appear to raise up and overlap the tabs to the left and right of it.
|
|
To do this, the adjacent borders of the before and after tabs are removed, and the selected tab
|
|
adds some padding to expand into the area once occupied by the adjacent borders. It must do this
|
|
without shifting tabs or text around. The leftmost tab grows into the margin to it's left since
|
|
there is no tab there to overlap.
|
|
*/
|
|
|
|
/* top tabs */
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[selected="true"] {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[selected="true"] > .tab-box {
|
|
border-bottom: 1px solid ThreeDFace;
|
|
padding-left: 5px !important;
|
|
padding-right: 4px !important;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[selected="true"][first-tab="true"] > .tab-box {
|
|
border-bottom: 1px solid ThreeDFace;
|
|
padding-left: 5px !important;
|
|
padding-right: 4px !important;
|
|
}
|
|
|
|
/* bottom tabs */
|
|
tabcontrol[orient="vertical"] > tabpanel + tabbox[orient="horizontal"] > tab[selected="true"] {
|
|
margin-bottom: 0px;
|
|
border-bottom: 1px solid ThreeDDarkShadow !important;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabpanel + tabbox[orient="horizontal"] > tab[selected="true"] > .tab-box {
|
|
border-top: 1px solid ThreeDFace;
|
|
border-bottom: 1px solid ThreeDShadow !important;
|
|
}
|
|
|
|
/* left tabs */
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[selected="true"] {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[selected="true"] > .tab-box {
|
|
border-right: 1px solid ThreeDFace;
|
|
padding-top: 3px !important;
|
|
padding-bottom: 2px !important;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[selected="true"][first-tab="true"] > .tab-box {
|
|
border-right: 1px solid ThreeDFace;
|
|
padding-top: 3px !important;
|
|
padding-bottom: 2px !important;
|
|
}
|
|
|
|
/* right tabs */
|
|
tabcontrol[orient="horizontal"] > tabpanel + tabbox[orient="vertical"] > tab[selected="true"] {
|
|
margin-right: 0px;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabpanel + tabbox[orient="vertical"] > tab[selected="true"] > .tab-box {
|
|
border-left: 1px solid ThreeDFace !important;
|
|
border-right: 1px solid ThreeDShadow !important;
|
|
}
|
|
|
|
/* before selected tabs ====================== */
|
|
|
|
/* top & bottom tabs */
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[beforeselected="true"] {
|
|
border-right: none !important;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[beforeselected="true"] > .tab-box {
|
|
border-right: none !important;
|
|
}
|
|
|
|
/* left & right tabs */
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[beforeselected="true"] {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[beforeselected="true"] > .tab-box {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
/* after selected tabs ====================== */
|
|
|
|
/* top & bottom tabs */
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[afterselected="true"] {
|
|
border-left: none !important;
|
|
}
|
|
|
|
tabcontrol[orient="vertical"] > tabbox[orient="horizontal"] > tab[afterselected="true"] > .tab-box {
|
|
border-left: none !important;
|
|
}
|
|
|
|
/* left & right tabs */
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[afterselected="true"] {
|
|
border-top: none !important;
|
|
}
|
|
|
|
tabcontrol[orient="horizontal"] > tabbox[orient="vertical"] > tab[afterselected="true"] > .tab-box {
|
|
border-top: none !important;
|
|
}
|
|
|
|
|
|
|