MediaWiki:Vector.css：修订间差异

来自格里芬Wiki
无编辑摘要
无编辑摘要
 
（未显示同一用户的7个中间版本）
第1行： 第1行：
```css
/* MediaWiki:Vector.css
/* =========================================================
   Griffin Wiki - Vector 2022 Clean Theme
   Griffin Wiki
   Part 1/2
   MediaWiki:Vector.css
*/


  Vector 2022 Complete Visual Enhancement
/* ================================
  ---------------------------------------------------------
  1. Global
  White UI / Animation / Sidebar / Header / Main Page
  ================================ */
  ========================================================= */


html {
    scroll-behavior:smooth;
}


/* =========================================================
body {
  01. GLOBAL BASE
    background:#fff;
  ========================================================= */
    color:#202122;
}


html {
a {
     scroll-behavior: smooth;
     transition:color .2s ease,background-color .2s ease,transform .15s ease;
}
}


body {
a:hover {
    background: #ffffff !important;
     color:#3366cc;
     color: #202122 !important;
}
}




/* =========================================================
/* ================================
   02. VECTOR 2022 HEADER
   2. Header
   ========================================================= */
   ================================ */


.vector-header-container {
.vector-header-container {
     background: #ffffff !important;
     background:#fff;
     border-bottom: 1px solid #eaecf0;
     border-bottom:1px solid #eaecf0;
 
     transition:box-shadow .25s ease;
     transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}
}


.vector-header-container:hover {
.vector-header-container:hover {
     box-shadow:
     box-shadow:0 3px 15px rgba(0,0,0,.06);
        0 4px 18px rgba(0, 0, 0, 0.055);
}
}




/* =========================================================
/* Logo */
  03. PAGE ENTER ANIMATION
  ---------------------------------------------------------
  只淡入，不使用 translateY，
  防止页面进入时出现“向下移动”的感觉。
  ========================================================= */


.mw-page-container,
.vector-header-start {
.mw-content-container {
     transition:transform .2s ease;
     animation:
        griffinPageFade 0.3s ease-out;
}
}


@keyframes griffinPageFade {
.vector-header-start:hover {
    from {
     transform:translateY(-1px);
        opacity: 0;
    }
 
     to {
        opacity: 1;
    }
}
}




/* 防止动画导致页面整体位移 */
/* 左侧主菜单按钮 */


.mw-page-container,
.vector-header-start .mw-ui-icon {
.mw-content-container,
     transition:transform .15s ease;
.vector-body {
     transform: none;
}
}


 
.vector-header-start button:hover .mw-ui-icon {
/* =========================================================
     transform:scale(1.08);
  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
   3. Right Header Functions
   ========================================================= */
   ================================ */


a {
.vector-header-end .vector-dropdown-label {
     color: #3366cc;
     border-radius:6px;
    transition:
        transform .15s ease,
        background-color .2s ease;
}
}


a:visited {
.vector-header-end .vector-dropdown-label:hover {
     color: #6b5cff;
     transform:translateY(-1px);
    background:rgba(51,102,204,.06);
}
}


a:hover {
.vector-header-end .vector-dropdown-label:active {
     color: #2956b8;
     transform:translateY(-1px) scale(.98);
}
}


.mw-parser-output a:hover {
    text-decoration: underline;
}


/* 搜索按钮 */


/* =========================================================
.vector-search-box-input {
  06. BUTTONS
    border-radius:8px;
  ========================================================= */
    transition:
 
        border-color .2s ease,
button:hover,
        box-shadow .2s ease;
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,
.vector-search-box-input:focus {
input[type="submit"]:active,
    border-color:#3366cc;
input[type="button"]:active,
     box-shadow:0 0 0 2px rgba(51,102,204,.15);
.mw-ui-button:active {
     transform: scale(0.97);
}
}




/* =========================================================
/* ================================
   07. LEFT SIDEBAR
   4. Sidebar
   ========================================================= */
   ================================ */


.vector-sidebar {
.vector-sidebar {
     background: #fbfbfb !important;
     background:#fff;
    border-right: 1px solid #eaecf0;
}
}


.vector-sidebar .vector-menu-heading {
    border-radius:6px;
    transition:
        background-color .2s ease,
        padding-left .15s ease;
}


/* Sidebar 模块 */
.vector-sidebar .vector-menu-heading:hover {
    background:rgba(51,102,204,.06);
    padding-left:4px;
}


.vector-sidebar .vector-pinnable-element {
    border-radius: 8px;


.vector-sidebar .vector-menu-content a {
    border-radius:6px;
     transition:
     transition:
         background-color 0.2s ease,
         background-color .15s ease,
        box-shadow 0.2s ease,
         transform .15s ease;
         transform 0.2s ease;
}
}


.vector-sidebar .vector-pinnable-element:hover {
.vector-sidebar .vector-menu-content a:hover {
     background:
     background:rgba(51,102,204,.05);
        rgba(51, 102, 255, 0.025);
    transform:translateX(3px);
}
}




/* Sidebar 标题 */
/* ================================
 
  5. Sidebar Logo Area
.vector-sidebar .vector-menu-heading {
  ================================ */
    cursor: pointer;
 
    border-radius: 6px;


.mw-logo {
     transition:
     transition:
         background-color 0.2s ease,
         transform .25s ease,
         color 0.2s ease,
         filter .25s ease;
        padding-left 0.2s ease;
}
}


.vector-sidebar .vector-menu-heading:hover {
.mw-logo:hover {
     background:
     transform:translateY(-2px);
        rgba(51, 102, 255, 0.06);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
}




/* Sidebar 链接 */
/* ================================
  6. Page Container
  ================================ */


.vector-sidebar a:hover {
.mw-page-container {
     padding-left: 4px;
     animation:griffinFade .25s ease-out;
}
}


@keyframes griffinFade {
    from {
        opacity:0;
        transform:translateY(5px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
  08. SIDEBAR EXPAND / COLLAPSE
  ========================================================= */


/*
/* ================================
   不使用 display:none / visibility:hidden，
   7. Headings
   避免破坏 Vector 2022 原本的菜单控制逻辑。
   ================================ */
*/


.vector-sidebar
.mw-first-heading {
.vector-pinnable-element
    position:relative;
.vector-menu-content {
     padding-bottom:10px;
     overflow: hidden;
}


     transition:
.mw-first-heading:after {
        max-height 0.35s ease,
    content:"";
        opacity 0.25s ease,
    display:block;
        transform 0.25s ease;
    width:70px;
    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;
}


/* 展开状态 */


.vector-sidebar
/* ================================
.vector-pinnable-element.vector-menu-open
  8. Tools Menu Safe Animation
.vector-menu-content {
  ================================ */
    opacity: 1;
    transform: translateY(0);
}




/* Sidebar 菜单项目 */
/* 只影响工具项目，不修改菜单显示 */


.vector-sidebar
#p-tb .mw-list-item a,
.vector-pinnable-element
.vector-page-tools .mw-list-item a {
.vector-menu-content li {
    border-radius:6px;
     transition:
     transition:
         opacity 0.22s ease,
         background-color .15s ease,
         transform 0.22s ease;
         transform .15s ease;
}
}


#p-tb .mw-list-item a:hover,
.vector-page-tools .mw-list-item a:hover {
    background:rgba(51,102,204,.06);
    transform:translateX(3px);
}


/* 展开后的轻微滑入 */


.vector-sidebar
/* 当前项目 */
.vector-pinnable-element.vector-menu-open
 
.vector-menu-content li {
#p-tb .selected a,
     opacity: 1;
.vector-page-tools .selected a {
     transform: translateX(0);
     background:rgba(51,102,204,.1);
    color:#3366cc;
     font-weight:600;
}
}




/* Stagger */
/* ================================
  9. Dropdown Button
  ================================ */


.vector-sidebar
.vector-dropdown-label {
.vector-pinnable-element.vector-menu-open
     cursor:pointer;
.vector-menu-content li:nth-child(1) {
     transition-delay: 0.02s;
}
}


.vector-sidebar
.vector-dropdown-label:hover {
.vector-pinnable-element.vector-menu-open
     background:rgba(51,102,204,.05);
.vector-menu-content li:nth-child(2) {
     transition-delay: 0.04s;
}
}
/* ================================
  10. Infobox
  ================================ */


.vector-sidebar
.infobox {
.vector-pinnable-element.vector-menu-open
    background:#f8f9fa;
.vector-menu-content li:nth-child(3) {
    border:1px solid #c8ccd1;
     transition-delay: 0.06s;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
     transition:
        transform .25s ease,
        box-shadow .25s ease;
}
}


.vector-sidebar
.infobox:hover {
.vector-pinnable-element.vector-menu-open
    transform:translateY(-2px);
.vector-menu-content li:nth-child(4) {
     box-shadow:0 8px 20px rgba(0,0,0,.1);
     transition-delay: 0.08s;
}
}


.vector-sidebar
.infobox th {
.vector-pinnable-element.vector-menu-open
     background:#eaecf0;
.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;
.infobox:first-child {
     border-top:3px solid #3366cc;
}
}




/* =========================================================
/* ================================
   09. LOGO LEFT MAIN MENU
   11. Tables
   ========================================================= */
   ================================ */


/*
.wikitable {
  Logo 左侧的主菜单按钮。
    border:1px solid #c8ccd1;
  不改变 MediaWiki 原本的显示机制。
    border-radius:8px;
*/
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}


.vector-header-start button,
.wikitable th {
.vector-header-start .mw-ui-icon {
     background:#f8f9fa;
     transition:
        transform 0.15s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}
}


.vector-header-start button:hover {
.wikitable tr {
     transform: scale(1.04);
     transition:background-color .15s ease;
}
}


.vector-header-start button:active {
.wikitable tr:hover {
     transform: scale(0.92);
     background:rgba(51,102,204,.04);
}
}




/* 主菜单 */
/* ================================
 
  12. Images
.vector-main-menu,
  ================================ */
#vector-main-menu,
#vector-main-menu-dropdown {
    transform-origin: top left;


.thumbinner {
    background:#fff;
    border:1px solid #eaecf0;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
     transition:
     transition:
        opacity 0.22s ease,
         transform .25s ease,
         transform 0.22s ease,
         box-shadow .25s ease;
         box-shadow 0.22s ease;
}
}


 
.thumbinner:hover {
/* 已知的打开状态 */
     transform:translateY(-3px);
 
     box-shadow:0 8px 20px rgba(0,0,0,.1);
.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);
}
}


 
.thumbimage img {
/* 主菜单项目 */
     transition:transform .25s ease;
 
.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,
.thumbimage:hover img {
#vector-main-menu a:hover {
     transform:scale(1.02);
     transform: translateX(3px);
}
}




/* =========================================================
/* ================================
   10. RIGHT HEADER CONTROLS
   13. Table of Contents
   ========================================================= */
   ================================ */


/*
.toc {
  Vector 2022 右侧通常包括：
    background:#f8f9fa;
  - 搜索
    border:1px solid #eaecf0;
  - 用户菜单
    border-radius:8px;
  - 外观
    box-shadow:0 2px 8px rgba(0,0,0,.04);
  - 工具
}
  - 更多
 
  这里只做视觉反馈，不接管菜单的 display 状态。
*/


 
.toc a:hover {
.vector-header-end button,
     color:#3366cc;
.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 */
/* ================================
  14. Code
  ================================ */


.vector-header-end button:hover,
pre,
.vector-header-end .vector-dropdown-label:hover {
.mw-code {
     background:
     background:#f8f9fa;
        rgba(51, 102, 255, 0.055);
    border:1px solid #eaecf0;
 
     border-radius:8px;
     border-radius: 6px;
    padding:12px;
}
}


 
code {
/* 点击 */
    background:#f8f9fa;
 
    border:1px solid #eaecf0;
.vector-header-end button:active,
    border-radius:4px;
.vector-header-end .vector-dropdown-label:active {
     padding:2px 5px;
     transform: scale(0.94);
}
}




/* =========================================================
/* ================================
   11. RIGHT DROPDOWN MENUS
   15. Main Page Banner
   ========================================================= */
   ================================ */


/*
/*
  重点：
使用:
  不使用 opacity:0 或 pointer-events:none
<div class="mainpage-banner">
  去强制隐藏菜单。
...
 
</div>
  MediaWiki 自己负责打开 / 关闭。
  CSS 只负责打开后的视觉动画。
*/
*/


.vector-dropdown-content {
.mainpage-banner {
     transform-origin: top right;
    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:#fff;
    border-radius:14px;
    background:#1f2a44;
     box-shadow:0 8px 28px rgba(0,0,0,.12);
}


     transition:
.mainpage-banner:before {
        transform 0.18s ease,
     content:"";
        opacity 0.18s ease,
    position:absolute;
        box-shadow 0.2s ease;
    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);
}


/* Vector Dropdown 打开 */
.mainpage-banner:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,.25),
        rgba(0,0,0,.65)
    );
}


.vector-dropdown.vector-dropdown--open
.mainpage-banner>* {
.vector-dropdown-content {
     position:relative;
     transform:
    z-index:2;
        translateY(0)
}
        scale(1);


     box-shadow:
.mainpage-banner h1 {
        0 8px 24px rgba(0, 0, 0, 0.12);
    margin:0 0 10px;
    font-size:2.8em;
     color:#fff;
    text-shadow:0 3px 12px rgba(0,0,0,.5);
}
}




/* Dropdown 内容 */
/* ================================
  16. Main Page Modules
  ================================ */


.vector-dropdown-content .mw-list-item a {
.mainpage-module {
    background:#fff;
    border:1px solid #eaecf0;
    border-radius:10px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
     transition:
     transition:
         background-color 0.16s ease,
         transform .25s ease,
        color 0.16s ease,
         box-shadow .25s ease;
         padding-left 0.16s ease;
}
}


.mainpage-module:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(0,0,0,.08);
}


/* Dropdown Hover */


.vector-dropdown-content .mw-list-item a:hover {
/* ================================
    background:
  17. Category Links
        rgba(51, 102, 255, 0.06);
  ================================ */


     padding-left: 4px;
.catlinks {
    background:#f8f9fa;
    border:1px solid #eaecf0;
    border-radius:8px;
     padding:8px 12px;
}
}




/* =========================================================
/* ================================
   12. VECTOR POPUPS
   18. Scrollbar
   ========================================================= */
   ================================ */


.vector-popup {
::-webkit-scrollbar {
     transition:
     width:9px;
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.2s ease;
}
}


::-webkit-scrollbar-track {
    background:#f8f9fa;
}


/* =========================================================
::-webkit-scrollbar-thumb {
  13. MAIN HEADING
    background:#c8ccd1;
  ========================================================= */
    border-radius:10px;
}


.mw-first-heading {
::-webkit-scrollbar-thumb:hover {
     position: relative;
     background:#a2a9b1;
}


    padding-bottom: 10px;


    animation:
/* ================================
        griffinTitleFade 0.45s ease-out;
  19. Responsive
}
  ================================ */


@keyframes griffinTitleFade {
@media(max-width:900px) {
     from {
     .mainpage-banner {
         opacity: 0;
         min-height:170px;
        padding:45px 20px;
     }
     }


     to {
     .mainpage-banner h1 {
         opacity: 1;
         font-size:2.2em;
     }
     }
}
}


@media(max-width:640px) {
    .mainpage-banner {
        min-height:140px;
        padding:35px 15px;
    }


/* 标题底部渐变线 */
    .mainpage-banner h1 {
 
         font-size:1.8em;
.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 {
     .infobox {
         width: 60px;
         max-width:100%;
        opacity: 1;
     }
     }
}
}




/* =========================================================
/* ================================
   14. SECTION HEADINGS
   20. Reduced Motion
   ========================================================= */
   ================================ */


.mw-parser-output h2 {
@media(prefers-reduced-motion:reduce) {
     position: relative;
     *,
 
     *:before,
     animation:
     *:after {
        griffinSectionFade 0.3s ease-out;
         animation:none!important;
}
         transition:none!important;
 
@keyframes griffinSectionFade {
     from {
         opacity: 0;
    }
 
    to {
         opacity: 1;
     }
     }
}
}
/* =========================================
  Vector 2022 Page Action Tabs
  阅读 / 编辑源代码 / 查看历史
  轻微上浮动画
  ========================================= */




/* H2 左侧装饰条 */
/* 标签按钮基础动画 */


.mw-parser-output h2::before {
.vector-page-toolbar a,
     content: "";
.vector-page-tools a,
#p-associated-pages a,
#p-cactions a {
     transition:
        transform .15s ease,
        background-color .15s ease,
        color .15s ease;
}


    position: absolute;


    left: -10px;
/* 鼠标悬停 */
    top: 50%;


    width: 3px;
.vector-page-toolbar a:hover,
     height: 16px;
.vector-page-tools a:hover,
#p-associated-pages a:hover,
#p-cactions a:hover {
     transform:translateY(-1px);
}


    border-radius: 3px;


    background: #3366ff;
/* 点击瞬间 */


     transform:
.vector-page-toolbar a:active,
        translateY(-50%)
.vector-page-tools a:active,
        scaleY(0);
#p-associated-pages a:active,
#p-cactions a:active {
     transform:translateY(-2px);
}


    transform-origin: center;


    animation:
/* 当前选中页面（例如 阅读） */
        griffinHeadingBar 0.4s ease-out forwards;
}


@keyframes griffinHeadingBar {
.vector-page-toolbar .selected a,
     to {
.vector-page-tools .selected a,
        transform:
#p-cactions .selected a {
            translateY(-50%)
     transform:translateY(-1px);
            scaleY(1);
    }
}
}
/* =========================================
  Griffin Wiki Link Motion
  链接 / 左侧目录 微上浮动画
  ========================================= */




/* =========================================================
/* ================================
   15. INFOBOX
   1. 正文普通链接
   ========================================================= */
   ================================ */
 
.infobox {
    position: relative;
 
    overflow: hidden;
 
    background: #f8f9fa !important;
 
    border: 1px solid #c8ccd1;


.mw-parser-output a {
    display:inline-block;
     transition:
     transition:
         transform 0.25s ease,
         transform .14s ease,
         box-shadow 0.25s ease,
         color .15s ease,
         border-color 0.25s ease;
         background-color .15s ease;
}
}




/* Hover */
.mw-parser-output a:hover {
    transform:translateY(-1px);
}


.infobox:hover {
    transform: translateY(-2px);


    border-color:
.mw-parser-output a:active {
        #b8c2d9;
     transform:translateY(-2px);
 
     box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);
}
}




/* 顶部扫描线 */


.infobox::before {
/* ================================
    content: "";
  2. 目录 TOC
  ================================ */


    position: absolute;


     top: 0;
.toc a {
     left: -50%;
     display:inline-block;
 
     transition:
    width: 200%;
        transform .14s ease,
    height: 2px;
        color .15s ease,
        background-color .15s ease;
}


    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(51, 102, 255, 0.25),
            rgba(255, 79, 163, 0.25),
            transparent
        );


     animation:
.toc a:hover {
        griffinScanline 5s linear infinite;
     transform:translateY(-1px);
    color:#3366cc;
}
}


@keyframes griffinScanline {
    from {
        transform: translateX(0);
    }


    to {
.toc a:active {
        transform: translateX(50%);
    transform:translateY(-2px);
    }
}
}




/* =========================================================
  16. IMAGES
  ========================================================= */


.thumbinner {
/* ================================
    transition:
  3. 左侧导航栏
        transform 0.25s ease,
  ================================ */
        box-shadow 0.25s ease;
}


.thumbinner:hover {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.08);
}


.thumbinner img {
.vector-sidebar .mw-list-item a {
     transition:
     transition:
         transform 0.25s ease;
         transform .14s ease,
        background-color .15s ease,
        color .15s ease;
}
}


.thumbinner img:hover {
 
     transform: scale(1.02);
.vector-sidebar .mw-list-item a:hover {
     transform:translateY(-1px);
    background:rgba(51,102,204,.05);
}
}




/* =========================================================
.vector-sidebar .mw-list-item a:active {
  17. LIST INTERACTION
     transform:translateY(-2px);
  ========================================================= */
 
.mw-parser-output li {
     transition:
        transform 0.15s ease;
}
}


.mw-parser-output li:hover {
    transform:
        translateX(2px);
}




/* =========================================================
/* ================================
   18. INPUT / SEARCH
   4. 当前选中目录项目
   ========================================================= */
   ================================ */
 
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;
.toc .active a,
.toc .selected a {
     transform:translateY(-1px);
    color:#3366cc;
    font-weight:600;
}
}




/* =========================================================
  19. MAIN PAGE
  ========================================================= */


/*
/* ================================
   以下仅作用于：
   5. 分类链接
   Main Page
   ================================ */


  配合主页中的：


  <div class="mainpage-banner">
.catlinks a {
      ...
    display:inline-block;
  </div>
    transition:
*/
        transform .14s ease;
}




body.page-Main_Page .mw-body {
.catlinks a:hover {
     max-width: 1200px;
     transform:translateY(-1px);
}
}
/* =========================================
  Vector 2022 Complete Menu Motion
  主选单 / 目录 / 用户选项
  ========================================= */




/* =========================================================
/* =========================================
   20. MAIN PAGE HERO BANNER
   1. 左侧主选单
   ========================================================= */
   ========================================= */


body.page-Main_Page .mainpage-banner {
    position: relative;


    overflow: hidden;
.vector-main-menu .vector-menu-content a,
.vector-main-menu .mw-list-item a {


     margin:
     display:block;
        10px 0 30px;


     padding:
     transition:
         70px 30px;
         transform .15s ease,
        background-color .15s ease,
        color .15s ease;


    min-height:
}
        220px;


    display:
        flex;


    flex-direction:
        column;


    justify-content:
.vector-main-menu .vector-menu-content a:hover,
        center;
.vector-main-menu .mw-list-item a:hover {


     align-items:
     transform:
         center;
         translateY(-1px);


     text-align:
     background:
         center;
         rgba(51,102,204,.06);
 
    color:
        #ffffff !important;


     border-radius:
     border-radius:
         12px;
         6px;


    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:
.vector-main-menu .mw-list-item a:active {
        brightness(0.72);


     transform:
     transform:
         scale(1.03);
         translateY(-2px);


    transition:
        transform 8s ease;
}
}




/* Banner Hover */


body.page-Main_Page .mainpage-banner:hover::before {
/* 当前选中页面 */
    transform:
        scale(1.07);
}


.vector-main-menu .selected a {


/* =========================================================
     transform:
  22. HERO DARK OVERLAY
        translateY(-1px);
  ========================================================= */
 
body.page-Main_Page .mainpage-banner::after {
    content: "";
 
    position: absolute;
 
     inset: 0;
 
    z-index: 1;


     background:
     background:
         linear-gradient(
         rgba(51,102,204,.1);
            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:
  2. 左侧目录 TOC
        0 0 12px;
  ========================================= */


    font-size:
        2.8em;


    font-weight:
.vector-toc .vector-toc-link,
        700;
.vector-toc a,
.toc a {


     letter-spacing:
     display:inline-block;
        1px;


     color:
     transition:
        #ffffff !important;


    text-shadow:
        transform .15s ease,
         0 2px 12px rgba(0, 0, 0, 0.55);
         color .15s ease;


    animation:
        griffinHeroTitle 0.7s ease-out;
}
}


@keyframes griffinHeroTitle {
    from {
        opacity: 0;
    }


    to {
        opacity: 1;
    }
}


.vector-toc a:hover,
.toc a:hover {


/* Hero 副标题 */
    transform:
        translateY(-1px);


body.page-Main_Page .mainpage-banner em,
body.page-Main_Page .mainpage-banner p {
     color:
     color:
         rgba(255, 255, 255, 0.90) !important;
         #3366cc;


    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.4);
}
}




/* =========================================================
  24. MAIN PAGE INTRO
  ========================================================= */


body.page-Main_Page .mainpage-intro {
.vector-toc a:active,
    max-width:
.toc a:active {
        900px;


     margin:
     transform:
         0 auto 30px;
         translateY(-2px);


    padding:
}
        20px 24px;


    background:
        #f8f9fa;


    border:
        1px solid #eaecf0;


    border-radius:
/* 当前章节 */
        10px;


    line-height:
.vector-toc .vector-toc-link--active,
        1.8;
.toc .active a {


     box-shadow:
     transform:
         0 2px 8px rgba(0, 0, 0, 0.04);
         translateY(-1px);


     animation:
     color:
         griffinIntroFade 0.5s ease-out;
         #3366cc;
}


@keyframes griffinIntroFade {
     font-weight:
     from {
         600;
         opacity: 0;
    }


    to {
        opacity: 1;
    }
}
}




/* =========================================================
  25. MAIN PAGE MODULES
  ========================================================= */


body.page-Main_Page .mainpage-module {
/* =========================================
    background:
  3. 用户菜单
        #ffffff;
  ========================================= */


    border:
        1px solid #eaecf0;


    border-radius:
/* 用户头像 / 用户名按钮 */
        10px;


    padding:
.vector-user-links .vector-dropdown-label,
        18px 20px;
.vector-user-links-dropdown .vector-dropdown-label {


     margin-bottom:
     transition:
        18px;


    box-shadow:
        transform .15s ease,
         0 2px 8px rgba(0, 0, 0, 0.035);
         background-color .15s ease;


    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
}




/* Module Hover */


body.page-Main_Page .mainpage-module:hover {
.vector-user-links .vector-dropdown-label:hover,
.vector-user-links-dropdown .vector-dropdown-label:hover {
 
     transform:
     transform:
         translateY(-3px);
         translateY(-1px);


     border-color:
    background:
         #d5daf0;
        rgba(51,102,204,.06);
 
     border-radius:
         6px;


    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.08);
}
}




/* Module 标题 */


body.page-Main_Page .mainpage-module h2 {
.vector-user-links .vector-dropdown-label:active,
    margin-top:
.vector-user-links-dropdown .vector-dropdown-label:active {
        0;


     padding-bottom:
     transform:
         8px;
         translateY(-2px);


    border-bottom:
        1px solid #eaecf0;
}
}




/* =========================================================
  26. MAIN PAGE TWO COLUMNS
  ========================================================= */


body.page-Main_Page .mainpage-columns {
/* 用户菜单内部项目 */
    display:
        flex;


    align-items:
        flex-start;


    gap:
.vector-user-links .vector-dropdown-content a,
        18px;
.vector-user-links-dropdown .vector-dropdown-content a {
}


body.page-Main_Page .mainpage-left {
     transition:
     flex:
        2;


    min-width:
        transform .15s ease,
         0;
         background-color .15s ease;
}


body.page-Main_Page .mainpage-right {
    flex:
        1;
    min-width:
        0;
}
}




/* =========================================================
  27. MAIN PAGE LIST
  ========================================================= */


body.page-Main_Page .mainpage-module li {
.vector-user-links .vector-dropdown-content a:hover,
    margin-bottom:
.vector-user-links-dropdown .vector-dropdown-content a:hover {
        6px;
 
    transition:
        transform 0.15s ease;
}


body.page-Main_Page .mainpage-module li:hover {
     transform:
     transform:
         translateX(3px);
         translateX(3px);
}


    background:
        rgba(51,102,204,.05);


/* =========================================================
  28. MAIN PAGE LINKS
  ========================================================= */
body.page-Main_Page a {
    color:
        #3366cc;
}
}


body.page-Main_Page a:hover {
    color:
        #2956b8;


    text-decoration:
        underline;
}


/* =========================================
  4. 所有 Vector 2022 菜单按钮统一微动效
  ========================================= */


/* =========================================================
  29. RESPONSIVE - TABLET
  ========================================================= */


@media (max-width: 900px) {
.vector-menu-heading,
.vector-dropdown-label {


     body.page-Main_Page .mainpage-columns {
     transition:
        flex-direction:
            column;
    }


    body.page-Main_Page .mainpage-left,
        transform .15s ease,
    body.page-Main_Page .mainpage-right {
        background-color .15s ease;
        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) {
.vector-menu-heading:hover,
.vector-dropdown-label:hover {


     .mw-content-container {
     transform:
        padding-left:
         translateY(-1px);
            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) {
.vector-menu-heading:active,
.vector-dropdown-label:active {


     html {
     transform:
        scroll-behavior:
         translateY(-2px);
            auto;
    }
 
    *,
    *::before,
    *::after {
         animation-duration:
            0.001ms !important;
 
        animation-iteration-count:
            1 !important;


        transition-duration:
            0.001ms !important;
    }
}
}
/* =========================================================
  END OF GRIFFIN WIKI VECTOR.CSS
  ========================================================= */
```

2026年8月7日 (五) 06:04的最新版本

/* MediaWiki:Vector.css
   Griffin Wiki - Vector 2022 Clean Theme
   Part 1/2
*/

/* ================================
   1. Global
   ================================ */

html {
    scroll-behavior:smooth;
}

body {
    background:#fff;
    color:#202122;
}

a {
    transition:color .2s ease,background-color .2s ease,transform .15s ease;
}

a:hover {
    color:#3366cc;
}


/* ================================
   2. Header
   ================================ */

.vector-header-container {
    background:#fff;
    border-bottom:1px solid #eaecf0;
    transition:box-shadow .25s ease;
}

.vector-header-container:hover {
    box-shadow:0 3px 15px rgba(0,0,0,.06);
}


/* Logo */

.vector-header-start {
    transition:transform .2s ease;
}

.vector-header-start:hover {
    transform:translateY(-1px);
}


/* 左侧主菜单按钮 */

.vector-header-start .mw-ui-icon {
    transition:transform .15s ease;
}

.vector-header-start button:hover .mw-ui-icon {
    transform:scale(1.08);
}


/* ================================
   3. Right Header Functions
   ================================ */

.vector-header-end .vector-dropdown-label {
    border-radius:6px;
    transition:
        transform .15s ease,
        background-color .2s ease;
}

.vector-header-end .vector-dropdown-label:hover {
    transform:translateY(-1px);
    background:rgba(51,102,204,.06);
}

.vector-header-end .vector-dropdown-label:active {
    transform:translateY(-1px) scale(.98);
}


/* 搜索按钮 */

.vector-search-box-input {
    border-radius:8px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.vector-search-box-input:focus {
    border-color:#3366cc;
    box-shadow:0 0 0 2px rgba(51,102,204,.15);
}


/* ================================
   4. Sidebar
   ================================ */

.vector-sidebar {
    background:#fff;
}

.vector-sidebar .vector-menu-heading {
    border-radius:6px;
    transition:
        background-color .2s ease,
        padding-left .15s ease;
}

.vector-sidebar .vector-menu-heading:hover {
    background:rgba(51,102,204,.06);
    padding-left:4px;
}


.vector-sidebar .vector-menu-content a {
    border-radius:6px;
    transition:
        background-color .15s ease,
        transform .15s ease;
}

.vector-sidebar .vector-menu-content a:hover {
    background:rgba(51,102,204,.05);
    transform:translateX(3px);
}


/* ================================
   5. Sidebar Logo Area
   ================================ */

.mw-logo {
    transition:
        transform .25s ease,
        filter .25s ease;
}

.mw-logo:hover {
    transform:translateY(-2px);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}


/* ================================
   6. Page Container
   ================================ */

.mw-page-container {
    animation:griffinFade .25s ease-out;
}

@keyframes griffinFade {
    from {
        opacity:0;
        transform:translateY(5px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}


/* ================================
   7. Headings
   ================================ */

.mw-first-heading {
    position:relative;
    padding-bottom:10px;
}

.mw-first-heading:after {
    content:"";
    display:block;
    width:70px;
    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;
}


/* ================================
   8. Tools Menu Safe Animation
   ================================ */


/* 只影响工具项目，不修改菜单显示 */

#p-tb .mw-list-item a,
.vector-page-tools .mw-list-item a {
    border-radius:6px;
    transition:
        background-color .15s ease,
        transform .15s ease;
}

#p-tb .mw-list-item a:hover,
.vector-page-tools .mw-list-item a:hover {
    background:rgba(51,102,204,.06);
    transform:translateX(3px);
}


/* 当前项目 */

#p-tb .selected a,
.vector-page-tools .selected a {
    background:rgba(51,102,204,.1);
    color:#3366cc;
    font-weight:600;
}


/* ================================
   9. Dropdown Button
   ================================ */

.vector-dropdown-label {
    cursor:pointer;
}

.vector-dropdown-label:hover {
    background:rgba(51,102,204,.05);
}
/* ================================
   10. Infobox
   ================================ */

.infobox {
    background:#f8f9fa;
    border:1px solid #c8ccd1;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.infobox:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.infobox th {
    background:#eaecf0;
}


/* 顶部装饰 */

.infobox:first-child {
    border-top:3px solid #3366cc;
}


/* ================================
   11. Tables
   ================================ */

.wikitable {
    border:1px solid #c8ccd1;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.wikitable th {
    background:#f8f9fa;
}

.wikitable tr {
    transition:background-color .15s ease;
}

.wikitable tr:hover {
    background:rgba(51,102,204,.04);
}


/* ================================
   12. Images
   ================================ */

.thumbinner {
    background:#fff;
    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,.1);
}

.thumbimage img {
    transition:transform .25s ease;
}

.thumbimage:hover img {
    transform:scale(1.02);
}


/* ================================
   13. Table of Contents
   ================================ */

.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
   ================================ */

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">
 ...
 </div>
*/

.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:#fff;
    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,.25),
        rgba(0,0,0,.65)
    );
}

.mainpage-banner>* {
    position:relative;
    z-index:2;
}

.mainpage-banner h1 {
    margin:0 0 10px;
    font-size:2.8em;
    color:#fff;
    text-shadow:0 3px 12px rgba(0,0,0,.5);
}


/* ================================
   16. Main Page Modules
   ================================ */

.mainpage-module {
    background:#fff;
    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 Links
   ================================ */

.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 {
        min-height:170px;
        padding:45px 20px;
    }

    .mainpage-banner h1 {
        font-size:2.2em;
    }
}

@media(max-width:640px) {
    .mainpage-banner {
        min-height:140px;
        padding:35px 15px;
    }

    .mainpage-banner h1 {
        font-size:1.8em;
    }

    .infobox {
        max-width:100%;
    }
}


/* ================================
   20. Reduced Motion
   ================================ */

@media(prefers-reduced-motion:reduce) {
    *,
    *:before,
    *:after {
        animation:none!important;
        transition:none!important;
    }
}
/* =========================================
   Vector 2022 Page Action Tabs
   阅读 / 编辑源代码 / 查看历史
   轻微上浮动画
   ========================================= */


/* 标签按钮基础动画 */

.vector-page-toolbar a,
.vector-page-tools a,
#p-associated-pages a,
#p-cactions a {
    transition:
        transform .15s ease,
        background-color .15s ease,
        color .15s ease;
}


/* 鼠标悬停 */

.vector-page-toolbar a:hover,
.vector-page-tools a:hover,
#p-associated-pages a:hover,
#p-cactions a:hover {
    transform:translateY(-1px);
}


/* 点击瞬间 */

.vector-page-toolbar a:active,
.vector-page-tools a:active,
#p-associated-pages a:active,
#p-cactions a:active {
    transform:translateY(-2px);
}


/* 当前选中页面（例如 阅读） */

.vector-page-toolbar .selected a,
.vector-page-tools .selected a,
#p-cactions .selected a {
    transform:translateY(-1px);
}
/* =========================================
   Griffin Wiki Link Motion
   链接 / 左侧目录 微上浮动画
   ========================================= */


/* ================================
   1. 正文普通链接
   ================================ */

.mw-parser-output a {
    display:inline-block;
    transition:
        transform .14s ease,
        color .15s ease,
        background-color .15s ease;
}


.mw-parser-output a:hover {
    transform:translateY(-1px);
}


.mw-parser-output a:active {
    transform:translateY(-2px);
}



/* ================================
   2. 目录 TOC
   ================================ */


.toc a {
    display:inline-block;
    transition:
        transform .14s ease,
        color .15s ease,
        background-color .15s ease;
}


.toc a:hover {
    transform:translateY(-1px);
    color:#3366cc;
}


.toc a:active {
    transform:translateY(-2px);
}



/* ================================
   3. 左侧导航栏
   ================================ */


.vector-sidebar .mw-list-item a {
    transition:
        transform .14s ease,
        background-color .15s ease,
        color .15s ease;
}


.vector-sidebar .mw-list-item a:hover {
    transform:translateY(-1px);
    background:rgba(51,102,204,.05);
}


.vector-sidebar .mw-list-item a:active {
    transform:translateY(-2px);
}



/* ================================
   4. 当前选中目录项目
   ================================ */


.toc .active a,
.toc .selected a {
    transform:translateY(-1px);
    color:#3366cc;
    font-weight:600;
}



/* ================================
   5. 分类链接
   ================================ */


.catlinks a {
    display:inline-block;
    transition:
        transform .14s ease;
}


.catlinks a:hover {
    transform:translateY(-1px);
}
/* =========================================
   Vector 2022 Complete Menu Motion
   主选单 / 目录 / 用户选项
   ========================================= */


/* =========================================
   1. 左侧主选单
   ========================================= */


.vector-main-menu .vector-menu-content a,
.vector-main-menu .mw-list-item a {

    display:block;

    transition:
        transform .15s ease,
        background-color .15s ease,
        color .15s ease;

}



.vector-main-menu .vector-menu-content a:hover,
.vector-main-menu .mw-list-item a:hover {

    transform:
        translateY(-1px);

    background:
        rgba(51,102,204,.06);

    border-radius:
        6px;

}



.vector-main-menu .mw-list-item a:active {

    transform:
        translateY(-2px);

}



/* 当前选中页面 */

.vector-main-menu .selected a {

    transform:
        translateY(-1px);

    background:
        rgba(51,102,204,.1);

}



/* =========================================
   2. 左侧目录 TOC
   ========================================= */


.vector-toc .vector-toc-link,
.vector-toc a,
.toc a {

    display:inline-block;

    transition:

        transform .15s ease,
        color .15s ease;

}



.vector-toc a:hover,
.toc a:hover {

    transform:
        translateY(-1px);

    color:
        #3366cc;

}



.vector-toc a:active,
.toc a:active {

    transform:
        translateY(-2px);

}



/* 当前章节 */

.vector-toc .vector-toc-link--active,
.toc .active a {

    transform:
        translateY(-1px);

    color:
        #3366cc;

    font-weight:
        600;

}



/* =========================================
   3. 用户菜单
   ========================================= */


/* 用户头像 / 用户名按钮 */

.vector-user-links .vector-dropdown-label,
.vector-user-links-dropdown .vector-dropdown-label {

    transition:

        transform .15s ease,
        background-color .15s ease;

}



.vector-user-links .vector-dropdown-label:hover,
.vector-user-links-dropdown .vector-dropdown-label:hover {

    transform:
        translateY(-1px);

    background:
        rgba(51,102,204,.06);

    border-radius:
        6px;

}



.vector-user-links .vector-dropdown-label:active,
.vector-user-links-dropdown .vector-dropdown-label:active {

    transform:
        translateY(-2px);

}



/* 用户菜单内部项目 */


.vector-user-links .vector-dropdown-content a,
.vector-user-links-dropdown .vector-dropdown-content a {

    transition:

        transform .15s ease,
        background-color .15s ease;

}



.vector-user-links .vector-dropdown-content a:hover,
.vector-user-links-dropdown .vector-dropdown-content a:hover {

    transform:
        translateX(3px);

    background:
        rgba(51,102,204,.05);

}



/* =========================================
   4. 所有 Vector 2022 菜单按钮统一微动效
   ========================================= */


.vector-menu-heading,
.vector-dropdown-label {

    transition:

        transform .15s ease,
        background-color .15s ease;

}



.vector-menu-heading:hover,
.vector-dropdown-label:hover {

    transform:
        translateY(-1px);

}



.vector-menu-heading:active,
.vector-dropdown-label:active {

    transform:
        translateY(-2px);

}
取自“https://www.gov-urg.net/wiki/index.php?title=MediaWiki:Vector.css&oldid=13”