Styling group headings in Tasks search results

[claremacrae]

I've just realised from #3358 that there aren't any examples in the docs of styling Tasks group headings...

So I'm not saying that this is the best of CSS or design, but here is what I use in my vault.

Note, it works well in Light mode, but the colours would need changing for Dark modes.

Screenshot

CSS

/* Style the Tasks headings - initial CSS by Clare Macrae */

h4.tasks-group-heading {
}

h5.tasks-group-heading {
    /* Indent second-level group headings a bit: */
    margin-left: 12px !important;
}

h6.tasks-group-heading {
    /* Indent third- and subsequent-level group headings a bit more: */
    margin-left: 24px !important;
}

h4.tasks-group-heading, h5.tasks-group-heading, h6.tasks-group-heading {
    /* Set font colour and shapes of all headings: */
    color: white;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 5px;
}

/* Apply colour gradient to each heading level */
h4.tasks-group-heading {
    /* From https://cssgradient.io */
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

h5.tasks-group-heading {
    background: rgb(34,29,116);
    background: linear-gradient(90deg, rgba(34,29,116,1) 13%, rgba(120,120,195,1) 38%, rgba(89,227,255,1) 100%);
}

h6.tasks-group-heading {
    background: rgb(84,78,179);
    background: linear-gradient(90deg, rgba(84,78,179,1) 13%, rgba(143,143,213,1) 38%, rgba(149,224,240,1) 100%);
}

.tasks-group-heading .tag {
    /* Make tags in headings yellow */
    background-color: rgba(255, 255, 0) !important;
}

.tasks-group-heading p {
    /* Reduce the height of headings significantly */
    margin-block-start: 0px;
    margin-block-end: 0px;
    line-height: 1.0;
}

.tasks-group-heading a.internal-link {
    /* Make links in headings white, like in 'group by filename', to make them readable */
    color: white;
}