Template:External/styles.css

/* [[Category:在模板命名空间下的CSS页面]] */

/* 外层 */
.extwiki {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5rem;
	margin-block: 0.5rem;
}

/* 卡片 */
.extwiki a.extwiki-card {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-width: 0;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--border-color-subtle, #c8ccd1);
	border-radius: var(--border-radius-medium, 2px);
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	color: inherit;
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.extwiki a.extwiki-card:hover {
	border-color: var(--border-color-base, #a2a9b1);
	background-color: var(--background-color-interactive-subtle, #eaecf0);
}

.extwiki a.extwiki-card:focus {
	outline: 2px solid var(--color-progressive, #3366cc);
	outline-offset: -2px;
}

.extwiki a.extwiki-card.external {
	background-image: none;
}

.extwiki a.extwiki-card::after,
.extwiki a.extwiki-card.external::after {
	display: none;
}

/* 站点图标 */
.extwiki-logo {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
}

.extwiki-logo span,
.extwiki-logo picture {
	display: contents;
}

.extwiki-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 低分辨率图标像素化 */
.extwiki-logo--pixelated img {
	image-rendering: pixelated;
}

/* 圆角图标 */
.extwiki-logo--rounded img {
	border-radius: var(--border-radius-base, 0);
}

/* 文字 */
.extwiki-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.extwiki-label {
	color: var(--color-subtle, #54595d);
}

.extwiki-title {
	color: var(--color-emphasized, #000);
	font-weight: var(--font-weight-medium, 500);
	overflow-wrap: break-word;
}

/* 跳转箭头 */
.extwiki-go {
	flex: none;
	width: 1rem;
	height: 1rem;
	background-color: var(--color-subtle, #54595d);
	-webkit-mask-image: url(/images/0/0c/Lucide-external-link.svg);
	mask-image: url(/images/0/0c/Lucide-external-link.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transition: background-color 120ms ease;
}

.extwiki a.extwiki-card:hover .extwiki-go {
	background-color: var(--color-progressive, #3366cc);
}

/* 宽屏 */
body.main-sm .extwiki a.extwiki-card {
	flex: 0 1 auto;
	max-width: 100%;
}

body.main-sm .extwiki-text {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.25rem;
}

body.main-sm .extwiki-label {
	flex: none;
	white-space: nowrap;
}

body.main-sm .extwiki-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.extwiki a.extwiki-card,
	.extwiki-go {
		transition: none;
	}
}

@media (forced-colors: active) {
	.extwiki a.extwiki-card {
		border-color: ButtonBorder;
	}
}