MediaWiki:Gadget-Navbox.css

MediaWiki系统消息页面
/* <nowiki> */
/**
 * SPDX-License-Identifier: CC-BY-SA-4.0
 * _addText: '{{Gadget Header|license=CC-BY-SA-4.0}}'
 */
/* 本样式表用于Module:Navbox。 */
/* 除变量之外的其他部分 */
.navbox {
	display: -ms-grid;
	display: grid;
	box-sizing: border-box;
	padding: 3px;
	border: 1px solid #a2a9b1; /* not subgroup */
	margin: 1em 0;
	background: #fdfdfd;
	clear: both;
	font-size: 97.5%; /* not subgroup */
	-ms-grid-columns: auto 1fr;
	grid-gap: 3px;
	grid-template-columns: auto 1fr;
	overflow-x: auto;
	text-align: start;
}

/* navbox相接有关功能 */
.navbox-wrapper + .navbox-wrapper > .navbox,
.navbox-wrapper + .navbox-wrapper > .content-table > .navbox,
.navbox + .navbox {
	/* Single pixel border between adjacent navboxes */
	margin-top: calc(-1px - 1em); /* (doesn't work for IE6, but that's okay)	*/
	/* 优先级低于 .navbox-list.navbox 的 margin:0 */
}

/* 整个navbox中的所有单元格，包括title、group、list等。 */
.navbox-cell {
	padding: 0.0875em 1em;
}

/* 针对{{navboxes}}的修正 */
.navboxes > .navbox,
.navboxes > .navbox-wrapper > .navbox,
.navboxes > .navbox-wrapper > .content-table > .navbox {
	padding: 0.625em 0;
}

/* 标题居中 */
.navbox-above,
.navbox-below,
.navbox-title {
	text-align: center;
}

.navbox-sole-row {
	grid-column: 1 / 3;
}

.navbox-title {
	padding-left: 1em;
}

.navbox-group {
	display: -ms-grid;
	display: grid;
	align-items: center;
	justify-content: flex-end;
	font-weight: bold;
	grid-column: 1 / 2;
	text-align: end;
	/* max-width: 9em; */
	vertical-align: middle;
}

.navbox-list {
	display: -ms-grid;
	display: grid;
	align-items: center;
}

.navbox-title {
	display: -ms-grid;
	display: grid;
	background-color: hsl(100deg 45% 80%);
	font-weight: bolder;
	-ms-grid-columns: 1fr auto 1fr;
	grid-template-columns: 1fr auto 1fr;
	font-size: 97.5%;
}

.navbox-title > .navbar,
.navbox-title-inner > .navbar {
	grid-column: 1 / span 1;
	justify-self: start;
	margin-right: 0;
	margin-left: 0.5em;
}

.navbox-title > .navbox-title-content,
.navbox-title-inner > .navbox-title-content {
	grid-column: 2 / span 1;
	justify-self: center;
}

.navbox-title > .collapsetoggle,
.navbox-title > .mw-collapsible-toggle,
.navbox-title-inner > .mw-collapsible-toggle {
	font-weight: normal;
	grid-column: 3 / span 1;
	justify-self: end;
}

/* .navbox-title > .mw-collapsible-toggle { */
/*	margin-left: -100%; */
/*	margin-right: 0; */
/* } */
/* .mw-content-rtl .navbox-title > .mw-collapsible-toggle, */
/* .mw-content-rtl .mw-parser-output .navbox-title > .mw-collapsible-toggle { */
/*	margin-right: -100%; */
/*	margin-left: 0; */
/* } */

/* navbox各单元格的着色，注意这些属性只是用作“后备”的，会被最后面的变量部分
报错。因此，这段内容并不会被使用，除非浏览器版本过旧不支持CSS变量。 */

.navbox-group,
.navbox-above,
.navbox-below,
.navbox .navbox .navbox-title {
	background-color: hsl(100deg 45% 85%);
}

.navbox .navbox .navbox-group,
.navbox .navbox .navbox-above,
.navbox .navbox .navbox-below,
.navbox .navbox .navbox .navbox-title {
	background-color: hsl(100deg 45% 90%);
}

.navbox .navbox .navbox .navbox-group,
.navbox .navbox .navbox .navbox-above,
.navbox .navbox .navbox .navbox-below,
.navbox .navbox .navbox .navbox .navbox-title {
	background-color: hsl(100deg 45% 95%);
}

.navbox-odd {
	background: transparent;
}

.navbox-even {
	background: #f7f7f7;
}

/* navbar有关功能 */
.navbar {
	display: inline;
	font-weight: normal;
}

.navbar ul {
	display: inline;
	/* white-space: nowrap; */
}

.navbar li {
	word-spacing: -0.125em;
}

.navbar-mini li abbr[title] {
	border-bottom: 0;
	cursor: inherit;
	font-variant: small-caps;
	text-decoration: none;
}

/* 子导航框有关功能 */
.navbox-list.navbox,
.navbox-list > span > .navbox,
.navbox-list > span > span > .navbox,
.navbox-list > .navbox {
	align-items: stretch;
	align-self: stretch;
	padding: 0;
	border: 0;
	margin: 0;
	font-size: inherit;
}

.navbox-list > .navbox,
.navbox-list > span > .navbox,
.navbox-list > span > span > .navbox {
	margin: -0.0875em -1em;
}

.navbox-list > .navbox:not(.navbox-level-0) {
	margin: 0;
}

/* navbox-plain和vertical有关功能 */
.plainbox > .navbox-group {
	max-width: none;
	justify-content: center;
	text-align: center;
}

.plainbox > .navbox-group,
.plainbox > .navbox-list {
	grid-column: 1 / 3;
}

.navbox.vertical > .navbox-group,
.navbox-group.vertical {
	justify-content: center;
	text-align: center;
	writing-mode: vertical-rl;
}

.plainbox.vertical > .navbox-group .plainbox > .navbox-group.vertical {
	justify-content: flex-end;
	text-align: end;
	writing-mode: inherit;
}

@media screen and (max-width: 768px) {
	.navbox-group {
		justify-content: center;
		text-align: center;
	}

	.plainbox > .navbox-group {
		max-width: none;
	}

	.plainbox > .navbox-group,
	.plainbox > .navbox-list {
		grid-column: 1 / 3;
	}

	.plainbox.vertical > .navbox-group,
	.plainbox > .navbox-group.vertical {
		justify-content: center;
		text-align: center;
		writing-mode: inherit;
	}

	.navbox.vertical > .navbox-group,
	.navbox-group.vertical {
		writing-mode: horizontal-tb;
	}

	.navbox-list,
	.navbox-cell {
		padding: 0.0875em 0;
	}

	.navbox-list > .navbox,
	.navbox-list > span > .navbox,
	.navbox-list > span > span > .navbox {
		margin: unset;
		margin-right: 0;
	}

	.mw-body-content .navbox,
	.mw-body-content .navbox > .navbox-inner {
		width: 100% !important;
		box-sizing: border-box;
		display: block;
	}
}

/* Style for horizontal lists (separator following item) */
.navbox .hlist dl,
.navbox .hlist ol,
.navbox .hlist ul,
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
	margin: 0 !important;
}

.navbox .hlist dl,
.navbox .hlist ol,
.navbox .hlist ul,
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li,
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}

.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li {
	white-space: nowrap; /* Nowrap list items in navboxes */
}

.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li ol,
.navbox .hlist li ul {
	white-space: normal; /* But allow parent list items to be wrapped */
}

.navbox .hlist ul ul {
	padding-left: 0;
	margin-left: 0;
}

/* 字号 */
.navbox-group,
.navbox-above,
.navbox-below {
	font-size: inherit;
}

.navbox-cell .navbox-group {
	font-size: 97.5%;
}

/* 变量部分，请忽略下方所有的编辑器报错 */
:root {
	--navbox-hue: 160;
	--navbox-saturation: 45%;
}

.navbox {
	--navbox-title-color: hsl(var(--navbox-hue) var(--navbox-saturation) 72%);
	--navbox-group-color: hsl(var(--navbox-hue) var(--navbox-saturation) 80%);
	--navbox-subgroup-color: hsl(var(--navbox-hue) var(--navbox-saturation) 86%);
	--navbox-sub-subgroup-color: hsl(var(--navbox-hue) var(--navbox-saturation) 90%);
}

.navbox-title {
	background-color: var(--navbox-title-color);
}

.navbox-group,
.navbox-above,
.navbox-below,
.navbox .navbox .navbox-title {
	background-color: var(--navbox-group-color);
}

.navbox .navbox .navbox-group,
.navbox .navbox .navbox-above,
.navbox .navbox .navbox-below,
.navbox .navbox .navbox .navbox-title {
	background-color: var(--navbox-subgroup-color);
}

.navbox .navbox .navbox .navbox-group,
.navbox .navbox .navbox .navbox-above,
.navbox .navbox .navbox .navbox-below,
.navbox .navbox .navbox .navbox .navbox-title {
	background-color: var(--navbox-sub-subgroup-color);
}

/* </nowiki> */
取自“https://youshou.wiki/index.php?title=MediaWiki:Gadget-Navbox.css&oldid=2304”