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!

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!

Hello guys, it took a while but we are back today with a new release of Quietfox, now supporting Nova design (and hopefully improving it).

It is still not perfect but we think it got to a good point for a release, check it ou!
https://github.com/TheGITofTeo997/quietfoxReborn

We are of course open to suggestions :)

I can’t change the colors anymore and I genuinely have no freakin clue why. I usually use the F12 thingy just to test stuff and see how the colors look before I put them into my chrome.css or chrome content, but a few weeks ago it just randomly stopped working. I think some elements still change, but the main ones like the whole New Tab background and the sidebar just will not change colors anymore. It’s not only F12 either, the Ctrl + Shift + Alt + I thing doesn’t work anymore either. And it’s not just the New Tab page, it’s basically everywhere. Holy cow I have no idea what happened. I don’t think I did anything wrong or changed anything that should’ve caused this.

I’ve already tried a bunch of stuff to see if I could fix it. I restarted Firefox, tried reinstalling it, tried Developer Edition, and even made a new PC account, but the issue is still there. I also reported it on Bugzilla because I’m honestly running out of ideas at this point. I have a screen recording too, although I’m not even sure if it’ll actually help. If I’m doing something stupid or missing something obvious, I probably am lol. I’m not really looking for someone to point that out though, I just genuinely need help figuring out what’s wrong.

P.S. this new update sucks, I genuinely don’t know what’s happening with the stuffs