Advertisement
geraldandy

userChrome.css

Oct 2nd, 2024 (edited)
355
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.51 KB | None | 0 0
  1. /* hide the search bar magnifying glass */
  2. #identity-box[pageproxystate=invalid] > .identity-box-button,
  3. .searchbar-search-button{ display: none }
  4.  
  5. /* hide the search with in urlbar */
  6. #urlbar-input::placeholder{ color: transparent }
  7.  
  8. /* hide firefox logo in new tab */
  9. .tabbrowser-tab .tab-icon-image {
  10.       display: none !important;
  11. }
  12.  
  13. /* remove search with in urlbar */
  14. .urlbarView-title-separator, .urlbarView-action {display:none !important;}
  15.  
  16. /* HIDE URLBAR GO BUTTON */
  17. #urlbar-container :-moz-any(.urlbar-go-button, #urlbar-go-button){
  18.   visibility: collapse !important;
  19. }
  20.  
  21.  
  22. /* hide new tab text in new tab */
  23. .tabbrowser-tab[label="New Tab"] label {
  24.   display: none !important;
  25. }
  26.  
  27.  
  28. /* removes the glowy thing on the url bar */
  29. #nav-bar{ --toolbar-field-focus-border-color: transparent }
  30.  
  31. /* remove tracking protection icon url bar */
  32. #tracking-protection-icon-container {
  33. display: none;
  34. }
  35.  
  36. /* removes padlock */
  37. #identity-box:not(:hover) {
  38.     width: 1px !important;
  39.     min-width: 1px !important;
  40.     padding-left: 0px !important;
  41.     padding-right: 0px !important;
  42.     transition: all 200ms ease-in-out !important;
  43.     opacity:  0 !important;
  44. }
  45. #identity-box:hover {
  46.     width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding)) !important;
  47.     min-width: unset !important;
  48.     transition: all 200ms ease-in-out !important;
  49.     opacity:  1 !important;
  50. }
  51.  
  52.  
  53. /* removes reader view */
  54. #reader-mode-button{ display: none }
  55.  
  56. /* remove containers in urlbar */
  57. #pageAction-urlbar-_testpilot-containers {display: none !important}
  58.  
  59.  
  60.  
  61.  
  62. /* remove url bar star bookmark thingy */
  63. #star-button { display: none !important; }
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70. /* remove the links from the bottom left */
  71. #statuspanel #statuspanel-label { display: none !important; }
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78. /* slighly round off the eddges of the url bar */
  79. #urlbar, .searchbar-textbox{
  80.     border-radius: 0.6em !important;
  81. }
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88. /*Icons and their background*/
  89. .titlebar-min {
  90. list-style-image: url(chrome://browser/skin/window-controls/minimize-highcontrast.svg) !important;
  91. color: White !important;
  92. /*   background: rgba(222,222,222,1) !important;    */
  93. }
  94.  
  95. .titlebar-max {
  96. list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg) !important;
  97. color: White !important;
  98. }
  99.  
  100. .titlebar-restore {
  101. list-style-image: url(chrome://browser/skin/window-controls/restore-highcontrast.svg) !important;
  102. color: White !important;
  103. }
  104.  
  105. .titlebar-close {
  106. list-style-image: url(chrome://browser/skin/window-controls/close-highcontrast.svg) !important;
  107. color: White !important;
  108. }
  109.  
  110.  
  111.  
  112.  
  113.  
  114. /* hide extensions but its still clickable */
  115. #unified-extensions-button{
  116.     width: 3px;
  117.     padding-inline: 0 !important
  118. }
  119. #unified-extensions-button > .toolbarbutton-icon {
  120.     width: 0 !important;
  121. }
  122.  
  123.  
  124.  
  125.  
  126.  
  127.  
  128.  
  129. /* remove search bar highlight */
  130. @-moz-document url(chrome://browser/content/browser.xhtml) {
  131.   #urlbar-container {
  132.     --urlbar-container-height: var(--urlbar-height);
  133.   }
  134.  
  135.   #urlbar {
  136.     --urlbar-height: 32px !important;
  137.     --urlbar-toolbar-height: 32px !important;
  138.   }
  139.  
  140.   #urlbar,
  141.   #urlbar:hover,
  142.   #urlbar[focused="true"] {
  143.     border: 1px solid var(--lwt-toolbar-field-border-color, rgba(0, 0, 0, 0.1)) !important;
  144.     background-color: var(--lwt-toolbar-field-background-color, rgba(78, 48, 26, 0.25)) !important;
  145.     box-shadow: none !important;
  146.   }
  147.  
  148.   #urlbar-background,
  149.   #urlbar-input-container {
  150.     border: none !important;
  151.     background-color: transparent !important;
  152.     box-shadow: none !important;
  153.     backdrop-filter: blur(2px);
  154.   }
  155.  
  156.   #urlbar[open] > .urlbarView {
  157.     background: var(--lwt-toolbar-field-background-color, rgba(78, 48, 26, 0.25)) !important;
  158.     border: 1px solid var(--lwt-toolbar-field-border-color, rgba(0, 0, 0, 0.1)) !important;
  159.     border-top: none !important;
  160.     box-shadow: none !important;
  161.   }
  162. }
  163.  
  164.  
  165.  
  166.  
  167.  
  168. /* make tabs bit more round */
  169. .tab-background, .tab-loading-burst { border: none !important; border-radius: 10px !important; }
  170.  
  171.  
  172.  
  173. /* Adjust transparency of background tabs */
  174. @-moz-document url(chrome://browser/content/browser.xhtml) {
  175.   /* Target background tabs */
  176.   .tab-background:not([selected="true"]) {
  177.     background-color: rgba(78, 48, 26, 0.25) !important; /* Adjust the opacity (0.85 in this case) */
  178.     backdrop-filter: blur(2px); /* Optional: adds a slight blur effect */
  179.   }
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189. /* make active tab darker */
  190. .tabbrowser-tab[selected="true"] .tab-background {
  191.      background-color: rgba(78, 48, 26, 0.25) !important;
  192. }
  193.  
  194.  
  195. /* remove the folder icon thing on the toolbar */
  196. #alltabs-button { display: none !important; }
  197.  
  198. /* change new tab color */
  199. #tabs-newtab-button, #TabsToolbar #new-tab-button {fill: white !important;}
  200.  
  201. /* userChrome.css */
  202. /* Classic layout that 86.4 percent of Firefox users actually want, with menu bar at the top, address bar, then bookmarks, then tab bar on bottom.  Modified from configs by u/ollietup https://www.reddit.com/r/FirefoxCSS/comments/11odffm/psa_incoming_changes_to_default_element/  Also thanks to MrOtherGuy to get the menu bar right, and Reddit user u/iamsonixx for the toolbar and tab height adjustments! */
  203.  
  204. #navigator-toolbox #nav-bar {
  205.     order: 1 !important;
  206. }
  207. #navigator-toolbox #PersonalToolbar {
  208.     order: 2 !important;
  209. }
  210. #tab-notification-deck {
  211.     order: 3 !important;
  212. }
  213. #titlebar{
  214.     order: 4 !important;
  215. }
  216.  
  217. /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
  218. See the above repository for updates as well as full license text. */
  219.  
  220. /* Menubar on top patch - use with tabs_on_bottom.css */
  221. /* Only really useful if menubar is ALWAYS visible */
  222.  
  223. :root{ --uc-window-control-width: 0px !important }
  224.  
  225. #navigator-toolbox{ padding-top: none !important }
  226.  
  227. #toolbar-menubar{
  228. position: fixed;
  229. display: flex;
  230. top: var(--uc-titlebar-padding,0px);
  231. height: 46px;
  232. width: 100%;
  233. overflow: hidden;
  234. }
  235.  
  236. #toolbar-menubar > .titlebar-buttonbox-container{ height: 25px; order: 100; }
  237.  
  238. #toolbar-menubar > [flex]{ flex-grow: 100; }
  239. #toolbar-menubar > spacer[flex]{
  240. order: 99;
  241. flex-grow: 1;
  242. min-width: var(--uc-window-drag-space-width,20px);
  243. }
  244.  
  245. #toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }
  246.  
  247. #toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }
  248.  
  249. /* SET TOOLBARS HEIGHT */
  250. /* Thanks to Reddit user u/iamsonixx for the toolbar and tab height adjustments! */
  251. #TabsToolbar,
  252. #nav-bar,
  253. #PersonalToolbar{
  254. height: 43px !important;
  255. margin: 0px !important;
  256. padding: 0px !important;}
  257. /* SET TABS HEIGHT */
  258. :root{
  259. --tab-min-height: 34px !important;
  260. --tab-max-height: 34px !important;}
  261.  
  262. /* move control buttons */
  263. #TabsToolbar .titlebar-buttonbox-container {
  264.   position: fixed;
  265.   right: 0;
  266.   top: 0;
  267.   z-index: 3;
  268. }
  269.  
  270. /* move hmburuger buttons */
  271. #PanelUI-button {
  272.   position: fixed;
  273.   right: 95px;
  274.   top: 5.5px;
  275.   z-index: 2;
  276. }
  277.  
  278. /* adjust url bar width */
  279. #urlbar-container { max-width: 1660px !important;
  280. }
  281.  
  282. @-moz-document url(chrome://browser/content/browser.xhtml) {
  283.  
  284.   /* Style for the hamburger menu button */
  285.   #PanelUI-button {
  286.     background-color: rgba(78, 48, 26, 0.25) !important;
  287.     border-radius: 9px;
  288.  
  289. #PanelUI-menu-button .toolbarbutton-icon {
  290.     fill: rgb(78, 48, 26) !important;
  291. }
  292.  
  293. #PanelUI-menu-button {
  294.     padding-top: 0px !important;
  295.     padding-bottom: 0px !important;
  296.     padding-left: 4px !important;
  297.     padding-right: 4px !important;
  298. }
  299.  
Tags: firefox
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement