Tips
Before - After
Ref: https://github.com/black7375/Firefox-UI-Fix/issues/188
Apply
Add this codes at user.js
// Pref Value Original
user_pref("mousewheel.min_line_scroll_amount", 10); // 5
user_pref("general.smoothScroll.mouseWheel.durationMinMS", 80); // 50
user_pref("general.smoothScroll.currentVelocityWeighting", "0.15"); // "0.25"
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); // "0.4"Other refs:
- https://www.reddit.com/r/firefox/comments/kojli8/actually_smooth_scrolling_for_firefox_now/
- https://www.reddit.com/r/firefox/comments/oqrejt/every_week_or_so_i_have_to_go_into_aboutconfig/
- https://www.reddit.com/r/archlinux/comments/p2gngf/firefox_91_overrides_the_systems_scroll_settings/
Ref: https://github.com/black7375/Firefox-UI-Fix/issues/188
Apply
Add this codes at user.js
// ** Scrolling Options ********************************************************
// based on natural smooth scrolling v2 by aveyo
// this preset will reset couple extra variables for consistency
// Pref Value Original
user_pref("apz.allow_zooming", true); /// true
user_pref("apz.force_disable_desktop_zooming_scrollbars", false); /// false
user_pref("apz.paint_skipping.enabled", true); /// true
user_pref("apz.windows.use_direct_manipulation", true); /// true
user_pref("dom.event.wheel-deltaMode-lines.always-disabled", true); /// false
user_pref("general.smoothScroll.currentVelocityWeighting", "0.12"); /// "0.25" <- 1. If scroll too slow, set to "0.15"
user_pref("general.smoothScroll.durationToIntervalRatio", 1000); /// 200
user_pref("general.smoothScroll.lines.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.lines.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.mouseWheel.durationMaxMS", 100); /// 200
user_pref("general.smoothScroll.mouseWheel.durationMinMS", 0); /// 50
user_pref("general.smoothScroll.mouseWheel.migrationPercent", 100); /// 100
user_pref("general.smoothScroll.msdPhysics.continuousMotionMaxDeltaMS", 12); /// 120
user_pref("general.smoothScroll.msdPhysics.enabled", true); /// false
user_pref("general.smoothScroll.msdPhysics.motionBeginSpringConstant", 200); /// 1250
user_pref("general.smoothScroll.msdPhysics.regularSpringConstant", 200); /// 1000
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaMS", 10); /// 12
user_pref("general.smoothScroll.msdPhysics.slowdownMinDeltaRatio", "1.20"); /// "1.3"
user_pref("general.smoothScroll.msdPhysics.slowdownSpringConstant", 1000); /// 2000
user_pref("general.smoothScroll.other.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.other.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.pages.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.pages.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.pixels.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.pixels.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.scrollbars.durationMaxMS", 100); /// 150
user_pref("general.smoothScroll.scrollbars.durationMinMS", 0); /// 150
user_pref("general.smoothScroll.stopDecelerationWeighting", "0.6"); /// "0.4"
user_pref("layers.async-pan-zoom.enabled", true); /// true
user_pref("layout.css.scroll-behavior.spring-constant", "250.0"); /// "250.0"
user_pref("mousewheel.acceleration.factor", 3); /// 10
user_pref("mousewheel.acceleration.start", -1); /// -1
user_pref("mousewheel.default.delta_multiplier_x", 100); /// 100
user_pref("mousewheel.default.delta_multiplier_y", 100); /// 100
user_pref("mousewheel.default.delta_multiplier_z", 100); /// 100
user_pref("mousewheel.min_line_scroll_amount", 0); /// 5
user_pref("mousewheel.system_scroll_override.enabled", true); /// true <- 2. If scroll too fast, set to false
user_pref("mousewheel.system_scroll_override_on_root_content.enabled", false); /// true
user_pref("mousewheel.transaction.timeout", 1500); /// 1500
user_pref("toolkit.scrollbox.horizontalScrollDistance", 4); /// 5
user_pref("toolkit.scrollbox.verticalScrollDistance", 3); /// 3-
-moz-accent-color: Accent Color -
-moz-accent-color-foreground: Accent Color with text color
more info: https://github.com/Guerra24/Firefox-UWP-Style
Search & replace from
Before - After
Apply
about:config => browser.tabs.drawInTitlebar to false
Before - After
Apply
.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
display: -moz-box !important;
}- Sample site: https://www.phoronix.com/forums/
Before - After
Apply
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
display: -moz-inline-box !important;
}And Remove These Codes:
or Using this addon
Related: #280
Apply
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
visibility: collapse !important;
opacity: 0;
}
.tabbrowser-tab:hover .tab-close-button {
visibility: visible !important;
opacity: 1;
}
/* Animate */
@media (prefers-reduced-motion: no-preference) {
/* Fade out */
.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
transition: opacity 0.1s var(--animation-easing-function) !important;
}
/* Fade in */
.tabbrowser-tab:hover .tab-close-button {
transition: opacity 0.25s var(--animation-easing-function) !important;
}
}Before - After
Apply
Use this code:
Before - After
Apply
Use this code:
/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
.tab-label-container{ display: grid; justify-content: safe center; }
.tab-label,.tab-secondary-label{ overflow: hidden; }
.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; }
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 1px; }
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 19px; }Refer: issue #71
Before-After
Apply
Set --space-above-tabbar to 8px.
/* for Extra Drag Space */
:root {
--space-above-tabbar: 8px; /* If you want drag space, set to 8px */
}Refer: issue #210
Before-After
Apply
Set --space-left-tabbar to 8px.
/* for First Tab Space */
:root {
--space-left-tabbar: 8px; /* If you want drag space, set to 8px */
} Refer: issue #229
Before-After
- Before
- After
- After (like IE)
Apply
First use this code: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom.css
And also use this code:
/* If Do you want like IE, Add this */
/*
#PersonalToolbar {
-moz-box-ordinal-group: 2;
}
*/
/* Navigator toolbox bottom border.
If Do you want like IE, Remove this
*/
#navigator-toolbox {
border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */
}
/* At Activated Menubar */
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
display: block !important;
}
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
visibility: hidden;
}
/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
:root[tabsintitlebar] {
--uc-window-control-width: 84px; /* Same as .titlebar-buttonbox-container - Space reserved for window controls, 84px is default value of linux */
--uc-window-drag-space-pre: 30px; /* Same as .titlebar-spacer[type="pre-tabs"] - Extra space reserved on both sides of the nav-bar to be able to drag the window */
--uc-window-drag-space-post: 25px; /* Same as .titlebar-spacer[type="post-tabs"] */
}
:root[tabsintitlebar][sizemode="maximized"] {
--uc-window-drag-space-pre: 0px; /* Remove pre space */
}
:root[sizemode="fullscreen"] .titlebar-buttonbox-container {
display: none !important;
}
:root[sizemode="fullscreen"] #window-controls {
position: fixed;
display: flex;
top: 0;
right: 0;
height: 40px;
}
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
height: 32px;
}
#nav-bar {
border-inline-start-width: var(--uc-window-drag-space-pre, 0px);
border-inline-end-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-post, 0px));
border-inline-style: solid !important;
border-inline-color: var(--toolbar-bgcolor);
}
/* Windows */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
:root[tabsintitlebar] {
--uc-window-control-width: 105px;
}
}
@media (-moz-os-version: windows-win10) {
:root[tabsintitlebar] {
--uc-window-control-width: 138px;
}
}
/* Use this pref to check Mac OS where window controls are on left */
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
:root {
--uc-window-control-width: 72px;
}
:root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
border-inline-start-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-post, 0px));
border-inline-end-width: var(--uc-window-drag-space-pre, 0px);
}
}Original
Replace Target: https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/userChrome.css#L685-L689
Image to right
#fxa-menu-avatar {
display: -moz-inline-box !important;
margin-inline-end: var(--arrowpanel-menuitem-padding);
-moz-box-ordinal-group: 2 !important;
}Text to right
#fxa-menu-avatar {
display: -moz-inline-box !important;
margin-inline-end: var(--arrowpanel-menuitem-padding);
}
#fxa-menu-header-title, #fxa-menu-header-description {
text-align: right;
}Both to right
#fxa-menu-avatar {
display: -moz-inline-box !important;
margin-inline-end: var(--arrowpanel-menuitem-padding);
-moz-box-ordinal-group: 2 !important;
}
#fxa-menu-header-title, #fxa-menu-header-description {
text-align: right;
}Before - After
Apply
Change to
:root {
--menu-padding: 2px;
}
:root[uidensity=compact] {
--menu-padding: 0px;
}Before - After
Apply
Remove this code
- https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/userChrome.css#L2590
- https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/userChrome.css#L2634-L2647
- https://github.com/black7375/Firefox-UI-Fix/blob/7acbf850ec212602c5845b640a2fb887e8d93bc9/userChrome.css#L3515-L3537
Before - After
Apply
Remove this code
- https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/userChrome.css#L390-L434
- https://github.com/black7375/Firefox-UI-Fix/blob/5858485e367106cc74bf36662d020038af88867f/userChrome.css#L390-L467
or Refer this
Apply
Remove this code
Before - After
Apply
#appMenu-fxa-separator {
display: none;
}Before - After
Apply
Add Follow code
:root {
--panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */
}Apply
Remove this code
You can just use https://github.com/black7375/Firefox-UI-Fix/tree/photon-like-tab
.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
max-width: 225px !important;
} #TabsToolbar {
--toolbarbutton-inner-padding: 8px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
}
/* Toolbar Height */
#TabsToolbar
.toolbar-items, .tabbrowser-tab,
.titlebar-buttonbox-container {
max-height: 34px !important;
}
:root[uidensity=compact] #TabsToolbar,
:root[uidensity=compact] .toolbar-items, .tabbrowser-tab
:root[uidensity=compact] .titlebar-buttonbox-container {
max-height: 30px !important;
}
:root[uidensity=touch] #TabsToolbar,
:root[uidensity=touch] .toolbar-items, .tabbrowser-tab
:root[uidensity=touch] .titlebar-buttonbox-container {
max-height: 42px !important;
}
/* Top Margin */
.tab-background, .tab-content {
margin-top: 0 !important;
}
/* New Tab Icon - Size Fix */
:root:not([uidensity=touch]) #tabs-newtab-button > .toolbarbutton-icon {
padding-top: 8px !important;
padding-bottom: 8px !important;
}.tab-context-line {
display: -moz-inline-box !important;
height: 2px !important;
border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
}
.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
background-color: rgb(10, 132, 255) !important; /* Photon like color
Default: var(--tab-line-color, rgb(10, 132, 255))
Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */
}
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
background-color: rgba(0,0,0,.2) !important;
opacity: 1 !important;
transform: none !important;
}
#TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
background-color: rgba(255,255,255,.2) !important;
}
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
opacity: 0 !important;
transform: scaleX(0) !important;
}
.tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
}:root {
--proton-tab-block-margin: 0px !important;
--tab-border-radius: 0px !important;
}
and remove Bottom rounded corner https://github.com/black7375/Firefox-UI-Fix/blob/00b7d9fc123060a7448ad37f714c5242996de5b5/userChrome.css#L167-L204
.tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
content: "";
display: block;
}
.tabbrowser-tab::after, .tabbrowser-tab::before {
border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
margin-block: 5px 4px !important;
opacity: 0.3 !important;
}
.tabbrowser-tab::before {
margin-inline-start: -1px !important;
}
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
margin-top: var(--tabs-top-border-width) !important;
margin-bottom: 0 !important;
}
/* Selected - Hide */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after {
border-color: var(--tabs-border-color) !important;
margin-top: 0 !important;
margin-bottom: var(--tabs-navbar-shadow-size) !important;
opacity: 1 !important;
}You can just use https://github.com/black7375/Firefox-UI-Fix/tree/photon-like-panel
/* Padding */
:root {
--arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
--arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;
/* Blank Menu Left Padding */
--arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px) !important;
--arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
}
.subviewbutton > .toolbarbutton-text {
padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
}
#panelMenu_bookmarksMenu .subviewbutton[disabled=true] .toolbarbutton-text,
#appMenu_historyMenu .subviewbutton[disabled=true] .toolbarbutton-text {
padding-inline-start: var(--arrowpanel-menublank-padding) !important;
}
#appMenu-proton-update-banner .toolbarbutton-text {
margin-inline-start: 0 !important;
}
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before {
display: -moz-inline-box;
margin-inline-end: var(--arrowpanel-menuicon-padding);
width: 16px !important;
height: 16px !important;
}
#appMenu-proton-update-banner {
margin-bottom: 2px !important;
}
#appMenu-proton-update-banner::before {
margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
}
#appMenu-fxa-status2,
#appMenu-zoom-controls2 {
align-items: center;
padding-top: var(--arrowpanel-menuimageblank-padding) !important;
padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
}
#appMenu-zoom-controls2::before {
margin-inline-end: 0 !important;
}
/* Icons Color */
#appMenu-multiView .subviewbutton::before,
#appMenu-proton-update-banner::before,
.subviewbutton > image {
fill: currentColor !important;
fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
-moz-context-properties: fill !important;
}
/* Panel - Main */
#appMenu-proton-update-banner::before {
content: url(chrome://browser/skin/whatsnew.svg);
}
#appMenu-fxa-status2::before { /* Don't exist img tag */
content: url(chrome://browser/skin/fxa/avatar-empty.svg);
}
#appMenu-fxa-status2[fxastatus=signedin]::before { /* Don't exist img tag */
display: none;
}
#appMenu-fxa-status2[fxastatus=signedin] #appMenu-fxa-label2::before {
/* url("https://profile.accounts.firefox.com/v1/avatar/a") */
content: '';
background-image: var(--avatar-image-url) !important;
}
#appMenu-new-tab-button2, /* Seperate */
#appMenu-passwords-button, /* Seperate */
#appMenu-extensions-themes-button,
#appMenu-save-file-button2, /* Seperate */
#appMenu-find-button2,
#appMenu-more-button2, /* Seperate */
#appMenu-help-button2,
#appMenu-quit-button2 /* Seperate */ {
padding-top: var(--arrowpanel-menuitemblank-padding) !important;
padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
}
#appMenu-zoom-controls2 {
padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
}
#appMenu-new-window-button2 {
list-style-image: url(chrome://browser/skin/window.svg);
}
#appMenu-new-private-window-button2 {
list-style-image: url(chrome://browser/skin/privateBrowsing.svg);
}
#appMenu-bookmarks-button{
list-style-image: url(chrome://browser/skin/bookmark.svg);
}
#appMenu-history-button {
list-style-image: url(chrome://browser/skin/history.svg);
}
#appMenu-downloads-button {
list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
}
#appMenu-print-button2 {
list-style-image: url(chrome://global/skin/icons/print.svg);
}
#appMenu-settings-button {
list-style-image: url(chrome://global/skin/icons/settings.svg);
}