Any way to make integrated window buttons in Linux like those in Windows?

HauntedBunnies

Hello, I've been using Vivaldi on Windows for a while and I want to switch to Linux. I like using the integrated window buttons in Vivaldi with vertical tabs, but they're very different on Linux for some reason. Pictures (left: Windows; right: Linux):

I like that the Windows buttons are bigger and take up the whole height of the address/top bar, and the Linux buttons make it a bit harder to flick my wrist to the top right and close the window. I don't think this is an OS issue, because other applications, like Obsidian, have the same integrated window management buttons between Windows and Linux. Is there any way I can make the buttons look more like they do on Windows?

luetage

You can change UI buttons with CSS. Take a look at the modding forum board. The question is whether it’s worth it. All of it can be done with shortcuts and you gain space hiding the buttons instead of changing them.

mib2berlin

@HauntedBunnies
Hi, you can use "Use Native Window" in Settings > Appearance, then Vivaldi use the system window/icons.
It cost even more space but some user love it, me not.

Cheers, mib

HauntedBunnies

@luetage Thanks, I'll take a look. I don't know any CSS yet but I might try to fiddle with it. I might end up using more shortcuts if I switch to Linux, but it's muscle memory now, so I'm not sure. I find the decision to make the buttons different really weird, since they also just look strange as tiny little buttons compared to everything else on the address bar.

@mib2berlin Yeah, I know about that setting. Like I said, I prefer saving the space and love having the buttons streamlined with my address bar.

HauntedBunnies

@luetage I managed to get most of what I want by blindly copying CSS related to the window buttons from the Windows version of Vivaldi to the Linux version, and messing around with it. I'm not sure how to make the buttons highlight properly, though, and the minimize button is hard to press, likely because it's the leftmost button and while the buttons themselves are bigger, the space made for them is not. I'm not sure how to fix this, but I think I can figure it out if I tried. I should definitely learn CSS, it was kinda fun to blindly slap together.

If anyone wants the quick fix, here it is, as described above. There's definitely a lot I could cut off and I could fix the issues I mentioned, but I don't feel like figuring that out right now. I will update if/when I get around to fixing up the CSS.

#browser.linux .window-buttongroup button.window-close {
    background-color: transparent;
    width: 46px;
    height: 46px;
    border: 0;
    padding: 0;
}

#browser.linux .window-buttongroup button.window-minimize {
    background-color: transparent;
}

#browser.linux .window-buttongroup button.window-maximize {
    background-color: transparent;
}


.disable-titlebar#browser.linux .window-buttongroup button {
    height: 46px;
}


#browser.linux .window-buttongroup button {
    width: 45px;
    height: 25px;
    margin-left: 1px;
    transition: background 0.3s, fill 0.3s;
    border-radius: 0;
    fill: currentColor;
}


#browser .window-buttongroup button {
    width: 25px;
    height: 20px;
    border: 0;
    background-color: transparent;
    margin-right: 0;
}


#browser.linux .window-buttongroup {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    line-height: initial;
}


#browser .window-buttongroup {
    display: flex;
    z-index: 1;
    scale: calc(1 / var(--uiZoomLevel));
    fill: currentColor;
}