Template:Tree list/styles.css

/* {{pp-template}} */

/* 
	don't draw over infobox when list is on the left of an infobox, see:
	https://en.wikipedia.org/wiki/Template_talk:Tree_list#Tree_list_breaks_clicking_links_in_infoboxes
	but also don't break infobox width when the list is inside of an infobox, see:
	https://pl.wikipedia.org/wiki/Dyskusja_wikiprojektu:Infoboksy#c-Bastruk-20260525205400-Nux-20260525195700
*/
div.treelist {
	display: flow-root;
}

.treelist ul {
	padding: 0;
	margin: 0;
}

.treelist li {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}

.treelist li li {
	/* @noflip */
	padding-left: 21px;
	text-indent: 0.3em;
}

/* vertical line */
.treelist li li::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	width: 1px;
	border-left: 1px solid #808080;
}

.treelist li li:last-child::before {
	bottom: calc(100% - 0.7em);
}

/* horizontal line */
.treelist li li::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 0.7em;
	width: 11px;
	border-top: 1px solid #808080;
}

/* these lines deal with a new situation after the RemexHTML switch,
 * wherein li.treelist_emptyline inserts an additional .mw-empty-elt element before
 * the .treelist_emptyline element, causing the 1st child to become the 2nd child
 */
.treelist li.treelist_emptyline > ul > .mw-empty-elt:first-child + .treelist_emptyline::before,
.treelist li.treelist_emptyline > ul > :not(.mw-empty-elt):first-of-type::before {
	top: 0.7em;
}

.treelist li.treelist_emptyline > ul > .mw-empty-elt:first-child + .treelist_emptyline::after,
.treelist li.treelist_emptyline > ul > :not(.mw-empty-elt):first-of-type::after {
	left: 0;
	width: 21px;
}