|
|
| 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
| |
| */
| |