MediaWiki:Citizen.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/*
* 卡车模拟中文维基全站样式
*
* 此样式表仅包含全站通用样式。
* 模板专用样式应放在对应模板的 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;
}
}