In the Fx153.0 Release Notes:

"A new "Local Mode" setting in the options panel allows developers to load local directories via custom origins. This simplifies testing for APIs that do not function over standard file:// URLs, removing the need to run a local web server. Multiple directory mappings are supported."

More information in Release Notes' 'Developer Information' section... and MDN's article 'Local Mode'.

They used to be... tried the "browser.newtabpage.activity-stream.newtabLayouts.variant" method (manually set both a & b to "false") but it doesn't change anything.

I made some changes to the home page (usercontent) but I wasn't able to put the logo in the center, can anyone help me?

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      outline: 1px solid #71706a !important;
      border-radius:0!important;


      .deck-selected > & {
        outline: 1px solid #506d57 !important;
      }


      &:first-child {
        outline: none !important;
        border: 1px solid #71706a !important;


        .deck-selected > & {
          outline: none !important;
          border: 1px solid #506d57 !important;
        }
      }

So I'm using this code and it works great but there's one major issue. It makes every active tab have the green border (#506d57)! Is there a way to have the code only work within the split tabs?

I've looked around, but I can't find the relevant css handle for the item.

There are two icons for VPN. VPN on and off. Possible to change them by userChrome.css? Thanks in advance.

I like how pretty zen browser is but it takes way to much resources on my machine, the thing that stuck me most with zen browser is its floating url bar so i was wondering if is it possible to have that same thing in firefox???

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 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 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. 😊

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

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


}

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.

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?