MediaWiki:Citizen.css：修订间差异

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

/* =========================================
 * 修正版：Citizen 原生三栏卡片流 (解决粘连、挤压与语法报错)
 * ========================================= */

/* --- 1. 全局底色 --- */
body {
    background-color: #f4f2f7 !important;
}

/* --- 2. 左侧 Infobox (纯原生浮动，彻底解决竖排挤压与错位) --- */
.mw-parser-output table.infobox {
    float: left;            /* 原生左浮动，不破坏 Grid */
    width: 300px;           /* 锁定物理宽度 */
    margin: 0 30px 20px 0;  /* 右侧留出 30px 呼吸间距，底部 20px */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(26, 22, 37, 0.04);
    border: 1px solid #e6e2ed;
    box-sizing: border-box;
    clear: left;
}

/* 修复 Infobox 内部文字排版 */
.mw-parser-output table.infobox th, 
.mw-parser-output table.infobox td {
    word-wrap: break-word;
    word-break: normal;
    padding: 12px 10px;
    border-bottom: 1px solid #f4f2f7;
}
.mw-parser-output table.infobox th {
    background-color: #f4f2f7;
    color: #4527a0;
    width: 35%;             /* 锁定左侧表头比例 */
    border-radius: 6px;
    text-align: left;
}
.mw-parser-output table.infobox th.infobox-header {
    background-color: #5e35b1;
    color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 1.1em;
}

/* --- 3. 中间内容区：段落卡片化 (BFC 隔离防粘连) --- */
/* 第1章及以后的常规章节 */
.citizen-section {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px 35px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(26, 22, 37, 0.04);
    border: 1px solid #e6e2ed;
    overflow: hidden; /* 【核心物理隔离】创建 BFC，形成独立垂直列，绝不环绕 Infobox */
}

/* 第0章（引言区，包含 Infobox）：容器透明，内部段落独立成卡 */
#citizen-section-0 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important; /* 允许 Infobox 浮动起效 */
}
#citizen-section-0 > p, 
#citizen-section-0 > blockquote {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(26, 22, 37, 0.04);
    border: 1px solid #e6e2ed;
    overflow: hidden; /* 让引言段落也形成独立卡片，避让左侧 Infobox */
}

/* 抹除原生破坏卡片沉浸感的元素 */
.citizen-section-heading {
    border-bottom: none;
    color: #4527a0;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 15px;
}
.citizen-section-indicator {
    display: none !important;
}

/* --- 4. 右侧目录 (顺应原生 Grid，仅修饰外观) --- */
/* 绝对禁止修改宽度或 margin，否则会导致截图中的挤压变形 */
.citizen-toc-card {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 0 4px 16px rgba(26, 22, 37, 0.04) !important;
    border: 1px solid #e6e2ed !important;
}

/* --- 5. 底部 Navbox (极高权重覆盖蓝色默认主题) --- */
.mw-parser-output table.navbox {
    background-color: #ffffff !important;
    border: 1px solid #e6e2ed !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(26, 22, 37, 0.04) !important;
    width: 100% !important;
    margin-top: 40px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
}
/* 主标题深紫 */
.mw-parser-output table.navbox th.navbox-title,
.mw-parser-output table.navbox tr:first-child th {
    background-color: #5e35b1 !important;
    color: #ffffff !important;
    padding: 12px !important;
    text-align: center !important;
}
/* 侧边分类浅紫 */
.mw-parser-output table.navbox td.navbox-group,
.mw-parser-output table.navbox th.navbox-group {
    background-color: #f4f2f7 !important;
    color: #4527a0 !important;
    padding: 12px !important;
    font-weight: bold !important;
}
/* 链接去下划线并改色 */
.mw-parser-output table.navbox a {
    color: #5e35b1 !important;
}

/* --- 6. 顶部与底部原始 UI 重构 --- */
.citizen-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 16px rgba(26, 22, 37, 0.04) !important;
}
.citizen-search-box {
    background-color: #f4f2f7 !important;
    border-radius: 20px !important;
}
.citizen-footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e6e2ed !important;
    padding: 40px 0 !important;
}
#footer-poweredbyico {
    display: none !important;
}