Remove tab spacing in non maximized window

rsiska

Can someone help me please to remove the anoying gap above tabs, when window is not maximized please? On maximized window I can turn on Remove Tab Spacing in Maximized Windows, but there is no option for non maximized window. I guess only custom CSS is the way.
alt text

nomadic

@rsiska You can try this. I only tested it on Windows, so the Vivaldi menu button and window controls might be misplaced on Linux.

/* Remove tab spacing in non-maximized windows */
.win.normal #tabs-tabbar-container.top,
.linux.normal #tabs-tabbar-container.top {
  padding-top: 0;
}
.tabs-top.address-top#browser.win:not(.fullscreen, .disable-titlebar) #header {
  min-height: calc(30px / var(--uiZoomLevel));
}
.tabs-top#browser.win .window-buttongroup button:not(.vivaldi) {
  height: 30px;
}
.tabs-top .vivaldi {
  margin-top: 0;
}

rsiska

@nomadic Thank you very much. It is working well, but the Vivaldi menu button is misplaced on Windows too. Any way how to fix it please?
alt text

nomadic

@rsiska Is that screenshot from an older version of Vivaldi? The menu button doesn't have the dropdown arrow and the icons are thicker than the current version 6.5.3206.55.

I only tested it with the current version, but it still should be possible to adapt it; just let me know what version it is.

Without knowing more, I would suggest trying adding this (or replacing the last 2 CSS rules):

.tabs-top#browser.win .window-buttongroup button:not(.vivaldi) {
  height: 30px !important;
}
.tabs-top .vivaldi {
  padding: 0;
  height: 30px;
}

rsiska

@nomadic This was my fault, because 1st screenshot is from home (Windows 10 and current version of Vivaldi) and the second, I was trying at work (Windows 7 - yeah, don't tell anyone, and the maximum version is much older there) At home it works as your first solution and second works at work too. Sorry for the confusion.
Thank you.

Now, while we are at it, it is possible to remove those slight radiuses on all four corners of tabs please? And also, I would like to set the height of those tabs to something larger.

nomadic

@rsiska said in Remove tab spacing in non maximized window:

Now, while we are at it, it is possible to remove those slight radiuses on all four corners of tabs please?

The best way to do that is natively with Vivaldi's theme settings. Go to vivaldi://settings/themes/ → Editor → Settings and lower the Corner Rounding value.

That will also eliminate any rounding elsewhere in the UI, so if you want to limit it to just that tab bar, then you can use this CSS:

/* Remove corner rounding on tabs */
#tabs-tabbar-container .tab-strip {
  --radius: 0px;
  --radiusHalf: 0px;
}

And also, I would like to set the height of those tabs to something larger.

That can be done with this CSS, but it will break the drag down tab thumbnail preview feature. The tab height is configurable with the CSS variable near the top called --tabHeight. The default tab height is 30px, so use a value higher than that.

#browser {
  /* default is 30px */
  --tabHeight: 32px;
}

/* Increase the height of the tabs */
.tabs-top,
.tabs-bottom {
  & #tabs-tabbar-container {
    height: var(--tabHeight) !important;
  }
  & #tabs-container {
    min-height: var(--tabHeight) !important;
  }
  &:has(#tabs-subcontainer) #tabs-tabbar-container {
    height: calc(2 * var(--tabHeight) + 1px) !important;
  }
  & #tabs-subcontainer {
    flex-basis: calc(var(--tabHeight) + 1px) !important;
  }
  & .toolbar-tabbar > .button-toolbar > button,
  & .toolbar-tabbar > .toolbar-group > .button-toolbar > button {
    min-height: var(--tabHeight);
  }
  & .tab-position .tab .tab-header {
    flex: 0 0 calc(var(--tabHeight) - 1px);
  }
}

/* Changes that are specific to when the tab bar is set to the top */
.tabs-top {
  /* Make window controls span the new full height of the tab bar */
  &.win .window-buttongroup button:not(.vivaldi) {
    height: var(--tabHeight) !important;
  }

  /* Keep the workspace button centered */
  & .button-toolbar.workspace-popup.tabbar-workspace-button {
    margin-bottom: calc((var(--tabHeight) - 30px) / 2) !important;
  }

  /* Keep the menu button centered */
  & .vivaldi {
    margin-top: calc((var(--tabHeight) - 30px) / 2) !important;
  }
}

/* Keep the workspace button centered when the tab bar is set to the bottom */
.tabs-bottom .button-toolbar.workspace-popup.tabbar-workspace-button {
  margin-top: calc((var(--tabHeight) - 30px) / 2) !important;
}

rsiska

@nomadic This is great. Everything is working flawlessly. Thank you very much for your effort. Now I am ready to start using Vivaldi.

lutogin

Strange, but it's not working for me(