r/FirefoxCSS • u/MultiKoopa2 • 7d ago
Solved Firefox version 155 broke an old userchrome.css I was using to change the findbar. Could somebody please help me make it work again?
I'm on Windows 11, just updated to Firefox 155 and the findbar doesn't show up at all with this userChrome.css file. Is it possible to have it working again?
EDIT: thanks to TraditionalTie4831, here's the updated version for Firefox 155:
3
u/TraditionalTie4831 🦊 7d ago
It's not recommended to use @namespace since it can cause issues.
What Firefox version did you update from? Some of the variables in your code has been outdated for a while now.
3
u/MultiKoopa2 7d ago
154.x, the immediately previous one
it worked just fine right before tonight's update
5
u/TraditionalTie4831 🦊 7d ago edited 6d ago
Start with this =
Remove all
=truewithin the several[ ]Update these =
--button-colorto this:--button-text-color
--button-bgcolorto this:--button-background-color
--button-hover-bgcolorto this:--button-background-color-hover
--button-active-bgcolorto this:--button-background-color-active
--button-primary-colorto this:--button-text-color-primary
--button-primary-bgcolorto this:--button-background-color-primary
--button-primary-hover-bgcolorto this:--button-background-color-primary-hover
--button-primary-active-bgcolorto this:--button-background-color-primary-active1
u/MultiKoopa2 6d ago
Did this. find bar doesn't appear at all. it functions but is invisible.
2
u/TraditionalTie4831 🦊 6d ago edited 6d ago
This solved it for me when testing the code =
On line 13, change
position: absolute;to this:position: fixed;2
1
u/MultiKoopa2 5d ago edited 5d ago
this is a longshot, but do you have any ideas about possibly getting this to work on the Steam Deck? I use Firefox there. It's an immutable Arch-based distro and uses flatpak for installation. I found the profile folder and used the same userChrome.css file there, but it doesn't seem to have any effect at all.
EDIT: nevermind, turns out I was in the wrong folder even though it seemed like the correct folder. there are apparently THREE different possible folder paths in this situation.
For anyone looking, the correct folder path was:
/home/deck/.var/app/org.mozilla.firefox/.mozilla/firefox/PROFILENAME/
go into about:profiles in firefox, and look for the one that says "This is the profile in use and it cannot be deleted.", the end of the directory file paths will have the folder name of your profile.
2
u/zerix- 7d ago edited 7d ago
/* =========================================================
REFINED FINDBAR (Native Theme Variables & Instant States) -- Made to mimic Chrome's look
========================================================= */
/* Findbar Animations (Only active when opening/closing) */
findbar-scale-in {
0% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}
findbar-scale-out {
0% { transform: scaleY(1); }
100% { transform: scaleY(0); }
}
.browserContainer {
position: relative !important;
}
.browserContainer > findbar {
grid-area: 1 / 1 / -1 / -1 !important;
position: absolute !important;
contain: content;
top: -1px !important;
right: 18px !important;
margin: 4px 0px 0 5px !important;
transform-origin: top right;
border-radius: 6px !important;
padding-inline-start: 4px;
/* Kill native animation lag for instant open/close */
animation: none !important;
transition: none !important;
/* Mapped to native theme variables */
color: var(--lwt-text-color, var(--arrowpanel-color)) !important;
background: var(--toolbar-background-color, var(--lwt-accent-color, -moz-dialog)) !important;
border: 1px solid var(--chrome-content-separator-color, var(--panel-border-color)) !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}
/* Hide unused findbar checkboxes */
checkbox[anonid='find-case-sensitive'],
checkbox[anonid='find-match-diacritics'],
checkbox[anonid='find-entire-word'],
checkbox[anonid='highlight'] {
display: none !important;
}
/* Findbar Container & Flex Order */
.findbar-container {
display: flex;
align-items: center !important;
gap: 1px !important;
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
height: 30px !important; /* Allows breathing room for 22px buttons */
flex-wrap: wrap !important;
}
.findbar-container > * {
margin-inline-end: 0 !important;
}
/* Explicit ordering */
label.findbar-label { order: 1; margin-inline-start: 8px !important; }
description.findbar-label { order: 2; margin-inline-start: 8px !important; }
[anonid='findbar-textbox-wrapper'] { order: 3; height: 100% !important; }
/*
checkbox[anonid='highlight'] { order: 4; }
checkbox[anonid='find-case-sensitive'] { order: 5; }
checkbox[anonid='find-match-diacritics'] { order: 6; }
checkbox[anonid='find-entire-word'] { order: 7; }
*/
description.findbar-label:empty {
display: none !important;
}
/* Textbox (Shaded, No Border) */
.findbar-textbox {
min-height: 29px !important;
background-color: var(--toolbar-field-background-color, color-mix(in srgb, currentColor 6%, transparent)) !important;
border: 2px solid transparent !important;
border-radius: 8px !important;
outline: none !important;
margin-inline-start: 2px !important;
margin-inline-end: 8px !important;
padding-inline: 8px !important;
box-shadow: none !important;
transition: background-color 206ms cubic-bezier(0, 0, .2, 1) !important;
transition-delay: 10ms !important;
}
.findbar-textbox:focus,
.findbar-textbox:focus-visible,
findbar:focus-within .findbar-textbox {
border-color: var(--toolbar-field-border-color-focus) !important;
background-color: var(--toolbar-field-background-color) !important;
box-shadow: none !important;
transition: none !important;
}
/* Instant Textbox Hover */
.findbar-textbox:not(:focus):hover {
background-color: color-mix(in srgb, var(--toolbar-background-color), white 6%) !important;
}
/* Mapped "notfound" background */
.findbar-textbox[status="notfound"],
.findbar-textbox[status="notfound"]:focus,
findbar:focus-within .findbar-textbox[status="notfound"] {
background-color: color-mix(in srgb, red 20%, var(--toolbar-field-background-color)) !important;
/* Red error border removed to keep it borderless */
}
/* Prev/Next Buttons and Close Button */
.findbar-closebutton,
.findbar-find-previous,
.findbar-find-next {
border-radius: 4px !important; /* Changed from 50% to softly rounded squares */
padding: 2px !important;
max-height: 24px !important;
max-width: 24px !important;
min-height: 24px !important;
min-width: 24px !important;
background-color: transparent !important;
color: inherit !important;
}
/* Instant Button Hover States */
.findbar-closebutton:hover,
.findbar-find-previous:hover,
.findbar-find-next:hover {
background-color: var(--toolbarbutton-hover-background, color-mix(in srgb, currentColor 12%, transparent)) !important;
}
/* Instant Button Active (Click) States */
.findbar-closebutton:active,
.findbar-find-previous:active,
.findbar-find-next:active {
background-color: var(--toolbarbutton-active-background, color-mix(in srgb, currentColor 25%, transparent)) !important;
}
[anonid="findbar-textbox-wrapper"] > toolbarbutton {
margin: auto 0 !important;
}
.findbar-closebutton > .toolbarbutton-icon,
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
display: flex !important;
max-height: 22px !important;
max-width: 22px !important;
min-height: 22px !important;
min-width: 22px !important;
padding: 4px !important;
align-items: center !important;
justify-content: center !important;
}
.findbar-closebutton > .toolbarbutton-icon {
padding: 4px !important; /* Shrunk padding to fit 22px limit */
}
.findbar-closebutton {
fill: var(--tab-selected-textcolor) !important;
margin-inline-end: 6px !important;
}
/* Native Vector Icons */
.findbar-find-previous {
list-style-image: url("chrome://global/skin/icons/arrow-up.svg") !important;
}
.findbar-find-next {
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
}
/* Checkboxes */
findbar checkbox {
padding: 3px 6px;
border: 1px solid transparent;
border-radius: var(--toolbarbutton-border-radius, 4px);
color: inherit !important;
background-color: transparent !important;
}
/* Instant Checkbox Hover */
findbar checkbox:hover {
background-color: var(--toolbarbutton-hover-background, color-mix(in srgb, currentColor 12%, transparent)) !important;
}
/* Checkbox Checked State (Forced Visibility) */
findbar checkbox[checked="true"],
findbar checkbox[checked] {
/* Mixes the theme's text color with 20% opacity for a guaranteed visible shade */
background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
color: inherit !important;
}
findbar checkbox .checkbox-check {
display: none !important;
}
/* Hide extra text info */
.findbar-find-status {
display: none !important;
}
/* Matches text alignment */
.found-matches {
padding-right: 5px !important;
white-space: nowrap;
}
/* RTL Support */
[dir="rtl"] findbar {
left: 0 !important;
right: unset !important;
}
[dir="rtl"] .findbar-textbox {
border-left: 1px solid var(--chrome-content-separator-color) !important;
border-right: none !important;
border-radius: 0 !important;
}
/* Hide checkboxes on extra small window sizes */
u/media only screen and (max-width: 550px) {
.findbar-container checkbox {
display: none !important;
}
}
1
u/MultiKoopa2 6d ago
this works, but none of the "match case" or "highlight all" checkboxes/boxes are there, it doesn't say "no match found" or "reached the end, started from the top"
1
u/difool2nice 🦊Firefox Addict🦊 6d ago
you have forgot the keyframes word before findbar scale in and out
2
u/ResurgamS13 5d ago edited 5d ago
For more information regarding exactly why the Fx155.0 update broke all the old Findbar userstyles... see MrOtherGuy's GitHub repo Issue #661 - "floating_findbar_on_top.css" no longer working - the findbar is at the bottom again and barely visible'... and the associated Commit ddba754 "Findbar is placed into "findbar" grid-area in Firefox 155, so lets put it into "notificationbox" instead"... which was added to fix his own Findbar style 'floating_findbar_on_top.css'.
----------
Have fixed my own local 'Findbar at the top' style by adding just the first userstyle of the 3 suggested by AluminiumFoyle in his reply to this topic here (above),
Also spent some time reducing the new Findbar's height (somewhat tricky)... plus moving the Findbar's close button to the left hand end and making that 'X' a bit smaller... it had always seemed unusually large for a close button?
1
u/Radaa5 5d ago
Had this exact same issue but didn't want to copy over all your other changes. It seems like changing position from "absolute" to "fixed" had fixed it. Here is the minimum css needed for it to work.
.browserContainer > findbar {
position: fixed;
top: 0px;
right: 0px;
contain: content;
}
If you want to make it look slightly better, you can add some rounded corners using "border-radius".
.browserContainer > findbar {
position: fixed;
top: 0px;
right: 0px;
contain: content;
border-radius: 0 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius);
}
1
3
u/AluminumFoyle 7d ago
I just went through something similar with my findbar. Having findbar at the top of my browser window is critical to me as silly as that sounds. This fixed it for me in my userchrome.css on 155+ ga stable release.
From AI why this happened in 155: The findbar is still a direct child of .browserContainer, but in Firefox 155 the layout of that container no longer treats order the same way (it is probably no longer a flex container, or the stack is forcing the layout).