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将为使用Vector皮肤的用户加载 */
```css
/* =========================================================
Griffin Wiki
MediaWiki:Vector.css
Vector 2022 Complete Visual Enhancement
=========================================================
基础：
- Vector 2022
- 白色主题
- 现代化视觉增强
- 轻量动画
- Sidebar / Main Menu 动画
- 首页专属视觉
========================================================= */
/* =========================================================
01. GLOBAL BASE
========================================================= */
html {
scroll-behavior: smooth;
}
body {
background: #ffffff !important;
color: #202122 !important;
}
/* =========================================================
02. VECTOR 2022 HEADER
========================================================= */
.vector-header-container {
background: #ffffff !important;
border-bottom: 1px solid #eaecf0;
transition:
background-color 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.vector-header-container:hover {
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
/* =========================================================
03. PAGE CONTAINER
========================================================= */
.mw-page-container {
animation: griffinPageFade 0.35s ease-out;
}
@keyframes griffinPageFade {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
04. CONTENT AREA
========================================================= */
.mw-content-container {
background: #ffffff !important;
animation: griffinContentRise 0.4s ease-out;
}
@keyframes griffinContentRise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
05. GLOBAL TRANSITIONS
========================================================= */
a,
button,
input,
select,
textarea,
.mw-ui-button,
.vector-menu-heading,
.vector-pinnable-element,
.infobox,
.thumbinner,
.mw-parser-output li {
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;
}
/* =========================================================
06. LINKS
========================================================= */
a {
color: #3366cc;
}
a:visited {
color: #6b5cff;
}
a:hover {
color: #2956b8;
}
/* 正文链接轻微上浮 */
.mw-parser-output a:hover {
text-decoration: underline;
}
/* =========================================================
07. 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);
}
/* =========================================================
08. VECTOR 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;
}
/* Sidebar 模块 Hover */
.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;
}
/* =========================================================
09. SIDEBAR EXPAND / COLLAPSE
========================================================= */
/*
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);
}
/* 菜单项目 */
.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);
}
/* 错落出现 */
.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;
}
/* =========================================================
10. LOGO LEFT MAIN MENU
========================================================= */
/*
Vector 2022 Logo 左侧主菜单。
使用多个选择器兼容不同 MediaWiki 版本。
*/
.vector-main-menu,
#vector-main-menu,
#vector-main-menu-dropdown {
transform-origin: top left;
transition:
opacity 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* 主菜单打开 */
.vector-main-menu--open,
.vector-main-menu.vector-menu-open,
#vector-main-menu-dropdown.vector-menu-open,
.vector-dropdown--open {
opacity: 1;
transform: translateY(0) scale(1);
}
/* 主菜单项目 */
.vector-main-menu a,
#vector-main-menu a {
transition:
color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease,
opacity 0.2s ease;
}
/* 主菜单 Hover */
.vector-main-menu a:hover,
#vector-main-menu a:hover {
transform: translateX(3px);
}
/* =========================================================
11. MAIN MENU BUTTON
========================================================= */
.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);
}
/* =========================================================
12. CONTENT HEADINGS
========================================================= */
.mw-first-heading {
position: relative;
padding-bottom: 10px;
animation:
griffinTitleFade 0.45s ease-out;
}
@keyframes griffinTitleFade {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 主标题装饰线 */
.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.6s ease-out;
}
@keyframes griffinTitleLine {
from {
width: 0;
opacity: 0;
}
to {
width: 60px;
opacity: 1;
}
}
/* =========================================================
13. SECTION HEADINGS
========================================================= */
.mw-parser-output h2 {
position: relative;
animation:
griffinSectionFade 0.3s ease-out;
}
@keyframes griffinSectionFade {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 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);
}
}
/* =========================================================
14. 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;
}
/* Infobox Hover */
.infobox:hover {
transform: translateY(-2px);
border-color: #b8c2d9;
box-shadow:
0 8px 22px rgba(0, 0, 0, 0.10);
}
/* Infobox 顶部扫描线 */
.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%);
}
}
/* =========================================================
15. 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);
}
/* =========================================================
16. LIST INTERACTION
========================================================= */
.mw-parser-output li {
transition:
transform 0.15s ease;
}
.mw-parser-output li:hover {
transform: translateX(2px);
}
/* =========================================================
17. SEARCH / INPUT POLISH
========================================================= */
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;
}
/* =========================================================
18. SUBTLE PAGE DECORATION
========================================================= */
/*
极轻的页面背景装饰。
不覆盖 Vector 的白色主体。
*/
.mw-body {
position: relative;
}
/* =========================================================
19. MAIN PAGE
========================================================= */
/*
以下规则仅用于主页。
需要配合 Main Page 中的：
<div class="mainpage-banner">
...
</div>
*/
body.page-Main_Page .mw-body {
max-width: 1200px;
}
/* =========================================================
20. MAIN PAGE 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 BANNER IMAGE
========================================================= */
/*
将下面的 URL：
https://example.com/your-banner.jpg
替换为你的图片地址。
*/
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. MAIN PAGE BANNER 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;
}
/* Banner 内容放到图片上层 */
body.page-Main_Page .mainpage-banner > * {
position: relative;
z-index: 2;
}
/* =========================================================
23. MAIN PAGE 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;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Banner 副标题 */
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;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
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 COLUMN
========================================================= */
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 RESPONSIVE
========================================================= */
@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;
}
}
/* =========================================================
29. MOBILE OPTIMIZATION
========================================================= */
@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;
}
}
/* =========================================================
30. REDUCED MOTION
========================================================= */
/*
如果用户系统启用了“减少动态效果”，
自动关闭循环/位移动画。
*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
END OF GRIFFIN WIKI VECTOR.CSS
========================================================= */
```