search

zen-browser / theme-store

🎨 Theme repository for @zen-browser!
https://zen-browser.github.io/theme-store/themes.json
MIT License
130 stars 38 forks source link

TitleBarButton UI Tweaks Update #550

Open DaitiDay opened 1 month ago

DaitiDay commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

DaitiDay commented 1 month ago

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 commented 1 month ago

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

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

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 commented 1 month ago

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 commented 1 month ago

btw in linux it looks like this image