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. 🫱🏻‍🫲🏼

Thanks. 😄👍 💙

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;
    }

thanks you so much, the scrollbar isn’t in the right position but I thinks is perfect enough solution. 💙

hi, I had in that way in the past, but I wanted to remove the need to align the image (when menubar is on, when not, when bookmarks-bar is on, when not, where using tre-tabs and its necessary to align again). I will end removing the position: sticky from .sticky-container

the element with position: sticky makes it like float, always visible, and seems like the element don’t reserve space and other elements can go behind it, I don’t know how to solve it without remove that behavior (always visible on top).

I didn’t notice that change in your file, my mistake, thanks for the answer.

thanks for your time, I appreciate it. I will see how I resolve this with all your code. 💙

mmm, I’ll check it, so the ‘menu_buttons_on_right’ is it no longer possible?

Ty, I’ll do that.

The new style don’t put the menubar (Alt) into the navbar, there is no possible?

thanks, I will try that v2.

ooooh, I wonder if I give a higher zindex to all the navigator-toolbox it could cause random problems but I will try.

Edit: Sadly changing the z-index to all navigator-toolbox cause other issues in my theme and I should change a lot of code, hate this Firefox change jeje.

Edit2: I tried this code and seems to work in some cases, I wonder what damage this could cause but the time will say:

#navigator-toolbox{
        z-index: unset !important;
    }

I’ll try it, hope works fine, ty. 💜

@MrOtherGuy@lemmy.world I’m gonna need your help again, sorry. I used your code to gradient border around selected tab and works fine but I see a little flash in certain situations that makes me nuts; this is the code:

.tabbrowser-tab[selected] > .tab-stack::before{
    content: "";
    display: flex;
    min-height: inherit;
    border-radius: var(--tab-border-radius);
    grid-area: 1/1;
    margin-block: var(--tab-block-margin);
  /* Edit gradient colors here */
    background: var(--general-color) !important;
    border-radius: 0px 2px 0px 0px !important;
}

When I click to select the tab, sometimes the tab is first colored with the border color and then it displays correctly, Here is a SS with the problem, there is a way to delay the colored after the tab is completely charged or some trick?