New Mod: Zen Traffic Lights

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/CODE_OF_CONDUCT.md

@@ -0,0 +1,18 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
+
+## Our Standards
+Examples of behavior that contributes to a positive environment for our community include:
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+
+## Enforcement Responsibilities
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces.
+
+[See full text](https://www.contributor-covenant.org/version/2/1/code_of_conduct/code_of_conduct.md)

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/CONTRIBUTING.md

@@ -0,0 +1,27 @@
+# Contributing to Zen Traffic Lights
+
+First off, thank you for considering contributing to Zen Traffic Lights! It's people like you that make the Zen community great.
+
+## How Can I Help?
+
+### Reporting Bugs
+- Use the [Issues](https://github.com/GoldLion123RP/zen-traffic-lights/issues) tab to report bugs.
+- Provide a clear description of the issue and your Zen Browser version.
+- Include screenshots if possible!
+
+### Suggesting Enhancements
+- We love new ideas! Open an issue to discuss proposed changes.
+- Explain why the enhancement would be useful.
+
+### Pull Requests
+1. Fork the repo and create your branch from `main`.
+2. If you've added code that should be tested, add tests.
+3. Ensure your code follows the existing style.
+4. Issue that pull request!
+
+## Style Guide
+- Keep CSS clean and commented.
+- Use CSS variables for colors and sizes.
+- Ensure compatibility with both standard and sidebar layouts.
+
+Thank you for your support!

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/LICENSE

@@ -0,0 +1,23 @@
+Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
+
+Copyright (c) 2026 Rahul
+
+This theme is licensed under the Creative Commons
+Attribution-NonCommercial-ShareAlike 4.0 International License.
+
+You are free to:
+- Share — copy and redistribute the material in any medium or format
+- Adapt — remix, transform, and build upon the material
+
+Under the following terms:
+- Attribution — You must give appropriate credit, provide a link to the
+  license, and indicate if changes were made.
+- NonCommercial — You may not use the material for commercial purposes.
+- ShareAlike — If you remix, transform, or build upon the material, you
+  must distribute your contributions under the same license as the original.
+- No additional restrictions — You may not apply legal terms or
+  technological measures that legally restrict others from doing anything
+  the license permits.
+
+To view a copy of this license, visit:
+https://creativecommons.org/licenses/by-nc-sa/4.0/

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/chrome.css

@@ -0,0 +1,141 @@
+/* ============================================================ */
+/* ZEN TRAFFIC LIGHTS (OFFICIAL SUBMISSION VERSION)            */
+/* ============================================================ */
+
+:root {
+  --zen-exit-size: 13px;
+  --zen-exit-gap: 5px;
+  --zen-exit-red: hsl(0, 50%, 50%);
+  --zen-exit-yellow: hsl(60, 50%, 50%);
+  --zen-exit-green: hsl(130, 50%, 40%);
+  --zen-exit-grey: var(--zen-colors-border, #4d4d4d);
+  --zen-exit-trans: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* DEEPENED COLORS FOR LIGHT MODE VISIBILITY */
+@media (prefers-color-scheme: light) {
+  :root {
+    --zen-exit-red: hsl(5, 95%, 45%);
+    --zen-exit-yellow: hsl(38, 100%, 45%);
+    --zen-exit-green: hsl(135, 85%, 35%);
+    --zen-exit-grey: #8a8a8a;
+  }
+}
+
+/* 1. PREFERENCES: BUTTON SIZE */
+@media -moz-pref("mod.zen-traffic-lights.button_size_large") {
+  :root {
+    --zen-exit-size: 15px;
+    --zen-exit-gap: 7px;
+  }
+}
+
+/* Container Spacing */
+.titlebar-buttonbox {
+  margin-right: 20px !important;
+}
+
+.titlebar-buttonbox,
+.titlebar-buttonbox-container {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  height: auto !important;
+}
+
+/* Sidebar Fixes */
+#browser-sidebar .titlebar-buttonbox-container {
+  padding: 12px 0 !important;
+  margin-right: 0 !important;
+  flex-direction: row !important;
+}
+
+/* Base Button Styling */
+.titlebar-button {
+  appearance: none !important;
+  -moz-appearance: none !important;
+  list-style-image: none !important;
+  background-image: none !important;
+  width: var(--zen-exit-size) !important;
+  height: var(--zen-exit-size) !important;
+  min-width: var(--zen-exit-size) !important;
+  min-height: var(--zen-exit-size) !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  margin-left: var(--zen-exit-gap) !important;
+  cursor: pointer !important;
+  border: none !important;
+  box-shadow: none !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  background-size: 0px !important;
+  transition: var(--zen-exit-trans) !important;
+  background-color: var(--zen-exit-grey) !important;
+
+  /* AGGRESSIVE ICON HIDING */
+  color: transparent !important;
+  fill: transparent !important;
+  fill-opacity: 0 !important;
+}
+
+/* Hide Default Icons */
+.titlebar-button > .toolbarbutton-icon,
+.titlebar-button > .toolbarbutton-badge-stack,
+.titlebar-button > image {
+  visibility: collapse !important;
+  display: none !important;
+  opacity: 0 !important;
+}
+
+/* 2. PREFERENCES: BOLD TACTILE ANIMATIONS */
+@media -moz-pref("mod.zen-traffic-lights.animations_enabled") {
+  .titlebar-button:hover {
+    transform: scale(1.15, 1.4) !important;
+    filter: brightness(1.2) !important;
+    border-radius: 12px !important;
+  }
+  .titlebar-button:active {
+    transform: scale(0.8) !important;
+    transition: transform 0.05s ease !important;
+  }
+}
+
+/* --- COLORS & MODES --- */
+
+/* MODE: COLORS ALWAYS */
+@media not -moz-pref("mod.zen-traffic-lights.colors_on_hover") {
+  .titlebar-close { background-color: var(--zen-exit-red) !important; }
+  .titlebar-min { background-color: var(--zen-exit-yellow) !important; }
+  .titlebar-max, .titlebar-restore { background-color: var(--zen-exit-green) !important; }
+}
+
+/* MODE: COLORS ONLY ON INDIVIDUAL HOVER */
+@media -moz-pref("mod.zen-traffic-lights.colors_on_hover") {
+  .titlebar-close:hover { background-color: var(--zen-exit-red) !important; }
+  .titlebar-min:hover { background-color: var(--zen-exit-yellow) !important; }
+  .titlebar-max:hover, .titlebar-restore:hover { background-color: var(--zen-exit-green) !important; }
+
+  .titlebar-buttonbox:hover .titlebar-button:not(:hover) {
+    background-color: var(--zen-exit-grey) !important;
+    opacity: 0.8;
+  }
+}
+
+/* HOVER SYMBOLS LOGIC */
+@media -moz-pref("mod.zen-traffic-lights.hover_symbols") {
+  .titlebar-close {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="black" fill-opacity="0.4" d="M1.1,1.1c-0.2-0.2-0.2-0.5,0-0.7s0.5-0.2,0.7,0L4,2.6l2.2-2.2c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7L4.7,4l2.2,2.2c0.2,0.2,0.2,0.5,0,0.7s-0.5,0.2-0.7,0L4,5.4L1.8,7.6c-0.2,0.2-0.5,0.2-0.7,0s-0.2-0.5,0-0.7L3.3,4L1.1,1.1z"/></svg>') !important;
+  }
+  .titlebar-min {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="black" fill-opacity="0.4" d="M0,4c0-0.3,0.2-0.5,0.5-0.5h7c0.3,0,0.5,0.2,0.5,0.5s-0.2,0.5-0.5,0.5h-7C0.2,4.5,0,4.3,0,4z"/></svg>') !important;
+  }
+  .titlebar-max, .titlebar-restore {
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="black" fill-opacity="0.4" d="M4.5,0.5L4.5,1.5L6,1.5L1.5,6L1.5,4.5L0.5,4.5L0.5,7.5L3.5,7.5L3.5,6.5L2,6.5L6.5,2L6.5,3.5L7.5,3.5L7.5,0.5L4.5,0.5z"/></svg>') !important;
+  }
+
+  .titlebar-button:hover {
+    background-size: 8px 10px !important;
+  }
+}

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/preferences.json

@@ -0,0 +1,26 @@
+[
+  {
+    "property": "mod.zen-traffic-lights.colors_on_hover",
+    "label": "Show Colors only on Hover",
+    "type": "checkbox",
+    "defaultValue": true
+  },
+  {
+    "property": "mod.zen-traffic-lights.hover_symbols",
+    "label": "Show Symbols on Hover",
+    "type": "checkbox",
+    "defaultValue": true
+  },
+  {
+    "property": "mod.zen-traffic-lights.button_size_large",
+    "label": "Use Large Buttons",
+    "type": "checkbox",
+    "defaultValue": false
+  },
+  {
+    "property": "mod.zen-traffic-lights.animations_enabled",
+    "label": "Enable Tactile Animations",
+    "type": "checkbox",
+    "defaultValue": true
+  }
+]

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/readme.md

@@ -0,0 +1,69 @@
+# Zen Traffic Lights
+
+Elegant macOS-inspired circular traffic light buttons for **Zen Browser**.
+
+![Zen Traffic Lights Preview](image.png)
+
+This mod is a modern, improved fork of the original `zen-minimal-exit-menu` by dinnoyow, optimized for Zen's unique sidebar and compact layouts with deep customization.
+
+[![License](https://img.shields.io/badge/License-CC_BY--NC--SA_4.0-blue.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/)
+[![Zen Browser](https://img.shields.io/badge/browser-Zen-purple.svg)](https://zen-browser.app/mods/)
+
+## ✨ Features
+- **Minimalist Design**: Replaces bulky system controls with sleek, colored circles.
+- **Dynamic Color Modes**: 
+  - **Colors on Hover (Default)**: Buttons are subtle grey until you hover over them.
+  - **Classic Mode**: Always show the vibrant red/yellow/green colors.
+- **Smart Symbols**: macOS-style (X, -, +) symbols that fade in only when you hover over the buttons.
+- **Tactile Animations**: Bolder, vertical-expanding hover effects and tactile "click" feedback.
+- **Adaptive Sizing**: Mid-size buttons for a perfectly balanced look.
+- **Improved Light Mode**: Specifically tuned colors for high visibility on light backgrounds.
+- **Sidebar Optimized**: Works perfectly in Zen's sidebar and compact modes.
+
+## 🛠️ Installation
+
+### Step 1: Enable Custom Stylesheets
+1. Open Zen Browser.
+2. Go to `about:config`.
+3. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and set it to **true**.
+
+### Step 2: Locate your Profile Folder
+1. Go to `about:support`.
+2. Find the **Profile Folder** entry and click **Open Folder**.
+
+### Step 3: Install the mod
+1. Inside your profile folder, navigate to: `chrome/zen-themes/` (create the `zen-themes` folder if it doesn't exist).
+2. Copy the **entire** folder `3ffef3a7-cdb7-40a0-9510-96f0db1b1536` into the `zen-themes` directory.
+3. To make it appear in the **Zen Mods** settings page:
+   - Go to your root **Profile Folder**.
+   - Open (or create) a file named `zen-themes.json`.
+   - Add the following entry to the JSON object:
+```json
+{
+  "3ffef3a7-cdb7-40a0-9510-96f0db1b1536": {
+    "id": "3ffef3a7-cdb7-40a0-9510-96f0db1b1536",
+    "name": "Zen Traffic Lights",
+    "author": "Rahul",
+    "version": "1.3.0",
+    "enabled": true,
+    "isLocal": true,
+    "style": "chrome.css",
+    "preferences": "preferences.json"
+  }
+}
+```
+4. Restart Zen Browser completely.
+
+## 🎨 Customization
+Once installed, you can toggle all features directly from the **Zen Mods** section in Zen Browser's settings:
+- **Show Colors only on Hover**
+- **Show Symbols on Hover**
+- **Use Large Buttons**
+- **Enable Tactile Animations**
+
+## 📜 License
+This project is licensed under the **Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License**. See the `LICENSE` file for details.
+
+## 🙌 Credits
+- Inspired by and based on the original `zen-minimal-exit-menu` by [dinnoyow](https://github.com/dinnoyow/zen-minimal-exit-menu).
+- Developed and improved for the Zen community.

themes/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/theme.json

@@ -0,0 +1,20 @@
+{
+  "id": "3ffef3a7-cdb7-40a0-9510-96f0db1b1536",
+  "name": "Zen Traffic Lights",
+  "description": "Elegant macOS-inspired circular traffic light buttons for Zen Browser, optimized for sidebar and compact layouts.",
+  "author": "Rahul",
+  "version": "1.3.0",
+  "homepage": "https://github.com/GoldLion123RP/zen-traffic-lights",
+  "style": "https://raw.githubusercontent.com/GoldLion123RP/zen-traffic-lights/main/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/chrome.css",
+  "readme": "https://raw.githubusercontent.com/GoldLion123RP/zen-traffic-lights/main/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/readme.md",
+  "preferences": "https://raw.githubusercontent.com/GoldLion123RP/zen-traffic-lights/main/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/preferences.json",
+  "image": "https://raw.githubusercontent.com/GoldLion123RP/zen-traffic-lights/main/3ffef3a7-cdb7-40a0-9510-96f0db1b1536/image.png",
+  "tags": [
+    "window-controls",
+    "ui-customization",
+    "traffic-lights",
+    "macos"
+  ],
+  "createdAt": "2026-04-18",
+  "updatedAt": "2026-04-19"
+}