Address bar and tabs height

[IanSJohnston]

I am running Vivaldi on a 2k monitor, and as such the address bar and tabs heights are a little small (coming from FireFox). WIn10 set to 100% scaling.

It would be great to see a settings control for adjusting the height of both.

I know you can scale the entire UI, but that scales my bookmarks window on the left which isn't what I want.

FYI. I am using the SUBTLE theme.

Ian.

[Pesala]

@IanSJohnston These kind of changes are easily done with a few lines of CSS code. Note that 16px = 12point.

/* Bold Font in Tabs*/
#browser .tab-position .title 
{font-family: "lato"; font-size: 16px;  font-weight: 500; color: black;}

/*Large Fonts in URL Field*/
.UrlField, .OmniDropdown, .SearchField {font-size:16px; padding-bottom:2px;}
.OmniLinkItem-Url{height:16px; overflow:visible;}

/*Large Fonts in Status Field*/
.StatusInfo .StatusInfo-Content
{font-family: Lato !important;
font-size: 16px !important;}

[Zalex108]

@IanSJohnston

For the above,
Read: https://forum.vivaldi.net/topic/10549/modding-vivaldi

[barbudo2005]

Lato font is not part of Windows, but it is a very good and readable font.

Download from:

https://www.latofonts.com/lato-free-fonts/

[IanSJohnston]

This seemed to work for me. I couldn't make the actual URL entry height bigger, but I could make the panel higher so the url entry itself wasn't so lost.

/* Bold Font in Tabs */
#browser .tab-position .title {
    font-family: "Arial";
    font-size: 14px;
    font-weight: 500;
    color: black;
}

/* Large Fonts and Adjusted Height in URL Field */
.mainbar, .UrlBar-AddressBar, .UrlBar-Background, .SearchField {
    font-size: 14px;
    height: 52px !important; /* Adjusted height with !important */
    line-height: 12px; /* Adjust line height to vertically center text */
    padding: 9px 5px; /* Adjust padding as needed */
}

/* Large Fonts in Status Field */
.StatusInfo .StatusInfo-Content {
    font-family: Arial !important;
    font-size: 16px !important;
}

/* Increase Line Spacing in URL Bar Dropdown */
.OmniDropdown-Items {
    line-height: 24px; /* Adjust line spacing as needed */
}

[IanSJohnston]

Update, have now made the tabs slightly taller.

/* Bold Font in Tabs */
#browser .tab-position .title {
    font-family: "Arial";
    font-size: 13px;
    font-weight: 500;
    color: black;
}

/* Adjust Tab Size */
.tab {
    height: 50px !important;
    min-height: 40px !important;
    min-width: 120px !important;
    position: relative;
    bottom: 5px; /* Adjust the value to move the tabs upward */
}

/* Large Fonts and Adjusted Height in URL Field */
.mainbar, .UrlBar-AddressBar, .UrlBar-Background, .SearchField {
    font-size: 14px;
    height: 52px !important; /* Adjusted height with !important */
    line-height: 12px; /* Adjust line height to vertically center text */
    padding: 9px 5px; /* Adjust padding as needed */
}

/* Large Fonts in Status Field */
.StatusInfo .StatusInfo-Content {
    font-family: Arial !important;
    font-size: 16px !important;
}

/* Increase Line Spacing in URL Bar Dropdown */
.OmniDropdown-Items {
    line-height: 24px; /* Adjust line spacing as needed */
}

[Zalex108]

@IanSJohnston

Pics?

[IanSJohnston]

Here's a pic.

You can see space around the address entry, and the tabs are a little taller.

[IanSJohnston]

Slight tweak to position of the buttons on the address bar.....to match FireFox more closely due to my muscle memory not working with the default Vivaldi layout!