MediaWiki:Mobile.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ----------------------------------------------------------
1. 全局移动端基础
---------------------------------------------------------- */
body {
background: #f5f7fa;
font-size: 15px;
line-height: 1.72;
-webkit-text-size-adjust: 100%;
}
/* 防止任何元素撑破屏幕 */
* {
max-width: 100%;
box-sizing: border-box;
}
/* ----------------------------------------------------------
2. 移动端页面标题
---------------------------------------------------------- */
.pre-content h1,
#section_0 h1,
h1.firstHeading {
font-size: 1.5em;
font-weight: 800;
color: #181e28;
line-height: 1.3;
padding: 12px 16px 8px;
margin: 0;
}
/* ----------------------------------------------------------
3. 移动端内容卡片化
---------------------------------------------------------- */
/* Minerva 的内容区 */
.mw-parser-output {
padding: 0 4px;
}
/* 章节折叠标题（Minerva 默认折叠章节） */
.section-heading,
.mw-parser-output > .mw-heading2,
.mw-parser-output > h2 {
background: #ffffff;
padding: 14px 16px 12px;
margin: 12px 0 0 0;
border-radius: 10px 10px 0 0;
border-bottom: 2px solid #1a6fc4;
font-size: 1.15em;
font-weight: 700;
color: #181e28;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* 章节折叠箭头图标 */
.section-heading .indicator {
color: #1a6fc4;
}
/* 章节内容块 */
.mf-section-0,
.mf-section-1,
.mf-section-2,
.mf-section-3,
.mf-section-4,
.mf-section-5,
.mf-section-6,
.mf-section-7,
.mf-section-8,
.mf-section-9,
.mf-section-10 {
background: #ffffff;
padding: 12px 16px;
margin: 0;
border-radius: 0 0 10px 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
margin-bottom: 12px;
}
/* 三级标题 */
.mw-parser-output > h3,
.mw-parser-output > .mw-heading3 {
font-size: 1em;
font-weight: 600;
color: #1a6fc4;
padding-left: 10px;
border-left: 3px solid #1a6fc4;
margin: 16px 0 8px;
}
/* ----------------------------------------------------------
4. 移动端 Infobox：全宽 + 顶部展示
---------------------------------------------------------- */
.infobox,
.infobox-wrapper {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 16px 0;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
font-size: 0.9em;
overflow: hidden;
}
/* Infobox 标题 */
.infobox-title,
.infobox caption,
.infobox th[colspan] {
font-size: 1.1em;
padding: 12px 14px;
}
/* Infobox 图片全宽 */
.infobox-image img,
.infobox .image-section img {
width: 100%;
height: auto;
}
/* Infobox 两列布局调整 */
.infobox th {
width: 32%;
padding: 7px 10px;
font-size: 0.88em;
}
.infobox td {
padding: 7px 10px;
font-size: 0.92em;
}
/* ----------------------------------------------------------
5. 移动端表格：横向可滚动
---------------------------------------------------------- */
/* 所有 wikitable 包裹在可滚动容器内 */
.wikitable {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
font-size: 0.85em;
}
.wikitable th {
padding: 8px 10px;
font-size: 0.88em;
white-space: nowrap;
}
.wikitable td {
padding: 7px 10px;
white-space: normal;
min-width: 80px;
}
/* 表格滚动提示：左侧渐变阴影（暗示可以滑动） */
.content-table-wrapper {
position: relative;
}
.content-table-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, rgba(245, 247, 250, 0.8));
pointer-events: none;
}
/* ----------------------------------------------------------
6. 移动端 Navbox
---------------------------------------------------------- */
.navbox-wrapper,
.navbox {
font-size: 0.82em;
border-radius: 10px;
margin: 12px 0;
}
.navbox-title {
padding: 8px 12px;
font-size: 0.95em;
}
.navbox-group {
text-align: left;
padding: 6px 10px;
font-size: 0.88em;
white-space: normal;
width: auto;
}
.navbox-list {
padding: 6px 10px;
line-height: 2.2; /* 增大行高，方便点击 */
}
/* Navbox 链接增大点击区域 */
.navbox-list a {
display: inline-block;
padding: 2px 6px;
margin: 1px 0;
}
/* ----------------------------------------------------------
7. 移动端人物关系卡片
---------------------------------------------------------- */
.relation-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.relation-card {
padding: 10px 8px;
}
.relation-label {
font-size: 0.72em;
}
.relation-name {
font-size: 0.88em;
}
/* ----------------------------------------------------------
8. 移动端目录（右下角浮动按钮）
Minerva 皮肤自带目录按钮，这里只做美化
---------------------------------------------------------- */
#toc,
.toc {
display: none; /* 隐藏嵌入式目录，用 Minerva 自带的浮动按钮 */
}
/* Minerva 的目录浮动按钮 */
.toc-button,
.minerva-toc-button {
background: #1a6fc4;
color: #ffffff;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
box-shadow: 0 2px 10px rgba(26, 111, 196, 0.35);
position: fixed;
bottom: 20px;
right: 16px;
z-index: 100;
font-size: 1.1em;
}
/* ----------------------------------------------------------
9. 移动端分类标签
---------------------------------------------------------- */
#catlinks {
padding: 10px 14px;
margin: 12px 4px;
border-radius: 10px;
}
#catlinks a {
padding: 4px 10px;
font-size: 0.85em;
margin: 2px;
}
/* ----------------------------------------------------------
10. 移动端引用块
---------------------------------------------------------- */
blockquote,
.character-quote {
padding: 12px 14px;
margin: 12px 0;
font-size: 0.95em;
}
/* ----------------------------------------------------------
11. 移动端图片
---------------------------------------------------------- */
.thumb {
float: none;
width: 100%;
max-width: 100%;
margin: 12px 0;
}
.thumb .thumbinner {
width: 100% !important;
}
.thumb img {
width: 100%;
height: auto;
}
/* ----------------------------------------------------------
12. 移动端搜索
---------------------------------------------------------- */
.search-box input,
#searchInput {
font-size: 16px; /* 防止 iOS 自动缩放 */
padding: 10px 16px;
border-radius: 100px;
width: 100%;
}
/* ----------------------------------------------------------
13. 移动端触摸优化
所有可点击元素最小 44px 高度（Apple HIG 标准）
---------------------------------------------------------- */
a,
button,
.mw-ui-progressive,
.mw-ui-quiet,
.section-heading {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* 链接在段落中不需要 flex */
p a,
td a,
li a,
.navbox-list a,
#catlinks a,
.mw-parser-output > p a,
.infobox a {
display: inline;
min-height: auto;
}
/* ----------------------------------------------------------
14. 移动端境界进度条
---------------------------------------------------------- */
.realm-bar {
height: 8px;
}
/* ----------------------------------------------------------
15. 移动端 Tabber 标签页
---------------------------------------------------------- */
.tabber ul.tabbernav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
padding-bottom: 2px;
display: flex;
}
.tabber ul.tabbernav li a {
padding: 10px 14px;
white-space: nowrap;
font-size: 0.88em;
min-height: 44px;
display: flex;
align-items: center;
}
.tabber .tabbertab {
padding: 14px;
}
/* ----------------------------------------------------------
16. 移动端剧透折叠块
---------------------------------------------------------- */
.spoiler-box .mw-collapsible-toggle {
padding: 10px 14px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* ----------------------------------------------------------
17. 隐藏移动端不需要的元素
---------------------------------------------------------- */
.mw-editsection {
font-size: 0.7em;
}
/* 如果有广告位，移动端第一屏不显示侧边广告 */
.sidebar-ad {
display: none;
}
/* ----------------------------------------------------------
18. 横屏优化（平板横屏或大屏手机）
---------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 991px) {
.relation-grid {
grid-template-columns: repeat(3, 1fr);
}
.infobox,
.infobox-wrapper {
float: right;
width: 280px;
margin: 0 0 16px 16px;
}
.mf-section-0,
.mf-section-1,
.mf-section-2,
.mf-section-3,
.mf-section-4,
.mf-section-5 {
padding: 14px 20px;
}
}