Line below tab bar

0072973

Hi! I'm relatively new to vivaldi and loving the customization - but I have a few questions:

Is the option to load and use a custom css still working? The pinned post is from 2016 so just checking..
How do I remove the line below the tab container when the address bar is hidden? And how can I add a pixel or two more padding to the bottom which is transparent or has the background color?

My goal is to go from this:

to something like this:

I've seen some similar posts but as far as I can tell I can't use what they did to make it work.

Would really appreciate any pointers!

nomadic

@0072973 You can try this. It won't add any padding above or below the tabs, so let me know if that is something you want.

(And for anyone wondering about the nesting: https://caniuse.com/css-nesting)

.address-bottom #tabs-tabbar-container.top,
.address-bottom-off #tabs-tabbar-container.top,
.address-top-off #tabs-tabbar-container.top,
.address-top #tabs-tabbar-container.bottom,
.address-top-off #tabs-tabbar-container.bottom,
.address-bottom-off #tabs-tabbar-container.bottom {
  border-top-width: 0;
  border-bottom-width: 0;

  & .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after,
  & .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):before {
    content: unset;
  }

  & .tab-position .tab:not(.tab-in-accordion, .tab-accordion) {
    border-radius: var(--radiusHalf);
  }
}

0072973

@nomadic You just made my week! Thank you!!

How can I add padding below the tabs? I was thinking of something like 6px. Also there's a very faint line left visible - is there a way to remove that as well?

nomadic

@0072973 The default padding above is 7px, so made it configurable with a CSS variable called --tabPadding. You can change it at the top of the CSS below. It will control the padding both above and below the tabs.

Also removed the faint line that was a box-shadow.

#browser {
  --tabPadding: 6px;
}

.address-bottom #tabs-tabbar-container.top,
.address-bottom-off #tabs-tabbar-container.top,
.address-top-off #tabs-tabbar-container.top,
.address-top #tabs-tabbar-container.bottom,
.address-top-off #tabs-tabbar-container.bottom,
.address-bottom-off #tabs-tabbar-container.bottom {
  border-top-width: 0;
  border-bottom-width: 0;
  padding-top: calc(var(--tabPadding) / var(--uiZoomLevel));
  padding-bottom: calc(var(--tabPadding) / var(--uiZoomLevel));
  box-shadow: unset !important;

  /* Hide fillets that transition active tab to border bar */
  .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after,
  .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):before {
    content: unset;
  }

  /* Give tabs full rounded corners */
  .tab-position .tab:not(.tab-in-accordion, .tab-accordion) {
    border-radius: var(--radiusHalf);
  }
}

.address-bottom.tabs-top,
.address-bottom-off.tabs-top,
.address-top-off.tabs-top {
  /* Make window controls span the new full height of the tab bar */
  &.win .window-buttongroup button:not(.vivaldi) {
    height: calc(2 * var(--tabPadding) + 30px) !important;
  }

  /* Keep the tab bar centered for lower --tabPadding values */
  &:not(.fullscreen, .disable-titlebar) #header {
    min-height: calc(30px / var(--uiZoomLevel)) !important;
  }

  /* Keep the menu button centered */
  & .vivaldi {
    margin-top: var(--tabPadding) !important;
  }
}

0072973

@nomadic thank you so much with this and other little things I found going through the forum I'm now really happy with my setup.

Mioni

@0072973 Hi, can you share the css? i like this style tab