search

jscher2000 / userchrome-dot-org

Site dedicated to the userChrome.css file
10 stars 1 forks source link

FF96 Update Makes Bottom Placed Container Color Line to Appear Thin in Selected Tabs #5

Closed loxia01 closed 1 year ago

loxia01 commented 2 years ago

After FF96 update the container color line appear very thin in the selected tab, while it appears with normal thickness in inactive tabs. I have used your userChrome.org CSS code to move the color line to the tab bottom. Tested with your updated userChrome from yesterday (1/12/2022).

Is there a fix for this? I have tested some solutions but haven't had any luck.

I use the native Light theme, but the issue is present in the native Dark theme too. Screenshots:

FF96 Screen 2022-01-13 190430

before FF96 Screen 2022-01-13 190216

loxia01 commented 2 years ago

Solution: https://www.reddit.com/r/FirefoxCSS/comments/s3am1g/ff96_bottom_moved_container_color_line_now_very/

jscher2000 commented 2 years ago

I can't replicate the problem with the settings in the below screenshot (or with your code from Github). I can't think of what is going on here.

TabStyler-4px-connect-compact-vertical-linebottom

loxia01 commented 2 years ago

It is only the selected/active tab that is affected. I can replicate it with the above selection of your code. In FF96 they have changed vertical position of the container color line one pixel to the bottom when tabs are active/selected. Actually I realized now, you don't have to add extra code for selected tabs, just subtract one more pixel from margin-top: in the existing code :

/* Move container color bar to bottom of tab */

.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
  margin-top: calc(var(--tab-min-height) - 3px) !important;
}
jscher2000 commented 2 years ago

My mistake, the System theme is different than the Light theme (no tab border). I think I've found a way to position the line reasonably well for a variety of themes and combinations of settings.