User:Isaacl/style/discussion-threads.css

/* set colours for discussion thread styling */

/* light mode */

#mw-content-text
{
	--discussion-threads-style-background-colour1: rgb(98%, 99%, 100%);       /* odd levels: main background colour */
	--discussion-threads-style-background-colour2: rgb(98%, 99%, 100%);       /* odd levels: bottom border fallback colour */
	--discussion-threads-style-alt-background-colour1: var(--background-color-base);  /* even levels: main background colour */
	--discussion-threads-style-alt-background-colour2: var(--background-color-base);  /* even levels: bottom border fallback colour */
	--discussion-threads-style-border-colour1: rgb(85%, 85%, 100%);               /* left border colour */
	--discussion-threads-style-border-colour2: var(--background-color-base);      /* left border gap colour */
}

/* dark mode */

@media screen {
	:where(html.skin-theme-clientpref-night) #mw-content-text
	{
    	--discussion-threads-style-background-colour1: rgb(8%, 8%, 15%);
    	--discussion-threads-style-background-colour2: var(--background-color-base);
		--discussion-threads-style-border-colour1: rgb(5%, 5%, 30%);
    }
}  /* user-selected dark colour scheme */

@media screen and (prefers-color-scheme: dark) {
	:where(html.skin-theme-clientpref-os) #mw-content-text
	{
    	--discussion-threads-style-background-colour1: rgb(8%, 8%, 15%);
    	--discussion-threads-style-background-colour2: var(--background-color-base);
		--discussion-threads-style-border-colour1: rgb(5%, 5%, 30%);
    }
}  /* OS-selected dark colour scheme */


/* Assume if a list item has a comment within it, even within a nested child list, then it corresponds to a comment */

/* odd levels */

#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start]))
{
	background: var(--discussion-threads-style-background-colour1);
	border-bottom: 2px solid var(--discussion-threads-style-background-colour2);
}

/* even levels */

#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start]))	,
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start])),
#mw-content-text:not([data-discussion-threads-style-disable]) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl, ul) :is(dl:has(> dd span[data-mw-comment-start]), ul:has(> li span[data-mw-comment-start]))
{
	background: var(--discussion-threads-style-alt-background-colour1);
	border-bottom: 2px solid var(--discussion-threads-style-alt-background-colour2);
}

#mw-content-text:not([data-discussion-threads-style-disable]) dl:has(> dd span[data-mw-comment-start]),
#mw-content-text:not([data-discussion-threads-style-disable]) ul:has(> li span[data-mw-comment-start])
{
	border-left: 5px solid var(--discussion-threads-style-border-colour1);
	border-image: linear-gradient(0.25turn, var(--discussion-threads-style-border-colour1) 60%, var(--discussion-threads-style-border-colour2) 60%) 1 100%;
}