MediaWiki:Citizen.css：修订间差异

2026年6月3日 (三) 14:50的版本

/* =========================================
 * 国漫TV · 三栏卡片流架构 (Citizen 皮肤完美重构版)
 * 解决文字竖排坍塌、实现完美留白与纯白卡片
 * ========================================= */

/* --- 0. 全局呼吸感底色与最大宽度限制 --- */
body {
    background-color: #f4f2f7 !important; /* 紫金体系底色 */
}

/* 限制内容区最大宽度，避免带鱼屏无限拉伸，两侧保留物理留白 */
.citizen-page-container {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* --- 1. 左侧 Infobox 与 中间内容区的【物理避让】布局 (宽屏生效) --- */
@media screen and (min-width: 1200px) {
    
    /* 【关键修复】彻底解决 Infobox 挤压成竖排的问题 */
    .mw-parser-output table.infobox {
        float: left !important;
        width: 320px !important;      /* 强制锁定物理宽度 */
        margin: 0 !important;         /* 剥离原生外边距 */
        box-sizing: border-box !important;
        word-break: break-word !important; /* 确保文字正常横排 */
    }

    /* 顶栏大标题（萧炎）向右避让，对齐内容卡片 */
    .citizen-page-header-inner {
        padding-left: 360px !important; /* 320px(Infobox) + 40px(留白间距) */
    }

    /* 第0章（包含 Infobox 和简介段落的容器）设为透明，释放 Infobox */
    #citizen-section-0 {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }

    /* 将第0章里的简介文字剥离成独立卡片，并向右避让 Infobox */
    #citizen-section-0 > p,
    #citizen-section-0 > blockquote {
        background-color: #ffffff !important;
        border-radius: 12px !important;
        padding: 30px 40px !important;
        box-shadow: 0 8px 24px rgba(26, 22, 37, 0.04) !important;
        border: 1px solid #e6e2ed !important;
        margin-left: 360px !important; /* 核心：向右推移，给左侧 Infobox 留出完美空间 */
        margin-bottom: 20px !important;
        display: block !important;
    }

    /* 之后的第1至N章，以及对应的大标题，全部向右避让对齐 */
    .citizen-section:not(#citizen-section-0),
    .citizen-section-heading {
        margin-left: 360px !important;
    }
}

/* --- 2. 独立卡片化 UI 装潢 (白底、圆角、阴影) --- */

/* Infobox 卡片化 */
.mw-parser-output table.infobox {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 8px 24px rgba(26, 22, 37, 0.04) !important;
    border: 1px solid #e6e2ed !important;
    border-collapse: separate !important; 
}
/* 修复 Infobox 表头样式丢失问题 */
.mw-parser-output table.infobox th {
    background-color: #f4f2f7 !important; /* 浅紫底色 */
    color: #4527a0 !important;            /* 深紫文字 */
    padding: 10px !important;
    border-radius: 6px !important;
    text-align: left !important;
    min-width: 80px !important;           /* 强制表头宽度，防止挤压 */
}
.mw-parser-output table.infobox th.infobox-header {
    background-color: #5e35b1 !important; /* 主标题深紫底色 */
    color: #ffffff !important;
    text-align: center !important;
    font-size: 1.1em !important;
}

/* 常规章节卡片化 */
.citizen-section:not(#citizen-section-0) {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px 40px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 8px 24px rgba(26, 22, 37, 0.04) !important;
    border: 1px solid #e6e2ed !important;
}

/* 右侧 TOC 目录卡片化 */
.citizen-page-sidebar {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 8px 24px rgba(26, 22, 37, 0.04) !important;
    border: 1px solid #e6e2ed !important;
    margin-left: 40px !important; /* 与中间内容区保持完美留白 */
}
/* 隐藏原生目录内部的多余边框 */
.citizen-toc-card {
    border: none !important; 
    box-shadow: none !important;
    padding: 0 !important;
}

/* H2 章节标题悬浮设计 (文字在灰紫背景上，卡片在下方) */
.citizen-section-heading {
    border-bottom: none !important;
    padding-bottom: 12px !important;
    padding-top: 20px !important;
    color: #4527a0 !important;
}
/* 隐藏原生折叠小图标，保持极简 */
.citizen-section-indicator {
    display: none !important;
}

/* --- 3. 顶部与底部原始 UI 重构 --- */

/* 顶部 Header */
.citizen-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 16px rgba(26, 22, 37, 0.04) !important;
    border-bottom: none !important;
    height: 72px !important;
}
/* 搜索框拟物化优化 */
.citizen-search-box {
    background-color: #f4f2f7 !important;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
}

/* 底部 Footer */
.citizen-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e6e2ed !important;
    margin-top: 60px !important;
    padding: 40px 0 !important;
}
.citizen-footer__container {
    max-width: 1440px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 强制居中 */
    text-align: center !important;
}
#footer-places ul {
    display: flex !important;
    gap: 30px !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
}
#footer-places a {
    color: #5e35b1 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
#footer-places a:hover {
    color: #ffb300 !important;
}
/* 隐藏 MediaWiki 原生图标，提升品牌高级感 */
#footer-poweredbyico {
    display: none !important;
}