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: #eef1f6;
font-size: 15px;
line-height: 1.72;
-webkit-text-size-adjust: 100%;
}
/* ----------------------------------------------------------
2. 页面标题
---------------------------------------------------------- */
h1.firstHeading, .pre-content h1, #section_0 h1 {
font-size: 1.45em;
font-weight: 800;
color: #1a1d24;
padding: 12px 16px 8px;
margin: 0;
}
/* ----------------------------------------------------------
3. 章节卡片
---------------------------------------------------------- */
.section-heading,
.mw-parser-output > .mw-heading2,
.mw-parser-output > h2 {
background: #fff;
padding: 14px 16px 12px;
margin: 12px 0 0 0;
border-radius: 14px 14px 0 0;
border-left: 4px solid #2d7dd2;
border-bottom: none;
font-size: 1.12em;
font-weight: 700;
color: #1a1d24;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.section-heading .indicator { color: #2d7dd2; }
.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: #fff;
padding: 12px 16px;
margin: 0 0 12px;
border-radius: 0 0 14px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.mw-parser-output > h3, .mw-parser-output > .mw-heading3 {
font-size: 0.98em;
font-weight: 600;
color: #2d7dd2;
padding-left: 10px;
border-left: 3px solid #2d7dd2;
margin: 14px 0 8px;
}
/* ----------------------------------------------------------
4. Infobox 全宽
---------------------------------------------------------- */
.infobox {
width: 100%;
max-width: 100%;
margin: 0 0 16px 0;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
font-size: 0.88em;
overflow: hidden;
}
.infobox-title, .infobox caption, .infobox th[colspan] {
font-size: 1.1em;
padding: 13px 14px;
}
.infobox-image img, .infobox .image-section img {
width: 100%; height: auto;
}
.infobox th { width: 33%; padding: 7px 10px; font-size: 0.86em; }
.infobox td { padding: 7px 10px; font-size: 0.9em; }
/* ----------------------------------------------------------
5. 表格横向滚动
---------------------------------------------------------- */
.wikitable {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
font-size: 0.84em;
}
.wikitable th { padding: 8px 10px; white-space: nowrap; }
.wikitable td { padding: 7px 10px; white-space: normal; min-width: 80px; }
/* ----------------------------------------------------------
6. Navbox
---------------------------------------------------------- */
.navbox { font-size: 0.82em; border-radius: 14px; margin: 12px 0; }
.navbox-title { padding: 8px 12px; font-size: 0.95em; }
.navbox-group { text-align: left; padding: 6px 10px; white-space: normal; width: auto; }
.navbox-list { padding: 6px 10px; line-height: 2.2; }
.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.7em; }
.relation-name { font-size: 0.86em; }
/* ----------------------------------------------------------
8. 目录按钮
---------------------------------------------------------- */
#toc, .toc { display: none; }
.toc-button, .minerva-toc-button {
background: #2d7dd2;
color: #fff;
border: none;
border-radius: 50%;
width: 48px; height: 48px;
box-shadow: 0 2px 10px rgba(45,125,210,0.35);
position: fixed;
bottom: 20px; right: 16px;
z-index: 100;
}
/* ----------------------------------------------------------
9. 分类标签
---------------------------------------------------------- */
#catlinks {
padding: 10px 14px;
margin: 12px 4px;
border-radius: 14px;
}
#catlinks a { padding: 4px 10px; font-size: 0.84em; }
/* ----------------------------------------------------------
10. 引用块
---------------------------------------------------------- */
blockquote, .character-quote {
padding: 12px 14px;
margin: 12px 0;
font-size: 0.93em;
}
/* ----------------------------------------------------------
11. 图片全宽
---------------------------------------------------------- */
.thumb { width: 100%; max-width: 100%; margin: 12px 0; }
.thumb .thumbinner { width: 100%; }
.thumb img { width: 100%; height: auto; }
/* ----------------------------------------------------------
12. 搜索框防缩放
---------------------------------------------------------- */
.search-box input, #searchInput {
font-size: 16px;
padding: 10px 16px;
border-radius: 100px;
width: 100%;
}
/* ----------------------------------------------------------
13. 触摸区域
---------------------------------------------------------- */
.section-heading, button, .mw-ui-progressive, .mw-ui-quiet {
min-height: 44px;
}
/* ----------------------------------------------------------
14. Tabber
---------------------------------------------------------- */
.tabber ul.tabbernav {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
display: flex;
}
.tabber ul.tabbernav li a {
padding: 10px 14px;
white-space: nowrap;
font-size: 0.86em;
}
/* ----------------------------------------------------------
15. 平板横屏
---------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 991px) {
.relation-grid { grid-template-columns: repeat(3, 1fr); }
.mf-section-0, .mf-section-1, .mf-section-2,
.mf-section-3, .mf-section-4, .mf-section-5 {
padding: 14px 20px;
}
}
/* ----------------------------------------------------------
16. 隐藏移动端不需要的元素
---------------------------------------------------------- */
.mw-editsection { font-size: 0.68em; }
.sidebar-ad { display: none; }