MediaWiki:Common.css：修订间差异

2026年6月3日 (三) 17:00的版本

/* ===================================================
 * 国漫TV · 全局紫金主题 & 宽度收束布局整合版
 * =================================================== */
:root {
    --brand-purple: #7e22ce;       /* 核心主题紫 */
    --brand-purple-light: #f3e8ff; /* 极浅呼吸紫（用于高亮底色） */
    --brand-bg: #fafafa;           /* 全局网页背景色（极浅灰） */
    --text-main: #2c3e50;          /* 正文黛蓝，减轻视觉疲劳 */
}

body {
    background-color: var(--brand-bg) !important;
    color: var(--text-main) !important;
}

/* --- 1. 宽度收束与防全屏拉伸 --- */
.citizen-page-container {
    max-width: 1150px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* --- 2. 左侧 Infobox (物理浮动与紫金化) --- */
.mw-parser-output table.infobox {
    float: left !important;
    width: 320px !important;
    margin: 0 30px 20px 0 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(126, 34, 206, 0.08) !important;
    border: 1px solid var(--brand-purple-light) !important;
    box-sizing: border-box !important;
    clear: left !important;
}
.mw-parser-output table.infobox th, 
.mw-parser-output table.infobox td {
    word-wrap: break-word !important;
    word-break: normal !important;
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--brand-purple-light) !important;
}
.mw-parser-output table.infobox th {
    background-color: var(--brand-purple-light) !important;
    color: var(--brand-purple) !important;
    width: 35% !important;
    border-radius: 6px !important;
    text-align: left !important;
}
.mw-parser-output table.infobox th.infobox-header {
    background-color: var(--brand-purple) !important;
    color: #ffffff !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 1.1em !important;
}

/* --- 3. 内容区卡片化与 BFC 物理隔离 --- */
.citizen-section {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px 35px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 20px rgba(126, 34, 206, 0.05) !important;
    border: 1px solid var(--brand-purple-light) !important;
    overflow: hidden !important; /* 核心隔离机制，防止文字环绕 Infobox */
}
#citizen-section-0 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}
#citizen-section-0 > p, 
#citizen-section-0 > blockquote {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    padding: 25px 30px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 20px rgba(126, 34, 206, 0.05) !important;
    border: 1px solid var(--brand-purple-light) !important;
    overflow: hidden !important; 
}
.citizen-section-heading {
    border-bottom: none !important;
    color: var(--brand-purple) !important;
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 15px !important;
}
.citizen-section-indicator { display: none !important; }

/* --- 4. 底部 Navbox (紫金主题适配) --- */
.mw-parser-output table.navbox {
    background-color: #ffffff !important;
    border: 1px solid var(--brand-purple-light) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(126, 34, 206, 0.08) !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: var(--brand-purple) !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: var(--brand-purple-light) !important;
    color: var(--brand-purple) !important;
    padding: 12px !important;
    font-weight: bold !important;
}
.mw-parser-output table.navbox a { color: var(--brand-purple) !important; }

/* --- 5. 顶栏与底栏 (Header & Footer UI) --- */
.citizen-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--brand-purple-light) !important;
    box-shadow: 0 4px 24px rgba(126, 34, 206, 0.08) !important;
}
.citizen-search-box { 
    background-color: var(--brand-bg) !important; 
    border-radius: 20px !important; 
}
.citizen-search-box:focus-within { 
    background-color: #ffffff !important; 
    border: 1px solid var(--brand-purple) !important; 
    box-shadow: 0 0 0 3px var(--brand-purple-light) !important; 
}
.citizen-footer {
    background-color: #ffffff !important;
    border-top: 1px solid var(--brand-purple-light) !important;
    padding: 40px 0 !important;
}

/* --- 6. 交互动效 (双圆弧悬浮特效) --- */
.cdx-button, .navbox a, .mw-parser-output a {
    position: relative;
    transition: color 0.3s ease;
    overflow: visible !important;
    color: var(--brand-purple);
    text-decoration: none;
}
.cdx-button::before, .cdx-button::after,
.navbox a::before, .navbox a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 80%;
    border: 2px solid transparent;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}
.cdx-button::before, .navbox a::before { left: 0; border-left-color: var(--brand-purple); }
.cdx-button::after, .navbox a::after { right: 0; border-right-color: var(--brand-purple); }
.cdx-button:hover::before, .navbox a:hover::before { left: -8px; opacity: 1; }
.cdx-button:hover::after, .navbox a:hover::after { right: -8px; opacity: 1; }
.mw-parser-output a:hover { color: #9333ea; }