|
|
| （未显示同一用户的2个中间版本） |
| 第1行： |
第1行： |
| /* ----------------------------------------------------------
| |
| 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;
| |
| }
| |
| }
| |
