MediaWiki:Common.css：修订间差异

2025年6月15日 (日) 00:10的最新版本

/* =========================================================
 * CSS 变量定义（主题无关设计）
 * ======================================================= */
:root {
  /* 滚动条颜色 */
  --otto-scrollbar-thumb: rgba(0,0,0,0.2);
  --otto-scrollbar-track: transparent;
  
  /* 导航框配色 */
  --otto-navbox-title-bg: #a5e4a5;
  --otto-navbox-subtitle-bg: #c0ecc0;
  --otto-navbox-subgroup-bg: #e6f6e6;
  --otto-navbox-even-bg: #f5fcf5;
  --otto-navbox-odd-bg: #fdfdfd;
  
  /* 通用间距 */
  --otto-spacing-xs: 4px;
  --otto-spacing-sm: 6px;
  --otto-spacing-md: 10px;
  --otto-spacing-lg: 1rem;
}

/* =========================================================
 * 字体声明
 * ======================================================= */
@font-face {
  font-family: "FOT-Rodin Pro";
  src: url("/resources/assets/FOT-Rodin Pro DB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "WenKai";
  src: url("/resources/assets/LXGWWenKai-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/resources/assets/Merriweather-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/resources/assets/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "WenKai Mono";
  src: url("/resources/assets/LXGWWenKaiMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
 * 全局滚动条样式
 * ======================================================= */
::-webkit-scrollbar {
  width: var(--otto-spacing-sm);
  height: var(--otto-spacing-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--otto-scrollbar-thumb);
  border-radius: calc(var(--otto-spacing-sm) / 2);
}

::-webkit-scrollbar-track {
  background: var(--otto-scrollbar-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--otto-scrollbar-thumb) var(--otto-scrollbar-track);
}

/* =========================================================
 * 编辑器样式
 * ======================================================= */
.wikiEditor-ui {
  font-family: "WenKai Mono", "JetBrains Mono", monospace !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-base, #1f1f1f);
  background-color: var(--background-color-neutral-subtle, #f9f9f9);
  border: 1px solid #ccc;
  padding: var(--otto-spacing-md);
  border-radius: var(--otto-spacing-sm);
  overflow: auto;
  tab-size: 4;
  white-space: pre;
  font-variant-ligatures: none;
}

/* =========================================================
 * 代码块样式
 * ======================================================= */
pre,
code,
.mw-code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95em;
  background-color: var(--background-color-neutral-subtle, #f9f9f9);
  color: var(--color-emphasized, #222);
  padding: var(--otto-spacing-xs) var(--otto-spacing-sm);
  border-radius: var(--otto-spacing-xs);
  overflow-x: auto;
}

/* =========================================================
 * 加载动画
 * ======================================================= */
#loadingIndicator img {
  animation: fadePulse 1s ease-in-out infinite;
  will-change: opacity;
}

@keyframes fadePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =========================================================
 * 扩展组件样式
 * ======================================================= */
/* 社交扩展 */
.visualClear {
  clear: both;
}

/* 子页面扩展 */
.subpageNavigation {
  background-color: color-mix(in srgb, var(--color-surface-2) 60%, transparent) !important;
}

/* 跨wiki链接 */
a.extiw:not([href*="wiki.ottohub.cn"]) {
  color: #00AF89 !important;
}
a.extiw:not([href*="wiki.ottohub.cn"]):hover {
  color: #00D7A8 !important;
}

/* 黑幕效果 */
body:not(.skin-citizen) .heimu,
body:not(.skin-citizen) .heimu rt {
  background-color: #252525;
  transition: color 0.13s linear;
  color: #252525;
  text-shadow: none;
}

body:not(.skin-citizen) .heimu a,
body:not(.skin-citizen) a .heimu,
body:not(.skin-citizen) a.new .heimu,
body:not(.skin-citizen) span.heimu a.new,
body:not(.skin-citizen) span.heimu a.external,
body:not(.skin-citizen) span.heimu a.extiw,
body:not(.skin-citizen) span.heimu a.mw-disambig,
body:not(.skin-citizen) span.heimu a.mw-redirect {
  color: #252525;
  text-shadow: none;
}

body:not(.skin-citizen) span.heimu:hover,
body:not(.skin-citizen) span.heimu:active {
  color: white;
}

body:not(.skin-citizen) span.heimu:hover a,
body:not(.skin-citizen) a:hover span.heimu {
  color: lightblue;
}

body:not(.skin-citizen) span.heimu:hover a:visited,
body:not(.skin-citizen) a:visited:hover span.heimu {
  color: #C5CAE9;
}

body:not(.skin-citizen) span.heimu:hover a.new,
body:not(.skin-citizen) a.new:hover span.heimu {
  color: #FCC;
}

/* =========================================================
 * 导航盒子 (Navbox)
 * ======================================================= */
table.navbox {
  border: 1px solid #aaa;
  clear: both;
  margin: auto;
  padding: 1px;
  text-align: center;
  width: 100%;
}

table.navbox + table.navbox {
  margin-top: -1px;
}

table.navbox th, 
table.navbox .navbox-title, 
table.navbox .navbox-abovebelow {
  padding: 0 1em;
  text-align: center;
}

table.navbox .navbox-group {
  font-weight: 700;
  white-space: nowrap;
}

.navbox, .navbox-subgroup {
  background: var(--otto-navbox-odd-bg);
}

.navbox-title, table.navbox th {
  background: var(--otto-navbox-title-bg);
}

.navbox-abovebelow, 
.navbox-group, 
.navbox-subgroup .navbox-title {
  background: var(--otto-navbox-subtitle-bg);
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
  background: var(--otto-navbox-subgroup-bg);
}

.navbox-even {
  background: var(--otto-navbox-even-bg);
}

/* =========================================================
 * 信息盒子 (Infobox)
 * ======================================================= */
.infoBox, .infoTop {
  margin: 0 auto;
  width: 80%;
  box-sizing: border-box;
}

.infoBox-Title, .infoTop-Title {
  margin: 3px auto;
  padding: 0;
  text-align: center;
  font-weight: 700;
}

.infoBox-Icon, .infoTop-Icon {
  display: table-cell;
  padding: 2px 0 2px 0.5em;
  vertical-align: middle;
}

.infoBox-Text, .infoTop-Text {
  display: table-cell;
  padding: 0.25em 0.5em 0.25em 1.3em;
  width: 100%;
  vertical-align: middle;
}

.infoBox-Below, .infoTop-Below {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.infoBoxContent {
  border: 1px solid var(--color-surface-1);
  border-left-width: 0;
  background: var(--color-surface-0);
}

.infoTopContent {
  border: 1px solid var(--color-surface-0);
  border-left-width: 0;
  background: var(--color-surface-2);
}

/* =========================================================
 * Infobox2 样式
 * ======================================================= */
table.infobox2 {
  font-size: 89%;
  text-align: center;
  width: 280px;
  max-width: 100%;
  float: right;
  background-color: var(--color-surface-1);
  color: var(--color-base);
  border-collapse: separate;
  border-spacing: 2px;
}

table.infobox2 .infobox2-header {
  background-color: var(--color-surface-4);
  color: var(--color-base);
  margin: 3px auto;
  padding: 0;
  text-align: center;
  font-weight: 700;
}

table.infobox2 .infobox2-subtitle {
  background-color: var(--color-surface-3);
  color: var(--color-base);
}

table.infobox2 .infobox2-row {
  width: 80px;
  background-color: var(--color-surface-2);
  color: var(--color-base);
}

/* =========================================================
 * 响应式设计
 * ======================================================= */
/* 设备差异显示 */
@media (max-width: 1119px) {
  .only-desktop { 
    display: none !important; 
  } 
}

@media (min-width: 1120px) {
  .only-mobile { 
    display: none !important; 
  } 
}

/* 移动端信息盒子适配 */
@media (max-width: 576px) {
  .mw-parser-output > * {
    float: unset !important;
  }
  
  .infotemplatebox,
  table.infobox,
  table.infobox2,
  table.infoboxSpecial,
  .infoTop {
    width: 100% !important;
    float: unset !important;
    margin: var(--otto-spacing-lg) 0 !important;
  }
}