MediaWiki:Citizen.css：修订间差异

2026年6月3日 (三) 22:26的版本

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;
}
/* ===================================================
 * 页脚 UI 深度重构：移除无效留白，实现模块化对齐
 * =================================================== */

.citizen-footer {
    background-color: #ffffff !important; /* 背景回归纯净 */
    border-top: 1px solid #e6e2ed !important;
    padding: 30px 40px 20px 40px !important; /* 压缩上下 padding */
    margin-top: 50px !important;
}

/* 强制内部容器收紧 */
.citizen-footer__container {
    max-width: 1150px !important; /* 对应主体宽度 */
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
}

/* 底部链接区：从垂直堆叠改为横向紧凑布局 */
#footer-places {
    order: 2; /* 链接区靠后 */
}

#footer-places ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important; /* 链接间距 */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#footer-places a {
    color: #5e35b1 !important; /* 使用主题紫 */
    font-size: 0.9em !important;
    text-decoration: none !important;
}

/* 版权及站点信息区 */
.citizen-footer__siteinfo {
    order: 1; /* 信息区靠前 */
    font-size: 0.85em !important;
    color: #666666 !important;
    line-height: 1.4 !important;
}

/* 隐藏无关紧要的图标，减少干扰 */
#footer-poweredbyico {
    display: none !important;
}

/* 为页脚增加一个微弱的顶部内阴影，增加层次感，视觉上不再空旷 */
.citizen-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(94, 53, 177, 0.1), transparent);
}