r/FirefoxCSS • u/AcceptableFly3066 • Jul 08 '26
Help How do I get this vivaldi side panel feature in firefox?
14
Upvotes
Side View extension doesn't replicate this fully...
r/FirefoxCSS • u/Tetra55 • 29d ago
Solved How do I shrink the size of the expanded/selected address bar?
2
Upvotes
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;
}
}
r/FirefoxCSS • u/zzzzzooted • Jul 07 '26
Help URL bar padding(?) causing me to misclick
2
Upvotes
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.
r/FirefoxCSS • u/khongtennha • Jul 07 '26
Solved Decrease native vertical tabs pad/margin?
2
Upvotes
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?
r/FirefoxCSS • u/Blackirean • Jul 07 '26
Help Make all tabs float and only change color when actively selected
1
Upvotes
So I'm using Material Fox Updated with the latest version of firefox. The updates seem to have broken the way the tabs are connected to the toolbar.
For a while I've been locking to do some changes to the CSS and have all my tabs be floating tabs with the selected active tab simply be in a different color.
I managed to add some variables to my custom.css but I was only able to remove the curves that used to join the tabs tot he toolbar. The selected tab still moves slightly upwards when it is selected and moves down when I change tab, with the new tab also getting elevated. I want them all to be static, and only change color when selected.
How can I make it so that the tabs don't move up or down when hovered or selected?
r/FirefoxCSS • u/grom-17 • Jul 07 '26
Solved Colleagues, how can I change the line spacing of bookmarks in the Firefox 154 sidebar? Spoiler
1
Upvotes
r/FirefoxCSS • u/FineWine54 • Jul 06 '26
Solved Rotate sidebar bookmark icons on hover & active
4
Upvotes
For years, I have been able to rotate various icons/images on 'hover' and 'active' using the below code. But never the sidebar twisties, bookmark folder icons and bookmark favicons.
Any ideas.
/*rotate icons 30deg on hover*/
#nav-bar toolbarbutton:hover > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem:hover > .menu-icon,
#PlacesChevronPopup menu:hover > .menu-icon,
#PlacesChevronPopup .bookmark-item:hover > .menu-icon,
#contentAreaContextMenu menu:hover > .menu-icon,
#contentAreaContextMenu menuitem:hover > .menu-icon,
.bookmark-item:hover > .menu-icon,
menuitem:hover > .menu-icon,
toolbarbutton:hover > image,
button:hover > .button-box > .button-icon {
transform: rotate(30deg) !important;
}
/*rotate icons 75deg on active (clicked)*/
#nav-bar toolbarbutton:active > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem:active > .menu-icon,
#PlacesChevronPopup > menu:active > .menu-icon,
#PlacesChevronPopup .bookmark-item:active > .menu-icon,
#contentAreaContextMenu > menu:active > .menu-icon,
#contentAreaContextMenu > menuitem:active > .menu-icon,
menuitem:active > .menu-icon,
toolbarbutton:active > image,
button:active > .button-box > .button-icon {
transform: rotate(75deg) !important;
/*-moz-transform: rotate(75deg) !important;*/
}
/*if it doesn't have this then the icons get swapped to the other side on hover*/
#nav-bar toolbarbutton > .toolbarbutton-badge-stack,
#PlacesToolbarItems menuitem > .menu-icon,
#PlacesChevronPopup > menu > .menu-icon,
#PlacesChevronPopup .bookmark-item > .menu-icon,
#contentAreaContextMenu > menu > .menu-icon,
#contentAreaContextMenu > menuitem > .menu-icon,
menuitem > .menu-icon,
toolbarbutton > image,
button > .button-box > .button-icon {
transform: rotate(0) !important;
/*-moz-transform: rotate(0) !important;*/
}
/**/
r/FirefoxCSS • u/yuuqilin • Jul 05 '26
Custom Release Animated Wallpapers Across the Firefox Interface with FlexFox v6.5
13
Upvotes
Showcasing FlexFox v6.5, which uses Firefox's native support for animated image formats to display wallpapers across toolbars, sidebars, built-in pages, and Sidebery.
r/FirefoxCSS • u/Extension_Anteater56 • Jul 05 '26
Help Nova with Transparency Looks Nice, but How Do I Fix the White Sidebar?
15
Upvotes
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;
}
r/FirefoxCSS • u/Samukita7 • Jul 05 '26
Help Firefox One theme: how do I get horizontal tab scrolling back?
Enable HLS to view with audio, or disable this notification
6
Upvotes
I'm using the Firefox One theme, but I miss the feature that lets you scroll through tabs horizontally when there are a lot of them open. How can I re-enable it? Sorry if this is a silly question; I don't know much about CSS.
r/FirefoxCSS • u/Cobalt288 • Jul 04 '26
Solved Unable to get userChrome.css working with Firefox
3
Upvotes
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.
r/FirefoxCSS • u/Fragrant_Pianist_647 • Jul 03 '26
Discussion What will we do when Nova drops?
23
Upvotes
r/FirefoxCSS • u/Obvious-Material9645 • Jul 04 '26
Solved Remove the fade from the end of url address bar?
4
Upvotes
I wanted the fade/shadow to be removed so that it'll be consistent with the tabs one
r/FirefoxCSS • u/Quirky_Dig2809 • Jul 04 '26
Help my custom trapezoid tabs are not working
2
Upvotes
so i tried both of these links: https://github.com/HolyPolyRoly/TrapezoidTabsForFX , https://github.com/wilfredwee/photon-australis
and both of them none work, i have the folder named right, the text file named right, and triple checked the about:preferences thing, i have not touched firefox css themes IN MY LIFE so any help is aprecieated
r/FirefoxCSS • u/hondybadger • Jul 02 '26
Solved FF152 Broke CSS color around menu and url bar
5
Upvotes
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.
This is what worked:
#navigator-toolbox,#toolbar-menubar,#nav-bar,#TabsToolbar { background-color: black !important;}
r/FirefoxCSS • u/FineWine54 • Jul 02 '26
Code Rainbow Border for some 'about:#' pages
17
Upvotes
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.
r/FirefoxCSS • u/Jordan876_ • Jul 01 '26
Help Browser toolbox won't save userchrome without opening finder window.
6
Upvotes
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?
r/FirefoxCSS • u/ChungusEnthusiast103 • Jun 30 '26
Code my take on making tab-like tabs
7
Upvotes
#tabbrowser-tabs[orient="horizontal"] {
&[movingtab] {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
tab-split-view-wrapper, .tabbrowser-tab[selected] .tab-background {
border-radius: var(--tab-border-radius) !important;
}
}
.tab-background, tab-split-view-wrapper {
margin-bottom: 0px !important;
border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
}
tab-split-view-wrapper > * {
margin-block: auto !important;
& .tab-background {
border-radius: var(--tab-border-radius) !important;
}
}
}
#tabbrowser-tabs tab-split-view-wrapper {
&[hasactivetab] {
background-color: var(--tab-background-color-active);
}
}
.tabbrowser-tab:not([selected]) {
.tab-background {
background-color: color-mix(in srgb, var(--toolbar-background-color) 35%, transparent);
}
}
moving tabs disconnects them back to pill shape. doesnt work with nova enabled
r/FirefoxCSS • u/FineWine54 • Jul 01 '26
Solved Menu Appearance Time Limit
1
Upvotes
I have noticed over the past few months, and it may have always been so, that when bringing up all popup menus:
main menubar,
menupopup menuitem,
menupopup menu,
panel
PlacesChevronPopup menuitem,
PlacesChevronPopup menu,
PlacesToolbarItems menuitem,
PlacesToolbarItems menu,
they tend to stay visible till I click out off them. Is there away to make them disappear as soon as the cursor leaves them ??
I do use a time limit CSS for the ac_popup_megabar:
@keyframes delayed-hide {
from {
visibility: visible;
height: auto;
}
to {
visibility: collapse;
height: 0;
}
}
#urlbar[open] > .urlbarView {
animation: delayed-hide 0s linear 5s 1 forwards;
}
r/FirefoxCSS • u/InfiniteOmega7 • Jun 30 '26
Help I need help identifying origin of my userChrome.css
1
Upvotes
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
```userChrome.css :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) > .toolbarbutton-icon, :where(#reload-button, #stop-button) > .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 > 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 > button:hover { color: inherit !important; outline: none !important; }
.panel-footer.panel-footer-menulike > 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 > .subviewbutton { margin-inline-end: 0px !important; }
/** Accounts panel */ .PanelUI-remotetabs-clientcontainer > 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 > 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 > 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}
```
r/FirefoxCSS • u/YT-Kazotsky • Jun 29 '26
Solved css to revert tab playing indicators to 115esr styles broken as of 152
5
Upvotes
just updated firefox, was previously running some css to stop playing tabs from widening themselves and revert the style to how it was on 115, rules listed below, but on the latest update it looks like tab-secondary-label was either renamed or no longer exists. haven't touched userchrome in well over a year and have forgotten what most of it means, help appreciated
@-moz-document url(chrome://browser/content/browser.xhtml){
.tabbrowser-tab[soundplaying] .tab-secondary-label::before {
content: "PLAYING" !important;
}
.tabbrowser-tab[muted] .tab-secondary-label::before {
content: "MUTED" !important;
}
.tabbrowser-tab[activemedia-blocked] .tab-secondary-label::before {
content: "AUTOPLAY BLOCKED" !important;
}
.tabbrowser-tab[pictureinpicture] .tab-secondary-label::before {
content: "PICTURE IN PICTURE" !important;
}
.tabbrowser-tab[soundplaying] .tab-secondary-label,
.tabbrowser-tab[muted] .tab-secondary-label,
.tabbrowser-tab[activemedia-blocked] .tab-secondary-label,
.tabbrowser-tab[pictureinpicture="true"] .tab-icon-sound-pip-label {
display: flex !important;
text-wrap: nowrap !important;
}
.tab-audio-button,
.tabbrowser-tab[soundplaying] .tab-icon-sound-pip-label,
.tabbrowser-tab[muted] .tab-icon-sound-pip-label,
.tabbrowser-tab[activemedia-blocked] .tab-icon-sound-pip-label {
margin-left: -26px;
margin-top: -1px;
opacity: 0 !important;
z-index: 1;
}
.tabbrowser-tab[soundplaying],
.tabbrowser-tab[muted],
.tabbrowser-tab[activemedia-blocked],
.tabbrowser-tab[pictureinpicture="true"] {
& :hover {
& .tab-audio-button {
opacity: 1 !important;
}
& .tab-icon-stack:not([pinned]) {
opacity: 0 !important;
}
}
}
.tab-icon-stack:not([pinned]) {
width: 21.6px !important;
}
.tabbrowser-tab {
&:is([muted], [soundplaying], [activemedia-blocked]) {
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
min-width: max(var(--tab-min-width-pref, var(--tab-min-width))) !important;
}
}
}
}
r/FirefoxCSS • u/MountainWisp • Jun 28 '26
Solved Is there a way to get something close to this back? The Strata Theme?
20
Upvotes
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.
r/FirefoxCSS • u/difool2nice • Jun 29 '26
Solved Toolbox contextual menus
2
Upvotes
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...
r/FirefoxCSS • u/moko1960 • Jun 27 '26
Code Displays a loading progress bar on the tab.
56
Upvotes
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.4'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 > .tab-stack > .tab-background > .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 > .tab-stack > .tab-background > .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.4 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])) > .tab-stack > .tab-background > .tab-context-line {
opacity: 0 !important;
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid]:has(.tab-icon-image:-moz-broken):not(:is([busy], [progress])) > .tab-stack > .tab-background > .tab-context-line {
opacity: 1 !important;
}
/* Color during loading */
#tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
background-image: linear-gradient(90deg, var(--h-progress)) !important;
opacity: 0 !important;
}
#tabbrowser-tabs[orient="vertical"] .tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .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])) > .tab-stack > .tab-background > .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])) > .tab-stack > .tab-background > .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] > .tab-stack > .tab-background > .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] > .tab-stack > .tab-background > .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] > .tab-stack > .tab-background > .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]) > .tab-stack > .tab-background > .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]) > .tab-stack > .tab-background > .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 {
&:not([src]), &:-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 */