Firefox Customs

Hi there. I'm using both of @MrOtherGuy's vertical tabs css and multi-row tabs below content css (I use a about:config user preference to switch between them).

The issue with each of them is that when a different tab is selected which is not currently visible (this can happen in many ways, such as doing a tab search, or jumping to top or bottom of tab list), the tab bar (either horizontal or vertical) does not scroll to bring the newly selected tab into view.

Is there a way to accomplish this with css? Like is there maybe some css method to detect how many tabs are currently visible in the tab bar, or whether the active tab is outside the visible area?

Hi,

Been using iconized menubar since ages, and it never broke.

I'm wondering if FF update broke it or if it is only me having issues with it due to a slight add on the code? (just added an icon for the entry that appears on google meet and other videocall website)

Hi, By default, I set the tab-close-button always visible, to use it like a tab-separator, but I would like to remove the tab-close-button when the tab gets smaller than some specific size. For example, in the image I attached, I would like to remove the close button but when the tab gets a little bigger the close button should appear. I used this code to make the tabs smaller that default:

.tabbrowser-tab {
      &:not([pinned]) {
        #tabbrowser-tabs[orient="horizontal"] &[fadein] {
          --tab-min-width-pref: calc(16px + 2 * 10px + 2px) !important; !important;
          --tab-min-width: var(--tab-min-width-pref) !important;
        }
      }
    }

So, It is possible to remove the close button when the tab size is smaller than 50px or something like that?

On the normal horizontal tabs, there is a horizontal coloured line across the top of the tab and across the bottom of the tab, one to indicate the active tab, and one to indicate the container.

With MrOtherGuy's vertical tabs, how can one make those coloured lines/bars be vertical, one on one side of the tab, and one on the other side of the tab?

To get an idea of what this is, see the screenshots for this extension: https://addons.mozilla.org/en-US/firefox/addon/tabcenter-reborn/ .

On the Firefox ESR channel, so don't yet have the native vertical tabs available, but am testing with MrOtherGuy's vertical tabs css, which work very well. In fact, there is a distinct advantage, in that using the vertical tabs css doesn't make use of the sidebar; therefore one can have vertical tabs on one side of the screen, and the sidebar on the other side.

Now I've found that I can make the css vertical tabs expand on mouse-over, buy adding this to the css: :root:not([customizing]) #tabbrowser-tabs:hover{ width: 220px !important; } (elsewhere I've set the width much smaller, so when hover, it expands to this width). I know that I could also add similar code to make the page content shrink by the same amount (pushing the page content over to accommodate the expanded tabs), but my objective is to have the expanded tabs be in front of the page content. The problem is that the tabs are expanding behind the page content. Can someone show me how to have the tabs expand in front of the page content?

Bonus points for one additional trick: I would like the tabs to not expand when the mouse pointer is on the tabs scroll-bar, only when the pointer is on the tabs.

Hello!

I'm using a custom script made by MrOtherGuy that serves to hide the whole toolbox. The code is this: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_toolbox.css

/* 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.
 */

: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;
}

u/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;
  width: 100vw;
}
:root[sessionrestored] #urlbar[popover]{
  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);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox #urlbar[popover],
#navigator-toolbox:is(:hover,:focus-within,[movingtab]) #urlbar[popover],
#urlbar-container > #urlbar[popover]:is([focused],[open]){
  pointer-events: auto;
  opacity: 1;
  transition-delay: 33ms;
  transform: rotateX(0deg);
}
#mainPopupSet:has(> [panelopen]:not(#ask-chat-shortcuts,#selection-shortcut-action-panel,#chat-shortcuts-options-panel,#tab-preview-panel)) ~ toolbox,
#navigator-toolbox:has(#urlbar:is([open],[focus-within])),
#navigator-toolbox:is(:hover,:focus-within,[movingtab]){
  transition-delay: 33ms !important;
  transform: rotateX(0);
  opacity: 1;
}
/* This makes things like OS menubar/taskbar show the toolbox when hovered in maximized windows.
 * Unfortunately it also means that other OS native surfaces (such as context menu on macos)
 * and other always-on-top applications will trigger toolbox to show up. */
u/media (-moz-bool-pref: "userchrome.autohide-toolbox.unhide-by-native-ui.enabled"),
       -moz-pref("userchrome.autohide-toolbox.unhide-by-native-ui.enabled"){
  :root[sizemode="maximized"]:not(:hover){
    #navigator-toolbox:not(:-moz-window-inactive),
    #urlbar[popover]:not(:-moz-window-inactive){
      transition-delay: 33ms !important;
      transform: rotateX(0);
      opacity: 1;
    }
  }
}

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

/* 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 }

/* This is a bit hacky fix for an issue that will make urlbar zero pixels tall after you enter customize mode */
#urlbar[breakout][breakout-extend] > .urlbar-input-container{
  padding-block: calc(min(4px,(var(--urlbar-container-height) - var(--urlbar-height)) / 2) + var(--urlbar-container-padding)) !important;
}

/* 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 }
*/

It works great but what I'd like to do is to make it so that when I click a tab and drag it to change its place in the tabbar nothing disappears, this is because when I click and drag a tab the toolbox disappears and the tab goes to a new windows when I let go of it.

Thanks a lot!

I am in Firefox-developer-edition and this code: autohide_tabstoolbar_v2.css don't work properly when sidebar is on right side. Could you please verify it?

Using Firefox-Developer-Edition Hi, I would like to know how to apply this code only when sidebar is expanded:

.tools-and-extensions[orientation="vertical"] {
    flex-direction: row !important;
}

I tried to use this before the previous code but didn't work: :root:has(sidebar-main[expanded])

I didn't be able to apply any style conditioning the sidebar expanded or not for any button inside .tools-and-extension, in the original code it seems to use :host but that didn't work, apparently.

Hi. Using mrotherguy's fake_status_bar_w_bookmarksbar.css (together with multi-row_tabs_below_content.css) on Firefox ESR.

Just upgraded Firefox from 115 to 128, and also updated the multi-row tabs css. The fake_statusbar css has not been changed on mrotherguy's github repository.

Just one new issue: when loading or updating a tab, the progress information appears in the status bar as it should, but it is now also appearing at the lower left of the page content (where it would normally appear without the fake status bar). How can that be eliminated?

Until recently the inspector had a background colour #dbc3a3 (tan) and a text colour #000080 (dark blue) as well as a font size of 17px. Those changes resulted from code for chrome documents as set out below. The colours and font size have reverted to the defaults as shown in the snapshot.

How do I need to change the code?

https://imgur.com/a/Vfnkopv

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){
  :root {
      --in-content-page-color: #000080 !important;
      --in-content-text-color: #000080 !important;
      --in-content-page-background: #dbc3a3 !important;
      --in-content-box-background: #e2cfb6 !important;
      --in-content-deemphasized-text: var(--in-content-text-color) !important;
      scrollbar-color: #6495ed #d9d9d9 !important; 
      --background-color-box: var(--in-content-page-background) !important;
      --text-color: var(--in-content-text-color) !important;      
      color:var(--in-content-text-color) !important;
      --background-color-canvas: var(--in-content-page-background) !important;
      --table-row-background-color-alternate: var(--in-content-box-background) !important;    

  menulist > menupopup{ background-color: var(--in-content-page-background) !important; }}}
  
  @-moz-document url-prefix("chrome:") {
  html, body, tr { background-color: #dbc3a3 !important;
    color: #000080 !important;
    font-size: 17px !important; }
  div { background-color: #dbc3a3 !important;
    color: #000080 !important;
    font-size: 17px !important; }
  tr:hover { background-color: #b3d1ff !important; }
  tr.odd:hover { background-color: #b3d1ff !important; }
}

I am not sure how much of the last stanza applied to the inspector.

I would like to apply the next code only when using X11:

/* Remove unwanted margin of menupopup just in linux */
    
    @media (-moz-platform: linux) {
        #appMenu-popup {
            --panel-shadow-margin: 0px !important;
            --panel-padding-block: 0px !important;
        }
    }

this code when using Wayland makes the popup unaligned.

Hi, I want to change the extensions icons of sidebar-revamp but the image is in the html and I can't get it to work.

hi, in Firefox v.136 the sound button seems totally reworked and I can't get a right way to style that button, or maybe my knowledge is insignificant. I tried this way but works only for English language, I guess I should add an entry for each language ans that seems inefficient:

button[aria-label="Mute tab"] .button-background {
        /* my code */
}

In the firefox code they use ::part(button) and that don't works in userChrome.css:

.tab-audio-button {
  #tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
    &[soundplaying]::part(button) {
   }
  }
}

There is a way to solve this or it is impossible?

At some point recently, the background colour of about:config started changing to white when my search reaches the third letter. Below is the code in userContent.css. What do I need to add?

@-moz-document url-prefix("about:"), url-prefix("chrome://"), url-prefix("resource://"){ :root { --in-content-page-color: #000080 !important; --in-content-text-color: #000080 !important; --in-content-page-background: #dbc3a3 !important; --in-content-box-background: #e2cfb6 !important; --in-content-deemphasized-text: var(--in-content-text-color) !important; scrollbar-color: #6495ed #d9d9d9 !important; --background-color-box: var(--in-content-page-background) !important; --text-color: var(--in-content-text-color) !important; color:var(--in-content-text-color) !important; }

Hello!

I'd like to add a border to the Picture-in-Picture window; so I've added the following code to my userChrome.css file:

html[windowtype="Toolkit:PictureInPicture"] { border: 2px solid red !important; }

But the border doesn't appear at the bottom; only on the left/top/right sides. How could I fix this?

If I set the border to more than 2px, then I can see it; but if I hover over the PiP window, the shadow of the control buttons cover the borders; is there also a way to change that shadow (without removing it) so that it doesn't cover the borders?

Thank you very much for any help!

Hi, I want to solve this behavior when scrolling in 'about:addons' page. I put a background-image in body using 'userChrome.css' and in 'userContent.css' I set transparency in some elements backgrounds, but when I scroll the #main element goes behind .sticky-container element, so here is my question: Can I make the #main and .sticky-container elements don't cross, I tried to set a margin, clip-path, etc but I couldn't make any progress to solve it.

hi, seem like Firefox removed [tabsintitlebar], I wonder if deleting it is the right way to solve it or that condition was replaced with another and its needed to put that one?
I'm using hide_tabs_toolbar_v2.css

Hello, I wanted to know how can I change the border that appears when dragging an item in about:preferences in the search section. In this part specifically:

Hope someone can help me, thanks!

In relation to my previous posts, I am trying to make the bookmark bar show when hovering over the urlbar only instead of the whole nav bar. However replacing the suited elements with #urlbar:hover does not work. What can I do to achieve this?

In relation to my previous post, I tried to apply borders to the cropped to content bookmark bar with

#PlacesToolbarItems{
    border: 1px solid black;
    border-top: none;
}

But the border is spanning the whole window. How can I limit it to bookmark bar length as well?

I'm using this to auto hide bookmark bar, and this to get the items centered.

#PlacesToolbarItems {
    justify-content: center;
}

However the length of the bookmark bar spans whole window. Is it possible to crop it only till content? Also is it possible to do a blur on this hiding bar?

hi, with the recent Firefox changes I wonder if this style navbar_tabs_oneliner_menu_buttons_on_right.css could be more simple or still will be necessary the other style of window controls window_control_placeholder_support.css

Not a user of 'autohide_sidebar.css'... however, on testing (new profile of Fx132.0.2 on Win10), it appears that the behaviour of the userstyle has changed after a recent Firefox update and/or a recent Commit? Was this change intended or accidental?

IIRC the userstyle's previous behaviour, when the sidebar opened on hover, was that the page Content window was resized smaller to accommodate the presence of the expanded sidebar? Thus no page content was obscured.

Using the current version of 'autohide_sidebar.css' the open sidebar now overlays and obscures part of the page Content window.

See recent r/FirefoxCSS topic 'Sideberry Autohide Doesn't Work'.

I'm using this autohide sidebar css for sidebar to autohide unless mouse hover. But dragging tabs on sidebery causing the sidebar to collapse. This issue was fixed few months ago, but it's back again. Is there anything I can change in the css to make it work? I'm using firefox 132.0.2 on linux.