API tools faq
paste
Guest User

my_userChrome.css

a guest
Apr 14th, 2025
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.91 KB | Source Code | 0 0
raw download clone embed print report
  1. /* copied from Aris's appbutton_in_titlebar.css and then modified.                                                 */
  2. /* nb: line 18 below (currently set at 125px) can control gap between the Appmenu button and the start of the tabs */
  3. /*     line 119 refers to the down arrow icon in Aris's \Chrome\dropdown-arrow-inverted.svg                        */
  4. /*******************************************************************************************************************/
  5.  
  6.  
  7.  
  8. /* Firefox userChrome.css tweaks ********************************************************/
  9. /* Github: https://github.com/aris-t2/customcssforfx ************************************/
  10. /****************************************************************************************/
  11.  
  12.  
  13. /************************************************/
  14. /* cheat main menu button into title bar ********/
  15. /************************************************/
  16.  
  17. :root {
  18.   --appbutton_in_titlebar: 115px !important;       /* adjust */
  19. }
  20.  
  21. /* menubar adjustments */
  22. #main-window:NOT([tabsintitlebar],[customtitlebar]) #toolbar-menubar {
  23.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  24. }
  25. #main-window:NOT([tabsintitlebar],[customtitlebar])[sizemode="maximized"] #toolbar-menubar {
  26.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  27. }
  28. #main-window[uidensity=compact]:NOT([tabsintitlebar],[customtitlebar]) #toolbar-menubar {
  29.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  30. }
  31. #main-window[uidensity=compact]:NOT([tabsintitlebar],[customtitlebar])[sizemode="maximized"] #toolbar-menubar {
  32.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  33. }
  34.  
  35. /* tabs toolbar adjustments */
  36. #main-window:NOT([tabsintitlebar],[customtitlebar]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
  37.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  38. }
  39.  
  40. #main-window:NOT([tabsintitlebar],[customtitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
  41.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  42. }
  43.  
  44. #main-window[uidensity=compact]:NOT([tabsintitlebar],[customtitlebar]) #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
  45.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  46. }
  47.  
  48. #main-window[uidensity=compact]:NOT([tabsintitlebar],[customtitlebar])[sizemode="maximized"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #TabsToolbar {
  49.   padding-inline-start: var(--appbutton_in_titlebar) !important;
  50. }
  51.  
  52. #main-window:NOT([tabsintitlebar],[customtitlebar])[sizemode="fullscreen"] #TabsToolbar {
  53.  padding-inline-start: var(--appbutton_in_titlebar) !important;
  54. }
  55.  
  56. #main-window:NOT([tabsintitlebar],[customtitlebar]):not([sizemode="fullscreen"]) #toolbar-menubar[autohide="true"]:not([inactive="true"]) ~ #TabsToolbar,
  57. #main-window:NOT([tabsintitlebar],[customtitlebar]):not([sizemode="fullscreen"]) #toolbar-menubar[autohide="false"] ~ #TabsToolbar {
  58.   margin-top: 4px !important;
  59. }
  60.  
  61. /* appbutton */
  62. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button {
  63.   appearance: none !important;
  64.   position: fixed !important;
  65.   display: flex !important;
  66.   height: 22px !important;
  67.   margin: 0 !important;
  68.   margin-inline-start: 0px !important;
  69.   border: unset !important;
  70.   box-shadow: unset !important;
  71.   padding-left: 0px !important;
  72.   padding-right: 0px !important;
  73.   top: 0px !important;
  74. }
  75.  
  76. /* code for macOS/Linux */
  77.  
  78. @media not (-moz-platform: windows) {
  79.     #main-window:NOT([tabsintitlebar],[customtitlebar])[sizemode="maximized"] #PanelUI-button {
  80.       top: 0 !important;
  81.     }  
  82. }
  83.  
  84. #main-window:NOT([tabsintitlebar],[customtitlebar])[sizemode="fullscreen"] #PanelUI-button {
  85.   top: 0 !important;
  86. }
  87.  
  88. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button #PanelUI-menu-button {
  89.   background-clip: padding-box !important;
  90.   padding: 0 1.4em 0 !important;
  91.   padding-top: 0 !important;
  92.   padding-bottom: 0 !important;
  93.   padding-inline-start: 1.4em !important;
  94.   padding-inline-end: 2.1em !important;
  95.   height: 22px !important;
  96.   border-radius: 0 0 4px 4px;
  97.   border-top: none !important;
  98.   border-right: 1px solid !important;
  99.   border-left: 1px solid !important;
  100.   border-bottom: 1px solid !important;
  101. }
  102.  
  103. /* code for macOS/Linux */
  104. @media not (-moz-platform: windows) {
  105.   #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button #PanelUI-menu-button {
  106.     max-width: var(--appbutton_in_titlebar) !important;
  107.   }
  108. }
  109.  
  110. /* hide button in fullscreen mode, if toolbars get automatically hidden */
  111. #main-window:NOT([tabsintitlebar],[customtitlebar])[sizemode="fullscreen"] #navigator-toolbox[style*="margin-top: -"] #PanelUI-button {
  112.   visibility: collapse !important;
  113. }
  114.  
  115. /* dropmarker icon / arrow */
  116. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button .toolbarbutton-icon {
  117.   margin-top: 2px !important;
  118.   margin-bottom: 0px !important;
  119.   list-style-image: url("./image/dropdown-arrow-inverted.svg") !important;
  120.   width: 9px !important;
  121.   height: 7px !important;
  122.   background: unset !important;
  123.   box-shadow: unset !important;
  124.   margin-inline-end: -2px !important;
  125. }
  126.  
  127. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button::after {
  128.   display: block !important;
  129.   color: white !important;
  130.   font-weight: bold !important;
  131.   text-shadow: 0 0 1px rgba(0,0,0,.7),
  132.                0 1px 1.5px rgba(0,0,0,.5) !important;
  133.   border: unset !important;
  134.   box-shadow: unset !important;
  135.   margin-inline-start: 8px !important;
  136. }
  137.  
  138. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button .toolbarbutton-badge-stack {
  139.   position: absolute;
  140.   right: 0px;
  141. }
  142.  
  143. /* 'Firefox' title */
  144. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[label="Firefox"]::after,
  145. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button:not([label="Nightly"],[label="Firefox Nightly"],[label="Firefox Developer Edition"],[label="Firefox"],[label="Tor Browser"],[label="Tor-Browser"])::after {
  146.   content: "Firefox" !important;
  147. }
  148.  
  149. /* 'DevFox' title */
  150. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[label="Firefox Developer Edition"]::after {
  151.   content: "DevFox" !important;
  152. }
  153.  
  154. /* 'Nightly' title */
  155. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button:is([label="Nightly"],[label="Firefox Nightly"])::after {
  156.   content: "Nightly" !important;
  157. }
  158.  
  159. /* 'Tor-Browser' title */
  160. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button:-moz-any([label="Tor Browser"],[label="Tor-Browser"])::after {
  161.   content: "TorFox" !important;
  162. }
  163.  
  164. /* adjust button badge stack */
  165. #main-window:NOT([tabsintitlebar],[customtitlebar]) :is(#PanelUI-button,#PanelUI-menu-button):not([checked],[open],:active) > .toolbarbutton-badge-stack,
  166. #main-window:NOT([tabsintitlebar],[customtitlebar]) :is(#PanelUI-button,#PanelUI-menu-button):not([disabled=true],[checked],[open],:active):hover > .toolbarbutton-badge-stack,
  167. #main-window:NOT([tabsintitlebar],[customtitlebar]) :is(#PanelUI-button,#PanelUI-menu-button):not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
  168.   background: unset !important;
  169.   border-color: unset !important;
  170.   border: 0 !important;
  171.   box-shadow: unset !important;
  172.   outline: unset !important;               
  173. }
  174.  
  175. /* adjust button badge */
  176. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button #PanelUI-menu-button .toolbarbutton-badge-stack .toolbarbutton-badge  {
  177.   position: fixed !important;
  178.   left: 10px !important;
  179.   top: 7px !important;
  180.   height: 14px !important;
  181. }
  182.  
  183. /* button color/border */
  184.  
  185. /* orange (default) */
  186. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button #PanelUI-menu-button {
  187.   background-image: linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
  188.   border-right-color:hsla(214,89%,21%,.5) !important;
  189.   border-left-color: hsla(214,89%,21%,.5) !important;
  190.   border-bottom-color: hsla(214,89%,21%,.5) !important;
  191.   box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
  192.               0 0 2px 1px hsla(0,0%,100%,.25) inset,
  193.               0 1px 0 0px rgba(255,255,255,.6),
  194.               0 -1px 0 0px rgba(255,255,255,.6),
  195.               1px 0 0 0px rgba(255,255,255,.6),
  196.               -1px 0 0 0px rgba(255,255,255,.6) !important;
  197. }
  198. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button #PanelUI-menu-button:hover:not(:active):not([open]){
  199.   background-image: radial-gradient(farthest-side at center bottom, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
  200.                     radial-gradient(farthest-side at center bottom, rgb(236,133,0), rgba(255,229,172,0)),
  201.                     linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
  202.   border-color: rgba(83,42,6,.9) !important;
  203.   box-shadow: 0 1px 0 hsla(0,0%,100%,.15) inset,
  204.               0 0 2px 1px hsla(0,0%,100%,.5) inset,
  205.               0 -1px 0 hsla(0,0%,100%,.2),
  206.               0 1px 0 0px rgba(255,255,255,.6),
  207.               0 -1px 0 0px rgba(255,255,255,.6),
  208.               1px 0 0 0px rgba(255,255,255,.6),
  209.               -1px 0 0 0px rgba(255,255,255,.6) !important;
  210. }
  211. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button #PanelUI-menu-button:is(:hover:active,[open]){
  212.   background-image: linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
  213.   box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
  214.               0 1px 1px rgba(0,0,0,.2) inset,
  215.               0 1px 0 0px rgba(255,255,255,.6),
  216.               0 -1px 0 0px rgba(255,255,255,.6),
  217.               1px 0 0 0px rgba(255,255,255,.6),
  218.               -1px 0 0 0px rgba(255,255,255,.6) !important;
  219. }
  220.  
  221. /*private browsing - purple */
  222. #main-window[privatebrowsingmode=temporary]:NOT([tabsintitlebar],[customtitlebar]) #navigator-toolbox #PanelUI-button #PanelUI-menu-button{
  223.   background-image: linear-gradient(rgb(153,38,211), rgb(105,19,163) 95%) !important;
  224. }
  225. #main-window[privatebrowsingmode=temporary]:NOT([tabsintitlebar],[customtitlebar]) #navigator-toolbox #PanelUI-button #PanelUI-menu-button:hover:not(:active):not([open]){
  226.   background-image: radial-gradient(farthest-side at center bottom, rgba(240,193,255,.5) 10%, rgba(240,193,255,0) 70%),
  227.                     radial-gradient(farthest-side at center bottom, rgb(192,81,247), rgba(236,172,255,0)),
  228.                     linear-gradient(rgb(144,20,207), rgb(95,0,158) 95%) !important;
  229. }
  230. #main-window[privatebrowsingmode=temporary]:NOT([tabsintitlebar],[customtitlebar]) #navigator-toolbox #PanelUI-button #PanelUI-menu-button:is(:hover:active,[open]) {
  231.   background-image: linear-gradient(rgb(144,20,207), rgb(95,0,158) 95%) !important;
  232. }
  233.  
  234. /* fix for 'buttons_on_navbar_squared_buttons.css' */
  235. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=compact] #PanelUI-menu-button .toolbarbutton-badge-stack,
  236. #main-window:NOT([tabsintitlebar],[customtitlebar]):not([uidensity=compact]):not([uidensity=touch]) #PanelUI-menu-button .toolbarbutton-badge-stack,
  237. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=touch] #PanelUI-menu-button .toolbarbutton-badge-stack {
  238.   padding-top: 0px !important;
  239.   padding-bottom: 0px !important;
  240.   width: unset !important;
  241.   height: 22px !important;
  242. }
  243.  
  244. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=compact] #PanelUI-menu-button .toolbarbutton-icon,
  245. #main-window:NOT([tabsintitlebar],[customtitlebar]):not([uidensity=compact]):not([uidensity=touch]) #PanelUI-menu-button .toolbarbutton-icon,
  246. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=touch] #PanelUI-menu-button .toolbarbutton-icon {
  247.   padding: 6px !important;
  248.   width: 9px !important;
  249.   height: 7px !important;
  250.   outline: unset !important;
  251. }
  252.  
  253. /* fix for toolbar + text mode */
  254. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) toolbaritem #PanelUI-menu-button,
  255. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) #PanelUI-menu-button,
  256. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) .toolbarbutton-1[type="menu-button"] #PanelUI-menu-button{
  257.   appearance: unset !important;
  258. }
  259. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) toolbaritem #PanelUI-menu-button .toolbarbutton-text,
  260. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) #PanelUI-menu-button:not([type="menu-button"]) .toolbarbutton-text,
  261. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) .toolbarbutton-1[type="menu-button"] #PanelUI-menu-button .toolbarbutton-text{
  262.   display: none !important;
  263. }
  264. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) toolbaritem #PanelUI-menu-button:not([type="menu-button"]),
  265. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) #PanelUI-menu-button:not([type="menu-button"]),
  266. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) .toolbarbutton-1[type="menu-button"] #PanelUI-menu-button{
  267.   -moz-box-orient: unset !important;
  268.   flex-direction: unset !important;
  269.   min-width: unset !important;
  270. }
  271.  
  272. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) toolbaritem #PanelUI-menu-button:not(#nav-bar-overflow-button):not(#PlacesChevron) > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack),
  273. #main-window:NOT([tabsintitlebar],[customtitlebar]) toolbox toolbar:not(#TabsToolbar) #PanelUI-menu-button:not([type="menu-button"]):not(#nav-bar-overflow-button):not(#PlacesChevron) > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack) {
  274.   opacity: 1.0 !important;
  275.   margin-bottom: unset !important;
  276. }
  277.  
  278. /* support for tab title in Firefox titlebar option*/
  279. #main-window:NOT([tabsintitlebar],[customtitlebar])::after {
  280.   margin-inline-start: var(--appbutton_in_titlebar) !important;
  281. }
  282.  
  283. /* remove this nonsense button, a menuitem is inside menu button anyways */
  284. #PanelUI-button #whats-new-menu-button {
  285.   display: none !important;
  286. }
  287.  
  288. /* workaround for Firefox 71+ *******************/
  289. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button > *:not(#PanelUI-menu-button) {
  290.   display: none !important;
  291. }
  292.  
  293. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=compact] #PanelUI-menu-button .toolbarbutton-badge-stack,
  294. #main-window:NOT([tabsintitlebar],[customtitlebar]):not([uidensity=compact]):not([uidensity=touch]) #PanelUI-menu-button .toolbarbutton-badge-stack,
  295. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=touch] #PanelUI-menu-button .toolbarbutton-badge-stack,
  296. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=compact] #PanelUI-menu-button .toolbarbutton-icon,
  297. #main-window:NOT([tabsintitlebar],[customtitlebar]):not([uidensity=compact]):not([uidensity=touch]) #PanelUI-menu-button .toolbarbutton-icon,
  298. #main-window:NOT([tabsintitlebar],[customtitlebar])[uidensity=touch] #PanelUI-menu-button .toolbarbutton-icon {
  299.   width: unset !important;
  300.   height: unset !important;
  301. }
  302.  
  303. #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
  304.   display: none !important;
  305. }
  306.  
  307. /* workaround for Firefox 102+ *******************/
  308. panel[id="appMenu-popup"][type="arrow"][side="top"],
  309. panel[id="appMenu-popup"][type="arrow"][side="bottom"] {
  310.   margin-inline: 0 !important;
  311. }
  312.  
  313. /* tweak button badge */
  314. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
  315. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
  316. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
  317. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
  318. #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  319.   background-image: url(chrome://browser/skin/update-badge.svg) !important;
  320.   background-repeat: no-repeat !important;
  321.   background-position: center !important;
  322.   -moz-context-properties: fill !important;
  323.   width: 14px !important;
  324.   height: 14px !important;
  325. }
  326.  
  327. /* aero appearance fix */
  328. #main-window:NOT([tabsintitlebar],[customtitlebar]) #nav-bar #PanelUI-button toolbarbutton:not([disabled=true]):hover :is(.toolbarbutton-badge-stack,.toolbarbutton-icon),
  329. #main-window:NOT([tabsintitlebar],[customtitlebar]) #nav-bar #PanelUI-button toolbarbutton:not([disabled=true]):is([open],[checked],:hover:active,:active) :is(.toolbarbutton-badge-stack,.toolbarbutton-icon) {
  330.   background-image: unset !important;
  331.   outline: 0px !important;
  332. }
  333.  
  334. /* Force appbutton to the right */
  335. @media (-moz-platform: macos) {
  336.    
  337.     #main-window:NOT([tabsintitlebar],[customtitlebar]) #PanelUI-button {
  338.       right: 0 !important;
  339.     }
  340.  
  341.     #main-window:NOT([tabsintitlebar],[customtitlebar]) #TabsToolbar {
  342.       padding-inline-end: calc(var(--appbutton_in_titlebar) + 5px) !important;
  343.     }
  344.  
  345.     #main-window:NOT([tabsintitlebar],[customtitlebar]) .titlebar-buttonbox-container {
  346.       padding-inline-end: 20px !important;
  347.     }
  348.  
  349. }
  350.  
Tags: my_userChrome.css
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!