Module:collapsible category tree/style.css

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

/* suppress triangular toggle button */
.columns-bg.term-list.CategoryTreeTag .CategoryTreeToggle {
	display: none;
}

/* 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 */
.list-switcher-category-tree {
	bottom: calc(4.4 * 1.6em); /* can't use "lh" units in TemplateStyles */
}
.list-switcher-category-tree.list-switcher-collapsed {
	max-height: calc(4.4 * 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";
}

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