Jump to content

Template:Tree list/styles.css: Difference between revisions

From the Vrienden Universe, a fictional wiki
← Older edit

VU-MaintenanceBot (talk | contribs)

5 user groups
2,661 edits
undo
m 1 revision imported
Replace external tree image with local CSS connectors
 
Line 13: Line 13:


.treeview li li {
.treeview li li {
background: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png") no-repeat 0 -2981px;
position: relative;
/* @noflip */
/* @noflip */
padding-left: 21px;
padding-left: 21px;
Line 19: Line 19:
}
}


.treeview li li:last-child {
.treeview li li::before {
background-position: 0 -5971px
position: absolute;
top: -0.7em;
bottom: 50%;
left: 0;
width: 12px;
border-bottom: 1px solid #a2a9b1;
border-left: 1px solid #a2a9b1;
content: "";
}
}


/* the 1st line here deals with a new situation after the RemexHTML switch,
.treeview li li:not(:last-child)::after {
* wherein li.emptyline inserts an additional .mw-empty-elt element before
position: absolute;
* the .emptyline element, causing the 1st child to become the 2nd child
top: 50%;
*/
bottom: -0.7em;
.treeview li.emptyline > ul > .mw-empty-elt:first-child + .emptyline,
left: 0;
.treeview li.emptyline > ul > li:first-child {
border-left: 1px solid #a2a9b1;
background-position: 0 9px
content: "";
}
}
/* the dimensions of the image at the url are 21px by 5983px
* the amount of the image that is visible adjacent to any single line is 21px by 21px
** positioning the image at x = 0px shows the full width of the image from 0px to 21px
** positioning the image at y = 9px shows the portion of the image from a height of -9px to 12px, i.e. 9 empty pixels and the first 12 image pixels
** positioning the image at y = -2981px shows the portion of the image from a height of 2981px to 3002px, the middle 21 pixels of the image
** positioning the image at y = -5971px shows the portion of the image from a height of 5971px to height+9px, i.e. the last 12 image pixels and 9 empty pixels
*/

Latest revision as of 15:44, 13 September 2026

/* {{pp-template}} */
.treeview ul {
	padding: 0;
	margin: 0;
}

.treeview li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-image: none;
}

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

.treeview li li::before {
	position: absolute;
	top: -0.7em;
	bottom: 50%;
	left: 0;
	width: 12px;
	border-bottom: 1px solid #a2a9b1;
	border-left: 1px solid #a2a9b1;
	content: "";
}

.treeview li li:not(:last-child)::after {
	position: absolute;
	top: 50%;
	bottom: -0.7em;
	left: 0;
	border-left: 1px solid #a2a9b1;
	content: "";
}
Retrieved from "https://vriendenuniverse.org/wiki/index.php?title=Template:Tree_list/styles.css&oldid=11402"