Godie
Seems like other code combined with this are incompatible (with a tab with sound) in my particular case, first I have to figure it out what of my other code is in conflict, rare all this situation. With your latest code, the issue persist.
decrease the maximum width
Exactly, the default is so large, like a sausage.
I don't know why that happens, but the problem persists, I delete that code block and the problem disappear. I'm in Windows 10 with Firefox-developer-edition 141.0b3, maybe other code is doing that? Or in combination with another thing, how to know. Here is a video with the issue: https://imgur.com/a/2ZLIYVp
Wow, I don't know how it works but works, I will research 'CSS container', to learn. I appreciate your help. 💙
Excellent, thank you. 👍
I tested it and don't work for me, I said I was in Developer-edition, maybe in release version is different. Here is a video with the issue, the sidebar doesn't expand when it is on the right side: https://imgur.com/a/zqsWpqf
Thank you, I will add it immediately :)
Hi, for some reason when the sidebar-main is expanded there are 2 styles for 'tools-and extensions', when there are just a few icons they display in vertical, and when there are more than a few they display in horizontal, and I would like to have always the styles for 'tools-and-extensions' in horizontal when sidebar is expanded, even if there are just a few of icons. But I can't apply code when they are in 'vertical + sidebar expanded' and don't affect when the sidebar is collapsed.
I see, thanks for the answer. 🫱🏻🫲🏼
Thank you so much, so now all the rules needs to be variables, I don't understand very well but it seems to work:
/* Normal tabs - Muted icon */
.tab-audio-button[muted] {
--my-position: absolute !important;
--my-top: calc(var(--tab-height-personal)/2 - 14px) !important;
--my-inset-inline-start: 14px !important;
--my-background-image: url("../icons/paused.svg") !important;
--my-background-color: transparent !important;
--my-background-size: 12px !important;
--my-box-shadow: none !important;
--my-fill: var(--lwt-tab-text) !important;
--my-opacity: 0.8 !important;
--my-clip-path: xywh(1px 1px 86% 86% round 50%) !important;
&:hover {
--my-background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg") !important;
--my-background-size: 8px !important;
--my-box-shadow: inset 0 0 0 1px var(--contrast-color), inset 0 0 0 2px var(--lwt-tab-text) !important;
--my-fill: var(--lwt-tab-text) !important;
--my-opacity: 1 !important;
}
}
.button-background {
position: var(--my-position) !important;
top: var(--my-top) !important;
inset-inline-start: var(--my-inset-inline-start) !important;
background-image: var(--my-background-image) !important;
background-color: var(--my-background-color) !important;
background-size: var(--my-background-size) !important;
box-shadow: var(--my-box-shadow) !important;
opacity: var(--my-opacity) !important;
fill: var(--my-fill) !important;
clip-path: var(--my-clip-path) !important;
}