CustomCSSforFx icon indicating copy to clipboard operation
CustomCSSforFx copied to clipboard

"open a new tab" button background now gray

Open joefiesta opened this issue 10 months ago • 2 comments

Does the issue occur without any files inside /chrome/ folder?
-> no

Issue description, userChrome.css/userContent.css 'settings' the issue occurs with and steps to reproduce the issue:

I have no idea what .css file causes this. I have no idea what the name of this field would be so I can search for it in the .css files. How would I find out?

"open a new tab" and "list all tabs" icons on tabs toolbar has a gray background, making the icons near impossible to see.

Does the issue occur with the most recent version of CustomCSSforFx (release/test/dev build)?
I did nothing to change anything.  This simply started to happen.

I aM USING CSS 4.5.2

Screenshots showing the issue (drag & drop images into this post):

Image

System information

like what? I deleted all the instructions like i was told to.

Windows 10 FF 137.0 css 4.5.2

joefiesta avatar Apr 02 '25 17:04 joefiesta

This must be related to tab toolbars settings inside tabs_below_navigation_toolbar.css. You might want to check that file? How does everything look, if you do not enable tabs_below_navigation_toolbar.css.

What is the result, if you are using Windows 10s default theme?

Aris-t2 avatar Apr 08 '25 13:04 Aris-t2

  1. tabs_below_navigation_toolbar.css a. Removing this DOES FIX THE PROBLEM.
    b. I have made no modifications to that file

  2. Which windows theme I am using matters in one regard
    a. With the HIGH-CONTAST theme, the "add new tab" and "list all tabs" icons have a border.
    b. With the default Windows Theme ("windows") this border does not exist.
    This presents no problem for me. I like the border.

  3. I make my life kinda difficult with the .CSS changes. I do not modify ANY of the Aris .CSS code.
    a. I rename the User.chrome.css file to Aris.4.x.x.UserChrome.css b. I create my own JSP.UserChrome.css file where I put all my includes and modified commands. c. UserChrome.css them includes (a) and then (b) above.

Am I crazy? I don't know, but 40 years of coding has taught me to leave vendor stuff alone if possible.

  1. So, I tried making the following changes as follows: a. In my user chrome (3b), I now include my own tabs_below_navigation_toolbar.css, the beginning of which is now: `:root { --tabs_toolbar_color_tabs_not_on_top: linear-gradient(#f9f9fa,#f9f9fa); --tab-min-height_tnot: 32px; --tab_below_navigation_toolbar_bottom_padding: calc( var(--tab-min-height_tnot) + 5px ); --tab_below_navigation_toolbar_bottom_padding_macOS: calc( var(--tab-min-height) + 8px ); --tab_below_navigation_toolbar_toolbox_top_padding_macOS: calc(-1px + var(--tab-min-height)); }

#TabsToolbar { position: absolute; display: block; bottom: 0; width: 100vw; background-clip: padding-box; /* color: var(--toolbar-color); / / original / color: #035F81 !important; / dark teal / / jsp / background-color: #DDAACC !important; / medium mauve * / /* jsp */ z-index: 2; }

b.  In the past, these 2 color statements were in not in the include, but hard-coded in Jsp.UserChrome.cass.     And, they worked fine with the Windows default theme.  

c. This DID NOT CHANGE THE COLORS OF THE "add new tab" and "list all tabs" icons. shucks!

What did I do wrong?

joefiesta avatar Apr 08 '25 17:04 joefiesta