MediaWiki:Citizen.css：修订间差异

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

/* =========================================
 * 国漫TV · Citizen 3.16 终极三栏卡片流架构
 * 核心逻辑：利用 :has() 语法顺应原生 Grid，彻底告别粘连与坍塌
 * ========================================= */

/* --- 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，中间的主体容器主动向右退缩 360px 腾出真空区 */
    .citizen-body:has(.infobox) {
        padding-left: 360px !important; 
        position: relative !important;
    }
    
    /* 将 Infobox 绝对定位到腾出的真空区中。它将是一个完美的独立卡片，绝不挤压文字 */
    .citizen-body .infobox {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 320px !important; /* 锁定绝对宽度，彻底解决竖排坍塌 */
        margin: 0 !important;
        
        /* Infobox 独立卡片化装潢 */
        background-color: #ffffff !important;
        border-radius: 12px !important;
        padding: 24px !important;
        box-shadow: 0 4px 24px rgba(26, 22, 37, 0.05) !important;
        border: 1px solid #e6e2ed !important;
        box-sizing: border-box !important;
    }
}

/* 彻底修复之前 Infobox 内部文字被挤压成竖排的问题 */
.infobox th, .infobox td {
    word-break: normal !important;
    white-space: normal !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #f4f2f7 !important;
}
.infobox th {
    width: 35% !important; /* 强制锁定表头比例 */
    background-color: #f4f2f7 !important; /* 浅紫底色 */
    color: #4527a0 !important;
    border-radius: 6px !important;
}
.infobox th.infobox-header {
    width: 100% !important;
    background-color: #5e35b1 !important; /* 核心主题紫 */
    color: #ffffff !important;
    text-align: center !important;
    font-size: 1.1em !important;
}

/* --- 2. 内容区：每个段落(Section)的独立纯白卡片化 --- */
/* Citizen 已原生将每章切分为 .citizen-section，直接为其上色即可完美成卡 */
.citizen-section {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 35px 40px !important;
    margin-bottom: 30px !important; /* 卡片之间的垂直留白 */
    box-shadow: 0 4px 24px rgba(26, 22, 37, 0.04) !important;
    border: 1px solid #e6e2ed !important;
}

/* H2 章节标题悬浮设计，去除原生破坏卡片感的底边框 */
.citizen-section-heading {
    border-bottom: none !important;
    padding-bottom: 16px !important;
    margin-top: 0 !important;
    color: #4527a0 !important;
}
/* 隐藏原生折叠小图标，保持卡片极致干净 */
.citizen-section-indicator {
    display: none !important; 
}

/* --- 3. 右侧目录 (TOC) 的独立卡片化 --- */
.citizen-page-sidebar {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 24px rgba(26, 22, 37, 0.04) !important;
    border: 1px solid #e6e2ed !important;
    margin-left: 40px !important; /* 强行推开与中间卡片的距离，保持呼吸感 */
    box-sizing: border-box !important;
}
/* 去除目录内部自带的冗余透明边框 */
.citizen-toc-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* --- 4. 顶部导航与底部页脚的 UI 重构 --- */
/* 顶部 Header */
.citizen-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 16px rgba(26, 22, 37, 0.04) !important;
    border-bottom: none !important;
}
/* 顶部搜索框的微拟物与焦点反馈 */
.citizen-search-box {
    background-color: #f4f2f7 !important;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    transition: all 0.3s ease !important;
}
.citizen-search-box:focus-within {
    background-color: #ffffff !important;
    border-color: #5e35b1 !important;
}

/* 底部 Footer 极简商业化重排 */
.citizen-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e6e2ed !important;
    margin-top: 60px !important;
    padding: 50px 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-poweredbyico {
    display: none !important; /* 隐藏 MediaWiki 的原生丑陋图标 */
}