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,21 @@
+MIT License
+
+Copyright (c) 2026 Rahul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,65 @@
+# Zen Traffic Lights
+
+Elegant macOS-inspired circular traffic light buttons for **Zen Browser**. 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-MIT-blue.svg)](LICENSE)
+[![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 Mid-Size Buttons**
+- **Enable Tactile Animations**
+
+## 📜 License
+This project is licensed under the **MIT License**.
+
+## 🙌 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/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 Mid-Size 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/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 all sidebar and compact layouts with deep customization.",
+  "author": "Rahul",
+  "version": "1.3.0",
+  "homepage": "https://github.com/GoldLion123RP/zen-traffic-lights",
+  "style": "chrome.css",
+  "readme": "README.md",
+  "preferences": "preferences.json",
+  "image": "image.png",
+  "tags": [
+    "window-controls",
+    "ui-customization",
+    "traffic-lights",
+    "macos"
+  ],
+  "createdAt": "2026-04-18",
+  "updatedAt": "2026-04-19"
+}