michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /*
michael@0:     The default style of these tabs is that of an NSTabView with tabs at
michael@0:     the top in the "regular" size. These tabs can be used with or without
michael@0:     a tabbox element.
michael@0:     For bottom tabs you should use the "tabs-bottom" class on the tabbox
michael@0:     or the tabs element. Bottom tabs use a style that's similar to the
michael@0:     one used in Adium.
michael@0: */
michael@0: 
michael@0: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
michael@0: 
michael@0: tabbox {
michael@0:   margin: 0 5px;
michael@0: }
michael@0: 
michael@0: tabpanels {
michael@0:   -moz-appearance: tabpanels;
michael@0:   padding: 33px 15px 15px;
michael@0: }
michael@0: 
michael@0: tabs {
michael@0:   -moz-box-align: center;
michael@0:   font: menu;
michael@0: }
michael@0: 
michael@0: tabbox > tabs {
michael@0:   padding: 0 10px;
michael@0:   margin-bottom: -12px;
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: tab {
michael@0:   -moz-appearance: tab;
michael@0: }
michael@0: 
michael@0: tab:-moz-focusring {
michael@0:   /* Tab focus rings need to overlay adjacent tabs. */
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: tab:first-of-type {
michael@0:   -moz-padding-start: 2px;
michael@0: }
michael@0: 
michael@0: tab:last-of-type {
michael@0:   -moz-padding-end: 2px;
michael@0: }
michael@0: 
michael@0: @media (-moz-mac-lion-theme) {
michael@0:   tab[selected="true"] {
michael@0:     color: #FFF;
michael@0:     text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
michael@0:   }
michael@0: }
michael@0: 
michael@0: .tab-middle {
michael@0:   padding: 1px 6px 2px;
michael@0: }
michael@0: 
michael@0: .tabs-left,
michael@0: .tabs-right  {
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: /* Tabs at the bottom
michael@0:  * These tabs are smaller, left aligned and don't extend into the tabpanel.
michael@0:  */
michael@0: 
michael@0: tabbox.tabs-bottom > tabpanels {
michael@0:   padding: 10px;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs,
michael@0: tabs.tabs-bottom {
michael@0:   background-color: rgba(0, 0, 0, 0.1);
michael@0:   padding: 0;
michael@0:   margin: 0;
michael@0:   border-top: 2px solid;
michael@0:   -moz-border-top-colors: #888 rgba(0, 0, 0, 0.08);
michael@0:   -moz-box-align: start;
michael@0:   font: message-box;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > .tabs-left,
michael@0: tabs.tabs-bottom > .tabs-left {
michael@0:   -moz-box-flex: 0;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab,
michael@0: tabs.tabs-bottom > tab {
michael@0:   -moz-appearance: none;
michael@0:   margin: -1px 0 0;
michael@0:   padding: 0 0 2px 0;
michael@0:   position: relative;
michael@0:   -moz-border-end: 1px solid rgba(0, 0, 0, 0.19);
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab > .tab-middle,
michael@0: tabs.tabs-bottom > tab > .tab-middle {
michael@0:   padding: 1px 2px 0 2px;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab:not([selected=true]):hover,
michael@0: tabs.tabs-bottom > tab:not([selected=true]):hover {
michael@0:   background-color: rgba(0, 0, 0, 0.1);
michael@0:   -moz-border-end-color: rgba(0, 0, 0, 0.1);
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab[selected=true],
michael@0: tabs.tabs-bottom > tab[selected=true] {
michael@0:   color: #000;
michael@0:   text-shadow: none;
michael@0:   border: solid #888;
michael@0:   border-width: 0 2px 2px;
michael@0:   border-radius: 2px;
michael@0:   -moz-border-left-colors: rgba(0, 0, 0, 0.08) #888;
michael@0:   -moz-border-right-colors: rgba(0, 0, 0, 0.08) #888;
michael@0:   -moz-border-bottom-colors: rgba(0, 0, 0, 0.08) #888;
michael@0:   -moz-margin-end: -1px;
michael@0:   margin-top: -2px;
michael@0:   margin-bottom: 1px;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab[beforeselected=true],
michael@0: tabs.tabs-bottom > tab[beforeselected=true] {
michael@0:   -moz-border-end-color: transparent;
michael@0:   -moz-margin-end: -2px;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab:first-of-type:not([selected=true]),
michael@0: tabs.tabs-bottom > tab:first-of-type:not([selected=true]) {
michael@0:   -moz-border-start: 4px solid transparent;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom > tabs > tab:first-of-type[selected=true],
michael@0: tabs.tabs-bottom > tab:first-of-type[selected=true] {
michael@0:   -moz-margin-start: 2px;
michael@0: }
michael@0: 
michael@0: tabbox.tabs-bottom,
michael@0: tabbox.tabs-bottom > tabpanels,
michael@0: tabbox.tabs-bottom > tabs > tab[selected=true] > .tab-middle,
michael@0: tabs.tabs-bottom > tab[selected=true] > .tab-middle {
michael@0:   -moz-appearance: dialog;
michael@0: }