Advanced Search

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.