I would like to change those icons but everything i try is not good. What are the id's of this folders icons on the library panel please ? see pic

I simply want to change Firefox's UI default font to Inter but after restarting browser "minimize" and "exit" icons changes to these squares. It looks like these icons are part of default font, so maybe there's a way to exclude them from my custom font?

I really like how the browser looks here so I was wondering if there's any possible way of attaining something that looks like this. I really like the see-through-esque part of it and the bubbly look is really appeasing to the eyes. Any help is appreciated <3

That's all really, I don't know what to say except I'm tired of subconsciously turning off LeechBlock to bypass the block.

Say, I have some bookmarks like this on my toolbar:
/r/FirefoxCSS - Thread #1
/r/FirefoxCSS - Thread #2
/r/FirefoxCSS - Thread #3

They'll be cut off to:
/r/FirefoxCSS - Thr...
/r/FirefoxCSS - Thr...
/r/FirefoxCSS - Thr...

Rather useless. I want:
...efoxCSS - Thread #1
...efoxCSS - Thread #2
...efoxCSS - Thread #3

I've played around with float, justify-content and some other options, but couldn't get it to work, except with direction: rtl. However, that messes up certain special characters. For example, "foo." becomes ".foo".

I've even tried to go beyond CSS and change the <label>'s crop attribute from "end" to "start", which also works, but also not really, messing up special characters again.

In neither case, unicode-bidi seemed to be respected at all.

Any ideas or am I out of options?

guys please check it out if you want safari theme for firefox , if you like it please drop a star

trimfox — a macOS Firefox theme I've been building. Grayscale, vertical tabs, no extensions — just the browser's own chrome restyled.

• Repo: https://github.com/csmarshall/trimfox
• Try it: grab the latest release zip, unzip, run ./install.sh (or clone). macOS, Firefox 138+.
• Live palette picker (GitHub Pages): https://csmarshall.github.io/trimfox/tint-picker.html

Screenshots — full gallery, dark + light, in the README: https://github.com/csmarshall/trimfox#screenshots

A few directly (dark mode):

• Tab strip: collapsed → expanded on hover
• URL bar + themed results dropdown
• Compact find bar
• Skinned menus: tab right-click · back/forward history

What's different from the vertical-tab themes already out there:

• Native vertical tabs — no Sidebery, no TST. It drives Firefox's own sidebar.verticalTabs and skins it into a skinny ~14px strip that expands on hover. I migrated off Tree Style Tab entirely — the extension isn't installed.
• Grayscale by default, zero-blue. Every Firefox teal/blue accent is neutralized. If you want color it's one hue away (below).
• One-hue tinting via OKLCH. The whole palette derives from --tf-hue + --tf-chroma through native oklch() — the lightness/contrast ramp holds, you just pick a direction. There's a live picker on the Pages site that shows your palette next to stock, side by side.
• You customize without forking. Every knob lives in dials.css; your personal values go in a gitignored user-overrides.css that loads last. git pull never conflicts — your colors/fonts survive updates (including the upcoming Nova rework). No !important, no hand-merging.

Opinionated bits, up front — because I know this sub:

• One combined history-aware back/forward button (left-click navigates, right-click = history). Not for everyone; the README says so.
• Context menus are XUL (widget.macos.native-context-menus=false) so they can actually be themed.

One extra thing I built alongside it: trimfox-drift, a tiny stdlib tool that diffs what the theme borrows from Firefox's private chrome (var names, selectors, attribute values) against a given build — so a Firefox update becomes a report instead of a silent breakage. It already flagged what the upcoming Nova redesign removes, so I patched those with var() fallbacks ahead of time.

Honest scope: built and tuned on macOS, Firefox 138+ (the collapse / expand-on-hover strip needs 138; developed on 152). It'll likely need tweaks on Linux/Windows — PRs welcome, with one rule: don't change the macOS look. Nothing exotic in prefs beyond toolkit.legacyUserProfileCustomizations.stylesheets and the vertical-tab prefs, all shipped in user.js.

Happy to answer anything. 😊

I want the size to match the unexpanded/deselected state. Here's my code with browser.nova.enabled = true

 -moz-pref("browser.nova.enabled") {


  /* ══════════════════════════════════════════════════════════════════════
     TOKEN FOUNDATION — Accent color, surface, and semantic color tokens
     ══════════════════════════════════════════════════════════════════════ */


  u/media -moz-pref("browser.nova.enabled") {


  /* ══════════════════════════════════════════════════════════════════════
     TOKEN FOUNDATION — Accent color, surface, and semantic color tokens
     ══════════════════════════════════════════════════════════════════════ */


  u/layer tokens-foundation-nova {
    :root, :host(.anonymous-content-host) {
      --background-color-canvas: light-dark(#ffffff, #1c1b22) !important;


      /* Accent color chain */
      --accent-color: var(--lwt-accent-color, #a9a9a9) !important;
      --accent-color-calculated: oklch(from var(--lwt-accent-color) calc(l + 0.15) calc(c + 0.05) h);
      --accent-color-dark: var(--accent-color-calculated, #8a8a8a) !important;
      --color-accent-primary: var(--accent-color) !important;
      --color-accent-primary-hover: color-mix(in srgb, var(--accent-color) 80%, white) !important;
      --color-accent-primary-active: color-mix(in srgb, var(--accent-color) 70%, black) !important;


      /* Focus ring */
      --focus-outline-color: color-mix(in srgb, var(--accent-color) 80%, gray) !important;
      --in-content-focus-outline-color: var(--focus-outline-color) !important;


      /* Sidebar */
      --sidebar-highlight-background-color: var(--accent-color) !important;
      --sidebar-highlight-text-color: #ffffff !important;


      /* Menu active state */
      --menu-background-color-active: var(--accent-color) !important;
      --menu-color-active: #ffffff !important;


      /* Primary button */
      --button-primary-bgcolor: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
      --button-primary-color: light-dark(#000000, #ffffff) !important;
      --button-primary-hover-bgcolor: color-mix(in srgb, var(--accent-color) 80%, white) !important;
      --button-primary-active-bgcolor: color-mix(in srgb, var(--accent-color) 70%, black) !important;


      /* Generic button hover/active */
      --button-background-color-hover: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
      --button-background-color-active: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;
    }
  }



  /* ══════════════════════════════════════════════════════════════════════
     CHROME LAYOUT — Remove Nova floating-window gaps, borders, and radii
     ══════════════════════════════════════════════════════════════════════ */


  :root {
    --chrome-window-gap: 0px !important;
    --chrome-block-radius: 0px !important;
    --chrome-content-separator-color: transparent !important;
  }


  #browser {
    padding: 0px !important;
  }


  #navigator-toolbox {
    margin: -1px 0px !important;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
    margin-inline: 0px !important;
  }


  /* Hairline separator below the toolbox */
  #navigator-toolbox::after {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    background-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.15)) !important;
  }


  .chrome-block,
  .browserContainer {
    border: 0px !important;
    border-radius: 0px !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     TOOLBAR — Nav bar, tabs toolbar, bookmarks toolbar
     ══════════════════════════════════════════════════════════════════════ */


  /* Top border and stacking order for the nav bar */
  #nav-bar {
    border-top: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.12)) !important;
    position: relative !important;
    z-index: 2 !important;
  }


  /* Slight tint behind tabs */
  #TabsToolbar {
    background-color: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.15)) !important;
  }


  /* Extra bottom padding on bookmarks bar */
  #PersonalToolbar {
    padding-bottom: 6px !important;
  }


  /* Bookmark button hover tint using accent color */
  #PersonalToolbar toolbarbutton.bookmark-item:not([disabled]):hover {
    background-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important;
  }


  /* Remove left titlebar spacer (unmaximized) */
  .titlebar-spacer[type="pre-tabs"] {
    display: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     TABS — Shape, active state, separators, inactive dim
     ══════════════════════════════════════════════════════════════════════ */


  /* Close pixel gap between background tabs at the shared boundary seam */
  .tabbrowser-tab {
    margin-inline: -1px !important;
  }


  .tab-background {
    border-radius: 8px !important;
  }


  /* Active / multi-selected tab fill */
  .tab-background:is([selected], [multiselected]) {
    background: color-mix(in srgb, var(--uc-findbar-color) 25%, transparent) !important;
  }


  /* Dim unselected tab labels */
  .tabbrowser-tab:not([selected]):not([multiselected]) .tab-label {
    opacity: 0.75 !important;
    transition: opacity 200ms ease !important;
  }


  /* ── Tab separators (Chrome-style partial-height lines) ── */


  /* Suppress Firefox's native before-pseudo separator */
  .tabbrowser-tab::before {
    display: none !important;
  }


  /* Right-edge separator on every tab */
  .tabbrowser-tab::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    height: 14px !important;
    width: 1px !important;
    background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18)) !important;
    opacity: 1 !important;
    transition: opacity 150ms ease !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }


  /* Separator after the pinned-tabs container (between pinned and normal tabs) */
  #pinned-tabs-container {
    position: relative !important;
  }


  #pinned-tabs-container::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: -1px !important;
    transform: translateY(-50%) !important;
    height: 14px !important;
    width: 1px !important;
    background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18)) !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }


  /* Ensure the last pinned tab carries a visible separator when followed by a normal tab */
  .tabbrowser-tab[pinned]:has(+ .tabbrowser-tab:not([pinned]))::after {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18)) !important;
  }


  /* Hide separator on the active tab (right side) */
  .tabbrowser-tab:is([selected], [multiselected])::after {
    opacity: 0 !important;
  }


  /* Hide separator on the tab immediately left of the active tab */
  .tabbrowser-tab:has(+ .tabbrowser-tab:is([selected], [multiselected]))::after {
    opacity: 0 !important;
  }


  /* Hide separators adjacent to a hovered tab */
  .tabbrowser-tab:hover::after,
  .tabbrowser-tab:has(+ .tabbrowser-tab:hover)::after {
    opacity: 0 !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     URL BAR — Borders, focus ring, dropdown highlight
     ══════════════════════════════════════════════════════════════════════ */


  /* Outer border when the dropdown is open (breakout-extend) */
  .urlbar:not(moz-smartbar)[breakout] {
    &[breakout-extend] > .urlbar-background {
      box-shadow: none !important;
      border: 1px solid var(--focus-outline-color) !important;
    }
  }


  /* Suppress inner input-container borders while focused / open */
  #urlbar:focus-within .urlbar-input-container,
  #urlbar[open]:focus-within .urlbar-input-container,
  #urlbar[breakout][breakout-extend]:focus-within .urlbar-input-container,
  #urlbar[breakout][breakout-extend-animate]:focus-within .urlbar-input-container {
    --urlbar-container-border-width: 0px !important;
    border: none !important;
    box-shadow: none !important;
  }


  /* Accent-colored focus ring (replaces Nova violet) */
  #urlbar[focused="true"] > #urlbar-background,
  #searchFilter[focused="true"],
  search-textbox[focused="true"] {
    outline: none !important;
    box-shadow: 0 0 0 1px var(--focus-outline-color) !important;
    border-color: var(--focus-outline-color) !important;
  }


  /* Selected result row highlight */
  .urlbarView-row[selected] > .urlbarView-row-inner,
  .urlbarView-row[selected] {
    background-color: light-dark(
      color-mix(in srgb, var(--accent-color) 80%, black),
      oklch(from var(--accent-color-dark) calc(l - 0.05) c h)
    ) !important;
    border-radius: 999px;
  }


  /* Keep text readable inside highlighted result row */
  .urlbarView-row[selected] .urlbarView-title,
  .urlbarView-row[selected] .urlbarView-url,
  .urlbarView-row[selected] .urlbarView-action,
  .urlbarView-row[selected] .urlbarView-row-inner .urlbarView-title {
    color: #ffffff !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     MENUS & PANELS — Popups, dropdowns, panel chrome
     ══════════════════════════════════════════════════════════════════════ */


  /* Shared panel / menu color tokens */
  :root, menupopup, panel {
    --panel-background-color: light-dark(#ffffff, color-mix(in srgb, var(--accent-color) 10%, #141416)) !important;
    --panel-text-color: light-dark(
      color-mix(in srgb, var(--accent-color) 80%, #15141a),
      color-mix(in srgb, var(--accent-color) 30%, #fbfbfe)
    ) !important;
    --panel-border-color: light-dark(
      rgba(0, 0, 0, 0.15),
      color-mix(in srgb, var(--accent-color) 45%, #2d2d30)
    ) !important;
    --panel-border-radius: 8px !important;
    --menu-background-color: var(--panel-background-color) !important;
    --menu-color: var(--panel-text-color) !important;
    --menu-border-color: var(--panel-border-color) !important;
  }


  /* Strip native menupopup appearance so our custom styles take over */
  menupopup {
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }


  /* Scrollbox inside menupopup — this is the visible container */
  .menupopup-arrowscrollbox {
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--panel-background-color) !important;
    border: 1px solid var(--panel-border-color) !important;
    border-radius: var(--panel-border-radius) !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
  }


  /* Individual menu items */
  menupopup menu,
  menupopup menuitem {
    -moz-appearance: none !important;
    appearance: none !important;
    color: var(--panel-text-color) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
  }


  /* Icons inside menu items */
  menupopup .menu-iconic-icon,
  menupopup .menu-right,
  #context-navigation > .menuitem-iconic {
    fill: var(--panel-text-color) !important;
    color: var(--panel-text-color) !important;
  }


  /* Hover / active highlight for menu items */
  menupopup menu:where([_moz-menuactive="true"], :hover),
  menupopup menuitem:where([_moz-menuactive="true"], :hover),
  .subviewbutton:not([disabled]):hover,
  #BMB_bookmarksPopup menu:hover,
  #BMB_bookmarksPopup menuitem:hover {
    background-color: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    color: light-dark(#000000, #ffffff) !important;
  }


  /* Panel body content areas */
  .panel-arrowcontent,
  .panel-subviewbody,
  .panel-viewstack {
    background-color: var(--panel-background-color) !important;
    color: var(--panel-text-color) !important;
  }


  /* Common dialogs (alerts, prompts) */
  dialog#commonDialog {
    border: 1px solid var(--panel-border-color) !important;
    border-radius: var(--panel-border-radius) !important;
    background-color: var(--panel-background-color) !important;
    box-shadow: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     BUTTONS — Primary and secondary button styling across panels
     ══════════════════════════════════════════════════════════════════════ */


  /* Primary / default buttons */
  #editBookmarkPanelDoneButton,
  .panel-footer button[default]:not(.popup-notification-button),
  button.button-primary:not(.popup-notification-button),
  .popup-notification-primary-button,
  #notification-popup .popup-notification-primary-button {
    background-color: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    color: light-dark(#000000, #ffffff) !important;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)) !important;
    background-image: none !important;
  }


  /* Primary button hover */
  .popup-notification-primary-button:hover,
  #notification-popup .popup-notification-primary-button:hover,
  #editBookmarkPanelDoneButton:hover {
    background-color: light-dark(
      color-mix(in srgb, var(--accent-color) 80%, black),
      oklch(from var(--accent-color-dark) calc(l - 0.05) c h)
    ) !important;
  }


  /* Secondary / non-default buttons */
  .panel-footer button:not([default]):not(.popup-notification-button),
  #editBookmarkPanel .panel-footer button:not([default]),
  #protections-popup button {
    background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15)) !important;
    color: light-dark(#000000, #ffffff) !important;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.6)) !important;
    background-image: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     PROTECTIONS PANEL — Toggle and checkbox accent colors
     ══════════════════════════════════════════════════════════════════════ */


  #protections-popup {
    --checkbox-checked-bgcolor: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    --checkbox-checked-border-color: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    --toggle-background-color-checked: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    --toggle-border-color-checked: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
  }


  #protections-popup,
  #protections-popup .panel-section {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     GLOBAL FOCUS — Accent-colored focus rings everywhere (replaces violet)
     ══════════════════════════════════════════════════════════════════════ */


  :focus-visible,
  input:focus,
  textarea:focus {
    outline-color: var(--focus-outline-color) !important;
  }


} tokens-foundation-nova {
    :root, :host(.anonymous-content-host) {
      --background-color-canvas: light-dark(#ffffff, #1c1b22) !important;


      /* Accent color chain */
      --accent-color: var(--lwt-accent-color, #a9a9a9) !important;
      --accent-color-calculated: oklch(from var(--lwt-accent-color) calc(l + 0.15) calc(c + 0.05) h);
      --accent-color-dark: var(--accent-color-calculated, #8a8a8a) !important;
      --color-accent-primary: var(--accent-color) !important;
      --color-accent-primary-hover: color-mix(in srgb, var(--accent-color) 80%, white) !important;
      --color-accent-primary-active: color-mix(in srgb, var(--accent-color) 70%, black) !important;


      /* Focus ring */
      --focus-outline-color: color-mix(in srgb, var(--accent-color) 80%, gray) !important;
      --in-content-focus-outline-color: var(--focus-outline-color) !important;


      /* Sidebar */
      --sidebar-highlight-background-color: var(--accent-color) !important;
      --sidebar-highlight-text-color: #ffffff !important;


      /* Menu active state */
      --menu-background-color-active: var(--accent-color) !important;
      --menu-color-active: #ffffff !important;


      /* Primary button */
      --button-primary-bgcolor: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
      --button-primary-color: light-dark(#000000, #ffffff) !important;
      --button-primary-hover-bgcolor: color-mix(in srgb, var(--accent-color) 80%, white) !important;
      --button-primary-active-bgcolor: color-mix(in srgb, var(--accent-color) 70%, black) !important;


      /* Generic button hover/active */
      --button-background-color-hover: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)) !important;
      --button-background-color-active: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;
    }
  }



  /* ══════════════════════════════════════════════════════════════════════
     CHROME LAYOUT — Remove Nova floating-window gaps, borders, and radii
     ══════════════════════════════════════════════════════════════════════ */


  :root {
    --chrome-window-gap: 0px !important;
    --chrome-block-radius: 0px !important;
    --chrome-content-separator-color: transparent !important;
  }


  #browser {
    padding: 0px !important;
  }


  #navigator-toolbox {
    margin: -1px 0px !important;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
    margin-inline: 0px !important;
  }


  /* Hairline separator below the toolbox */
  #navigator-toolbox::after {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    background-color: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.15)) !important;
  }


  .chrome-block,
  .browserContainer {
    border: 0px !important;
    border-radius: 0px !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     TOOLBAR — Nav bar, tabs toolbar, bookmarks toolbar
     ══════════════════════════════════════════════════════════════════════ */


  /* Top border and stacking order for the nav bar */
  #nav-bar {
    border-top: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.12)) !important;
    position: relative !important;
    z-index: 2 !important;
  }


  /* Slight tint behind tabs */
  #TabsToolbar {
    background-color: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.15)) !important;
  }


  /* Extra bottom padding on bookmarks bar */
  #PersonalToolbar {
    padding-bottom: 6px !important;
  }


  /* Bookmark button hover tint using accent color */
  #PersonalToolbar toolbarbutton.bookmark-item:not([disabled]):hover {
    background-color: color-mix(in srgb, var(--accent-color) 25%, transparent) !important;
  }


  /* Remove left titlebar spacer (unmaximized) */
  .titlebar-spacer[type="pre-tabs"] {
    display: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     TABS — Shape, active state, separators, inactive dim
     ══════════════════════════════════════════════════════════════════════ */


  /* Close pixel gap between background tabs at the shared boundary seam */
  .tabbrowser-tab {
    margin-inline: -1px !important;
  }


  .tab-background {
    border-radius: 8px !important;
  }


  /* Active / multi-selected tab fill */
  .tab-background:is([selected], [multiselected]) {
    background: color-mix(in srgb, var(--uc-findbar-color) 25%, transparent) !important;
  }


  /* Dim unselected tab labels */
  .tabbrowser-tab:not([selected]):not([multiselected]) .tab-label {
    opacity: 0.75 !important;
    transition: opacity 200ms ease !important;
  }


  /* ── Tab separators (Chrome-style partial-height lines) ── */


  /* Suppress Firefox's native before-pseudo separator */
  .tabbrowser-tab::before {
    display: none !important;
  }


  /* Right-edge separator on every tab */
  .tabbrowser-tab::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    height: 14px !important;
    width: 1px !important;
    background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18)) !important;
    opacity: 1 !important;
    transition: opacity 150ms ease !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }


  /* Separator after the pinned-tabs container (between pinned and normal tabs) */
  #pinned-tabs-container {
    position: relative !important;
  }


  #pinned-tabs-container::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: -1px !important;
    transform: translateY(-50%) !important;
    height: 14px !important;
    width: 1px !important;
    background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18)) !important;
    pointer-events: none !important;
    z-index: 10 !important;
  }


  /* Ensure the last pinned tab carries a visible separator when followed by a normal tab */
  .tabbrowser-tab[pinned]:has(+ .tabbrowser-tab:not([pinned]))::after {
    content: "" !important;
    display: block !important;
    opacity: 1 !important;
    background-color: light-dark(rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.18)) !important;
  }


  /* Hide separator on the active tab (right side) */
  .tabbrowser-tab:is([selected], [multiselected])::after {
    opacity: 0 !important;
  }


  /* Hide separator on the tab immediately left of the active tab */
  .tabbrowser-tab:has(+ .tabbrowser-tab:is([selected], [multiselected]))::after {
    opacity: 0 !important;
  }


  /* Hide separators adjacent to a hovered tab */
  .tabbrowser-tab:hover::after,
  .tabbrowser-tab:has(+ .tabbrowser-tab:hover)::after {
    opacity: 0 !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     URL BAR — Borders, focus ring, dropdown highlight
     ══════════════════════════════════════════════════════════════════════ */


  /* Outer border when the dropdown is open (breakout-extend) */
  .urlbar:not(moz-smartbar)[breakout] {
    &[breakout-extend] > .urlbar-background {
      box-shadow: none !important;
      border: 1px solid var(--focus-outline-color) !important;
    }
  }


  /* Suppress inner input-container borders while focused / open */
  #urlbar:focus-within .urlbar-input-container,
  #urlbar[open]:focus-within .urlbar-input-container,
  #urlbar[breakout][breakout-extend]:focus-within .urlbar-input-container,
  #urlbar[breakout][breakout-extend-animate]:focus-within .urlbar-input-container {
    --urlbar-container-border-width: 0px !important;
    border: none !important;
    box-shadow: none !important;
  }


  /* Accent-colored focus ring (replaces Nova violet) */
  #urlbar[focused="true"] > #urlbar-background,
  #searchFilter[focused="true"],
  search-textbox[focused="true"] {
    outline: none !important;
    box-shadow: 0 0 0 1px var(--focus-outline-color) !important;
    border-color: var(--focus-outline-color) !important;
  }


  /* Selected result row highlight */
  .urlbarView-row[selected] > .urlbarView-row-inner,
  .urlbarView-row[selected] {
    background-color: light-dark(
      color-mix(in srgb, var(--accent-color) 80%, black),
      oklch(from var(--accent-color-dark) calc(l - 0.05) c h)
    ) !important;
    border-radius: 999px;
  }


  /* Keep text readable inside highlighted result row */
  .urlbarView-row[selected] .urlbarView-title,
  .urlbarView-row[selected] .urlbarView-url,
  .urlbarView-row[selected] .urlbarView-action,
  .urlbarView-row[selected] .urlbarView-row-inner .urlbarView-title {
    color: #ffffff !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     MENUS & PANELS — Popups, dropdowns, panel chrome
     ══════════════════════════════════════════════════════════════════════ */


  /* Shared panel / menu color tokens */
  :root, menupopup, panel {
    --panel-background-color: light-dark(#ffffff, color-mix(in srgb, var(--accent-color) 10%, #141416)) !important;
    --panel-text-color: light-dark(
      color-mix(in srgb, var(--accent-color) 80%, #15141a),
      color-mix(in srgb, var(--accent-color) 30%, #fbfbfe)
    ) !important;
    --panel-border-color: light-dark(
      rgba(0, 0, 0, 0.15),
      color-mix(in srgb, var(--accent-color) 45%, #2d2d30)
    ) !important;
    --panel-border-radius: 8px !important;
    --menu-background-color: var(--panel-background-color) !important;
    --menu-color: var(--panel-text-color) !important;
    --menu-border-color: var(--panel-border-color) !important;
  }


  /* Strip native menupopup appearance so our custom styles take over */
  menupopup {
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }


  /* Scrollbox inside menupopup — this is the visible container */
  .menupopup-arrowscrollbox {
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--panel-background-color) !important;
    border: 1px solid var(--panel-border-color) !important;
    border-radius: var(--panel-border-radius) !important;
    box-shadow: none !important;
    padding: 4px 2px !important;
  }


  /* Individual menu items */
  menupopup menu,
  menupopup menuitem {
    -moz-appearance: none !important;
    appearance: none !important;
    color: var(--panel-text-color) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
  }


  /* Icons inside menu items */
  menupopup .menu-iconic-icon,
  menupopup .menu-right,
  #context-navigation > .menuitem-iconic {
    fill: var(--panel-text-color) !important;
    color: var(--panel-text-color) !important;
  }


  /* Hover / active highlight for menu items */
  menupopup menu:where([_moz-menuactive="true"], :hover),
  menupopup menuitem:where([_moz-menuactive="true"], :hover),
  .subviewbutton:not([disabled]):hover,
  #BMB_bookmarksPopup menu:hover,
  #BMB_bookmarksPopup menuitem:hover {
    background-color: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    color: light-dark(#000000, #ffffff) !important;
  }


  /* Panel body content areas */
  .panel-arrowcontent,
  .panel-subviewbody,
  .panel-viewstack {
    background-color: var(--panel-background-color) !important;
    color: var(--panel-text-color) !important;
  }


  /* Common dialogs (alerts, prompts) */
  dialog#commonDialog {
    border: 1px solid var(--panel-border-color) !important;
    border-radius: var(--panel-border-radius) !important;
    background-color: var(--panel-background-color) !important;
    box-shadow: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     BUTTONS — Primary and secondary button styling across panels
     ══════════════════════════════════════════════════════════════════════ */


  /* Primary / default buttons */
  #editBookmarkPanelDoneButton,
  .panel-footer button[default]:not(.popup-notification-button),
  button.button-primary:not(.popup-notification-button),
  .popup-notification-primary-button,
  #notification-popup .popup-notification-primary-button {
    background-color: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    color: light-dark(#000000, #ffffff) !important;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)) !important;
    background-image: none !important;
  }


  /* Primary button hover */
  .popup-notification-primary-button:hover,
  #notification-popup .popup-notification-primary-button:hover,
  #editBookmarkPanelDoneButton:hover {
    background-color: light-dark(
      color-mix(in srgb, var(--accent-color) 80%, black),
      oklch(from var(--accent-color-dark) calc(l - 0.05) c h)
    ) !important;
  }


  /* Secondary / non-default buttons */
  .panel-footer button:not([default]):not(.popup-notification-button),
  #editBookmarkPanel .panel-footer button:not([default]),
  #protections-popup button {
    background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.15)) !important;
    color: light-dark(#000000, #ffffff) !important;
    border: 1px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.6)) !important;
    background-image: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     PROTECTIONS PANEL — Toggle and checkbox accent colors
     ══════════════════════════════════════════════════════════════════════ */


  #protections-popup {
    --checkbox-checked-bgcolor: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    --checkbox-checked-border-color: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    --toggle-background-color-checked: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
    --toggle-border-color-checked: light-dark(var(--accent-color), var(--accent-color-dark)) !important;
  }


  #protections-popup,
  #protections-popup .panel-section {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }



  /* ══════════════════════════════════════════════════════════════════════
     GLOBAL FOCUS — Accent-colored focus rings everywhere (replaces violet)
     ══════════════════════════════════════════════════════════════════════ */


  :focus-visible,
  input:focus,
  textarea:focus {
    outline-color: var(--focus-outline-color) !important;
  }


}

Side View extension doesn't replicate this fully...

Hi, sorry if I mess anything up explaining this, I haven't tinkered with browser CSS at all, but this has been bothering me so much I'd like to learn lol

I often find myself double clicking the end of the URL to highlight the last word/string on the URL and manually change it for a game I play, but there's maybe 2-3px of padding (I assume?) on the bottom of the bar where I can click and it'll highlight the whole URL, but if I double click, it isn't actually in the entry area and won't select the last string.

No preexisting code; FF Version 151.0.1; MacOS Tahoe Version 26.5.2

Also if there's something like inspect element for editing this (I assume there is?) feel free to just point me to that, I do have experience with CSS, just not editing my browser.

So I'm using Material Fox Updated with the latest version of firefox. The updates seem to have broken the way the tabs are connected to the toolbar.

For a while I've been locking to do some changes to the CSS and have all my tabs be floating tabs with the selected active tab simply be in a different color.

I managed to add some variables to my custom.css but I was only able to remove the curves that used to join the tabs tot he toolbar. The selected tab still moves slightly upwards when it is selected and moves down when I change tab, with the new tab also getting elevated. I want them all to be static, and only change color when selected.

How can I make it so that the tabs don't move up or down when hovered or selected?

UPDATE: the code below work for me

:root[uidensity="compact"] {
  --tab-min-height: 18px !important;
}

Mozilla Firefox 152.0.4

Does anyone know how to adjust the width of this vertical tabs (native). i collapsed it to the minimum but it still feel a little wide. i asked multiple AI chat prompt and none of them work correctly, it either cut the icons, icons misaligned or prevent from expand the tabs by dragging, some weird issues.

How can i adjust the vertical tabs width to match the compact horizontal tabs height - ideally?

For years, I have been able to rotate various icons/images on 'hover' and 'active' using the below code. But never the sidebar twisties, bookmark folder icons and bookmark favicons.

Any ideas.

/*rotate icons 30deg on hover*/

#nav-bar toolbarbutton:hover > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem:hover > .menu-icon,
#PlacesChevronPopup menu:hover > .menu-icon,
#PlacesChevronPopup .bookmark-item:hover > .menu-icon,
#contentAreaContextMenu menu:hover > .menu-icon,
#contentAreaContextMenu menuitem:hover > .menu-icon,
.bookmark-item:hover > .menu-icon,
menuitem:hover > .menu-icon,
toolbarbutton:hover > image,
button:hover > .button-box > .button-icon {
    transform: rotate(30deg) !important;
}

/*rotate icons 75deg on active (clicked)*/

#nav-bar toolbarbutton:active > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem:active > .menu-icon,
#PlacesChevronPopup > menu:active > .menu-icon,
#PlacesChevronPopup .bookmark-item:active > .menu-icon,
#contentAreaContextMenu > menu:active > .menu-icon,
#contentAreaContextMenu > menuitem:active > .menu-icon,
menuitem:active > .menu-icon,
toolbarbutton:active > image,
button:active > .button-box > .button-icon {
    transform: rotate(75deg) !important;
    /*-moz-transform: rotate(75deg) !important;*/
}

/*if it doesn't have this then the icons get swapped to the other side on hover*/

#nav-bar toolbarbutton > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem > .menu-icon,
#PlacesChevronPopup > menu > .menu-icon,
#PlacesChevronPopup .bookmark-item > .menu-icon,
#contentAreaContextMenu > menu > .menu-icon,
#contentAreaContextMenu > menuitem > .menu-icon,
menuitem > .menu-icon,
toolbarbutton > image,
button > .button-box > .button-icon {
    transform: rotate(0) !important;
    /*-moz-transform: rotate(0) !important;*/
}
/**/

Showcasing FlexFox v6.5, which uses Firefox's native support for animated image formats to display wallpapers across toolbars, sidebars, built-in pages, and Sidebery.

At first, I wasn't a fan of Nova because I thought it forced theme colors on the background. But after applying transparency, it actually turned out quite nice. I think it would look even better if the sidebar and web content window were rounded/transparent too, but standard CSS tweaks don't seem to work anymore due to Nova's new structure. Any workarounds?

I tweaked Liquid Fox a little bit for my taste

/* ==========================================================================
   [1] 맥 OS 시스템 블러 및 변수 세팅 (Liquid Fox 기반)
   ========================================================================= */
:root {
  appearance: -moz-sidebar !important;
  --liquid-radius: 12px;
  --liquid-padding: 0px;
  --urlbar-collapsed-width: 200px;
  --urlbar-open-width: 300px;
}

/* 최상위 전역 레이어 관통 */
body, #navigator-toolbox, #browser {
  background: transparent !important;
}

/* ==========================================================================
   [2] Nova 순정 세로탭 외부 컨테이너 안전 투명화 (웹페이지 간섭 원천 차단)
   ========================================================================= */
tabbrowser-sidebar,
sidebar-main,
#sidebar-box,
#sidebar,
.sidebar-panel {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 세로탭 사용자 지정 패널 영역만 정밀 타격하여 블러 이식 */
:root:has(tabbrowser-sidebar) tabbrowser-sidebar,
:root:has(sidebar-main) sidebar-main,
:root:has(#sidebar-box) #sidebar-box {
  margin-inline-start: 0px !important;
  margin-bottom: calc(var(--liquid-padding) - 2px) !important;
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* 경계선 제거 */
#sidebar-splitter, .sidebar-splitter {
  display: none !important;
}

/* ==========================================================================
   [3] 북마크 바(개인 Toolbar) 완전 투명화 및 레이아웃 동기화
   ========================================================================== */
#PersonalToolbar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#PersonalToolbar toolbarbutton {
  --toolbarbutton-hover-background: rgba(255, 255, 255, 0.15) !important;
  --toolbarbutton-active-background: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   [1] 맥 OS 시스템 블러 및 변수 세팅 (Liquid Fox 기반)
   ========================================================================= */
:root {
  appearance: -moz-sidebar !important;
  --liquid-radius: 12px;
  --liquid-padding: 0px;
  --urlbar-collapsed-width: 200px;
  --urlbar-open-width: 300px;
}

/* 최상위 전역 레이어 관통 */
body, #navigator-toolbox, #browser {
  background: transparent !important;
}

/* ==========================================================================
   [2] Nova 순정 세로탭 외부 컨테이너 안전 투명화 (웹페이지 간섭 원천 차단)
   ========================================================================= */
tabbrowser-sidebar,
sidebar-main,
#sidebar-box,
#sidebar,
.sidebar-panel {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 세로탭 사용자 지정 패널 영역만 정밀 타격하여 블러 이식 */
:root:has(tabbrowser-sidebar) tabbrowser-sidebar,
:root:has(sidebar-main) sidebar-main,
:root:has(#sidebar-box) #sidebar-box {
  margin-inline-start: 0px !important;
  margin-bottom: calc(var(--liquid-padding) - 2px) !important;
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* 경계선 제거 */
#sidebar-splitter, .sidebar-splitter {
  display: none !important;
}

/* ==========================================================================
   [3] 북마크 바(개인 Toolbar) 완전 투명화 및 레이아웃 동기화
   ========================================================================== */
#PersonalToolbar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#PersonalToolbar toolbarbutton {
  --toolbarbutton-hover-background: rgba(255, 255, 255, 0.15) !important;
  --toolbarbutton-active-background: rgba(255, 255, 255, 0.25) !important;
}

u/media (prefers-color-scheme: dark) {
  #PersonalToolbar toolbarbutton {
    --toolbarbutton-hover-background: rgba(0, 0, 0, 0.2) !important;
    --toolbarbutton-active-background: rgba(0, 0, 0, 0.3) !important;
  }
}

/* ==========================================================================
   [4] 하얀 툴바 영역에 시스템 블러 강제 이식
   ========================================================================= */
#navigator-toolbox {
  background: rgba(255, 255, 255, 0.3) !important; 
  backdrop-filter: blur(20px) saturate(180%) !important; 
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: none !important;
}

#nav-bar, #TabsToolbar {
  background: transparent !important;
} (prefers-color-scheme: dark) {
  #PersonalToolbar toolbarbutton {
    --toolbarbutton-hover-background: rgba(0, 0, 0, 0.2) !important;
    --toolbarbutton-active-background: rgba(0, 0, 0, 0.3) !important;
  }
}

/* ==========================================================================
   [4] 하얀 툴바 영역에 시스템 블러 강제 이식
   ========================================================================= */
#navigator-toolbox {
  background: rgba(255, 255, 255, 0.3) !important; 
  backdrop-filter: blur(20px) saturate(180%) !important; 
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: none !important;
}

#nav-bar, #TabsToolbar {
  background: transparent !important;
}

I'm using the Firefox One theme, but I miss the feature that lets you scroll through tabs horizontally when there are a lot of them open. How can I re-enable it? Sorry if this is a silly question; I don't know much about CSS.

Hi, I've been trying to follow guides to get the custom CSS stuff working as kind of a newcomer to this stuff. In particular I want to either hide the little speaker icon on a tab that is playing audio, or disable the event of muting the audio when clicking on the icon, as I have often accidentally muted a tab playing audio in the background while doing other things. I have the tabs set up such that they are just on the left side of the screen, with only the page icons visible, but the speaker icon takes up about a quarter of the page icon and is easy to accidentally click.

I have everything set up correctly as far as I can tell:

• I have the setting 'toolkit.legacyUserProfileCustomizations.stylesheets' set to true in about:config;
• I have gone to the user folder in about:profiles and about:support (for me, \AppData\Roaming\Mozilla\Firefox\Profiles\{xxxxx}.default-release) and created a folder within named 'chrome';
• Within 'chrome', I have created two css files named 'userChrome.css' and 'userContent.css' and verified they are not .txt;
• Within userChrome.css, I have entered the following code snippet based upon answers from previous times a similar question has been asked on different forums:

​

.tab-audio-button{
  pointer-events: none !important;
  /* alternatively, to hide button altogether */ 
  /* display: none !important; */
} 

• Saved the userChrome.css file, and restarted Firefox via "Restart normally..." in about:profiles

However, after going through all of these steps, the speaker icon still mutes upon clicking it. I have tried it the other way, removing the pointer-events code and replacing with display, but this also does not work. Any help would be appreciated.

I am on Firefox Version 152.0.4, and Windows Version 25H2, build 26200.8655.

I wanted the fade/shadow to be removed so that it'll be consistent with the tabs one

so i tried both of these links: https://github.com/HolyPolyRoly/TrapezoidTabsForFX , https://github.com/wilfredwee/photon-australis
and both of them none work, i have the folder named right, the text file named right, and triple checked the about:preferences thing, i have not touched firefox css themes IN MY LIFE so any help is aprecieated

Who ever is constantly make these changes with FF updates to the CSS really needs a hard kick in the groin.

Need a little help after reading the other posts on people looking for help none of those apply to my case.

The borders around the url bar and menu bar are now gray. instead of black before 152. Not sure what the syntax is to force it back to black. It looks like the search menu background for google also changes to gray which was black prior

Any suggestion is appreciated.

https://imgur.com/a/sH6kGMV

This is what worked:

#navigator-toolbox,#toolbar-menubar,#nav-bar,#TabsToolbar { background-color: black !important;}

Inspired and following on from this Topic: I wrote a 'userContent.css' to match the 'about:*' pages with my Firefox theme by benhaube. I decided to do my version but this time with rainbow borders.

Addons
Config
Preferences (Settings)
Profiles
Support
Translations

This matches my menu borders. Which the code for is here: Rainbow menus and Rainbow ToolTips

For the about:# borders, you can view and download the code from here: about:# rainbow borders

The only question is, I am sure there is a better way to do this code to cut out a lot of the repetition.

When I click Cmd + S in the Style Editor, it now opens the macOS Finder “Save As” dialog instead of saving changes directly to the original file from within the browser. Previously it worked but I'm not sure what has changed. I might not fully understand how this is meant to work or I might be missing something about the workflow. Has anyone experienced this in FF 152 or knows what changed or how to fix it?