diff -r 000000000000 -r 6474c204b198 toolkit/themes/osx/global/tabbox.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/toolkit/themes/osx/global/tabbox.css Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,150 @@ +/* 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[selected="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([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] { + 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([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; +}