diff --git a/themes/dynamic-glass-omnibar-panels/README.md b/themes/dynamic-glass-omnibar-panels/README.md new file mode 100644 index 000000000..e01f0725c --- /dev/null +++ b/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! \ No newline at end of file diff --git a/themes/dynamic-glass-omnibar-panels/metadata.json b/themes/dynamic-glass-omnibar-panels/metadata.json new file mode 100644 index 000000000..585eb835f --- /dev/null +++ b/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" + ] +} \ No newline at end of file diff --git a/themes/dynamic-glass-omnibar-panels/preview.png b/themes/dynamic-glass-omnibar-panels/preview.png new file mode 100644 index 000000000..11a9d015c Binary files /dev/null and b/themes/dynamic-glass-omnibar-panels/preview.png differ diff --git a/themes/dynamic-glass-omnibar-panels/theme.css b/themes/dynamic-glass-omnibar-panels/theme.css new file mode 100644 index 000000000..ea29404b8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/themes/dynamic-glass-omnibar-panels/theme.json b/themes/dynamic-glass-omnibar-panels/theme.json new file mode 100644 index 000000000..c665d9419 --- /dev/null +++ b/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" +} \ No newline at end of file