Update the tab style to match with the new AdwTabBar style

[rashidi77]

According to Alexander Mikhaylenko's tweet, AdwTabBar style has got updated. Which tab is selected should be much more obvious now, especially in dark variant or with only 2 tabs open. Here are the screenshots of the new style :

I think adw-gtk3 theme should be updated as well to match with the new style.

[lassekongo83]

Is this coming for libadwaita in GNOME 42, or is it supposed to be released in a later version?

Just checked on gnome-console to see if the tabs could be mimicked. I got kind of close, except accurate separators seems to be impossible.

[rashidi77]

Is this coming for libadwaita in GNOME 42

I think it's not related to Gnome version. It's an update for Libadwaita itself and there is a plan to backport it to the already existing Libadwaita version. I'm not a developer so don't know specific details, but I saw a merged MR in the Libadwaita gitlab repo : https://gitlab.gnome.org/GNOME/libadwaita/-/merge_requests/513

[Radical4ever]

I saw its finally merged, and nautilus 43 alpha now has this style of tabs. Elementary os has this style with gtk3 on their terminal. So it will be awesome if this is part of the theme :3

[lassekongo83]

It would be interesting to see the css for the elementary terminal to see if/how they did separators, but I can't find any source files. :(

[Radical4ever]

It would be interesting to see the css for the elementary terminal to see if/how they did separators, but I can't find any source files. :(

Maybe its part of the elementary theme (the elementary stylesheet)

[lassekongo83]

Can't find anything recent there: https://github.com/elementary/stylesheet/blob/master/src/gtk-3.0/widgets/_notebooks.scss

[Radical4ever]

Guess we'll have to wait until a way is possible to do it

[zoli111]

What do you think about this? This code adds separators to the left side of tabs, except for the first tab, the checked and the hovered tab and the ones before them.

tabs > tab {
    margin: 4px 0;
    box-shadow: -1 0 0 0 white;
    /*Eg. 4px less tall separators*/
    /*box-shadow: -5 0 0 -4 white;*/
    margin-left: 1px;
}

tabs > arrow:down + tab,
tabs > tab.first-child {
    box-shadow: none;
}

tabs > tab:checked + tab,
tabs > tab:checked,
tabs > tab:hover + tab,
tabs > tab:hover {
    box-shadow: none;
    border-radius: 8px;
}

[lassekongo83]

Kind of, but it has to be only on the .reorderable-page and libhandy tabbar tabs. I made a branch with some of these changes. I use a background-image instead of box-shadow as it work better with border-radius. But it's still kind of buggy.

[zoli111]

Sure, I just wanted to show you this somewhat hacky solution, because I did similar while working on my theme. I hope it could help a bit.

[zoli111]

I have tested the changes. It looks good except for the :backdrop styling which looks like this.

[Radical4ever]

I have tested the changes. It looks good except for the :backdrop styling which looks like this.

I love it!!

[zoli111]

tabs > arrow:down + tab,

I made a mistake here: arrow.down should be used instead of arrow:down. This should fix the separator appearing before the first tab.

[lassekongo83]

These new styles should be working now. Maybe there are some bug here and there. If nothing comes up I'll add it to the main branch if the new libadwaita changes makes it to stable.

[Radical4ever]

i tried the branch and, its pretty cool (nautilus almost looks like his gtk4 beta 😄) just the tabs looks a bit collapsed to each other, you find any solution to that?

[zoli111]

I tested Libadwaita apps on the upcoming Fedora beta, and there are no separators next to tabs in :hover state like in my sample code I sent this thread. I also measured the spacing between (5px) and around tabs (also 5px).

So I made some changes in my code sample which should fully mimic the new Libadwaita tabs' appearance.

tabs {
    /*complement spacing around all tabs to 5px*/
    padding: 5px 2px 5px 3px;   
}

/*No need to set border-radius here, because tabs have the same background color as their surroundings*/
tabs > tab {
    /*Make shadowbox 4px narrower, and offset it by -5px horizontally to make 1px wide line*/
    box-shadow: -5px 0 0 -4px gray;
    /*Border is used to put the line to the center of the space between tabs*/
    /*Padding cannot be used because already set*/
    border-left: 2px solid transparent;
    margin-right: 3px;
}

tabs > arrow.down + tab,
tabs > tab:first-child,
tabs > tab:checked + tab,
tabs > tab:hover + tab {
    box-shadow: none;
}

tabs > tab:checked,
tabs > tab:hover {
    box-shadow: none;
    border-radius: 8px;
    /*Use margin and reset border when tabs are focused/selected*/
    border-left: none;
    margin-left: 2px;
}

Image: Tab backgrounds and borders visualized with colors:

[zoli111]

I made these changes on my fork. For me it works well with Nautilus and Gnome Terminal. What is your opinion about it?

[lassekongo83]

I haven't tried it yet. But normal tabs needs to be untouched. Only tabs on .reorderable-page and libhandy's tabbar should use the new style.

[lassekongo83]

New tree https://github.com/lassekongo83/adw-gtk3/tree/tabs-rework2

It should be nearly done. I've managed to do some spacing around the tabs. Some things aren't perfect, but close enough.

1. Tabs are slightly thicker than libadwaita. As far as I know nothing can be done about it.
2. Tabbar itself is 1-2px thicker. It's because of the close button on the tabs that needs special treatment.
3. The close button itself is smaller than libadwaita/libhandy.
4. Libhandy tabs are not exactly matched to .reorderable-page tabs, but close enough.