diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/chrome.css b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/chrome.css new file mode 100644 index 00000000..64dd7be6 --- /dev/null +++ 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 new file mode 100644 index 00000000..dd7cabae Binary files /dev/null and b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/image.png differ diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/preferences.json b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/preferences.json new file mode 100644 index 00000000..c668b66b --- /dev/null +++ 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" + } +] \ No newline at end of file diff --git a/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/readme.md b/themes/d5fa2212-ecfe-444a-8b02-2e9b127e0e78/readme.md new file mode 100644 index 00000000..61fce31e --- /dev/null +++ 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 new file mode 100644 index 00000000..d9a1590f --- /dev/null +++ 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" +} \ No newline at end of file