A bit of CSS help needed

User Help for Mozilla Firefox
Post Reply
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

A bit of CSS help needed

Post by kukla »

Just did my yearly ESR update from the 91.12 to the 102.1. At least so far, the only problem with the 102.1 is with the tab.

Tab on the 102 looks like this - no outline and extends beneath the toolbar:

Image

Would like it to look like this - from the 91:

Image

Once I have the basic CSS for this, I can play around with it.

Thanks
mgagnonlv
Posts: 848
Joined: February 12th, 2005, 8:33 pm

Re: A bit of CSS help needed

Post by mgagnonlv »

Have you tried to look at Aris css modifications? They work on all computer platforms. I don't know how my setup would look on a Mac, but I definitely have well defined tabs.

For information, visit: https://github.com/Aris-t2/CustomCSSforFx
and download here (link at the bottom): https://github.com/Aris-t2/CustomCSSfor ... /tag/4.2.0
Michel Gagnon
Montréal (Québec, Canada)
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: A bit of CSS help needed

Post by BruceAWittmeier »

I am not on a MAC, however try this and see what you get.

Select from the main Menu:
Help > Trouble Shoot Mode > Restart

Troubleshoot Mode option will disable:
- extensions
- themes
- custom settings applied through about:config
- tweaks from userChrome.css file
- tweaks from userContent.css file

After viewing the troubleshooting mode you can revert right back to your customized mode just by restarting your browser.
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

Thanks both. Actually, besides the tabs issue, seeing some more things now that need attention - among them, URL/Search field outlines are too thick. Aris has been a very big help over the years, and will see what's up with https://github.com/Aris-t2/CustomCSSfor ... /tag/4.2.0
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

Awaiting help from Aris. But any help here still appreciated. In the meantime, just discovered that with the 102esr the login here has reverted to the all yellow background. Unable to find my original post asking for a fix to return this to the all white background ("View your posts" errors out).

This was the fix that someone suggested and which was working perfectly in the 91esr until now.

All yellow background again, instead of white. (Note, as a test, if I try a different color for the background, e.g. a total black, it ends up blending the yellow with the black, resulting in a dark plum color, but doesn't remove the original yellow). Maybe someone can suggest a new fix.

Image

The CSS that was working until now:

@-moz-document url-prefix("http:"), url-prefix("https:") {
input:autofill {
color: #0d0a09 !important;
background-color: f6f2f1 !important;
filter: none !important;
}
}
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: A bit of CSS help needed

Post by dickvl »

There is a pref on the about:config page to set the background color of a form that is auto-filled.
ui.-moz-autofill-background = rgba(255, 249, 145, .5)
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

Many thanks dickvl, set to 255, 255, 255, .5 and now background is white with black text. The way it used to be in the 91.
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

Have been trying in vain to get a border outline around tabs in the 102esr, which if not against a dark background just blur together.

Image

Elsewhere, it was suggested to enter, in userChrome.css:

Code: Select all

/* tabs border */
.tab-background {
    border: 1px solid Black !important;
} 
But this is having zero effect, which I'm told is most likely due to some other css causing interference - have tried everything I can think of but unable to find what that might be.

Maybe nothing else, but wonder if there might be some different css for tabs border outlining to try. This is Mac, but apparently OS is not supposed to make any difference.
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: A bit of CSS help needed

Post by dickvl »

Multiselect seems to be using box-shadow and outline.
https://searchfox.org/mozilla-release/s ... bs.css#554

Did you check this in the Browser Toolbox ?
https://developer.mozilla.org/en-US/doc ... er_Toolbox
User avatar
ltsnow
Posts: 1173
Joined: March 23rd, 2006, 1:49 pm
Location: Valdosta, GA

Re: A bit of CSS help needed

Post by ltsnow »

I use the Aris custom css as my core and if you want other modifications for your "my_userChrome" file you can go to this website:

https://www.reddit.com/r/FirefoxCSS/

Just do some searching and you can usually find anything you want. I have found a ton of great code there.
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

@Itsnow: Thanks, already know about the redditCSS. In fact, that's where I got the tabs border code, plus some great help for 2 other issues.

Posted almost a week ago to Aris discussions, with no reply; seems to be away, and recently only present very sporadically. The other problem I have is that I'm still using a very early Aris-t2 release, from 2018, which at the time employed a central XML repository to which all the @ settings refer, now discontinued. With his help and others over the years, even with the older release I'm still using, I've always been able to resolve any UI issues with new Firefox versions ...until now.

I suppose I could just wipe everything and use the latest 4.2.0 release, but that would mean finding equivalents to my original settings in the XML release, 99% still working, with some additions over the years, and require an enormous amount of trial and error. Not to say I haven't been going through an enormous amount of trial and error for this damn tabs border outline issue. (Have gone through all the code I can see in my userChrome.css that might have any relationship to the tabs border missing, deleted it, saved and restarted, but no dice). Have even tried adding various CSS from the 4.2.0, but that has gone nowhere, at least for the tabs problem.

@dickvl: Went to the searchfox link you provided, but apart from trying out some various CSS from there that I thought might be related to the tabs border problem, I have no idea what to do with searchfox. Not really sure what to do with "Multiselect seems to be using box-shadow and outline". Not finding it in searchfox, nor anywhere in my userChrome.css. Plus, for the browser toolbox, besides not knowing what I'd be looking for there, the items I should be checking in advanced settings appear with no checkboxes next to them, even in the completely working 91.13esr. Thanks, but unable to jump right in to this without a bit more help.
User avatar
ltsnow
Posts: 1173
Joined: March 23rd, 2006, 1:49 pm
Location: Valdosta, GA

Re: A bit of CSS help needed

Post by ltsnow »

I played around with this and here is some code that will definitely change the borders of the tabs:

#navigator-toolbox {
--lwt-tabs-border-color: transparent !important; }
#tabbrowser-tabs {
--lwt-tab-line-color: transparent !important; }

Transparent, of course, is for no color and you can just change the color to whatever you want. Not sure if that's what you're looking for.

BTW. why don't you just have the tabs on top, which of course is the default? It would eliminate part of your problem (extending beneath the toolbar.
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

Oh man, thanks, I had my hopes up, but that didn't work. Used the following:

Code: Select all

#navigator-toolbox {
--lwt-tabs-border-color: Black !important; }
#tabbrowser-tabs {
--lwt-tab-line-color: Black !important; }
This may in the end turn out to be something ridiculously simple that I'm overlooking. Btw, tabs beneath toolbar fixed using this from Aris 4.2.0

Code: Select all

/* make tabs look like tabs again */
.tab-background {
  border-radius: 0px !important;
  margin-block: 0px !important;
}

.tab-background[multiselected=true],
.tab-background[selected=true] {
  background-color: var(--toolbar-bgcolor) !important;
  background-image: var(--toolbar-bgimage) !important;
}
User avatar
dickvl
Posts: 54145
Joined: July 18th, 2005, 3:25 am

Re: A bit of CSS help needed

Post by dickvl »

I use code like this to get some separators:

Code: Select all

 *|*:root {
  --panel-font-size: 1em !important;
  --tab-min-height: 30px !important;
  --tab-border-radius: 4px !important;  /*4px*/
  --tab-block-margin: 0px !important; /*4px*/
 }

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

 .tabbrowser-tab {
   padding-inline: 0px !important;
 }

 .tabbrowser-tab .tab-content {
   padding-block: 0px 0px !important;
 }

 .tab-background:is([multiselected="true"],[selected="true"]) {
   border-top-color: var(--tabs-border-color) !important;
   border-top-style: solid !important;
   border-bottom-color: transparent !important;
 }

 .tab-background:not([selected=true],[multiselected=true]) {
   border: 1px solid rgba(0,0,0,.20) !important;
   border-top-color: transparent !important;
   border-bottom-color: transparent !important;
   background-color: color-mix(in srgb, currentColor 5%, transparent) !important;
 }

 .tab-background {
  border-radius: var(--tab-border-radius) !important;
  margin-block: var(--tab-block-margin) !important;
 }

/* userContext - tab-context-line */
.tab-context-line {
  -moz-box-ordinal-group: 1;
  margin-inline: 10px !important;
}

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  background-color: var(--identity-icon-color) !important;
  margin: 0 0 !important;
}
kukla
Posts: 968
Joined: December 30th, 2008, 3:59 pm

Re: A bit of CSS help needed

Post by kukla »

Thanks dickvl, will try that code as soon as I get a chance.
Post Reply