[SOLVED] Increase the size of window button hitbox?

OboTheHobo

I've recently switched to Linux and have been using Vivaldi. One thing has been bothering me, however. The window buttons (close, maximize, minimize) are a bit small. The main thing that annoys me is that the hitbox doesn't extend to the very top right corner of the screen, meaning I can't ram my mouse into the corner and click, which is something I prefer to be able to do. I could change it to use the native window, but that makes the tabs offset from the top of the screen which I don't like. It seems like this is possible with CSS modding but I don't really know CSS and all of the mods I can find online only make visual changes, which I don't care much about; I'd just like to extend the hitbox. Does anyone know of a mod that does this or can point me in the right direction as to how to make this myself?

kichrot

@OboTheHobo you should use the following selectors in the CSS mod you want:

#browser.win .window-buttongroup

#browser.win .window-buttongroup button.window-minimize

#browser.win .window-buttongroup button.window-restore

#browser.win .window-buttongroup button.window-maximize

#browser.win .window-buttongroup button.window-close

Which properties to change for these selectors depends on your needs. Experiment.

OboTheHobo

So I did a bit more searching and found this snippet, and tried using it:

#browser.win .window-buttongroup button.window-minimize {
    transform: translate(-5px, -3px) !important;
}

#browser.win .window-buttongroup button.window-restore,
#browser.win .window-buttongroup button.window-maximize {
    transform: translate(-5px, -3px) !important;
}

#browser.win .window-buttongroup button.window-close {
    transform: translate(-5px, -3px) !important;
}

#browser.win .window-buttongroup {
    right: 0px !important;
    top: 0px !important;
}

problem is, it's not doing anything at all. I tried using those same selectors and changing the margin and padding parameters to 0px, tried it with padding-right, padding-top, margin-right, margin-top and none of those did anything either. I have the CSS modding all set up but for whatever reason none of these are actually doing anything.

nomadic

@OboTheHobo I am not on a desktop right now, but the .win in #browser.win means that CSS will only work on Windows.

Either just drop the .win or replace it with the one for Linux. Probably best to add the Linux class, whatever it is, so you don't have any issues with specificity in overriding the default CSS.

Look on the modding forum for the guide on inspecting the UI, so you can find the proper class name.

OboTheHobo

@nomadic So I'm getting pretty confused now. I added this declaration while inspecting the browser on vivaldi://inspect and it worked fine:
Screenshot from 2023-03-08 17-15-31.png
(underlined is the declaration I added)
This works fine and does almost exactly what I need it to do, still a few changes I'd like to make but I just need to get it working at all first. So then I made a .css file to the folder vivaldi is reading from (I already confirmed it is successfully reading from this folder) with the following contents:

#browser.linux .window-buttongroup {
    transform: translate(5px, -5px) !important;
}

Because that declaration worked when inspecting I assumed it would work now, but it's still doing nothing. This is my first time really working with CSS, so I kinda have no idea what I'm doing here... is there something really simple I'm missing? I appreciate the help.

OboTheHobo

and turns out it wasn't working because I had a space in the file name... honestly kinda funny. I'll ask again if I run into any more issues, lol

OboTheHobo

alright, I'm sure someone can do this better but I got it working how I'd like it, so I'm gonna go ahead and throw it in here in case someone else wants this same thing fixed, as I find it so much better when the close button reaches to the very very top right of the screen. Here's the CSS:

#browser.linux .window-buttongroup {
    transform: translate(7px, -7px) scale(1.5) !important;
}
.toolbar-tabbar.sync-and-trash-container {
    transform: translate(-25px, 0px) !important;
}

technically the buttons go off the screen but since the buttons are rounded squares that was the easiest way I could figure out how to make it so the button extends to the very top right pixel. Again, I'm sure someone could do it better, but this is simple and it works.