MediaWiki:Common.css：修订间差异

2026年11月3日 (二) 10:34的最新版本

/* 上古2 · 坎德拉斯主题。基于 Vector 2022，无站点 JavaScript。 */
:root {
  --elder-ink: #e6e0cf;
  --elder-muted: #a8b4ba;
  --elder-gold: #d8bd7b;
  --elder-line: #7c704f;
  --elder-link: #acd6d8;
  --elder-panel: #25333d;
  --elder-atlas: url("https://elder2.wiki-x.cc/images/3/31/Elder2-atlas-3001.png");
  --elder-logo: url("https://elder2.wiki-x.cc/images/3/3c/Asset-2232e18d-a16c-4e53-aecc-812064b32fe0.png");
  --elder-heroes: url("https://elder2.wiki-x.cc/images/3/36/Asset-0ff5e84a-ae0d-4b20-a3b5-ff51002c9543.png");
}
html { background: #121d25; }
body.skin-vector-2022 {
  background: radial-gradient(ellipse at 50% 120px, #40515a66, transparent 700px), #121d25;
  color: var(--elder-ink);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  --background-color-base: #25333d;
  --background-color-neutral-subtle: #1d2b34;
  --background-color-interactive-subtle: #35444b;
  --color-base: #e6e0cf;
  --color-subtle: #a8b4ba;
  --color-progressive: #acd6d8;
  --border-color-base: #7c704f;
}
body.skin-vector-2022::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(#13212aec, #14212bf2 70%), var(--elder-atlas);
  background-size: cover, 820px; background-position: center, center 240px;
}
body.skin-vector-2022 a { color: var(--elder-link); }
body.skin-vector-2022 a:hover { color: #fff0c5; }
body.skin-vector-2022 a:visited { color: #b6c9cf; }
.vector-header-container, .mw-page-container { position: relative; background: transparent !important; }
.vector-header-container { border-bottom: 1px solid #7c704f; box-shadow: 0 4px 20px #0005; }
.vector-header {
  position: relative; max-width: 1280px; height: 218px; box-sizing: border-box;
  margin: 0 auto; padding: 20px 34px 48px; background: transparent;
  background-image: var(--elder-heroes); background-repeat: no-repeat;
  background-position: right 42px top 6px; background-size: 226px auto;
}
.skin-vector-2022 .vector-header { max-width: 1280px !important; }
.skin-vector-2022 .vector-header {
  background: radial-gradient(ellipse at 60% 30%, #31465c88, transparent 70%), #172633;
}
.vector-header::after {
  content: ""; position: absolute; top: 5px; right: 28px; width: 252px; height: 201px;
  background: var(--elder-heroes) center / contain no-repeat; pointer-events: none;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 92%, transparent);
  mix-blend-mode: lighten;
}
.vector-header-start { position: static; }
.mw-logo {
  width: 266px; height: 146px; display: block; flex: none;
  background: var(--elder-logo) left 10px / 240px auto no-repeat;
}
.skin-vector-2022 .mw-logo { position: relative; background: none; }
.mw-logo::before {
  content: ""; position: absolute; inset: 0 0 20px;
  background: var(--elder-logo) left 10px / 240px auto no-repeat;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 88%, transparent);
  mix-blend-mode: lighten;
}
.mw-logo::after {
  content: "上古2 Wiki · 玩家百科"; display: block; padding-top: 129px;
  color: var(--elder-gold); letter-spacing: 3px; font-size: 13px;
}
.mw-logo .mw-logo-container, .mw-logo .mw-logo-icon { display: none; }
.vector-header-end { position: absolute; top: 86px; left: 330px; right: 318px; }
.vector-header-end { width: auto !important; margin: 0 !important; padding: 0 !important; }
.vector-search-box { display: block !important; width: 100% !important; margin: 0; min-width: 0; }
.vector-search-box { margin: 0 !important; padding: 0 !important; box-sizing: border-box; }
.vector-search-box .vector-typeahead-search-container,
.vector-search-box .cdx-typeahead-search,
.vector-search-box #searchform {
  width: 100% !important; min-width: 0; max-width: none !important;
  margin: 0 !important; padding: 0 !important; box-sizing: border-box;
}
.vector-search-box .vector-typeahead-search-container { display: block !important; }
.vector-search-box .cdx-typeahead-search { display: block; width: 100%; }
.vector-search-box .search-toggle { display: none; }
.vector-search-box .cdx-text-input__input {
  color: var(--elder-ink); background: #14232bd9; border-color: #8e805b;
  height: 40px; box-shadow: inset 0 1px 8px #0005;
}
.vector-search-box .cdx-text-input__input::placeholder { color: #a5b4bd; opacity: 1; }
.vector-search-box .cdx-search-input__end-button {
  background: #4c4837; color: #f1dfae; border-color: #8e805b; height: 40px;
}
.vector-search-box .cdx-text-input__start-icon { filter: invert(.8); }
.vector-user-links { position: absolute; right: -280px; top: -70px; }
.vector-main-menu-landmark { position: static; }
#vector-main-menu-dropdown {
  position: absolute; left: 24px; right: 24px; bottom: 0; width: auto; z-index: 4;
}
#vector-main-menu-dropdown { margin: 0 !important; box-sizing: border-box; }
#vector-main-menu-dropdown > .vector-dropdown-label { display: none; }
#vector-main-menu-dropdown > .vector-dropdown-checkbox { display: none; }
#vector-main-menu-dropdown > .vector-dropdown-content {
  display: block !important; visibility: visible !important; position: static;
  width: 100%; min-width: 0; max-width: none; max-height: none; overflow: visible;
  background: #1c2a32; border: 1px solid #80714f; border-bottom: 0;
  border-top: 3px solid #b8a16a; box-shadow: inset 0 1px #ffffff0c;
  opacity: 1 !important; transform: none !important; padding: 0 !important;
  margin: 0 !important; box-sizing: border-box;
  height: auto !important;
}
#vector-main-menu { display: block; background: transparent; width: 100%; height: auto !important; position: static !important; float: none; margin: 0; padding: 0; box-sizing: border-box; }
#p-navigation, #p-navigation .vector-menu-content { position: static; float: none; margin: 0; padding: 0; }
#vector-main-menu .vector-pinnable-header,
#vector-main-menu .vector-menu-heading,
#vector-main-menu .vector-menu:not(#p-navigation) { display: none; }
#p-navigation .vector-menu-content-list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0; margin: 0; padding: 0;
}
#p-navigation .mw-list-item { margin: 0; }
#p-navigation .mw-list-item a {
  display: block; padding: 12px 23px; color: #e0d3ae; font-size: 14px;
  border-right: 1px solid #8b7f5829;
}
#p-navigation .mw-list-item a:hover { background: #405052; text-decoration: none; }
.mw-page-container { padding: 26px 30px 0 !important; min-height: calc(100vh - 218px); }
.mw-page-container-inner {
  max-width: 1210px !important; margin: 0 auto; display: flow-root !important;
}
.vector-column-start { float: left; width: 175px; min-width: 0; }
.vector-column-start, #vector-toc-pinned-container { background: transparent; padding: 0; }
.vector-column-start .vector-sticky-pinned-container { padding: 0 !important; }
.mw-content-container { display: block; margin-left: 201px; min-width: 0; }
.vector-column-end { display: none; }
.mw-body {
  display: block !important;
  color: var(--elder-ink); padding: 24px 30px 30px; background: #24323bed;
  border: 1px solid var(--elder-line); box-shadow: 0 6px 30px #0004, inset 0 0 0 4px #121d2533;
}
.mw-body .vector-body { color: var(--elder-ink); font-size: 15px; line-height: 1.95; }
.mw-body-header { border-color: #a38b5c; margin-bottom: 0; }
.mw-body h1, .mw-body h2, .mw-body h3 {
  color: #ead3a1; font-family: Georgia, "SimSun", serif;
}
.mw-body h1 { font-size: 30px; letter-spacing: 1px; }
.mw-body h2 { font-size: 23px; margin-top: 26px; border-color: #9c895254; padding-bottom: 8px; }
.mw-body h3 { font-size: 18px; }
.mw-body .mw-heading2 { border-color: #9c895254; }
.vector-page-toolbar { margin-bottom: 18px; border-color: #8c795348; }
.vector-menu-tabs .mw-list-item a { color: #b8c7c8; font-size: 12px; }
.vector-menu-tabs .selected a { color: #f2deb0 !important; border-color: #d2b878; }
.vector-page-tools-dropdown .vector-dropdown-label { color: #bdc6c4; }
.vector-dropdown-content { background: #263640; color: var(--elder-ink); border-color: #837451; }
.vector-toc { background: #1c2a32c9; border: 1px solid #756d50; padding: 15px 13px; margin-top: 16px; }
#vector-toc { width: 175px !important; box-sizing: border-box; }
.vector-toc .vector-pinnable-header { border-color: #8c795348; color: #d8c291; }
.vector-toc .vector-pinnable-header-label { color: var(--elder-gold); }
.vector-toc .vector-toc-text { color: #a9c5c9; font-size: 12px; }
.vector-toc .vector-toc-list-item-active > a .vector-toc-text { color: #f6dfa6; }
.vector-pinnable-header-toggle-button { color: #abb8bd; background: transparent; }
.vector-icon { opacity: .82; }
.mw-body .wikitable { color: var(--elder-ink); background: #1b2b35; border-color: #72694d; }
.mw-body .wikitable th { background: #3b443f; color: #e5cfa0; border-color: #72694d; }
.mw-body .wikitable td { border-color: #6b695344; padding: 10px 14px; }
.mw-body .mw-parser-output > p { margin: 14px 0; }
.mw-body .mw-parser-output > p:last-child { color: #9aa8ac; font-size: 11px; }
.page-Game_职业 .mw-parser-output > p:first-child { display: none; }
.mw-footer-container, .mw-footer { background: transparent !important; }
.mw-footer-container { clear: both; }
.mw-footer { color: #9ca9ad; border-top: 1px solid #9e89514d; margin-top: 24px; padding: 22px 0; }
.mw-footer li { color: #98a8ab; font-size: 11px; }
/* 首页使用与文章一致的外壳，游戏标识只出现一次。 */
body.page-首页 .mw-page-container-inner { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "content" !important; }
body.page-首页 .vector-column-start { display: none; }
body.page-首页 .mw-content-container { margin-left: 0; }
body.page-首页 #toc { display: none; }
body.page-首页 .mw-body { padding: 16px 24px 24px; }
body.page-首页 .mw-body-header { display: none; }
body.page-首页 .vector-page-toolbar { margin-bottom: 14px; }
.elder-home { color: var(--elder-ink); }
.elder-welcome { padding: 8px 0 20px; border-bottom: 1px solid #ac94535c; }
.elder-home h2 { margin: 0 0 13px; font-size: 24px; }
.elder-home .mw-heading { margin-top: 0; margin-bottom: 12px; }
.elder-welcome p { font-size: 15px; line-height: 1.95; max-width: 940px; }
.elder-home .elder-section { margin-top: 20px; padding: 20px 22px; background: #1b2a32a8; border: 1px solid #786f51; }
.elder-home .elder-section h2 { font-size: 22px; margin: 0 0 18px; padding-bottom: 9px; }
.elder-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px; }
.elder-topic { display: flex; gap: 13px; align-items: center; min-height: 56px; }
.elder-topic .mw-file-element { width: 48px; height: 48px; image-rendering: pixelated; }
.elder-topic .mw-file-description { display: block; }
.elder-topic-text { font-size: 15px; }
.elder-topic small { display: block; color: #97abae; font-size: 11px; line-height: 1.7; margin-top: 2px; }
.elder-home-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.elder-home-columns .elder-section { padding: 18px 20px; }
.elder-home-columns p, .elder-home-columns li { font-size: 14px; }
.elder-home ul { margin-top: 0; }
.elder-classes { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 16px; font-size: 17px; }
.elder-classes a { color: #eddbad; }
.elder-smallprint { font-size: 11px; color: #9aabad; margin-top: 20px; }
/* 窄屏保留原生主菜单与搜索，正文重排为单栏。 */
@media (max-width: 1000px) {
  .vector-header-end { left: 305px; right: 260px; }
  .vector-user-links { right: -225px; }
  .vector-header { background-size: 205px auto; background-position: right 25px top 6px; }
  #p-navigation .mw-list-item a { padding-left: 15px; padding-right: 15px; }
  .mw-page-container-inner { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "content" !important; }
  .vector-column-start { display: none; }
  .mw-content-container { margin-left: 0; }
  .elder-home-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .vector-header { height: 276px; padding: 12px 16px 64px; background-size: 160px auto; background-position: right 6px top 4px; }
  .vector-header::after { width: 160px; height: 139px; right: 2px; top: 3px; }
  .mw-logo { width: 185px; height: 120px; background-size: 175px auto; background-position: left 10px; }
  .mw-logo::before { background-size: 175px auto; }
  .mw-logo::after { padding-top: 104px; font-size: 10px; letter-spacing: 1px; }
  .vector-header-end { top: 142px; left: 16px; right: 16px; }
  .vector-user-links { right: 0; top: -128px; font-size: 11px; }
  .vector-user-links .vector-dropdown-content { right: 0; left: auto; max-width: calc(100vw - 24px); }
  #vector-user-links-dropdown { margin-right: 0; }
  #vector-main-menu-dropdown { left: 0; right: 0; }
  #p-navigation .mw-list-item a { padding: 8px 14px; font-size: 12px; }
  .mw-page-container { padding: 16px 10px 0 !important; }
  .mw-body, body.page-首页 .mw-body { padding: 13px 14px 20px; }
  .mw-body .vector-body { font-size: 14px; }
  .mw-body h1 { font-size: 26px; }
  .vector-page-toolbar { flex-wrap: wrap; }
  .elder-home h2 { font-size: 22px; }
  .elder-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .elder-topic { gap: 9px; }
  .elder-topic .mw-file-element { width: 36px; height: 36px; }
  .elder-topic-text { font-size: 14px; }
  .elder-home-columns { grid-template-columns: 1fr; gap: 0; }
  .elder-home .elder-section { padding: 17px 14px; margin-top: 15px; }
  .elder-classes { font-size: 15px; justify-content: flex-start; gap: 12px 24px; }
  .mw-body .wikitable { display: block; overflow-x: auto; max-width: 100%; }
}
@media print {
  body.skin-vector-2022, .mw-body { color: #111; background: white !important; }
  body.skin-vector-2022::before, .vector-header-container { display: none; }
  .mw-body h1, .mw-body h2, .mw-body h3 { color: #111; }
}