|
|
| （未显示同一用户的19个中间版本） |
| 第1行： |
第1行： |
| /* ============================================
| |
| 国漫TV · MediaWiki 全局样式
| |
| 方案B：青蓝系卡片流
| |
| 粘贴到 MediaWiki:Common.css 即可生效
| |
| ============================================ */
| |
|
| |
|
| /* ===== CSS 变量 ===== */
| |
| :root {
| |
| --c-bg: #f5f7fa;
| |
| --c-bg2: #eef1f6;
| |
| --c-bg3: #e4e9f2;
| |
| --c-surface: #ffffff;
| |
| --c-border: #d8dfe8;
| |
| --c-text: #181e28;
| |
| --c-text2: #3a4455;
| |
| --c-text3: #7a8699;
| |
| --c-accent: #1a6fc4;
| |
| --c-accent2: #2580da;
| |
| --c-accent3: #4a9af0;
| |
| --c-red: #e03020;
| |
| --c-green: #1a7a3a;
| |
| --radius: 8px;
| |
| --shadow: 0 1px 10px rgba(20,50,100,.08);
| |
| --shadow-lg: 0 4px 20px rgba(20,50,100,.12);
| |
| }
| |
|
| |
| /* ===== 全局基础 ===== */
| |
| body {
| |
| background: var(--c-bg);
| |
| color: var(--c-text);
| |
| font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
| |
| font-size: 15px;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| /* ===== 面包屑 ===== */
| |
| #contentSub,
| |
| .mw-breadcrumb {
| |
| padding: 8px 20px;
| |
| font-size: .75rem;
| |
| color: var(--c-text3);
| |
| background: var(--c-surface);
| |
| border-bottom: 1px solid var(--c-border);
| |
| }
| |
|
| |
| /* ===== 词条主体区域 ===== */
| |
| #mw-content-text {
| |
| max-width: 1100px;
| |
| margin: 0 auto;
| |
| padding: 20px;
| |
| }
| |
|
| |
| /* ===== 正文段落 ===== */
| |
| #mw-content-text p {
| |
| font-size: .88rem;
| |
| color: var(--c-text2);
| |
| margin-bottom: .9em;
| |
| line-height: 1.9;
| |
| }
| |
|
| |
| #mw-content-text a {
| |
| color: var(--c-accent);
| |
| text-decoration: none;
| |
| border-bottom: 1px solid rgba(26,111,196,.2);
| |
| transition: border-color .2s;
| |
| }
| |
|
| |
| #mw-content-text a:hover {
| |
| border-color: var(--c-accent);
| |
| }
| |
|
| |
| /* ===== 章节标题 ===== */
| |
| #mw-content-text h2 {
| |
| font-family: 'Noto Serif SC', 'SimSun', serif;
| |
| font-size: 1.1rem;
| |
| color: var(--c-text);
| |
| margin: 28px 0 14px;
| |
| padding-bottom: 8px;
| |
| border-bottom: 2px solid var(--c-border);
| |
| position: relative;
| |
| }
| |
|
| |
| #mw-content-text h2::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: -2px;
| |
| left: 0;
| |
| width: 32px;
| |
| height: 2px;
| |
| background: var(--c-accent);
| |
| }
| |
|
| |
| #mw-content-text h3 {
| |
| font-size: .95rem;
| |
| font-weight: 700;
| |
| color: var(--c-text2);
| |
| margin: 16px 0 10px;
| |
| padding-left: 10px;
| |
| border-left: 3px solid var(--c-accent2);
| |
| }
| |
|
| |
| /* ===== 目录（TOC） ===== */
| |
| #toc {
| |
| background: var(--c-surface);
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| padding: 14px 16px;
| |
| box-shadow: var(--shadow);
| |
| display: inline-block;
| |
| margin-bottom: 20px;
| |
| min-width: 200px;
| |
| }
| |
|
| |
| #toc h2 {
| |
| font-size: .7rem !important;
| |
| font-weight: 700;
| |
| color: var(--c-text3);
| |
| letter-spacing: .1em;
| |
| text-transform: uppercase;
| |
| margin: 0 0 10px !important;
| |
| padding: 0 0 8px !important;
| |
| border-bottom: 1px solid var(--c-border) !important;
| |
| }
| |
|
| |
| #toc h2::after { display: none; }
| |
|
| |
| #toc ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| #toc li {
| |
| margin: 2px 0;
| |
| }
| |
|
| |
| #toc a {
| |
| display: block;
| |
| padding: 4px 8px;
| |
| border-radius: 4px;
| |
| color: var(--c-text2) !important;
| |
| text-decoration: none !important;
| |
| font-size: .78rem;
| |
| border-bottom: none !important;
| |
| transition: all .15s;
| |
| }
| |
|
| |
| #toc a:hover {
| |
| background: rgba(26,111,196,.07);
| |
| color: var(--c-accent) !important;
| |
| }
| |
|
| |
| /* ===== 表格 ===== */
| |
| #mw-content-text table.wikitable {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| font-size: .82rem;
| |
| margin: 10px 0 18px;
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| overflow: hidden;
| |
| box-shadow: var(--shadow);
| |
| }
| |
|
| |
| #mw-content-text table.wikitable th {
| |
| background: var(--c-bg2);
| |
| padding: 8px 10px;
| |
| text-align: left;
| |
| font-weight: 700;
| |
| color: var(--c-text2);
| |
| font-size: .75rem;
| |
| border-bottom: 2px solid var(--c-border);
| |
| border: 1px solid var(--c-border);
| |
| }
| |
|
| |
| #mw-content-text table.wikitable td {
| |
| padding: 7px 10px;
| |
| border: 1px solid var(--c-border);
| |
| color: var(--c-text2);
| |
| vertical-align: top;
| |
| }
| |
|
| |
| #mw-content-text table.wikitable tr:hover td {
| |
| background: var(--c-bg);
| |
| }
| |
|
| |
| /* ===== 引用块 ===== */
| |
| #mw-content-text blockquote {
| |
| margin: 8px 0;
| |
| padding: 12px 16px;
| |
| background: rgba(26,111,196,.04);
| |
| border-left: 3px solid var(--c-accent);
| |
| border-radius: 0 var(--radius) var(--radius) 0;
| |
| font-style: italic;
| |
| color: var(--c-text2);
| |
| font-size: .86rem;
| |
| }
| |
|
| |
| /* ===== Infobox 样式 ===== */
| |
| .infobox {
| |
| float: right;
| |
| clear: right;
| |
| margin: 0 0 20px 24px;
| |
| width: 260px;
| |
| background: var(--c-surface);
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| overflow: hidden;
| |
| box-shadow: var(--shadow);
| |
| font-size: .82rem;
| |
| }
| |
|
| |
| .infobox-title {
| |
| background: var(--c-accent);
| |
| padding: 10px 14px;
| |
| font-family: 'Noto Serif SC', serif;
| |
| font-size: 1rem;
| |
| color: #fff;
| |
| text-align: center;
| |
| letter-spacing: .1em;
| |
| }
| |
|
| |
| .infobox-image {
| |
| background: var(--c-bg2);
| |
| padding: 12px;
| |
| text-align: center;
| |
| border-bottom: 1px solid var(--c-border);
| |
| }
| |
|
| |
| .infobox-image img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| .infobox-caption {
| |
| font-size: .65rem;
| |
| color: var(--c-text3);
| |
| margin-top: 5px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .infobox table {
| |
| width: 100%;
| |
| border-collapse: collapse;
| |
| margin: 0;
| |
| }
| |
|
| |
| .infobox table tr {
| |
| border-bottom: 1px solid var(--c-border);
| |
| }
| |
|
| |
| .infobox table tr:last-child {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .infobox table th {
| |
| width: 40%;
| |
| padding: 5px 9px;
| |
| font-size: .71rem;
| |
| font-weight: 600;
| |
| color: var(--c-text3);
| |
| text-align: right;
| |
| background: var(--c-bg2);
| |
| vertical-align: top;
| |
| white-space: nowrap;
| |
| border: none;
| |
| }
| |
|
| |
| .infobox table td {
| |
| padding: 5px 9px;
| |
| font-size: .75rem;
| |
| color: var(--c-text2);
| |
| vertical-align: top;
| |
| border: none;
| |
| }
| |
|
| |
| .infobox .infobox-section th {
| |
| background: var(--c-bg3);
| |
| text-align: center;
| |
| font-size: .65rem;
| |
| letter-spacing: .1em;
| |
| color: var(--c-text3);
| |
| padding: 4px 9px;
| |
| font-weight: 700;
| |
| width: 100%;
| |
| }
| |
|
| |
| .infobox-highlight {
| |
| font-weight: 700;
| |
| color: var(--c-red);
| |
| }
| |
|
| |
| .infobox-badge {
| |
| display: inline-block;
| |
| padding: 1px 6px;
| |
| border-radius: 3px;
| |
| font-size: .65rem;
| |
| font-weight: 700;
| |
| background: #e8f5e9;
| |
| color: #2e7d32;
| |
| }
| |
|
| |
| /* ===== 境界进度条 ===== */
| |
| .realm-chart {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 5px;
| |
| margin: 10px 0 18px;
| |
| }
| |
|
| |
| .realm-row {
| |
| display: grid;
| |
| grid-template-columns: 80px 1fr 64px;
| |
| align-items: center;
| |
| gap: 8px;
| |
| font-size: .78rem;
| |
| }
| |
|
| |
| .realm-name {
| |
| text-align: right;
| |
| font-weight: 600;
| |
| color: var(--c-text2);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .realm-name-peak {
| |
| text-align: right;
| |
| font-weight: 700;
| |
| color: var(--c-red);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .realm-track {
| |
| height: 18px;
| |
| background: var(--c-bg2);
| |
| border-radius: 3px;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .realm-fill {
| |
| height: 100%;
| |
| border-radius: 3px;
| |
| display: flex;
| |
| align-items: center;
| |
| padding-left: 7px;
| |
| font-size: .66rem;
| |
| font-weight: 700;
| |
| color: #fff;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .realm-ep {
| |
| color: var(--c-text3);
| |
| font-size: .72rem;
| |
| }
| |
|
| |
| /* ===== 技能卡片 ===== */
| |
| .skill-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 10px;
| |
| margin: 10px 0 18px;
| |
| }
| |
|
| |
| .skill-card {
| |
| background: var(--c-bg);
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| padding: 12px 14px;
| |
| }
| |
|
| |
| .skill-level {
| |
| display: inline-block;
| |
| font-size: .64rem;
| |
| font-weight: 700;
| |
| padding: 1px 7px;
| |
| border-radius: 3px;
| |
| background: rgba(26,111,196,.08);
| |
| color: var(--c-accent);
| |
| border: 1px solid rgba(26,111,196,.2);
| |
| margin-bottom: 4px;
| |
| }
| |
|
| |
| .skill-level-special {
| |
| display: inline-block;
| |
| font-size: .64rem;
| |
| font-weight: 700;
| |
| padding: 1px 7px;
| |
| border-radius: 3px;
| |
| background: rgba(224,48,32,.08);
| |
| color: var(--c-red);
| |
| border: 1px solid rgba(224,48,32,.2);
| |
| margin-bottom: 4px;
| |
| }
| |
|
| |
| .skill-name {
| |
| font-weight: 700;
| |
| font-size: .86rem;
| |
| margin-bottom: 3px;
| |
| color: var(--c-text);
| |
| }
| |
|
| |
| .skill-desc {
| |
| font-size: .75rem;
| |
| color: var(--c-text3);
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* ===== 人物关系卡片 ===== */
| |
| .relation-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 10px;
| |
| margin: 10px 0 18px;
| |
| }
| |
|
| |
| .relation-card {
| |
| background: var(--c-bg);
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| padding: 12px 14px;
| |
| }
| |
|
| |
| .relation-type {
| |
| font-size: .64rem;
| |
| font-weight: 700;
| |
| color: var(--c-accent);
| |
| letter-spacing: .08em;
| |
| margin-bottom: 3px;
| |
| }
| |
|
| |
| .relation-name {
| |
| font-weight: 700;
| |
| font-size: .88rem;
| |
| margin-bottom: 2px;
| |
| }
| |
|
| |
| .relation-desc {
| |
| font-size: .74rem;
| |
| color: var(--c-text3);
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| /* ===== 延伸阅读 ===== */
| |
| .see-also {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 7px;
| |
| margin: 10px 0 18px;
| |
| }
| |
|
| |
| .see-also-link {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 4px;
| |
| padding: 4px 12px;
| |
| background: var(--c-bg);
| |
| border: 1px solid var(--c-border);
| |
| border-radius: 20px;
| |
| color: var(--c-accent) !important;
| |
| font-size: .78rem;
| |
| text-decoration: none !important;
| |
| border-bottom: none !important;
| |
| }
| |
|
| |
| /* ===== Navbox ===== */
| |
| .navbox {
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| overflow: hidden;
| |
| background: var(--c-surface);
| |
| margin: 14px 0;
| |
| box-shadow: var(--shadow);
| |
| }
| |
|
| |
| .navbox-title {
| |
| background: var(--c-bg2);
| |
| padding: 8px 14px;
| |
| font-size: .78rem;
| |
| font-weight: 700;
| |
| color: var(--c-text2);
| |
| }
| |
|
| |
| .navbox-body {
| |
| padding: 12px 14px;
| |
| font-size: .78rem;
| |
| }
| |
|
| |
| .navbox-group {
| |
| color: var(--c-text3);
| |
| font-weight: 600;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| /* ===== 分类标签 ===== */
| |
| #catlinks {
| |
| margin-top: 24px;
| |
| padding-top: 14px;
| |
| border-top: 1px solid var(--c-border);
| |
| font-size: .75rem;
| |
| color: var(--c-text3);
| |
| }
| |
|
| |
| #catlinks a {
| |
| display: inline-block;
| |
| padding: 2px 8px;
| |
| background: var(--c-bg);
| |
| border: 1px solid var(--c-border);
| |
| border-radius: 3px;
| |
| color: var(--c-accent) !important;
| |
| font-size: .7rem;
| |
| text-decoration: none !important;
| |
| border-bottom: none !important;
| |
| margin: 2px;
| |
| }
| |
|
| |
| /* ===== 移动端适配 ===== */
| |
| @media (max-width: 860px) {
| |
| .infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 20px 0;
| |
| }
| |
|
| |
| .skill-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .relation-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| #mw-content-text {
| |
| padding: 14px;
| |
| }
| |
|
| |
| .realm-row {
| |
| grid-template-columns: 72px 1fr 56px;
| |
| font-size: .72rem;
| |
| }
| |
| }
| |
|
| |
| /* ===== 移动端横向章节导航条 ===== */
| |
| .mobile-chapter-nav {
| |
| display: none;
| |
| overflow-x: auto;
| |
| -webkit-overflow-scrolling: touch;
| |
| scrollbar-width: none;
| |
| background: var(--c-surface);
| |
| border-bottom: 2px solid var(--c-border);
| |
| position: sticky;
| |
| top: 0;
| |
| z-index: 90;
| |
| }
| |
|
| |
| .mobile-chapter-nav::-webkit-scrollbar {
| |
| display: none;
| |
| }
| |
|
| |
| .mobile-chapter-nav-inner {
| |
| display: flex;
| |
| padding: 0 16px;
| |
| min-width: max-content;
| |
| }
| |
|
| |
| .mobile-chapter-nav a {
| |
| padding: 10px 14px;
| |
| font-size: .78rem;
| |
| color: var(--c-text3) !important;
| |
| text-decoration: none !important;
| |
| white-space: nowrap;
| |
| border-bottom: 2px solid transparent !important;
| |
| margin-bottom: -2px;
| |
| }
| |
|
| |
| .mobile-chapter-nav a:hover {
| |
| color: var(--c-accent) !important;
| |
| border-bottom-color: var(--c-accent) !important;
| |
| }
| |
|
| |
| @media (max-width: 860px) {
| |
| .mobile-chapter-nav {
| |
| display: block;
| |
| }
| |
| }
| |
|
| |
| /* ===== 周边图鉴 ===== */
| |
| .merch-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 10px;
| |
| margin: 10px 0 18px;
| |
| }
| |
|
| |
| .merch-card {
| |
| border: 1px solid var(--c-border);
| |
| border-radius: var(--radius);
| |
| overflow: hidden;
| |
| background: var(--c-bg);
| |
| }
| |
|
| |
| .merch-img {
| |
| width: 100%;
| |
| aspect-ratio: 1;
| |
| background: var(--c-bg2);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| font-size: 2rem;
| |
| color: var(--c-text3);
| |
| }
| |
|
| |
| .merch-info {
| |
| padding: 7px 9px;
| |
| }
| |
|
| |
| .merch-name {
| |
| font-size: .73rem;
| |
| font-weight: 600;
| |
| color: var(--c-text);
| |
| }
| |
|
| |
| .merch-btn {
| |
| display: block;
| |
| margin: 5px 9px 9px;
| |
| padding: 4px;
| |
| text-align: center;
| |
| background: var(--c-accent);
| |
| color: #fff !important;
| |
| border-radius: 4px;
| |
| font-size: .7rem;
| |
| text-decoration: none !important;
| |
| border-bottom: none !important;
| |
| }
| |
|
| |
| @media (max-width: 860px) {
| |
| .merch-grid {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
| }
| |
|
| |
| /* ===== 战绩表格特殊颜色 ===== */
| |
| .result-win { color: var(--c-green); font-weight: 700; }
| |
| .result-lose { color: var(--c-red); }
| |
| .result-draw { color: var(--c-accent); font-weight: 700; }
| |
| .text-note { color: var(--c-text3); font-size: .74rem; }
| |
| .text-hi { color: var(--c-accent); font-weight: 700; }
| |
| .text-peak { color: var(--c-red); font-weight: 700; }
| |
