模板:外部百科导航/styles.css - 版本历史

天明：避免外部百科导航贴靠右浮动信息框

2026-06-27T06:49:53Z

避免外部百科导航贴靠右浮动信息框

←上一版本		2026年6月27日 (六) 14:49的版本
第1行：		第1行：
	~~:root > .external-encyclopedia-nav.external-encyclopedia-nav {~~
	~~grid-column: 1 / -1;~~
	}

	.external-encyclopedia-nav {		.external-encyclopedia-nav {
	clear: both;		clear: both;

天明：调整外部百科导航与信息框的排布

2026-06-27T06:48:28Z

调整外部百科导航与信息框的排布

←上一版本		2026年6月27日 (六) 14:48的版本
第1行：		第1行：
			:root > .external-encyclopedia-nav.external-encyclopedia-nav {
			grid-column: 1 / -1;
			}

	.external-encyclopedia-nav {		.external-encyclopedia-nav {
			clear: both;
	margin-top: 1rem;		margin-top: 1rem;
	margin-bottom: 1rem;		margin-bottom: 1rem;

天明：优化外部百科导航交互区域

2026-06-26T11:56:40Z

优化外部百科导航交互区域

←上一版本		2026年6月26日 (五) 19:56的版本
第42行：		第42行：
	font-size: 0.875em;		font-size: 0.875em;
	line-height: 1.4;		line-height: 1.4;
			}

			.external-encyclopedia-nav__help::after {
			content: "";
			position: absolute;
			top: 100%;
			right: 0;
			width: 20rem;
			max-width: 80vw;
			height: 0.5rem;
	}		}

第118行：		第128行：

	.external-encyclopedia-nav__item {		.external-encyclopedia-nav__item {
	display: flex;		margin: 0;
			padding: 0;
			}

			.external-encyclopedia-nav__item > a {
			display: inline-flex;
	align-items: center;		align-items: center;
	gap: 0.5rem;		gap: 0.5rem;
	min-height: 2.625rem;		min-height: 2.625rem;
	~~margin: 0;~~
	padding: 0.375rem 0.75rem 0.375rem 0.375rem;		padding: 0.375rem 0.75rem 0.375rem 0.375rem;
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: 999px;		border-radius: 999px;
	background-color: var(--background-color-base);		background-color: var(--background-color-base);
	}

	~~.external-encyclopedia-nav__item > a {~~
	~~display: inline-flex;~~
	~~align-items: center;~~
	color: var(--color-emphasized);		color: var(--color-emphasized);
	font-weight: 600;		font-weight: 600;
	}		}

	.external-encyclopedia-nav__item:hover,		.external-encyclopedia-nav__item > a:hover,
	.external-encyclopedia-nav__item > a:focus {		.external-encyclopedia-nav__item > a:focus {
	border-color: var(--border-color-progressive);		border-color: var(--border-color-progressive);
	background-color: var(--background-color-interactive-subtle);		background-color: var(--background-color-interactive-subtle);
	}

	~~.external-encyclopedia-nav__item > a:hover,~~
	~~.external-encyclopedia-nav__item > a:focus {~~
	color: var(--color-progressive);		color: var(--color-progressive);
	text-decoration: none;		text-decoration: none;
第185行：		第190行：

	.external-encyclopedia-nav__help-panel {		.external-encyclopedia-nav__help-panel {
			right: auto;
			left: 0;
			width: 20rem;
			max-width: calc(100vw - 3rem);
			}

			.external-encyclopedia-nav__help::after {
	right: auto;		right: auto;
	left: 0;		left: 0;

天明：创建外部百科导航模板样式

2026-06-26T11:46:06Z

创建外部百科导航模板样式

新页面

.external-encyclopedia-nav {
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius-medium);
background-color: var(--background-color-base);
}

.external-encyclopedia-nav__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
margin-bottom: 0.75rem;
}

.external-encyclopedia-nav__title {
display: flex;
align-items: center;
gap: 0.625rem;
color: var(--color-emphasized);
font-weight: 700;
}

.external-encyclopedia-nav__title::before {
content: "↗";
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background-color: var(--background-color-interactive-subtle);
color: var(--color-progressive);
font-weight: 700;
line-height: 1;
}

.external-encyclopedia-nav__help {
position: relative;
margin-left: auto;
font-size: 0.875em;
line-height: 1.4;
}

.external-encyclopedia-nav__help-trigger {
display: inline-flex;
align-items: center;
gap: 0.25rem;
min-height: 1.75rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
border: 1px solid var(--border-color-subtle);
border-radius: 999px;
background-color: var(--background-color-base);
color: var(--color-subtle);
cursor: pointer;
}

.external-encyclopedia-nav__help-trigger::before {
content: "?";
display: grid;
place-items: center;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: var(--background-color-neutral-subtle);
color: var(--color-progressive);
font-size: 0.75em;
font-weight: 700;
line-height: 1;
}

.external-encyclopedia-nav__help-trigger:hover,
.external-encyclopedia-nav__help-trigger:focus {
border-color: var(--border-color-progressive);
color: var(--color-progressive);
outline-offset: 0.125rem;
}

.external-encyclopedia-nav__help-panel {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
z-index: 1;
width: 20rem;
max-width: 80vw;
padding: 0.75rem;
border: 1px solid var(--border-color-base);
border-radius: var(--border-radius-medium);
background-color: var(--background-color-base);
box-shadow: var(--box-shadow-medium);
color: var(--color-subtle);
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.external-encyclopedia-nav__help:hover .external-encyclopedia-nav__help-panel,
.external-encyclopedia-nav__help-trigger:focus + .external-encyclopedia-nav__help-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.external-encyclopedia-nav__help-panel a {
font-weight: 600;
}

.external-encyclopedia-nav__links {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}

.external-encyclopedia-nav__item {
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 2.625rem;
margin: 0;
padding: 0.375rem 0.75rem 0.375rem 0.375rem;
border: 1px solid var(--border-color-base);
border-radius: 999px;
background-color: var(--background-color-base);
}

.external-encyclopedia-nav__item > a {
display: inline-flex;
align-items: center;
color: var(--color-emphasized);
font-weight: 600;
}

.external-encyclopedia-nav__item:hover,
.external-encyclopedia-nav__item > a:focus {
border-color: var(--border-color-progressive);
background-color: var(--background-color-interactive-subtle);
}

.external-encyclopedia-nav__item > a:hover,
.external-encyclopedia-nav__item > a:focus {
color: var(--color-progressive);
text-decoration: none;
}

.external-encyclopedia-nav__icon {
display: grid;
place-items: center;
flex: 0 0 1.75rem;
width: 1.75rem;
height: 1.75rem;
border: 1px solid var(--border-color-base);
border-radius: 50%;
background-color: var(--background-color-neutral-subtle);
color: var(--color-subtle);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
}

.external-encyclopedia-nav__icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}

@media (max-width: 640px) {
.external-encyclopedia-nav {
padding: 0.875rem;
}

.external-encyclopedia-nav__head {
align-items: flex-start;
}

.external-encyclopedia-nav__help {
width: 100%;
margin-left: 2.375rem;
}

.external-encyclopedia-nav__help-panel {
right: auto;
left: 0;
width: 20rem;
max-width: calc(100vw - 3rem);
}

.external-encyclopedia-nav__links {
display: grid;
grid-template-columns: 1fr;
}

.external-encyclopedia-nav__item > a {
flex: 1 1 auto;
}
}

模板:外部百科导航/styles.css - 版本历史

天明：​避免外部百科导航贴靠右浮动信息框

天明：​调整外部百科导航与信息框的排布

天明：​优化外部百科导航交互区域

天明：​创建外部百科导航模板样式

天明：避免外部百科导航贴靠右浮动信息框

天明：调整外部百科导航与信息框的排布

天明：优化外部百科导航交互区域

天明：创建外部百科导航模板样式