API tools faq
paste
Guest User

userChrome.css

a guest
Aug 2nd, 2026
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.98 KB | Source Code | 0 0
raw download clone embed print report
  1.  
  2. :root {
  3.     /* Use actual CSS variables from imported colors.css */
  4.     --tab-active-bg-color: #23262e;
  5.     --tab-inactive-bg-color: #23262e;
  6.     --tab-active-fg-fallback-color: #c74ded;        /* color of text in an active tab without a container */
  7.     --tab-inactive-fg-fallback-color: #7cb7ff;      /* color of text in an inactive tab without a container */
  8.     --urlbar-focused-bg-color: #23262e;
  9.     --urlbar-not-focused-bg-color: #23262e;
  10.     --toolbar-bgcolor: #23262e !important;
  11.     --identity-icon-color: #7daea3 !important;
  12.     --tab-font: 'ShureTechMono Nerd Font Mono';
  13.     --urlbar-font: 'ShureTechMono Nerd Font Mono';
  14.  
  15.     /* try increasing if you encounter problems */
  16.     --urlbar-height-setting: 22px;
  17.     --tab-min-height: 16px !important;
  18.  
  19.     /* I don't recommend you touch this unless you know what you're doing */
  20.     --arrowpanel-menuitem-padding: 2px !important;
  21.     --arrowpanel-border-radius: 0px !important;
  22.     --arrowpanel-menuitem-border-radius: 0px !important;
  23.     --toolbarbutton-border-radius: 0px !important;
  24.     --toolbarbutton-inner-padding: 0px 2px !important;
  25.     --toolbar-field-focus-background-color: var(--urlbar-focused-bg-color) !important;
  26.     --toolbar-field-background-color: var(--urlbar-not-focused-bg-color) !important;
  27.     --toolbar-field-focus-border-color: transparent !important;
  28. }
  29.  
  30. /* --- GENERAL DEBLOAT ---------------------------------- */
  31.  
  32. /* Bottom left page loading status or url preview */
  33. #statuspanel { display: none !important; }
  34.  
  35. /* remove radius from right-click popup */
  36. menupopup, panel { --panel-border-radius: 0px !important; }
  37. menu, menuitem, menucaption { border-radius: 0px !important; }
  38.  
  39. /* no stupid large buttons in right-click menu */
  40. menupopup > #context-navigation { display: none !important; }
  41. menupopup > #context-sep-navigation { display: none !important; }
  42.  
  43. /* --- DEBLOAT NAVBAR ----------------------------------- */
  44.  
  45. #home-button { display: none; }
  46. #library-button { display: none; }
  47. /* #fxa-toolbar-menu-button { display: none; } */
  48. /* empty space before and after the url bar */
  49. #customizableui-special-spring1, #customizableui-special-spring2 { display: none; }
  50. .private-browsing-indicator-with-label { display: none; }
  51.  
  52. /* --- STYLE NAVBAR ------------------------------------ */
  53.  
  54. /* remove padding between toolbar buttons */
  55. toolbar .toolbarbutton-1 { padding: 0 0 !important; }
  56.  
  57. /* add it back to the downloads button, otherwise it's too close to the urlbar */
  58. #downloads-button {
  59.     margin-left: 2px !important;
  60. }
  61.  
  62. /* add padding to the right of the last button so that it doesn't touch the edge of the window */
  63. #PanelUI-menu-button {
  64.     padding: 0px 4px 0px 0px !important;
  65. }
  66.  
  67. #urlbar-container {
  68.     --urlbar-container-height: var(--urlbar-height-setting) !important;
  69.     margin-left: 0 !important;
  70.     margin-right: 0 !important;
  71.     padding-top: 0 !important;
  72.     padding-bottom: 0 !important;
  73.     font-family: var(--urlbar-font, 'monospace');
  74.     font-size: 11px;
  75. }
  76.  
  77. #urlbar {
  78.     --urlbar-height: var(--urlbar-height-setting) !important;
  79.     --urlbar-toolbar-height: var(--urlbar-height-setting) !important;
  80.     min-height: var(--urlbar-height-setting) !important;
  81.     border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25)) !important;
  82. }
  83.  
  84. #urlbar-input {
  85.     margin-left: 0.4em !important;
  86.     margin-right: 0.4em !important;
  87. }
  88. #urlbar > .urlbar-input-container {
  89.     padding: 0 !important;
  90.     border: 0 !important;
  91. }
  92.  
  93. #navigator-toolbox {
  94.     border: none !important;
  95. }
  96.  
  97. /* keep pop-up menus from overlapping with navbar */
  98. #widget-overflow { margin: 3px !important; }
  99. #customizationui-widget-panel { margin: 3px !important; }
  100. #unified-extensions-panel { margin-top: 3px !important; }
  101. #appMenu-popup { margin-top: 3px !important; }
  102.  
  103. /* --- UNIFIED EXTENSIONS BUTTON ------------------------ */
  104.  
  105. /* make extension icons smaller */
  106. #unified-extensions-view {
  107.     --uei-icon-size: 16px;
  108. }
  109.  
  110. /* hide bloat */
  111. .unified-extensions-item-message-deck,
  112. #unified-extensions-view > .panel-header,
  113. #unified-extensions-view > toolbarseparator,
  114. #unified-extensions-manage-extensions {
  115.     display: none !important;
  116. }
  117.  
  118. /* add 3px padding on the top and the bottom of the box */
  119. .panel-subview-body {
  120.     padding: 3px 0px !important;
  121. }
  122.  
  123. #unified-extensions-view .toolbarbutton-icon {
  124.     padding: 0 !important;
  125. }
  126.  
  127. .unified-extensions-item-contents {
  128.     line-height: 1 !important;
  129.     white-space: nowrap !important;
  130. }
  131.  
  132. #unified-extensions-panel .unified-extensions-item {
  133.     margin-block: 0 !important;
  134. }
  135.  
  136. .toolbar-menupopup :is(menu, menuitem), .subview-subheader, panelview
  137. .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1 {
  138.     padding: 4px !important;
  139. }
  140.  
  141. /* --- QUICK BOOKMARK POPUP ----------------------------- */
  142.  
  143. menupopup, panel { &::part(content) { height: auto !important; } }
  144.  
  145. #editBMPanel_folderTree, #editBMPanel_tagsSelector {
  146.     height: 40vh !important;
  147. }
  148.  
  149. #editBMPanel_folderMenuList {
  150.     display: none !important;
  151. }
  152.  
  153. /* --- DEBLOAT URLBAR ----------------------------------- */
  154.  
  155. #pageActionButton { display: none; }
  156. #pocket-button { display: none; }
  157. #urlbar-zoom-button { display: none; }
  158. #tracking-protection-icon-container { display: none !important; }
  159. /* #reader-mode-button{ display: none !important; } */
  160. /* #star-button { display: none; } */
  161. /* #star-button-box:hover { background: inherit !important; } */
  162. #urlbar-searchmode-switcher { display: none; }
  163. #searchmode-switcher-chicklet { display: none !important; }
  164.  
  165. /* hide container indicators; we indicate container by changing tab title text color */
  166. #identity-icon-box {
  167.     margin-inline-end: 0 !important;
  168.     padding: 0 4px !important;
  169. }
  170. .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  171.     display: none !important;
  172. }
  173.  
  174. /* Go to arrow button at the end of the urlbar when searching */
  175. #urlbar-go-button { display: none; }
  176.  
  177. /* remove container indicator from urlbar */
  178. #userContext-label, #userContext-indicator { display: none !important;}
  179.  
  180. /* --- STYLE TAB TOOLBAR -------------------------------- */
  181.  
  182. #titlebar {
  183.     --proton-tab-block-margin: 0px !important;
  184.     --tab-block-margin: 0px !important;
  185. }
  186.  
  187. #TabsToolbar, .tabbrowser-tab {
  188.     max-height: var(--tab-min-height) !important;
  189.     font-size: 11px !important;
  190. }
  191.  
  192. /* Change color of normal tabs */
  193. tab:not([selected="true"]) {
  194.     background-color: var(--tab-inactive-bg-color) !important;
  195.     color: var(--identity-icon-color, var(--tab-inactive-fg-fallback-color)) !important;
  196. }
  197.  
  198. tab {
  199.     font-family: var(--tab-font, monospace);
  200.     font-weight: bold;
  201.     border: none !important;
  202.     padding-top: 0 !important;
  203. }
  204.  
  205. .tab-content {
  206.     padding: 0 0 0 var(--tab-inline-padding);
  207. }
  208.  
  209. .tab-background {
  210.     margin-block: 0 !important;
  211.     min-height: var(--tab-min-height);
  212.     outline-offset: 0 !important;
  213. }
  214.  
  215. /* safari style tab width */
  216. .tabbrowser-tab[fadein] {
  217.     max-width: 100vw !important;
  218.     border: none
  219. }
  220.  
  221. /* Hide close button on tabs */
  222. #tabbrowser-tabs .tabbrowser-tab .tab-close-button { display: none !important; }
  223.  
  224. /* disable favicons in tab */
  225. .tab-icon-stack:not([pinned]):not([busy]) { display: none !important; }
  226.  
  227. .tabbrowser-tab {
  228.     /* remove border between tabs */
  229.     padding-inline: 0px !important;
  230.     /* reduce fade effect of tab text */
  231.     --tab-label-mask-size: 1em !important;
  232.     /* fix pinned tab behaviour on overflow */
  233.     overflow-clip-margin: 0px !important;
  234. }
  235.  
  236. /* Tab: selected colors */
  237. #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  238.     background: var(--tab-active-bg-color) !important;
  239.     color: var(--identity-icon-color, var(--tab-active-fg-fallback-color)) !important;
  240. }
  241.  
  242. /* Tab: hovered colors */
  243. #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  244.     background: var(--tab-active-bg-color) !important;
  245. }
  246.  
  247. /* hide window controls */
  248. .titlebar-buttonbox-container { display: none; }
  249.  
  250. /* remove titlebar spacers */
  251. .titlebar-spacer { display: none !important; }
  252.  
  253. /* disable tab shadow */
  254. #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
  255.     box-shadow: none !important;
  256. }
  257.  
  258. /* remove dark space between pinned tab and first non-pinned tab */
  259. #pinned-tabs-container {
  260.     margin-inline-end: 0 !important;
  261. }
  262.  
  263. /* remove dropdown menu button which displays all tabs on overflow */
  264. #alltabs-button { display: none !important }
  265.  
  266. /* fix displaying of pinned tabs on overflow */
  267. #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container {
  268.     height: var(--tab-min-height) !important;
  269. }
  270.  
  271. #tabbrowser-tabs {
  272.     min-height: var(--tab-min-height) !important;
  273. }
  274.  
  275. /* remove overflow scroll buttons */
  276. #scrollbutton-up, #scrollbutton-down { display: none !important; }
  277.  
  278. /* remove new tab button */
  279. #tabs-newtab-button {
  280.     display: none !important;
  281. }
  282.  
  283. /* hide private browsing indicator */
  284. #private-browsing-indicator-with-label {
  285.     display: none;
  286. }
  287.  
  288. /* numbering tabs */
  289. #tabbrowser-tabs { counter-reset: tab-counter; }
  290. .tabbrowser-tab { counter-increment: tab-counter; }
  291. .tabbrowser-tab .tab-content {
  292.     padding-left: 0 !important;
  293. }
  294. .tabbrowser-tab .tab-content::before {
  295.     content: counter(tab-counter);
  296.     margin-right: 0.5em;
  297.     padding: var(--tab-min-height) 0.4em;
  298.     color: #c74ded;
  299.     background-color: #23262e;
  300. }
  301.  
  302. :root[inFullscreen] > body > #browser {
  303.     margin-top: 0 !important;
  304. }
  305.  
  306. /* --- AUTOHIDE NAVBAR ---------------------------------- */
  307.  
  308. :root {
  309.     --uc-navbar-transform: calc(0px - var(--urlbar-height-setting));
  310. }
  311.  
  312. #navigator-toolbox > div {
  313.     display: contents;
  314. }
  315.  
  316. :root[sessionrestored] :where(
  317.     #nav-bar,
  318.     #PersonalToolbar,
  319.     #tab-notification-deck,
  320.     .global-notificationbox
  321. ) {
  322.     transform: translateY(var(--uc-navbar-transform));
  323. }
  324.  
  325. :root:is([customizing], [chromehidden*="toolbar"]) :where(
  326.     #nav-bar,
  327.     #PersonalToolbar,
  328.     #tab-notification-deck,
  329.     .global-notificationbox
  330. ) {
  331.     transform: none !important;
  332.     opacity: 1 !important;
  333. }
  334.  
  335. #nav-bar:not([customizing]) {
  336.     opacity: 0;
  337.     position: relative;
  338.     z-index: 2;
  339. }
  340.  
  341. #titlebar {
  342.     position: relative;
  343.     z-index: 3;
  344. }
  345.  
  346. #navigator-toolbox,
  347. #sidebar-box,
  348. #sidebar-main,
  349. #sidebar-splitter,
  350. #tabbrowser-tabbox {
  351.     z-index: auto !important;
  352. }
  353.  
  354. /* Show when toolbox is focused, like when urlbar has received focus */
  355. #navigator-toolbox:focus-within > .browser-toolbar {
  356.     transform: translateY(0);
  357.     opacity: 1;
  358. }
  359.  
  360. /* Show when toolbox is hovered */
  361. #titlebar:hover ~ .browser-toolbar,
  362. .browser-titlebar:hover ~ :is(#nav-bar, #PersonalToolbar),
  363. #nav-bar:hover,
  364. #nav-bar:hover + #PersonalToolbar {
  365.     transform: translateY(0);
  366.     opacity: 1;
  367. }
  368.  
  369. :root[sessionrestored] #urlbar[popover] {
  370.     opacity: 0;
  371.     pointer-events: none;
  372.     transform: translateY(var(--uc-navbar-transform));
  373. }
  374.  
  375. #mainPopupSet:has(> [panelopen]:not(
  376.     #ask-chat-shortcuts,
  377.     #selection-shortcut-action-panel,
  378.     #chat-shortcuts-options-panel,
  379.     #tab-preview-panel
  380. )) ~ toolbox #urlbar[popover],
  381. .browser-titlebar:is(:hover, :focus-within) ~ #nav-bar #urlbar[popover],
  382. #nav-bar:is(:hover, :focus-within) #urlbar[popover],
  383. #urlbar-container > #urlbar[popover]:is([focused], [open]) {
  384.     opacity: 1;
  385.     pointer-events: auto;
  386.     transform: translateY(0);
  387. }
  388.  
  389. /* This ruleset is separate, because not having :has support breaks other selectors as well */
  390. #mainPopupSet:has(> [panelopen]:not(
  391.     #ask-chat-shortcuts,
  392.     #selection-shortcut-action-panel,
  393.     #chat-shortcuts-options-panel,
  394.     #tab-preview-panel
  395. )) ~ #navigator-toolbox > .browser-toolbar {
  396.     transform: translateY(0);
  397.     opacity: 1;
  398. }
  399.  
  400. /* Move up the content view */
  401. :root[sessionrestored]:not([chromehidden~="toolbar"]) > body > #browser {
  402.     margin-top: var(--uc-navbar-transform);
  403. }
  404.  
  405. /* --- MERGE NAVBAR INTO TAB BAR ------------------------ */
  406.  
  407. /* Make the toolbox a wrapping flex row so nav-bar and tabs share one line */
  408. #navigator-toolbox {
  409.     display: flex !important;
  410.     flex-direction: row !important;
  411.     flex-wrap: wrap !important;
  412.     align-items: center !important;
  413.     background: var(--toolbar-bgcolor) !important;
  414. }
  415.  
  416. /* Menu bar gets its own full row if shown */
  417. #toolbar-menubar {
  418.     order: 4 !important;
  419.     flex: 1 0 100% !important;
  420. }
  421.  
  422. /* Tabs fill the remaining space */
  423. #TabsToolbar {
  424.     order: 2 !important;
  425.     flex: 1 1 0 !important;
  426.     min-width: 0 !important;
  427. }
  428.  
  429. /* Address bar + buttons on the far left, 400px wide */
  430. #nav-bar {
  431.     order: 1 !important;
  432.     flex: 0 1 400px !important;
  433.     min-width: 0 !important;
  434.     max-width: 400px !important;
  435.     opacity: 1 !important;
  436.     transform: none !important;
  437.     position: static !important;
  438.     z-index: auto !important;
  439.     min-height: var(--tab-min-height) !important;
  440.     max-height: var(--tab-min-height) !important;
  441.     height: var(--tab-min-height) !important;
  442.     background: transparent !important;
  443.     padding: 0 !important;
  444.     margin: 0 !important;
  445.     border: none !important;
  446.     overflow: hidden !important;
  447. }
  448.  
  449. /* Bookmarks bar gets its own full row */
  450. #PersonalToolbar {
  451.     order: 3 !important;
  452.     flex: 1 0 100% !important;
  453. }
  454.  
  455. /* Notifications toolbar gets its own full row */
  456. #notifications-toolbar {
  457.     order: 5 !important;
  458.     flex: 1 0 100% !important;
  459. }
  460.  
  461. /* Show back/forward/reload/stop buttons at tab-bar height */
  462. #back-button, #forward-button, #reload-button, #stop-button {
  463.     appearance: none !important;
  464.     -moz-default-appearance: none !important;
  465.     display: flex !important;
  466.     height: var(--tab-min-height) !important;
  467.     min-height: var(--tab-min-height) !important;
  468.     max-height: var(--tab-min-height) !important;
  469.     width: 20px !important;
  470.     min-width: 20px !important;
  471.     padding: 0 !important;
  472.     margin: 0 !important;
  473.     flex-shrink: 0 !important;
  474.     color: var(--identity-icon-color) !important;
  475. }
  476.  
  477. #back-button .toolbarbutton-icon,
  478. #forward-button .toolbarbutton-icon,
  479. #reload-button .toolbarbutton-icon,
  480. #stop-button .toolbarbutton-icon {
  481.     width: 16px !important;
  482.     height: 16px !important;
  483.     margin: 0 !important;
  484.     padding: 0 !important;
  485.     -moz-context-properties: fill, fill-opacity;
  486.     fill: currentColor;
  487. }
  488.  
  489. /* hide the animatable box inside reload/stop so only the plain icon shows */
  490. #reload-button .toolbarbutton-animatable-box,
  491. #stop-button .toolbarbutton-animatable-box {
  492.     display: none !important;
  493. }
  494.  
  495. /* Hide everything in nav-bar except the customization target */
  496. #nav-bar > :not(#nav-bar-customization-target) {
  497.     display: none !important;
  498. }
  499.  
  500. /* Hide everything in customization target except buttons and urlbar */
  501. #nav-bar-customization-target > *:not(#back-button):not(#forward-button):not(#stop-reload-button):not(#urlbar-container) {
  502.     display: none !important;
  503. }
  504.  
  505. /* Constrain urlbar to fill the 400px slot */
  506. #urlbar-container {
  507.     flex: 1 1 auto !important;
  508.     min-width: 0 !important;
  509.     max-width: 100% !important;
  510.     width: auto !important;
  511.     --urlbar-container-min-width: 0 !important;
  512.     --urlbar-container-height: var(--tab-min-height) !important;
  513.     height: var(--tab-min-height) !important;
  514. }
  515.  
  516. #urlbar {
  517.     --urlbar-height: var(--tab-min-height) !important;
  518.     --urlbar-toolbar-height: var(--tab-min-height) !important;
  519.     min-height: var(--tab-min-height) !important;
  520.     max-height: var(--tab-min-height) !important;
  521. }
  522.  
  523. /* Fix content offset (no hidden navbar row to compensate for) */
  524. :root[sessionrestored]:not([chromehidden~="toolbar"]) > body > #browser {
  525.     margin-top: 0 !important;
  526. }
  527.  
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!