|
|
| （未显示同一用户的3个中间版本） |
| 第1行： |
第1行： |
|
| |
|
|
| |
| /* --- 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; /* 左侧高亮边框指示 */
| |
| }
| |
