mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
135 lines
3.1 KiB
CSS
135 lines
3.1 KiB
CSS
/* ===== tabbox.css =====================================================
|
|
== Styles used by the XUL tabbox element
|
|
|
|
The default style of these tabs is that of an NSTabView with tabs at
|
|
the top in the "regular" size. These tabs can be used with or without
|
|
a tabbox element.
|
|
For bottom tabs you should use the "tabs-bottom" class on the tabbox
|
|
or the tabs element. Bottom tabs use a style that's similar to the
|
|
one used in Adium.
|
|
======================================================================= */
|
|
|
|
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
|
|
|
tabbox {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
tabpanels {
|
|
-moz-appearance: tabpanels;
|
|
padding: 33px 15px 15px;
|
|
}
|
|
|
|
tabs {
|
|
-moz-box-align: center;
|
|
font: menu;
|
|
}
|
|
|
|
tabbox > tabs {
|
|
padding: 0 10px;
|
|
margin-bottom: -12px;
|
|
position: relative;
|
|
}
|
|
|
|
tab {
|
|
-moz-appearance: tab;
|
|
}
|
|
|
|
tab:first-of-type {
|
|
-moz-padding-start: 2px;
|
|
}
|
|
|
|
tab:last-of-type {
|
|
-moz-padding-end: 2px;
|
|
}
|
|
|
|
.tab-middle {
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.tabs-left,
|
|
.tabs-right {
|
|
-moz-box-flex: 1;
|
|
}
|
|
|
|
/* Tabs at the bottom
|
|
* These tabs are smaller, left aligned and don't extend into the tabpanel.
|
|
*/
|
|
|
|
tabbox.tabs-bottom > tabpanels {
|
|
padding: 10px;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs,
|
|
tabs.tabs-bottom {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
padding: 0;
|
|
margin: 0;
|
|
border-top: 2px solid;
|
|
-moz-border-top-colors: #888 rgba(0, 0, 0, 0.08);
|
|
-moz-box-align: start;
|
|
font: message-box;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > .tabs-left,
|
|
tabs.tabs-bottom > .tabs-left {
|
|
-moz-box-flex: 0;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab,
|
|
tabs.tabs-bottom > tab {
|
|
-moz-appearance: none;
|
|
margin: -1px 0 0;
|
|
padding: 0 0 2px 0;
|
|
position: relative;
|
|
-moz-border-end: 1px solid rgba(0, 0, 0, 0.19);
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab > .tab-middle,
|
|
tabs.tabs-bottom > tab > .tab-middle {
|
|
padding: 1px 2px 0 2px;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab:not([selected=true]):hover,
|
|
tabs.tabs-bottom > tab:not([selected=true]):hover {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
-moz-border-end-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab[selected=true],
|
|
tabs.tabs-bottom > tab[selected=true] {
|
|
border: solid #888;
|
|
border-width: 0 2px 2px;
|
|
-moz-border-radius: 2px;
|
|
-moz-border-left-colors: rgba(0, 0, 0, 0.08) #888;
|
|
-moz-border-right-colors: rgba(0, 0, 0, 0.08) #888;
|
|
-moz-border-bottom-colors: rgba(0, 0, 0, 0.08) #888;
|
|
-moz-margin-end: -1px;
|
|
margin-top: -2px;
|
|
margin-bottom: 1px;
|
|
padding: 0;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab[beforeselected=true],
|
|
tabs.tabs-bottom > tab[beforeselected=true] {
|
|
-moz-border-end-color: transparent;
|
|
-moz-margin-end: -2px;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab:first-of-type:not([selected=true]),
|
|
tabs.tabs-bottom > tab:first-of-type:not([selected=true]) {
|
|
-moz-border-start: 4px solid transparent;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab:first-of-type[selected=true],
|
|
tabs.tabs-bottom > tab:first-of-type[selected=true] {
|
|
-moz-margin-start: 2px;
|
|
}
|
|
|
|
tabbox.tabs-bottom,
|
|
tabbox.tabs-bottom > tabpanels,
|
|
tabbox.tabs-bottom > tabs > tab[selected=true] > .tab-middle,
|
|
tabs.tabs-bottom > tab[selected=true] > .tab-middle {
|
|
-moz-appearance: dialog;
|
|
}
|