MediaWiki:Citizen.css：修订间差异

2026年6月3日 (三) 23:58的版本

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 特殊结构（如顶部渐变栏）的越权补充
 * =================================================== */

/* 强制覆盖顶部 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;
}