Minimal Zen Workspace Button (userChrome.css)

Minimal Zen Workspace Button (userChrome.css).md

Minimal Zen Workspace Button (userChrome.css)

Subtle pill background + hover/active states for the Zen Browser Workspaces button.

Preview

Docs

Live editing: https://docs.zen-browser.app/guides/live-editing

CSS

#zen-workspaces-button {
  /* === Container styling === */
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  padding: 4px !important;
  container-type: inherit !important;
  width: auto !important;

  /* === General workspace button styles === */
  toolbarbutton.subviewbutton {
    max-width: 22px !important;
    min-width: 22px !important;
    max-height: 22px !important;
    min-height: 22px !important;

    /* === Active workspace === */
    &[active="true"] {
      background-color: rgba(255, 255, 255, 0.12) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* === Hover on inactive workspace === */
    &:not([active="true"]):hover {
      background-color: rgba(255, 255, 255, 0.09) !important;
    }

    /* === Workspace Icons === */
    .zen-workspace-icon {
      font-size: 1rem;
    }
  }
}