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: 0px 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 皮肤核心组件 UI 深度重构
* 目标域：Header（顶部）、Footer（底部）、TOC（目录）
* =================================================== */
/* ---------------------------------------------------
* 1. 顶部导航栏 (Header) 净化与重构
* --------------------------------------------------- */
.citizen-header {
background-color: var(--color-surface-2, #FFF0E8) !important;
border-bottom: 1px solid var(--border-color-base, #FFE0D0) !important;
box-shadow: 0 2px 12px rgba(255, 107, 157, 0.08) !important;
}
/* 彻底剥离 Codex 按钮与搜索框的默认纯白底色/边框 */
.citizen-header__components .cdx-button,
.citizen-header__components .citizen-user-menu__button,
.citizen-header__search .cdx-text-input__input {
background-color: transparent !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--color-base, #2B1A10) !important;
}
/* 搜索框激活状态的边界控制 */
.citizen-header__search .cdx-text-input__input:focus,
.citizen-header__search .cdx-text-input__input:active {
border: 1px solid var(--color-primary, #FF6B9D) !important;
background-color: var(--color-surface-1, #FFFFFF) !important;
}
/* ---------------------------------------------------
* 2. 底部页脚 (Footer) 模块化收缩
* --------------------------------------------------- */
.citizen-footer {
background-color: var(--color-surface-2, #FFF0E8) !important;
border-top: 1px solid var(--border-color-base, #FFE0D0) !important;
padding: 32px 0 !important;
margin-top: 48px !important;
}
/* 解除默认的冗余高度，强制内部信息流横向/紧凑对齐 */
.citizen-footer-info,
.citizen-footer-places {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 8px 0 !important;
}
.citizen-footer__siteinfo {
color: var(--color-base--subtle, #9A7060) !important;
font-size: 0.85em !important;
line-height: 1.6 !important;
}
.citizen-footer-places li {
display: inline-block !important;
margin-right: 16px !important;
}
.citizen-footer-places a {
color: var(--color-primary, #FF6B9D) !important;
font-weight: 500 !important;
}
/* ---------------------------------------------------
* 3. 悬浮目录 (Table of Contents) 视觉规范
* --------------------------------------------------- */
/* 侧边栏/移动端抽屉内的 TOC 主容器 */
.citizen-toc {
background-color: var(--color-surface-1, #FFFFFF) !important;
border: 1px solid var(--border-color-base, #FFE0D0) !important;
border-radius: var(--border-radius-base, 16px) !important;
box-shadow: 0 4px 16px rgba(255, 107, 157, 0.05) !important;
padding: 12px !important;
}
/* 目录链接基础状态 */
.citizen-toc__link {
color: var(--color-base--subtle, #9A7060) !important;
transition: all 0.2s ease !important;
border-left: 2px solid transparent !important; /* 为激活状态预留空间 */
}
/* 目录悬浮与滚动追踪激活状态 (Active) */
.citizen-toc__link:hover {
color: var(--color-primary--hover, #FFA94D) !important;
background-color: var(--color-surface-3, #FFEAE0) !important;
}
.citizen-toc__item--active > .citizen-toc__link {
color: var(--color-primary, #FF6B9D) !important;
font-weight: 600 !important;
border-left-color: var(--color-primary, #FF6B9D) !important;
background-color: rgba(255, 107, 157, 0.04) !important;
}
/* ---------------------------------------------------
* 4. 强制保护规则：按钮双圆弧线悬浮交互
* --------------------------------------------------- */
.citizen-header .cdx-button,
.citizen-menu__content-list a {
position: relative;
overflow: visible !important;
}
.citizen-header .cdx-button::before, .citizen-header .cdx-button::after,
.citizen-menu__content-list a::before, .citizen-menu__content-list a::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 80%;
border: 2px solid transparent;
border-radius: 50%;
opacity: 0;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
pointer-events: none;
}
.citizen-header .cdx-button::before, .citizen-menu__content-list a::before {
left: 0;
border-left-color: var(--color-primary, #FF6B9D);
}
.citizen-header .cdx-button::after, .citizen-menu__content-list a::after {
right: 0;
border-right-color: var(--color-primary, #FF6B9D);
}
.citizen-header .cdx-button:hover::before, .citizen-menu__content-list a:hover::before {
left: -8px;
opacity: 1;
}
.citizen-header .cdx-button:hover::after, .citizen-menu__content-list a:hover::after {
right: -8px;
opacity: 1;
}