Here's my OSX Lion-and-up code. I haven't tested on Lion yet so it may change.
I'm using chrome.manifest to make sure only one of these os-specific.css files is ever loaded.
Code: Select all
skin browser nasanightlaunch jar:chrome/inner.jar!/browser/
skin communicator nasanightlaunch jar:chrome/inner.jar!/communicator/
skin help nasanightlaunch jar:chrome/inner.jar!/help/
skin global nasanightlaunch jar:chrome/inner.jar!/global/
skin mozapps nasanightlaunch jar:chrome/inner.jar!/mozapps/
skin xpi_skins nasanightlaunch jar:chrome/inner.jar!/xpi_skins/
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/winnt/fx3.7/ os=WINNT
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/winnt/fx29/ os=WINNT appversion>28.99
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/macos/osx/fx3.7/ os=Darwin
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/macos/lion/fx3.7/ os=Darwin osversion>=10.7
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/macos/osx/fx29/ os=Darwin appversion>28.99
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/macos/lion/fx29/ os=Darwin osversion>=10.7 appversion>28.99
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/linux/fx3.7/ os=Linux
skin nasanightlaunch-os nasanightlaunch jar:chrome/inner.jar!/os/linux/fx29/ os=Linux appversion>28.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx4/
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx13/ appversion>12.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx14/ appversion>13.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx15/ appversion>14.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx17/ appversion>16.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx18/ appversion>17.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx19/ appversion>18.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx20/ appversion>19.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx21/ appversion>20.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx22/ appversion>21.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx23/ appversion>22.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx24/ appversion>23.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx25/ appversion>24.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx26/ appversion>25.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx27/ appversion>26.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx28/ appversion>27.99
skin nasanightlaunch-appver nasanightlaunch jar:chrome/inner.jar!/appver/fx29/ appversion>28.99
Code: Select all
/* ***** BEGIN LICENSE BLOCK *****
* TODO Needs license.
* ***** END LICENSE BLOCK ***** */
/* This file contains code specific to the Mac OS version of Firefox. */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*
-------------------------------------------------------------
Table of Contents for This File
-------------------------------------------------------------
* Bookmarks and History Items in the System Menubar
* Sage Add-on
* Main Window
* Titlebar
* Toolbox
* Menubar
* Tabs Toolbar
* Nav Bar
* Window Control Buttons as Fullscreen Button
* Private Browsing Indicator
* Resizers
* Miscellaneous
-------------------------------------------------------------
*/
/* ----------------------------------------------------- *
* TOC Bookmarks and History Items in the System Menubar *
* ----------------------------------------------------- *
*/
/* Style the bookmarks and history menus using non-default Mac-specific on-light icons,
* because OS X menus always have a light background, as opposed to NNL menus on Windows
* which (almost always) have a dark background.
*/
#history-menu,
#bookmarksMenu {
-moz-binding: url(chrome://global/skin/macMenus.xml#mac-desktop-menu) !important; /* Use !important because why? */
}
/* ----------------------------------------------------- *
* TOC Sage Add-on *
* ----------------------------------------------------- *
*/
/* Style Sage on OS X because somehow my standard XPI rules don't fully apply. (Why?) */
#sidebar-box[src="chrome://sage/content/sage.xul"] sidebarheader {
background-color: #040404 !important; /* Use !important because why? */
}
@-moz-document url(chrome://sage/content/sage.xul) {
#sagePanel #feedListToolbar, #sagePanel #itemListToolbar {
background-color: transparent !important; /* Use !important because why? */
}
#sagePanel #feedListToolbar {
border-top: 1px solid transparent !important; /* Use !important because why? */
border-bottom: 1px solid transparent !important; /* Use !important because why? */
}
#sagePanel #itemListToolbar {
border: 0 !important; /* Use !important because why? */
}
#statusBar, #feedTitleBar {
background-color: #040404 !important; /* Use !important because why? */
}
}
/* ----------------------------------------------------- *
* TOC Main Window *
* ----------------------------------------------------- *
*/
/* Some personas-specific code which I don't fully understand,
* supposedly to keep the personas background image locked into the
* same position whether or not the titlebar is shown. See Bug 714186.
*/
#main-window[inFullscreen]:-moz-lwtheme {
padding-top: 11px;
background-position: right -11px;
}
/* ----------------------------------------------------- *
* TOC Titlebar *
* ----------------------------------------------------- *
*/
@-moz-document url(chrome://browser/content/browser.xul) {
#main-window[tabsintitlebar]:-moz-window-inactive #titlebar {
/* Like OSX itself, we use a lighter, less-contrasty, less-eye-catching titlebar color
* to indicate the inactive (unfocused) window.
*/
background: #282828;
}
#main-window[tabsintitlebar] #titlebar {
/* Like OSX itself, we use a darker, more-contrasty, more-eye-catching titlebar color
* to indicate the active (focused) window.
*/
background: #202020;
}
/* These are present in #titlebar DOM for MSWindows but they're
* never used on OSX.
*/
#titlebar-buttonbox > .titlebar-button {
display: none;
}
/* Def theme comment: NB: these would be -moz-margin-start/end if it weren't
* for the fact that OS X doesn't reverse the order of the items in the titlebar
* in RTL mode.
*/
/* Translation: items in the titlebar are never presented to the user as RTL on OSX.
* Their positions should stay the same whether Firefox is configured for RTL or LTR.
*/
#titlebar-buttonbox {
margin-left: 7px;
}
#titlebar-secondary-buttonbox {
margin-right: 7px;
margin-left: 7px;
}
/* Def theme comment: NB: these would be -moz-margin-start/end if it weren't
* for the fact that OS X doesn't reverse the order of the items in the titlebar
* in RTL mode.
*/
/* Translation: items in the titlebar are never presented to the user as RTL on OSX.
* Their positions should stay the same whether Firefox is configured for RTL or LTR.
* Titlebar placeholders are not actually in the titlebar, but their horizontal positions
* are tied to the positions of items in the titlebar, and so placeholder positions should
* also stay the same whether LTR or RTL.
*/
.titlebar-placeholder[type="caption-buttons"] {
margin-left: 7px;
}
.titlebar-placeholder[type="fullscreen-button"] {
margin-right: 7px;
margin-left: 7px;
}
/* In Private Browsing mode, when the user has said to show the titlebar, Firefox still
* hides the system titlebar anyway and shows the synthetic #titlebar instead, because we
* want to show the Private Browsing mask image in the titlebar, but we can't do that in
* the system titlebar, just the synthetic #titlebar. Accordingly, we use -moz-appearance
* to make it look like the system titlebar.
* TODO We may want :not(:-moz-lwtheme) on this.
*/
#main-window[privatebrowsingmode="temporary"]:not([tabsintitlebar]):not([inFullscreen]) > #titlebar {
height: 22px; /* Def theme comment: The native titlebar on OS X is 22px tall. */
-moz-appearance: -moz-window-titlebar;
}
#main-window[tabsintitlebar] #titlebar {
/* Make this at least as tall as our tabs; otherwise, they are cropped.
* The def theme uses min-height: calc(31px + 9px - 1px) here, where the
* taller height pushes the Tabs Toolbar down from the top of the window.
*/
min-height: 27px;
height: 27px;
}
}
/* ----------------------------------------------------- *
* TOC Toolbox *
* ----------------------------------------------------- *
*/
/* Extra space at top of screen, above any visible toolbars and content, so that
* Lion's bump-to-show desktop menubar doesn't cover the tabstrip. See Bug 714186.
*/
#navigator-toolbox[inFullscreen]:not([tabsontop="false"]):not(:-moz-lwtheme)::before {
height: 36px;
}
/* ----------------------------------------------------- *
* TOC Menubar *
* ----------------------------------------------------- *
*/
/* Collapse size of menu toolbar to zero so it does not appear
* at all (within the browser toolbox) for the Mac.
*/
#main-window[windowtype="navigator:browser"] #toolbar-menubar #menubar-items {
margin: 0 !important; /* Use !important because why? */
}
/* Prevent my rules in browser.css from adding the feed icon to the bookmarks menu on osx.
* Using menu id in selector to boost specificity over my other rules.
*/
#bookmarksMenuPopup #subscribeToPageMenuitem,
#bookmarksMenuPopup #subscribeToPageMenupopup {
list-style-image: none;
-moz-image-region: auto;
}
/* ----------------------------------------------------- *
* TOC Tabs Toolbar *
* ----------------------------------------------------- *
*/
@-moz-document url(chrome://browser/content/browser.xul) {
/* With the system titlebar hidden, the caption buttons are positioned at the left end of
* the Tabs Toolbar, within the toolbar itself. Here we add space for the user to
* grab and drag the window with the mouse. Not needed for maximized becayse there's no
* dragging when maximized, and not needed for fullscreen because the caption buttons are
* fully hidden in fullscreen mode.
*
* Not RTL-sensitive because the position of the caption buttons doesn't change for RTL.
*/
#main-window[tabsintitlebar][sizemode="normal"] #titlebar-placeholder-on-TabsToolbar-for-captions-buttons {
margin-right: 10px;
}
}
/* ----------------------------------------------------- *
* TOC Nav Bar *
* ----------------------------------------------------- *
*/
@-moz-document url(chrome://browser/content/browser.xul) {
/* Because the nav bar is the top-most toolbar, since the menubar is not
* shown in the toolbox, with the system menubar being used instead,
* we don't need any border to separate the nav bar from anything above it.
*/
#main-window[windowtype="navigator:browser"] #nav-bar {
border-top: 0 !important; /* Use !important because why? */
}
}
/* ----------------------------------------------------- *
* TOC Window Control Buttons as Fullscreen Button *
* ----------------------------------------------------- *
*/
@-moz-document url(chrome://browser/content/browser.xul) {
/* For Fx4 and up, Firefox in fullscreen mode on OS X is different from on MSWindows as follows:
*
* - now hides the minimize and close buttons, permanently
* - styles and shows #restore-button as the fullscreen primary toolbar button
* - but only if the fullscreen primary toolbar button isn't shown elsewhere in the same toolbar, otherwise #restore-button is hidden too
* - ie having the fullscreen primary toolbar button in any toolbar other than the navbar will still result in #restore-button being shown, because those other toolbars are all hidden in fullscreen
*
* and we do the same. See Bug 505699.
*/
#minimize-button,
#fullscreen-button ~ #window-controls > #restore-button,
#close-button {
display: none;
}
#restore-button[id] {
/* Style the restore button with the fullscreen toolbarbutton icon.
* Regardless of toolbar mode, we always style this small so we
* don't inflate the toolbar height.
*/
list-style-image: url(chrome://browser/skin/Toolbar-small.png);
-moz-image-region: rect(0px 336px 16px 320px);
}
#restore-button[id]:hover {
-moz-image-region: rect(16px 336px 32px 320px);
}
/* Never disabled.
* #restore-button[id][disabled="true"] {
* -moz-image-region: rect(32px 336px 48px 320px);
* }
*/
}
/* ----------------------------------------------------- *
* TOC Private Browsing Indicator *
* ----------------------------------------------------- *
*/
@-moz-document url(chrome://browser/content/browser.xul) {
.private-browsing-indicator {
background-image: url("chrome://browser/skin/privatebrowsing-mask.osx.png");
background-repeat: no-repeat;
background-size: 100% auto;
width: 38px;
height: 28px;
/* Def theme comment: The private browsing mask graphic has a 3px flare at the top. The distance
* we want between the mask and items on either side is 7px, so we use 4px,
* since the other 3px is accounted for by the empty space on either side.
*/
margin-left: 4px;
margin-right: 4px;
}
#titlebar-secondary-buttonbox > .private-browsing-indicator {
position: relative;
}
#main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
background-image: url("chrome://browser/skin/privatebrowsing-mask.osx.png");
height: 20px;
}
#main-window:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
#main-window[privatebrowsingmode=temporary][inFullscreen] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator,
#main-window[privatebrowsingmode=temporary]:not([inFullscreen]) > #tab-view-deck > #browser-panel > #navigator-toolbox > #TabsToolbar > .private-browsing-indicator {
display: none;
}
/* We lack @2x images here; we just use our normal images instead.
* @media (min-resolution: 2dppx) {
* .private-browsing-indicator {
* background-image: url("chrome://browser/skin/privatebrowsing-mask@2x.png");
* }
* #main-window[privatebrowsingmode=temporary]:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > .private-browsing-indicator {
* background-image: url("chrome://browser/skin/privatebrowsing-mask-short@2x.png");
* }
* }
*/
#TabsToolbar > .private-browsing-indicator {
transform: translateY(-9px);
/* Def theme comment: We offset by 38px for mask graphic, plus 4px to account for the
* margin-left, which sums to 42px.
*/
margin-right: -42px;
}
#main-window[privatebrowsingmode=temporary] .titlebar-placeholder[type="fullscreen-button"],
#main-window[privatebrowsingmode=temporary] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
margin-left: 0;
}
#main-window[privatebrowsingmode=temporary][inFullscreen] .titlebar-placeholder[type="fullscreen-button"] {
/* Def theme comment: Override display:none for .titlebar-placeholder in fullscreen so we can have consistent
* position and padding for the private browsing indicator.
*/
display: -moz-box;
}
#TabsToolbar > .private-browsing-indicator:-moz-locale-dir(rtl) {
-moz-box-ordinal-group: 0;
}
}
/* ----------------------------------------------------- *
* TOC Resizers *
* ----------------------------------------------------- *
*/
/* Hide XUL resizer on Mac for those windows which receive OS-drawn window resizer,
* avoiding the appearance of both resizers in same spot at the same time.
* Firefox XUL adds type="window" (new for Fx4) for those specific cases where this
* is known to occur; add-on authors may also use it.
*/
resizer[type="window"] {
display: none;
}
/* ----------------------------------------------------- *
* TOC Miscellaneous *
* ----------------------------------------------------- *
*/
@media (min-resolution: 2dppx) {
.tab-icon-image {
image-rendering: -moz-crisp-edges;
}
}