Adjust the heights of the status bar and the whole toolbar area at the top

drkh

I feel the status bar is too narrow vertically and the whole toolbar area at the top is kind of big.

Can we increase the height of the status bar to make mouse hover the buttons more easily and decrease the height of the whole toolbar area at the top to make more room for the page content (convenient for some pages I view frequently)?

I may zoom out User Interface more from Settings > Appearacne, but the status bar will become even smaller. So perhaps what I need is a fixed value for the height of the status bar? I gauge the screen and found 25px can be suitable.

Pesala

@drkh Just to confuse people your screenshot says the opposite of your text, but I am sure it can be done.

My method is to assign single-key shortcuts b and s to toggle the toolbars on/off to save space by showing them only when I need them.

drkh

@pesala said in Adjust the heights of the status bar and the whole toolbar area at the top:

@drkh Just to confuse people your screenshot says the opposite of your text,

Sorry. Replaced it with the correct screenshot.

drkh

I myself searched for the CSS codes and found the following:

#statusbar
{
padding: 25px; !important;
}

But it doesn't work.

Anyone, please?

luetage

@drkh You have a semicolon after 25px and then you write important and then another semicolon. This isn't valid css. To make things easier you could use a proper text editor which automatically notices errors in code. Or let your code be checked online by some tool.

sjudenim

@drkh

Here is a portion of the code I"m using, This should address the size and positioning of the elements but you will need to fool around with the values to get something you're happy with,

#footer {
    --baseHeight: 3.25em;
    height: var(--baseHeight) !important;
}

#footer button {
    margin: auto;
    height: var(--baseHeight) !important
}

#footer .zoom-control {
    height: calc(var(--baseHeight) * 0.6);
    margin: auto;
}

drkh

@luetage

Thank you very much for reminding me. I should have paid more attention.

But even without those two semi-colons, that script doen't work. It was used for some non-browser software. So it probably should not work in Vivaldi anyway.

@sjudenim

The status bar is much better now. Thanks a lot.

The original status bar:

After being modified:

The new status bar zoomed in by 300%:

The sizes of the buttons in the status bar remain the same, though. Is it possible to increase their sizes?

sjudenim

@drkh

This will increase their size (keep in mind they will become blurry the bigger you make them. They are only 16x16 images)

#footer button svg {
    height: 20px !important;
    width: 20px !important;
}

If like me, you don't like those zoom buttons, you can remove the borders and just add a couple of dividers instead. (you can over write the zoom control in the above code with this)

#footer .zoom-control {
    border-left: 1px solid var(--colorFgAlpha) !important;
    border-right: 1px solid var(--colorFgAlpha) !important;
    height: calc(var(--baseHeight) * 0.6);
    margin: auto;
}

#footer .zoom-control > span input[type=button] {border: none}

drkh

@sjudenim

When zoom control buttons are removed, I like it very much. Simple, tidy, crisp.

The button size is not affected even when the height of the status bar is increased in large number of pixels.

edit:

I disabled custom.js and let custom.css only contain your codes for increasing status bar height and for enlarging status bar buttons. But the button size remains 16x16 px.

I use Vivaldi 2.0.1309.37 x64 stable.

drkh

@sjudenim

As for the above codes for setting the size of the status bar buttons, which doesn't work in my Vivaldi, I should have provided more info about how I had customized my Vivaldi, but when I made my request I didn't realize that I should do that. Sorry.

In my Vivaldi, the extension buttons are moved to the status bar, as this pic shows:

From other sources I learned that the extension buttons also have to be enlarged to a certain degree enough for the other buttons to be enlarged, and that can be accomplished by the following codes:

.extensions-wrapper button img {
    height: 18px !important;
    width: 18px !important;
}

So now the status bar looks like this: