Merge pull request #1391 from zen-browser/create-theme-1390

Add theme: Zen URL Bar Tweaks

themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css

@@ -0,0 +1,85 @@
+
+/* Base styles always applied */
+#urlbar-background {
+  border: 2px solid transparent !important;
+  border-radius: var(--mod-urlbar-border_radius) !important;
+  transition: box-shadow 0.3s ease-in-out !important;
+}
+
+/* Hide container icons when enabled */
+@media (-moz-bool-pref: "mod.urlbar.hide_elements") {
+  #userContext-identity-icon,
+  #userContext-indicator {
+    display: none !important;
+  }
+  
+  /* Hide permission icons by default */
+  #identity-permission-box {
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  
+  /* Hide or reduce some elements to improve appearance */
+  #identity-box {
+    margin-inline-end: 0 !important;
+    max-width: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+  }
+  
+  #page-action-buttons {
+    display: none !important;
+  }
+}
+
+/* Show elements on hover when enabled */
+@media (-moz-bool-pref: "mod.urlbar.show_on_hover") {
+  /* Show permission icons when hovering over the URL bar */
+  #urlbar:hover #identity-permission-box {
+    opacity: 1;
+  }
+  
+  /* Show these elements on hover if needed */
+  #urlbar:hover #identity-box,
+  #urlbar:focus-within #identity-box {
+    max-width: unset !important;
+    margin-inline-end: 4px !important;
+  }
+  
+  #urlbar:hover #page-action-buttons,
+  #urlbar:focus-within #page-action-buttons {
+    display: flex !important;
+  }
+}
+
+/* Center the URL in the address bar when enabled */
+@media (-moz-bool-pref: "mod.urlbar.center_url") {
+  #urlbar-input-container {
+    justify-content: center !important;
+  }
+  
+  #urlbar-input {
+    text-align: center !important;
+  }
+}
+
+/* Apply colorful border when enabled */
+@media (-moz-bool-pref: "mod.urlbar.colorful_border") {
+  #urlbar-background {
+    background-origin: border-box !important;
+    background-clip: padding-box, border-box !important;
+    background-image: linear-gradient(rgba(59, 59, 61, 0.8), rgba(59, 59, 61, 0.8)),
+                      linear-gradient(90deg, #ff7e5f, #feb47b, #7bc6cc, #8583ed) !important;
+  }
+}
+
+/* Apply glow effect on focus when enabled */
+@media (-moz-bool-pref: "mod.urlbar.glow_effect") {
+  #urlbar-background {
+    box-shadow: 0 0 8px rgba(137, 137, 186, 0.3) !important;
+  }
+  
+  #urlbar[focused="true"] #urlbar-background {
+    box-shadow: 0 0 12px rgba(99, 185, 255, 0.5) !important;
+  }
+}

themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json

@@ -0,0 +1,39 @@
+[
+    {
+        "property": "mod.urlbar.hide_elements",
+        "label": "Hide container and permission icons",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "mod.urlbar.show_on_hover",
+        "label": "Show hidden elements on hover",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "mod.urlbar.center_url",
+        "label": "Center the URL in address bar",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "mod.urlbar.colorful_border",
+        "label": "Use colorful gradient border",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "mod.urlbar.glow_effect",
+        "label": "Enable glow effect on focus",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "mod.urlbar.border_radius",
+        "label": "Border radius",
+        "type": "string",
+        "defaultValue": "8px",
+        "placeholder": "e.g: 8px"
+    }
+]

themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md

@@ -0,0 +1,30 @@
+
+# Zen URL Bar Tweaks
+
+A collection of tweaks for the Zen browser URL bar.
+
+To use the mod, just install it and go to the Zen Mods page on your Zen browser. You will see the mod listed there. Click on the settings icon to turn on/off the tweaks.
+
+## Features
+
+Here's a list of the tweak options included in this Zen browser mod:
+
+- ✅ **Hide container and permission icons**  
+  Clean up the URL bar by hiding container indicators and site permission icons.
+
+- ✅ **Show hidden elements on hover**  
+  Reveal icons and actions when hovering over the URL bar, keeping the look minimal when idle.
+
+- ✅ **Center the URL in the address bar**  
+  Align the URL to the center of the bar for a balanced aesthetic.
+
+- ✅ **Use colorful gradient border**  
+  Add a stylish colorful border around the URL bar (toggle only).
+
+- ✅ **Enable glow effect on focus**  
+  Make the URL bar glow subtly when focused, improving visual feedback.
+
+- ✅ **Adjustable border radius**  
+  Customize how rounded the corners of the URL bar look (e.g., 4px, 8px, 16px, etc.).
+
+> You can turn on/off each of these tweaks individually in the Zen Mods page in `about:settings`.

themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/theme.json

@@ -0,0 +1,15 @@
+{
+    "id": "fd79066d-ba22-4cd1-8ad0-cfd82c12026a",
+    "name": "Zen URL Bar Tweaks",
+    "description": "A collection of tweaks for the Zen browser URL bar with options to toggle each tweak.",
+    "homepage": "https://github.com/litegral/zen-url-bar-tweaks",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/image.png",
+    "author": "litegral",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2025-04-05",
+    "updatedAt": "2025-04-05",
+    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/fd79066d-ba22-4cd1-8ad0-cfd82c12026a/preferences.json"
+}