MediaWiki:Vector.css - 版本历史

2026年8月7日 (五) 06:04 AsahinaShikure

2026-08-07T06:04:40Z

2026年8月7日 (五) 06:00 AsahinaShikure

2026-08-07T06:00:17Z

@@ 第568行： / 第568行： @@
 .vector-page-tools .selected a,
 #p-cactions .selected a {
      transform:translateY(-1px);
+}

2026年8月7日 (五) 05:58 AsahinaShikure

2026-08-07T05:58:49Z

@@ 第522行： / 第522行： @@
          transition:none!important;
+     }
+}

2026年8月7日 (五) 05:57 AsahinaShikure

2026-08-07T05:57:42Z

显示更改

2026年8月7日 (五) 05:53 AsahinaShikure

2026-08-07T05:53:51Z

显示更改

2026年8月7日 (五) 05:51 AsahinaShikure

2026-08-07T05:51:55Z

显示更改

2026年8月7日 (五) 05:48 AsahinaShikure

2026-08-07T05:48:13Z

显示更改

2026年8月7日 (五) 05:46 AsahinaShikure

2026-08-07T05:46:29Z

←上一版本		2026年8月7日 (五) 05:46的版本
第22行：		第22行：
	color: #202122 !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);
			}
			```

2026年8月7日 (五) 05:41 AsahinaShikure

2026-08-07T05:41:37Z

显示更改

AsahinaShikure：创建页面，内容为“/* 此处所有CSS将为使用Vector皮肤的用户加载 / ```css / ========================================================= Griffin Wiki MediaWiki:Vector.css Vector 2022 Complete Visual Enhancement ========================================================= 基础： - Vector 2022 - 白色主题 - 现代化视觉增强 - 轻量动画 - Sidebar / Main Menu 动画 - 首页专属视觉 ======================================…”

2026-08-07T05:39:18Z

创建页面，内容为“此处所有CSS将为使用Vector皮肤的用户加载： ```css /* ========================================================= Griffin Wiki MediaWiki:Vector.css Vector 2022 Complete Visual Enhancement ========================================================= 基础： - Vector 2022 - 白色主题 - 现代化视觉增强 - 轻量动画 - Sidebar / Main Menu 动画 - 首页专属视觉 ======================================…”

新页面

/* 此处所有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
========================================================= */
```