MediaWiki:Common.css：修订间差异

2025年5月18日 (日) 14:39的版本

/* =========================================================
 *  自定义字体 —— @font-face
 * ======================================================= */

/* FOT-Rodin Pro（站点 Logo / 标题）*/
@font-face {
  font-family: "FOT-Rodin Pro";
  src: url("/resources/assets/FOT-Rodin Pro DB.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 霞鹜文楷 – 正文字体（中文）*/
@font-face {
  font-family: "WenKai";
  src: url("/resources/assets/LXGWWenKai-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Merriweather – 英文衬线 */
@font-face {
  font-family: "Merriweather";
  src: url("/resources/assets/Merriweather-Regular.woff2") format("woff2"),
       url("/resources/assets/Merriweather-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono – 等宽英文 */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/resources/assets/JetBrainsMono-Regular.woff2") format("woff2"),
       url("/resources/assets/JetBrainsMono-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 霞鹜文楷 Mono – 等宽中文 */
@font-face {
  font-family: "WenKai Mono";
  src: url("/resources/assets/LXGWWenKaiMono-Regular.woff2") format("woff2"),
       url("/resources/assets/LXGWWenKaiMono-Regular.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
 *  正文阅读排版
 * ======================================================= */

body,
#mw-content-text,
.mw-body-content {
  font-family: "WenKai", "Merriweather", serif, "Songti SC", "Noto Serif CJK SC";
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-base, #fff);
  word-break: break-word;
  overflow-wrap: break-word;      /* 旧 Safari / Edge */
  text-rendering: optimizeLegibility;
}

/* =========================================================
 *  站点页眉 / LOGO（Vector 皮肤）
 * ======================================================= */

.vector-page-titlebar {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  background-color: rgba(var(--background-color-rgb), 0.9); /* 会被后文 CSS 变量覆盖 */
  border-radius: 4px 4px 0 0;
  padding: 12px 14px;
}

.vector-sticky-pinned-container {
  overflow: hidden auto;
  position: sticky;
  margin: 24px 0 0 12px;
  box-sizing: border-box;
  max-height: calc(100vh - 48px);
  padding-top: 16px;
  background-color: var(--background-color-base);
  border-radius: 5px;
}

.vector-pinned-container {
  background-color: var(--background-color-base, #fff);
  padding: 0 16px;
}

.skin-vector .mw-header {
  background-image: url("https://wiki.ottohub.cn/images/a/a9/Th20_Front00.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.mw-page-container {
  background-image: url("https://wiki.ottohub.cn/images/b/b8/Th20_eff_switchbg.png");
}

#bodyContent {
  background-color: rgba(var(--background-color-rgb), 0.9);
  padding: 16px;
  padding-bottom: 2px;
  border-radius: 0 0 4px 4px;
}

.vector-page-toolbar {
  min-height: 5px;
  background-color: rgba(var(--background-color-rgb), 0.9);
  padding: 0 12px;
}

.vector-pinned-container,
.vector-column-end {
  border-radius: 5px;
}

#vector-main-menu-pinned-container {
  right: 12px;
  padding: 16px 0 8px;
  background-color: var(--background-color-base);
}

.skin-vector .mw-logo {
  background-color: rgba(255, 255, 255, 0.60);
  border-radius: 4px;
  padding: 0 20px 0 10px;
}

.skin-vector .mw-body-header,
#p-logo-text,
.vector-header {
  font-family: "FOT-Rodin Pro", "WenKai", serif;
  font-weight: bold;
}

.cn-notice,
.cn-contents {
  background-color: rgba(var(--background-color-rgb), 0.80);
  border-radius: 4px;
}

/* =========================================================
 *  搜索框（Vector & Monobook）
 * ======================================================= */

input[type="search"],
input[type="text"],
.vector-search-box-input,
#searchInput {
  font-family: "WenKai", serif;   /* 只用一种字体避免中英割裂 */
  font-size: 14px;                /* 不要太大，防止高度被裁 */
  line-height: 1;                 /* 光标垂直居中 */
}

#searchInput::placeholder,
.vector-search-box-input::placeholder {
  font-family: "WenKai", serif;
  color: #999;
}

/* =========================================================
 *  编辑器（WikiEditor / CodeMirror）
 * ======================================================= */

.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: 10px;
  border-radius: 6px;
  overflow: auto;
  tab-size: 4;
  white-space: pre;
  font-variant-ligatures: none;
}

/* =========================================================
 *  <pre> / <code> / .mw-code
 * ======================================================= */

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: 4px 6px;
  border-radius: 4px;
  overflow-x: auto;
}

/* =========================================================
 *  分类栏、注释脚注
 * ======================================================= */

.catlinks,
.mw-references {
  font-size: 0.9em;
  opacity: 0.85;
}

/* =========================================================
 *  加载动画
 * ======================================================= */

#loadingIndicator img {
  animation: fadePulse 1s ease-in-out infinite;
  will-change: opacity;
}

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

/* =========================================================
 *  全局细线滚动条样式
 * ======================================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
/* Firefox 支持 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* =========================================================
 *  ✨ 动画增强
 * ======================================================= */

/* 页眉一次性滑入 */
@keyframes slideDown { 
  0%{transform:translateY(-24px);opacity:0;}
 100%{transform:translateY(0);opacity:1;}
}
.vector-page-titlebar { animation: slideDown .6s cubic-bezier(.25,.8,.25,1) both; }

/* 侧栏一次性淡入平移 */
@keyframes fadeSlide{
  0%{transform:translateX(-10px);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}
.vector-sticky-pinned-container{ animation: fadeSlide .5s ease-out both; }

/* LOGO 悬停小摇 */
@keyframes waggle{
   0%{transform:rotate(0deg);}
  20%{transform:rotate(6deg);}
  50%{transform:rotate(-6deg);}
  80%{transform:rotate(4deg);}
 100%{transform:rotate(0deg);}
}
.skin-vector .mw-logo{ transition:transform .25s ease; }
.skin-vector .mw-logo:hover{ animation:waggle .8s ease-in-out; }

/* 链接下划线滑出 */
a{
  position:relative;
  color:var(--color-link,#7aa8ff);
  text-decoration:none;
  transition:color .2s;
}
a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s;
}
a:hover::after{ transform:scaleX(1); }

/* 滚动条滑块呼吸（hover） */
@keyframes thumbPulse{
  from{background:rgba(0,0,0,.2);}
  to  {background:rgba(0,0,0,.35);}
}
::-webkit-scrollbar-thumb:hover{ animation:thumbPulse 1.2s infinite alternate; }
*{ scrollbar-color:rgba(0,0,0,.25) transparent; } /* Firefox 同步 */

/* =========================================================
 *  🌙 默认降亮（轻暗），以及深暗模式
 * ======================================================= */

/* 设定全站背景透明度变量，默认轻暗 0.72 */
:root{ --dim-bg-alpha: .72; }

/* 会受透明度影响的主要容器 */
.vector-page-titlebar,
#bodyContent,
.vector-page-toolbar,
.vector-sticky-pinned-container,
.cn-notice,
.cn-contents{
  background-color:rgba(var(--background-color-rgb), var(--dim-bg-alpha))!important;
}

/* 字/链接颜色轻柔一点 */
body,#mw-content-text,.mw-body-content{ color:rgba(255,255,255,.85); }
a{ color:#7aa8ff; }

/* 滚动条颜色也同步柔和 */
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }
*{ scrollbar-color:rgba(255,255,255,.25) transparent; }

/* 深暗模式（Alt+L 开关） */
body.is-dimmed .vector-page-titlebar,
body.is-dimmed #bodyContent,
body.is-dimmed .vector-page-toolbar,
body.is-dimmed .vector-sticky-pinned-container,
body.is-dimmed .cn-notice,
body.is-dimmed .cn-contents{
  background-color:rgba(var(--background-color-rgb), .60)!important;
}
body.is-dimmed{ color:rgba(255,255,255,.78); }
body.is-dimmed a{ color:#8faeff; }