Stay Focused in Obsidian ā€“ My CSS Snippet for reducing distractions

/ Obsidian / By

Hey there! If youā€™re like me, you spend a lot of time in Obsidian, organizing your thoughts, notes, and ideas. But sometimes, all those lines of text can be a bit overwhelming, right? Well, Iā€™ve got a nifty CSS snippet that can help you zero in on the lines youā€™re working on, making everything else just fade a bit into the background.

Hereā€™s a quick breakdown of what this CSS does:

  • Highlighting the Active Line: The line youā€™re currently working on gets a nice bump in size and opacity, making it stand out.
  • Dimming Inactive Lines: Lines before and after your current line get slightly reduced in size and opacity, helping you maintain focus on the task at hand.
/* Use both size and opacity to focus on current line */
.cm-active.cm-line:not(.HyperMD-codeblock):not(.HyperMD-table-2):not(.HyperMD-header){
    padding-top: 0.77em !important;
    &:not(:has(*)),
    &> *:not(.cm-indent):not(.cm-header):not(.cm-hmd-list-indent){
        font-size: 1.6em !important;
        line-height: 1.6em !important;
    }
}
/* before active line */
.cm-line:not(.HyperMD-codeblock):not(.HyperMD-table-2):has(+ .cm-active.cm-line:not(.HyperMD-codeblock):not(.HyperMD-table-2):not(.HyperMD-header)){
    &:not(:has(*)),
    &> *:not(.cm-indent):not(.cm-header):not(.cm-hmd-list-indent)  {
        font-size: 1.37em !important;
        line-height: 1.37em !important;
    }
}
/* after active line */
.cm-active.cm-line + .cm-line:not(.HyperMD-codeblock):not(.HyperMD-table-2):not(.cm-header){
    &:not(:has(*)),
    &> *:not(.cm-indent):not(.cm-header):not(.cm-hmd-list-indent)  {
        font-size: 1.37em !important;
        line-height: 1.37em !important;
        opacity: 0.95;
    }
}
/* 2 lines after active line */
.cm-active.cm-line + .cm-line:not(.HyperMD-codeblock):not(.HyperMD-table-2):not(.cm-header) + .cm-line:not(.HyperMD-codeblock):not(.HyperMD-table-2):not(.cm-header){
    padding-bottom: 0.77em !important;
    &:not(:has(*)),
    &> *:not(.cm-indent):not(.cm-header):not(.cm-hmd-list-indent)  {
        font-size: 1.23em !important;
        line-height: 1.23em !important;
        opacity: 0.80;
    }
}
.cm-active.cm-line:not(.HyperMD-codeblock){
    &:not(:has(*)),
    &> *:not(.cm-indent):not(.cm-header):not(.cm-hmd-list-indent){
        opacity: 1;
    }
}
/* "dim" in-active lines */
.cm-line:not(.HyperMD-codeblock){
    &:not(:has(*)),
    &> *:not(.cm-indent):not(.cm-header):not(.cm-hmd-list-indent){
        opacity: 0.60;
    }
}
/* dim headers */
.cm-header, .cm-header > * {
    opacity: 0.80;
}

šŸŒ“