TitleBarButton UI Tweaks Update

[DaitiDay]

This is an update to the TitleBarButton UI Tweaks that fixes the spaces.

/* TitleBarButton UI Tweaks */
.titlebar-buttonbox {
  padding: 4px !important;
}

.titlebar-button:hover {
  background-color: var(--button-hover-bgcolor) !important;
}

.titlebar-min {
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-max {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-close {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-right: 1px !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-close:hover {
  background-color: var(--buttons-destructive-hover-bgcolor) !important;
}

[sebascontre]

Hi! Amm, don't want to bother, but in Windows, when the window is maximized, the .titlebar-max button is hidden, and a .titlebar-restore button is shown in their place, and that one doesn't style with this theme. I fixed for myself editing my userChome file, but since you are updating it, I think to leave a comment so it can be fix officially.

Just replace
.titlebar-max {'
for
.titlebar-max, .titlebar-restore {

[DaitiDay]

Mmm, I don't know how updating the update should work, but I'll post here the "final" update adding your fix:

/* TitleBarButton UI Tweaks */
.titlebar-buttonbox {
  padding: 4px !important;
}

.titlebar-button:hover {
  background-color: var(--button-hover-bgcolor) !important;
}

.titlebar-min {
  padding-left: 10px !important;
  padding-right: 10px !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-max, .titlebar-restore {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-close {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-right: 1px !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-close:hover {
  background-color: var(--buttons-destructive-hover-bgcolor) !important;
}

[oDiamondDusto]

Hi, just to report that the "Minimize button" while the browser is Maximized still have sharp edge rectangle highlight.

[DaitiDay]

I think this is the theme's final form

/* TitleBarButton UI Tweaks */
.titlebar-buttonbox {
  padding: 4px !important;
}

.titlebar-button {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.titlebar-button:hover {
  background-color: var(--button-hover-bgcolor) !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-close:hover {
  background-color: var(--buttons-destructive-hover-bgcolor) !important;
}

.titlebar-max, .titlebar-restore {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.titlebar-close {
  margin-right: 1px !important;
}

[nanoraptor]

The rounded pill shaped design of the icon selection is not present while maximized in the minimize button. See screenshots for more context.

Also provide the same amount of padding (same as that of X button) for the icon that is in the topleft corner

I don't know where to raise this issue as you (@DaitiDay) are the author of TitleBarButton UI Tweaks, I thought it would be appropiate to raise this here.

[nanoraptor]

I think this is the theme's final form

/* TitleBarButton UI Tweaks */
.titlebar-buttonbox {
  padding: 4px !important;
}

.titlebar-button {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.titlebar-button:hover {
  background-color: var(--button-hover-bgcolor) !important;
  border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
}

.titlebar-close:hover {
  background-color: var(--buttons-destructive-hover-bgcolor) !important;
}

.titlebar-max, .titlebar-restore {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.titlebar-close {
  margin-right: 1px !important;
}

is it possible for you to update these stuff in the store itself or is it being updated there?

[ErdemGKSL]

btw in linux it looks like this