MediaWiki:CollapsibleTree.css - Revision history

Noeth at 08:21, 26 February 2026

2026-02-26T08:21:41Z

← Older revision		Revision as of 08:21, 26 February 2026
Line 1:		Line 1:
	/* Hide nested lists by default to prevent FOUC */		/* Hide nested lists by default to prevent FOUC */
			.collapsible-tree {
			padding-left: 1rem;
			}

	.collapsible-tree > ul ul {		.collapsible-tree > ul ul {
	display: none;		display: none;

Noeth at 11:12, 13 February 2026

2026-02-13T11:12:11Z

← Older revision		Revision as of 11:12, 13 February 2026
Line 26:		Line 26:
	padding-left: 0.5rem;		padding-left: 0.5rem;
	color: unset;		color: unset;
			font-weight: 800;
	text-decoration: none;		text-decoration: none;
	transition: color 0.2s ease;		transition: color 0.2s ease;

Noeth at 11:11, 13 February 2026

2026-02-13T11:11:42Z

← Older revision		Revision as of 11:11, 13 February 2026
Line 19:		Line 19:
	padding-left: 0.5rem;		padding-left: 0.5rem;
	color: #2563eb;		color: #2563eb;
			text-decoration: none;
			transition: color 0.2s ease;
			}

			.collapsible-tree > ul li .mw-selflink.selflink {
			padding-left: 0.5rem;
			color: unset;
	text-decoration: none;		text-decoration: none;
	transition: color 0.2s ease;		transition: color 0.2s ease;

Noeth at 09:34, 13 January 2026

2026-01-13T09:34:06Z

← Older revision		Revision as of 09:34, 13 January 2026
Line 106:		Line 106:
	margin-left: -4px;		margin-left: -4px;
	padding-left: calc(0.5rem + 4px);		padding-left: calc(0.5rem + 4px);
			}

			.collapsible-tree ul,
			.collapsible-tree li {
			list-style: none;
	}		}

Noeth at 09:32, 13 January 2026

2026-01-13T09:32:34Z

← Older revision		Revision as of 09:32, 13 January 2026
Line 1:		Line 1:
			/* Hide nested lists by default to prevent FOUC */
			.collapsible-tree > ul ul {
			display: none;
			}

	.collapsible-tree > ul {		.collapsible-tree > ul {
	margin: 0;		margin: 0;
	padding-left: ~~25px~~;		padding-left: 28px;
	list-style: none;		list-style: none;
	line-height: 2em;		line-height: 2.2em;
	}		}

	.collapsible-tree > ul li {		.collapsible-tree > ul li {
	position: relative;		position: relative;
			transition: all 0.2s ease;
	}		}

	.collapsible-tree > ul li a {		.collapsible-tree > ul li a {
	padding-left: 0.5rem;		padding-left: 0.5rem;
			color: #2563eb;
			text-decoration: none;
			transition: color 0.2s ease;
	}		}

			.collapsible-tree > ul li a:hover {
			color: #1e40af;
			text-decoration: underline;
			}

			/* Modern tree lines with smoother styling */
	.collapsible-tree > ul li::before,		.collapsible-tree > ul li::before,
	.collapsible-tree > ul li::after {		.collapsible-tree > ul li::after {
	content: "";		content: "";
	position: absolute;		position: absolute;
	left: -~~15px~~;		left: -18px;
	border-left: 1px ~~dashed~~ #~~999~~;		border-left: 1px solid #d1d5db;
	}		}

	.collapsible-tree > ul li::before {		.collapsible-tree > ul li::before {
	top: 0;		top: 0;
	width: ~~15px~~;		width: 18px;
	height: 1em;		height: 1.1em;
	border-bottom: 1px ~~dashed~~ #~~999~~;		border-bottom: 1px solid #d1d5db;
	}		}

Line 44:		Line 59:
	}		}

	/* ~~Toggle~~ icon ~~(inserted via JS)~~ */		/* Modern toggle icon */
	.js-toggle-icon {		.js-toggle-icon {
	position: relative;		position: relative;
	z-index: 1;		z-index: 1;
	display: inline-~~block~~;		display: inline-flex;
	~~width~~: ~~14px~~;		align-items: center;
	~~margin~~: ~~0 2px 0 -23px~~;		justify-content: center;
	~~line-~~height: ~~14px~~;		width: 18px;
	~~text~~-~~align: center~~;		height: 18px;
			margin: 0 4px 0 -26px;
	cursor: pointer;		cursor: pointer;
	font-style: normal;		font-style: normal;
	background-~~color:~~ #~~fff~~;		font-size: 12px;
	border: 1px solid #~~666~~;		font-weight: 600;
	border-radius: 2px;		background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
			border: 1px solid #d1d5db;
			border-radius: 3px;
			color: #4b5563;
			transition: all 0.2s ease;
			user-select: none;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			}

			.js-toggle-icon:hover {
			background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
			border-color: #9ca3af;
			color: #1f2937;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
			transform: scale(1.05);
			}

			.js-toggle-icon:active {
			transform: scale(0.95);
			box-shadow: 0 0 0 rgba(0, 0, 0, 0.05);
			}

			/* Highlight parent items with children */
			.collapsible-tree > ul li.has-children > a {
			font-weight: 500;
			}

			/* Optional: Add subtle hover effect to tree items */
			.collapsible-tree > ul li:hover > a {
			background-color: rgba(59, 130, 246, 0.05);
			border-radius: 3px;
			margin-left: -4px;
			padding-left: calc(0.5rem + 4px);
	}		}

Noeth at 09:07, 13 January 2026

2026-01-13T09:07:24Z

← Older revision		Revision as of 09:07, 13 January 2026
Line 8:		Line 8:
	.collapsible-tree > ul li {		.collapsible-tree > ul li {
	position: relative;		position: relative;
			}

			.collapsible-tree > ul li a {
			padding-left: 0.5rem;
	}		}

Noeth: Created page with ".collapsible-tree > ul { margin: 0; padding-left: 25px; list-style: none; line-height: 2em; } .collapsible-tree > ul li { position: relative; } .collapsible-tree > ul li::before, .collapsible-tree > ul li::after { content: ""; position: absolute; left: -15px; border-left: 1px dashed #999; } .collapsible-tree > ul li::before { top: 0; width: 15px; height: 1em; border-bottom: 1px dashed #999; } /* Hide vertical line for first item */ .collapsi..."

2026-01-13T09:05:08Z

Created page with ".collapsible-tree > ul { margin: 0; padding-left: 25px; list-style: none; line-height: 2em; } .collapsible-tree > ul li { position: relative; } .collapsible-tree > ul li::before, .collapsible-tree > ul li::after { content: ""; position: absolute; left: -15px; border-left: 1px dashed #999; } .collapsible-tree > ul li::before { top: 0; width: 15px; height: 1em; border-bottom: 1px dashed #999; } Hide vertical line for first item: .collapsi..."

New page

.collapsible-tree > ul {
margin: 0;
padding-left: 25px;
list-style: none;
line-height: 2em;
}

.collapsible-tree > ul li {
position: relative;
}

.collapsible-tree > ul li::before,
.collapsible-tree > ul li::after {
content: "";
position: absolute;
left: -15px;
border-left: 1px dashed #999;
}

.collapsible-tree > ul li::before {
top: 0;
width: 15px;
height: 1em;
border-bottom: 1px dashed #999;
}

/* Hide vertical line for first item */
.collapsible-tree > ul > li:first-child::before {
border-left: none;
}

.collapsible-tree > ul li::after {
top: 1.1em;
bottom: 1px;
}

/* Hide lines for last item */
.collapsible-tree > ul li:last-child::after {
display: none;
}

/* Toggle icon (inserted via JS) */
.js-toggle-icon {
position: relative;
z-index: 1;
display: inline-block;
width: 14px;
margin: 0 2px 0 -23px;
line-height: 14px;
text-align: center;
cursor: pointer;
font-style: normal;
background-color: #fff;
border: 1px solid #666;
border-radius: 2px;
}