MediaWiki:Common.css：修订间差异

2026年6月2日 (二) 20:53的版本

/* ----------------------------------------------------------
   1. CSS 变量
   ---------------------------------------------------------- */
:root {
  --g-bg: #eef1f6;
  --g-card: #ffffff;
  --g-blue: #2d7dd2;
  --g-blue-deep: #1b5eb5;
  --g-blue-pale: #e6f0fb;
  --g-red: #ef4444;
  --g-red-pale: #fef2f2;
  --g-green: #10b981;
  --g-purple: #8b5cf6;
  --g-text: #1a1d24;
  --g-text-2: #4b5563;
  --g-text-3: #9ca3af;
  --g-border: #e5e7eb;
  --g-border-light: #f3f4f6;
  --g-radius: 14px;
  --g-radius-sm: 8px;
  --g-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --g-shadow-hover: 0 8px 25px rgba(45,125,210,0.12), 0 2px 6px rgba(0,0,0,0.04);
  --g-font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --g-font-mono: "JetBrains Mono", "Fira Code", monospace;
  --g-gap: 16px;
}

/* ----------------------------------------------------------
   2. 全局
   ---------------------------------------------------------- */
body {
  background: var(--g-bg);
  color: var(--g-text);
  font-family: var(--g-font);
  font-size: 15px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--g-blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--g-blue-deep); }
a.new { color: var(--g-red); }

/* ----------------------------------------------------------
   3. 页面标题
   ---------------------------------------------------------- */
#firstHeading, .firstHeading, .page-header h1 {
  font-weight: 800;
  font-size: 1.85em;
  color: var(--g-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 6px;
  border-bottom: none;
}

/* ----------------------------------------------------------
   4. 核心布局 — CSS Grid 双栏
   PC端：左内容(1fr) + 右Infobox(310px)
   手机端：单栏，Infobox在顶部
   ---------------------------------------------------------- */
.mw-parser-output {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-gap);
  max-width: 1060px;
}

@media (min-width: 992px) {
  .mw-parser-output {
    grid-template-columns: 1fr 310px;
    gap: 24px;
    align-items: start;
  }
  .mw-parser-output > .infobox {
    grid-column: 2;
    grid-row: 1 / span 8;
    position: sticky;
    top: 20px;
    align-self: start;
  }
  .mw-parser-output > *:not(.infobox) {
    grid-column: 1;
  }
}

/* ----------------------------------------------------------
   5. 章节卡片化
   ---------------------------------------------------------- */
.mw-parser-output > .mw-heading2,
.mw-parser-output > h2 {
  background: var(--g-card);
  padding: 16px 22px 13px;
  margin: 0;
  border-radius: var(--g-radius) var(--g-radius) 0 0;
  box-shadow: var(--g-shadow);
  font-size: 1.3em;
  font-weight: 700;
  color: var(--g-text);
  line-height: 1.35;
  border-left: 4px solid var(--g-blue);
  border-bottom: none;
}
.mw-parser-output > .mw-heading2 .mw-editsection,
.mw-parser-output > h2 .mw-editsection {
  font-size: 0.6em; font-weight: 400; color: var(--g-text-3);
}

.mw-parser-output > .mw-heading3,
.mw-parser-output > h3 {
  font-size: 1.05em;
  font-weight: 600;
  color: var(--g-blue);
  padding-left: 12px;
  border-left: 3px solid var(--g-blue);
  margin: 1em 0 0.4em;
}

.mw-parser-output > p,
.mw-parser-output > ul,
.mw-parser-output > ol,
.mw-parser-output > dl,
.mw-parser-output > blockquote,
.mw-parser-output > pre,
.mw-parser-output > .wikitable,
.mw-parser-output > div:not(.infobox):not(.navbox):not(.mw-heading2):not(.mw-heading3):not(.relation-grid) {
  background: var(--g-card);
  padding: 12px 22px;
  margin: -1px 0 0 0;
  box-shadow: var(--g-shadow);
}
.mw-parser-output > p:last-child,
.mw-parser-output > ul:last-child,
.mw-parser-output > div:last-child:not(.infobox):not(.navbox),
.mw-parser-output > .wikitable:last-child {
  border-radius: 0 0 var(--g-radius) var(--g-radius);
  padding-bottom: 18px;
}

/* ----------------------------------------------------------
   6. Infobox
   ---------------------------------------------------------- */
.infobox {
  background: var(--g-card);
  border: none;
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  overflow: hidden;
  width: 100%;
  font-size: 0.88em;
  line-height: 1.6;
}
.infobox-title, .infobox caption, .infobox th[colspan] {
  background: linear-gradient(135deg, #2d7dd2 0%, #6c5ce7 100%);
  color: #fff;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
  padding: 16px 18px;
  letter-spacing: 0.03em;
}
.infobox-image img, .infobox .image-section img {
  width: 100%; height: auto; display: block;
}
.infobox-group-header, .infobox tr.infobox-header th {
  background: linear-gradient(135deg, #2d7dd2, #1b5eb5);
  color: #fff;
  font-weight: 600;
  font-size: 0.92em;
  text-align: center;
  padding: 9px 14px;
}
.infobox th {
  background: var(--g-blue-pale);
  color: var(--g-blue);
  font-weight: 600;
  padding: 8px 12px;
  text-align: right;
  width: 36%;
  border-bottom: 1px solid var(--g-border-light);
  vertical-align: top;
}
.infobox td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--g-border-light);
  vertical-align: top;
}
.realm-highlight, .infobox .realm-current {
  color: var(--g-red);
  font-weight: 700;
}

/* ----------------------------------------------------------
   7. 表格
   ---------------------------------------------------------- */
.wikitable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  border-radius: var(--g-radius-sm);
  overflow: hidden;
  font-size: 0.9em;
}
.wikitable th {
  background: linear-gradient(135deg, #2d7dd2 0%, #4a90d9 100%);
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border: none;
}
.wikitable td {
  padding: 9px 14px;
  border: none;
  border-bottom: 1px solid var(--g-border-light);
}
.wikitable tr:nth-child(even) td { background: #f8fafc; }
.wikitable tr:hover td { background: var(--g-blue-pale); transition: background .15s; }

.battle-win { color: var(--g-green); font-weight: 700; }
.battle-lose { color: var(--g-red); font-weight: 700; }
.battle-draw { color: var(--g-text-3); font-weight: 700; }

/* ----------------------------------------------------------
   8. Navbox
   ---------------------------------------------------------- */
.navbox {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  overflow: hidden;
  margin-top: var(--g-gap);
  font-size: 0.86em;
  width: 100%;
}
.navbox-title {
  background: linear-gradient(135deg, #2d7dd2 0%, #6c5ce7 100%);
  color: #fff; font-weight: 700; text-align: center;
  padding: 10px 16px; font-size: 1.05em;
}
.navbox-title a { color: #fff; }
.navbox-title a:hover { color: #d4e8ff; text-decoration: underline; }
.navbox-group {
  background: var(--g-blue-pale); color: var(--g-blue);
  font-weight: 600; padding: 8px 14px; text-align: right;
  white-space: nowrap; border-bottom: 1px solid var(--g-border-light);
}
.navbox-list {
  padding: 8px 14px; border-bottom: 1px solid var(--g-border-light); line-height: 2;
}

/* ----------------------------------------------------------
   9. TOC 目录
   ---------------------------------------------------------- */
#toc, .toc {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
  padding: 14px 18px;
  font-size: 0.88em;
  line-height: 1.85;
}
#toc #toctitle, .toc .toctitle {
  font-weight: 700; color: var(--g-blue);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 2px solid var(--g-blue);
}
#toc ul, .toc ul { list-style: none; margin: 0; padding-left: 14px; }
#toc a, .toc a { color: var(--g-text-2); }
#toc a:hover, .toc a:hover { color: var(--g-blue); }

/* ----------------------------------------------------------
   10. 引用块
   ---------------------------------------------------------- */
blockquote, .character-quote {
  border-left: 4px solid var(--g-blue);
  background: var(--g-blue-pale);
  padding: 14px 20px;
  margin: 12px 0;
  border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0;
  font-style: italic;
  color: var(--g-text-2);
}
blockquote cite, .character-quote cite {
  display: block; margin-top: 8px;
  font-style: normal; font-size: 0.82em; color: var(--g-text-3);
}

/* ----------------------------------------------------------
   11. 分类标签
   ---------------------------------------------------------- */
#catlinks {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius);
  padding: 10px 18px;
  margin-top: var(--g-gap);
  font-size: 0.83em;
  color: var(--g-text-3);
}
#catlinks a {
  display: inline-block;
  background: var(--g-blue-pale);
  color: var(--g-blue);
  padding: 3px 12px;
  border-radius: 100px;
  margin: 2px 3px;
  font-size: 0.9em;
  transition: background .15s, color .15s;
}
#catlinks a:hover {
  background: var(--g-blue); color: #fff; text-decoration: none;
}

/* ----------------------------------------------------------
   12. 人物关系卡片
   ---------------------------------------------------------- */
.relation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0;
  background: var(--g-card);
  padding: 16px 22px;
  box-shadow: var(--g-shadow);
}
.relation-card {
  background: var(--g-border-light);
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  padding: 12px 8px;
  text-align: center;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.relation-card:hover {
  border-color: var(--g-blue);
  box-shadow: var(--g-shadow-hover);
  transform: translateY(-2px);
}
.relation-label {
  font-size: 0.72em; color: var(--g-text-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px;
}
.relation-name { font-weight: 700; color: var(--g-blue); font-size: 0.92em; }
.relation-name a { color: var(--g-blue); }

/* ----------------------------------------------------------
   13. 境界进度条
   ---------------------------------------------------------- */
.realm-bar {
  width: 100%; height: 8px;
  background: var(--g-border-light);
  border-radius: 100px; overflow: hidden; margin: 6px 0;
}
.realm-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--g-blue), var(--g-purple), var(--g-red));
  border-radius: 100px;
  transition: width 0.5s ease;
}

/* ----------------------------------------------------------
   14. 剧透折叠块
   ---------------------------------------------------------- */
.spoiler-box {
  border: 1px dashed var(--g-red);
  border-radius: var(--g-radius-sm);
  margin: 12px 0; overflow: hidden;
}
.spoiler-box .mw-collapsible-toggle {
  background: var(--g-red-pale); color: var(--g-red);
  padding: 9px 16px; font-weight: 600; font-size: 0.86em;
  cursor: pointer; display: block; text-align: center;
}

/* ----------------------------------------------------------
   15. Tabber
   ---------------------------------------------------------- */
.tabber .tabbertab {
  border: 1px solid var(--g-border); border-top: none;
  border-radius: 0 0 var(--g-radius-sm) var(--g-radius-sm);
  padding: 16px 20px; background: var(--g-card);
}
.tabber ul.tabbernav {
  margin: 0; padding: 0;
  border-bottom: 2px solid var(--g-border);
  display: flex;
}
.tabber ul.tabbernav li { list-style: none; }
.tabber ul.tabbernav li a {
  display: block; padding: 9px 18px;
  color: var(--g-text-2); font-weight: 500; font-size: 0.9em;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tabber ul.tabbernav li a:hover { color: var(--g-blue); text-decoration: none; }
.tabber ul.tabbernav li.tabberactive a {
  color: var(--g-blue); border-bottom-color: var(--g-blue); font-weight: 600;
}

/* ----------------------------------------------------------
   16. 搜索框
   ---------------------------------------------------------- */
#searchInput, .mw-searchInput {
  border: 1px solid var(--g-border);
  border-radius: 100px;
  padding: 8px 16px; font-size: 0.9em;
  background: var(--g-card);
  transition: border-color .2s, box-shadow .2s;
}
#searchInput:focus, .mw-searchInput:focus {
  outline: none;
  border-color: var(--g-blue);
  box-shadow: 0 0 0 3px rgba(45,125,210,0.15);
}

/* ----------------------------------------------------------
   17. 杂项
   ---------------------------------------------------------- */
pre, code {
  font-family: var(--g-font-mono); font-size: 0.86em;
  background: #f1f5f9; border-radius: var(--g-radius-sm);
}
pre { padding: 14px 18px; overflow-x: auto; border: 1px solid var(--g-border); }
code { padding: 2px 6px; }

.thumb {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-sm);
  overflow: hidden; background: var(--g-card);
}
.thumb .thumbcaption {
  font-size: 0.8em; color: var(--g-text-3);
  padding: 6px 8px; text-align: center;
}

.mw-body { border: none; }