[create-theme]: macOS inspired Titlebar

[ctrl-vfr]

Name

macOS inspired Titlebar

Description

A simple, macOS-inspired titlebar mod for Zen Browser

Homepage

https://github.com/ctrl-vfr/macOS-inspired-titlebar

Image

https://ctrlv.blob.core.windows.net/blob/images/macOS-inspired%20Titlebar.png

Type

• JSON Color Theme

Theme Styles

.titlebar-buttonbox {
  padding: 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--mod-macos-titlebar-button_gap, 8px) !important;
}

.titlebar-button {
  width: var(--mod-macos-titlebar-button_size, 12px) !important;
  height: var(--mod-macos-titlebar-button_size, 12px) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.titlebar-button > .toolbarbutton-icon {
  display: none !important;
}

.titlebar-button:hover {
  transform: scale(1.1) !important;
}

.titlebar-close {
  background-color: var(--mod-macos-titlebar-close_color, #ff5f57) !important;
  border: 1px solid
    color-mix(
      in srgb,
      var(--mod-macos-titlebar-close_color, #ff5f57) 85%,
      black
    ) !important;
}

.titlebar-close::before {
  content: " " !important;
}

.titlebar-close:hover {
  background-color: var(--mod-macos-titlebar-close_color, #ff5f57) !important;
}

.titlebar-close:hover::before {
  content: " " !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #7a251f !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.titlebar-min {
  background-color: var(
    --mod-macos-titlebar-minimize_color,
    #ffbd2e
  ) !important;
  border: 1px solid
    color-mix(
      in srgb,
      var(--mod-macos-titlebar-minimize_color, #ffbd2e) 85%,
      black
    ) !important;
}

.titlebar-min::before {
  content: " " !important;
}

.titlebar-min:hover::before {
  content: " " !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #995700 !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

.titlebar-max,
.titlebar-restore {
  background-color: var(
    --mod-macos-titlebar-maximize_color,
    #28ca42
  ) !important;
  border: 1px solid
    color-mix(
      in srgb,
      var(--mod-macos-titlebar-maximize_color, #28ca42) 85%,
      black
    ) !important;
}

.titlebar-max::before,
.titlebar-restore::before {
  content: " " !important;
}

.titlebar-max:hover::before,
.titlebar-restore:hover::before {
  content: " " !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #0d5d1a !important;
  font-size: 8px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

Readme

# macOS-inspired Titlebar for Zen Browser

A simple, elegant macOS-inspired titlebar mod for Zen Browser that transforms your browser's window controls into beautiful circular buttons resembling macOS traffic lights.

## What It Does

This mod transforms the default Zen Browser titlebar buttons into:
- **Close button**: Red circular button (top-left)
- **Minimize button**: Yellow circular button (middle)
- **Maximize/Restore button**: Green circular button (right)

## License

MIT License

Preferences

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-1681 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.