MozillaWiki

Firefox/Projects/New Theme/Linux: Difference between revisions

< Firefox‎ | Projects‎ | New Theme
No edit summary
m (Undo revision 255354 by Flying sheep (Moved to talkpage))
 
(4 intermediate revisions by 2 users not shown)
Line 4: Line 4:
[[Image:Linux-theme-design.png]]
[[Image:Linux-theme-design.png]]


# '''TitleBar Gradient''' - Get current titlebar gradient and extend to behind the tabs. Use theme native titlebar widets. Use titlebar font for “Firefox” button.
# '''TitleBar Gradient''' - Use unified titlebar when native theme allows.
# '''Firefox Button/Menu''' - Create Firefox Button/Menu that resides in the titlebar. Should respect other system widgets in the titlebar.
# '''Active Tab + Toolbar Backgrounds''' - Overlay white highlight gradient, edge effects, borders and shadows on window color.
# '''Active Tab + Toolbar Backgrounds''' - Overlay white highlight gradient, edge effects, borders and shadows on window color.
# '''Inactive Tab''' - Use window color at -20% luminence and saturation. Alternatively get gtk theme inactive tab color at 90% opacity. Overlay gradients, edge effects, borders and shadows.
# '''Inactive Tab''' - Use window color at -20% luminance and saturation and 90% opacity. Alternatively get gtk theme inactive tab color at 90% opacity. Overlay gradients, edge effects, borders and shadows.
# '''Tab Progress Line''' - Use “Highlight” background color as base. Some themes like Ambiance use different color progress bars. Somehow extract that color?
# '''Toolbar Buttons''' - Create adaptive toolbar buttons with translucent shades to fit any theme. Select icon set based on current theme or use SVG icons with base color using “Highlight” color.
# '''Toolbar Buttons''' - Create adaptive toolbar buttons with translucent shades to fit any theme. Select icon set based on current theme or use SVG icons with base color using “Highlight” color.
# '''Toolbar Fields''' - Use native fields for location and search bars.
# '''Toolbar Fields''' - Use native fields for location and search bars.
Line 14: Line 12:
= Mockups =
= Mockups =
* [[Firefox/4.0 Linux Theme Mockups]]
* [[Firefox/4.0 Linux Theme Mockups]]
= Linux Specific Visual Refresh =
There are some stylistic changes that are addressed in depth in the [[Firefox/Projects/3.7_and_4.0_Theme_and_UI_Revamp/Linux_Specific_Visual_Refresh|Linux Specific Visual Refresh]] article.

Latest revision as of 13:26, 23 September 2010

Design

The Linux design picks up many aspects from the ideas proposed for Windows. With specific emphasis on how to integrate with various system themes.

 

  1. TitleBar Gradient - Use unified titlebar when native theme allows.
  2. Active Tab + Toolbar Backgrounds - Overlay white highlight gradient, edge effects, borders and shadows on window color.
  3. Inactive Tab - Use window color at -20% luminance and saturation and 90% opacity. Alternatively get gtk theme inactive tab color at 90% opacity. Overlay gradients, edge effects, borders and shadows.
  4. Toolbar Buttons - Create adaptive toolbar buttons with translucent shades to fit any theme. Select icon set based on current theme or use SVG icons with base color using “Highlight” color.
  5. Toolbar Fields - Use native fields for location and search bars.

Mockups

Retrieved from "https://wiki.allizom.org/index.php?title=Firefox/Projects/New_Theme/Linux&oldid=255432"