Main Window
Live Preview
Chromatic Pixel
The Planetarium
New Tab
mozillademos.org/demos/planetarium/demo.html
Window
Dimensions
Top/"Titlebar" 16px | Left, Right, Bottom 5px
padding-mainWindow
Tabs
Shape
shape-tab
Dimensions | Padding
dimensions-tab
Tab Overlap
dimensions-tabOverlap
Tab Strip Layout Visualization
dimensions-tabStrip
Style
Tab - Active
style-tabActive
Tab - Background/Hover
style-tabActive
style-tabSpecs
Tab Strip Background (to handle Aero Glass legibility)
hsla(210,23%,74%,.8)
style-tabStripBackground
Tabs in a Maximized Window
style-tabsMaximized
App Tabs
Dimensions | Padding
dimensions-appTab
Notification Glow
style-appTab-notifications
NavBar
Large Button Mode: Dimensions | Padding
8px Padding for Toolbar Content
dimensions-navBar
Large Back-Button and Hover-Effect Special Case
-4px Padding on Large Back-Button and Last-Child Toolbar Buttons that have a Hover Effect
dimensions-navBar-specialCase
Button Layout Spacing/Padding Example
Sample NavBar Layout with 2px between buttons
dimensions-navBar-buttonPlacement
Style
style-navBar
NavBar (Buttons)
Dimensions | Padding
Back-Button (Large)
dimensions-navBar-button-backLarge
Normal
dimensions-navBar-button-default
Menu
dimensions-navBar-button-menu
Connected
dimensions-navBar-button-connected
Split
dimensions-navBar-button-split
Style
Hover
style-navBar-button-hover
Pressed/Active
style-navBar-button-pressed
Inactive
style-navBar-button-inactive
Inactive (Overview)
style-navBar-buttons-inactive
Connected-Button(s) Hover
style-navBar-button-connected-hover
Separator
style-navBar-button-separator
NavBar (Fields)
Dimensions | Padding
Location Field
dimensions-locationBar
Search Field
dimensions-searchBar-notZoomed
Default Button Width
dimensions-searchBar-zoomed
Max Button Width
dimensions-searchBar-zoomed-maxWidth
Style
Normal
style-toolbarFields-normal
Focused
style-toolbarFields-focused
Go/Stop/Reload Button
Normal
style-goStopReload-normal
Hover
style-goStopReload-hover
Pressed
style-goStopReload-pressed
Reload
style-goStopReload-reload
Stop
style-goStopReload-stop
Go
style-goStopReload-go
Field Glyph Icons
Normal
style-luckyCharms-normal
Hover
style-luckyCharms-hover
Pressed
style-luckyCharms-pressed
NavBar (Elements Overview)
style-navBar-elementOverview