跳转到内容

MediaWiki:Common.css

来自电棍ottowiki
棍牧典​（留言 | 贡献）2025年5月18日 (日) 14:42的版本 （// Edit via Wikiplus）

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
  • Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
  • Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/******************************************************************
 *  MediaWiki:Common.css   (last update: 2024-06-XX)
 *  – 自定义字体、基础排版、动画、轻暗模式
 ******************************************************************/

/* ------------------------------  @font-face  ------------------ */
@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;}
@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;}
@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;}
@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;text-rendering:optimizeLegibility;
}

/* ------------------------------  Vector 页眉 ------------------ */
.vector-page-titlebar{
  position:relative;display:flex;align-items:center;justify-content:flex-end;
  background-color:rgba(var(--background-color-rgb),0.9);
  border-radius:4px 4px 0 0;padding:12px 14px;
}
.skin-vector .mw-logo{
  background-color:rgba(255,255,255,.6);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;
}

/* ------------------------------  侧栏 ------------------------- */
.vector-sticky-pinned-container{
  overflow:hidden auto;position:sticky;margin:24px 0 0 12px;
  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;}
#bodyContent{
  background-color:rgba(var(--background-color-rgb),0.9);
  padding:16px 16px 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;}

/* ------------------------------  搜索框 ----------------------- */
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{color:#999;}

/* ------------------------------  编辑器/代码块 --------------- */
.wikiEditor-ui{
  font-family:"WenKai Mono","JetBrains Mono",monospace !important;font-size:14px;
  line-height:1.6;color:var(--color-base,#1f1f1f);background:#f9f9f9;
  border:1px solid #ccc;padding:10px;border-radius:6px;overflow:auto;tab-size:4;
}
pre,code,.mw-code{
  font-family:"JetBrains Mono",monospace;font-size:.95em;background:#f9f9f9;color:#222;
  padding:4px 6px;border-radius:4px;overflow-x:auto;
}

/* ------------------------------  分类/脚注 -------------------- */
.catlinks,.mw-references{font-size:.9em;opacity:.85;}

/* ------------------------------  加载指示器 ------------------ */
#loadingIndicator img{animation:fadePulse 1s ease-in-out infinite;will-change:opacity;}
@keyframes fadePulse{0%{opacity:1;}50%{opacity:.5;}100%{opacity:1;}}

/* ------------------------------  滚动条 ----------------------- */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px;}
*{scrollbar-width:thin;scrollbar-color:rgba(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 .6s cubic-bezier(.25,.8,.25,1) both;}

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

/* 3. 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;}

/* 4. 正文区内链接下划线滑出（不碰到工具栏/侧边栏链接）*/
.mw-body-content a,
#bodyContent a{
  position:relative;color:var(--color-link,#7aa8ff);text-decoration:none;transition:color .2s;
}
.mw-body-content a::after,
#bodyContent 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;
}
.mw-body-content a:hover::after,
#bodyContent a:hover::after{transform:scaleX(1);}

/* 5. 滚动条滑块呼吸（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一致*/

/* ============================================================
 *                 🌙  轻  暗  /  深  暗  模式
 * ============================================================ */

/* 轻暗：默认开启 */
: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);}
.mw-body-content a,#bodyContent a{color:#7aa8ff;}

::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);}
*{scrollbar-color:rgba(255,255,255,.25) transparent;}

/* 深暗：由 JS 切换 .is-dimmed 类名 */
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 .mw-body-content a,
body.is-dimmed #bodyContent a{color:#8faeff;}
检索自“https://wiki.ottohub.cn/index.php?title=MediaWiki:Common.css&oldid=5885”