A better way to do Youtube Ambient Lightning for Transparent Zen

3 months ago i did this Youtube Ambient mode for Zen Browser,that used youtube native light feature and allowed it to be transparent and strethed it to color full page

Yesterday i Learned that there is addon that did same effect better Addon link, with much more user control

the only downside of it is, it by default it doesnt have any setting that would allow it to work with transparency so i, (and by "i" i mean chatgpt 6.1) made this companion addon that only role it to add opacity to the effect

thought, might as well share it

since it was made for my needs i didnt bother for it to be singed by mozilla or made avalible on addon store installing it (outside of temporary install option) does require to set xpinstall.signatures.required in about:config to false (if enough people express interest in it i might look in to singning it )

do not trust any software that wants you to install that way, You can rename .xpi file to .zip and read what exacly it does, still its best to avoid it if you can (of course you can trust me ¯\_(ツ)_/¯)

Edit: Waiting for review by Mozilla, when it passes it will be avalible here link (it can take few days to weeks)

u/bgalazka186 — 13 days ago
▲ 4 r/userscripts+1 crossposts

Changing search engine without loosing query widget

https://preview.redd.it/4ifv7epppfjh1.png?width=850&format=png&auto=webp&s=138b61ca1517dc23828ba891e5280f5f110cfe62

searXNG with as good for me it is, sometimes it fails me, so at first i just wanted one icon to redirect my search query to another search engine, this idea that came out of frustration quickly evolved to few buttons like that so i can compare results from different indexes, so I, or rather multiple free LLM's made user script widget for quickly switching search engines without loosing what you already searched, thought i might share even tho i made it mostly for myself (and fun)

there are addons for this already but i think having it as widget (and fully open source and very easy to mod) is much more handy

-you can drag widget and it will remember where you left it

-double click on dragable space makes it collapse to smaler widget

-by defoult it hides search engines logos so it has nice place to sit but you can still click that space and go back to defoult searchengine site if you like

- Alt+1 or +2 or +3 makes it switch search engines too

- for youtube it is only visible when searching for something

-didnt notice any slowdowns

if you want to try it you can add it thru any userscript loader like Firemonkey/Violentmonkey/Tampermonkey

https://pastebin.com/raw/HsH53cwi -version with startpage/DDG/Bravesearch

https://pastebin.com/raw/VEG07GMF -version with startpage/DDG/Youtube

startpage uses google index DDG uses Bing index so most searches wont need more then that, brave search (brave own index +Bing) is just overkill,

downsides and problems:

i am to lazy and to poor to make it work with POST so by default startpage com works only until you search in it, changing POST to GET method in setting fixes that

fully made by LLM

If you get any issues with it let me know if i can recreate them i probably will fix them for myself so i dont have them in future

reddit.com
u/bgalazka186 — 2 months ago

I made youtube ambient lightning work with transparent zen and made it color whole window

Edit2: there is a (i still have no idea what am i doing) improved version here: https://userstyles.world/style/28855, Pic in comment, this version also received bugfix so it doesn't let you scroll to empty space on right. CSS below is old version

Edit1: (old version made) my gpu (1660ti) jump from 2-3% usage to 15-23% at massive 3500px blur radious, getting it lower does help a lot but at certain point introduces banding and flickering witch i focused on eliminating

please dont hate me becouse i did it only becouse i got help from LLM its nothing important so it doesnt need to be made by someone who know what they are doing, and it is just simple CSS

if any of you have ideas how to improve it, change it, or even if you like it make it avalible in zen internet (after those improvements) i will be very happy

how to install?
there is probably way better way, but what i did was (after downloading transparency mod zen internet and customizing it with dwmblurglass)

  1. disable "no ambient mode" toggle in zen internet
  2. paste CSS shown below as custom theme in "enchancer for youtube" addon or any other way you want to inject it

main issue was getting rid of black mask and flickering, residues from other approaches to those problems are still in CSS, but i'm to lazy to clean it up

oldCSS:

 /* =========================================================================

    CONFIGURATION SECTION (ADVANCED SETTINGS)

========================================================================= */
 :root {

     /* --- VISUAL PARAMETERS (POWER AND SIZE) --- */
     --ambi-scale: 4;
     /* Glow range (default: 4) */
     --ambi-blur: 3500px;
     /* Blur radius. (default: 3500px) */
     --ambi-saturate: 400%;
     /* Color saturation (default: 400%) */
     --ambi-brightness: 2.0;
     /* Light intensity (default: 2.0) */
     --ambi-contrast: 1.5;
     /* Contrast (default: 1.5) */
     --ambi-opacity: 0.30;
     /* Total opacity (default: 0.30) */
     /* --- MASK PARAMETERS (VIGNETTE CUTTING OFF BLACK) --- */
     --ambi-mask-start: 35%;
     /* Image fade start point */
     --ambi-mask-end: 75%;
     /* Pixel cut-off point */
     --ambi-fade-time: 0s;
 }

 /* =========================================================================

2. NO CORNER ROUNDING (completely optional)

========================================================================= */
 #ytd-player,

 .html5-video-player,

 .ytp-player-minimized,

 video {

     border-radius: 0px !important;
 }

 /* =========================================================================

3. STRUCTURE AND FILTERS (AMBILIGHT)

========================================================================= */
 html body #cinematics,

 html body #cinematics > div {

     display: flex !important;

     visibility: visible !important;

     background: transparent !important;

     background-color: transparent !important;

     box-shadow: none !important;
 }

 /* Main container - this is where any global softening is applied */
 html body #cinematics > div > div {

     display: flex !important;

     visibility: visible !important;

     background: transparent !important;

     filter: blur(var(--ambi-blur)) saturate(var(--ambi-saturate)) brightness(var(--ambi-brightness)) contrast(var(--ambi-contrast)) !important;

     -webkit-filter: blur(var(--ambi-blur)) saturate(var(--ambi-saturate)) brightness(var(--ambi-brightness)) contrast(var(--ambi-contrast)) !important;

     transform: scale(var(--ambi-scale)) !important;

     opacity: var(--ambi-opacity) !important;

     /* Global delay calculated from the variable */
     transition: filter var(--ambi-fade-time) linear, opacity var(--ambi-fade-time) linear !important;
 }

 /* Canvases generating the image - TOTAL BLOCKING OF TIME INTERFERENCE */
 html body #cinematics canvas {

     display: block !important;

     visibility: visible !important;

     -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 1) var(--ambi-mask-start), rgba(0, 0, 0, 0) var(--ambi-mask-end)) !important;

     mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 1) var(--ambi-mask-start), rgba(0, 0, 0, 0) var(--ambi-mask-end)) !important;

     transform: scale(1.4) translateZ(0) !important;

     will-change: opacity, transform;

     /* Aggressive transition blocking eliminates conflict with JavaScript */
     transition: none !important;

     animation: none !important;
 }

 /* =========================================================================

4. INTERFACE BACKGROUND ELIMINATION

========================================================================= */
 .ytp-glow-shadow,

 #player-base,

 ytd-watch-flexy[is-two-columns_] #columns {

     background: transparent !important;

     background-color: transparent !important;

     box-shadow: none !important;
 }
} /* =========================================================================

    CONFIGURATION SECTION (ADVANCED SETTINGS)

========================================================================= */
 :root {

     /* --- VISUAL PARAMETERS (POWER AND SIZE) --- */
     --ambi-scale: 4;
     /* Glow range (default: 4) */
     --ambi-blur: 3500px;
     /* Blur radius. (default: 3500px) */
     --ambi-saturate: 400%;
     /* Color saturation (default: 400%) */
     --ambi-brightness: 2.0;
     /* Light intensity (default: 2.0) */
     --ambi-contrast: 1.5;
     /* Contrast (default: 1.5) */
     --ambi-opacity: 0.30;
     /* Total opacity (default: 0.30) */
     /* --- MASK PARAMETERS (VIGNETTE CUTTING OFF BLACK) --- */
     --ambi-mask-start: 35%;
     /* Image fade start point */
     --ambi-mask-end: 75%;
     /* Pixel cut-off point */
     --ambi-fade-time: 0s;
 }

 /* =========================================================================

2. NO CORNER ROUNDING (completely optional)

========================================================================= */
 #ytd-player,

 .html5-video-player,

 .ytp-player-minimized,

 video {

     border-radius: 0px !important;
 }

 /* =========================================================================

3. STRUCTURE AND FILTERS (AMBILIGHT)

========================================================================= */
 html body #cinematics,

 html body #cinematics > div {

     display: flex !important;

     visibility: visible !important;

     background: transparent !important;

     background-color: transparent !important;

     box-shadow: none !important;
 }

 /* Main container - this is where any global softening is applied */
 html body #cinematics > div > div {

     display: flex !important;

     visibility: visible !important;

     background: transparent !important;

     filter: blur(var(--ambi-blur)) saturate(var(--ambi-saturate)) brightness(var(--ambi-brightness)) contrast(var(--ambi-contrast)) !important;

     -webkit-filter: blur(var(--ambi-blur)) saturate(var(--ambi-saturate)) brightness(var(--ambi-brightness)) contrast(var(--ambi-contrast)) !important;

     transform: scale(var(--ambi-scale)) !important;

     opacity: var(--ambi-opacity) !important;

     /* Global delay calculated from the variable */
     transition: filter var(--ambi-fade-time) linear, opacity var(--ambi-fade-time) linear !important;
 }

 /* Canvases generating the image - TOTAL BLOCKING OF TIME INTERFERENCE */
 html body #cinematics canvas {

     display: block !important;

     visibility: visible !important;

     -webkit-mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 1) var(--ambi-mask-start), rgba(0, 0, 0, 0) var(--ambi-mask-end)) !important;

     mask-image: radial-gradient(ellipse, rgba(0, 0, 0, 1) var(--ambi-mask-start), rgba(0, 0, 0, 0) var(--ambi-mask-end)) !important;

     transform: scale(1.4) translateZ(0) !important;

     will-change: opacity, transform;

     /* Aggressive transition blocking eliminates conflict with JavaScript */
     transition: none !important;

     animation: none !important;
 }

 /* =========================================================================

4. INTERFACE BACKGROUND ELIMINATION

========================================================================= */
 .ytp-glow-shadow,

 #player-base,

 ytd-watch-flexy[is-two-columns_] #columns {

     background: transparent !important;

     background-color: transparent !important;

     box-shadow: none !important;
 }
}
u/bgalazka186 — 4 months ago