feat: Add Dynamic Glass OmniBar & Panels

themes/dynamic-glass-omnibar-panels/README.md

@@ -0,0 +1,27 @@
+# Dynamic Glass OmniBar & Panels for Zen Browser
+
+Enhance your Zen Browser interface with a premium, modern, and adaptive glassmorphism layout. This mod injects a flawless glass blur effect into your popups and the expanded OmniBar (address bar) panel while strictly respecting your active theme's visual identity.
+
+## ✨ Features
+
+*   **Adaptive Theme Matching:** Automatically grabs your active theme's accent colors using advanced `color-mix()` syntax. If your theme changes, your panels instantly adapt.
+*   **Pure Glass OmniBar:** Transforms the expanded address bar (OmniBar popup) into a lightweight 35% translucent glass surface with a rich `25px` backdrop blur.
+*   **Frosty & Clean Panels:** Re-engineers the Extension and Identity panels with a carefully balanced opacity to prevent layout clipping while maintaining a beautiful frosted look.
+*   **Context-Aware Design:** Keeps the default, closed state of your address bar completely untouched, respecting your theme's original toolbar design until triggered.
+
+## 🚀 Installation
+
+### For Users
+This mod is fully compatible with the official **Zen Mods Store**. Simply find **Dynamic Glass OmniBar & Panels** in the store and click **Install**.
+
+### For Developers / Local Testing
+1. Copy the `metadata.json` and `theme.css` into your Zen Profile's `chrome/zen-themes/dynamic-glass-omnibar-panels/` directory.
+2. Ensure `toolkit.legacyUserProfileCustomizations.stylesheets` is set to `true` in `about:config`.
+3. Restart Zen Browser and enable it via **Settings → Zen Mods**.
+
+## 🛠 Technical Details
+
+Built using clean, high-specificity CSS targeting native Gecko/XUL layout components. It resolves common multi-view layering issues and bypasses hardware-accelerated clipping bugs inside detached browser popups.
+
+---
+Developed with passion for a cleaner web browsing experience. Feel free to open an issue or submit a pull request!

themes/dynamic-glass-omnibar-panels/metadata.json

@@ -0,0 +1,19 @@
+{
+  "id": "dynamic-glass-omnibar-panels",
+  "name": "Dynamic Glass OmniBar & Panels",
+  "description": "A premium, 100% adaptive glassmorphic theme that blends Zen Browser's OmniBar and extensions panel beautifully with your active theme colors.",
+  "author": "Doruk Murat Kıno",
+  "version": "1.0.0",
+  "type": "theme",
+  "readme": "README.md",
+  "theme": "theme.css",
+  "image": "preview.png",
+  "homepage": "https://github.com/Dorukkino/theme-store",
+  "repository": "https://github.com/Dorukkino/theme-store",
+  "tags": [
+    "glassmorphism",
+    "omnibar",
+    "transparent",
+    "adaptive-color"
+  ]
+}

themes/dynamic-glass-omnibar-panels/theme.css

@@ -0,0 +1,110 @@
+/* ==========================================================================
+   Zen Browser - %100 Dinamik Adaptif Cam Teması (Tema Mağazası Sürümü)
+   ========================================================================= */
+
+:root {
+    /* 
+     * URL BAR İÇİN DİNAMİK RENK 
+     * Kullanıcının aktif tema rengini (--zen-primary-color) yakalar; 
+     * bulamazsa araç çubuğunun aktif rengini bulur ve %35 oranında şeffaflaştırır.
+     */
+    --mod-urlbar-glass: color-mix(in srgb, var(--zen-primary-color, var(--zen-colors-primary, var(--toolbar-bgcolor, var(--zen-main-browser-background, #1e1e1e)))) 35%, transparent) !important;
+
+    /* ORTAK CAM EFEKTLERİ */
+    --mod-glass-border: rgba(255, 255, 255, 0.12) !important;
+    --mod-glass-blur: blur(25px) !important;
+}
+
+/* 1. ANA GÖVDE ARKA PLANI */
+#main-window,
+#browser,
+#sidebar-box,
+#appcontent,
+.browserSidebarContainer,
+#tabbrowser-tabpanels {
+    background-color: var(--zen-main-browser-background, #1e1e1e) !important;
+    backdrop-filter: none !important;
+    filter: none !important;
+}
+
+/* 2. Spotlight Modalı Konum Ayarı */
+#urlbar[open] {
+    margin-top: 25px !important; 
+}
+
+/* 3. URL Bar İçi Katman Temizliği */
+#urlbar[open] .urlbarView,
+#urlbar[open] .urlbarView-body-inner,
+#urlbar[open] .urlbarView-results,
+#urlbar[open] #urlbar-input-container {
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+}
+
+/* 4. URL BAR ARKA PLANI (DİNAMİK) */
+#urlbar[open] .urlbar-background,
+.urlbar-background {
+    background-color: var(--mod-urlbar-glass) !important; 
+    backdrop-filter: var(--mod-glass-blur) !important;             
+    -webkit-backdrop-filter: var(--mod-glass-blur) !important;
+    border: 1px solid var(--mod-glass-border) !important; 
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
+}
+
+/* ==========================================================================
+   5. UZANTILAR PANELİ (İZOLE KATMANLAR İÇİN DİNAMİK TEMA ÇÖZÜMÜ)
+   ========================================================================== */
+
+/* Sistemin katı çizimini kapatır */
+panel,
+.panel-arrowcontent,
+#unified-extensions-panel,
+#identity-popup,
+panel-multiview {
+    appearance: none !important; 
+    background-image: none !important; 
+}
+
+panel {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+/* 
+ * PANELLER İÇİN ÖZEL DİNAMİK RENK HESAPLAMASI 
+ * Kullanıcının o anki aktif tema rengini (--zen-primary-color) öncelikli okur, 
+ * bulamazsa panellerin yerleşik arka plan değişkenini %35 cam efektine dönüştürür! 
+ */
+panel[type="arrow"] .panel-arrowcontent,
+#unified-extensions-panel .panel-arrowcontent,
+#identity-popup .panel-arrowcontent {
+    background-color: color-mix(in srgb, var(--zen-primary-color, var(--zen-colors-primary, var(--arrowpanel-background, var(--zen-main-browser-background, #1e1e1e)))) 35%, transparent) !important; 
+    backdrop-filter: var(--mod-glass-blur) !important;             
+    -webkit-backdrop-filter: var(--mod-glass-blur) !important;
+    border: 1px solid var(--mod-glass-border) !important; 
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
+}
+
+/* İçerideki tüm alt katmanların inatçı siyahlığını yok ediyoruz */
+panelview,
+.panel-subview-body,
+#identity-popup-mainView,
+#unified-extensions-view,
+#unified-extensions-area,
+.panel-header,
+.panel-footer {
+    appearance: none !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    box-shadow: none !important;
+}
+
+/* ========================================================================== */
+
+/* 6. Öneriler Listesinde Seçilen Satır */
+.urlbarView-row[selected],
+.urlbarView-row:hover {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+    border-radius: 10px !important;
+}

themes/dynamic-glass-omnibar-panels/theme.json

@@ -0,0 +1,21 @@
+{
+    "id": "dynamic-glass-omnibar-panels",
+    "name": "Dynamic Glass OmniBar & Panels",
+    "description": "A premium, 100% adaptive glassmorphic theme that blends Zen Browser's OmniBar and extensions panel beautifully with your active theme colors.",
+    "author": "Dorukkino",
+    "version": "1.0.0",
+    "type": "style",
+    "readme": "README.md",
+    "theme": "theme.css",
+    "image": "preview.png",
+    "homepage": "https://github.com/Dorukkino/theme-store",
+    "repository": "https://github.com/Dorukkino/theme-store",
+    "tags": [
+        "glassmorphism",
+        "omnibar",
+        "transparent",
+        "adaptive-color"
+    ],
+    "createdAt": "2026-07-03",
+    "updatedAt": "2026-07-03"
+}