|
|
| （未显示同一用户的14个中间版本） |
| 第1行： |
第1行： |
|
| |
|
|
| |
| /* ---------- 2. 全局配色变量 ---------- */
| |
| :root {
| |
| /* 主色调：水墨丹青 */
| |
| --color-primary: #8B4513; /* 赭石色 - 用于主按钮、强调链接 */
| |
| --color-primary-light: #D2B48C; /* 浅褐色 - 用于背景色块 */
| |
| --color-accent: #B22222; /* 朱砂红 - 用于重要标记、徽章 */
| |
| --color-bg: #F5F0E8; /* 宣纸色 - 全局页面背景 */
| |
| --color-card-bg: #FFFFFF; /* 卡片/信息框背景 */
| |
| --color-text: #3C3C3C; /* 正文文字色（深灰，非纯黑，更柔和） */
| |
| --color-text-light: #6B6B6B; /* 辅助文字色 */
| |
| --color-border: #D4C5B2; /* 边框色 */
| |
| --color-link: #8B4513; /* 内链颜色 */
| |
| --color-link-visited: #A0522D; /* 已访问内链颜色 */
| |
| --color-hover: #B22222; /* 悬停变色 */
| |
|
| |
| /* 字体设定 */
| |
| --font-heading: 'Noto Serif SC', 'STSong', 'SimSun', 'Songti SC', serif;
| |
| --font-body: 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
| |
| --font-size-base: 16px;
| |
| --border-radius: 6px;
| |
| }
| |
|
| |
| /* ---------- 3. 全局基础 ---------- */
| |
| body {
| |
| background-color: var(--color-bg);
| |
| color: var(--color-text);
| |
| font-family: var(--font-body);
| |
| font-size: var(--font-size-base);
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| /* 标题用衬线字体 */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-family: var(--font-heading);
| |
| color: #2C1810;
| |
| border-bottom: 1px solid var(--color-border);
| |
| padding-bottom: 0.3em;
| |
| margin-top: 1.2em;
| |
| }
| |
|
| |
| /* 内链 */
| |
| a {
| |
| color: var(--color-link);
| |
| }
| |
| a:visited {
| |
| color: var(--color-link-visited);
| |
| }
| |
| a:hover {
| |
| color: var(--color-hover);
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| /* ---------- 4. Chameleon 导航栏美化 ---------- */
| |
| /* 顶部导航栏整体 */
| |
| .navbar {
| |
| background: linear-gradient(135deg, #2C1810 0%, #4A2C1A 100%);
| |
| border-bottom: 3px solid var(--color-accent);
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.15);
| |
| }
| |
| .navbar .navbar-brand,
| |
| .navbar .nav-link {
| |
| color: #F5F0E8 !important;
| |
| font-family: var(--font-heading);
| |
| font-weight: 700;
| |
| }
| |
| .navbar .nav-link:hover {
| |
| color: var(--color-primary-light) !important;
| |
| background-color: rgba(255,255,255,0.1);
| |
| }
| |
| .navbar .dropdown-menu {
| |
| background-color: #FDFAF5;
| |
| border: 1px solid var(--color-border);
| |
| }
| |
|
| |
| /* ---------- 5. 侧边栏美化 ---------- */
| |
| .sidebar {
| |
| background-color: transparent;
| |
| }
| |
| .sidebar .card {
| |
| background-color: var(--color-card-bg);
| |
| border: 1px solid var(--color-border);
| |
| border-radius: var(--border-radius);
| |
| box-shadow: 0 1px 4px rgba(0,0,0,0.05);
| |
| margin-bottom: 1em;
| |
| }
| |
| .sidebar .card-header {
| |
| background-color: var(--color-primary);
| |
| color: #FFFFFF;
| |
| font-family: var(--font-heading);
| |
| font-weight: 700;
| |
| border-bottom: 2px solid var(--color-accent);
| |
| }
| |
|
| |
| /* ---------- 6. 内容区美化 ---------- */
| |
| /* 主内容区卡片效果 */
| |
| .mw-body {
| |
| background-color: var(--color-card-bg);
| |
| border: 1px solid var(--color-border);
| |
| border-radius: var(--border-radius);
| |
| padding: 1.5em 2em;
| |
| box-shadow: 0 1px 6px rgba(0,0,0,0.06);
| |
| }
| |
|
| |
| /* 目录框 */
| |
| #toc {
| |
| background-color: #FDFAF5;
| |
| border: 1px solid var(--color-border);
| |
| border-left: 4px solid var(--color-primary);
| |
| border-radius: var(--border-radius);
| |
| padding: 1em;
| |
| margin-bottom: 1.5em;
| |
| }
| |
| #toc h2 {
| |
| font-size: 1.2em;
| |
| margin-top: 0;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| /* ---------- 7. 模板：信息框（角色卡、作品卡）美化 ---------- */
| |
| /* 前提是你的信息框模板外层包裹了 class="infobox" */
| |
| .infobox {
| |
| background-color: #FDFAF5;
| |
| border: 2px solid var(--color-border);
| |
| border-radius: var(--border-radius);
| |
| padding: 0;
| |
| margin: 0.5em 0 1em 1.5em;
| |
| float: right;
| |
| width: 280px;
| |
| max-width: 100%;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.08);
| |
| }
| |
| .infobox .infobox-title {
| |
| background: linear-gradient(135deg, var(--color-primary) 0%, #6B3410 100%);
| |
| color: #FFFFFF;
| |
| font-family: var(--font-heading);
| |
| font-size: 1.3em;
| |
| font-weight: 700;
| |
| text-align: center;
| |
| padding: 0.6em;
| |
| margin: 0;
| |
| }
| |
| .infobox .infobox-image {
| |
| text-align: center;
| |
| padding: 0.5em;
| |
| background-color: #FFFFFF;
| |
| }
| |
| .infobox .infobox-image img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| border-radius: calc(var(--border-radius) - 2px);
| |
| }
| |
| .infobox table {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| }
| |
| .infobox th {
| |
| background-color: var(--color-primary-light);
| |
| color: #2C1810;
| |
| text-align: center;
| |
| width: 35%;
| |
| padding: 0.4em;
| |
| font-weight: 600;
| |
| border-bottom: 1px solid var(--color-border);
| |
| }
| |
| .infobox td {
| |
| padding: 0.4em;
| |
| border-bottom: 1px solid var(--color-border);
| |
| text-align: center;
| |
| }
| |
| .infobox tr:last-child th,
| |
| .infobox tr:last-child td {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| /* ---------- 8. 搜索框美化 ---------- */
| |
| .search-box .form-control,
| |
| #searchInput {
| |
| border: 2px solid var(--color-border);
| |
| border-radius: 20px;
| |
| padding: 0.4em 1em;
| |
| transition: all 0.3s;
| |
| }
| |
| .search-box .form-control:focus,
| |
| #searchInput:focus {
| |
| border-color: var(--color-primary);
| |
| box-shadow: 0 0 0 0.2rem rgba(139,69,19,0.2);
| |
| outline: none;
| |
| }
| |
|
| |
| /* ---------- 9. 按钮美化 ---------- */
| |
| .btn-primary,
| |
| .mw-htmlform-submit {
| |
| background-color: var(--color-primary);
| |
| border-color: var(--color-primary);
| |
| border-radius: 20px;
| |
| padding: 0.4em 1.5em;
| |
| font-family: var(--font-heading);
| |
| font-weight: 600;
| |
| transition: all 0.3s;
| |
| }
| |
| .btn-primary:hover {
| |
| background-color: var(--color-accent);
| |
| border-color: var(--color-accent);
| |
| box-shadow: 0 2px 6px rgba(178,34,34,0.3);
| |
| }
| |
|
| |
| /* ---------- 10. 页脚美化 ---------- */
| |
| footer,
| |
| .mw-footer {
| |
| background-color: #2C1810;
| |
| color: #C4B5A5;
| |
| padding: 1.5em 0;
| |
| margin-top: 2em;
| |
| font-size: 0.9em;
| |
| }
| |
| footer a,
| |
| .mw-footer a {
| |
| color: var(--color-primary-light);
| |
| }
| |
|
| |
| /* ---------- 11. 响应式小修 ---------- */
| |
| @media (max-width: 768px) {
| |
| .infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 1em 0;
| |
| }
| |
| .mw-body {
| |
| padding: 1em;
| |
| }
| |
| h1 { font-size: 1.6em; }
| |
| h2 { font-size: 1.4em; }
| |
| }
| |
