zen-browser · mr-cheffy · May 26, 2026
diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/chrome.css b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/chrome.css
@@ -0,0 +1,181 @@
+
+/* ============================================================
+   Better Toast — Zen Browser Mod
+   by mahtamun-hoque-fahim
+   ============================================================
+   Frosted-glass pill notification with:
+   · backdrop-filter blur
+   · Auto dark/light color switching
+   · 4-way position control (top/bottom × left/right/center/auto)
+   · Safe minimum offset (works even when element-separation = 0)
+   · Smooth entrance + hover accent transition
+   ============================================================ */
+
+/* ── Internal variables (tweak these if needed) ── */
+:root {
+  --mbt-blur:           12px;
+  --mbt-radius:         999px;   /* full pill */
+  --mbt-padding:        8px 16px;
+  --mbt-font-size:      12px;
+  --mbt-desc-size:      10px;
+  --mbt-font-weight:    500;
+  --mbt-max-width:      320px;
+  --mbt-transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --mbt-letter-spacing: 0.01em;
+
+/* Glass colours — light mode defaults */
+  --mbt-bg:     rgba(255, 255, 255, 0.18);
+  --mbt-border: rgba(255, 255, 255, 0.30);
+  --mbt-text:   rgba(255, 255, 255, 0.95);
+  --mbt-shadow: 0 4px 24px rgba(0, 0, 0, 0.18),
+                0 1px 4px  rgba(0, 0, 0, 0.10);
+}
+
+/* ── Dark mode: white-tinted glass ── */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --mbt-bg:     rgba(255, 255, 255, 0.14);
+    --mbt-border: rgba(255, 255, 255, 0.22);
+    --mbt-text:   rgba(255, 255, 255, 0.95);
+    --mbt-shadow: 0 4px 24px rgba(0, 0, 0, 0.35),
+                  0 1px 4px  rgba(0, 0, 0, 0.20);
+  }
+}
+
+/* ── Light mode: dark-tinted glass ── */
+@media (prefers-color-scheme: light) {
+  :root {
+    --mbt-bg:     rgba(0, 0, 0, 0.10);
+    --mbt-border: rgba(0, 0, 0, 0.14);
+    --mbt-text:   rgba(0, 0, 0, 0.88);
+    --mbt-shadow: 0 4px 24px rgba(0, 0, 0, 0.12),
+                  0 1px 4px  rgba(0, 0, 0, 0.06);
+  }
+}
+
+/* ════════════════════════════════════════════════════════════
+   CONTAINER — default positioning
+   Default: top + auto (sidebar-aware)
+   ════════════════════════════════════════════════════════════ */
+#zen-toast-container {
+  --_offset-v: 10vh;
+  --_offset-h: 10vw;
+
+/* Sit above panels, toolbars, sidebars — so blur has real UI to blur */
+  z-index: 2147483647 !important;
+  position: fixed !important;
+
+/* Default: top */
+  top:    var(--_offset-v) !important;
+  bottom: unset            !important;
+
+/* Default horizontal: right (sidebar typically on left) */
+  right:  var(--_offset-h) !important;
+  left:   unset            !important;
+}
+
+/* Sidebar-aware: flip to left when sidebar is on the right */
+:root[zen-right-side='true'] #zen-toast-container {
+  left:  var(--_offset-h) !important;
+  right: unset            !important;
+}
+
+/* ════════════════════════════════════════════════════════════
+   POSITION PREFERENCES — via -moz-pref() media queries
+   ════════════════════════════════════════════════════════════ */
+
+/* Vertical: bottom */
+@media (-moz-pref("mod.better-toast.position-v", "bottom")) {
+  #zen-toast-container {
+    top:    unset            !important;
+    bottom: var(--_offset-v) !important;
+  }
+}
+
+/* Horizontal: left */
+@media (-moz-pref("mod.better-toast.position-h", "left")) {
+  #zen-toast-container {
+    right: unset            !important;
+    left:  var(--_offset-h) !important;
+  }
+  :root[zen-right-side='true'] #zen-toast-container {
+    right: unset            !important;
+    left:  var(--_offset-h) !important;
+  }
+}
+
+/* Horizontal: right */
+@media (-moz-pref("mod.better-toast.position-h", "right")) {
+  #zen-toast-container {
+    left:  unset            !important;
+    right: var(--_offset-h) !important;
+  }
+  :root[zen-right-side='true'] #zen-toast-container {
+    left:  unset            !important;
+    right: var(--_offset-h) !important;
+  }
+}
+
+/* Horizontal: center */
+@media (-moz-pref("mod.better-toast.position-h", "center")) {
+  #zen-toast-container {
+    left:      50%              !important;
+    right:     unset            !important;
+    transform: translateX(-50%) !important;
+  }
+  :root[zen-right-side='true'] #zen-toast-container {
+    left:      50%              !important;
+    right:     unset            !important;
+    transform: translateX(-50%) !important;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════
+   TOAST — frosted glass pill
+   ════════════════════════════════════════════════════════════ */
+#zen-toast-container .zen-toast {
+  /* Ensure each toast creates its own stacking context for backdrop-filter */
+  isolation: isolate;
+  position:  relative;
+  z-index:   1;
+
+/* Shape */
+  padding:       var(--mbt-padding)   !important;
+  border-radius: var(--mbt-radius)    !important;
+  max-width:     var(--mbt-max-width) !important;
+
+/* Glass */
+  background:              var(--mbt-bg)     !important;
+  border:                  1px solid var(--mbt-border) !important;
+  backdrop-filter:         blur(var(--mbt-blur)) saturate(1.6) !important;
+  -webkit-backdrop-filter: blur(var(--mbt-blur)) saturate(1.6) !important;
+  box-shadow:              var(--mbt-shadow) !important;
+
+/* Typography */
+  color:          var(--mbt-text)           !important;
+  font-size:      var(--mbt-font-size)      !important;
+  font-weight:    var(--mbt-font-weight)    !important;
+  letter-spacing: var(--mbt-letter-spacing) !important;
+
+/* Transition */
+  transition: background   var(--mbt-transition),
+              border-color var(--mbt-transition),
+              color        var(--mbt-transition),
+              box-shadow   var(--mbt-transition) !important;
+
+/* Description text */
+  & .description {
+    font-size:  var(--mbt-desc-size) !important;
+    opacity:    0.75                 !important;
+    margin-top: 2px                  !important;
+  }
+
+/* Hover: accent highlight */
+  &:hover {
+    background:   var(--zen-primary-color) !important;
+    color:        var(--button-primary-color, #fff) !important;
+    border-color: transparent !important;
+    box-shadow:   0 4px 28px color-mix(in srgb, var(--zen-primary-color) 40%, transparent),
+                  0 1px 6px  color-mix(in srgb, var(--zen-primary-color) 25%, transparent) !important;
+  }
+}
diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/image.png b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/image.png
diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/preferences.json b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/preferences.json
@@ -0,0 +1,42 @@
+[
+    {
+        "property": "mod.better-toast.position-v",
+        "label": "Vertical Position",
+        "type": "dropdown",
+        "options": [
+            {
+                "label": "Top",
+                "value": "top"
+            },
+            {
+                "label": "Bottom",
+                "value": "bottom"
+            }
+        ],
+        "defaultValue": "top"
+    },
+    {
+        "property": "mod.better-toast.position-h",
+        "label": "Horizontal Position",
+        "type": "dropdown",
+        "options": [
+            {
+                "label": "Auto (sidebar-aware)",
+                "value": "auto"
+            },
+            {
+                "label": "Left",
+                "value": "left"
+            },
+            {
+                "label": "Center",
+                "value": "center"
+            },
+            {
+                "label": "Right",
+                "value": "right"
+            }
+        ],
+        "defaultValue": "auto"
+    }
+]
diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/readme.md b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/readme.md
@@ -0,0 +1,59 @@
+
+# Better Toast — Zen Browser Mod
+
+A polished, frosted-glass pill toast notification for [Zen Browser](https://zen-browser.app/).
+
+![Better Toast preview](image.png)
+
+## Features
+
+- **Frosted glass** — `backdrop-filter: blur` with saturation boost, matching Zen's native aesthetic
+- **Auto dark / light** — white-tinted glass on dark backgrounds, dark-tinted glass on light backgrounds, driven by `prefers-color-scheme`
+- **4-way position control** — choose top or bottom (vertical) and left, center, right, or auto (horizontal) from Zen's mod settings panel
+- **Safe minimum offset** — no longer clips to the screen edge when `zen.theme.content-element-separation = 0`
+- **Sidebar-aware default** — auto mode places the toast on the opposite side from your sidebar
+- **Accent hover** — toast highlights in your Zen accent color on hover with a matching glow
+
+## Install from Zen Mods Store
+
+Search **"Better Toast"** in Zen Browser → Settings → Mods → Browse.
+
+## Manual Install
+
+1. Open Zen Browser → Settings → Mods
+2. Click **Add from file** (or drag & drop)
+3. Select the folder containing `chrome.css` and `metadata.json`
+4. Enable the mod
+
+## Settings
+
+| Setting | Options | Default |
+|---|---|---|
+| Vertical Position | Top / Bottom | Top |
+| Horizontal Position | Auto / Left / Center / Right | Auto |
+
+**Auto** horizontal mode is sidebar-aware: it places the toast on the right when your sidebar is on the left, and on the left when your sidebar is on the right.
+
+## Customisation
+
+All visual variables are at the top of `chrome.css`:
+
+--mbt-blur:         12px;    /* backdrop blur amount */
+--mbt-radius:       999px;   /* pill shape — lower for rounded rect */
+--mbt-padding:      8px 16px;
+--mbt-font-size:    12px;
+--mbt-desc-size:    10px;
+--mbt-font-weight:  500;
+--mbt-max-width:    320px;
+--mbt-min-offset:   12px;    /* minimum edge gap when separation = 0 */
+
+## How preferences work
+
+Position preferences use Firefox's `-moz-pref()` media query API:
+
+@media (-moz-pref("mod.better-toast.position-v", "bottom")) { … }
+@media (-moz-pref("mod.better-toast.position-h", "center")) { … }
+
+## License
+
+MIT
diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/theme.json b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/theme.json
@@ -0,0 +1,15 @@
+{
+    "id": "d5fa2212-ecfe-444a-8b02-2e9b127e0e78",
+    "name": "More Better Toast",
+    "description": "Frosted-glass pill toast with backdrop blur, auto dark/light & position control (left/right/bottom).",
+    "homepage": "https://github.com/mahtamun-hoque-fahim/zen-mod-more-better-toast",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/image.png",
+    "author": "mahtamun-hoque-fahim",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2026-05-26",
+    "updatedAt": "2026-05-26",
+    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/preferences.json"
+}