JohnBooty

Firefox 4: Flat, "Chrome-like" buttons

Mar 29th, 2011
164
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.64 KB | None | 0 0
  1. /*
  2. "Flat" toolbar buttons, ala Chrome.
  3.  
  4. Preview: http://otakubooty.com/me/johnbooty_userchrome.jpg
  5.  
  6. If you want to play around with userChrome.css, I recommend:
  7.   1) https://developer.mozilla.org/En/DOM_Inspector - identify, inspect, and tweak chrome elements in realtime
  8.   2) https://addons.mozilla.org/en-us/firefox/addon/quickrestart/ - or any other "add a restart button to Firefox" extension
  9. */
  10.  
  11.  
  12. /*
  13. Opacity can be adjusted to taste. Changing to
  14. 0.8 from the default of 1.0 makes icons them
  15. blend in with the toolbar color a little more.
  16.  
  17. Removing the borders has the (subjectively) beneficial
  18. side effect of making the buttons take up a little
  19. less horizontal real estate, as well.
  20. */
  21.  
  22. #nav-bar .toolbarbutton-1,
  23. #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  24. #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
  25. #nav-bar .toolbarbutton-1 {
  26.     background:none !important;
  27.     border:none !important;
  28.     box-shadow: none !important;   
  29.     opacity: 0.8 !important;   
  30. }
  31.  
  32. /*
  33. Adds some empty space between the tab
  34. browser and the windows min/max/close buttons in
  35. the upper right.  
  36.  
  37. Otherwise, there is little to no empty space
  38. on the toolbar to allow you to drag the window.
  39. */
  40.  
  41. #tabbrowser-tabs {
  42.     margin-right:50px !important;
  43. }
  44.  
  45. /*
  46. Tweak FF app button, titlebar, tabs.
  47. */
  48.  
  49. #appmenu-button {
  50.     padding: 4px 7px 5px !important;
  51.     margin-top:0px !important;
  52.     background-image: -moz-linear-gradient(rgb(139, 152, 173), rgb(22, 47, 88) 95%) !important;
  53. }
  54. #appmenu-button:hover:not(:active):not([open]) {
  55.     background-image:   -moz-radial-gradient(50% 100%, ellipse farthest-side, rgba(192, 192, 192, 0.5) 10%, transparent 70%),
  56.                         -moz-radial-gradient(50% 100%, ellipse farthest-side, rgb(128, 128, 128), transparent),
  57.                         -moz-linear-gradient(rgb(124, 139, 162), rgb(26, 51, 93) 95%) !important;
  58. }
  59. #appmenu-button, #appmenu-button:hover:not(:active):not([open]) {
  60.     -moz-border-left-colors: rgba(255, 255, 255, 0.5) rgba(6, 28, 83, 0.9) !important;
  61.     -moz-border-bottom-colors: rgba(255, 255, 255, 0.5) rgba(6, 28, 83, 0.9) !important;
  62.     -moz-border-right-colors: rgba(255, 255, 255, 0.5) rgba(6, 28, 83, 0.9) !important;
  63. }
  64.  
  65. #appmenu-button-container {
  66.     position: fixed !important;
  67. }
  68. #main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
  69.     padding: 4px 108px 0 80px !important;
  70. }
  71. #main-window[sizemode="normal"] .tabbrowser-strip {
  72.     height: 22px !important;
  73.     padding-right:140px;
  74. }
  75. #main-window[sizemode="normal"] .tabbrowser-tab {
  76.     height: 22px !important;
  77.     padding-right: 1px !important;s
  78. }
  79. #main-window[sizemode="normal"] #toolbar-menubar {
  80.     margin: -22px 98px 2px 85px;
  81. }
Advertisement
Add Comment
Please, Sign In to add comment