MediaWiki:Common.css：修订间差异

2026年6月2日 (二) 21:17的版本

/* ---------- 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; }
}