css focus mode
it will dim all blocks except the currently selected block and its parent block - tweak the values for opacity and saturation as you need (the css actually make all blocks slightly transparent and reduce saturation)
demo starts around 4s in
code on my github :
/*==================================================*/
/* === dirty focus mode ====*/
/*==================================================*/
:root {
--dfm-unfocused-opacity: 0.5;
--dfm-darktheme-editing-color:hsl(115, 85%, 74%);
--dfm-darktheme-parent-block-color: hsl(73, 71%, 74%);
--dfm-whitetheme-editing-color: hsl(221, 100%, 60%);
--dfm-whitetheme-parent-block-color: hsl(207, 91%, 67%);
}
.dark-theme {
--dfm-editing-color:hsl(115, 85%, 74%);
--dfm-parent-block-color: hsl(73, 71%, 74%);
}
.white-theme {
--dfm-editing-color:hsl(212, 85%, 55%);
--dfm-parent-block-color: hsl(201, 88%, 65%);
}
.cp__sidebar-main-content .ls-block{
show original
install
install with Stylus to be able to quickly enable/disable it. it should also work in a custom.css
ps: if you detect errors or improve the code, please reshare or make a PR on github
2 Likes