Unsolved Reduce main toolbar height

shakil6

Any help on css code to reduce the height of main toolbar in no-titlebar mode. I want to get rid of extra space around(top and bottom) adress bar.

luetage

@shakil6 I can share what I do, you will have to adapt that to your operating system and preferences.

/* header */
.window-buttongroup {
  display: none !important;
}
.linux #tabs-container:not(.none).top,
#browser.linux:not(.native).address-top
  .toolbar:has(.window-buttongroup.on-mainbar) {
  padding-right: unset;
}
.alt#browser.linux:not(.native).address-top
  .toolbar:has(.window-buttongroup.on-mainbar) {
  padding-left: unset;
}
.alt.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi {
  top: unset;
}
#browser.linux.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
  min-height: calc(35px / var(--uiZoomLevel));
}
#browser.linux.address-top
  .toolbar:has(.window-buttongroup.on-mainbar)
  .vivaldi {
  height: 35px;
  width: 34px;
  margin: 0;
  padding: 0;
}
#browser.linux.address-top
  .toolbar:has(.window-buttongroup.on-mainbar)
  .vivaldi
  svg {
  fill-opacity: 0.33;
}
#browser.linux.address-top
  .toolbar:has(.window-buttongroup.on-mainbar)
  .vivaldi
  .expand-arrow {
  display: none;
}

shakil6

@luetage Thank you so much brother. It works like a charm! got rid of all ugly spaces and also able to reduce the size of window buttons which was huge and uglier.

remi.flores

@luetage Is there any chance for you to tell us what to change for a Windows application ? (newbie in css here...)

DoctorG

@remi-flores In the CSS code In all names where you see the word .linux replace it with .win

remi.flores

@DoctorG All right, I thought that was more complicated than that. In any case, There is no window controls anymore with this as the window-buttongroup is set to none. But when I comment this portion. Buttons are on top of the extension menu...
Is there any way to keep the window control button while shrinking the address bar ?

DoctorG

@remi-flores please ask @luetage , i do not much modification in my Vivaldi 6.6 to be able to help much.

sjudenim

@remi-flores

This is how I do it, but I didn't have a look @luetage's code to see what's going on there.

Give it a try, if it doesn't work I will stop being lazy and actually look at his code

#browser.win.address-top .toolbar:has(.window-buttongroup.on-mainbar) {
  min-height: unset !important;
  padding-right: calc(46px * 3) !important;
}

luetage

@remi-flores Take this opportunity to get into CSS. It might be a little painful and slow in the beginning, but you will gain experience fast. Meanwhile I can’t tell you how to adapt this for Windows, don’t have access to a Windows install. Window buttons and address bar spacing are different between operating systems. Your best bet is to inspect the UI and find out what is going on.

remi.flores

@sjudenim it gives back the space for the button (sliding the extension a bit left), but no buttons are there...

remi.flores

@luetage Yes I should ! I never took the actual time to dive into it. But i'll have to eventually

sjudenim

@remi-flores

If you are using luetage's code, this part needs to be removed.

.window-buttongroup {
  display: none !important;
}

The code that I provided is all that is needed though