Fix being unable to set the line height at the top level for all sub-elements

[BrokenEagle]

Currently, because of the following style, the line-height has to be set for every single element in a note.

https://github.com/danbooru/danbooru/blob/d6b1302e0b50570dd628dad8591539e090b1aeec/app/javascript/src/styles/specific/notes.scss#L32-L35

So instead of

<div style="line-height: 100%;">
    <span style="color: red;">Blah</span>
    <span style="color: blue;">Foo</span>
</div>

you have to do

<div style="line-height: 100%;">
    <span style="color: red; line-height: 100%;">Blah</span>
    <span style="color: blue; line-height: 100%;">Foo</span>
</div>

which is pretty annoying, plus of all the extra work it requires which wastes time.

The problem lies with the fact that the selectors are using "any descendant" style (space) instead of "direct descendant" style (>). If the latter was used instead, then only the top level elements in the note would need to set their line height, and every other child/descendant element would inherit that line-height.

So that code that was linked above would need to be replaced with the following

>h1, >h2, >h3, >h4, >h5, >h6, >a, >span, >div, >blockquote, >p, >ul, >li, >ol, >em,
>strong, >small, >big, >b, >i, >font, >u, >s, >code, >center {
    line-height: 1.25;
}

[luni3359]

I'm not sure that's valid css. Even if it works I can't get it to work through any css validators.

[BrokenEagle]

If you look at the CSS, you'll see that it is SASS formatted, which means that it's hierarchical.

.note-container {
    div.note-body, div.note-box.embedded div.note-box-inner-border {
        >h1, >h2, >h3, >h4, >h5, >h6, >a, >span, >div, >blockquote, >p, >ul, >li, >ol, >em,
        >strong, >small, >big, >b, >i, >font, >u, >s, >code, >center {
            line-height: 1.25;
        }
    }
}

So each of those items would get rendered according to the hierarchy, with the first being .note-container div.note-body >h1 which is a valid CSS selector, which basically says "starting at all items with class "note-container", select any descendants with "div.note-body" with a child of "h1". If you look at the current rendered CSS, you'll see just how huge the final selector ends up becoming.

.note-container div.note-body h1, .note-container div.note-body h2, .note-container div.note-body h3, .note-container div.note-body h4, .note-container div.note-body h5, .note-container div.note-body h6, .note-container div.note-body a, .note-container div.note-body span, .note-container div.note-body div, .note-container div.note-body blockquote, .note-container div.note-body p, .note-container div.note-body ul, .note-container div.note-body li, .note-container div.note-body ol, .note-container div.note-body em, .note-container div.note-body strong, .note-container div.note-body small, .note-container div.note-body big, .note-container div.note-body b, .note-container div.note-body i, .note-container div.note-body font, .note-container div.note-body u, .note-container div.note-body s, .note-container div.note-body code, .note-container div.note-body center, .note-container div.note-box.embedded div.note-box-inner-border h1, .note-container div.note-box.embedded div.note-box-inner-border h2, .note-container div.note-box.embedded div.note-box-inner-border h3, .note-container div.note-box.embedded div.note-box-inner-border h4, .note-container div.note-box.embedded div.note-box-inner-border h5, .note-container div.note-box.embedded div.note-box-inner-border h6, .note-container div.note-box.embedded div.note-box-inner-border a, .note-container div.note-box.embedded div.note-box-inner-border span, .note-container div.note-box.embedded div.note-box-inner-border div, .note-container div.note-box.embedded div.note-box-inner-border blockquote, .note-container div.note-box.embedded div.note-box-inner-border p, .note-container div.note-box.embedded div.note-box-inner-border ul, .note-container div.note-box.embedded div.note-box-inner-border li, .note-container div.note-box.embedded div.note-box-inner-border ol, .note-container div.note-box.embedded div.note-box-inner-border em, .note-container div.note-box.embedded div.note-box-inner-border strong, .note-container div.note-box.embedded div.note-box-inner-border small, .note-container div.note-box.embedded div.note-box-inner-border big, .note-container div.note-box.embedded div.note-box-inner-border b, .note-container div.note-box.embedded div.note-box-inner-border i, .note-container div.note-box.embedded div.note-box-inner-border font, .note-container div.note-box.embedded div.note-box-inner-border u, .note-container div.note-box.embedded div.note-box-inner-border s, .note-container div.note-box.embedded div.note-box-inner-border code, .note-container div.note-box.embedded div.note-box-inner-border center