|
|
| 第1行： |
第1行： |
| /* ===================================================
| |
| * 国漫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; }
| |
