Closed Aris-t2 closed 3 years ago
Jgr9
commented
3 years ago What do I need to do to remove blue focus outline from megabar, seen when making a new tab? It's also on the Find Bar text box, but I'm not sure if I should remove that one because it becomes red if it doesn't find anything.
glennpc
commented
3 years ago @Jgr9
This is what I've been using to remove the blue focus outline on the urlbar and searchbar:
and for the findbar:
.findbar-textbox { --focus-outline-color: #C0C0C0 }
You can change the #C0C0C0 to whatever you want. I'm using that color cause it matches my theme.
Jgr9
commented
3 years ago Well I'd like to get rid of it entirely, unless... I need it for Find to tell me it can't find anything.
Taiyoumaru
commented
3 years ago Good day my friend, thank you for all your hard work all these years. First, I found something which may be an error. In menubar_color.css there is an extra " ) " which I bolded down. If I turn on the file from userChrome, the menubar has a solid black line over it that covers the minimize, maximize and close buttons. If I remove it, it goes back to how it is in the screenshot.
background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important; border: 0px !important; margin-bottom: -1px !important; }
Ironically, this is actually what I want (minus covering the buttons) but also I want it to cover the entirety of the menubar, not just a part of it like in this screenshot https://ibb.co/1vKzkm8 . I also want to remove the grey shading over the buttons and turn the text white so it matches the rest, and make sure the settings stay if I move the burger/firefox button to it. How can I do so? Thank you!
And finally I have also activated addon list colorized icons (addonlists_replace_button_labels_with_icons_fx72.css and addonlists_colorized_button_icons_fx68.css) but they look white instead of matching dark theme and there is one icon missing, shown here https://ibb.co/9qZpcTf . I tried to modify some of those css files but I never could get any icon or the background to change from white.
Thalon77
commented
3 years ago Leaving a comment here instead of opening a new issue because it's just a small cosmetical thing that doesn't need its thread so, after updating to FF89, disabling proton (followed the instructions in the sticky thread here) and updating some options in the CSS I still need to understand a thing: how can I get rid of the star icon at the end of the address bar? Tried to alter its settings inside the CSS but with no avail, do I need to alter other things somwhere else (like an option in about:config)?
AMGPilot
commented
3 years ago First I want to thank you for all of the hard work you do keeping this updated :)
I have two issues, not sure if I should open a new issue for this or not.
First issue is the spacing of the bookmarks in the bookmark folder are too big now. Anyway to restore them to the way they were before?
Second issue is the Orange Menu button overlaps the tab button when browser is maximized and then has a big space between it and the tab button when browser is not maximized.
Hopefully I explained these issues properly :)
Thanks!
Not maximized
Maximized
Aris-t2
commented
3 years ago @Jgr9
input.findbar-textbox:focus {
border: 1px solid grey !important; /* remove this, if you do not want any border */
outline: unset !important;
}@Taiyoumaru
I don't see a typo there:
background-image: linear-gradient ( var ( --toolbar-bgcolor ) ,var ( --toolbar-bgcolor ) ) !important;
Using Win7 + AeroGlass requires you to set background color differently.
Try #navigator-toolbox { background: ... }
It looks like the pref browser.in-content.dark-mode is gone. You will have to override the "white buttons" manually through userContent.css/my_userContent.css:
addon-list[type="theme"] addon-card button[data-l10n-id="enable-addon-button"]:not(.theme-enable-button),
.more-options-menu panel-item {
background: black !important;
}
addon-list addon-card panel-list * {
background: black !important;
}@Thalon77
#star-button-box {
display: none !important;
}@AMGPilot
#TabsToolbar .titlebar-spacer[type="pre-tabs"],
#TabsToolbar .titlebar-spacer[type="post-tabs"] {
display: none !important;
}
Yaron10
commented
3 years ago Hello Aris,
The following code used to create a separator between unselected tabs.
.tabbrowser-tab:not([selected]):not([beforeselected-visible]):not([beforehovered]):not([last-visible-tab]):not(:hover)::after
{
background-image: url("TabSeparator.png");
background-position: left bottom 1px;
background-repeat: no-repeat;
background-size: 2px 100%;
opacity: 0.7 !important;
width: 2px;
}
Why shouldn't it work with Proton?
Thank you. I'd appreciate your help.
TabSeparator.
mzso
commented
3 years ago Hi @Aris-t2
You mentioned "tab_toolbar_color_proton.css" in the other thread. Isn't it possible to dig-up the Windows accent color (via userchrome.js scripts for example) from within Firefox, to be used with this, since -moz-win-glass appears to be dead. (Or even for pre-proton, as long as it exists within FF.)
AMGPilot
commented
3 years ago @Jgr9
That fixed it! You are amazing! Thank you :)
Taiyoumaru
commented
3 years ago @Taiyoumaru
I don't see a typo there: background-image: linear-gradient
(var(--toolbar-bgcolor),var(--toolbar-bgcolor))!important;Using Win7 + AeroGlass requires you to set background color differently.
Try #navigator-toolbox { background: ... }
First, overriding the white addon buttons with the custom css code you provided worked perfectly, button background is black and hover color works, thank you kindly. The icon for the details is still missing however.
Second, this is how it looks with default menubar_color.css activated: https://ibb.co/0BMK8Qd . I figured the second " ) " was an error since no other lines had one in the file and once I removed it, it looked more "normal" like in here https://ibb.co/1vKzkm8 , especially since it was covering the min/max/close buttons.
I didn't know where to put " #navigator-toolbox { background: ... } " , it didn't work when I copied it into menubar_color.css so I just stuck it into my_userChrome.css . I'm not sure why it even worked, I thought I was trying to edit the menu bar not the navigation bar. Probably something I'm misunderstanding. Now it looks like this: https://ibb.co/4sPs4H4
It is how I want it to be but the grey shading was still there and text was still black instead of white so I just commented out background-image: linear-gradient ( var ( --toolbar-bgcolor ) ,var ( --toolbar-bgcolor ) ) !important; completely and that worked.
However I still cannot get the min,max,close buttons to not be covered. End result seen here: https://ibb.co/dG7Fz0x
Sorry about the headache, I know you're probably facepalming at my patchwork solutions, I just got started with custom css two days ago and it's been very confusing.
AMGPilot
commented
3 years ago @Jgr9
Hope this is not breaking any rules but I wanted to share this with you.
I found another .css file that changes reverts proton back to the Photon compact style.
Here is the link: https://gist.github.com/intrnl/ef2066b9b97b2b6026dab05a6011f8c0
Thank you!!
RafalRambo
commented
3 years ago Hi. How to fix this contextmenu line, i have enable all proton settings in about:config
Taiyoumaru
commented
3 years ago Hi. How to fix this contextmenu line, i have enable all proton settings in about:config
Uncomment/disable @import "./css/generalui/context_bfrsb_labels_without_icons.css"; /**/ in userChrome.css
Old-Knobby
commented
3 years ago Many thanks for bringing back the disappearing downloads button, with v3.2.2 and 3.2.3. One other minor thing I noticed that's related to this is that, on completion of a download, I used to get an animation of the download 'arrow' getting bigger or popping out towards you (I'm not describing this well!) for a second or so. This no longer happens since updating to FF89. I've checked in 'about:config' and 'browser.download.animateNotifications' is set true so they should, in theory, be present still.
Jgr9
commented
3 years ago @Aris-t2
input.findbar-textbox:focus { border: 1px solid grey !important; / remove this, if you do not want any border / outline: unset !important; }
I may keep Find Bar outline enabled since it changes color when it doesn't Find anything, I'm not sure, but what about getting rid of the Megabar focus border/outline?
Aris-t2
commented
3 years ago @Yaron10
Short answer, the rules do not apply anymore, because not even .tabbrowser-tab::after does add anything to the tab ui.
@mzso No idea, but even if JS could restore something there, it would not help solving it the CSS way.
@Taiyoumaru You could try to overpaint existing caption button which those form lw-themes (not sure it will work on Win7):
.titlebar-button {
-moz-context-properties: unset !important;
}
.titlebar-min {
list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg) !important;
}
.titlebar-max {
list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg) !important;
}
.titlebar-restore {
list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg) !important;
}
.titlebar-close {
list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg) !important;
}@RafalRambo
browser.proton.enabled and browser.proton.contextmenus.enabled have both to be true or both to be false for "context_bfrsb_labels*" to work in Fx89+.
@Old-Knobby That animation is not part of Firefox 89+ anymore.
@Jgr9 I was under the impression the solution posted on the other thread did solve your issue with location bar too.
#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background {
border-color: transparent !important;
}
#searchbar:focus-within {
box-shadow: unset !important;
border-color: transparent !important;
}
moriel5
commented
3 years ago Heads up: I'm not a user of the CSS tweaks here, and on the latest Nightly (91.0a1 5/6/21), it appears to be impossible to disable the new Proton tabs, with no preferences in about:config making any difference (including browser.proton.tabs.enabled.
mzso
commented
3 years ago @Aris-t2 commented on 2021. jún. 6. 22:45 CEST:
@mzso
No idea, but even if JS could restore something there, it would not help solving it the CSS way.
My thinking was, maybe it would be possible to create a global CSS variable.
Taiyoumaru
commented
3 years ago @Aris-t2 You could try to overpaint existing caption button which those form lw-themes (not sure it will work on Win7):
Sadly this did not work (copied code into my_userChrome.css), however it looks like this is code for titlebar buttons. I don't use titlebar, disabled it from Ff customize toolbar options, so what happens then is that buttons move to menu bar, so maybe that's why it isn't working. I tried changing the code to menubar-button etc. but that didn't work.
I know for sure this has always been possible on Win7 since for instance if I activate the very old Yakuza Paint theme it looks like this (with my_userChrome.css disabled): https://ibb.co/7KbXRrp
Back when Classic Theme Restorer was still a thing I used to use Yakuza Paint all the time.
Basically all I'm looking for is menu, navigation, bookmark and tab toolbars to have an identical uninterrupted background (solid color for now, perhaps a picture if I want to change things up in the future)
Speravir
commented
3 years ago With CSSfFx v.3.2.3 the tab close settings are broken. I use only
Never mind, was an embarrassing mistake on updating.tab_close_show_on_hover_only.css, and so I do not use tab_close_icon_size.css, but the close tab is nonetheless now always visible and larger.
What I should have reported earlier:
addonlists_show_buttons_instead_of_menu_popup_compact_view_fx72.css. This does not work that good anymore (probably the buttons for enabling/disabling of addons and themes have to be moved).preferences_alternative_appearance.css. This fixes it (BTW: with 30px it’s kind of a square):
#backContainersButton .button-box {
padding-block-end: 20px !important
}Meta (noticed while searching for the above fix): Wouldn’t it be a good idea, when Fx v.91 has been published, to make a cut and produce a CSSForFx version without all the code that does then not work anymore and also replacing all the custom -moz-selectors where a newer one without vendor prefix is supported (-moz-appearance, -moz-any, -moz-margin-…, -moz-padding-… and may be even more; -moz-proton selectors will also be removed again)?
Speravir
commented
3 years ago Forgotten, instead of an edit a new post – this should in parts actually be discussed in CustomJSforFx, but it is related (note the edits):
The size of browser buttons has decreased (e.g. in nav-bar: home, back/foward, reload). My first thought was give them deliberately more size with explicit height and width values, but this went terribly wrong – they got even smaller! With browser tools I only see
toolbar .toolbarbutton-1 > .toolbarbutton-icon {
width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}One thinks with an explicit value and !important this should be overwritten, but this is not the case. Also, there is no rule for padding, but in the layout tab you see there is some padding (apparently the variable value). Alas, neither setting a different value for the variable nor an explicit padding: <value> did work in the nav-bar. The padding is kept.
Edit:
Whatever I had made wrong this now worked:
#nav-bar #back-button,
#nav-bar #forward-button,
#nav-bar #stop-reload-button,
#nav-bar #home-button {
--toolbarbutton-inner-padding: 0 !important;
}(Should have worked without #nav-bar, too, but it helps me for keeping retrack.)
In the additional toolbar which I’ve added with a userChrome script this is especially hard: Buttons added by scripts behave differently from buttons added by addons with the same code (I had made some adjustments there before reinstalling the first addon).
Edit: Similar to above, but with some additional code (probably necessary due to changes of toolbar height and some extra for the script buttons) it works now, as well.
Jgr9
commented
3 years ago @Aris-t2 You typo'd by name back there. :P Now I had to go dig for it because it hid most of the posts in that thread. I'm surprised I spotted it this time. Man, handling Github forums is weird..... (I think I was also accidentally given credit with incorrect @ several times as well, probably from people quote replying? - seems to be funky) Anyways, looks like it's working - no more blue outline.
I have one other tiny thing that's old, if it's possible to get rid of, just for cleanliness, but it's no big deal: I have an extension for sending the New Tab page straight to my homepage... since FF won't let us do that anymore. But FF notifies me IN the URL bar (not the pop-up alert) just for a moment that the extension is working to send me to my homepage as it does it. It's gray and appears in the URL bar only for a moment. Can I get it to not appear at all? I'm using New Tab Homepage by Ben Basson for reference. (Again, I don't mean the 1-time pop-up alert.)
Corben78
commented
3 years ago Hey there. With v.3.2.4 the tabs_below_navigation_toolbar_fx89 works again, without the tab itself overlapping into the frame of the site below. It also changes the height of the tab bar, which causes the close button now to slightly overlap the tab. I haven't found a variable I could use to change the height. I'd like to just move the tab bar, without other adjustments. Is there a way to do this?
Yaron10
commented
3 years ago @Aris-t2,
Short answer, the rules do not apply anymore, because not even .tabbrowser-tab::after does add anything to the tab ui.
Thanks for testing and replying. I appreciate it.
RafalRambo
commented
3 years ago Hi. Is it possible to reduce the distance between the icons on the toolbar when the "browser.proton.enabled" is enabled?
proton is off:
proton is on:
And one more problem: When the proton is turned on, the sound icon on the tab is on the left and appears only when the mouse is hovering over the tab. Is it possible to set it so that the sound icon is on the right and visible all the time, as with the proton turned off?
proton is off:
proton is on:
Yaron10
commented
3 years ago The following code used to create a separator between unselected tabs.
.tabbrowser-tab:not([selected]):not([beforeselected-visible]):not([beforehovered]):not([last-visible-tab]):not(:hover)::after { background-image: url("TabSeparator.png"); background-position: left bottom 1px; background-repeat: no-repeat; background-size: 2px 100%; opacity: 0.7 !important; width: 2px; }Why shouldn't it work with Proton?
If anyone is interested, you should add:
content: "";
display: block;@RafalRambo
Is it possible to reduce the distance between the icons on the toolbar when the "browser.proton.enabled" is enabled?
Try playing with values:
:root {
--toolbarbutton-outer-padding: 3px !important;
}When the proton is turned on, the sound icon on the tab is on the left and appears only when the mouse is hovering over the tab. Is it possible to set it so that the sound icon is on the right and visible all the time, as with the proton turned off?
Found accidentally, but did not test yet anything myself:
jmcken1
commented
3 years ago I just updated from v3.2.0 to v3.2.4 in the hopes it would bring back the missing downloads button, but contrary to what other people are experiencing, it’s still disappearing for me. Was the downloads-button-goes-bye-bye issue fixed only for one or certain custom icon sets? Or does it only work with Proton enabled? I’m using the “fx45_inverted” icon set on FF v89.0 with Proton disabled. (Pic taken just now after saving a random webpage as a test.)
Mikofox
commented
3 years ago 
Hello, small cosmetic issue that I have not been able to correct for a while. The three buttons being pushed up in the title bar because of my narrowing efforts. So far I've only managed to disappear them completely or show them correctly by showing the Title bar. If it's possible I'd appreciate a tip as to what controls their position.
KimmoK00
commented
3 years ago @Aris-t2
1. compact_menus_proton.css should take care of this issue. 2. classic tabs code removes the space added by Firefox before first tab. It is not present for default tabs. You can remove the space, using this code:#TabsToolbar .titlebar-spacer[type="pre-tabs"], #TabsToolbar .titlebar-spacer[type="post-tabs"] { display: none !important; }I'm a little confused about what i should do. I added the code to the current compact_menus_proton.css, but it didn't work. I also made a new compact_menus_proton.css with only this code, but that didn't work either. Could I have some more detailed instructions? Does userChrome.css need to change a specific setting?
RafalRambo
commented
3 years ago @Speravir
@RafalRambo
Is it possible to reduce the distance between the icons on the toolbar when the "browser.proton.enabled" is enabled?
Try playing with values:
:root { --toolbarbutton-outer-padding: 3px !important; }When the proton is turned on, the sound icon on the tab is on the left and appears only when the mouse is hovering over the tab. Is it possible to set it so that the sound icon is on the right and visible all the time, as with the proton turned off?
Found accidentally, but did not test yet anything myself:
* [Firefox 89. Audio icon back to the right side of the tab](https://old.reddit.com/r/firefox/comments/nqaz9c/) (Reddit, r/firefox) * (Linked from this:) [Anyone got any CSS to put the audible icon back?](https://old.reddit.com/r/FirefoxCSS/comments/nqyhcm/) (Reddit, r/FirefoxCSS)
It is possible I would prefer the options with editing only the "userChrome.css" file, I do not want to change anything in other files because when the update is released I will have to remember what and where I changed.
Aris-t2
commented
3 years ago @moriel5 Firefox 91 will drop disabling Proton. This includes removal of the currently available "Proton" preferences and @media (-moz-proton) @media not (-moz-proton) rules.
@mzso
There are "global" variables for this project, if tab_toolbar_color_proton.css is enabled.
--top_toolbars_background: initial;
--top_toolbars_background_inactive: initial;
--top_toolbars_text: initial;
--top_toolbars_text_inactive: initial;Besides that, CSS can not do much, only overriding "default" colors.
@Taiyoumaru I will look into that.
Edit Found what caused the caption buttons to disappear on Win 7, if menubar_color.css is active.
Uses this:
@media (-moz-os-version: windows-win7) {
@media all and (-moz-windows-compositor) {
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #toolbar-menubar .titlebar-buttonbox-container {
visibility: visible !important;
}
}
}@Speravir
I use addonlists_show_buttons_instead_of_menu_popup_compact_view_fx72.css. This does not work that good anymore (probably the buttons for enabling/disabling of addons and themes have to be moved).
Could you post a screenshot? It still looks the same to me. Dark OS theme support is broken for buttons background color unfortunately.
preferences_alternative_appearance.css
Thanks for the note and the fix.
Meta
I know, the current project is a workaround/fix on top of another workaround/fix, and making a clean cut is a very good idea.
There are many rules and code snippets from the pre-Fx 57 era mainly copy&pasted code from CTR/CTB. I just don't have the time to redo all this.
@Jgr9 Yes, Github post/thread behavior is strange sometimes, but it never war meant to replace a real forum.
Honestly, I have no idea about the add-on behavior and why it notifies there the way it does. Maybe the developer of it has a clue.
@Corben78 I will look into that.
Tab below... feature is a combination of many files. You would need to put them all into one single file.
@jmcken1 You are right, the recent code changes only affected downloads buttons, if the "Proton" pref was enabled. But even without "Proton" the default icon is visible in my tests. At least it is present for me in Fx 89.
@Mikofox
Try this:
.titlebar-buttonbox-container {
margin-top: 4px !important;
}@KimmoK00 1 and 2 were two separate answers to two questions. Custom code always belongs at the end of your userChrome.css/my_userChrome.css.
@RafalRambo Use my_userChrome.css file for custom tweaks not present inside this projects files. It automatically gets imported by this projects userChrome.css and it does not get replaced by "updates".
KimmoK00
commented
3 years ago @Aris-t2 Sorry i misunderstood your answer. My problem is the same: spacing of the Bookmarks in the bookmark folder are too big. Should i edit compact_menus_proton.css? What value should be changed? Or should I create my_userChrome.css? I don't know what I should write there. Apologies for (possibly) stupid questions ...
Mikofox
commented
3 years ago @Aris-t2 Thank you! It was caused by the code below, which I don't remember why or when I put it in there.
/ Caption buttons repositioning/
top: 0px !important; margin-top: -3px !important; left: 0 !important; }
Aris-t2
commented
3 years ago @KimmoK00
If you use custom code posted here on this projects support area, you can add it to your existing userChrome.css file or of course create a new my_userChome.css file and add the code there.
Post a screenshot of your issue.
compact_menus_proton.css comparison:
jmcken1
commented
3 years ago @Aris-t2
@jmcken1 You are right, the recent code changes only affected downloads buttons, if the "Proton" pref was enabled. But even without "Proton" the default icon is visible in my tests. At least it is present for me in Fx 89.
When I open a new window I see the “new” download icon (not the “fx45_inverted” big white arrow) –
– which still disappears the moment I initiate a download, as shown in previous pics.
The reason I disabled Proton is that it was incompatible with a lot of the tweaks I use, as your other post explained. Have all these incompatibilities been fixed in the latest release?
ImSpecial
commented
3 years ago HALP Aris!
What a change FF89 was ugh...
I was hoping to get some help with a few (lol) issues since this update, I took some pics to help explain better so I'll use those and arrows and try to talk about them in order.
First context menu related stuff, I would like to hide the "New Tab" item, also did the Reopen Closed Tab codename get changed at some point, because I had a bit of code that made this always top-level but it now doesn't seem to be the case, the "bit of code" I had is this here:
/* makes tab context menu "Undo Closed Tab" top level */
#context_undoCloseTab {
-moz-box-ordinal-group: 0 !important;Also take note of all those extra separators/dividers in the menus, can these be removed/hidden somehow?
context menu stuff: https://i.imgur.com/oEUJwXx.png https://i.imgur.com/BZeH6YS.png
https://i.imgur.com/wuW1UtO.png https://i.imgur.com/97rTo1J.png
Secondly the gap between the bottom of the top tabs and the URL bar, is there anyway to make the gap a little bigger/higher up (to move tabs up a pixel or two maybe) to make it more constant with the gap below the URL bar and the web page?
Also the colors of the tabs, URL bar and Search bar/box, can these colors be somehow overridden (regardless of theme pic) to better match the middle Search box color?
tab gap / color: https://i.imgur.com/3EyrvDz.png https://i.imgur.com/W6qfQf5.png
https://i.imgur.com/6uIfHVu.png https://i.imgur.com/A48j8EY.png
Lastly which is sorta related to the above color stuff, I downloaded a theme off of AMO;
/shilling... :/
( https://addons.mozilla.org/en-US/firefox/addon/default-dark-original/ )
And while I do love how this makes my tabs look, it changes the colors of the URL + Search box colors, and also now there is no change in tone (light/dark) when active vs. deactivate, again is there a way to override the colors while keeping the theme/addon for the tabs installed?
with add-on colors: https://i.imgur.com/TQ0Zsrz.png https://i.imgur.com/CXdKk5h.png
Okay, that's all I can think of for now.
God I hope this makes coherent sense, I'm literally on 3 hours sleep right now and no caffeine, but this is my only free time really, so good luck reading this and thanks in advance!
Speravir
commented
3 years ago @Speravir
I use addonlists_show_buttons_instead_of_menu_popup_compact_view_fx72.css. This does not work that good anymore (probably the buttons for enabling/disabling of addons and themes have to be moved).
Could you post a screenshot? It still looks the same to me. Dark OS theme support is broken for buttons background color unfortunately.
Hmm, I do not use the dark theme, though.
Screenshots – I made the window narrower, but this does not change the behaviour (looks exactly the same with my default larger window size); in 3 of the images you see parts of the scrollbar on the right:
Side remark; If you look closely you will notice that I’ve hidden the search field in Fx 89. I’ve never used it – no, in fact I once was tricked by this: I had actually searched for a locally installed addon. Code:
/* Hide field for search on addons.mozilla.org*/
search-addons { visibility: hidden !important; }
/* with "display:none" the whole topbar disappears including the button for additional actions */Disregard all the stuff above about my context menu stuff, with a little figuring out I was able to pretty much clean it all up myself.
Still, the tab gap and color changes are still ??? to me, so don't disregard those parts. :P
forestsw
commented
3 years ago Once again, I do not know how to thank you enough for all the work you do with this.
I just upgraded to firefox 89 and had to go through all the install / changes once again. I am having trouble with having "text and icons" to show on the Bookmarks Toolbar. Is there any way you can help?
thank you in advance.
EdwardKiefer
commented
3 years ago Just heads up if you use default dark theme this line messes up all login's, whole page is white with unreadable info.
userContent.css /* logins page appearance - [only use one at a time] ****/ @import "./css/aboutlogins/aboutlogins_alternative_appearance.css"; /**/
Aris-t2
commented
3 years ago @jmcken1
This will be fixed on next release/pre-release.
@ImSpecial
Secondly the gap between the bottom of the top tabs and the URL bar, is there anyway to make the gap a little bigger/higher up (to move tabs up a pixel or two maybe) to make it more constant with the gap below the URL bar and the web page?
I think the fastest way to increase the gap between urlbar and tabs in your configuration is modifying navigation toolbars top padding.
#nav-bar {
padding-top: 4px !important;
}Overriding urlbar/searchbar bg color:
#urlbar-input,
#urlbar-scheme,
.searchbar-textbox {
background-color: blue !important;
}Tab color settings from custom_tab_color_settings.css still work for me:
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
background: blue !important;
}
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:not(:hover):not([selected]) .tab-content {
background: red !important;
}
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
background: yellow !important;
}@Speravir Looks like many rules cannot be applied anymore. Their nodes are gone. I will try to include a workaround on next release/pre-release.
@forestsw
toolbar_mode_icons_and_text.css still works for me.
Are you using the latest files? Could you post a screenshot?
@EdwardKiefer Thanks for the note. This will be fixed on next release/pre-release.
forestsw
commented
3 years ago Hi, here is the screen shot. It is the icons just below the BACK / FORWARD buttons.
forestsw
commented
3 years ago Sorry, i forgot to say, yes i believe i am using the latest files. Yesterday when i updated to Firefox 89, everything went haywire. So I downloaded the newest files, then installed them and went through my customizations.
I appreciate any help.
Aris-t2
commented
3 years ago I found what was causing the issue. 3.2.5 will take care of this, 3.2.5pre2 already does.
Speravir
commented
3 years ago I use findbar_on_top settings. In Fx89 and using a custom theme this looked odd (ignore the white 1px wide line, it’s from an individual style rule which is not necessary anymore as I noticed with this screenshot):
The brighter area is caused by findbar_on_top_fx84.css, line 46 in active version. So, it’s probably not only active with (lightweight) themes. but nonetheless I added the according restricting selector below.
The top and bottom padding is now the default, but can be removed with
#main-window:-moz-lwtheme :is(.browserContainer, #viewSource) :is(findbar, #FindToolbar) {
padding-block: 0 !important;
}(Seems in Fx89 only findbar would be necessary, right?)
The padding on the left is caused by findbar_on_top_close_at_findbars_start_fx84.css, line 11ff., but I could fix this with different values for both properties (it’s 20px in the moment):
#main-window:-moz-lwtheme :is(.browserContainer, #viewSource) :is(findbar, #FindToolbar) .findbar-container {
padding-inline-start: 24px !important;
margin-inline-start: -24px !important;
}(The devtools tell me that the close button has a width of 24px.)
Together with a top-border I intentionally added it looks now like this:
Speravir
commented
3 years ago Follow-up to myself on 8th June regarding sound icons:
@RafalRambo
When the proton is turned on, the sound icon on the tab is on the left and appears only when the mouse is hovering over the tab. Is it possible to set it so that the sound icon is on the right and visible all the time, as with the proton turned off?
Found accidentally, but did not test yet anything myself: […]
- (Linked from this:) Anyone got any CSS to put the audible icon back? (Reddit, r/FirefoxCSS)
The advertised user script does not work for me (very probably too different requirements compared with my settings), but in further postings working CSS can be found – I included the exact source; alas, both people do not tell us where they got it from:
/* https://old.reddit.com/r/FirefoxCSS/comments/nqyhcm/anyone_got_any_css_to_put_the_audible_icon_back/h0eti2o/ */
/* show audio icon as a separate icon in compact mode */
.tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
grid-template-areas: "a s";
}
.tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
/*.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }*/
.tab-icon-overlay {
padding: 0 !important;
}
.tab-icon-overlay:hover {
background: none !important;
}I never fully understood grid CSS, but this works great! The sound icon will still be on the left of the tab title, but does not hide anymore the favicon (frankly hiding is a no-go for me).
Additional benefit: Because the padding has been set to zero the icons appear larger than in default state.
Note that I commented out one rule. I added another more specific one instead:
/* https://old.reddit.com/r/FirefoxCSS/comments/nqyhcm/anyone_got_any_css_to_put_the_audible_icon_back/h0sissv/ */
.tab-icon-stack:is([soundplaying], [muted], [activemedia-blocked]) > * {
opacity: 1 !important;
}In addition I added some colour. This is my code, but, of course, this is very much individual taste:
.tab-icon-overlay[soundplaying] {
fill: #058B00 !important;/* var(--green-70) */
}
.tab-icon-overlay[muted] {
fill: #D70022 !important;/* var(--red-60) */
}
.tab-icon-overlay[activemedia-blocked] {
fill: #FFE900 !important;/* var(--yellow-50) */
}(The variables do not work here.)
And another unrelated thing I noticed, but haven’t searched for a solution, yet: The overflow area is much too narrow, now. (Edit: For this see my later answer.)
9jkh
commented
3 years ago Hi Aris,
I was under the mistaken impression that 90 would be the next esr version, instead I've learned that it will be the 91, where the ability to remove proton will vanish.
I'm preparing to get ready for the 91, at which point I will go to the esr, in order to avoid any more UI catastrophes/annoyances for at least another year. Sorry if this is perhaps a bit premature, since the 91 won't be out for a while:
In order to test how things would likely look in the 91, I enabled everything proton from about:config for the 89, removed what I had found to be the solution to get tabs below bookmarks bar, at least in the 89, with proton disabled (for that, please see "Solution for me" https://github.com/Aris-t2/CustomCSSforFx/issues/308#issuecomment-855234754)
and then, per your instructions here
https://github.com/Aris-t2/CustomCSSforFx/issues/308#issuecomment-855236338
I combined all those files as standalone and entered them in userChrome.css
This does work well to get tabs below the bookmarks bar as they used to appear pre-89, however I'm now missing the close x button on the tabs - which used to be visible on all tabs. What seems to have replaced it is a very faint, square close button, along with a tooltip, at the center right side of tab, which only appears on hover.
For screenshot of that, please see https://i.postimg.cc/zBBPTHHv/no-x-on-tab-proton-enabled-css-combined.jpg
From the latest v3.2.4 I did try adding _tab_close_alwaysvisible.css, as standalone css (which I already have from my very early xml release - removed before adding the newer one from the 3.2.4), but that doesn't do anything now.
So I'm wondering if you have any suggestion to get the original close x button back, or is proton making that impossible?
mzso
commented
3 years ago @Aris-t2 commented on 2021. jún. 8. 18:03 CEST:
@moriel5
Firefox 91 will drop disabling Proton. This includes removal of the currently available "Proton" preferences and @media (-moz-proton) @media not (-moz-proton) rules.@mzso
There are "global" variables for this project, iftab_toolbar_color_proton.cssis enabled.--top_toolbars_background: initial; --top_toolbars_background_inactive: initial; --top_toolbars_text: initial; --top_toolbars_text_inactive: initial;Besides that, CSS can not do much, only overriding "default" colors.
So my thinking was maybe userjs might be able to pass the OS accent color to one of these variables to override "initial" with that.
I guess this only works with proton enabled? For the time being I have it disabled.
Something else:
The URLbar's background has changed even though Proton remains disabled.
Old:
New:
That's regardless of the actual color used. Dark/light or custom theme and the failing "-moz-win-glass" (Mozilla grey) are all affected. Not sure what happened there when the CSS didn't change
Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!
Continued from https://github.com/Aris-t2/CustomCSSforFx/issues/3, https://github.com/Aris-t2/CustomCSSforFx/issues/41, https://github.com/Aris-t2/CustomCSSforFx/issues/88, https://github.com/Aris-t2/CustomCSSforFx/issues/109, https://github.com/Aris-t2/CustomCSSforFx/issues/133, https://github.com/Aris-t2/CustomCSSforFx/issues/163, https://github.com/Aris-t2/CustomCSSforFx/issues/189, https://github.com/Aris-t2/CustomCSSforFx/issues/211, https://github.com/Aris-t2/CustomCSSforFx/issues/241, https://github.com/Aris-t2/CustomCSSforFx/issues/273 and https://github.com/Aris-t2/CustomCSSforFx/issues/308.
Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.
Custom JS scripts to restore more classic features https://github.com/Aris-t2/CustomJSforFx
Things this project will not target/recreate
Things not possible with CSS