r/FirefoxCSS

How to make Natsumi Browser transparent?

I am new to Natsumi, and I'm really into transparent desingn, so, how do Imake Natsumi transparent? If anything, I'm on Win11

reddit.com

u/ILYVAN228 — 5 hours ago

▲ 19 r/FirefoxCSS+1 crossposts

Animated Wallpapers Across the Entire Firefox Interface | FlexFox v6.5

Showcasing the new animated wallpaper support in FlexFox v6.5, a highly customizable Firefox theme focused on maximizing screen space and improving everyday browsing workflows.

youtube.com

u/yuuqilin — 22 hours ago

▲ 2 r/FirefoxCSS

Unable to get userChrome.css working with Firefox

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.

reddit.com

u/Cobalt288 — 1 day ago

▲ 9 r/FirefoxCSS

Nova with Transparency Looks Nice, but How Do I Fix the White Sidebar?

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

u/Extension_Anteater56 — 1 day ago

▲ 1 r/FirefoxCSS

UI Bug: "Back to tab" in Picture-in-Picture (PiP) goes to a random tab in the wrong Firefox profile

When watching a video in Picture-in-Picture (PiP) fullscreen mode while two different Firefox profiles are running simultaneously, clicking the "Back to tab" button inside the PiP window behaves incorrectly. instead of returning to the specific profile and tab where the video is actually playing, Firefox switches focus to an unrelated profile and a completely random tab.

I didn't file this issue in official channels.

reddit.com

u/__O_X__ — 1 day ago

▲ 15 r/FirefoxCSS

What will we do when Nova drops?

u/Fragrant_Pianist_647 — 2 days ago

▲ 2 r/FirefoxCSS

Remove the fade from the end of url address bar?

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

u/Obvious-Material9645 — 2 days ago

▲ 263 r/FirefoxCSS+1 crossposts

Clean Firefox context menu

I'm so fucking tired of opening the context menu and reading it like an ancient scroll, searching for the right function among two dozen options, even though I don't use 70% of them. So, I customized the context menu for myself and am sharing it with you.

/* CLEAN FIREFOX CONTEXT MENU 
   Works on Version 152.0.3
   ============================================================
   INSTRUCTIONS FOR INSTALLATION
   ============================================================
   1. Open Firefox and type in the address bar: about:config
   2. Click "Accept the Risk and Continue"
   3. Search for: toolkit.legacyUserProfileCustomizations.stylesheets
   4. Set the value to true (double-click on the line)
   5. Close about:config
   6. Open your Firefox profile folder:
      - Type in address bar: about:support
      - In "Application Basics" section, find "Profile Folder"
      - Click "Open Folder" (or "Open Directory")
   7. In the profile folder, create a folder named "chrome" (if it doesn't exist)
   8. In the chrome folder, create a file named "userChrome.css" (if it doesn't exist)
   9. Open the userChrome.css file in a text editor (Notepad, Notepad++, etc.)
   10. Copy ALL of this code and paste it into the userChrome.css file
   11. Save the file
   12. Restart Firefox (completely close and reopen)

   ADDITIONAL SETTINGS (optional):
   - Disable Container Tabs: about:preferences → Tabs and browsing → Uncheck "Use Container Tabs"
   - Disable Split View: about:config → browser.tabs.splitView.enabled = false
   - Disable Copy Clean Link: about:config → privacy.query_stripping.strip_on_share.enabled = false
   - Disable Google Lens Search: about:config → browser.search.visualSearch.featureGate = false

   IMPORTANT: After Firefox updates, some element IDs may change.
   ============================================================ */

/* Tab audio button */
.tab-audio-button { display: none !important; }

/* ============================================================
   TAB CONTEXT MENU
   ============================================================ */

/* New Tab to the Right (C) */
#context_newTabFromTab { display: none !important; }

/* Add Tab to New Group */
#context_addToNewGroup,
#context_moveTabToNewGroup,
#context_moveTabToGroup,
#context_ungroupTab + menuseparator { display: none !important; }

/* Add Split View */
#context_moveSplitViewToNewGroup { display: none !important; }

/* Share */
#tabContextMenu .share-tab-url-item { display: none !important; }

/* Reload Tab */
#context_reloadTab { display: none !important; }

/* Unload Tab (Discard) */
#context_unloadTab { display: none !important; }

/* Duplicate Tab */
#context_duplicateTab { display: none !important; }

/* Bookmark Tab... */
#context_bookmarkTab { display: none !important; }

/* Move Tab */
#context_moveTabOptions { display: none !important; }

/* Send Tab to Device (Share) */
#context_sendTabToDevice,
#context_sendTabToDevice_separator,
#context_sendTabToDevicePopupMenu,
#context-sendlinktodevice,
#context-sendpagetodevice,
shareTabURL,
#context-sep-sendpagetodevice { display: none !important; }

/* Open in New Container Tab */
#context_openTabInContainer,
#context-openlinkinusercontext-menu { display: none !important; }

/* Select All Tabs */
#context_selectAllTabs { display: none !important; }

/* Close Tab */
#context_closeTab { display: none !important; }

/* Undo Close Tab (Reopen Closed Tab) */
#context_undoCloseTab { display: none !important; }

/* Close Duplicate Tabs (G) */
#context_closeDuplicateTabs { display: none !important; }

/* ============================================================
   PAGE CONTEXT MENU
   ============================================================ */

/* Save to Pocket */
#context-pocket,
#context-savelinktopocket,
#context-sep-pocket { display: none !important; }

/* Select All */
#context-selectall,
#context-sep-selectall { display: none !important; }

/* Take Screenshot */
#context-takescreenshot,
#screenshots_mozilla_org_create-screenshot,
#context-take-screenshot { display: none !important; }

/* Send Image */
#context-sendimage,
#context-emailimage { display: none !important; }

/* Bookmark Link */
#context-bookmarklink { display: none !important; }

/* Translate */
#context-translate-selection,
#context-translatepage { display: none !important; }

/* Set as Desktop Background */
#context-setDesktopBackground,
#context-sep-setbackground { display: none !important; }

/* View Page Source */
#contex-viewpartialsource-selection,
#contex-sep-viewsource,
#context-sep-viewsource { display: none !important; }

/* Other separators */
#context-sep-navigation,
#context-sep-viewbgimage,
#inspect-separator,
#context-sep-copyimage,
#context-sep-undo,
#context-sep-paste,
#context-sep-properties,
#context-sep-bidi { display: none !important; }

/* ============================================================
   LINK AND IMAGE CONTEXT MENU
   ============================================================ */

/* Open Link in New Window */
#context-openlink,              /* Main ID for links */
#context-openlinknew,           /* Alternative */
#context-openlink + menuseparator { display: none !important; } /* Separator */

/* Open Link in New Private Window */
#context-openlinkprivate,       /* Main ID */
#context-openlinkprivate + menuseparator { display: none !important; } /* Separator */

/* Copy Clean Link (without tracking) (G) */
#context-copylink-no-tracking,  /* ID for link without tracking parameters */
#context-copylink-no-tracking + menuseparator { display: none !important; } /* Separator */

/* Search Image with Google Lens (U) */
#context-searchwithgooglelens,  /* Presumed ID (may differ) */
#context-searchwithgooglelens + menuseparator { display: none !important; } /* Separator */

/* Inspect Accessibility Properties */
#context-inspect-a11y,          /* Main ID */
#context-inspect-a11y + menuseparator { display: none !important; } /* Separator */

/* ============================================================
   UNIVERSAL METHODS FOR REMOVING SEPARATORS
   ============================================================ */

/* 1. The simplest and most reliable way: hide ALL separators in ALL menus */
menuseparator {
    display: none !important;
}

/* 2. More selective way: hide ALL separators ONLY in tab context menu */
#tabContextMenu menuseparator {
    display: none !important;
}

/* 3. Hide separators by their ID (for most standard separators) */
#context-sep-open,                /* Separator before "Open Link" */
#context-sep-navigation,          /* Separator for navigation */
#context-sep-viewbgimage,         /* Separator before "View Background Image" */
#context-sep-selectall,           /* Separator before "Select All" */
#context-sep-viewsource,          /* Separator before "View Page Source" */
#context-sep-sendpagetodevice,    /* Separator for "Send Page to Device" */
#context-sep-sendlinktodevice,    /* Separator for "Send Link to Device" */
#inspect-separator,               /* Separator before "Inspect Element" */
#context-sep-copyimage,           /* Separator in image menu */
#context-sep-paste,               /* Separator for "Paste" */
#context-sep-undo,                /* Separator for "Undo" */
#context-sep-properties,          /* Separator for "Properties" */
#context-sep-bidi {               /* Separator for text direction */
    display: none !important;
}

/* 4. Remove separator that follows a specific menu item (for precise customization) */
#context_openANewTab + menuseparator,        /* For "New Tab" item */
#context_toggleMuteTab + menuseparator,      /* For "Mute Tab" item */
#context_openTabInWindow + menuseparator,    /* For "Move to New Window" item */
#context_sendTabToDevice + menuseparator,    /* For "Send Tab to Device" item */
#context_closeOtherTabs + menuseparator,     /* For "Close Other Tabs" item */
#context_closeTab + menuseparator {          /* For "Close Tab" item */
    display: none !important;
}

/* ============================================================
   END OF SETTINGS
   ============================================================ */

u/scorvus99 — 4 days ago

▲ 4 r/FirefoxCSS

FF152 Broke CSS color around menu and url bar

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

u/hondybadger — 3 days ago

▲ 16 r/FirefoxCSS

Rainbow Border for some 'about:#' pages

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.

u/FineWine54 — 4 days ago

▲ 3 r/FirefoxCSS

Browser toolbox won't save userchrome without opening finder window.

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?

reddit.com

u/Jordan876_ — 5 days ago

▲ 1 r/FirefoxCSS+1 crossposts

I need help identifying origin of my userChrome.css

I got it sometime shortly after Mozilla introduced proton but it's been getting increasingly buggy recently and I want to find the up-to-date version of it

:root,  #commonDialog {
  --tab-min-height: 28px !important;
  
  --toolbarbutton-inner-padding: 6px !important;
  --toolbarbutton-outer-padding: 1px !important;
  --toolbar-start-end-padding: 1px !important;
  
  --panel-font-size: 1em !important;
  --panel-separator-margin: 8px 0px !important;
  --panel-subview-body-padding: 8px 0px !important;
  
  --arrowpanel-border-radius: 0px !important;
  --arrowpanel-menuitem-padding: 4px 16px !important;
  --arrowpanel-menuitem-margin: 0px !important;
  --arrowpanel-menuitem-border-radius: 0px !important;
  
  --subdialog-font-size: 1em !important;
  
  --in-content-button-vertical-padding: 0px !important;
  --in-content-button-horizontal-padding: 8px !important;
  --in-content-primary-button-text-color: rgb(255, 255, 255) !important;
  --in-content-primary-button-background: var(--blue-60) !important;
  --in-content-primary-button-background-hover: var(--blue-70) !important;
  --in-content-primary-button-background-active: var(--blue-80) !important;
  
  --checkbox-checked-color: rgb(255, 255, 255) !important;
  --checkbox-checked-bgcolor: var(--blue-60) !important;
  --checkbox-checked-hover-bgcolor: var(--blue-70) !important;
  --checkbox-checked-active-bgcolor: var(--blue-80) !important;
  
  --focus-outline-color: var(--blue-60) !important;
  
  --blue-40: #45a1ff;
  --blue-50: #0a84ff;
  --blue-50-a30: rgba(10, 132, 255, 0.3);
  --blue-60: #0060df;
  --blue-70: #003eaa;
  --blue-80: #002275;
}

/** Titlebar */
.titlebar-buttonbox {
  margin-inline-end: -4px;
}

/** Tab */
.tabbrowser-tab {
  --tab-line-color: #0A84FF;
  --tab-label-mask-size: 2em !important;
  padding-inline: 0 !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) .tabbrowser-tab[first-visible-unpinned-tab] {
  margin-inline-start: 0px !important;
}

.tab-label {
  line-height: 1.7em;
}

.tab-background {
  box-shadow: none !important;
  margin-block: 0 !important;
  border-block-start: 2px solid transparent !important;
  border-radius: 0 !important;
}

.tabbrowser-tab:hover:not([selected]) .tab-background {
  border-block-start-color: color-mix(in srgb, currentColor 33%, transparent) !important;
}

[selected] .tab-background {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
  border-block-start-color: var(--tab-line-color) !important;
}

/** Tab misc. */
.tab-context-line {
  background-color: transparent !important;
  background-image: linear-gradient(to right, transparent 10%, var(--identity-tab-color) 10%, var(--identity-tab-color) 90%, transparent 90%);
  margin: -2px !important;
  transform: translateY(26px);
}

.tab-icon-image {
  opacity: 1 !important;
}

.tab-icon-overlay {
  fill-opacity: 1 !important;
  opacity: 1 !important;
  transition: none !important;
  border-radius: 10px !important;
  top: -4.5px !important;
  inset-inline-end: -9px !important;
  z-index: 1 !important;
}

.tab-icon-overlay:hover {
  background-color: white !important;
  color: black !important;
}

.tab-secondary-label {
  display: none !important;
}

.tab-close-button {
  background-image: url(chrome://global/skin/icons/close.svg);
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  list-style-image: unset !important;
  width: 20px !important;
  height: 20px !important;
  padding: 2px !important;
  margin-block-start: 1px !important;
  margin-inline-end: -2px !important;
}

#tabs-newtab-button {
 padding: 0 1px !important; 
}

/** Tab border */
#tabbrowser-tabs {
  margin-inline-start: -1px !important;
}

:is(:root[sizemode='normal'], :root[gtktiledwindow='true']) .tabbrowser-tab:first-of-type {
  margin-inline-start: 1px !important;
}

.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border-inline-start: 1px solid var(--toolbarbutton-active-background);
}
.tabbrowser-tab::before {
  margin-inline-start: -1px;
}

:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
.tabbrowser-tab[multiselected]::after,
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[beforehovered]::after,
#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[before-multiselected]::after {
  margin-block-start: var(--tabs-top-border-width);
  margin-block-end: 0;
}

#tabbrowser-tabs:not([movingtab]) .tabbrowser-tab[beforeselected-visible]::after,
#tabbrowser-tabs[movingtab] .tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab[visuallyselected]::after,
.tabbrowser-tab[visuallyselected]::before {
  border-color: var(--tabs-border-color);
  margin-block-start: 0;
  margin-block-end: var(--tabs-navbar-shadow-size);
}

.tabbrowser-tab::after,
.tabbrowser-tab[visuallyselected]::before,
.tabbrowser-tab:first-of-type::before,
#tabbrowser-tabs[movingtab] .tabbrowser-tab[visuallyselected]::before {
  content: '';
  display: block;
}

/** Nav bar */
#nav-bar {
  --toolbarbutton-icon-fill-attention: #45a1ff !important;
}

:where(#reload-button, #stop-button) &gt; .toolbarbutton-icon, :where(#reload-button, #stop-button) &gt; .toolbarbutton-animatable-box {
  translate: 0px !important;
}

/** Mega bar, Search bar */
#search-container, #urlbar-container {
  --urlbar-container-height: 32px !important;
  padding-block: 2px !important;
}

#urlbar, #searchbar {
  --urlbar-height: 26px !important;
  --urlbar-min-height: 26px !important;
  --urlbar-toolbar-height: 32px !important;
}

/*#urlbar-input-container {
  --urlbar-icon-padding: 4px !important;
  border: 0 !important;
}*/

/* TODO: figure out why the width calculation isn't working as intended. */
/*.urlbar-icon {
  height: 24px !important;
  width: 24px !important;
}*/

:is(.chromeUI, .extensionPage, .notSecureText) #identity-icon-box {
  background-color: transparent !important;
}
:is(.chromeUI, .extensionPage, .notSecureText) #identity-icon-box:hover {
  background-color: hsla(0, 0%, 70%, 0.2) !important;;
}
:is(.chromeUI, .extensionPage, .notSecureText) :is(#identity-icon-box:active, #identity-icon-box[open]) {
  background-color: hsla(0, 0%, 70%, 0.3) !important;;
}

/** Bookmarks bar */
#PersonalToolbar {
  margin-inline: -2px !important;
  padding-inline: var(--toolbar-start-end-padding) !important;
}


/** Panel */
#downloadsPanel,
#widget-overflow,
#appMenu-popup,
#customizationui-widget-panel,
#identity-popup,
#permission-popup,
#protections-popup {
  margin-block-start: -2px !important;
}

.panel-header {
  padding: 8px !important;
}

.panel-header + toolbarseparator {
  margin-block-start: 0px !important;
}

.panel-footer.panel-footer-menulike {
  margin: 0px !important;
  padding-block: 8px !important;
}

.panel-footer.panel-footer-menulike &gt; button {
  min-height: 24px !important;
  padding: var(--arrowpanel-menuitem-padding) !important;
  margin: 0px !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}
.panel-footer.panel-footer-menulike &gt; button:hover {
  color: inherit !important;
  outline: none !important;
}

.panel-footer.panel-footer-menulike &gt; button label {
  margin-block: 0px !important;
}

[extension] toolbarseparator {
  margin-block-end: 0px !important;
}

.subviewbutton-back {
  transform: none !important;
  margin: 0px !important;
}

.subview-subheader {
  font-size: inherit !important;
}

.panel-subview-footer-button {
  margin-block-end: 8px !important;
}

.PanelUI-subView menuseparator {
  appearance: none !important;
}

/** Panel banner */
:is(.panel-banner-item, .addon-banner-item) {
  margin-bottom: 8px !important;
}

.addon-banner-item::after {
  margin-inline-end: 8px !important;
}

/** Main panel */
#appMenu-fxa-label2 {
  padding: var(--arrowpanel-menuitem-padding) !important;
}

#appMenu-fxa-label2 label {
  margin: 0px !important;
}

toolbarseparator.proton-zap {
  border-image: none !important;
}

#appMenu-zoom-controls2 {
  padding-inline-end: 12px !important;
}

.toolbaritem-combined-buttons:not([widget-type='button-and-view']),
.toolbaritem-menu-buttons {
  margin-inline-end: 0px !important;
}

/** Overflow panel */
#widget-overflow-mainView toolbarseparator {
  margin-block-start: 0 !important;
}

.PanelUI-subView .toolbaritem-combined-buttons &gt; .subviewbutton {
  margin-inline-end: 0px !important;
}

/** Accounts panel */
.PanelUI-remotetabs-clientcontainer &gt; label {
  font-size: inherit !important;
  padding-block-end: 2px !important;
  margin-inline-start: 16px !important;
}

/** Synced tabs panel */
#PanelUI-remotetabs .panel-subview-body {
  margin-block-end: 8px !important;
}

/** Downloads panel */
#downloadsPanel-blockedSubview, #downloadsPanel-mainView {
  padding: 0px !important;
}

#emptyDownloads {
  padding: var(--arrowpanel-menuitem-padding) !important;
  padding-block: 16px !important;
}

#downloadsListBox {
  margin: var(--panel-separator-margin) !important;
}

#downloadsListBox &gt; richlistitem {
  height: 4.5em !important;
  padding: var(--arrowpanel-menuitem-padding) !important;
  padding-inline: 12px !important;
  margin: 0px !important;
  border-radius: 0px !important;
}

/** Identity security panel */
#identity-popup-securityView .identity-popup-security-content {
  border-block-end: 0px !important;
  padding-block-start: 8px !important;
  padding-block-end: 0px !important;
}

#identity-popup-securityView #identity-popup-securityView-body {
  padding-block-start: 0px !important;
  padding-block-end: 8px !important;
  margin-block: 0px !important;
  margin-inline-start: calc(2em + 16px) !important;
  margin-inline-end: 0px !important;
}

.identity-popup-security-connection {
  background-position-x: 18px !important;
  padding-block: 0px !important;
  padding-inline-start: calc(2em + 16px) !important;
  padding-inline-end: 0px !important;
}
.identity-popup-connection-secure.security-view, .identity-popup-connection-not-secure.security-view {
  margin-inline-start: 6px !important;
}

#identity-popup-security-button .identity-popup-security-connection {
  padding-inline-start: 18px !important;
}

#identity-popup-security-button {
  margin-block-end: 0px !important;
}

#identity-popup-clear-sitedata-footer,
#identity-popup-more-info-footer {
  margin-block-start: 8px !important;
}

/** Tracking protection panel */
#protections-popup-mainView-panel-header-section + toolbarseparator {
  margin-block-start: 0px !important;
}

#protections-popup-content {
  margin: 0px !important;
}

.protections-popup-tp-switch-label-box,
.protections-popup-tp-switch-box {
  min-height: unset !important;
}


#protections-popup-blocking-section-header,
#protections-popup-not-blocking-section-header,
#protections-popup-not-found-section-header {
  height: 26px !important;
  padding: 4px 16px !important;
  margin: 0px !important;
}


#protections-popup-footer {
  padding: 0px !important;
  margin-block-end: 8px !important;
}

.protections-popup-footer-button, .protections-popup-category {
  height: auto !important;
  min-height: unset !important;
}

/** Dedicated search panel */
#PopupSearchAutoComplete .search-panel-current-engine {
  padding: 4px 12px !important;
}

#PopupSearchAutoComplete .autocomplete-richlistitem {
  padding: 4px 8px !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-header {
  padding: 4px 8px !important;
}

#PopupSearchAutoComplete .search-panel-one-offs-container {
  padding: 4px 8px !important;
}

#PopupSearchAutoComplete .search-setting-button {
  min-height: unset !important;
  padding: var(--arrowpanel-menuitem-padding) !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}

#PopupSearchAutoComplete .search-setting-button .button-box {
  -moz-box-pack: start !important;
}


/** Notification bar (DRM etc) */
notification-message:not([style*='margin']) {
  margin: 0px !important;
}

.container.infobar {
  border-radius: 0px !important;
}

.container.infobar::before {
  content: unset !important;
}

.container.infobar .icon {
  color: currentColor !important;
  margin-block: auto !important;
  margin-inline-start: calc(8px + 3px) !important;
}

.container.infobar .notification-content {
  display: flex !important;
  justify-content: space-between !important;
  width: -moz-available !important;
  margin-inline-start: calc(8px + 3px) !important;
}

.container.infobar .notification-message {
  margin-inline-end: 8px !important;
}

.container.infobar .notification-button {
  margin: 0px !important;
}

.container.infobar .notification-button.primary {
  --in-content-primary-button-text-color: rgb(255, 255, 255) !important;
  --in-content-primary-button-background: var(--blue-60) !important;
  --in-content-primary-button-background-hover: var(--blue-70) !important;
  --in-content-primary-button-background-active: var(--blue-80) !important;
}

.container.infobar .close {
  margin: auto 8px !important;
}

/** UI controls */
panel {
  --buttons-primary-button-color: rgb(255, 255, 255) !important;
  --buttons-primary-button-bgcolor: var(--blue-60) !important;
  --buttons-primary-button-hover-bgcolor: var(--blue-70) !important;
  --buttons-primary-button-active-bgcolor: var(--blue-80) !important;
}

.panel-footer &gt; button {
  font-weight: normal !important;
  min-width: 6.3em !important;
  min-height: 32px;
  padding: 0 8px !important;
}

.checkbox-check[checked] {
  background-size: 14px !important;
}

menulist {
  min-height: 32px !important;
  padding: 0 8px !important;
}

/** Dialogs */
.dialogBox {
  border-radius: 2px !important;
}

@-moz-document url('chrome://global/content/commonDialog.xhtml'),
    url('chrome://mozapps/content/handling/permissionDialog.xhtml'),
    url('chrome://mozapps/content/handling/appChooser.xhtml'),
    url-prefix("chrome://global/content/print.html")
{
  #commonDialog {
    --subdialog-font-size: 1em !important;
    --in-content-button-vertical-padding: 0px !important;
    --in-content-button-horizontal-padding: 8px !important;
    --in-content-primary-button-text-color: rgb(255, 255, 255) !important;
    --in-content-primary-button-background: var(--blue-60) !important;
    --in-content-primary-button-background-hover: var(--blue-70) !important;
    --in-content-primary-button-background-active: var(--blue-80) !important;
  }

  #commonDialog[subdialog] {
    padding: 16px 10px !important;
  }
  
  button {
    font-weight: normal !important;
  }
}

/*New Tab Shortcuts*/
/*
.top-sites-list .top-site-outer .top-site-button {
  transform: scale(0.9,0.9) !important;
}
*/

/*New Tab Spacing*/
/*
.shortcuts-refresh .top-site-outer .top-site-button {
  padding: 0px 16px 0px !important;
}
*/

/*context menus*/

/*page menu*/
#context-pocket, #context-sendpagetodevice {display: none !important}

/*link menu*/
#context-sep-sendlinktodevice, #context-savelinktopocket, #context-sendlinktodevice, #context-openlink, #context-openlinkprivate, #context-stripOnShareLink, #context-openlinkinsplitview {display: none !important}

/*media menu*/
/*#context-media-showcontrols {display: none !important}

/*image menu*/
#context-sendimage, #context-sep-setbackground, #context-setDesktopBackground {display: none !important}

/*video menu*/
#context-video-pictureinpicture {display: none !important}

/*? menu*/
#context-sendvideo, #context-searchselect, #context-translate-selection, #context-ask-chat, #frame-sep {display: none !important}

/*inspect menu*/
#context-inspect-a11y {display: none !important}

reddit.com

u/InfiniteOmega7 — 6 days ago

▲ 2 r/FirefoxCSS

Toolbox contextual menus

hello all,

I would like to know how to have the id of this context menu (see arrow on pic) on the toolbox please ! i would like change colors, font etc...

my toolbox

reddit.com

u/difool2nice — 7 days ago

▲ 71 r/FirefoxCSS+3 crossposts

Made a custom homepage for Firefox inspired by Chrome

I really like Firefox, but I was never completely satisfied with its default homepage. It works fine, but compared to Chrome's homepage I always felt it was a bit less modern and customizable.

So I started building my own homepage for Firefox, inspired by Chrome but designed around features I personally wanted.

To be transparent, ai played a big role in development. I used it heavily for building, debugging and experimenting with ideas. I am not claiming I wrote everything manually but I spent a lot of time testing, customizing and turning it into something stable and usable.

Some things I added:

• Random wallpapers + custom background uploads
• Google, Bing and DuckDuckGo support
• Editable shortcuts and most visited sites toggle
• Dark, Light and Catppuccin themes
• AI shortcuts integrated into the search bar
• Profiles + local search history
• Glass-style UI and animations
• Offline support with local caching and automatic updates

Still a work in progress, but it has become stable enough for daily use.

I also plan to publish the source code on GitHub once I clean things up a bit.

For the best experience I recommend:

Adaptive Tab Color
New Tab Override

And if you use New Tab Override, make sure to enable:

Set focus to the web page instead of the address bar

Would genuinely like to hear what other Firefox users think.

Homepage link in comments. Screenshots below.

u/AppealQuick5154 — 10 days ago

▲ 16 r/FirefoxCSS

Is there a way to get something close to this back? The Strata Theme?

Honestly, Firefox 4 was peak. I miss it a lot, I remember when it hit, just how good it looked overall and how blown away we all were at the time.

u/MountainWisp — 8 days ago

▲ 54 r/FirefoxCSS

Displays a loading progress bar on the tab.

The CSS I posted in May was a bit verbose, so I've tidied up the code. I've made it work with Firefox 152.0.3's “nova” as well.

Github Gist: https://gist.github.com/anzuno/17d6a2b3637e4327f268fa934207b4f8

loading progress bar color: loading_progress_bar_color.css

/*** A loading progress bar shown at the top of al tab ***/

/** Proton **/
:root {
  --h-progress: #77A1D3, #79CBCA, #E684AE;  /* Hazel */
  --h-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  --v-progress: #4CB8C4, #3CD3AD;  /* Sea Weed */
  --v-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

@media (prefers-color-scheme: dark) {
  :root {
   --h-progress: #E55D87, #5FC3E4;  /* Rose Water */
   --h-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
   --v-progress: #c2e59c, #64b3f4;  /* Green and Blue */
   --v-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  }
}

:root[style*="--lwt-additional-images"] {
  --h-progress: #b06e9b, magenta, #ff9400;  /* Firefox Alpenglow */
  --h-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  --v-progress: #b06e9b, magenta, #ff9400;  /* Firefox Alpenglow */
  --v-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

/** Nova **/
@media -moz-pref("browser.nova.enabled") {
  :root {
   --h-progress: #b89cff 0%, rgba(255, 149, 101, 0.95) 100%;  /* Nova tab-border-color */
   --h-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
   --v-progress: #b89cff 0%, rgba(255, 149, 101, 0.95) 100%;  /* Nova tab-border-color */
   --v-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

@media (prefers-color-scheme: dark) {
  :root {
   --h-progress: #b89cff 0%, rgba(255, 149, 101, 0.95) 100%;  /* Nova tab-border-color */
   --h-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
   --v-progress: #b89cff 0%, rgba(255, 149, 101, 0.95) 100%;  /* Nova tab-border-color */
   --v-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  }
}

:root[style*="--lwt-additional-images"] {
  --h-progress: #b06e9b, magenta, #ff9400;  /* Firefox Alpenglow */
  --h-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  --v-progress: #b06e9b, magenta, #ff9400;  /* Firefox Alpenglow */
  --v-final-progress: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  }
}

/* Hide the loading burst */
#tabbrowser-tabs .tabbrowser-tab .tab-loading-burst {
   opacity: 0 !important;
}

/* Default Settings. tab-context-line */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
   height: 2px !important;
   border-radius: 2px !important;
   margin: 0 calc(var(--tab-border-radius) / 2) !important;
   position: relative !important;
   z-index: 1 !important;

  @media -moz-pref("browser.nova.enabled") {
    margin: 0 !important;
    inset-block-start: -3px !important;
  }
}

#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
   height: auto !important;
   width: 2px !important;
   border-radius: 2px !important;
   margin: calc(var(--tab-border-radius) / 2) 0 !important;
   position: relative !important;
   z-index: 1 !important;

  @media -moz-pref("browser.nova.enabled") {
    margin: 0 !important;
    inset-inline-end: -3px !important;
    inset-block-start: 0 !important;
  }
}

/* A temporary fix for the issue where, in Firefox 152.0.3 Nova, the Container line and the loading progress bar overlap the scrollbar when vertical tabs are at their minimum width */
@media (-moz-pref("browser.nova.enabled")) and (-moz-pref("sidebar.verticalTabs")) {
  sidebar-main:not([expanded]) {
    min-width: 52px !important;
  }
}

/* Prevent the container line from appearing briefly when opening the Container tab */
#tabbrowser-tabs .tabbrowser-tab[usercontextid]:not([image]):not(:is([busy], [progress])) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
   opacity: 0 !important;
}

#tabbrowser-tabs .tabbrowser-tab[usercontextid]:has(.tab-icon-image:-moz-broken):not(:is([busy], [progress])) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
   opacity: 1 !important;
}

 /* Color during loading */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([busy], [progress]) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  background-image: linear-gradient(90deg, var(--h-progress)) !important;
  opacity: 0 !important;
}

#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:is([busy], [progress]) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  background-image: linear-gradient(180deg, var(--v-progress)) !important;
  opacity: 0 !important;
}

/* A final color of the loading bar */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([usercontextid]):not(:is([busy], [progress])) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  background-image: linear-gradient(90deg, var(--h-final-progress)) !important;
  opacity: 0 !important;
  transition: opacity 1.0s ease-in-out !important;
}

#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:not([usercontextid]):not(:is([busy], [progress])) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  background-image: linear-gradient(180deg, var(--v-final-progress)) !important;
  opacity: 0 !important;
  transition: opacity 1.0s ease-in-out !important;
}

/* A final color of the loading bar. Container tab */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[usercontextid][bursting] &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  opacity: 0 !important;
  background-image: linear-gradient(90deg, light-dark(color-mix(in srgb, var(--identity-tab-color) 75%, #fff), color-mix(in srgb, var(--identity-tab-color) 85%, #000))) !important;
}

#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab[usercontextid][bursting] &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  opacity: 0 !important;
  background-image: linear-gradient(180deg, light-dark(color-mix(in srgb, var(--identity-tab-color) 75%, #fff), color-mix(in srgb, var(--identity-tab-color) 85%, #000))) !important;
}

#tabbrowser-tabs .tabbrowser-tab[usercontextid] &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  opacity: 1 !important;
  background-color: var(--identity-tab-color) !important;
  transition: opacity 0.8s ease-in-out !important;
}

/* Loading Progress Bar Animation */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([busy], [progress]) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  opacity: 1 !important;
  transform-origin: left center !important;
  animation: 1.5s ease-in-out nova !important;
}

#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:is([busy], [progress]) &gt; .tab-stack &gt; .tab-background &gt; .tab-context-line {
  opacity: 1 !important;
  transform-origin: top center !important;
  animation: 1.5s ease-in-out v-nova !important;
}

/* Animation Definition */
@keyframes nova {
   0% {
    transform: scaleX(0);
   }
   100% {
    transform: scaleX(1);
   }
 }

@keyframes v-nova {
   0% {
    transform: scaleY(0);
   }
   100% {
    transform: scaleY(1);
   }
 }

/********************************/
/* Animated tab favicon */
/*.tabbrowser-tab .tab-icon-image {
   animation: .03s ease-in nova !important;
}*/

/* Set the loading icon to an hourglass */
@media (prefers-reduced-motion: no-preference) {
  .tabbrowser-tab .tab-throbber {
    height: 16px !important;
    width: 16px !important;
    content: url("data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljDQogICAtIExpY2Vuc2UsIHYuIDIuMC4gSWYgYSBjb3B5IG9mIHRoZSBNUEwgd2FzIG5vdCBkaXN0cmlidXRlZCB3aXRoIHRoaXMNCiAgIC0gZmlsZSwgWW91IGNhbiBvYnRhaW4gb25lIGF0IGh0dHA6Ly9tb3ppbGxhLm9yZy9NUEwvMi4wLy4gLS0+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9ImNvbnRleHQtZmlsbCI+DQogIDxwYXRoIGQ9Ik0xNCAyLjVIMTIuNVY2QzEyLjUgNi4xOTg5MSAxMi40MjEgNi4zODk2OCAxMi4yODAzIDYuNTMwMzNMMTAuODEwNyA4TDEyLjI4MDMgOS40Njk2N0MxMi40MjEgOS42MTAzMiAxMi41IDkuODAxMDkgMTIuNSAxMFYxMy41SDE0VjE1SDJWMTMuNUgzLjVWMTBDMy41IDkuODAxMDkgMy41NzkwMiA5LjYxMDMyIDMuNzE5NjcgOS40Njk2N0w1LjE4OTM0IDhMMy43MTk2NyA2LjUzMDMzQzMuNTc5MDIgNi4zODk2OCAzLjUgNi4xOTg5MSAzLjUgNlYyLjVIMlYxSDE0VjIuNVpNNSAxMy41SDExVjEwLjMxMDdMOS4yMTk2NyA4LjUzMDMzQzguOTI2NzggOC4yMzc0NCA4LjkyNjc4IDcuNzYyNTYgOS4yMTk2NyA3LjQ2OTY3TDExIDUuNjg5MzRWMi41SDVWNS42ODkzNEw2Ljc4MDMzIDcuNDY5NjdDNy4wNzMyMiA3Ljc2MjU2IDcuMDczMjIgOC4yMzc0NCA2Ljc4MDMzIDguNTMwMzNMNSAxMC4zMTA3VjEzLjVaIi8+DQo8L3N2Zz4=") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    -moz-context-properties: fill !important;
    fill: currentcolor !important;
    opacity: 0.4 !important;
  }

  .tabbrowser-tab .tab-throbber[busy] {
    opacity: 0.4 !important;
  }

  .tabbrowser-tab .tab-throbber[progress] {
    fill: color-mix(in srgb, var(--tab-loading-fill) 85%, currentcolor) !important;
    opacity: 0.85 !important;
  }
}

/* Set the hourglass icon on the Container tab to the container's color */
.tabbrowser-tab[usercontextid] .tab-throbber {
  fill: var(--identity-tab-color) !important;
  opacity: 0.45 !important;
}

.tabbrowser-tab[usercontextid] .tab-throbber[busy] {
  opacity: 0.45 !important;
}

.tabbrowser-tab[usercontextid] .tab-throbber[progress] {
  opacity: 0.65 !important;
  transition: opacity .15s linear !important;
}

@media (prefers-color-scheme: dark) {
  .tabbrowser-tab[usercontextid] .tab-throbber {
    opacity: 0.6 !important;
  }
}

/* Add a globe icon to tabs for sites without a favicon */
.tabbrowser-tab:not([pinned]):not(:is([busy], [progress])) .tab-icon-image:not([src]) {
   content: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
   display: flex !important;
   -moz-context-properties: fill, fill-opacity !important;
   fill-opacity: 0.95 !important;
}

/* Set the globe icon to the container's color */
.tabbrowser-tab[usercontextid] .tab-icon-image {
  &amp;:not([src]), &amp;:-moz-broken {
    content: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
    -moz-context-properties: fill, fill-opacity !important;
    fill: var(--identity-tab-color) !important;
    fill-opacity: 1 !important;
  }
}

/* Stop animations for pop-up menus and panels */
#identity-popup, #permission-popup, #protections-popup, menupopup, panel {
  animation: none !important;
  transform: none !important;
  transition: unset !important;
}

I've prepared a color scheme for the loading progress bar.

/* loading progress bar color
https://gradient.page/ui-gradients
https://cssgradient.io/shades-of-blue/
 */

#F778BA, #58A6FF;  /* Soft red + Light blue */
#22d3ee, #8b5cf6;  /* Vivid cyan + Soft violet */
rgba(255, 51, 153, 1) 0%, #00c9ff 70%;  /* Vivid pink + Pure cyan */
rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 55%, rgba(237, 221, 83, 1) 100%;  /* Blue + Green + Yellow */
#1ccaab 0%, #12d8fa 50%, #00c9ff 100%;  /* Green + Blue + Blue */
#1ccaab 0%, #12d8fa 50%, #F778BA 100%;  /* Green + Blue + Soft red */
#1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgba(255, 148, 0, 1) 100%;  /* Blue + Vivid pink + Orange */
#1edbff, #00A651, rgba(255, 148, 0, 1);  /* Blue + Green + Orange */
cyan, Magenta;  /* Cyan + Magenta */
#1fb4ff 0%, #12d8fa 50%, #8dffbc 100%;  /* Blue + Blue + cyan lime green */
#00c9ff 0%, #92fe9d 100%;  /* Kale Salad */
#fdbb2d 0%, #22c1c3 100%;  /* Retro Wagon */
#fc466b 0%, #3f5efb 100%;  /* Disco Club */
#fc354c, #0abfbc;  /* Miaka */
#FEAC5E 0%, #C779D0 50%, #4BC0C8 100%;  /* Atlas */
#16A085, #F4D03F;  /* Harmonic Energy */
#fd8112, #0085ca;  /* Blue Orange */
#f7941e 0%, #72c6ef 50%, #00a651 100%;  /* Radioactive Heat */
#ff1e56 0%, #f9c942 50%, #1e90ff 100%;  /* Beleko */
#108dc7, #ef8e38;  /* Pun Yeta */
#40E0D0 0%, #FF8C00 50%, #FF0080 100%;  /* Wedding Day Blues */
#F36222 0%, #5CB644 50%, #007FC3 100%;  /* Telko */
#0250c5, #d43f8d;  /* Night Party */
#2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%;  /* Sea Lord */
#50cc7f, #f5d100;  /* Millennium Pine */
#616161, #9bc5c3;  /* Mole Hall */
#65bd60 0%, #5ac1a8 50%, #3ec6ed 100%;  /* African Field */
#2af598, #009efd;  /* Itmeo Branding */
#aa4b6b 0%, #6b6b83 50%, #3b8d99 100%;  /* Memariani */
#00F260, #0575E6;  /* Rainbow Blue */
#808080, #3fada8;  /* IIIT Delhi */
#24C6DC, #514A9D;  /* Mantle */
#C9FFBF, #FFAFBD;  /* Virgin */
#fbed96,#abecd6;  /* Summer Breeze */
#603813, #b29f94;  /* Cool Brown */
#BBD2C5, #536976;  /* Petrol */
#8baaaa, #ae8b9c;  /* Jungle Day */
#cc2b5e, #753a88;  /* Purple Love */
#9796f0, #fbc7d4;  /* namnisar */
#ff6e7f, #bfe9ff;  /* Noon to Dusk */
#2b5876, #4e4376;  /* Sea Blue */
#02AAB0, #00CDAC;  /* Green Beach */
#5f2c82, #49a09d;  /* Calm Darya */
#159957, #155799;  /* Crystal Clear */
#76b852, #8DC26F;  /* Little Leaf */
#fc00ff, #00dbde;  /* Timber */
#2F7336, #AA3A38;  /* Christmas */
#5614B0, #DBD65C;  /* Minnesota Vikings */
#0099F7, #F11712;  /* Superman */
#ff4b1f, #1fddff;  /* Ali */
#2196f3, #f44336;  /* Politics */
#ffd89b, #19547b  /* Jupiter */
#de6161, #2657eb;  /* Nepal */
#ef32d9, #89fffd;  /* Azure Pop */
#00c3ff, #ffff1c;  /* Brady Brady Fun Fun */
#c0c0aa, #1cefff;  /* Cocoaa Ice */
#4568DC, #B06AB3;  /* Can You Feel The Love Tonight */
#30E8BF, #FF8235;  /* Mini */
#ff75c3, #ffa647, #ffe83f;  /* After the Rain 1 */
#9fff5b, #70e2ff, #cd93ff;  /* After the Rain 2 */
#77A1D3, #79CBCA, #E684AE;  /* Hazel */
#E6AE8C, #A8CECF;  /* Peach Sea */
#DCFFBD,#CC86D1;  /* Flower */
#00F5A0, #00D9F5;  /* Ibtesam */
#9796f0, #fbc7d4;  /* Anamnisar */
#E55D87, #5FC3E4;  /* Rose Water */
#c2e59c, #64b3f4;  /* Green and Blue */
#c21500, #ffc500;  /* Kyoto */
#4CB8C4, #3CD3AD;  /* Sea Weed */
#fddb92, #d1fdff;  /* Blessing */
#22c1c3, #fdbb2d;  /* Summer */
#30E8BF, #FF8235;  /* Mini */
#f79d00, #64f38c;  /* Sherbert */
#f7ff00, #db36a4;  /* Alihossein */
#7b4397, #dc2430;  /* Virgin America */
#D38312, #A83279;  /* Crazy Orange I */
#fe8c00, #f83600;  /* SoundCloud */
#FF4E50, #F9D423;  /* Dance To Forget */
#3D7EAA, #FFE47A;  /* Opa */
#1CD8D2, #93EDC7;  /* Sea Blizz */
#2BC0E4, #EAECC6;  /* Bora Bora */
#1FA2FF, #12D8FA, #A6FFCB;  /* Stripe */
#F09819, #EDDE5D;  /* Mango Pulp */
#ffe259, #ffa751;  /* Mango */
#cc2b5e, #753a88;  /* Purple Love */
#FFE000, #799F0C;  /* Ver */
#B6CEE8, #F578DC;  /* Soft Lipstick */
#16a085, #f4d03f;  /* Palo Alto */
#d558c8, #24d292;  /* Alchemist Lab */
#C6FFDD, #FBD786, #f7797d;  /* MegaTron */
#00d2ff, #928DAB;  /* Bright Vault */
#fc00ff, #00dbde;  /* Timber */
#833ab4, #fd1d1d, #fcb045;  /* Instagram */
#9D50BB, #6E48AA;  /* Amethyst */
#4776E6, #8E54E9;  /* Electric Violet */
#984ce2, magenta, #ff9400;  /* Firefox Alpenglow */
#ff9400, magenta, #984ce2;  /* Firefox Alpenglow reverse */
#b383e6, #ff8695, #89d35a;  /* Spring Alpenglow */
#dee53d, #029d95, #7ab1e7;  /* Summer Alpenglow */
#ff0e00, #ff6501, #fea900;  /* Autumn Alpenglow */
#2b4dc8, #2da8b7, #cfde5f;  /* Alpenglow Nightly */
#ff7d01, #ffb400, #ffde00;  /* Halloween Alpenglow */
#f07100, #f4b50e, #fcdf05;  /* Alpenglow Canary */
#986236, #c18312, #a5ca3e;  /* Thanksgiving Alpenglow */
#a14fe1, #fe7496;  /* AlpenGradient */
#9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%;  /* Firefox panel-separator */
#b89cff 0%, rgba(255, 149, 101, 1) 100%;  /* Nova tab-border-color */

dodgerblue;  /* Dodgerblue */
dimgray;  /* dimgray */
darkolivegreen;  /* darkolivegreen */
tan;  /* tan */
#444444;  /* Very dark gray */
#2c3e50;  /* Very dark desaturated blue */
#95a5a6;  /* Dark grayish cyan */
#7a7c7d;  /* Dark grayish blue */
#18bc9c;  /* Strong cyan */
#3498db;  /* Bright blue */
#f39c12;  /* Vivid orange */
#e74c3c;  /* Bright red */

u/moko1960 — 9 days ago

▲ 2 r/FirefoxCSS

Firefox 152, broke the new tab icon, does anyone know a fix?

https://preview.redd.it/yjz25vk31aah1.png?width=408&format=png&auto=webp&s=1facf129f9c832611dd95b75048bbf3c229dea0e

reddit.com

u/vhnum — 7 days ago

▲ 131 r/FirefoxCSS

Minimal pill-style fullscreen warning

I wanted Firefox’s fullscreen warning to be a little less bulky, so I changed it into a small pill-style popup.

Nothing too fancy, just a cleaner and less distracting look

* Firefox Nightly with Nova applied, haven’t tested this on other versions or setups

** Fixes, improvements, or suggestions are very welcome

/* Fullscreen warning: simple pill style. userChrome.css */
#fullscreen-warning.pointerlockfswarning {
  pointer-events: none !important;

  box-sizing: border-box !important;

  width: max-content !important;
  max-width: min(720px, 92vw) !important;
  min-height: 38px !important;

  padding: 6px 8px 6px 12px !important;
  gap: 8px !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;

  background: rgba(24, 24, 27, 0.82) !important;
  color: rgba(255, 255, 255, 0.95) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

  backdrop-filter: blur(12px) !important;

  font: message-box !important;
  font-size: 13px !important;
  line-height: 1.3 !important;

  align-items: center !important;
}

#fullscreen-warning.pointerlockfswarning[onscreen] {
  translate: 0 18px !important;
}

#fullscreen-warning.pointerlockfswarning[ontop] {
  translate: 0 8px !important;
}

#fullscreen-warning.pointerlockfswarning:is(
  [data-identity="verifiedDomain"],
  [data-identity="unknownIdentity"]
)::before {
  flex: 0 0 auto !important;

  width: 16px !important;
  height: 16px !important;

  margin: 0 !important;

  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;

  opacity: 0.86 !important;

  -moz-context-properties: fill !important;
  fill: currentColor !important;
}

#fullscreen-warning .pointerlockfswarning-domain-text,
#fullscreen-warning .pointerlockfswarning-generic-text {
  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
  max-width: 52vw !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;

  color: rgba(255, 255, 255, 0.88) !important;
}

#fullscreen-warning .pointerlockfswarning-domain {
  margin: 0 !important;

  font-weight: 600 !important;
  color: #fff !important;
}

#fullscreen-warning .pointerlockfswarning-domain-text:not([hidden])
  + .pointerlockfswarning-generic-text {
  display: none !important;
}

#fullscreen-exit-button {
  pointer-events: auto !important;

  flex: 0 0 auto !important;

  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;

  appearance: none !important;
  -moz-appearance: none !important;

  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;

  font-size: 0 !important;
  line-height: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
}

#fullscreen-exit-button::before {
  content: "" !important;

  width: 14px !important;
  height: 14px !important;

  background-color: currentColor !important;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5L12.5 12.5M12.5 3.5L3.5 12.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;
}

#fullscreen-exit-button:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

#fullscreen-exit-button:active {
  background: rgba(255, 255, 255, 0.24) !important;
}

#pointerlock-warning.pointerlockfswarning {
  box-sizing: border-box !important;

  width: max-content !important;
  max-width: min(720px, 92vw) !important;
  min-height: 38px !important;

  padding: 6px 12px !important;
  gap: 8px !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;

  background: rgba(24, 24, 27, 0.82) !important;
  color: rgba(255, 255, 255, 0.95) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

  backdrop-filter: blur(12px) !important;

  font: message-box !important;
  font-size: 13px !important;
  line-height: 1.3 !important;

  align-items: center !important;
}

#pointerlock-warning.pointerlockfswarning[onscreen] {
  translate: 0 18px !important;
}

#pointerlock-warning.pointerlockfswarning[ontop] {
  translate: 0 8px !important;
}

#pointerlock-warning .pointerlockfswarning-domain-text,
#pointerlock-warning .pointerlockfswarning-generic-text {
  margin: 0 !important;
  padding: 0 !important;

  min-width: 0 !important;
  max-width: 52vw !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;

  color: rgba(255, 255, 255, 0.88) !important;
}

u/ktm0407 — 10 days ago

▲ 1 r/FirefoxCSS

Need to fix few things

I'm trying to give a more macOS like look on windows for the Zen Browser, but I'm unable to fix two things -

How to remove those glyphs on hover ? (those 'x', '-' etc symbols)
Also how do i push the window controls to the extreme left corner

How I want it to look like

How it looks

I'm attaching the CSS file (link)

/* ============================================================ macOS Traffic Light Colors for Zen Browser on Windows

   BEFORE using this CSS, first do this in about:config:
   → zen.view.experimental-force-window-controls-left = true
   → zen.view.hide-window-controls = false
   
   This CSS only recolors — Zen handles positioning natively.
   ============================================================ */

/* Remove default Windows button appearance */
.titlebar-button {
  -moz-appearance: none !important;
  appearance: none !important;
  border: none !important;
  padding: 0 !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 50% !important;
  position: relative !important;
}

/* Hide ALL native icons/glyphs — aggressively */
.titlebar-button &gt; *,
.titlebar-button::before,
.titlebar-button image,
.titlebar-button .toolbarbutton-icon,
.titlebar-button .button-box,
.titlebar-button label {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* Space buttons like macOS */
.titlebar-buttonbox {
  gap: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 0 8px !important;
}

/* Traffic light colors */
.titlebar-close {
  background-color: #ff5f57 !important;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.2) !important;
}

.titlebar-min {
  background-color: #febc2e !important;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.15) !important;
}

.titlebar-max,
.titlebar-restore {
  background-color: #28c840 !important;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.15) !important;
}

/* Hover: show tiny glyphs via ::after (opacity transition) */
.titlebar-button::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0 !important;
  transition: opacity 80ms ease !important;
}

/* Only show glyphs when hovering the whole button group */
.titlebar-buttonbox:hover .titlebar-button::after {
  opacity: 1 !important;
}

/* × for close */
.titlebar-close::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cline x1='1' y1='1' x2='5' y2='5' stroke='%23490000' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='5' y1='1' x2='1' y2='5' stroke='%23490000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* – for minimize */
.titlebar-min::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='1.5'%3E%3Cline x1='0.5' y1='0.75' x2='7.5' y2='0.75' stroke='%23492800' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* ⤢ for maximize */
.titlebar-max::after,
.titlebar-restore::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolyline points='1,5 1,1 5,1' fill='none' stroke='%23003000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='7,3 7,7 3,7' fill='none' stroke='%23003000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Pressed state */
.titlebar-close:active { background-color: #bf4942 !important; }
.titlebar-min:active { background-color: #c89318 !important; }
.titlebar-max:active, .titlebar-restore:active { background-color: #1f9e2e !important; }

/* Inactive window → grey out */
:-moz-window-inactive .titlebar-close,
:-moz-window-inactive .titlebar-min,
:-moz-window-inactive .titlebar-max,
:-moz-window-inactive .titlebar-restore {
  background-color: #6e6e6e !important;
  opacity: 0.5 !important;
}

:-moz-window-inactive .titlebar-button::after {
  opacity: 0 !important;
}

reddit.com

u/-CrypticMind- — 8 days ago

▲ 4 r/FirefoxCSS+1 crossposts

Contents of "my_userChrome.css" need adjustment after OS scaling change

Windows 10, Firefox 152.0.3

I'd like to post "my_userChrome.css"

Before I add further info, am I approved to continued?

reddit.com

u/oromundo — 9 days ago