MediaWiki:Vector.css：修订间差异
AsahinaShikure（讨论 | 贡献） 无编辑摘要 |
AsahinaShikure（讨论 | 贡献） 无编辑摘要 |
||
| 第1,295行： | 第1,295行： | ||
} | } | ||
/* ========================================================= | |||
Vector 2022 Tool Menu Animation | |||
工具栏 / 操作菜单 / 查看源代码 | |||
========================================================= */ | |||
/* ========================================================= | |||
01. 工具栏容器 | |||
========================================================= */ | |||
.vector-page-tools, | |||
.vector-page-tools-dropdown, | |||
.vector-menu { | |||
transition: | |||
opacity .2s ease, | |||
transform .2s ease; | |||
} | |||
/* ========================================================= | |||
02. 工具菜单标题 | |||
Tools / 操作 | |||
========================================================= */ | |||
.vector-menu-heading, | |||
.vector-dropdown-label { | |||
border-radius: | |||
6px; | |||
transition: | |||
background-color .18s ease, | |||
transform .15s ease, | |||
color .18s ease; | |||
} | |||
.vector-menu-heading:hover, | |||
.vector-dropdown-label:hover { | |||
background: | |||
rgba(51,102,255,.06); | |||
transform: | |||
translateX(2px); | |||
} | |||
/* 点击 */ | |||
.vector-menu-heading:active, | |||
.vector-dropdown-label:active { | |||
transform: | |||
translateX(2px) | |||
scale(.98); | |||
} | |||
/* ========================================================= | |||
03. 菜单展开动画 | |||
========================================================= */ | |||
/* 普通 Vector 菜单 */ | |||
.vector-menu-content, | |||
.vector-dropdown-content { | |||
opacity: | |||
0; | |||
transform: | |||
translateY(-5px) | |||
scale(.98); | |||
transform-origin: | |||
top; | |||
transition: | |||
opacity .18s ease, | |||
transform .18s ease; | |||
} | |||
/* 打开状态 */ | |||
.vector-menu-open | |||
.vector-menu-content, | |||
.vector-dropdown[aria-expanded="true"] | |||
.vector-dropdown-content { | |||
opacity: | |||
1; | |||
transform: | |||
translateY(0) | |||
scale(1); | |||
} | |||
/* ========================================================= | |||
04. 工具列表项目 | |||
========================================================= */ | |||
.vector-menu-content | |||
.mw-list-item, | |||
.vector-dropdown-content | |||
.mw-list-item { | |||
position: | |||
relative; | |||
transition: | |||
transform .15s ease, | |||
background-color .15s ease; | |||
} | |||
.vector-menu-content | |||
.mw-list-item:hover, | |||
.vector-dropdown-content | |||
.mw-list-item:hover { | |||
transform: | |||
translateX(4px); | |||
background: | |||
rgba(51,102,255,.05); | |||
} | |||
/* ========================================================= | |||
05. 当前选中项目 | |||
========================================================= */ | |||
/* | |||
例如： | |||
查看源代码 | |||
当前保护状态 | |||
当前工具 | |||
*/ | |||
.vector-menu-content | |||
.selected, | |||
.vector-dropdown-content | |||
.selected { | |||
background: | |||
rgba(51,102,255,.10); | |||
border-radius: | |||
6px; | |||
} | |||
.vector-menu-content | |||
.selected a, | |||
.vector-dropdown-content | |||
.selected a { | |||
color: | |||
#3366cc; | |||
font-weight: | |||
600; | |||
} | |||
/* ========================================================= | |||
06. 菜单项目左侧强调线 | |||
========================================================= */ | |||
.vector-menu-content | |||
.mw-list-item::before, | |||
.vector-dropdown-content | |||
.mw-list-item::before { | |||
content: | |||
""; | |||
position: | |||
absolute; | |||
left: | |||
0; | |||
top: | |||
20%; | |||
height: | |||
60%; | |||
width: | |||
0; | |||
border-radius: | |||
4px; | |||
background: | |||
linear-gradient( | |||
180deg, | |||
#3366cc, | |||
#ff4fa3 | |||
); | |||
transition: | |||
width .15s ease; | |||
} | |||
.vector-menu-content | |||
.mw-list-item:hover::before, | |||
.vector-dropdown-content | |||
.mw-list-item:hover::before { | |||
width: | |||
3px; | |||
} | |||
/* ========================================================= | |||
07. 页面工具按钮 | |||
查看源代码等 | |||
========================================================= */ | |||
.vector-page-tools | |||
a { | |||
transition: | |||
transform .15s ease, | |||
color .15s ease, | |||
background-color .15s ease; | |||
} | |||
.vector-page-tools | |||
a:hover { | |||
transform: | |||
translateX(3px); | |||
background: | |||
rgba(51,102,255,.05); | |||
} | |||
/* ========================================================= | |||
08. 小屏幕优化 | |||
========================================================= */ | |||
@media(max-width:900px){ | |||
.vector-menu-content | |||
.mw-list-item:hover, | |||
.vector-dropdown-content | |||
.mw-list-item:hover { | |||
transform: | |||
translateX(2px); | |||
} | |||
} | |||
/* ========================================================= | /* ========================================================= | ||
END OF VECTOR.CSS | END OF VECTOR.CSS | ||
========================================================= */ | ========================================================= */ | ||
2026年8月7日 (五) 05:53的版本
/* =========================================================
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;
}
}
/* =========================================================
Vector 2022 Tool Menu Animation
工具栏 / 操作菜单 / 查看源代码
========================================================= */
/* =========================================================
01. 工具栏容器
========================================================= */
.vector-page-tools,
.vector-page-tools-dropdown,
.vector-menu {
transition:
opacity .2s ease,
transform .2s ease;
}
/* =========================================================
02. 工具菜单标题
Tools / 操作
========================================================= */
.vector-menu-heading,
.vector-dropdown-label {
border-radius:
6px;
transition:
background-color .18s ease,
transform .15s ease,
color .18s ease;
}
.vector-menu-heading:hover,
.vector-dropdown-label:hover {
background:
rgba(51,102,255,.06);
transform:
translateX(2px);
}
/* 点击 */
.vector-menu-heading:active,
.vector-dropdown-label:active {
transform:
translateX(2px)
scale(.98);
}
/* =========================================================
03. 菜单展开动画
========================================================= */
/* 普通 Vector 菜单 */
.vector-menu-content,
.vector-dropdown-content {
opacity:
0;
transform:
translateY(-5px)
scale(.98);
transform-origin:
top;
transition:
opacity .18s ease,
transform .18s ease;
}
/* 打开状态 */
.vector-menu-open
.vector-menu-content,
.vector-dropdown[aria-expanded="true"]
.vector-dropdown-content {
opacity:
1;
transform:
translateY(0)
scale(1);
}
/* =========================================================
04. 工具列表项目
========================================================= */
.vector-menu-content
.mw-list-item,
.vector-dropdown-content
.mw-list-item {
position:
relative;
transition:
transform .15s ease,
background-color .15s ease;
}
.vector-menu-content
.mw-list-item:hover,
.vector-dropdown-content
.mw-list-item:hover {
transform:
translateX(4px);
background:
rgba(51,102,255,.05);
}
/* =========================================================
05. 当前选中项目
========================================================= */
/*
例如：
查看源代码
当前保护状态
当前工具
*/
.vector-menu-content
.selected,
.vector-dropdown-content
.selected {
background:
rgba(51,102,255,.10);
border-radius:
6px;
}
.vector-menu-content
.selected a,
.vector-dropdown-content
.selected a {
color:
#3366cc;
font-weight:
600;
}
/* =========================================================
06. 菜单项目左侧强调线
========================================================= */
.vector-menu-content
.mw-list-item::before,
.vector-dropdown-content
.mw-list-item::before {
content:
"";
position:
absolute;
left:
0;
top:
20%;
height:
60%;
width:
0;
border-radius:
4px;
background:
linear-gradient(
180deg,
#3366cc,
#ff4fa3
);
transition:
width .15s ease;
}
.vector-menu-content
.mw-list-item:hover::before,
.vector-dropdown-content
.mw-list-item:hover::before {
width:
3px;
}
/* =========================================================
07. 页面工具按钮
查看源代码等
========================================================= */
.vector-page-tools
a {
transition:
transform .15s ease,
color .15s ease,
background-color .15s ease;
}
.vector-page-tools
a:hover {
transform:
translateX(3px);
background:
rgba(51,102,255,.05);
}
/* =========================================================
08. 小屏幕优化
========================================================= */
@media(max-width:900px){
.vector-menu-content
.mw-list-item:hover,
.vector-dropdown-content
.mw-list-item:hover {
transform:
translateX(2px);
}
}
/* =========================================================
END OF VECTOR.CSS
========================================================= */