zen-browser / theme-store

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

[create-theme]: Bigger Mute Button #495

Closed jvabn closed 1 month ago

jvabn commented 1 month ago

Name

Bigger Mute Button

Description

Enlarges mute button, hides sound labels, and replaces tab icon with mute button when not expanded.

Homepage

https://github.com/jvabn/zenbrowser-themes

Image

https://i.imgur.com/jsbpSqJ.png

Type

Theme Styles

.tab-icon-overlay {
  opacity: 1 !important;
  margin: initial !important;
  margin-right: 32px !important;
  transform: translate(160%, 0%) scale(1.6) !important;
  color: light-dark(black, white) !important;
  background-color: transparent !important;
  transition: 0.3s !important;
}

.tab-icon-overlay:hover {
  color: var(--zen-primary-color) !important;
  transition: 0.3s !important;
}

.tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
  display: block !important;
}

/* Hide sound labels */
.tab-icon-sound-label, 
.tab-icon-sound-playing-label {
  display: none !important;
}

/* Mute button takes place of tab icon when tabs are not expanded */
@media not (-moz-bool-pref: "zen.view.sidebar-expanded") {
  .tab-icon-overlay {
    margin: auto 30px !important;
    transform: scale(1.6) !important;
  }
}

Readme

# Bigger Mute Button
**Description:** 
- Increases size of mute button and hides the tab's sound labels. 
- The tab icon is replaced by the mute button if the tabs are not expanded.

Preferences

No response

github-actions[bot] commented 1 month ago

Thank you for your contribution! :tada:

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

Here are some details about your submission:

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