跳转到内容

MediaWiki:Common.css：修订间差异

来自电棍ottowiki
←上一编辑下一编辑→
琪露若
琪露若​（留言 | 贡献） （// Edit via Wikiplus）
棍牧典
棍牧典​（留言 | 贡献） （// Edit via Wikiplus）
第253行： 第253行：
   scrollbar-width: thin;              /* 滚动条宽度 */
   scrollbar-width: thin;              /* 滚动条宽度 */
   scrollbar-color: rgba(0,0,0,0.2) transparent; /* 滚动条颜色 */
   scrollbar-color: rgba(0,0,0,0.2) transparent; /* 滚动条颜色 */
}
/* =========================================================
* ✨ 1. 页眉滑入动画（一次性，进站更灵动）
* ======================================================= */
@keyframes slideDown {
  0%  { transform: translateY(-24px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.vector-page-titlebar {
  animation: slideDown 0.6s cubic-bezier(.25,.8,.25,1) both;
}
/* =========================================================
* ✨ 2. LOGO 轻摇（Hover 交互）
* ======================================================= */
@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 0.8s ease-in-out;
}
/* =========================================================
* ✨ 3. 链接「下划线滑出」效果
* ======================================================= */
a {
  position: relative;
  color: var(--color-link,#0077ff);
  text-decoration: none;            /* 干掉原生下划线 */
  transition: color .2s ease;
}
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 ease-out;
}
a:hover::after {
  transform: scaleX(1);
}
/* =========================================================
* ✨ 4. 侧栏 / 固定菜单淡入平移
* ======================================================= */
@keyframes fadeSlide {
  0%  { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}
.vector-sticky-pinned-container {
  animation: fadeSlide .5s ease-out both;
}
/* =========================================================
* ✨ 5. 滚动条滑块呼吸（鼠标悬停才触发，性能友好）
* ======================================================= */
@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;
}
/* Firefox 同步风格 */
* {
  scrollbar-color: rgba(0,0,0,.25) transparent;
}
}

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

/* =========================================================
 * @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);
  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);
    border-radius: 4px 4px 0 0;
    padding-top: 12px;
    padding-left: 14px;
    padding-bottom: 12px;
}
.vector-sticky-pinned-container {
    overflow: hidden auto;
    position: sticky;
    margin-top: 24px;
    margin-left: 12px;
    box-sizing: border-box;
    max-height: calc(100vh - (24px * 2));
    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;
    margin-bottom: 0em;
}
.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-right:16px;
	padding-left:16px;
        padding-top: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-right:12px;
	padding-left:12px;
}
.vector-pinned-container,.vector-column-end{
	border-radius: 5px;
}
#vector-main-menu-pinned-container {
    right: 12px;
    padding-top: 16px;
    padding-bottom: 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 {
  background-color: rgba(var(--background-color-rgb), 0.80);
  border-radius: 4px;
}

.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; /* 滚动条颜色 */
}
/* =========================================================
 * ✨ 1. 页眉滑入动画（一次性，进站更灵动）
 * ======================================================= */
@keyframes slideDown {
  0%   { transform: translateY(-24px); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
.vector-page-titlebar {
  animation: slideDown 0.6s cubic-bezier(.25,.8,.25,1) both;
}

/* =========================================================
 * ✨ 2. LOGO 轻摇（Hover 交互）
 * ======================================================= */
@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 0.8s ease-in-out;
}

/* =========================================================
 * ✨ 3. 链接「下划线滑出」效果
 * ======================================================= */
a {
  position: relative;
  color: var(--color-link,#0077ff);
  text-decoration: none;             /* 干掉原生下划线 */
  transition: color .2s ease;
}
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 ease-out;
}
a:hover::after {
  transform: scaleX(1);
}

/* =========================================================
 * ✨ 4. 侧栏 / 固定菜单淡入平移
 * ======================================================= */
@keyframes fadeSlide {
  0%   { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}
.vector-sticky-pinned-container {
  animation: fadeSlide .5s ease-out both;
}

/* =========================================================
 * ✨ 5. 滚动条滑块呼吸（鼠标悬停才触发，性能友好）
 * ======================================================= */
@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;
}

/* Firefox 同步风格 */
* {
  scrollbar-color: rgba(0,0,0,.25) transparent;
}
检索自“https://wiki.ottohub.cn/index.php?title=MediaWiki:Common.css&oldid=5874”