#staszek4957_code

1 messages ¡ Page 1 of 1 (latest)

dim spireBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1336621893838438431

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

mystic oriole
#

Hi, can you put a screenshot?

#

And a full Appearance API's options you are using

dim spireBOT
zealous dew
#

The second screnshot shows the issue. The icon has a variable colour and does not change like the text when the hover is on the tab. const appearance: Appearance = {
theme: 'stripe',
variables: {
colorPrimary: '#1A6673',
colorText: '#7a7a7a',
iconColor: '#7a7a7a',
colorIconTabSelected: '#1A6673',
fontFamily: 'Mulish, Arial, Helvetica, sans-serif'
},
rules: {
'.Tab': {
color: 'var(--colorText)',
backgroundColor: '#f5f5f5',
fontWeight: 'bold'
},
'.Tab--selected': {
color: '#ffffff',
backgroundColor: 'var(--colorPrimary)',
fontWeight: 'bold'
},
'.Tab--selected:hover': {
color: '#7a7a7a',
backgroundColor: '#E5EBF0',
fill: '#7a7a7a' // This does not change the icon color
},
'.TabIcon:hover': {
fill: '#7a7a7a' // This works, but I need hover on Tab, not Icon
}
}
};

obraz.png obraz.png
vernal jacinth
#

It seems like by default the --selected:hover color is the same as --selected. I am not sure you can override that.

#

Do you think something else overrides the color of the icon? It should be controlled by color, not fill though.

zealous dew
#

no, I dont have the other styles.

vernal jacinth
#

The fill is defined in .p-TabIcon--selected. But I am not sure how to override it.

#

I think the limitation is that selected tabs are not supposed to react to :hover.