Module:Navpills/styles.css - 版本历史

2026年4月2日 (四) 13:17 秋绘君

2026-04-02T13:17:27Z

←上一版本		2026年4月2日 (四) 21:17的版本
第7行：		第7行：
	.adaptive-nav {		.adaptive-nav {
	display: grid;		display: grid;
	/* 自动填充列，最小宽度 ~~160px~~ */		/* 自动填充列，最小宽度 190px */
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;		gap: 12px;
第33行：		第33行：
	display: flex !important;		display: flex !important;
	align-items: center !important;		align-items: center !important;
	height: ~~4rem~~ !important;		height: 3.5rem !important; /* 强制胶囊高度（宽度） */
	padding: 0 !important;		padding: 0 !important;
	margin: 0 !important;		margin: 0 !important;

2026年4月2日 (四) 13:12 秋绘君

2026-04-02T13:12:49Z

←上一版本		2026年4月2日 (四) 21:12的版本
第8行：		第8行：
	display: grid;		display: grid;
	/* 自动填充列，最小宽度 160px */		/* 自动填充列，最小宽度 160px */
	grid-template-columns: repeat(auto-fill, minmax(~~220px~~, 1fr));		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;		gap: 12px;
	margin-top: 1rem;		margin-top: 1rem;
第33行：		第33行：
	display: flex !important;		display: flex !important;
	align-items: center !important;		align-items: center !important;
	height: ~~3rem~~ !important;		height: 4rem !important;
	padding: 0 !important;		padding: 0 !important;
	margin: 0 !important;		margin: 0 !important;
	border: 1px solid var(--border-color-base, #ddd) !important;		border: 1px solid var(--border-color-base, #ddd) !important;
	border-radius: ~~8px~~ !important; /* 强制胶囊形状 */		border-radius: 12px !important; /* 强制胶囊形状 */
	background-color: #1a1a1a !important; /* 背景默认深色 [cite: 14] */		background-color: #1a1a1a !important; /* 背景默认深色 [cite: 14] */
	overflow: hidden !important;		overflow: hidden !important;

2026年4月2日 (四) 13:10 秋绘君

2026-04-02T13:10:15Z

←上一版本		2026年4月2日 (四) 21:10的版本
第8行：		第8行：
	display: grid;		display: grid;
	/* 自动填充列，最小宽度 160px */		/* 自动填充列，最小宽度 160px */
	grid-template-columns: repeat(auto-fill, minmax(~~160px~~, 1fr));		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;		gap: 12px;
	margin-top: 1rem;		margin-top: 1rem;
第37行：		第37行：
	margin: 0 !important;		margin: 0 !important;
	border: 1px solid var(--border-color-base, #ddd) !important;		border: 1px solid var(--border-color-base, #ddd) !important;
	border-radius: ~~50px~~ !important; /* 强制胶囊形状 */		border-radius: 8px !important; /* 强制胶囊形状 */
	background-color: #1a1a1a !important; /* 背景默认深色 [cite: 14] */		background-color: #1a1a1a !important; /* 背景默认深色 [cite: 14] */
	overflow: hidden !important;		overflow: hidden !important;

秋绘君：创建页面，内容为“/* ========================================================================== 星际公民风格导航：Module:Navpills 专属样式功能：胶囊形状、悬停遮罩侧移、图片放大、高度自适应 ========================================================================== / / 1. 导航容器网格布局 / .adaptive-nav { display: grid; / 自动填充列，最小宽度 160px */ grid-template-columns: repeat(auto-fill, minmax(160px,…”

2026-04-02T12:56:49Z

创建页面，内容为“========================================================================== 星际公民风格导航：Module:Navpills 专属样式功能：胶囊形状、悬停遮罩侧移、图片放大、高度自适应 ==========================================================================： 1. 导航容器网格布局： .adaptive-nav { display: grid; 自动填充列，最小宽度 160px： grid-template-columns: repeat(auto-fill, minmax(160px,…”

新页面

/* ==========================================================================
星际公民风格导航：Module:Navpills 专属样式
功能：胶囊形状、悬停遮罩侧移、图片放大、高度自适应
========================================================================== */

/* 1. 导航容器网格布局 */
.adaptive-nav {
display: grid;
/* 自动填充列，最小宽度 160px */
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-top: 1rem;
/* 【关键】移除 grid-auto-rows，允许内容行根据子项数量自由撑开高度 */
align-items: start;
}

@media (min-width: 769px) {
/* PC端：确保按钮在第一行，内容在第二行并横跨全宽 */
.nav-module { display: contents; }
.nav-pill-btn { grid-row: 1; height: 3rem !important; }
.nav-pill-content {
grid-row: 2;
grid-column: 1 / -1;
margin-top: 10px;
height: auto !important;
}
}

/* 2. 胶囊按钮 (确立层叠上下文 z-index: 1) */
.template-navpill.mw-customtoggle {
position: relative !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
height: 3rem !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid var(--border-color-base, #ddd) !important;
border-radius: 50px !important; /* 强制胶囊形状 */
background-color: #1a1a1a !important; /* 背景默认深色 [cite: 14] */
overflow: hidden !important;
box-sizing: border-box !important;
z-index: 1 !important;
}

/* 3. 背景图层 (z-index: 1 - 最底层) */
.template-navpill-background {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
}

/* 黑色渐变遮罩 (z-index: 2 - 中间层) */
.template-navpill-background:after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* 参考星际公民风格：黑色向透明平滑渐变 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
z-index: 2;
/* 定义遮罩滑出的过渡动画 [cite: 16] */
transition: transform 0.2s ease-out !important;
}

.template-navpill-background img {
width: 100%;
height: 100%;
object-fit: cover;
/* 定义图片放大的过渡动画 [cite: 33] */
transition: transform 0.3s ease-out !important;
}

/* 3.1 悬停交互特效 (Hover FX) */
.template-navpill:hover .template-navpill-background img {
transform: scale(1.05) !important; /* 图片轻微放大 [cite: 33] */
}

.template-navpill:hover .template-navpill-background:after {
transform: translateX(-100%) !important; /* 遮罩向左快速滑出 */
}

/* 4. 文字样式 (z-index: 3 - 位于最顶层) */
.pill-text {
position: relative !important;
z-index: 3 !important;
display: block !important;
padding: 0 24px;
font-weight: 600;
font-size: 16px;
color: #ffffff !important; /* 强制白色文字 */
/* 强力描边阴影确保文字清晰 */
text-shadow: -1px 0 .2em #000, 0 1px .2em #000, 1px 0 .2em #000, 0 -1px .2em #000 !important;
}

/* 5. 展开内容区 (高度自适应适配) */
.nav-pill-content {
display: none;
background-color: var(--color-surface-2, #f0f0f0);
border: 1px solid var(--border-color-base, #ddd);
border-radius: 15px;
width: 100%;
}

.nav-pill-content:not(.mw-collapsed) {
display: block !important;
}

.pill-inner-content {
padding: 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
height: auto !important; /* 确保盒子被子项内容撑开 */
}

/* 6. 内容子项目 (图上文下) */
.nav-sub-item { width: 100px; text-align: center; }
.nav-sub-image {
background: rgba(0,0,0,0.05);
border-radius: 12px;
padding: 10px;
margin-bottom: 8px;
}
.nav-sub-text {
font-size: 13px;
font-weight: 600;
color: var(--color-base, #333);
}

/* 7. 移动端自适应适配 */
@media (max-width: 768px) {
.adaptive-nav { display: block; }
.nav-module { margin-bottom: 12px; }
.nav-pill-btn { height: 3rem !important; }
.nav-pill-content { border-radius: 0 0 15px 15px; margin-top: -5px; }
}