Jump to content

User:Isaacl/style/discussion-threads.css

From Wikipedia, the free encyclopedia

This is an old revision of this page, as edited by Isaacl (talk | contribs) at 19:31, 18 December 2024 (reduce specificity of CSS rules targeted for dark mode, to simplify reuse of common rules). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
/* Assume if a list item has a comment within it, even within a nested child list, then it corresponds to a comment */

#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(--background-color-base);
	border-bottom: 2px solid var(--background-color-base);
}

#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]))
{
	--discussion-threads-style-alt-background-colour: rgb(98%, 99%, 100%);
	background: var(--discussion-threads-style-alt-background-colour);
	border-bottom: 2px solid var(--discussion-threads-style-alt-background-colour);
}

#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])
{
	--discussion-threads-style-border-colour1: rgb(85%, 85%, 100%);
	border-left: 5px solid var(--discussion-threads-style-border-colour1);
	border-image: linear-gradient(0.25turn, var(--discussion-threads-style-border-colour1) 60%, var(--background-color-base) 60%) 1 100%;
}

@media screen {
	:where(html.skin-theme-clientpref-night)
	{
    	--discussion-threads-style-alt-background-colour: rgb(10%, 10%, 18%);
		--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)
	{
    	--discussion-threads-style-alt-background-colour: rgb(10%, 10%, 18%);
		--discussion-threads-style-border-colour1: rgb(5%, 5%, 30%);
    }
}  /* OS-selected dark colour scheme */