Module:collapsible category tree/style.css - Revision history

Sware: Undo revision 461111 by Sware (talk)

2025-07-01T23:30:52Z

Undo revision 461111 by Sware (talk)

← Older revision		Revision as of 23:30, 1 July 2025
Line 5:		Line 5:
	}		}

	/* suppress triangular toggle button */		/* suppress default appearance of triangular toggle button */
	.columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle {		.columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle {
	display: none;		display: none;
	}		}
			.columns-bg.term-list.CategoryTreeTag .CategoryTreeBullet::after {
	~~/* Match global .list-switcher-header styles */~~		content: "▼";
	.columns-bg.term-list.CategoryTreeTag ~~> div > div~~.~~CategoryTreeItem {~~
	~~/* START global .list-switcher-header styles */~~
	~~background: #aaaaee;~~
	~~font-weight: bold;~~
	~~font-size~~: ~~95%;~~
	~~padding~~: ~~0.2em 0.4em 0.1em 0.6em;~~
	~~/* END global .list-switcher-header styles */~~

	~~/* Extra styles added to global .list-switcher-header rules: */~~
	~~margin-right: -0.3em;~~
	}

	~~.columns-bg.term-list.CategoryTreeTag > div > div.CategoryTreeChildren~~ {
	~~padding-top~~: ~~0.1em~~;
	}		}

	/* Make the list switcher one line taller than default */		/* Make the list switcher one line taller than default */
	.list-switcher-category-tree {		.list-switcher-category-tree {
	bottom: calc(4.4 * 1.6em); /* can't use "lh" units in TemplateStyles */		bottom: calc(4.2 * 1.6em); /* can't use "lh" units in TemplateStyles */
	}		}
	.list-switcher-category-tree.list-switcher-collapsed {		.list-switcher-category-tree.list-switcher-collapsed {
	max-height: calc(4.4 * 1.6em); /* can't use "lh" units in TemplateStyles */		max-height: calc(4.2 * 1.6em); /* can't use "lh" units in TemplateStyles */
	}		}

Line 62:		Line 48:
	.list-switcher-category-tree > .CategoryTreeTag:not([data-pages-left-over="0"]) .CategoryTreeChildren::after {		.list-switcher-category-tree > .CategoryTreeTag:not([data-pages-left-over="0"]) .CategoryTreeChildren::after {
	content: "...and " counter(pagesleftover) " more";		content: "...and " counter(pagesleftover) " more";
	}

	~~/* space between adjacent category trees - e.g. [[-DZÍÍʼ]] */~~
	~~.list-switcher-category-tree + link + .list-switcher-category-tree,~~
	~~.list-switcher-category-tree + style + .list-switcher-category-tree,~~
	~~.list-switcher-category-tree + .list-switcher-category-tree {~~
	~~margin-top: 0.6em;~~
	}		}

Sware at 23:16, 1 July 2025

2025-07-01T23:16:59Z

← Older revision		Revision as of 23:16, 1 July 2025
Line 5:		Line 5:
	}		}

	/* suppress ~~default appearance of~~ triangular toggle button */		/* suppress triangular toggle button */
	.columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle {		.columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle {
	display: none;		display: none;
	}		}
	.columns-bg.term-list.CategoryTreeTag .~~CategoryTreeBullet~~::~~after~~ {
	~~content~~: ~~"▼"~~;		/* Match global .list-switcher-header styles */
			.columns-bg.term-list.CategoryTreeTag > div > div.CategoryTreeItem {
			/* START global .list-switcher-header styles */
			background: #aaaaee;
			font-weight: bold;
			font-size: 95%;
			padding: 0.2em 0.4em 0.1em 0.6em;
			/* END global .list-switcher-header styles */

			/* Extra styles added to global .list-switcher-header rules: */
			margin-right: -0.3em;
			}

			.columns-bg.term-list.CategoryTreeTag > div > div.CategoryTreeChildren {
			padding-top: 0.1em;
	}		}

	/* Make the list switcher one line taller than default */		/* Make the list switcher one line taller than default */
	.list-switcher-category-tree {		.list-switcher-category-tree {
	bottom: calc(4.2 * 1.6em); /* can't use "lh" units in TemplateStyles */		bottom: calc(4.4 * 1.6em); /* can't use "lh" units in TemplateStyles */
	}		}
	.list-switcher-category-tree.list-switcher-collapsed {		.list-switcher-category-tree.list-switcher-collapsed {
	max-height: calc(4.2 * 1.6em); /* can't use "lh" units in TemplateStyles */		max-height: calc(4.4 * 1.6em); /* can't use "lh" units in TemplateStyles */
	}		}

Line 48:		Line 62:
	.list-switcher-category-tree > .CategoryTreeTag:not([data-pages-left-over="0"]) .CategoryTreeChildren::after {		.list-switcher-category-tree > .CategoryTreeTag:not([data-pages-left-over="0"]) .CategoryTreeChildren::after {
	content: "...and " counter(pagesleftover) " more";		content: "...and " counter(pagesleftover) " more";
			}

			/* space between adjacent category trees - e.g. [[-DZÍÍʼ]] */
			.list-switcher-category-tree + link + .list-switcher-category-tree,
			.list-switcher-category-tree + style + .list-switcher-category-tree,
			.list-switcher-category-tree + .list-switcher-category-tree {
			margin-top: 0.6em;
	}		}

Sware: Created page with "/* Styles applying equally to collapsible and non-collapsible instances / .columns-bg.term-list.CategoryTreeTag { margin-top: 0; margin-bottom: 0; } / suppress default appearance of triangular toggle button / .columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle { display: none; } .columns-bg.term-list.CategoryTreeTag .CategoryTreeBullet::after { content: "▼"; } / Make the list switcher one line taller than default */ .list-switcher-category-tree { botto..."

2025-01-24T19:31:45Z

Created page with "Styles applying equally to collapsible and non-collapsible instances: .columns-bg.term-list.CategoryTreeTag { margin-top: 0; margin-bottom: 0; } suppress default appearance of triangular toggle button: .columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle { display: none; } .columns-bg.term-list.CategoryTreeTag .CategoryTreeBullet::after { content: "▼"; } Make the list switcher one line taller than default: .list-switcher-category-tree { botto..."

New page

/* Styles applying equally to collapsible and non-collapsible instances */
.columns-bg.term-list.CategoryTreeTag {
margin-top: 0;
margin-bottom: 0;
}

/* suppress default appearance of triangular toggle button */
.columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle {
display: none;
}
.columns-bg.term-list.CategoryTreeTag .CategoryTreeBullet::after {
content: "▼";
}

/* Make the list switcher one line taller than default */
.list-switcher-category-tree {
bottom: calc(4.2 * 1.6em); /* can't use "lh" units in TemplateStyles */
}
.list-switcher-category-tree.list-switcher-collapsed {
max-height: calc(4.2 * 1.6em); /* can't use "lh" units in TemplateStyles */
}

/* The objective of the next few rules is to make CategoryTree's <div> output
look indistinguishable from a default MediaWiki bulleted list. */
.list-switcher-category-tree .CategoryTreeChildren {
column-count: 3;
/* match default MediaWiki styling of <ul> */
margin-left: 1.6em;
margin-right: 0;
padding: 0;
}

.list-switcher-category-tree .CategoryTreeChildren .CategoryTreeSection {
/* match default MediaWiki styling of <li> */
display: list-item;
margin-bottom: 0.1em;
}

.list-switcher-category-tree .CategoryTreeChildren .CategoryTreeItem {
display: inline;
}

.list-switcher-category-tree .CategoryTreePageBullet {
display: none;
}

/* hack - proof of concept */
.list-switcher-category-tree > .CategoryTreeTag:not([data-pages-left-over="0"]) .CategoryTreeChildren::after {
content: "...and " counter(pagesleftover) " more";
}