MediaWiki:Common.css:修订间差异
外观
第1行: | 第1行: | ||
/* | /****************************************************************** | ||
* | * MediaWiki:Common.css (last update: 2024-06-XX) | ||
* | * – 自定义字体、基础排版、动画、轻暗模式 | ||
******************************************************************/ | |||
/* | /* ------------------------------ @font-face ------------------ */ | ||
@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;} | |||
} | |||
@font-face { | |||
} | |||
@font-face { | |||
} | |||
@font-face { | |||
} | |||
@font-face { | |||
} | |||
. | /* ------------------------------ 基础排版 --------------------- */ | ||
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 页眉 ------------------ */ | ||
.vector-page-titlebar{ | |||
border-radius: | 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; | |||
background-color: | |||
} | } | ||
.skin-vector .mw-body-header,#p-logo-text,.vector-header{ | |||
.skin-vector .mw-logo { | font-family:"FOT-Rodin Pro","WenKai",serif;font-weight:bold; | ||
} | } | ||
/* ------------------------------ 侧栏 ------------------------- */ | |||
.vector-sticky-pinned-container{ | |||
.vector- | 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); | |||
background-color: rgba(var(--background-color-rgb), 0. | padding:16px 16px 2px;border-radius:0 0 4px 4px; | ||
border-radius: 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; | |||
input[type="search"], | |||
input[type="text"], | |||
.vector-search-box-input, | |||
#searchInput { | |||
font-family: "WenKai", serif; | |||
} | } | ||
#searchInput::placeholder,.vector-search-box-input::placeholder{color:#999;} | |||
/* ------------------------------ 编辑器/代码块 --------------- */ | |||
. | .wikiEditor-ui{ | ||
font-family: "WenKai", | font-family:"WenKai Mono","JetBrains Mono",monospace !important;font-size:14px; | ||
color: # | 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; | |||
. | |||
font-family: | |||
padding: | |||
} | } | ||
/* | /* ------------------------------ 分类/脚注 -------------------- */ | ||
* | .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;} | |||
} | |||
@keyframes | /* 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, | ||
background: | #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);} | |||
a:hover::after{ transform:scaleX(1); } | |||
/* 滚动条滑块呼吸(hover) */ | /* 5. 滚动条滑块呼吸(hover)*/ | ||
@keyframes thumbPulse{ | @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一致*/ | |||
} | |||
::-webkit-scrollbar-thumb:hover{ animation:thumbPulse 1.2s infinite alternate; } | |||
*{ scrollbar-color:rgba(0,0,0,.25) transparent; } /* | |||
/* ========================================================= | /* ============================================================ | ||
* | * 🌙 轻 暗 / 深 暗 模式 | ||
* ======================================================= */ | * ============================================================ */ | ||
/* | /* 轻暗:默认开启 */ | ||
:root{ --dim-bg-alpha: .72; } | :root{--dim-bg-alpha:.72;} /* 改这里即可再调亮/暗 */ | ||
.vector-page-titlebar, | .vector-page-titlebar, | ||
#bodyContent, | #bodyContent, | ||
第321行: | 第121行: | ||
.cn-notice, | .cn-notice, | ||
.cn-contents{ | .cn-contents{ | ||
background-color:rgba(var(--background-color-rgb), var(--dim-bg-alpha))!important; | 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); } | body,#mw-content-text,.mw-body-content{color:rgba(255,255,255,.85);} | ||
a{ color:#7aa8ff; } | .mw-body-content a,#bodyContent a{color:#7aa8ff;} | ||
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);} | |||
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); } | *{scrollbar-color:rgba(255,255,255,.25) transparent;} | ||
*{ scrollbar-color:rgba(255,255,255,.25) transparent; } | |||
/* | /* 深暗:由 JS 切换 .is-dimmed 类名 */ | ||
body.is-dimmed .vector-page-titlebar, | body.is-dimmed .vector-page-titlebar, | ||
body.is-dimmed #bodyContent, | body.is-dimmed #bodyContent, | ||
第339行: | 第138行: | ||
body.is-dimmed .cn-notice, | body.is-dimmed .cn-notice, | ||
body.is-dimmed .cn-contents{ | body.is-dimmed .cn-contents{ | ||
background-color:rgba(var(--background-color-rgb), .60)!important; | background-color:rgba(var(--background-color-rgb),.60)!important; | ||
} | } | ||
body.is-dimmed{ color:rgba(255,255,255,.78); } | body.is-dimmed{color:rgba(255,255,255,.78);} | ||
body.is-dimmed a{ color:#8faeff; } | body.is-dimmed .mw-body-content a, | ||
body.is-dimmed #bodyContent a{color:#8faeff;} |
2025年5月18日 (日) 14:42的版本
/****************************************************************** * 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;}