[create-theme]: zen spotlight search #1817
Description
Name
zen spotlight search
Description
Blur and/or darken pages behind your search bar for a more focused experience.
Homepage
https://github.com/alpegasus/zen-spotlight-search
Image
Type
- JSON Color Theme
Theme Styles
/* only apply to browser elements */
@-moz-document url-prefix("chrome://") {
/* ---------- LAYERS ---------- */
@layer prefs, scope, effect;
/* ---------- 1) USER PREFERENCES ---------- */
@layer prefs {
/* FETCH PREFS OR DEFAULT */
:root {
--splt-blur_radius: var(--mod-alps-spotlight-blur_radius, 6px);
--splt-brightness: var(--mod-alps-spotlight-brightness, 0.66);
--splt-transition: var(--mod-alps-spotlight-transition, .20s);
}
/* BLUR */
/* When blur toggle is on, set specified blur radius */
@media (-moz-bool-pref: "mod.alps.spotlight.enable_blur") {
:root {
--splt-blur-active: var(--splt-blur_radius);
}
}
/* When blur toggle is off, set blur radius to 0px */
@media not (-moz-bool-pref: "mod.alps.spotlight.enable_blur") {
:root {
--splt-blur-active: 0px;
}
}
/* BRIGHTNESS */
/* When dim toggle is on, set specified brightness */
@media (-moz-bool-pref: "mod.alps.spotlight.enable_dim") {
:root {
--splt-bright-active: var(--splt-brightness);
}
}
/* When dim toggle is off, set brightness to 1.0 */
@media not (-moz-bool-pref: "mod.alps.spotlight.enable_dim") {
:root {
--splt-bright-active: 1;
}
}
/* TRANSITION */
/* Respect reduced motion*/
@media (prefers-reduced-motion: reduce) {
:root {
--splt-transition: 0s;
}
}
}
/* ---------- 2) ESTABLISH SCOPE ---------- */
@layer scope {
/* ADDRESS BAR */
/* If user did not pick docked, neutralize when docked */
@media not (-moz-bool-pref: "mod.alps.spotlight.on_docked") {
:root:not(:has(#urlbar[open][zen-floating-urlbar="true"])) {
--splt-blur-active: 0px;
--splt-bright-active: 1;
}
}
/* FLOATING BAR */
/* If user did not choose floating, neutralize when floating */
@media not (-moz-bool-pref: "mod.alps.spotlight.on_floating") {
:root:has(#urlbar[open][zen-floating-urlbar="true"]) {
--splt-blur-active: 0px;
--splt-bright-active: 1;
}
}
}
/* ---------- 3) EFFECT APPLICATION ---------- */
@layer effect {
/* Blur the page content when the URL bar is open */
:root:has(#urlbar[open]) #tabbrowser-tabpanels {
filter: blur(var(--splt-blur-active)) brightness(var(--splt-bright-active));
transition: filter var(--splt-transition) ease;
}
/* Keep the bar above the blur/darken filter */
#urlbar[open] {
position: relative;
z-index: 9999;
}
}
}Readme
**Zen Spotlight Search** - dim and blur the page behind your search bar for a calmer, focused experience.
## Features
- Enable or disable the spotlight effect separately for:
- Floating search bar
- Docked address bar
- Adjustable filter settings:
- Blur radius
- Brightness level
- Transition speedPreferences
[
{
"property": "mod.alps.spotlight.enable_blur",
"label": "Enable Spotlight Blur",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.alps.spotlight.blur_radius",
"label": "Spotlight Blur Radius (px)",
"type": "string",
"defaultValue": "6px",
"placeholder": "e.g. 4px"
},
{
"property": "mod.alps.spotlight.enable_brightness",
"label": "Enable Spotlight Brightness",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.alps.spotlight.brightness",
"label": "Spotlight Brightness 0-1, with 1 being full brightness",
"type": "string",
"defaultValue": "0.66",
"placeholder": "e.g. 0.9"
},
{
"property": "mod.alps.spotlight.on_floating",
"label": "Apply on floating URL searchbar",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.alps.spotlight.on_docked",
"label": "Apply on address bar",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.alps.spotlight.transition",
"label": "Transition Duration (seconds)",
"type": "dropdown",
"defaultValue": ".20s",
"options": [
{
"label": "Snappy (.15s)",
"value": ".15s"
},
{
"label": "Default (.20s)",
"value": ".20s"
},
{
"label": "Gentle (.30s)",
"value": ".30s"
}
]
}
]