Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Tree/style.css: Difference between revisions

Template page
PenguinEncounter (talk | contribs)
No edit summary
PenguinEncounter (talk | contribs)
don't try to make it line up, it's not worth it
 
(7 intermediate revisions by the same user not shown)
Line 6: Line 6:
.hierarchy-tree .__item {
.hierarchy-tree .__item {
position: relative; /* absolute positioning target */
position: relative; /* absolute positioning target */
display: grid;
grid-template-columns: max-content 1fr;
grid-template-areas: "emoji content";
align-items: center;
gap: 6px;
}
}
.hierarchy-tree .__item > .emoji {
.hierarchy-tree .__item > .emoji {
margin-right: 6px;
grid-area: emoji;
}
.hierarchy-tree .__item > .__content {
grid-area: content;
}
.hierarchy-tree .hierarchy-tree .__item::after {
position: absolute;
top: 50%;
left: -16px;
width: 12px;
height: 2px;
display: block;
content: "";
background-color: var(--color-subtle, #909090);
}
}
.hierarchy-tree > .-tree-indent {
.hierarchy-tree > .-tree-indent {
Line 18: Line 36:
width: 2px;
width: 2px;
top: 2px;
top: 2px;
bottom: 2px;
bottom: calc(0.5em - 2px);
display: block;
display: block;
position: absolute;
position: absolute;
content: "";
content: "";
background-color: var(--color-base);
background-color: var(--color-subtle, #909090);
}
}

Latest revision as of 03:39, 14 December 2024

.hierarchy-tree {
	display: flex;
	flex-flow: column nowrap;
	height: max-content;
}
.hierarchy-tree .__item {
	position: relative; /* absolute positioning target */
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-areas: "emoji content";
	align-items: center;
	gap: 6px;
}
.hierarchy-tree .__item > .emoji {
	grid-area: emoji;
}
.hierarchy-tree .__item > .__content {
	grid-area: content;
}
.hierarchy-tree .hierarchy-tree .__item::after {
	position: absolute;
	top: 50%;
	left: -16px;
	width: 12px;
	height: 2px;
	display: block;
	content: "";
	background-color: var(--color-subtle, #909090);
}
.hierarchy-tree > .-tree-indent {
	padding-left: 24px;
	position: relative;
}
.hierarchy-tree > .-tree-indent::after {
	left: 6px;
	width: 2px;
	top: 2px;
	bottom: calc(0.5em - 2px);
	display: block;
	position: absolute;
	content: "";
	background-color: var(--color-subtle, #909090);
}