MediaWiki:Citizen.css：修订间差异

/*
 * 卡车模拟中文维基全站样式
 *
 * 此样式表仅包含全站通用样式。
 * 模板专用样式应放在对应模板的 TemplateStyles 中。
 */

/* =========================================================
 * 全局主题变量
 * ========================================================= */

:root {
	/*
	 * 调整网站主色调的 OKLCH 色相值。
	 * 230 大致对应蓝色区域。
	 */
	--color-primary-oklch__h: 230;
}

/* =========================================================
 * 标题与网站名称字重
 * ========================================================= */

/*
 * 统一页面各级标题、网站文字 Logo 和吸顶标题的字重。
 */
h1,
h2,
h3,
h4,
h5,
h6,
.mw-logo-wordmark,
.citizen-sticky-header-page-title {
	font-weight: var(--font-weight-medium);
}

/*
 * 为四至六级标题增加少量字间距，
 * 提高较小标题的可读性。
 */
h4,
h5,
h6 {
	letter-spacing: 0.0125em;
}

/* =========================================================
 * details 折叠内容动画
 * ========================================================= */

/*
 * details 处于关闭状态时：
 * 将内容透明度和区块高度设置为 0。
 *
 * ::details-content 是用于选择 details 内部内容区域的伪元素。
 * content-visibility 的离散动画需要 allow-discrete。
 */
details::details-content {
	opacity: 0;
	block-size: 0;

	transition:
		content-visibility var(--transition-duration-medium) allow-discrete,
		opacity var(--transition-duration-medium),
		block-size var(--transition-duration-medium);
}

/*
 * details 展开时：
 * 恢复自动高度并显示内容。
 */
details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* =========================================================
 * 网站 Logo 图标
 * ========================================================= */

/*
 * 让网站 Logo 图标的透明度与 Citizen 皮肤默认图标一致。
 *
 * filter-invert 通常用于根据当前明暗主题自动调整图标颜色。
 */
.mw-logo-icon {
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
}

/* =========================================================
 * 页面顶部背景图
 * ========================================================= */

/*
 * 在 Citizen 页面容器后方创建一个顶部背景层。
 *
 * 该背景层：
 * 1. 使用 --scw-site-background-top 指定的背景图片；
 * 2. 高度为 200px；
 * 3. 使用渐变蒙版，使背景向下逐渐透明；
 * 4. 不拦截鼠标事件。
 */
.citizen-page-container::before {
	content: "";

	/* 相对于页面容器进行绝对定位 */
	position: absolute;

	/* 上、右、下、左全部贴合容器边缘 */
	inset: 0;

	/* 放置在页面主体内容后方 */
	z-index: -1;

	/* 使用预先定义的全站顶部背景图 */
	background-image: var(--scw-site-background-top);

	/* 背景图水平居中 */
	background-position-x: center;

	/* 背景图垂直位置偏向 70% */
	background-position-y: 70%;

	/* 背景图覆盖整个区域 */
	background-size: cover;

	/* 逻辑高度，相当于横排书写模式下的 height */
	block-size: 200px;

	/*
	 * 根据浅色或深色模式使用不同透明度的渐变蒙版。
	 * 背景会从顶部较明显，逐渐过渡到底部完全透明。
	 */
	mask-image: linear-gradient(
		light-dark(
			rgb(0 0 0 / 0.1),
			rgb(0 0 0 / 0.3)
		),
		light-dark(
			rgba(0 0 0 / 0.05),
			rgba(0 0 0 / 0.1)
		) 50%,
		transparent 100%
	);

	/* 防止背景伪元素阻挡鼠标点击 */
	pointer-events: none;
}

/* =========================================================
 * 侧边抽屉菜单
 *
 * 用于增强菜单层级和外部链接菜单的布局。
 * ========================================================= */

/*
 * 移除侧边菜单底部的默认间距。
 *
 * 底部间距将由外部链接菜单自行处理。
 */
.citizen-drawer__menu {
	margin-bottom: 0;
	padding-bottom: 0;
}

/*
 * 设置名为 External 的 MediaWiki 侧边栏菜单。
 *
 * 对应 MediaWiki:Sidebar 中类似：
 *
 * * External
 * ** ...
 *
 * 生成的端口 ID 通常为 mw-portlet-External。
 */
.mw-portlet-External {
	/* 滚动时吸附在侧边栏底部 */
	position: sticky;
	bottom: 0;

	/* 与上方菜单保持间距 */
	margin-top: var(--space-md);

	/*
	 * 左右使用负边距，让菜单背景向外扩展，
	 * 抵消内部容器的部分留白。
	 */
	margin-inline: calc(var(--space-xs) * -1);

	/* 外部链接菜单内部留白 */
	padding: var(--space-xs);

	/* 顶部边框，用于与普通导航菜单分隔 */
	border-top: var(--border-base);

	/* 使用 Citizen 的磨砂玻璃背景滤镜 */
	backdrop-filter: var(--backdrop-filter-frosted-glass);

	/* 使用较小字体 */
	font-size: var(--font-size-x-small);

	/* 横跨当前网格的全部列 */
	grid-column: 1 / -1;

	/* 禁止链接文字自动换行 */
	white-space: nowrap;
}

/*
 * 隐藏 External 菜单自身的标题。
 */
.mw-portlet-External .citizen-menu__heading {
	display: none;
}

/*
 * 将 External 菜单中的列表改为横向排列。
 *
 * 当内容超出宽度时允许横向滚动。
 */
.mw-portlet-External ul {
	display: flex;
	overflow: auto;
}

/*
 * 移除 External 菜单链接中的额外间距。
 */
.mw-portlet-External .mw-list-item a {
	gap: 0;
}

/* =========================================================
 * 侧边栏文字分组标签
 * ========================================================= */

/*
 * 选择 ID 以 n-sidebar-label- 开头的菜单项。
 *
 * 可在 MediaWiki:Sidebar 中通过对应名称创建分组标签。
 */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
	/* 标签仅作为视觉分组，不允许点击 */
	pointer-events: none;

	/* 调整标签外边距和内边距 */
	margin-left: var(--space-xs);
	padding-left: var(--space-md);
	padding-right: var(--space-xs);

	/* 左侧增加竖线，突出菜单层级 */
	border-left: 1px solid var(--border-color-base);

	/* 取消圆角 */
	border-radius: 0;

	/* 增大字间距，形成标签效果 */
	letter-spacing: 0.05em;

	/* 使用普通字重 */
	font-weight: var(--font-weight-normal);

	/*
	 * 使用较弱的文字颜色。
	 * !important 用于覆盖 Citizen 皮肤的链接颜色。
	 */
	color: var(--color-subtle) !important;
}

/* =========================================================
 * 侧边栏纯图标链接
 * ========================================================= */

/*
 * 选择 ID 以 n-sidebar-icon- 开头的菜单项。
 *
 * 将原始文字字号设为 0，从视觉上隐藏链接文字，
 * 仅保留通过 ::before 创建的图标。
 */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
	font-size: 0;

	/*
	 * 允许浏览器跳过屏幕外元素的部分渲染，
	 * 改善较长菜单的渲染性能。
	 */
	content-visibility: auto;
}

/*
 * 为图标菜单项创建通用的蒙版图标容器。
 *
 * 图标实际颜色来自链接的 currentColor。
 */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a::before {
	display: block;
	content: "";

	/* 使用 Citizen 皮肤定义的标准图标尺寸 */
	width: var(--size-icon);
	height: var(--size-icon);

	/* 蒙版图标将显示为当前文字颜色 */
	background-color: currentColor;

	/* 保持 SVG 比例并完整显示 */
	mask-size: contain;

	/* 禁止蒙版重复 */
	mask-repeat: no-repeat;

	/* 蒙版居中 */
	mask-position: center;
}

/* =========================================================
 * 页脚布局
 * ========================================================= */

/*
 * 增加页脚上下留白，并移除默认背景色。
 */
.citizen-footer {
	padding-block: 6rem;
	background-color: transparent;
}

/*
 * 让页脚网站信息区域中的项目分布在两侧。
 */
.citizen-footer__siteinfo {
	justify-content: space-between;
}

/* =========================================================
 * 页脚图标
 *
 * 使用自定义页脚图标，因此需要覆盖 Citizen 默认样式。
 * ========================================================= */

/*
 * 清除页脚图标链接的边框、背景和默认内边距。
 *
 * 同时设置默认透明度和悬停动画。
 */
#footer-icons a {
	border: 0;
	padding: 0;
	background: transparent;

	/* 使用 Citizen 默认图标透明度 */
	opacity: var(--opacity-icon-base);

	/* 鼠标状态变化时平滑过渡 */
	transition: opacity 250ms ease;
}

/*
 * 鼠标悬停时提高或调整图标透明度。
 */
#footer-icons a:hover {
	opacity: var(--opacity-icon-base--hover);
}

/*
 * 鼠标按下时使用激活状态透明度。
 */
#footer-icons a:active {
	opacity: var(--opacity-icon-base--active);
}

/*
 * 增大不同页脚图标之间的间距。
 */
#footer-icons ul,
#footer-icons li {
	column-gap: var(--space-md);
}

/*
 * 将页脚图标高度固定为 32px，
 * 宽度按原始比例自动计算。
 */
#footer-icons img {
	width: auto;
	height: 32px;
}

/*
 * 在 Citizen 浅色模式下反转页脚图标颜色。
 *
 * 用于让原本适配深色背景的浅色图标，
 * 在浅色背景下显示为深色。
 */
.skin-citizen-light #footer-icons a {
	filter: invert(1) hue-rotate(180deg);
}

/* =========================================================
 * 网站文字 Logo 布局
 *
 * 原注释称用于在文字 Logo 附近放置蓝色认证标志。
 * 当前实际规则仅负责排列方式。
 * ========================================================= */

/*
 * 将文字 Logo 设置为 Flex 容器，
 * 使文字和附加徽章能够水平排列并垂直居中。
 */
.mw-logo-wordmark {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

/* =========================================================
 * 动态渐变光效
 * ========================================================= */

/*
 * 注册自定义 CSS 属性 --gradient-angle。
 *
 * 注册后浏览器能够在动画中平滑插值角度值。
 */
@property --gradient-angle {
	/* 此变量只能接受角度值 */
	syntax: "<angle>";

	/* 默认角度为 0 度 */
	initial-value: 0deg;

	/* 不从父元素继承 */
	inherits: false;
}

/*
 * 动态渐变光效的主容器。
 *
 * 给元素添加 scw-gradient-glow 类即可使用。
 */
.scw-gradient-glow {
	/*
	 * 建立定位上下文，
	 * 供 ::before 伪元素进行绝对定位。
	 */
	position: relative;

	/*
	 * 渐变使用的三种颜色。
	 *
	 * --clr-3 使用渐进色；
	 * --clr-4 使用基础边框色；
	 * --clr-5 使用弱边框色。
	 */
	--clr-3: var(--color-progressive);
	--clr-4: var(--border-color-base);
	--clr-5: var(--border-color-subtle);

	/*
	 * 定义圆锥渐变的颜色顺序，
	 * 首尾颜色相同以获得连续循环效果。
	 */
	--gradient:
		var(--clr-3),
		var(--clr-4),
		var(--clr-5),
		var(--clr-4),
		var(--clr-3);

	/* 光效模糊半径 */
	--gradient-blur: 4px;

	/* 完成一圈旋转所需时间 */
	--gradient-time: 5s;
}

/*
 * 使用 ::before 创建位于元素后方的动态渐变光晕。
 */
.scw-gradient-glow::before {
	/* 绝对定位并覆盖整个主元素 */
	position: absolute;
	inset: 0;

	/* 放置在主元素后方 */
	z-index: -1;

	/* 生成伪元素所必需的空内容 */
	content: "";

	/*
	 * 创建圆锥渐变。
	 * 渐变起始角度由 --gradient-angle 控制。
	 */
	background: conic-gradient(
		from var(--gradient-angle),
		var(--gradient)
	);

	/* 继承主元素的圆角 */
	border-radius: inherit;

	/*
	 * 无限循环执行渐变旋转动画。
	 * linear 表示匀速旋转。
	 */
	animation:
		scw-gradient-rotate
		var(--gradient-time)
		linear
		infinite;

	/* 对渐变应用模糊，形成发光效果 */
	filter: blur(var(--gradient-blur));

	/* 模糊值变化时使用短暂过渡 */
	transition: filter 100ms ease;
}

/*
 * 动态渐变旋转关键帧。
 */
@keyframes scw-gradient-rotate {
	/* 动画开始时角度为 0 度 */
	0% {
		--gradient-angle: 0deg;
	}

	/* 动画结束时旋转一整圈 */
	100% {
		--gradient-angle: 360deg;
	}
}