mirror of
https://github.com/classilla/tenfourfox.git
synced 2024-06-28 09:29:40 +00:00
151 lines
3.4 KiB
CSS
151 lines
3.4 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/*
|
|
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:-moz-focusring {
|
|
/* Tab focus rings need to overlay adjacent tabs. */
|
|
position: relative;
|
|
}
|
|
|
|
tab:first-of-type {
|
|
-moz-padding-start: 2px;
|
|
}
|
|
|
|
tab:last-of-type {
|
|
-moz-padding-end: 2px;
|
|
}
|
|
|
|
@media (-moz-mac-lion-theme) {
|
|
tab[visuallyselected="true"] {
|
|
color: #FFF;
|
|
text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
|
|
}
|
|
}
|
|
|
|
.tab-middle {
|
|
padding: 1px 6px 2px;
|
|
}
|
|
|
|
.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([visuallyselected=true]):hover,
|
|
tabs.tabs-bottom > tab:not([visuallyselected=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[visuallyselected=true],
|
|
tabs.tabs-bottom > tab[visuallyselected=true] {
|
|
color: #000;
|
|
text-shadow: none;
|
|
border: solid #888;
|
|
border-width: 0 2px 2px;
|
|
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([visuallyselected=true]),
|
|
tabs.tabs-bottom > tab:first-of-type:not([visuallyselected=true]) {
|
|
-moz-border-start: 4px solid transparent;
|
|
}
|
|
|
|
tabbox.tabs-bottom > tabs > tab:first-of-type[visuallyselected=true],
|
|
tabs.tabs-bottom > tab:first-of-type[visuallyselected=true] {
|
|
-moz-margin-start: 2px;
|
|
}
|
|
|
|
tabbox.tabs-bottom,
|
|
tabbox.tabs-bottom > tabpanels,
|
|
tabbox.tabs-bottom > tabs > tab[visuallyselected=true] > .tab-middle,
|
|
tabs.tabs-bottom > tab[visuallyselected=true] > .tab-middle {
|
|
-moz-appearance: dialog;
|
|
}
|