Need some help with making changes to the scroll arrows for tabs (overflow).

The code I have below works when it is placed in the tabs.css stylesheet but doesn't do anything if I place it in my userchrome stylesheet.

    #tabbrowser-arrowscrollbox {
      &:not([scrolledtostart])::part(scrollbutton-up),
      &:not([scrolledtoend])::part(scrollbutton-down) {
        opacity: 0.75 !important;
      }
  
      &:not([scrolledtostart])::part(scrollbutton-up):hover,
      &:not([scrolledtoend])::part(scrollbutton-down):hover {
        opacity: 1 !important;
      }

      &:not([scrolledtostart])::part(scrollbutton-up):hover:active,
      &:not([scrolledtoend])::part(scrollbutton-down):hover:active {
        fill: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)) !important;
      }
    }

if i just colapse them there is a 1px border i want to basically either completely remove or hide them ouside the window border.

aka, if possible hide them outside the window border would be better, if i colapse them notifications enter in a quantum state and keep blicking without giving me a ability to accept or not them.

#sidebar-header,#titlebar,#nav-bar, #identity-box, #tabbrowser-tabs, #TabsToolbar {
    position: fixed;
    z-index: 0;
    top: -30px !important;
    left: 0 !important;
    width: 100vw !important;
    height: 0 !important;
}
#nav-bar, #identity-box, #tabbrowser-tabs, #TabsToolbar {
    visibility: collapse !important;
}
/* Ensure browser content fills the window */
/*
#browser {
    position: fixed;
    z-index: 0;
    top: 0 !important;
    left: 0 !important;
    width: 1280px !important;
    height: 720px !important;
}
*/

Hello. I need help in removing this 1px border. It just appeared after latest Firefox stable (132) update. I'm currently using edge-frfox theme with "Rounded Corners" tweak enabled.

https://preview.redd.it/tapdjsx6m5yd1.png?width=1812&format=png&auto=webp&s=11dc82ed835173322419f9401d776ea158d53917

https://preview.redd.it/geywizwol5yd1.png?width=1794&format=png&auto=webp&s=938ffb7c16cd059cafe15a5d7718dcf5c1a351df

I've been interested in figuring out whether I can replicate what I like about my Sideberry setup on Zen, but in Firefox proper, because it has Widevine. In Zen, I have both the Sideberry sidebar and the navbar on top setup to autohide with mouse hover. I have cobbled together the basic scripts from MrOtherGuy (hide_tabs_toolbar_v2.css, autohide_toolbox.css. and autohide_sidebar.css) with a couple additional tweaks.

In autohide sidebar, I tweaked sidebar width to 0px so it would fully hide. After those scripts, I cut the header off of Sideberry (because that part seems redundant and unnecessary) so it would look the way it does in the Zen version. And I brought the hamburger menu to the left, with some padding so it's not ALL the way left.

And in order to deal with the Window Control buttons disappearing, I just used addons from the mozilla store to fix that.

This is my code. (sorry for the cvs receipt, my question comes after)

/* Source file  made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This requires Firefox 133+ to work */

u/media (-moz-bool-pref: "sidebar.verticalTabs"){
  #sidebar-main{
    visibility: collapse;
  }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  #nav-bar > .titlebar-buttonbox-container{
    order: -1 !important;
    > .titlebar-buttonbox{
      flex-direction: row-reverse;
    }
  }
}
@media not (-moz-bool-pref: "sidebar.verticalTabs"){
  #TabsToolbar{
    visibility: collapse;
  }
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
    display: flex !important;
  }
  :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
    > .titlebar-buttonbox-container{
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      > .titlebar-spacer{
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      > .titlebar-spacer[type="post-tabs"]{
        display: flex !important;
      }
      @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
        (-moz-gtk-csd-reversed-placement),
        (-moz-platform: macos){
        > .titlebar-spacer[type="post-tabs"]{
          display: none !important;
        }
        > .titlebar-spacer[type="pre-tabs"]{
          display: flex !important;
        }
      }
    }
  }
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hide the whole toolbar area unless urlbar is focused or cursor is over the toolbar */
/* Dimensions on non-Win10 OS probably needs to be adjusted */

/* Compatibility options for hide_tabs_toolbar.css and tabs_on_bottom.css at the end of this file */

:root{
  --uc-autohide-toolbox-delay: 200ms; /* Wait 0.1s before hiding toolbars */
  --uc-toolbox-rotation: 82deg;  /* This may need to be lower on mac - like 75 or so */
}

:root[sizemode="maximized"]{
  --uc-toolbox-rotation: 88.5deg;
}

@media  (-moz-platform: windows){
  :root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog !important; }
}

:root[sizemode="fullscreen"],
:root[sizemode="fullscreen"] #navigator-toolbox{ margin-top: 0 !important; }

#navigator-toolbox{
  --browser-area-z-index-toolbox: 3;
  position: fixed !important;
  background-color: var(--lwt-accent-color,black) !important;
  transition: transform 82ms linear, opacity 82ms linear !important;
  transition-delay: var(--uc-autohide-toolbox-delay) !important;
  transform-origin: top;
  transform: rotateX(var(--uc-toolbox-rotation));
  opacity: 0;
  line-height: 0;
  z-index: 1;
  pointer-events: none;
}
:root[sessionrestored] #urlbar[popover]{
  --uc-urlbar-top: calc(var(--tab-min-height) + (var(--tab-block-margin) * 2) + ((var(--urlbar-container-height) - var(--urlbar-height)) / 2));
  top: var(--uc-urlbar-top) !important;
  pointer-events: none;
  opacity: 0;
  transition: transform 82ms linear var(--uc-autohide-toolbox-delay), opacity 0ms calc(var(--uc-autohide-toolbox-delay) + 82ms);
  transform-origin: 0px calc(0px - var(--tab-min-height) - var(--tab-block-margin) * 2);
  transform: rotateX(89.9deg);
}
#toolbar-menubar:not([inactive]) ~ #nav-bar #urlbar[popover]{
  top: calc(28px + var(--uc-urlbar-top)) !important;
}
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
  pointer-events: auto;
  opacity: 1;
  transition-delay: 33ms;
  transform: rotateX(0deg);
}
#mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
#navigator-toolbox:has(#urlbar:is([open],[focus-within])),
#navigator-toolbox:hover,
#navigator-toolbox:focus-within{
  transition-delay: 33ms !important;
  transform: rotateX(0);
  opacity: 1;
}

#navigator-toolbox > *{ line-height: normal; pointer-events: auto }

#navigator-toolbox,
#navigator-toolbox > *{
  width: 100vw;
  -moz-appearance: none !important;
}

/* These two exist for oneliner compatibility */
#nav-bar{ width: var(--uc-navigationbar-width,100vw) }
#TabsToolbar{ width: calc(100vw - var(--uc-navigationbar-width,0px)) }

/* Don't apply transform before window has been fully created */
:root:not([sessionrestored]) #navigator-toolbox{ transform:none !important }

:root[customizing] #navigator-toolbox{
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
}

#navigator-toolbox[inFullscreen] > #PersonalToolbar,
#PersonalToolbar[collapsed="true"]{ display: none }

/* Uncomment this if tabs toolbar is hidden with hide_tabs_toolbar.css */
 #titlebar{ margin-bottom: -9px }

/* Uncomment the following for compatibility with tabs_on_bottom.css - this isn't well tested though */
/*
#navigator-toolbox{ flex-direction: column; display: flex; }
#titlebar{ order: 2 }
*/



/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box{
  --uc-sidebar-width: 0px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar,3);
}
#sidebar-box[positionend]{ direction: rtl }
#sidebar-box[positionend] > *{ direction: ltr }

#sidebar-box[positionend]:-moz-locale-dir(rtl){ direction: ltr }
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{ direction: rtl }

#main-window[sizemode="fullscreen"] #sidebar-box{ --uc-sidebar-width: 1px; }

#sidebar-splitter{ display: none }

#sidebar-header{
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after{
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar{
  transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel{
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box{
  -moz-appearance: none !important;
  background-color: rgba(249,249,250,0.1) !important; 
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header{
  background-color: inherit !important;
  border-inline: 1px solid rgb(80,80,80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > *{
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel{
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label{
  margin-inline: 0px !important;
  border-left-style: solid !important; 
}

/*get rid of the top part of sideberry*/
#sidebar-header {
  display: none;
}

/*hamburger button to left, but not all the way left*/
#PanelUI-button {
    order: -1 !important;
    padding-left: 20px !important;
    padding-right: 0px !important;}https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_v2.css

The problem is that when the window is not maximized, the mouse changes to the resize tool at the edge of the window and interferes with the autohide scripts' mouse hover area. This kind of forces me to use key commands to maximize the window to get it working again.

Forgive me for I'm not much elevated in understanding from just a copy-paste monkey. Is there a line in these autohide scripts where I could just like buff the mouse hover zone with a few more pixels so it would be larger than the resize area and therefore work when the window is not maximized?

so i made my windows 10 look like vista and now want to make my firefox look like firefox 15.0

https://amanz.my/wp-content/uploads/2012/08/firefox15.jpg

I've been trying to use the recommended method for finding and removing elements from the context menu using the Browser Toolbox, but these two stubbornly stay around.

Thank you in advance for your time and help.

Inactive FF window titlebar dimming is back again and looks like this fix doesn't work anymore

#titlebar:-moz-window-inactive { opacity: 1 !important; }

What's the current solution?

I've been using Tabliss for a while and I switched to Bonjourr today and this icon has been bugging me

https://preview.redd.it/54ta5nse73yd1.png?width=1361&format=png&auto=webp&s=000976334db80fff138c2d7741a112d8355aec0c

so can anyone provide me the CSS snippet to remove the icon?

https://preview.redd.it/3dav6irho1yd1.png?width=1316&format=png&auto=webp&s=2b0b1acfb74c453da7a52c643a74490ae3c4ec21

currently it's at the right side, but I want that to move opposite, if possible, then farthest left side.

I tried some codes, but these not works

/* Reposition star button to the start */
#star-button-box {
  
-moz-box-ordinal-group
: 0 !important;
  order: -1 !important;
}

/* Adjust identity box (lock icon) order */
#identity-box {
  
-moz-box-ordinal-group
: 1 !important;
  order: 0 !important;
}

/* URL input container order */
#urlbar-input-container {
  
-moz-box-ordinal-group
: 2 !important;
  order: 1 !important;
}

this, is current.

#page-action-buttons {

display: flex !important;

flex-direction: row !important;

}

#star-button-box {

order: -1 !important;

margin-inline-start: 0 !important;

margin-inline-end: auto !important;

}

#urlbar-input-container {

display: flex !important;

flex-direction: row !important;

}

#page-action-buttons {

order: -1 !important; /* This moves the entire page-action-buttons container to the left */

margin-inline-start: 0 !important;

}

this is before try, star moved left, but the 'url-copy' button also moved together. I don't want it.

Is there any way to manually edit the right-click context menu to remove stuff? Because something like this:

https://i.imgur.com/TOA1Ghi.png

jfc, I don't even use half the things on this menu. Ideally I'd want to trim it down to this:

https://i.imgur.com/2uo3gKC.png

I tried googling a bit, but the only results I could find were stuff from 4-5 years ago or older.

https://preview.redd.it/okfvg3kngwxd1.jpg?width=556&format=pjpg&auto=webp&s=c9b619f623de1f597d16016dbe25a34f1d8ca9d1

In the new version of the Firefox browser (version 132.0), the icon for indicating and controlling the sound on the tab when media content is being played has been changed. Now this icon is in the form of a loudspeaker in a circle. Is it possible to return the old icon without the circle?

Temporary solution for titlebar buttons when using Mica

Since version 133, Firefox supports Mica, but there are issues with titlebar buttons. For example, when the browser window is maximized, the buttons lose their hover effect. I tried to solve these issues. Let me know if something doesn't work as expected. This code is for the standard 100% windows scaling.

Pastebin: userChrome.css

/* show titlebar buttonbox when mica is activated */
:root[tabsintitlebar] {
  @media (-moz-windows-mica) {
    &:not([lwtheme]) {
      @media not (-moz-windows-accent-color-in-titlebar) {
        & .titlebar-buttonbox {
          opacity: 1 !important;
        }
      }
    }
  }
}

/* set height to the buttonbox container */
.titlebar-buttonbox-container {
  height: 29px !important;
}

/* showing and hiding icons, not for private browsing mode */
#main-window:not([privatebrowsingmode="temporary"]) {
  .titlebar-close:not(:hover) > .toolbarbutton-icon {
    opacity: 0 !important;
  }

  .titlebar-max > .toolbarbutton-icon, 
  .titlebar-min > .toolbarbutton-icon, 
  .titlebar-restore > .toolbarbutton-icon {
    opacity: 0 !important;
  }
}

/* all padding and width fixes for 100% display scale */
:root[sizemode="normal"] .titlebar-close {
  padding: 7px 18px 9px 16px !important;
  width: 45px;
}

:root[sizemode="normal"] .titlebar-max {
  padding: 7px 18px 9px 16px !important;
}

:root[sizemode="maximized"] .titlebar-close {
  border-right: 2px solid transparent !important;
  background-clip: padding-box;
}

:root[sizemode="maximized"] .titlebar-close {
  padding: 7px 17px 9px !important;
}

:root[sizemode="maximized"] .titlebar-min {
  padding: 8px 17px 8px !important;
}

.titlebar-restore {
  padding: 7px 17px 9px !important;
}

/* optional: classic windows colors */
.titlebar-close:hover {
  background-color: #c42b1c !important;
  stroke: white !important;
}

I'm new to userChrome.css so all help is greatly appreciated. I want to create a keyboard shortcut which shows the address bar in the middle of the screen based on a keyboard shortcut and disappears after something has been searched. As well I want to prevents the address bar from being visible ?

After updating to 131 this is what was working.

.tabbrowser-tab {
    min-width: initial !important;
}
.tab-content {
    overflow: hidden !important;
}
.tabbrowser-tab:not([pinned]) {
  min-width: 0px !important;
}

:root {
  --inline-tab-padding: 0px !important;
  --uc-active-tab-width: 4px;
  --uc-inactive-tab-width: 4px;
}

.tabbrowser-tab[selected] {
  max-height: 36px !important;
  min-height: 36px !important;  
}   
tab:not([selected="true"]) {
  max-height: 36px !important;
  min-height: 36px !important;  
}

After updating to 132 this no longer sets my tab min-width to below 50px. Which is making my tabs overflow and forcing me to scroll through them.
Does anyone have a fix for this?

Hi guys, i want a setting that can auto hide the address bar and tab bar automatically when no focused after a few seconds. I already found two css configs but none of them works perfectly.

this one for example https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_tabstoolbar.css

works perfectly to hide the tab bar, and also have other css that can hide the address bar, but when used together i have some visual glitches. How can i config my css so when hovering at the top bring back address and tab bar, and after a few seconds it fades.

When the Browser Toolbox is open and visible, the Firefox window becomes inactive. Unfortunately, certain elements of Firefox's user interface only appear when the window is active. For example, when you start typing in the URL bar, a button with an arrow icon appears at the right edge of the URL bar. It's class is .urlbar-go-button. This button disappears the moment you make the Browser Toolbox visible. I'm aware of the "Disable Popup Auto-Hide" feature of the browser toolbox, but that only works for pop-up menus. Is there a way to keep the entire Firefox window active while using the Browser Toolbox?

https://preview.redd.it/9u45j4vuinxd1.jpg?width=769&format=pjpg&auto=webp&s=165502f40c94174d00afbadb75a8f04395588d7f

Firefox hides the tab close button when the tabs get below a certain size. Is there a way to prevent this? I want the tab close button to be always visible. I couldn't find a way to get this working.

Apparently the newest version of Firefox Nightly lets you acquire the system accent color using the following variable: var(--focus-outline-color). Previously it contained that strange blue accent color of Firefox.

https://preview.redd.it/nyrhji9myixd1.png?width=1097&format=png&auto=webp&s=17f9aba70dc562ca917a3824f1644b169b49d524

how to change font size
in specific website like
https://web.whatsapp.com/

https://preview.redd.it/hd774zp3ghxd1.jpg?width=827&format=pjpg&auto=webp&s=ce0365e17fc92a67a99a51e6ae44c2638408d38f

Im new to firefox css and wanted to customize my firefox to tabs at top and navbar/url+other section at bottom, also they auto hide unless mouse hover over at the edge of top and bottom sides. saw many pre made configs on github with different variations but cant seem to find exactly what i wanted.

and im not familiar with css and also dont want to build it from scratch by myself. so if u guys have any suggestion or code :)) greatly appreciated

I reallly like tab center reborn but seems hard to find setups with that addon

https://preview.redd.it/pi4dtoz4kexd1.png?width=1013&format=png&auto=webp&s=d0dc1b86997cfe2c342242e6346e6a575abe8835

Basically I want to make it 6 columns so I can have a clean 6x2 instead of forcing myself to have 4 extra slots for sites I barely use. I couldn't find anything from searching around for a while so I figured I'd ask here.