模块:Navplate/styles.css - 版本历史

2025年8月11日 (一) 06:22 9Yan

2025-08-11T06:22:48Z

←上一版本		2025年8月11日 (一) 14:22的版本
第105行：		第105行：
	}		}

	.mw-collapsible-toggle {		.mw-collapsible-toggle.mw-collapsible-toggle-default {
	display: none;		display: none !important;
	content: "";		content: "";
	}		}

2025年8月11日 (一) 06:21 9Yan

2025-08-11T06:21:01Z

←上一版本		2025年8月11日 (一) 14:21的版本
第105行：		第105行：
	}		}

	~~summary::marker~~ {		.mw-collapsible-toggle {
	display: none;		display: none;
	content: "";		content: "";
	}		}

2025年8月11日 (一) 06:18 9Yan

2025-08-11T06:18:52Z

←上一版本		2025年8月11日 (一) 14:18的版本
第103行：		第103行：
	padding-bottom: var( --space-sm );		padding-bottom: var( --space-sm );
	}		}
			}

			summary::marker {
			display: none;
			content: "";
	}		}

2025年8月11日 (一) 05:58 9Yan

2025-08-11T05:58:03Z

←上一版本		2025年8月11日 (一) 13:58的版本
第3行：		第3行：
	clear: both;		clear: both;
	font-size: var( --font-size-small );		font-size: var( --font-size-small );
	line-height: var( --line-height-sm );		line-height: var( --line-height-xx-small );
	border: 1px solid var( --border-color-base );		border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius--medium );		border-radius: var( --border-radius-medium );
	~~backdrop-filter: var(--backdrop-filter-frosted-glass~~);
	overflow: hidden;		overflow: hidden;
			user-select: none;
	}		}

	.template-navplate__header {		.template-navplate__header {
	padding: var( --space-sm ) var( --space-md );		padding: var( --space-sm ) var( --space-md );
	background-color: ~~var( --color-surface-2 );~~		background-color: transparent;
	~~background: linear-gradient(~~transparent~~, var(--read-more-bg) 80%);~~
	~~backdrop-filter: var(--backdrop-filter-frosted-glass)~~;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	gap: var( --space-md );		gap: var( --space-md );
	~~transition~~: ~~0.25s all~~;		cursor: pointer;
			user-select: none;
	}		}

	.template-navplate~~.mw-collapsed~~ .template-navplate__header {		.template-navplate[ open ] .template-navplate__header {
	background~~: var(~~-~~-read-more-bg);~~		background-color: var( --color-surface-1 );
	~~backdrop-filter~~: var(--~~backdrop-filter~~-~~frosted~~-~~glass~~);
	~~transition: 0.25s all~~;
	}		}

	.template-~~navplate__subtitle~~ {		.template-navplate .template-navplate__header:hover {
	~~font~~-~~size~~: var( --~~font~~-~~size~~-x-~~small~~ );		background-color: var( --background-color-button-quiet--hover );
	}		}

	.template-navplate__subtitle,		.template-navplate__subtitle,
	.template-navplate-item__label {		.template-navplate-item__label {
	color: var( --color~~-base-~~-subtle );		color: var( --color-subtle );
	~~letter-spacing: 0.05em~~;
	}		}

	.template-~~navplate__title,~~		.template-navplate-item__label {
	~~.template~~-~~navplate__groupheader~~ {		font-weight: var( --font-weight-medium );
	~~color: var( --color-base--emphasized );~~
	font-weight: var( --font-weight-~~semibold~~ );
	}		}

	.template-navplate__title {		.template-navplate__title {
	font-size: var( --font-size-~~x-large~~ );		color: var( --color-emphasized );
			font-weight: var( --font-weight-semi-bold );
			font-size: var( --font-size-medium );
	}		}

	.template-navplate__content {		.template-navplate__content {
	~~position: relative;~~		border-top: var( --border-base );
	border-top: ~~1px solid~~ var( --border~~-color~~-base );		content-visibility: auto;
	}		}

	.template-navplate__groupheader {		.template-navplate__groupheader {
	background~~: var(--read-more-bg);~~		background-color: var( --color-surface-1 );
	~~backdrop~~-~~filter~~: var(--~~backdrop-filter~~-~~frosted~~-~~glass~~);
	padding: var( --space-xs ) var( --space-md );		padding: var( --space-xs ) var( --space-md );
	}		}
第83行：		第78行：

	.template-navplate__content > div + div {		.template-navplate__content > div + div {
	border-top: ~~1px solid~~ var( --border~~-color~~-base );		border-top: var( --border-base );
	}

	~~/* Style collapse button */~~
	~~.template-navplate__header.mw-collapsible-toggle {~~
	~~float: none;~~
	~~transition: 0.25s all;~~
	}

	~~.template-navplate__header.mw-collapsible-toggle:hover {~~
	~~background: var(--read-more-bg);~~
	~~backdrop-filter: var(--backdrop-filter-frosted-glass~~);
	}		}

	.template-navplate__header~~.mw-collapsible-toggle~~ .mw-ui-icon-wikimedia-collapse {		.template-navplate__header .mw-ui-icon-wikimedia-collapse {
			--transform-rotate-collapse: rotate3d(1, 0, 0, 180deg);
	width: var( --font-size-small );		width: var( --font-size-small );
	height: var( --font-size-small );		height: var( --font-size-small );
	transition: var( --transition-~~menu~~ );		transition: var( --transition-hover );
	transition-property: transform;		transition-property: transform;
			transform: var( --transform-rotate-collapse );
	}		}

	.template-~~navplate__header~~.mw-~~collapsible-toggle.mw-collapsible-toggle-collapsed~~ .mw-ui-icon-wikimedia-collapse {		.template-navplate[ open ] .template-navplate__header .mw-ui-icon-wikimedia-collapse {
	transform: ~~rotate( 180deg )~~;		transform: none;
	}		}

9Yan：创建页面，内容为“.template-navplate { margin-top: var( --space-md ); clear: both; font-size: var( --font-size-small ); line-height: var( --line-height-sm ); border: 1px solid var( --border-color-base ); border-radius: var( --border-radius--medium ); backdrop-filter: var(--backdrop-filter-frosted-glass); overflow: hidden; } .template-navplate__header { padding: var( --space-sm ) var( --space-md ); background-color: var( --color-surface-2 ); background: linear-grad…”

2025-08-11T05:49:56Z

创建页面，内容为“.template-navplate { margin-top: var( --space-md ); clear: both; font-size: var( --font-size-small ); line-height: var( --line-height-sm ); border: 1px solid var( --border-color-base ); border-radius: var( --border-radius--medium ); backdrop-filter: var(--backdrop-filter-frosted-glass); overflow: hidden; } .template-navplate__header { padding: var( --space-sm ) var( --space-md ); background-color: var( --color-surface-2 ); background: linear-grad…”

新页面

.template-navplate {
margin-top: var( --space-md );
clear: both;
font-size: var( --font-size-small );
line-height: var( --line-height-sm );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius--medium );
backdrop-filter: var(--backdrop-filter-frosted-glass);
overflow: hidden;
}

.template-navplate__header {
padding: var( --space-sm ) var( --space-md );
background-color: var( --color-surface-2 );
background: linear-gradient(transparent, var(--read-more-bg) 80%);
backdrop-filter: var(--backdrop-filter-frosted-glass);
display: flex;
align-items: center;
gap: var( --space-md );
transition: 0.25s all;
}

.template-navplate.mw-collapsed .template-navplate__header {
background: var(--read-more-bg);
backdrop-filter: var(--backdrop-filter-frosted-glass);
transition: 0.25s all;
}

.template-navplate__subtitle {
font-size: var( --font-size-x-small );
}

.template-navplate__subtitle,
.template-navplate-item__label {
color: var( --color-base--subtle );
letter-spacing: 0.05em;
}

.template-navplate__title,
.template-navplate__groupheader {
color: var( --color-base--emphasized );
font-weight: var( --font-weight-semibold );
}

.template-navplate__title {
font-size: var( --font-size-x-large );
}

.template-navplate__content {
position: relative;
border-top: 1px solid var( --border-color-base );
}

.template-navplate__groupheader {
background: var(--read-more-bg);
backdrop-filter: var(--backdrop-filter-frosted-glass);
padding: var( --space-xs ) var( --space-md );
}

.template-navplate-item {
display: grid;
}

.template-navplate-item__label {
display: flex;
padding: var( --space-sm ) var( --space-md ) 0 var( --space-md );
gap: var( --space-xs );
}

.template-navplate-item__label img {
opacity: var( --opacity-icon-base );
filter: var( --filter-invert );
}

.template-navplate-item__list {
padding: 10px; /* 10px + 2px = space-sm; 10px + 6px = space-md */
}

.template-navplate-item__list a {
display: inline-block;
padding: 2px 6px;
}

.template-navplate__content > div + div {
border-top: 1px solid var( --border-color-base );
}

/* Style collapse button */
.template-navplate__header.mw-collapsible-toggle {
float: none;
transition: 0.25s all;
}

.template-navplate__header.mw-collapsible-toggle:hover {
background: var(--read-more-bg);
backdrop-filter: var(--backdrop-filter-frosted-glass);
}

.template-navplate__header.mw-collapsible-toggle .mw-ui-icon-wikimedia-collapse {
width: var( --font-size-small );
height: var( --font-size-small );
transition: var( --transition-menu );
transition-property: transform;
}

.template-navplate__header.mw-collapsible-toggle.mw-collapsible-toggle-collapsed .mw-ui-icon-wikimedia-collapse {
transform: rotate( 180deg );
}

@media only screen and ( min-width: 640px ) {
.template-navplate-item {
grid-template-columns: 180px auto;
}

.template-navplate-item__label {
border-right: 1px solid var( --border-color-base );
padding-bottom: var( --space-sm );
}
}