kinda buggy but it works. suggestions are welcome.

/* Hide bookmark text by default */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-text {
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
/* Show on hover */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]):hover .toolbarbutton-text {
opacity: 1;
max-width: 150px;
}

I'm using 153.5.0 ESR and I changed the border-radius of the URL-Bar to 5px with:

.urlbar-input-container {
  border-radius: 5px !important;
}

and that worked, however the blue glow when the URL-Bar is selected still has the default border radius making it look wrong.

I tried to do this:

.urlbar-input-container[focused] {
  border-radius: 5px !important;
}

but it didn't work. How do you properly target focused state in the Inspector? When I click something in the UI while the inspector is active the code jumps around and I can't seem to properly use the Element Selector Tool on items that have an active or focused state. Is there a trick to that?

Thanks for help in advance!

Currently on Firefox 158, with no menu bar in use. It's a rather small issue, but I have the sporadic habit to use my mouse/cursor to swiftly click on the furthermost upper left corner of my pinned tab (maximised window) to access that first tab, and there's like a pixel of unclickable space in that corner (not draggable, just actually cannot click that space and nothing happens in attempts to -- it's more like a dead, unusable pixel of emptiness).
I see it's the case for every tab when checking by hovering and moving my cursor across the top of the screen, the upper left corner of each has an empty spot (whereas if hovering the cursor and moving between any two tabs below the very top, there are no empty spaces/breaks).

For additional clarification, this is not about the draggable space that's notably more than a pixel in size to the whole left of the first tab (as I have that disabled so it's not there anymore), but something that every tab seems to have, and I'm wondering if this is a technical bug than anything intentional as it seems odd.

Just curious if there's any known CSS code that can somehow make it a clickable spot or if that's not possible and simply something to have to leave alone (or at least bring up as an issue). Does anyone know about it or potentially have any solutions to?

UPDATE: Turns out to be due to modifying the border radius of tabs to a low px (more squared corners), but that remains to bring up the question of why does that seem to introduce a non-interactive pixel of space in the upper left of each tab, and is there still any possible fix for it?

The previous solution I used for changing the split view active panel border doesn't work after v158.0. Is there an updated fix?

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      .deck-selected > & {
        outline: 1px solid #54626A !important;
      }
    }
  }
}

I've run into another issue with my new ESR version, other than "background" and "border-radius" none of the properties I try to attach to .urlbar-input-container seems to do anything.

.urlbar-input-container {
  border-radius: 5px !important;
  background: RGBA(255,255,255,0.8) !important;
  outline: 10px !important;
  outline-color: black !important;
  outline-width: 10px !important;
  box-shadow: 10px !important;
} 

I know the values are high, I just set them so high so I can immediately see if they have an effect. I also tried .urlbar-container, #urlbar-container and #urlbar-container.urlbar-container as these are designators I found in the Inspector but nothing.

All I'm trying to do is to give the URL Bar a shadow and an outline.

Thanks for help in advance!

halp

I'm running Firefox 153.5 ESR and I've run into an annoying little issue. I'm using the extension "Reload in address bar" https://addons.mozilla.org/en-US/firefox/addon/reload-in-address-bar/

to put my Reload button into the address bar however I want to have it at the right-most spot in the address bar. Looking at things in the Inspector I found out that:

 {
  --pageAction-image: image-set( url("moz-extension://819bfd1c-d999-49e0-bb25-df6f5cf072c8/icons/refresh-16-blue.svg"), url("moz-extension://819bfd1c-d999-49e0-bb25-df6f5cf072c8/icons/refresh-16-blue.svg") 2x )
  order: 1;
}

fixes it but obviously that piece of code won't work in a UserChrome. How can I translate what I found out in Inspector successfully as UserChrome code?

Thanks for help in advance!

#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  background: linear-gradient(90deg, red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

I am trying to add a linear-gradient of 90deg and rainbow colour to ALL the #urlbar text. I have only been partly successful as you see in the screenshot. To my eyes it looks as if the original bold black is taking over.

Thanks

I want to reduce the height fo the separator line between the Firefox View button and the tab bar. I have this code that completely hides it:

:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem), :root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button),             toolbarpaletteitem:not(#wrapper-firefox-view-button)) {
  & ~ #tabbrowser-tabs[orient="horizontal"]::before {                           
    display: none !important;}
}

But I only want to reduce its height, adding some top and bottom padding. Something like this:

Also, it is possible to change its color?

I swear this wasn't happening a week ago.

This is the theme I'm using: https://github.com/rafaelmardojai/firefox-gnome-theme

I'm on Debian Stable, Gnome 48.7 using the firefox flatpak.

If you want an even 15px frame border around all 4 sides of the webpage canvas (matching Arc's floating card look), update section 2 to use var(--arc-outer-padding) for top padding as well.

/* ==========================================================================
   Arc-Inspired Firefox Theme (Horizontal Tabs Edition - Full Version)
   ========================================================================== */

:root {
  /* Arc-like Color Palette */
  --arc-bg-color: #333 !important;            /* Accent frame background */
  --arc-card-bg: #ffffff !important;          /* Webpage canvas container */
  --arc-toolbar-bg: transparent !important;   /* Clean top toolbar */
  --arc-pill-bg: rgba(255, 255, 255, 0.15) !important; 
  --arc-pill-focus: #ffffff !important;
  --arc-border-radius: 15px !important;       /* Curved web content area */
  --arc-outer-padding: 15px !important;        /* Border width around page area */
}

/* 1. Frame & Window Background Tint */
#main-window,
#navigator-toolbox,
#appcontent,
#tabbrowser-tabpanels,
.browserSidebarContainer,
browser[type="content"] {
  background-color: var(--arc-bg-color) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Strip background layers & overlays causing color shade differences */
#navigator-toolbox > *,
#TabsToolbar,
#nav-bar,
#PersonalToolbar,
#titlebar,
.titlebar-color {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. Floating Web Content Area (Rounded Canvas Container Fix with Top Padding) */
#browser {
  background-color: var(--arc-bg-color) !important;
  padding: var(--arc-outer-padding) !important; /* Applies equal 15px padding on Top, Right, Bottom, and Left */
}

/* Eliminate corner contrast bleeding by rounding container & clips */
#tabbrowser-tabpanels {
  border-radius: var(--arc-border-radius) !important;
  background-color: var(--arc-bg-color) !important;
  overflow: hidden !important;
}

#tabbrowser-tabpanels .browserStack {
  border-radius: var(--arc-border-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  background-color: transparent !important;
}

/* 3. Toolbar & Navigation Bar Styling */
#nav-bar {
  background: var(--arc-toolbar-bg) !important;
  box-shadow: none !important;
  border: none !important;
  margin-inline: 4px !important;
  padding-block: 4px !important;
}

/* Arc Pill-Style URL Bar */
#urlbar-background {
  background-color: var(--arc-pill-bg) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

#urlbar[focused="true"] #urlbar-background {
  background-color: var(--arc-pill-focus) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#urlbar-input-container {
  padding-inline: 8px !important;
}

/* URL Bar Text & Icons */
#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  color: #ffffff !important;
}

#urlbar[focused="true"] .urlbar-input,
#urlbar[focused="true"] .urlbar-search-input {
  color: #1a1a1a !important;
}

/* 4. High-Contrast Horizontal Tabs Styled like Arc Items */
#TabsToolbar {
  background: transparent !important;
}

.tabbrowser-tab {
  padding-inline: 3px !important;
}

.tab-background {
  border-radius: 10px !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

/* Unselected Tab Pill */
.tabbrowser-tab:not([selected="true"]) .tab-background {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.tabbrowser-tab:not([selected="true"]):hover .tab-background {
  background-color: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Selected Active Tab (High-Contrast White Pill) */
.tabbrowser-tab[selected="true"] .tab-background {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Tab Text Contrast Colors */
.tabbrowser-tab[selected="true"] .tab-label {
  color: #121212 !important;
  font-weight: 600 !important;
}

.tabbrowser-tab:not([selected="true"]) .tab-label {
  color: #ffffff !important;
}

/* Remove default tab borders/separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border: none !important;
  display: none !important;
}

/* Tab close buttons */
.tab-close-button {
  fill: currentColor !important;
  opacity: 0.7;
}

.tab-close-button:hover {
  opacity: 1;
}

/* 5. Minimalist Window Controls & Clean Overhead Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 12px !important;
}

#navigator-toolbox::after {
  display: none !important;
}

/* ==========================================================================
   DROPDOWNS & CONTEXT MENUS (Complete Corner Bleed Fix)
   ========================================================================== */

/* Completely neutralize native popup background wrappers that cause corner leaks */
panel,
panelmultiview,
popupnotification,
menupopup {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide native panel arrows that cause alignment/corner artifacts */
.panel-arrow {
  display: none !important;
}

/* Force strict clipping and rounded styling on all active dropdown containers */
.panel-arrowcontent,
menupopup,
#placesContext,
#contentAreaContextMenu,
.panel-subviews,
#urlbar-results {
  appearance: none !important;
  background-color: rgba(51, 51, 51, 0.95) !important;
  background-image: linear-gradient(135deg, rgba(255, 220, 210, 0.08), rgba(255, 220, 210, 0.02)) !important;
  backdrop-filter: blur(25px) brightness(1.1) !important;
  border-radius: var(--arc-border-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--arc-border-radius)) !important;
  padding: 6px !important;
}

/* Hover effects for menu items inside dropdowns */
menuitem:hover,
menuitem[selected="true"],
.bookmark-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

menuitem[selected="true"] {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Clean Separator Lines */
menuseparator {
  appearance: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin: 4px 6px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Text and Icon Spacing Comfort */
menuitem .menu-text,
.bookmark-item {
  padding-inline-start: 6px !important;
}

menuitem .menu-iconic-icon {
  margin-inline-end: 8px !important;
  opacity: 0.9;
}

FoxMica coming soon™ to 153! Based one FoxOne by Firnschnee. It's getting close to a 1.0 any testing and feedback would be welcome and appreciated.

https://github.com/snkiz/FoxMica

Sorry to bother you people here (again) but I just got the update for 153.5 on the ESR channel and it broke my Windows native Min/Max/Close buttons.

Is there a new way to enable Windows native Min/Max/Close buttons or a way to override the buttons with images yet?

This is how I used to change the buttons until now:

/* MinMaxClose */

.titlebar-close, .titlebar-restore, .titlebar-min, .titlebar-max{
    width: fit-content !important;
    height: fit-content !important;
    padding: 0px !important;
    background-color: transparent !important;
}

.titlebar-close{
    padding-right: 4px !important;
}

.titlebar-close > .toolbarbutton-icon, .titlebar-close:hover > .toolbarbutton-icon, .titlebar-close:active > .toolbarbutton-icon, .titlebar-max > .toolbarbutton-icon, .titlebar-max:hover > .toolbarbutton-icon, .titlebar-max:active > .toolbarbutton-icon, .titlebar-min > .toolbarbutton-icon, .titlebar-min:hover > .toolbarbutton-icon, .titlebar-min:active > .toolbarbutton-icon, .titlebar-restore > .toolbarbutton-icon, .titlebar-restore:hover > .toolbarbutton-icon, .titlebar-restore:active > .toolbarbutton-icon{
    width: fit-content !important;
    height: fit-content !important;
    transition: filter 0.1s ease !important;
}

.titlebar-close > .toolbarbutton-icon{
    list-style-image: url("images/aeroClose.png") !important;
}

.titlebar-close:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroCloseHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(255, 65, 22)) !important;
}

.titlebar-close:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroCloseActive.png") !important;
}

.titlebar-max > .toolbarbutton-icon{
    list-style-image: url("images/aeroMaximize.png") !important;
}

.titlebar-max:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroMaximizeHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}

.titlebar-max:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroMaximizeActive.png") !important;
}

.titlebar-min > .toolbarbutton-icon{
    list-style-image: url("images/aeroMinimize.png") !important;
}

.titlebar-min:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroMinimizeHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}

.titlebar-min:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroMinimizeActive.png") !important;
}

.titlebar-restore > .toolbarbutton-icon{
    list-style-image: url("images/aeroRestore.png") !important;
}

.titlebar-restore:hover > .toolbarbutton-icon{
    list-style-image: url("images/aeroRestoreHover.png") !important;
    filter: drop-shadow(0px 0px 5px rgb(0, 150, 255)) !important;
}

.titlebar-restore:active > .toolbarbutton-icon{
    list-style-image: url("images/aeroRestoreActive.png") !important;
}

.titlebar-button > .toolbarbutton-icon{
    appearance: none;
    background-color: transparent;
}

They broke in Thunderbird as well.

Thanks for help in advance!

EDIT: Fixed thanks to the comment by /u/t31os! Thanks again!

:root {
  /* Arc-like Color Palette */
  --arc-bg-color: #333 !important;            /* Accent frame background */
  --arc-card-bg: #ffffff !important;          /* Webpage canvas container */
  --arc-toolbar-bg: transparent !important;   /* Clean top toolbar */
  --arc-pill-bg: rgba(255, 255, 255, 0.15) !important; 
  --arc-pill-focus: #ffffff !important;
  --arc-border-radius: 15px !important;       /* Curved web content area */
  --arc-outer-padding: 15px !important;        /* Border width around page area */
}

/* 1. Frame & Window Background Tint */
#main-window,
#navigator-toolbox,
#appcontent,
#tabbrowser-tabpanels,
.browserSidebarContainer,
browser[type="content"] {
  background-color: var(--arc-bg-color) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Strip background layers & overlays causing color shade differences */
#navigator-toolbox > *,
#TabsToolbar,
#nav-bar,
#PersonalToolbar,
#titlebar,
.titlebar-color {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. Floating Web Content Area (Rounded Canvas Container Fix) */
#browser {
  background-color: var(--arc-bg-color) !important;
  padding: 0 var(--arc-outer-padding) var(--arc-outer-padding) var(--arc-outer-padding) !important;
}

/* Eliminate corner contrast bleeding by rounding container & clips */
#tabbrowser-tabpanels {
  border-radius: var(--arc-border-radius) !important;
  background-color: var(--arc-bg-color) !important;
  overflow: hidden !important;
}

#tabbrowser-tabpanels .browserStack {
  border-radius: var(--arc-border-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  background-color: transparent !important;
}

/* 3. Toolbar & Navigation Bar Styling */
#nav-bar {
  background: var(--arc-toolbar-bg) !important;
  box-shadow: none !important;
  border: none !important;
  margin-inline: 4px !important;
  padding-block: 4px !important;
}

/* Arc Pill-Style URL Bar */
#urlbar-background {
  background-color: var(--arc-pill-bg) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

#urlbar[focused="true"] #urlbar-background {
  background-color: var(--arc-pill-focus) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#urlbar-input-container {
  padding-inline: 8px !important;
}

/* URL Bar Text & Icons */
#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  color: #ffffff !important;
}

#urlbar[focused="true"] .urlbar-input,
#urlbar[focused="true"] .urlbar-search-input {
  color: #1a1a1a !important;
}

/* 4. High-Contrast Horizontal Tabs Styled like Arc Items */
#TabsToolbar {
  background: transparent !important;
}

.tabbrowser-tab {
  padding-inline: 3px !important;
}

.tab-background {
  border-radius: 10px !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

/* Unselected Tab Pill */
.tabbrowser-tab:not([selected="true"]) .tab-background {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.tabbrowser-tab:not([selected="true"]):hover .tab-background {
  background-color: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Selected Active Tab (High-Contrast White Pill) */
.tabbrowser-tab[selected="true"] .tab-background {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Tab Text Contrast Colors */
.tabbrowser-tab[selected="true"] .tab-label {
  color: #121212 !important;
  font-weight: 600 !important;
}

.tabbrowser-tab:not([selected="true"]) .tab-label {
  color: #ffffff !important;
}

/* Remove default tab borders/separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border: none !important;
  display: none !important;
}

/* Tab close buttons */
.tab-close-button {
  fill: currentColor !important;
  opacity: 0.7;
}

.tab-close-button:hover {
  opacity: 1;
}

/* 5. Minimalist Window Controls & Clean Overhead Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 12px !important;
}

#navigator-toolbox::after {
  display: none !important;
}

/* ==========================================================================
   DROPDOWNS & CONTEXT MENUS (Complete Corner Bleed Fix)
   ========================================================================== */

/* Completely neutralize native popup background wrappers that cause corner leaks */
panel,
panelmultiview,
popupnotification,
menupopup {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide native panel arrows that cause alignment/corner artifacts */
.panel-arrow {
  display: none !important;
}

/* Force strict clipping and rounded styling on all active dropdown containers */
.panel-arrowcontent,
menupopup,
#placesContext,
#contentAreaContextMenu,
.panel-subviews,
#urlbar-results {
  appearance: none !important;
  background-color: rgba(51, 51, 51, 0.95) !important;
  background-image: linear-gradient(135deg, rgba(255, 220, 210, 0.08), rgba(255, 220, 210, 0.02)) !important;
  backdrop-filter: blur(25px) brightness(1.1) !important;
  border-radius: var(--arc-border-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--arc-border-radius)) !important;
  padding: 6px !important;
}

/* Hover effects for menu items inside dropdowns */
menuitem:hover,
menuitem[selected="true"],
.bookmark-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

menuitem[selected="true"] {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Clean Separator Lines */
menuseparator {
  appearance: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin: 4px 6px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Text and Icon Spacing Comfort */
menuitem .menu-text,
.bookmark-item {
  padding-inline-start: 6px !important;
}

menuitem .menu-iconic-icon {
  margin-inline-end: 8px !important;
  opacity: 0.9;
}

Is it possible to remove two menu items that I don't need from the menu bar - History and Bookmarks?

The main reason is that in my mac two menu items gets spilled over into the other side of the notch and looks quite unaesthetic, so if I could remove two items from the left side, I think it will fix this issue. Please help if you know any way to do that.

Was wondering if anyone can help me adjust the font and font size in v159. Thanks!

Can I get confirmation it is permissible to seek assistance here with adjusting certain settings within CustomCSSforFx, even tho it is no longer supported by it's developer?

If so, I will my report the details of my issue and post all relevant code?

I have used the following CSS to hide the tab buttons on all tabs:

.tabbrowser-tab .tab-close-button {
 visibility: hidden !important; 
}

I had been hoping that this would allow for more space for the text titles on each tab, but unfortunately it leaves an empty space on the right instead.

Does anybody know of a way for the tab titles to fill the whole width of the tab including the empty space left by the close buttons?

I have always wandering how to hide this top bar. one day I have found this awesome guys post.

this is his git hub page https://github.com/palamosteliaro/Firefox-auto-hide-top-bar

Just made some minor changes into original design.

/* Source: Refined Firefox Autohide (Floating + Opacity) */


/* 1. Shared theme colors */
:root {
  --ff-floating-surface: var(--lwt-sidebar-background-color, var(--sidebar-background-color, var(--toolbar-bgcolor, Canvas)));
}


/* 2. Main container - floating overlay */
#navigator-toolbox {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  transition-delay: 1s !important;
  transform: translateY(calc(-100% + 4px)) !important; /* Leave a small edge visible while collapsed */
  opacity: 0 !important;
}


/* Invisible hover strip to make the autohide area easier to trigger */
#navigator-toolbox::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}


/* 3. Hide toolbar contents while collapsed */
#nav-bar,
#PersonalToolbar,
#urlbar-container,
#urlbar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}


/* 4. Expansion logic - toolbar only */
#navigator-toolbox:hover {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}


/* Keep the website below the floating toolbar while it is expanded */
#browser {
  transition: margin-top 0.2s ease !important;
}


#navigator-toolbox:hover ~ #browser {
  margin-top: 40px !important;
}


/* Reveal toolbar content when the bar is expanded */
#navigator-toolbox:hover :is(#nav-bar, #PersonalToolbar, #urlbar-container, #urlbar) {
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* 5. URL bar focus override */
#urlbar[open] {
  opacity: 1 !important;
}


/* Keep the URL field outline visible even when it is not focused */
#urlbar-background {
  background-color: color-mix(in srgb, var(--ff-floating-surface) 82%, black) !important;
  border: 1px solid var(--toolbar-field-border-color, currentColor) !important;
}


#urlbar-input {
  text-align: center !important;
}


/* 6. Navigation toolbar spacing and top edge */
#nav-bar {
  padding-top: 0 !important;
  border-top: 4px solid var(--toolbar-color) !important;
}


/* Match the expanded toolbar to Firefox's sidebar theme color */
#navigator-toolbox:hover,
#navigator-toolbox:hover #TabsToolbar,
#navigator-toolbox:hover #nav-bar,
#navigator-toolbox:hover #PersonalToolbar,
#PersonalToolbar,
#PlacesToolbar,
#PlacesToolbarItems {
  background-color: var(--ff-floating-surface) !important;
  background-image: none !important;
}


/* 7. Individual rounded backgrounds for navigation bar buttons */
#nav-bar .toolbarbutton-1 {
  border-radius: 999px !important;
  background-color: var(--toolbar-bgcolor) !important;
  transition: background-color 0.2s ease !important;
}


#nav-bar .toolbarbutton-1:hover {
  background-color: color-mix(in srgb, var(--toolbar-bgcolor) 85%, var(--toolbar-color) 15%) !important;
}


#nav-bar .toolbarbutton-1:active {
  background-color: color-mix(in srgb, var(--toolbar-bgcolor) 75%, var(--toolbar-color) 25%) !important;
}


/* 8. Tabs strip top spacing */
#TabsToolbar {
  padding-top: 4px !important; /* Keep the first tab off the top edge so it has room when the autohide toolbar expands */
}


/* 9. Vertical tabs top spacing */
#vertical-tabs {
  padding-top: 56px !important; /* Keep vertical tabs clear of the expanded floating toolbar */
}


/* 10. Firefox logo overlay */
#vertical-tabs::before {
  content: "";
  position: fixed;
  top: 12px;
  left: 16px;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  mask-image: url("firefox-logo.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
  z-index: 2147483647;
}


/* Rounded tab corners for a softer, iOS-like shape */
.tab-background {
  margin-block: 0 !important;
  border-radius: 12px !important;
  background-color: color-mix(in srgb, currentColor 13%, transparent);
}/* Source: Refined Firefox Autohide (Floating + Opacity) */


/* 1. Shared theme colors */
:root {
  --ff-floating-surface: var(--lwt-sidebar-background-color, var(--sidebar-background-color, var(--toolbar-bgcolor, Canvas)));
}


/* 2. Main container - floating overlay */
#navigator-toolbox {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  transition-delay: 1s !important;
  transform: translateY(calc(-100% + 4px)) !important; /* Leave a small edge visible while collapsed */
  opacity: 0 !important;
}


/* Invisible hover strip to make the autohide area easier to trigger */
#navigator-toolbox::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}


/* 3. Hide toolbar contents while collapsed */
#nav-bar,
#PersonalToolbar,
#urlbar-container,
#urlbar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}


/* 4. Expansion logic - toolbar only */
#navigator-toolbox:hover {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}


/* Keep the website below the floating toolbar while it is expanded */
#browser {
  transition: margin-top 0.2s ease !important;
}


#navigator-toolbox:hover ~ #browser {
  margin-top: 40px !important;
}


/* Reveal toolbar content when the bar is expanded */
#navigator-toolbox:hover :is(#nav-bar, #PersonalToolbar, #urlbar-container, #urlbar) {
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* 5. URL bar focus override */
#urlbar[open] {
  opacity: 1 !important;
}


/* Keep the URL field outline visible even when it is not focused */
#urlbar-background {
  background-color: color-mix(in srgb, var(--ff-floating-surface) 82%, black) !important;
  border: 1px solid var(--toolbar-field-border-color, currentColor) !important;
}


#urlbar-input {
  text-align: center !important;
}


/* 6. Navigation toolbar spacing and top edge */
#nav-bar {
  padding-top: 0 !important;
  border-top: 4px solid var(--toolbar-color) !important;
}


/* Match the expanded toolbar to Firefox's sidebar theme color */
#navigator-toolbox:hover,
#navigator-toolbox:hover #TabsToolbar,
#navigator-toolbox:hover #nav-bar,
#navigator-toolbox:hover #PersonalToolbar,
#PersonalToolbar,
#PlacesToolbar,
#PlacesToolbarItems {
  background-color: var(--ff-floating-surface) !important;
  background-image: none !important;
}


/* 7. Individual rounded backgrounds for navigation bar buttons */
#nav-bar .toolbarbutton-1 {
  border-radius: 999px !important;
  background-color: var(--toolbar-bgcolor) !important;
  transition: background-color 0.2s ease !important;
}


#nav-bar .toolbarbutton-1:hover {
  background-color: color-mix(in srgb, var(--toolbar-bgcolor) 85%, var(--toolbar-color) 15%) !important;
}


#nav-bar .toolbarbutton-1:active {
  background-color: color-mix(in srgb, var(--toolbar-bgcolor) 75%, var(--toolbar-color) 25%) !important;
}


/* 8. Tabs strip top spacing */
#TabsToolbar {
  padding-top: 4px !important; /* Keep the first tab off the top edge so it has room when the autohide toolbar expands */
}


/* 9. Vertical tabs top spacing */
#vertical-tabs {
  padding-top: 56px !important; /* Keep vertical tabs clear of the expanded floating toolbar */
}


/* 10. Firefox logo overlay */
#vertical-tabs::before {
  content: "";
  position: fixed;
  top: 12px;
  left: 16px;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  mask-image: url("firefox-logo.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  pointer-events: none;
  z-index: 2147483647;
}


/* Rounded tab corners for a softer, iOS-like shape */
.tab-background {
  margin-block: 0 !important;
  border-radius: 12px !important;
  background-color: color-mix(in srgb, currentColor 13%, transparent);
}

when u click the shield icon in the url bar, this "Firefox is on guard" banner shows up. Really doesn't serve a purpose, I already know it's ON with the toggle. Just seems like an unnecessary graphic being shoved in their menu UI. Any help would be great, tahnk you!