MediaWiki:Chameleon.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ----------------------------------------------------------
1. 顶部导航栏
---------------------------------------------------------- */
.navbar,
.navbar-default,
#mw-navigation .navbar {
background: #ffffff;
border: none;
border-bottom: 1px solid var(--gmtv-border, #e2e6ec);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
padding: 0 16px;
min-height: 56px;
}
/* Logo / 站名 */
.navbar-brand,
.navbar-default .navbar-brand {
font-weight: 800;
font-size: 1.2em;
color: #1a6fc4;
letter-spacing: 0.02em;
padding: 14px 12px;
}
.navbar-brand:hover {
color: #155da6;
}
/* 导航链接 */
.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
color: #5a6170;
font-weight: 500;
font-size: 0.92em;
padding: 18px 14px;
transition: color 0.15s ease;
}
.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a {
color: #1a6fc4;
background: transparent;
}
/* 当前页面高亮 */
.navbar-nav > li.active > a {
border-bottom: 2px solid #1a6fc4;
}
/* 导航下拉菜单 */
.navbar-nav .dropdown-menu {
background: #ffffff;
border: 1px solid #e2e6ec;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
padding: 6px 0;
margin-top: 0;
}
.navbar-nav .dropdown-menu > li > a {
color: #181e28;
padding: 8px 18px;
font-size: 0.9em;
}
.navbar-nav .dropdown-menu > li > a:hover {
background: #e8f1fb;
color: #1a6fc4;
}
/* ----------------------------------------------------------
2. 页面整体布局
---------------------------------------------------------- */
#content,
#mw-content-container,
.mw-body {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
/* 内容区最大宽度 + 居中 */
.container,
.container-fluid {
max-width: 1280px;
}
/* 主内容列 */
#content,
.col-main {
padding: 20px 24px;
}
/* ----------------------------------------------------------
3. 页面标题（词条名）
---------------------------------------------------------- */
#firstHeading,
.firstHeading,
.page-header h1 {
font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
font-weight: 800;
font-size: 1.85em;
color: #181e28;
border-bottom: none;
padding-bottom: 6px;
margin-bottom: 16px;
line-height: 1.3;
}
/* 词条描述副标题 */
#siteSub {
color: #8c939e;
font-size: 0.82em;
margin-bottom: 12px;
}
/* ----------------------------------------------------------
4. 侧边栏（Chameleon 左侧或右侧栏）
---------------------------------------------------------- */
/* 侧边栏面板 */
.skin-chameleon .panel,
#mw-panel .panel,
.chameleon-sidebar .panel {
background: #ffffff;
border: 1px solid #e2e6ec;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
margin-bottom: 16px;
overflow: hidden;
}
/* 侧边栏面板标题 */
.skin-chameleon .panel-heading,
.chameleon-sidebar .panel-heading {
background: #1a6fc4;
color: #ffffff;
font-weight: 600;
font-size: 0.9em;
padding: 10px 16px;
border: none;
letter-spacing: 0.02em;
}
/* 侧边栏链接 */
.skin-chameleon .panel-body a,
.chameleon-sidebar .panel-body a {
color: #5a6170;
display: block;
padding: 6px 16px;
font-size: 0.88em;
transition: color 0.15s ease, background 0.15s ease;
}
.skin-chameleon .panel-body a:hover,
.chameleon-sidebar .panel-body a:hover {
color: #1a6fc4;
background: #e8f1fb;
text-decoration: none;
}
/* 侧边栏列表 */
.skin-chameleon .panel-body ul,
.chameleon-sidebar .panel-body ul {
list-style: none;
margin: 0;
padding: 0;
}
.skin-chameleon .panel-body ul li,
.chameleon-sidebar .panel-body ul li {
border-bottom: 1px solid #eef1f5;
}
.skin-chameleon .panel-body ul li:last-child {
border-bottom: none;
}
/* ----------------------------------------------------------
5. 页脚
---------------------------------------------------------- */
footer,
#footer,
.mw-footer {
background: #ffffff;
border-top: 1px solid #e2e6ec;
padding: 20px 24px;
margin-top: 40px;
font-size: 0.82em;
color: #8c939e;
text-align: center;
}
footer a,
#footer a {
color: #5a6170;
}
footer a:hover,
#footer a:hover {
color: #1a6fc4;
}
/* ----------------------------------------------------------
6. 工具栏 & 页面操作按钮（编辑/历史/讨论等）
---------------------------------------------------------- */
.nav-tabs,
#p-views ul,
.mw-portlet-views ul {
border-bottom: 1px solid #e2e6ec;
}
.nav-tabs > li > a,
#p-views li a {
color: #5a6170;
font-size: 0.88em;
padding: 8px 14px;
border: none;
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs > li > a:hover,
#p-views li a:hover {
color: #1a6fc4;
background: transparent;
border-bottom-color: #1a6fc4;
}
.nav-tabs > li.active > a,
#p-views li.selected a {
color: #1a6fc4;
font-weight: 600;
border-bottom-color: #1a6fc4;
background: transparent;
}
/* ----------------------------------------------------------
7. 按钮统一风格
---------------------------------------------------------- */
.btn-primary,
.mw-ui-progressive,
input[type="submit"] {
background: #1a6fc4;
border: none;
border-radius: 6px;
color: #ffffff;
font-weight: 600;
padding: 8px 20px;
font-size: 0.9em;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover,
.mw-ui-progressive:hover,
input[type="submit"]:hover {
background: #155da6;
box-shadow: 0 2px 8px rgba(26, 111, 196, 0.25);
}
.btn-default,
.mw-ui-quiet {
background: #f5f7fa;
border: 1px solid #e2e6ec;
border-radius: 6px;
color: #5a6170;
padding: 8px 20px;
font-size: 0.9em;
transition: background 0.15s ease;
}
.btn-default:hover,
.mw-ui-quiet:hover {
background: #e8f1fb;
color: #1a6fc4;
border-color: #1a6fc4;
}
/* ----------------------------------------------------------
8. 面包屑 / 子标题区
---------------------------------------------------------- */
#contentSub,
.mw-body-content #contentSub {
color: #8c939e;
font-size: 0.84em;
margin-bottom: 12px;
}
/* 跳转提示 */
.mw-redirectedfrom {
color: #8c939e;
font-size: 0.84em;
font-style: italic;
}
/* ----------------------------------------------------------
9. 编辑页面优化
---------------------------------------------------------- */
#editform textarea,
.mw-editfont-default {
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
font-size: 0.9em;
border: 1px solid #e2e6ec;
border-radius: 8px;
padding: 14px;
background: #ffffff;
line-height: 1.7;
}
#editform textarea:focus {
border-color: #1a6fc4;
box-shadow: 0 0 0 3px rgba(26, 111, 196, 0.12);
outline: none;
}
/* ----------------------------------------------------------
10. PC端 Infobox 固定布局
在 PC 宽屏下，Infobox 固定在左侧（视觉上右侧浮动已在 Common.css）
这里确保 Chameleon 的 grid 不破坏布局
---------------------------------------------------------- */
@media (min-width: 992px) {
/* 确保内容区有足够空间给浮动 Infobox */
#mw-content-text {
overflow: visible;
}
/* Infobox 宽度锁定 */
.infobox,
.infobox-wrapper {
width: 300px;
max-width: 300px;
}
}
/* ----------------------------------------------------------
11. Chameleon Bootstrap 覆盖：去除多余边框/阴影
---------------------------------------------------------- */
.well {
background: #ffffff;
border: 1px solid #e2e6ec;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.panel-default > .panel-heading {
background: #f5f7fa;
border-color: #e2e6ec;
color: #181e28;
}
/* 去除 Chameleon 默认的灰色背景 */
.skin-chameleon #mw-content-text {
background: transparent;
}