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。
body {
/* 配色：赛博糖果方案（莓粉 × 蜜橙） */
/* 主色调 */
--c-primary: #FF6B9D;
--c-accent: #FFA94D;
/* 渐变（用于标题栏、进度条、头像背景） */
--c-gradient-start: #FF6B9D;
--c-gradient-end: #FFA94D;
/* 背景色 */
--c-bg: #FFF8F4;
--c-card: #FFFFFF;
--c-head-bg: #FFF0E8;
/* 边框 */
--c-border: #FFE0D0;
/* 标签 */
--c-tag-bg: #FFEAE0;
--c-tag-text: #D95A1B;
/* 文字 */
--c-text: #2B1A10;
--c-sub: #9A7060;
/* 阴影 */
--shadow-card: 0 2px 14px rgba(255, 107, 157, 0.08);
/* 圆角 */
--radius-card: 16px;
--radius-sm: 10px;
}
/* ──────────────────────────────────────────
全站基础样式（最少量）
────────────────────────────────────────── */
/* 全站链接色 */
.skin-citizen .mw-parser-output a {
color: #FF6B9D;
}
.skin-citizen .mw-parser-output a:hover {
color: #FFA94D;
}
/* 全站页面背景 */
.skin-citizen .mw-body-content {
background: #FFF8F4;
}
/* ===================================================
* 赛博糖果主题 · 布局强化样式
* =================================================== */
/* 1. 页面底层背景优化 */
body, .skin-citizen {
background-color: var(--c-bg) !important;
}
/* 2. 顶部导航栏 (Header) 优化 */
.citizen-header {
background-color: var(--c-card) !important;
border-bottom: 2px solid var(--c-border) !important;
box-shadow: var(--shadow-card) !important;
}
/* 搜索框在糖果主题下的交互反馈 */
.citizen-search-box {
background-color: var(--c-head-bg) !important;
border: 1px solid var(--c-border) !important;
border-radius: var(--radius-sm) !important;
}
/* 3. 页面主体容器 (Body Container) */
.citizen-page-container {
background-color: var(--c-bg) !important;
}
/* 4. 页脚 (Footer) 区域重构 */
.citizen-footer {
background-color: var(--c-head-bg) !important;
border-top: 1px solid var(--c-border) !important;
color: var(--c-sub) !important;
padding: 40px 0 !important;
}
.citizen-footer__siteinfo {
color: var(--c-text) !important;
}
/* 页脚链接颜色对齐 */
.citizen-footer a {
color: var(--c-primary) !important;
font-weight: 600 !important;
}
.citizen-footer a:hover {
color: var(--c-accent) !important;
}
/* 5. 修复 Citizen 皮肤特有的内容块背景 */
.mw-body,
.citizen-section,
.citizen-menu__card {
background-color: var(--c-card) !important;
border: 1px solid var(--c-border) !important;
border-radius: var(--radius-card) !important;
box-shadow: var(--shadow-card) !important;
}
/* ===================================================
* Citizen 皮肤变量：赛博糖果（莓粉 × 蜜橙）
* 此配置将自动渗透至 PC 端、移动端及所有原生组件
* =================================================== */
html,
html.skin-theme-client-light {
/* 1. 核心品牌色映射 */
--color-primary: #FF6B9D; /* 主题莓粉色（控制全站链接、按钮、激活状态） */
--color-primary--hover: #FFA94D; /* 悬浮蜜橙色（控制所有交互反馈） */
--color-primary--active: #e65a88;
/* 2. 背景与容器层级映射 */
--color-surface-0: #FFF8F4; /* 最底层背景（页面大底色） */
--color-surface-1: #FFFFFF; /* 第一层容器（卡片、侧边栏背景） */
--color-surface-2: #FFF0E8; /* 第二层容器（顶部导航栏、页脚、下拉菜单背景） */
--color-surface-3: #FFEAE0; /* 第三层容器（代码块、引用块、Tag 背景） */
--color-surface-4: #FF6B9D; /* 特殊高亮层 */
/* 3. 边框与分割线映射 */
--border-color-base: #FFE0D0; /* 全局基础边框（卡片外框、模块分割线） */
--border-color-subtle: rgba(255, 107, 157, 0.1);
/* 4. 全局字体颜色映射 */
--color-base: #2B1A10; /* 正文主色 */
--color-base--subtle: #9A7060; /* 辅助性说明文本、页脚文字 */
--color-base--inverted: #FFFFFF; /* 反白文字（如深色按钮上的文字） */
/* 5. 交互阴影体系重塑 */
--box-shadow-base: 0 2px 14px rgba(255, 107, 157, 0.08); /* 卡片基础阴影 */
--box-shadow-card: var(--box-shadow-base);
--box-shadow-menu: 0 8px 24px rgba(255, 107, 157, 0.15); /* 下拉菜单/移动端抽屉阴影 */
/* 6. 圆角规范映射 */
--border-radius-base: 16px; /* 全局大圆角（卡片、主控面板） */
--border-radius-button: 10px; /* 交互组件圆角（按钮、搜索框） */
}
/* ===================================================
* 针对 Citizen 特殊结构（如顶部渐变栏）的越权补充
* =================================================== */
/* 强制覆盖顶部 Header 的渐变装饰与背景 */
.citizen-header {
background-color: var(--color-surface-2) !important;
border-bottom: 2px solid var(--border-color-base) !important;
}
/* 移动端菜单抽屉 (Drawer) 与底部导航的背景统一 */
.citizen-drawer,
.citizen-menu {
background-color: var(--color-surface-1) !important;
border-color: var(--border-color-base) !important;
}
/* 进度条与特殊标记统一渐变方案 */
.citizen-progress-bar,
.gmtv-progress-fill {
background: linear-gradient(90deg, #FF6B9D, #FFA94D) !important;
}
/* 恢复此前确认过的导航按钮双圆弧线交互规范 */
.cdx-button::before, .cdx-button::after {
border-color: var(--color-primary--hover) !important;
}
/* ===================================================
* 顶部导航栏 (Header) 组件视觉净化
* 作用：强制剥离所有图标按钮的突兀白色底色
* =================================================== */
/* 1. 将所有顶部互动按钮的背景彻底透明化 */
.citizen-header .cdx-button,
.citizen-header .citizen-user-menu__button {
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
/* 2. 优化图标颜色与背景的对比度 */
.citizen-header .cdx-button {
color: var(--color-base) !important;
}
/* 3. 悬浮状态处理：保留此前定义的双圆弧特效，仅增加极弱的底色反馈 */
.citizen-header .cdx-button:hover {
background-color: rgba(255, 107, 157, 0.05) !important;
}
/* 4. 消除可能残存的输入框/组件组外部白色包裹层 */
.citizen-header__components,
.citizen-header__search {
background-color: transparent !important;
}