查看“︁MediaWiki:Gadget-AdvancedSiteNotices.css”︁的源代码

/* 站点通知外层容器 */
#siteNotice #asn-dismissable-notice {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* 在 Minerva 皮肤下的对齐样式 */
@media screen and (max-width: 992px) {
	.skin-minerva #siteNotice #asn-dismissable-notice {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* 高级站点通知内容区域 */
#advancedSiteNotices {
	flex: 1;
}

/* 关闭按钮基础样式 */
.asn-close-button {
	margin-right: -6px; /* 视觉上对齐 */
	display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 28rem;
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-transform: none;
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: .1s;
    color: var(--color-base, #202122);
    background-color: var(--background-color-transparent, transparent);
    border-color: var(--border-color-transparent, transparent);
}

/* 关闭按钮悬停状态 */
.asn-close-button:hover {
	background-color: var(--background-color-interactive-subtle--hover, #eaecf0);
    mix-blend-mode: var(--mix-blend-mode-blend, multiply);
}

/* 关闭按钮激活状态 */
.asn-close-button:active {
	background-color: var(--background-color-interactive-subtle--active, #dadde3);
}

/* 关闭按钮聚焦但未激活状态 */
.asn-close-button:focus:not(:active) {
	border-color: var(--border-color-progressive--focus, #36c);
    box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
}

/* 关闭按钮图标 (使用伪元素实现) */
.asn-close-button::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: currentColor; /* 继承父元素颜色，便于主题切换 */
	/* 使用遮罩图片创建图标 */
	mask: url(https://zybkcn.com/w/images/8/82/Codex_icon_close.svg) no-repeat center / contain;
	-webkit-mask: url(https://zybkcn.com/w/images/8/82/Codex_icon_close.svg) no-repeat center / contain;
}