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。
/* =========================================================
Griffin Wiki
MediaWiki:Vector.css
Vector 2022 Custom Theme
Clean Edition
========================================================= */
/* =========================================================
01. GLOBAL
========================================================= */
html {
scroll-behavior: smooth;
}
body {
background: #ffffff;
color: #202122;
}
/* 全局过渡 */
a,
button,
input,
.vector-dropdown-label {
transition:
color .2s ease,
background-color .2s ease,
transform .15s ease,
box-shadow .2s ease;
}
/* =========================================================
02. HEADER
========================================================= */
.vector-header-container {
background:
#ffffff !important;
border-bottom:
1px solid #eaecf0;
transition:
box-shadow .25s ease,
background-color .25s ease;
}
.vector-header-container:hover {
box-shadow:
0 3px 15px rgba(0,0,0,.06);
}
/* =========================================================
03. LOGO AREA
========================================================= */
.vector-header-start button {
transition:
transform .15s ease,
background-color .2s ease;
}
.vector-header-start button:hover {
transform:
translateY(-1px);
background:
rgba(51,102,255,.06);
border-radius:
6px;
}
.vector-header-start button:active {
transform:
translateY(-2px)
scale(.97);
}
/* =========================================================
04. RIGHT HEADER FUNCTIONS
========================================================= */
/*
右侧：
搜索
外观
工具
用户菜单
只做轻微交互
*/
.vector-header-end .vector-dropdown-label {
transform:
translateY(0);
border-radius:
6px;
}
.vector-header-end
.vector-dropdown-label:hover {
transform:
translateY(-1px);
background:
rgba(51,102,255,.05);
}
.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);
}
/* =========================================================
05. DROPDOWN ANIMATION
========================================================= */
.vector-header-end
.vector-dropdown-content {
opacity:
0;
transform:
translateY(-4px)
scale(.98);
transform-origin:
top right;
transition:
opacity .18s ease,
transform .18s ease;
}
.vector-header-end
.vector-dropdown[aria-expanded="true"]
.vector-dropdown-content {
opacity:
1;
transform:
translateY(0)
scale(1);
}
/* 菜单项目 */
.vector-header-end
.vector-dropdown-content
.mw-list-item a {
transition:
background-color .15s ease,
transform .15s ease;
}
.vector-header-end
.vector-dropdown-content
.mw-list-item a:hover {
transform:
translateX(3px);
background:
rgba(51,102,255,.05);
}
/* =========================================================
06. SIDEBAR
========================================================= */
.vector-sidebar {
background:
#fbfbfb !important;
border-right:
1px solid #eaecf0;
}
.vector-sidebar
.vector-menu-heading {
border-radius:
6px;
cursor:
pointer;
transition:
background-color .2s ease,
padding-left .2s ease;
}
.vector-sidebar
.vector-menu-heading:hover {
background:
rgba(51,102,255,.06);
padding-left:
4px;
}
/* Sidebar 链接 */
.vector-sidebar
a {
transition:
transform .15s ease,
color .15s ease;
}
.vector-sidebar
a:hover {
transform:
translateX(3px);
}
/* =========================================================
07. SIDEBAR MENU MOTION
========================================================= */
.vector-sidebar
.vector-menu-content {
transition:
opacity .25s ease,
transform .25s ease;
}
/*
不改变 display
避免破坏 Vector JS
*/
.vector-sidebar
.vector-menu-content {
opacity:
.98;
transform:
translateX(0);
}
/* =========================================================
08. PAGE FADE
========================================================= */
.mw-page-container,
.mw-content-container {
animation:
griffinFade .3s ease-out;
}
@keyframes griffinFade {
from {
opacity:
0;
}
to {
opacity:
1;
}
}
/* =========================================================
09. HEADINGS
========================================================= */
.mw-first-heading {
position:
relative;
padding-bottom:
10px;
}
.mw-first-heading::after {
content:
"";
display:
block;
width:
60px;
height:
3px;
margin-top:
8px;
border-radius:
3px;
background:
linear-gradient(
90deg,
#3366cc,
#6f7cff,
#ff4fa3
);
}
.mw-parser-output h2 {
border-bottom:
1px solid #eaecf0;
padding-bottom:
6px;
}
/* =========================================================
10. INFOBOX
========================================================= */
.infobox {
background:
#f8f9fa !important;
border:
1px solid #c8ccd1;
border-radius:
8px;
box-shadow:
0 2px 8px rgba(0,0,0,.05);
overflow:
hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
.infobox:hover {
transform:
translateY(-2px);
border-color:
#b8c2d9;
box-shadow:
0 8px 22px rgba(0,0,0,.10);
}
/* Infobox 顶部装饰线 */
.infobox::before {
content:
"";
display:
block;
height:
3px;
background:
linear-gradient(
90deg,
#3366cc,
#6f7cff,
#ff4fa3
);
}
/* =========================================================
11. TABLE
========================================================= */
.wikitable {
border:
1px solid #c8ccd1;
border-radius:
8px;
overflow:
hidden;
box-shadow:
0 2px 8px rgba(0,0,0,.04);
}
.wikitable th {
background:
#f8f9fa;
font-weight:
600;
}
.wikitable tr {
transition:
background-color .15s ease;
}
.wikitable tr:hover {
background:
rgba(51,102,255,.035);
}
/* =========================================================
12. IMAGES
========================================================= */
.thumbinner {
background:
#ffffff;
border:
1px solid #eaecf0;
border-radius:
8px;
box-shadow:
0 2px 8px rgba(0,0,0,.05);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.thumbinner:hover {
transform:
translateY(-3px);
box-shadow:
0 8px 20px rgba(0,0,0,.10);
}
.thumbinner img {
transition:
transform .25s ease;
}
.thumbinner:hover img {
transform:
scale(1.02);
}
/* =========================================================
13. TOC
========================================================= */
.toc {
background:
#f8f9fa;
border:
1px solid #eaecf0;
border-radius:
8px;
box-shadow:
0 2px 8px rgba(0,0,0,.04);
}
.toc a:hover {
color:
#3366cc;
}
/* =========================================================
14. CODE BLOCK
========================================================= */
pre,
.mw-code {
background:
#f8f9fa;
border:
1px solid #eaecf0;
border-radius:
8px;
padding:
12px;
}
code {
background:
#f8f9fa;
border:
1px solid #eaecf0;
border-radius:
4px;
padding:
2px 5px;
}
/* =========================================================
15. MAIN PAGE BANNER
========================================================= */
/*
使用方法：
<div class="mainpage-banner">
<h1>标题</h1>
<p>介绍</p>
</div>
修改下面 URL 为你的图片
*/
.mainpage-banner {
position:
relative;
overflow:
hidden;
min-height:
220px;
margin:
20px 0;
padding:
60px 30px;
display:
flex;
flex-direction:
column;
justify-content:
center;
align-items:
center;
text-align:
center;
color:
white;
border-radius:
14px;
background:
#1f2a44;
box-shadow:
0 8px 28px rgba(0,0,0,.12);
}
.mainpage-banner::before {
content:
"";
position:
absolute;
inset:
0;
background-image:
url("https://example.com/banner.jpg");
background-size:
cover;
background-position:
center;
filter:
brightness(.65);
transition:
transform 8s ease;
}
.mainpage-banner:hover::before {
transform:
scale(1.06);
}
.mainpage-banner::after {
content:
"";
position:
absolute;
inset:
0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.2),
rgba(0,0,0,.6)
);
}
.mainpage-banner > * {
position:
relative;
z-index:
2;
}
.mainpage-banner h1 {
font-size:
2.8em;
margin:
0 0 10px;
color:
#ffffff;
text-shadow:
0 3px 12px rgba(0,0,0,.5);
}
/* =========================================================
16. MAIN PAGE MODULE
========================================================= */
.mainpage-module {
background:
#ffffff;
border:
1px solid #eaecf0;
border-radius:
10px;
padding:
18px;
margin-bottom:
18px;
box-shadow:
0 2px 8px rgba(0,0,0,.04);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.mainpage-module:hover {
transform:
translateY(-3px);
box-shadow:
0 8px 22px rgba(0,0,0,.08);
}
/* =========================================================
17. CATEGORY / NOTICE
========================================================= */
.catlinks {
background:
#f8f9fa;
border:
1px solid #eaecf0;
border-radius:
8px;
padding:
8px 12px;
}
/* =========================================================
18. SCROLLBAR
========================================================= */
::-webkit-scrollbar {
width:
9px;
}
::-webkit-scrollbar-track {
background:
#f8f9fa;
}
::-webkit-scrollbar-thumb {
background:
#c8ccd1;
border-radius:
10px;
}
::-webkit-scrollbar-thumb:hover {
background:
#a2a9b1;
}
/* =========================================================
19. RESPONSIVE
========================================================= */
@media(max-width:900px){
.mainpage-banner {
padding:
45px 20px;
}
.mainpage-banner h1 {
font-size:
2.2em;
}
}
@media(max-width:640px){
.infobox {
max-width:
100%;
}
.mainpage-banner {
min-height:
160px;
padding:
35px 15px;
}
.mainpage-banner h1 {
font-size:
1.8em;
}
}
/* =========================================================
20. REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after {
animation:
none !important;
transition:
none !important;
}
}
/* =========================================================
END OF VECTOR.CSS
========================================================= */