Advanced Search

Firefox 4 Windows 7 total remake (design an glass) - edited

/ Published in: CSS
Save to your folder(s)
This is the edited Version of the Stylish-Stylesheet "Firefox 4 Windows 7 total remake (design an glass)" by ML

it's used for some minor Changes as described on http:glassblog.wordpress.com

Original code by H.Dimitri for changing the layout of Firefox 4 (http://userstyles.org/styles/39981/firefox-4-windows-7-total-remake-design-an-glass)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*=========dialog windows==================================================*/
  2.  
  3. /*annimation de mise en valeur*/
  4.  
  5. @-moz-document url-prefix(chrome){
  6.  
  7. radio[pane],checkbox,textbox,#urlbar
  8. {color:gray!important;text-shadow:none!important}
  9.  
  10. checkbox,
  11. button:not(#appmenu-button),
  12. #nav-bar toolbarbutton:not([disabled="true"]),
  13. radio[pane][selected="true"]
  14. {-moz-appearance:none!important;
  15.  background:-moz-linear-gradient(rgba(240,240,240,.9)35%,rgba(200,200,200,.7)65%) !important}
  16.  
  17. button:not(#appmenu-button):not([id="urlbar-reload-button"]):hover,
  18. checkbox[checked="true"],
  19. radio[pane][selected="true"]
  20. {-moz-box-shadow:gray 0 0 8px -2px inset, white 0px 0px 4px 2px!important;
  21.   color:black!important;}
  22.  
  23. checkbox,
  24. radio[pane],
  25. button:not(#appmenu-button):not([id="urlbar-reload-button"])
  26. {border-radius:4px!important;
  27.  border:1px inset!important;
  28.  -moz-border-top-colors: #999 !important;
  29.  -moz-border-right-colors: #999 !important;
  30.  -moz-border-left-colors: #aaa !important;
  31.  -moz-border-bottom-colors: #888 !important;text-shadow: rgba(255,255,255,.5) 0px 1px 0px, white 0px 0px 4px, white 0px 0px 8px, rgba(0,0,0,.8) 1px -1px 2px!important
  32. }
  33.  
  34. radio[pane]:hover,
  35. button:not(#appmenu-button):not([id="urlbar-reload-button"]):hover,
  36. #nav-bar toolbarbutton:not([disabled="true"]):hover,
  37. checkbox:hover
  38. {-moz-appearance:none!important;
  39.  color:black!important;
  40.  -moz-box-shadow: inset  0px 0px 4px -2px black, white 0px 0px 4px 2px!important;
  41.   background-image: -moz-linear-gradient(rgba(0, 0, 0, .1)45%, rgba(0, 0, 0, .2)55%),-moz-linear-gradient(rgba(240,240,240,1)35%,rgba(200,200,200,1)65%)!important;
  42. }
  43.  
  44.  
  45. textbox:hover,textbox[focused="true"],#urlbar:hover,#urlbar[focused="true"]
  46. { color:black!important;
  47. /*======= uncomment following '-moz'-selectors to create an hover-effect for URL-Bar =======*/
  48.  /*-moz-box-shadow: inset  0px 2px 4px -4px black , 0px 0px 8px 2px white!important;
  49.  -moz-transition-property: all!important;
  50.  -moz-transition-duration:0.15s!important;
  51.  -moz-transition-delay: 0s!important;*/}
  52.  
  53. /*simply glass dialog*/
  54. dialog,prefwindow,#downloadView richlistitem
  55. {text-shadow: rgba(255,255,255,.5) 0px 1px 0px, white 0px 0px 4px, white 0px 0px 8px, rgba(0,0,0,.8) 1px -1px 2px}
  56.  
  57. prefwindow,prefpane,
  58. radiogroup,dialog,
  59. richlistbox
  60. {-moz-appearance: -moz-win-borderless-glass !important;
  61.   background:transparent none!important}
  62.  
  63. /*Met en valeur les éléments éseulés*/
  64.  caption,
  65.  tab:not(.tabbrowser-tab),
  66. dialog tabpanels,
  67. prefwindow tabpanels,
  68. .groupItem,
  69. #handlersView,
  70.  textbox,groupbox
  71. {background-image: -moz-linear-gradient(center top , rgba(255,255,255,.8), rgba(255, 255, 255, .5) 156px), url("chrome://mozapps/skin/extensions/background-texture.png")!important;
  72.  background-color:transparent!important;
  73. -moz-appearance: none !important;
  74. border-radius: 4px ;
  75.  border: 1px inset !important;
  76. -moz-border-top-colors: #999 !important;
  77. -moz-border-right-colors: #999 !important;
  78. -moz-border-left-colors: #aaa !important;
  79. -moz-border-bottom-colors: #888 !important;
  80. -moz-box-shadow: inset  0px 2px 4px -4px black!important;
  81. -moz-transition-property: all!important;
  82. -moz-transition-duration:0.15s!important;
  83. -moz-transition-delay: 0s!important;
  84.  text-shadow:none!important}
  85.  
  86. /*évite les superpositions d'effets inutiles*/
  87. radio[pane]
  88. {border: 1px inset !important;
  89.  border-color:transparent!important;margin:4px!important}
  90.  
  91. caption,checkbox
  92. {padding:4px!important;
  93.  border-color:transparent!important;
  94. -moz-box-shadow: inset  0px -2px 4px -4px black!important}
  95.  
  96. .tabs-right
  97. {display:none!important}
  98.  
  99. tab:not(.tabbrowser-tab)
  100. {border-bottom:none!important}
  101.  
  102. dialog tabpanels,
  103. prefwindow tabpanels,
  104. .groupItem,tab:not(.tabbrowser-tab),tabpanels,radiogroup,tabpanels
  105. {-moz-box-shadow:none!important;}
  106.  
  107. /*"mini broswer"*/
  108.  
  109. tab:not(.tabbrowser-tab)
  110. {border-top-left-radius:  4px !important;
  111.  border-top-right-radius: 4px !important;
  112.  border-bottom-left-radius:  0px !important;
  113.  border-bottom-right-radius: 0px !important}
  114.  
  115. tabpanels
  116. {border-top-left-radius:  0px !important}
  117.  
  118. }
  119.  
  120. /*=================about:blank=============================================*/
  121.  
  122. @-moz-document url-prefix(about)
  123.  
  124. {
  125.  
  126. #appcontent,#content,html
  127. {background-color: #CCD9EA!important;
  128.  background-image: -moz-linear-gradient(center top , #E7EDF6, rgba(231, 237, 246, 0) 156px), url("chrome://mozapps/skin/extensions/background-texture.png")!important;
  129.  height:100%!important}
  130.  
  131. }
  132.  
  133. tabpanels{background:transparent none!important;border:none!important}
  134.  
  135. window[lwtheme="true"][stylish-url="about:blank"]:not([onclose="PrintUtils.exitPrintPreview(); return false;"]) #content browser
  136. {opacity: 0 !important}
  137.  
  138.  
  139. /*=========================about:robots====================================*/
  140.  
  141. @-moz-document url(about:robots){
  142. body * button[style="visibility: hidden;"]:before{content:" crash report"}
  143. body * button[style="visibility: hidden;"] *:after{content:" crash report"}}
  144.  
  145. /*========about:addon======================================================*/
  146.  
  147. @-moz-document url(about:addons)
  148.  
  149. {
  150.  
  151. .addon:hover
  152. {background-color: rgba(148, 172, 204, 0.39);
  153.  color: black}
  154.  
  155. .global-warning-container,
  156. #addon-list acrCompatibilityButton
  157. {display:none!important}
  158.  
  159. #list-view > #addon-list .icon
  160. {vertical-align: middle !important}
  161.  
  162. #list-view .addon.addon-view,.addon
  163. {max-height:52px!important;padding:0!important;}
  164.  
  165. #list-view .addon.addon-view[notification="warning"] .warning
  166. {-moz-appearance: tooltip !important;
  167.   margin-top:-14px!important;
  168.   margin-bottom:-8px!important;display:none!important}
  169.  
  170. #list-view *
  171. {margin-top: 0 !important;
  172.  margin-bottom: 0 !important}
  173.  
  174. .category[selected]
  175. {-moz-appearance:none!important;
  176. -moz-box-shadow: inset  0px 0px 4px -2px black!important;
  177.  background-color:black!important;
  178.  background-image: -moz-linear-gradient(center top , #E7EDF6, rgba(231, 237, 246, 0) 156px), url("chrome://mozapps/skin/extensions/background-texture.png")!important;
  179.  border: 1px inset !important;
  180.  color:black!important;
  181. -moz-border-top-colors: #999 !important;
  182. -moz-border-right-colors: #999 !important;
  183. -moz-border-left-colors: #aaa !important;
  184. -moz-border-bottom-colors: #888 !important;
  185. -moz-transition-property: all!important;
  186. -moz-transition-duration:0.2s!important;
  187. -moz-transition-delay: .2s!important;}
  188.  
  189. #view-port-container,.category:hover
  190. {background-color:rgba(255, 255, 255, 0.6)!important;
  191.  border: 1px inset !important;
  192. -moz-box-shadow: inset  -0px 2px 4px -4px black!important;
  193. -moz-border-top-colors: #999 !important;
  194. -moz-border-right-colors: #999 !important;
  195. -moz-border-left-colors: #aaa !important;
  196. -moz-border-bottom-colors: #888 !important;
  197. -moz-transition-property: all!important;
  198. -moz-transition-duration:0.15s!important;
  199. -moz-transition-delay: 0s!important;}
  200.  
  201. }
  202.  
  203. /*==tabs===================================================================*/
  204.  
  205. @-moz-document url(chrome://browser/content/browser.xul){
  206.  
  207. #main-window:not([lwtheme="true"]) deck ,
  208. #main-window[tabsontop="true"]:not([lwtheme="true"]) tab
  209. {text-shadow: rgba(255,255,255,.5) 0px 1px 0px, white 0px 0px 4px, white 0px 0px 8px, rgba(0,0,0,.8) 1px -1px 2px!important}
  210.  
  211. #addon-bar,#navigator-toolbox > *
  212. {background:transparent none!important;border:none!important}
  213.  
  214. .tabbrowser-tab,
  215. #main-window[tabsontop="true"] .tabbrowser-tabs:hover .tabbrowser-tab:not(hover):not([pinned])
  216. /*======= use 'min-width' to create an expanding hover-effect for tabs =======*/
  217. /*{min-width: 100px !important}*/
  218. #main-window[tabsontop="true"] .tabbrowser-tabs .tabbrowser-tab[selected="true"]:not([pinned]),
  219. #main-window[tabsontop="true"] .tabbrowser-tabs .tabbrowser-tab:hover:not([pinned]),
  220. #main-window[tabsontop="true"] .tabbrowser-tabs:hover .tabbrowser-tab:hover:not([pinned])
  221. /*======= use 'min-width' to create an expanding hover-effect for tabs =======*/
  222. /*{min-width: 200px !important}*/
  223.  
  224.  
  225. #main-window:not([tabsontop="true"]) .tabbrowser-tab[selected="true"],
  226. #main-window:not([tabsontop="true"]):not([lwtheme="true"]) deck > vbox > toolbox
  227. {background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))!important; }
  228.  
  229. #main-window:not([lwtheme="true"]) #addon-bar,
  230. #main-window[tabsontop="true"] #nav-bar
  231. {border: none !important;
  232.  background-image: -moz-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .0))!important; }
  233.  
  234. #addon-bar{border:none!important}
  235.  
  236. #main-window:not([sizemode="maximized"]):not([inFullscreen])[tabsontop="true"] .tabbrowser-tabs
  237. {margin-bottom:0px!important}
  238.  
  239. #main-window[tabsontop="true"] .tabbrowser-tab[selected="true"]
  240. {background-image: -moz-linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .5)75%)!important; }
  241.  
  242. #main-window[tabsontop="true"] .tabbrowser-tab:not([selected="true"]),
  243. #main-window[tabsontop="true"] .tabs-newtab-button
  244. {background-image: -moz-linear-gradient(rgba(190, 190, 190, .5), rgba(110, 110, 110, .5) 50%)!important}
  245.  
  246. #main-window[tabsontop="true"] .tabbrowser-tab:not([selected="true"]):hover,
  247. #main-window[tabsontop="true"] .tabs-newtab-button:hover
  248. {background-image: -moz-linear-gradient(rgba(240, 240, 240, .6), rgba(160, 160, 160, .6) 50%)!important}
  249.  
  250. /*-------------tabs:flat theme---------------------------------------------*/
  251.  
  252. #main-window[lwtheme="true"] toolbox #urlbar,
  253. #main-window[lwtheme="true"] #browser-bottombox,
  254. #main-window[lwtheme="true"] toolbox,
  255. #main-window[lwtheme="true"]#browser-bottombox statusbar,
  256. #main-window[lwtheme="true"] toolbox .tab-icon-image,
  257. #main-window[lwtheme="true"] #browser-bottombox toolbarbutton:not(text),
  258. #main-window[lwtheme="true"] toolbox toolbarbutton
  259. {opacity:0.45!important;
  260. -moz-transition-property: opacity!important;
  261. -moz-transition-duration:4s!important;
  262. -moz-transition-delay: 1.5s!important;}
  263.  
  264. #main-window[lwtheme="true"] toolbox:hover #urlbar,
  265. #main-window[lwtheme="true"] #browser-bottombox:hover,
  266. #main-window[lwtheme="true"] toolbox:hover,
  267. #main-window[lwtheme="true"] toolbox:hover #nav-bar toolbarbutton,
  268. #main-window[lwtheme="true"] #browser-bottombox:hover statusbar,
  269. #main-window[lwtheme="true"] toolbox:hover .tab-icon-image,
  270. #main-window[lwtheme="true"] #browser-bottombox:hover toolbarbutton,
  271. #main-window[lwtheme="true"] toolbox:hover toolbarbutton,
  272. .toolbarbutton-icon
  273. {opacity:1!important;
  274. -moz-transition-property: opacity!important;
  275. -moz-transition-duration:0.5s!important;
  276. -moz-transition-delay: 0s!important;}
  277.  
  278. }
  279. /*=========Statusbar=======Addonbar====urlbar=======navbar===toolbar=======*/
  280.  
  281. /*MenuButton*/
  282. /*======= use 'margin-left' to set the point where to begin with tabs in fullscreen =======*/
  283. #main-window[sizemode="maximized"][tabsontop="true"][chromemargin]:not([inFullscreen]) #tabbrowser-tabs{margin-left:-40px!important;}
  284. #main-window[sizemode="maximized"][tabsontop="true"][chromemargin]:not([inFullscreen]) #appmenu-button-container
  285. {-moz-appearance:-moz-window-button-box-maximized!important;
  286. margin-left:-62px!important;width:0px!important;}
  287. #main-window[focus="true"] *{background:red!important}
  288. #main-window[sizemode="maximized"][tabsontop="true"][chromemargin]:not([inFullscreen]) #appmenu-button
  289. {z-index:1!important;margin-left:62px!important;
  290.  height: 20px !important;position:fixed!important;
  291.  min-width: 41px !important;max-width:20px!important;
  292.  width: 41px !important;padding-left:4px!important;padding-right:4px!important;
  293.  background:rgba(0,0,0,.3) -moz-linear-gradient(rgba(200,200,200,.6)50%,rgba(0,0,0,.2)50%)!important;
  294. -moz-image-region: rect(0px, 88px, 16px, 72px)!important;
  295.  list-style-image: url(chrome://browser/skin/Toolbar.png)!important;
  296.  border: 1px inset !important;
  297. -moz-border-top-colors: transparent!important;
  298. -moz-border-right-colors: #000!important;
  299. -moz-border-left-colors: #000!important;
  300. -moz-border-bottom-colors: #000!important;
  301. -moz-box-shadow: inset  0px 0px 0px 1px rgba(200,200,200,.6), 0px 0px 0px 1px rgba(200,200,200,.6)!important;}
  302. #main-window[sizemode="maximized"][tabsontop="true"][chromemargin]:not([inFullscreen]) #appmenu-button .button-text
  303. {display:none!important}
  304. #main-window[sizemode="maximized"][tabsontop="true"][chromemargin]:not([inFullscreen]) #appmenu-button:-moz-window-inactive
  305. {background-image:none!important;
  306. /*box-shadow:none!important;
  307. -moz-border-top-colors: transparent!important;
  308. -moz-border-right-colors: gray!important;
  309. -moz-border-left-colors: gray!important;
  310. -moz-border-bottom-colors: gray!important;*/}
  311.  
  312. /*Findbar*/
  313.  
  314. #FindToolbar .toolbarbutton-text {display: none !important}
  315. #FindToolbar checkbox            {display: none !important}
  316.  
  317. #FindToolbar .findbar-container 
  318. {-moz-box-direction: reverse !important; }
  319. #FindToolbar
  320. {-moz-box-direction: reverse !important; }
  321.  
  322. /*partie du haut*/
  323.  
  324. window[stylish-url="about:addons"]:not([inFullscreen]) toolbar:not([collapsed="true"])
  325. {visibility:visible !important}
  326.  
  327. #urlbar #urlbar-icons
  328. {visibility:hidden}
  329.  
  330. #urlbar:hover #urlbar-icons,#urlbar:focus #urlbar-icons
  331. {visibility:visible!important}
  332.  
  333. #sidebar-header,#browser-bottombox,#addon-bar,
  334. #navigator-toolbox > toolbar:not(#toolbar-menubar):not([autohide="true"]),
  335. #navigator-toolbox > #toolbar-menubar > toolbarspring,
  336. #navigator-toolbox > #toolbar-menubar:not([autohide="true"])
  337. {-moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag") !important}
  338.  
  339. /*Addonbar*/
  340.  
  341. statuspanel:not([type="overLink"]) * .statuspanel-label,
  342. #addonbar-closebutton
  343. {display: none !important}
  344.  
  345. #addon-bar:before
  346. {content: "By H.Dimitri";display:-moz-box!important;
  347.  color:black!important;-moz-box-align:center!important;
  348.  text-shadow: rgba(255,255,255,.5) 0px 1px 0px, white 0px 0px 4px, white 0px 0px 8px, rgba(0,0,0,.8) 1px -1px 2px}
  349.  
  350. #browser-bottombox:not(:-moz-lwtheme)
  351. {-moz-appearance: -moz-win-glass !important}
  352.  
  353. #browser-bottombox statusbar
  354. {-moz-appearance: tooltip!important;
  355. ;margin-top:-3px!important}
  356.  
  357. #main-window #addon-bar
  358. {margin-top: -2px!important}
  359.  
  360. /*=======replace blank icon===================================*/
  361. @-moz-document url(chrome://browser/content/browser.xul){
  362.  
  363. .tab-icon-image,
  364. #page-proxy-favicon
  365. {-moz-image-region: rect(0px, 88px, 16px, 72px)!important;
  366.  list-style-image: url(chrome://browser/skin/Toolbar.png)!important}
  367.  
  368. }
  369.  
  370. /*=======new way for personnas===================================*/
  371. @-moz-document url(chrome://browser/content/browser.xul){
  372.  
  373. #tab-view {background:transparent none!important}
  374. #main-window{background-repeat:repeat!important}
  375. #browser-bottombox{background:transparent none!important}
  376. /* Patch réalisé par foxxyn8 */
  377. #main-window[lwtheme="true"] #navigator-toolbox:after 
  378. { -moz-appearance: none !important; 
  379. /*height: 0px !important;*/
  380. background-color: transparent !important; } 
  381. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.