MediaWiki:Vector.css
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 Ctrl-F5。
```css
/* =========================================================
Griffin Wiki
MediaWiki:Vector.css
Vector 2022 Complete Visual Enhancement
---------------------------------------------------------
White UI / Animation / Sidebar / Header / Main Page
========================================================= */
/* =========================================================
01. GLOBAL BASE
========================================================= */
html {
scroll-behavior: smooth;
}
body {
background: #ffffff !important;
color: #202122 !important;
}
```css
/* =========================================================
Vector 2022 - 功能栏点击上滑效果
========================================================= */
/* 右侧功能栏按钮 */
.vector-header-end .vector-dropdown-label {
transition:
transform 0.16s ease,
background-color 0.18s ease;
}
/* 鼠标悬停 */
.vector-header-end .vector-dropdown-label:hover {
transform: translateY(-1px);
}
/* 点击 / 选中瞬间 */
.vector-header-end .vector-dropdown-label:active {
transform: translateY(-3px);
}
/* 如果菜单处于展开状态，让按钮保持轻微上移 */
.vector-header-end .vector-dropdown[aria-expanded="true"]
.vector-dropdown-label {
transform: translateY(-2px);
}
```
/* =========================================================
02. VECTOR 2022 HEADER
========================================================= */
.vector-header-container {
background: #ffffff !important;
border-bottom: 1px solid #eaecf0;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.vector-header-container:hover {
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.055);
}
/* =========================================================
03. PAGE ENTER ANIMATION
---------------------------------------------------------
只淡入，不使用 translateY，
防止页面进入时出现“向下移动”的感觉。
========================================================= */
.mw-page-container,
.mw-content-container {
animation:
griffinPageFade 0.3s ease-out;
}
@keyframes griffinPageFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 防止动画导致页面整体位移 */
.mw-page-container,
.mw-content-container,
.vector-body {
transform: none;
}
/* =========================================================
04. GLOBAL TRANSITIONS
========================================================= */
a,
button,
input,
select,
textarea,
.mw-ui-button,
.vector-menu-heading,
.vector-pinnable-element,
.infobox,
.thumbinner {
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.25s ease,
transform 0.2s ease,
opacity 0.2s ease;
}
/* =========================================================
05. LINKS
========================================================= */
a {
color: #3366cc;
}
a:visited {
color: #6b5cff;
}
a:hover {
color: #2956b8;
}
.mw-parser-output a:hover {
text-decoration: underline;
}
/* =========================================================
06. BUTTONS
========================================================= */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.mw-ui-button:hover {
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.08);
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
.mw-ui-button:active {
transform: scale(0.97);
}
/* =========================================================
07. LEFT SIDEBAR
========================================================= */
.vector-sidebar {
background: #fbfbfb !important;
border-right: 1px solid #eaecf0;
}
/* Sidebar 模块 */
.vector-sidebar .vector-pinnable-element {
border-radius: 8px;
transition:
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.vector-sidebar .vector-pinnable-element:hover {
background:
rgba(51, 102, 255, 0.025);
}
/* Sidebar 标题 */
.vector-sidebar .vector-menu-heading {
cursor: pointer;
border-radius: 6px;
transition:
background-color 0.2s ease,
color 0.2s ease,
padding-left 0.2s ease;
}
.vector-sidebar .vector-menu-heading:hover {
background:
rgba(51, 102, 255, 0.06);
}
/* Sidebar 链接 */
.vector-sidebar a:hover {
padding-left: 4px;
}
/* =========================================================
08. SIDEBAR EXPAND / COLLAPSE
========================================================= */
/*
不使用 display:none / visibility:hidden，
避免破坏 Vector 2022 原本的菜单控制逻辑。
*/
.vector-sidebar
.vector-pinnable-element
.vector-menu-content {
overflow: hidden;
transition:
max-height 0.35s ease,
opacity 0.25s ease,
transform 0.25s ease;
}
/* 展开状态 */
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content {
opacity: 1;
transform: translateY(0);
}
/* Sidebar 菜单项目 */
.vector-sidebar
.vector-pinnable-element
.vector-menu-content li {
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
/* 展开后的轻微滑入 */
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li {
opacity: 1;
transform: translateX(0);
}
/* Stagger */
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li:nth-child(1) {
transition-delay: 0.02s;
}
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li:nth-child(2) {
transition-delay: 0.04s;
}
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li:nth-child(3) {
transition-delay: 0.06s;
}
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li:nth-child(4) {
transition-delay: 0.08s;
}
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li:nth-child(5) {
transition-delay: 0.10s;
}
.vector-sidebar
.vector-pinnable-element.vector-menu-open
.vector-menu-content li:nth-child(6) {
transition-delay: 0.12s;
}
/* =========================================================
09. LOGO LEFT MAIN MENU
========================================================= */
/*
Logo 左侧的主菜单按钮。
不改变 MediaWiki 原本的显示机制。
*/
.vector-header-start button,
.vector-header-start .mw-ui-icon {
transition:
transform 0.15s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.vector-header-start button:hover {
transform: scale(1.04);
}
.vector-header-start button:active {
transform: scale(0.92);
}
/* 主菜单 */
.vector-main-menu,
#vector-main-menu,
#vector-main-menu-dropdown {
transform-origin: top left;
transition:
opacity 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
/* 已知的打开状态 */
.vector-main-menu--open,
.vector-main-menu.vector-menu-open,
#vector-main-menu-dropdown.vector-menu-open {
opacity: 1;
transform:
translateY(0)
scale(1);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.10);
}
/* 主菜单项目 */
.vector-main-menu a,
#vector-main-menu a {
transition:
color 0.18s ease,
background-color 0.18s ease,
transform 0.18s ease;
}
.vector-main-menu a:hover,
#vector-main-menu a:hover {
transform: translateX(3px);
}
/* =========================================================
10. RIGHT HEADER CONTROLS
========================================================= */
/*
Vector 2022 右侧通常包括：
- 搜索
- 用户菜单
- 外观
- 工具
- 更多
这里只做视觉反馈，不接管菜单的 display 状态。
*/
.vector-header-end button,
.vector-header-end .vector-dropdown-label {
transition:
transform 0.12s ease,
background-color 0.18s ease,
box-shadow 0.18s ease,
color 0.18s ease;
}
/* Hover */
.vector-header-end button:hover,
.vector-header-end .vector-dropdown-label:hover {
background:
rgba(51, 102, 255, 0.055);
border-radius: 6px;
}
/* 点击 */
.vector-header-end button:active,
.vector-header-end .vector-dropdown-label:active {
transform: scale(0.94);
}
/* =========================================================
11. RIGHT DROPDOWN MENUS
========================================================= */
/*
重点：
不使用 opacity:0 或 pointer-events:none
去强制隐藏菜单。
MediaWiki 自己负责打开 / 关闭。
CSS 只负责打开后的视觉动画。
*/
.vector-dropdown-content {
transform-origin: top right;
transition:
transform 0.18s ease,
opacity 0.18s ease,
box-shadow 0.2s ease;
}
/* Vector Dropdown 打开 */
.vector-dropdown.vector-dropdown--open
.vector-dropdown-content {
transform:
translateY(0)
scale(1);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.12);
}
/* Dropdown 内容 */
.vector-dropdown-content .mw-list-item a {
transition:
background-color 0.16s ease,
color 0.16s ease,
padding-left 0.16s ease;
}
/* Dropdown Hover */
.vector-dropdown-content .mw-list-item a:hover {
background:
rgba(51, 102, 255, 0.06);
padding-left: 4px;
}
/* =========================================================
12. VECTOR POPUPS
========================================================= */
.vector-popup {
transition:
opacity 0.18s ease,
transform 0.18s ease,
box-shadow 0.2s ease;
}
/* =========================================================
13. MAIN HEADING
========================================================= */
.mw-first-heading {
position: relative;
padding-bottom: 10px;
animation:
griffinTitleFade 0.45s ease-out;
}
@keyframes griffinTitleFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 标题底部渐变线 */
.mw-first-heading::after {
content: "";
display: block;
width: 60px;
height: 3px;
margin-top: 8px;
border-radius: 3px;
background:
linear-gradient(
90deg,
#3366ff,
#6f7cff,
#ff4fa3
);
transform-origin: left;
animation:
griffinTitleLine 0.55s ease-out;
}
@keyframes griffinTitleLine {
from {
width: 0;
opacity: 0;
}
to {
width: 60px;
opacity: 1;
}
}
/* =========================================================
14. SECTION HEADINGS
========================================================= */
.mw-parser-output h2 {
position: relative;
animation:
griffinSectionFade 0.3s ease-out;
}
@keyframes griffinSectionFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* H2 左侧装饰条 */
.mw-parser-output h2::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 3px;
height: 16px;
border-radius: 3px;
background: #3366ff;
transform:
translateY(-50%)
scaleY(0);
transform-origin: center;
animation:
griffinHeadingBar 0.4s ease-out forwards;
}
@keyframes griffinHeadingBar {
to {
transform:
translateY(-50%)
scaleY(1);
}
}
/* =========================================================
15. INFOBOX
========================================================= */
.infobox {
position: relative;
overflow: hidden;
background: #f8f9fa !important;
border: 1px solid #c8ccd1;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* Hover */
.infobox:hover {
transform: translateY(-2px);
border-color:
#b8c2d9;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.10);
}
/* 顶部扫描线 */
.infobox::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 200%;
height: 2px;
background:
linear-gradient(
90deg,
transparent,
rgba(51, 102, 255, 0.25),
rgba(255, 79, 163, 0.25),
transparent
);
animation:
griffinScanline 5s linear infinite;
}
@keyframes griffinScanline {
from {
transform: translateX(0);
}
to {
transform: translateX(50%);
}
}
/* =========================================================
16. IMAGES
========================================================= */
.thumbinner {
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.thumbinner:hover {
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.08);
}
.thumbinner img {
transition:
transform 0.25s ease;
}
.thumbinner img:hover {
transform: scale(1.02);
}
/* =========================================================
17. LIST INTERACTION
========================================================= */
.mw-parser-output li {
transition:
transform 0.15s ease;
}
.mw-parser-output li:hover {
transform:
translateX(2px);
}
/* =========================================================
18. INPUT / SEARCH
========================================================= */
input,
textarea,
select {
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
input:focus,
textarea:focus,
select:focus {
border-color:
#3366cc;
box-shadow:
0 0 0 2px rgba(51, 102, 204, 0.12);
outline: none;
}
/* =========================================================
19. MAIN PAGE
========================================================= */
/*
以下仅作用于：
Main Page
配合主页中的：
<div class="mainpage-banner">
...
</div>
*/
body.page-Main_Page .mw-body {
max-width: 1200px;
}
/* =========================================================
20. MAIN PAGE HERO BANNER
========================================================= */
body.page-Main_Page .mainpage-banner {
position: relative;
overflow: hidden;
margin:
10px 0 30px;
padding:
70px 30px;
min-height:
220px;
display:
flex;
flex-direction:
column;
justify-content:
center;
align-items:
center;
text-align:
center;
color:
#ffffff !important;
border-radius:
12px;
background:
#1f2a44;
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.12);
}
/* =========================================================
21. MAIN PAGE HERO IMAGE
========================================================= */
/*
========================================================
请修改这里
========================================================
将下面：
https://example.com/your-banner.jpg
换成你的 Wiki 横幅图片 URL。
*/
body.page-Main_Page .mainpage-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image:
url("https://example.com/your-banner.jpg");
background-size:
cover;
background-position:
center;
background-repeat:
no-repeat;
filter:
brightness(0.72);
transform:
scale(1.03);
transition:
transform 8s ease;
}
/* Banner Hover */
body.page-Main_Page .mainpage-banner:hover::before {
transform:
scale(1.07);
}
/* =========================================================
22. HERO DARK OVERLAY
========================================================= */
body.page-Main_Page .mainpage-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
180deg,
rgba(15, 25, 55, 0.28),
rgba(15, 25, 55, 0.62)
);
pointer-events:
none;
}
/* Hero 内容位于图片上方 */
body.page-Main_Page .mainpage-banner > * {
position:
relative;
z-index:
2;
}
/* =========================================================
23. HERO TITLE
========================================================= */
body.page-Main_Page .mainpage-banner h1 {
margin:
0 0 12px;
font-size:
2.8em;
font-weight:
700;
letter-spacing:
1px;
color:
#ffffff !important;
text-shadow:
0 2px 12px rgba(0, 0, 0, 0.55);
animation:
griffinHeroTitle 0.7s ease-out;
}
@keyframes griffinHeroTitle {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Hero 副标题 */
body.page-Main_Page .mainpage-banner em,
body.page-Main_Page .mainpage-banner p {
color:
rgba(255, 255, 255, 0.90) !important;
text-shadow:
0 1px 8px rgba(0, 0, 0, 0.4);
}
/* =========================================================
24. MAIN PAGE INTRO
========================================================= */
body.page-Main_Page .mainpage-intro {
max-width:
900px;
margin:
0 auto 30px;
padding:
20px 24px;
background:
#f8f9fa;
border:
1px solid #eaecf0;
border-radius:
10px;
line-height:
1.8;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.04);
animation:
griffinIntroFade 0.5s ease-out;
}
@keyframes griffinIntroFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* =========================================================
25. MAIN PAGE MODULES
========================================================= */
body.page-Main_Page .mainpage-module {
background:
#ffffff;
border:
1px solid #eaecf0;
border-radius:
10px;
padding:
18px 20px;
margin-bottom:
18px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.035);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* Module Hover */
body.page-Main_Page .mainpage-module:hover {
transform:
translateY(-3px);
border-color:
#d5daf0;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.08);
}
/* Module 标题 */
body.page-Main_Page .mainpage-module h2 {
margin-top:
0;
padding-bottom:
8px;
border-bottom:
1px solid #eaecf0;
}
/* =========================================================
26. MAIN PAGE TWO COLUMNS
========================================================= */
body.page-Main_Page .mainpage-columns {
display:
flex;
align-items:
flex-start;
gap:
18px;
}
body.page-Main_Page .mainpage-left {
flex:
2;
min-width:
0;
}
body.page-Main_Page .mainpage-right {
flex:
1;
min-width:
0;
}
/* =========================================================
27. MAIN PAGE LIST
========================================================= */
body.page-Main_Page .mainpage-module li {
margin-bottom:
6px;
transition:
transform 0.15s ease;
}
body.page-Main_Page .mainpage-module li:hover {
transform:
translateX(3px);
}
/* =========================================================
28. MAIN PAGE LINKS
========================================================= */
body.page-Main_Page a {
color:
#3366cc;
}
body.page-Main_Page a:hover {
color:
#2956b8;
text-decoration:
underline;
}
/* =========================================================
29. RESPONSIVE - TABLET
========================================================= */
@media (max-width: 900px) {
body.page-Main_Page .mainpage-columns {
flex-direction:
column;
}
body.page-Main_Page .mainpage-left,
body.page-Main_Page .mainpage-right {
width:
100%;
}
body.page-Main_Page .mainpage-banner {
min-height:
180px;
padding:
50px 20px;
}
body.page-Main_Page .mainpage-banner h1 {
font-size:
2.2em;
}
}
/* =========================================================
30. RESPONSIVE - MOBILE
========================================================= */
@media (max-width: 640px) {
.mw-content-container {
padding-left:
12px;
padding-right:
12px;
}
body.page-Main_Page .mainpage-banner {
margin:
5px 0 20px;
border-radius:
8px;
min-height:
160px;
padding:
40px 15px;
}
body.page-Main_Page .mainpage-banner h1 {
font-size:
1.9em;
letter-spacing:
0.5px;
}
body.page-Main_Page .mainpage-module {
padding:
15px;
}
}
/* =========================================================
31. ACCESSIBILITY / REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior:
auto;
}
*,
*::before,
*::after {
animation-duration:
0.001ms !important;
animation-iteration-count:
1 !important;
transition-duration:
0.001ms !important;
}
}
/* =========================================================
END OF GRIFFIN WIKI VECTOR.CSS
========================================================= */
```
```css
/* =========================================================
Griffin Wiki
Vector 2022 - Subtle UI Motion
========================================================= */
/* =========================================================
01. 右上角功能栏按钮
---------------------------------------------------------
非常轻微的上移效果
========================================================= */
.vector-header-end .vector-dropdown-label {
transform: translateY(0);
transition:
transform 0.14s ease,
background-color 0.18s ease,
box-shadow 0.18s ease;
}
/* 鼠标悬停：仅上移 1px */
.vector-header-end .vector-dropdown-label:hover {
transform: translateY(-1px);
}
/* 点击：仅上移 1.5px */
.vector-header-end .vector-dropdown-label:active {
transform: translateY(-1.5px);
}
/* 菜单打开时保持轻微上移 */
.vector-header-end
.vector-dropdown[aria-expanded="true"]
.vector-dropdown-label {
transform: translateY(-1px);
}
/* =========================================================
02. 右上角下拉菜单
---------------------------------------------------------
柔和的淡入 + 极小幅度上移
========================================================= */
.vector-header-end .vector-dropdown-content {
transform-origin: top right;
opacity: 0;
transform:
translateY(-3px)
scale(0.99);
transition:
opacity 0.16s ease,
transform 0.16s ease;
}
/* 打开 */
.vector-header-end
.vector-dropdown[aria-expanded="true"]
.vector-dropdown-content {
opacity: 1;
transform:
translateY(0)
scale(1);
}
/* =========================================================
03. 下拉菜单内部项目
========================================================= */
.vector-header-end
.vector-dropdown-content
.mw-list-item {
transition:
transform 0.14s ease,
background-color 0.14s ease;
}
/* Hover 时只移动 2px */
.vector-header-end
.vector-dropdown-content
.mw-list-item:hover {
transform:
translateX(2px);
}
/* =========================================================
04. 页面操作栏
---------------------------------------------------------
对应：
首页
讨论
阅读
编辑
编辑源代码
查看历史
========================================================= */
/* 操作栏中的链接 */
#p-views a,
#p-cactions a,
.vector-menu-tabs a {
position:
relative;
transform:
translateY(0);
transition:
transform 0.14s ease,
color 0.16s ease,
background-color 0.16s ease,
border-color 0.16s ease;
}
/* 鼠标悬停：轻微上移 */
#p-views a:hover,
#p-cactions a:hover,
.vector-menu-tabs a:hover {
transform:
translateY(-1px);
}
/* 点击 */
#p-views a:active,
#p-cactions a:active,
.vector-menu-tabs a:active {
transform:
translateY(-1px);
}
/* =========================================================
05. 当前选中的页面操作
---------------------------------------------------------
阅读 / 当前页面等选中状态
========================================================= */
#p-views .selected a,
#p-cactions .selected a,
.vector-menu-tabs .selected a {
transform:
translateY(-1px);
transition:
transform 0.16s ease,
background-color 0.16s ease;
}
/* =========================================================
06. 页面操作栏下划线动画
---------------------------------------------------------
鼠标经过时从中间向两侧展开
========================================================= */
#p-views a::after,
#p-cactions a::after,
.vector-menu-tabs a::after {
content:
"";
position:
absolute;
left:
50%;
bottom:
-1px;
width:
0;
height:
2px;
border-radius:
2px;
background:
linear-gradient(
90deg,
#3366cc,
#6f7cff
);
transform:
translateX(-50%);
opacity:
0;
transition:
width 0.18s ease,
opacity 0.18s ease;
}
/* Hover */
#p-views a:hover::after,
#p-cactions a:hover::after,
.vector-menu-tabs a:hover::after {
width:
70%;
opacity:
1;
}
/* 当前选中状态 */
#p-views .selected a::after,
#p-cactions .selected a::after,
.vector-menu-tabs .selected a::after {
width:
70%;
opacity:
1;
}
/* =========================================================
07. 页面操作栏整体
========================================================= */
#p-views,
#p-cactions,
.vector-menu-tabs {
transition:
opacity 0.2s ease;
}
/* =========================================================
08. “更多”/操作菜单展开
========================================================= */
#p-cactions .vector-menu-content,
#p-views .vector-menu-content {
transform-origin:
top left;
opacity:
0;
transform:
translateY(-3px)
scale(0.99);
transition:
opacity 0.16s ease,
transform 0.16s ease;
}
/* 打开状态 */
#p-cactions.vector-menu-open .vector-menu-content,
#p-views.vector-menu-open .vector-menu-content {
opacity:
1;
transform:
translateY(0)
scale(1);
}
/* =========================================================
09. 操作栏菜单项目
========================================================= */
#p-cactions .vector-menu-content li,
#p-views .vector-menu-content li {
transition:
transform 0.13s ease,
background-color 0.13s ease;
}
#p-cactions .vector-menu-content li:hover,
#p-views .vector-menu-content li:hover {
transform:
translateX(2px);
}
/* =========================================================
10. 防止过大的动画
========================================================= */
#p-views *,
#p-cactions *,
.vector-menu-tabs *,
.vector-header-end .vector-dropdown-content * {
animation-timing-function:
ease-out;
}
/* =========================================================
11. Reduced Motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
#p-views *,
#p-cactions *,
.vector-menu-tabs *,
.vector-header-end * {
transition:
none !important;
animation:
none !important;
}
}
```