MediaWiki:Common.css：修订间差异

2026年6月3日 (三) 16:53的版本

/* --- 1. 全局色彩引擎与背景环境 --- */
:root {
    --brand-primary: #0284c7;      /* 核心青蓝色：明亮且具科技感 */
    --brand-secondary: #0ea5e9;    /* 辅助高光色 */
    --brand-bg: #f4f7f9;           /* 极浅灰蓝底色，减轻视觉疲劳 */
    --text-main: #2c3e50;          /* 深黛蓝色正文，替代纯黑 */
}

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

/* --- 2. 收束页面宽度，聚焦阅读视线 --- */
/* 将全站最大承载宽度强行收束至 1150px，模拟萌娘百科的紧凑阅读体验 */
.citizen-page-container {
    max-width: 1150px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
}

/* --- 3. 核心内容卡片化与阴影重塑 --- */
.citizen-section {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 30px 35px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.06) !important;
    border: 1px solid rgba(2, 132, 199, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.citizen-section:hover {
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12) !important;
}

/* 章节标题装潢：底部加入青蓝色进度条式点缀 */
.citizen-section-heading {
    position: relative;
    color: var(--brand-primary) !important;
    border-bottom: 2px solid rgba(2, 132, 199, 0.1) !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
}
.citizen-section-heading::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--brand-secondary) !important;
    border-radius: 3px;
}

/* --- 4. 按钮与核心链接：双圆弧线悬浮特效 --- */
/* 恢复并强化交互质感：鼠标悬停时两侧展开双圆弧线 */
.cdx-button, 
.citizen-menu__content-list a,
.navbox a {
    position: relative;
    transition: color 0.3s ease;
    overflow: visible !important;
}

.cdx-button::before, .cdx-button::after,
.citizen-menu__content-list a::before, .citizen-menu__content-list 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, .citizen-menu__content-list a::before { 
    left: 0; 
    border-left-color: var(--brand-secondary); 
}
.cdx-button::after, .citizen-menu__content-list a::after { 
    right: 0; 
    border-right-color: var(--brand-secondary); 
}

.cdx-button:hover::before, .citizen-menu__content-list a:hover::before { 
    left: -8px; 
    opacity: 1; 
}
.cdx-button:hover::after, .citizen-menu__content-list a:hover::after { 
    right: -8px; 
    opacity: 1; 
}

/* --- 5. 链接颜色与高亮策略 --- */
.mw-parser-output a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}
.mw-parser-output a:hover {
    color: var(--brand-secondary);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
}

/* --- 6. 侧边栏与目录 (TOC) 的清爽化处理 --- */
.citizen-page-sidebar {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.citizen-toc-card {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.06) !important;
    border: 1px solid rgba(2, 132, 199, 0.1) !important;
    border-left: 4px solid var(--brand-secondary) !important; /* 左侧高亮边框指示 */
}