A configurable brightness setting for your browser. Good for multiple monitors / windows, dimming the ones you're not using more than the default dimmer you set for everything else.
Should apply to all websites.
Simple
Authorhawkwinter
LicenseCC-BY-SA-4.0
CategoryEverything
Created
Updated
Size1.9 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
A configurable brightness setting for your browser. Good for multiple monitors / windows, dimming the ones you're not using more than the default dimmer you set for everything else.
Should apply to all websites.
Simple
Note: --basedark should be a % value from 0% (No Fade) to 100% (Black Screen) (I set my main to 40% when I run it (at night usually) - if you set it to 100%, you wont be able to see anything - dont set it that high), while --fadedark should be a decimal value from 0 to 1 (I set it to 0.7, if you set it to 1, any window your mouse isnt over will be black.).
/* ==UserStyle==
@name Darken the Internet
@namespace Hawkwinter
@version 1.0.0
@description A configurable brightness setting for your browser. Good for multiple monitors /
windows, dimming the ones you’re not using more than the default dimmer you set for everything else.
Should apply to all websites. Simple
@notes --basedark should be a % value from 0% (No Fade) to 100% (Black Screen) (I set my
main to 40% when I run it (at night usually) - if you set it to 100%, you wont be able to see
anything - dont set it that high), while --fadedark should be a decimal value from 0 to 1 (I set it
to 0.7, if you set it to 1, any window your mouse isnt over will be black.).
@author Hawkwinter
==/UserStyle== */
@-moz-document regexp("(chrome|brave)(\\-extension)?://.*"), regexp("about:.*"), regexp("https?://.*"), regexp("s?ftps?://.*") {
/*Settings*/
:root {
--transitionshort: .5s ease-in-out;
--basedark: 40%;
--fadedark: 0.70;
}
}
@-moz-document regexp("(chrome|brave)(\\-extension)?://.*"), regexp("about:.*"), regexp("https?://.*"), regexp("s?ftps?://.*") {
/*Implementation*/
body::after {
transition: all var(--transitionshort);
transition-delay: 0.25s;
content: " ";
width: 300vmax;
height: 300vmax;
min-width: 5760px;
min-height: 5760px;
left: -100vmax;
top:-100vmax;
overflow: hidden;
position: fixed;
background-color: rgba(0,0,0,0);
z-index: 9999999999;
pointer-events: none;
}
body:not(:hover)::after {
transition: all var(--transitionshort);
transition-delay: 0.75s;
background-color: rgba(0,0,0,calc(var(--basedark) + (calc(100% - var(--basedark)) * var(--fadedark))));
opacity: 1;
}
body:hover::after {
transition: all var(--transitionshort);
transition-delay: 0.1s;
background-color: rgba(0,0,0,var(--basedark));
opacity: 1;
}
}