Template:PageInfo/styles.css

.page-info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.875rem;

	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;

	color: var(--color-base, #202122);
	background: var(--background-color-neutral-subtle, #f8f9fa);

	border: 1px solid var(--border-color-base, #a2a9b1);
	border-inline-start: 4px solid var(--color-progressive, #36c);
	border-radius: 0.75rem;
}

.page-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;

	width: 2rem;
	height: 2rem;

	color: var(--color-progressive, #36c);
	font-size: 1rem;
	font-weight: 700;

	background: var(--background-color-progressive-subtle, #eaf3ff);
	border-radius: 50%;
}

.page-info__body {
	min-width: 0;
}

.page-info__title {
	margin-bottom: 0.125rem;
	font-weight: 700;
	line-height: 1.4;
}

.page-info__text {
	color: var(--color-subtle, #54595d);
	font-size: 0.875rem;
	line-height: 1.6;
}

.page-info__text > :first-child {
	margin-top: 0;
}

.page-info__text > :last-child {
	margin-bottom: 0;
}

.page-info__action a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.375rem 0.75rem;

	color: var(--color-progressive, #36c);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;

	background: var(--background-color-progressive-subtle, #eaf3ff);
	border-radius: 0.5rem;
}

.page-info__action a:hover {
	text-decoration: none;
	filter: brightness(0.96);
}

/* 成功 */
.page-info--success {
	border-inline-start-color: var(--color-success, #14866d);
}

.page-info--success .page-info__icon {
	color: var(--color-success, #14866d);
	background: var(--background-color-success-subtle, #d5fdf4);
}

/* 警告 */
.page-info--warning,
.page-info--construction,
.page-info--update {
	border-inline-start-color: var(--color-warning, #ac6600);
}

.page-info--warning .page-info__icon,
.page-info--construction .page-info__icon,
.page-info--update .page-info__icon {
	color: var(--color-warning, #ac6600);
	background: var(--background-color-warning-subtle, #fef6e7);
}

/* 错误 */
.page-info--error {
	border-inline-start-color: var(--color-destructive, #b32424);
}

.page-info--error .page-info__icon {
	color: var(--color-destructive, #b32424);
	background: var(--background-color-destructive-subtle, #fee7e6);
}

/* 剧透 */
.page-info--spoiler {
	border-inline-start-color: var(--color-visited, #6b4ba1);
}

.page-info--spoiler .page-info__icon {
	color: var(--color-visited, #6b4ba1);
	background: rgba(107, 75, 161, 0.12);
}

@media screen and (max-width: 720px) {
	.page-info {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.page-info__action {
		grid-column: 2;
	}

	.page-info__action a {
		padding-inline: 0;
		background: transparent;
	}
}