MediaWiki:Citizen.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。


/* ===================================================
 * 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;
}