MediaWiki:Vector.css：修订间差异

来自格里芬Wiki
（创建页面，内容为“→‎此处所有CSS将为使用Vector皮肤的用户加载：​ ```css /* ========================================================= Griffin Wiki MediaWiki:Vector.css Vector 2022 Complete Visual Enhancement ========================================================= 基础： - Vector 2022 - 白色主题 - 现代化视觉增强 - 轻量动画 - Sidebar / Main Menu 动画 - 首页专属视觉 ======================================…”）
 
无编辑摘要
 
（未显示同一用户的8个中间版本）
第1行： 第1行：
/* 此处所有CSS将为使用Vector皮肤的用户加载 */
/* MediaWiki:Vector.css
```css
   Griffin Wiki - Vector 2022 Clean Theme
/* =========================================================
   Part 1/2
  Griffin Wiki
*/
  MediaWiki:Vector.css
   Vector 2022 Complete Visual Enhancement
   =========================================================


  基础：
/* ================================
  - Vector 2022
   1. Global
  - 白色主题
   ================================ */
   - 现代化视觉增强
   - 轻量动画
  - Sidebar / Main Menu 动画
  - 首页专属视觉


  ========================================================= */
html {
    scroll-behavior:smooth;
}


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


/* =========================================================
a {
  01. GLOBAL BASE
     transition:color .2s ease,background-color .2s ease,transform .15s ease;
  ========================================================= */
 
html {
     scroll-behavior: smooth;
}
}


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:
     transition:box-shadow .25s ease;
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
}


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




/* =========================================================
/* Logo */
  03. PAGE CONTAINER
  ========================================================= */


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


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




/* =========================================================
/* 左侧主菜单按钮 */
  04. CONTENT AREA
  ========================================================= */


.mw-content-container {
.vector-header-start .mw-ui-icon {
     background: #ffffff !important;
     transition:transform .15s ease;
 
    animation: griffinContentRise 0.4s ease-out;
}
}


@keyframes griffinContentRise {
.vector-header-start button:hover .mw-ui-icon {
     from {
     transform:scale(1.08);
        opacity: 0;
        transform: translateY(8px);
    }
 
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
}




/* =========================================================
/* ================================
   05. GLOBAL TRANSITIONS
   3. Right Header Functions
   ========================================================= */
   ================================ */


a,
.vector-header-end .vector-dropdown-label {
button,
    border-radius:6px;
input,
select,
textarea,
.mw-ui-button,
.vector-menu-heading,
.vector-pinnable-element,
.infobox,
.thumbinner,
.mw-parser-output li {
     transition:
     transition:
         color 0.2s ease,
         transform .15s ease,
         background-color 0.2s ease,
         background-color .2s ease;
        border-color 0.2s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}
}


 
.vector-header-end .vector-dropdown-label:hover {
/* =========================================================
    transform:translateY(-1px);
  06. LINKS
     background:rgba(51,102,204,.06);
  ========================================================= */
 
a {
     color: #3366cc;
}
}


a:visited {
.vector-header-end .vector-dropdown-label:active {
     color: #6b5cff;
     transform:translateY(-1px) scale(.98);
}
}


a:hover {
    color: #2956b8;
}


/* 搜索按钮 */


/* 正文链接轻微上浮 */
.vector-search-box-input {
    border-radius:8px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.mw-parser-output a:hover {
.vector-search-box-input:focus {
     text-decoration: underline;
     border-color:#3366cc;
    box-shadow:0 0 0 2px rgba(51,102,204,.15);
}
}




/* =========================================================
/* ================================
   07. BUTTONS
   4. Sidebar
   ========================================================= */
   ================================ */


button:hover,
.vector-sidebar {
input[type="submit"]:hover,
     background:#fff;
input[type="button"]:hover,
.mw-ui-button:hover {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
}


button:active,
.vector-sidebar .vector-menu-heading {
input[type="submit"]:active,
    border-radius:6px;
input[type="button"]:active,
    transition:
.mw-ui-button:active {
        background-color .2s ease,
    transform: scale(0.97);
        padding-left .15s ease;
}
}


 
.vector-sidebar .vector-menu-heading:hover {
/* =========================================================
     background:rgba(51,102,204,.06);
  08. VECTOR SIDEBAR
     padding-left:4px;
  ========================================================= */
 
.vector-sidebar {
     background: #fbfbfb !important;
     border-right: 1px solid #eaecf0;
}
}




/* Sidebar 模块 */
.vector-sidebar .vector-menu-content a {
 
     border-radius:6px;
.vector-sidebar .vector-pinnable-element {
     border-radius: 8px;
 
     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-menu-content a:hover {
/* Sidebar 模块 Hover */
     background:rgba(51,102,204,.05);
 
    transform:translateX(3px);
.vector-sidebar .vector-pinnable-element:hover {
     background: rgba(51, 102, 255, 0.025);
}
}




/* 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: rgba(51, 102, 255, 0.06);
     transform:translateY(-2px);
    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);
    }
}


/* =========================================================
  09. SIDEBAR EXPAND / COLLAPSE
  ========================================================= */


/*
/* ================================
   Vector 2022 菜单内容动画。
   7. Headings
   不强制隐藏菜单，仅在已有展开状态时增强动画。
   ================================ */
*/


.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);
}




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


.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;
}
}




/* 错落出现 */
/* ================================
  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 {
  10. LOGO LEFT MAIN MENU
    border-top:3px solid #3366cc;
  ========================================================= */
}


/*
  Vector 2022 Logo 左侧主菜单。
  使用多个选择器兼容不同 MediaWiki 版本。
*/


.vector-main-menu,
/* ================================
#vector-main-menu,
  11. Tables
#vector-main-menu-dropdown {
  ================================ */
    transform-origin: top left;


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


.wikitable th {
    background:#f8f9fa;
}


/* 主菜单打开 */
.wikitable tr {
    transition:background-color .15s ease;
}


.vector-main-menu--open,
.wikitable tr:hover {
.vector-main-menu.vector-menu-open,
     background:rgba(51,102,204,.04);
#vector-main-menu-dropdown.vector-menu-open,
.vector-dropdown--open {
     opacity: 1;
    transform: translateY(0) scale(1);
}
}




/* 主菜单项目 */
/* ================================
  12. Images
  ================================ */


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


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


/* 主菜单 Hover */
.thumbimage img {
    transition:transform .25s ease;
}


.vector-main-menu a:hover,
.thumbimage:hover img {
#vector-main-menu a:hover {
     transform:scale(1.02);
     transform: translateX(3px);
}
}




/* =========================================================
/* ================================
   11. MAIN MENU BUTTON
   13. Table of Contents
   ========================================================= */
   ================================ */


.vector-header-start button,
.toc {
.vector-header-start .mw-ui-icon {
     background:#f8f9fa;
     transition:
    border:1px solid #eaecf0;
        transform 0.15s ease,
    border-radius:8px;
        background-color 0.2s ease,
    box-shadow:0 2px 8px rgba(0,0,0,.04);
        box-shadow 0.2s ease;
}
 
.vector-header-start button:hover {
    transform: scale(1.04);
}
}


.vector-header-start button:active {
.toc a:hover {
     transform: scale(0.92);
     color:#3366cc;
}
}




/* =========================================================
/* ================================
   12. CONTENT HEADINGS
   14. Code
   ========================================================= */
   ================================ */
 
.mw-first-heading {
    position: relative;
 
    padding-bottom: 10px;


     animation:
pre,
        griffinTitleFade 0.45s ease-out;
.mw-code {
     background:#f8f9fa;
    border:1px solid #eaecf0;
    border-radius:8px;
    padding:12px;
}
}


@keyframes griffinTitleFade {
code {
     from {
     background:#f8f9fa;
        opacity: 0;
    border:1px solid #eaecf0;
        transform: translateY(5px);
     border-radius:4px;
     }
    padding:2px 5px;
 
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
}




/* 主标题装饰线 */
/* ================================
  15. Main Page Banner
  ================================ */


.mw-first-heading::after {
/*
    content: "";
使用:
<div class="mainpage-banner">
...
</div>
*/


     display: block;
.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);
}


     width: 60px;
.mainpage-banner:before {
     height: 3px;
    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;
}


    margin-top: 8px;
.mainpage-banner:hover:before {
 
     transform:scale(1.06);
     border-radius: 3px;
}


     background: linear-gradient(
.mainpage-banner:after {
         90deg,
    content:"";
         #3366ff,
    position:absolute;
         #6f7cff,
    inset:0;
        #ff4fa3
     background:linear-gradient(
         180deg,
         rgba(0,0,0,.25),
         rgba(0,0,0,.65)
     );
     );
}


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


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


@keyframes griffinTitleLine {
    from {
        width: 0;
        opacity: 0;
    }


     to {
/* ================================
        width: 60px;
  16. Main Page Modules
        opacity: 1;
  ================================ */
     }
 
.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);
}


/* =========================================================
  13. SECTION HEADINGS
  ========================================================= */


.mw-parser-output h2 {
/* ================================
    position: relative;
  17. Category Links
  ================================ */


     animation:
.catlinks {
        griffinSectionFade 0.3s ease-out;
    background:#f8f9fa;
     border:1px solid #eaecf0;
    border-radius:8px;
    padding:8px 12px;
}
}


@keyframes griffinSectionFade {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }


    to {
/* ================================
        opacity: 1;
  18. Scrollbar
        transform: translateX(0);
  ================================ */
    }
 
::-webkit-scrollbar {
    width:9px;
}
}


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


/* H2 左侧装饰条 */
::-webkit-scrollbar-thumb {
    background:#c8ccd1;
    border-radius:10px;
}


.mw-parser-output h2::before {
::-webkit-scrollbar-thumb:hover {
     content: "";
     background:#a2a9b1;
}


    position: absolute;


    left: -10px;
/* ================================
    top: 50%;
  19. Responsive
  ================================ */


    width: 3px;
@media(max-width:900px) {
     height: 16px;
     .mainpage-banner {
        min-height:170px;
        padding:45px 20px;
    }


     border-radius: 3px;
     .mainpage-banner h1 {
        font-size:2.2em;
    }
}


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


     transform:
     .mainpage-banner h1 {
         translateY(-50%)
         font-size:1.8em;
        scaleY(0);
    }


     transform-origin: center;
     .infobox {
 
         max-width:100%;
    animation: griffinHeadingBar 0.4s ease-out forwards;
}
 
@keyframes griffinHeadingBar {
    to {
         transform:
            translateY(-50%)
            scaleY(1);
     }
     }
}
}




/* =========================================================
/* ================================
   14. INFOBOX
   20. Reduced Motion
   ========================================================= */
   ================================ */


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


    background: #f8f9fa !important;


    border: 1px solid #c8ccd1;
/* 标签按钮基础动画 */


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




/* Infobox Hover */
/* 鼠标悬停 */
 
.infobox:hover {
    transform: translateY(-2px);
 
    border-color: #b8c2d9;


    box-shadow:
.vector-page-toolbar a:hover,
        0 8px 22px rgba(0, 0, 0, 0.10);
.vector-page-tools a:hover,
#p-associated-pages a:hover,
#p-cactions a:hover {
    transform:translateY(-1px);
}
}




/* Infobox 顶部扫描线 */
/* 点击瞬间 */


.infobox::before {
.vector-page-toolbar a:active,
    content: "";
.vector-page-tools a:active,
 
#p-associated-pages a:active,
    position: absolute;
#p-cactions a:active {
 
     transform:translateY(-2px);
    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:
.vector-page-toolbar .selected a,
        griffinScanline 5s linear infinite;
.vector-page-tools .selected a,
#p-cactions .selected a {
     transform:translateY(-1px);
}
}
/* =========================================
  Griffin Wiki Link Motion
  链接 / 左侧目录 微上浮动画
  ========================================= */


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


    to {
/* ================================
        transform: translateX(50%);
   1. 正文普通链接
    }
   ================================ */
}
 
 
/* =========================================================
   15. IMAGES
   ========================================================= */


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


.thumbinner:hover {
 
     box-shadow:
.mw-parser-output a:hover {
        0 6px 18px rgba(0, 0, 0, 0.08);
     transform:translateY(-1px);
}
}


.thumbinner img {
    transition:
        transform 0.25s ease;
}


.thumbinner img:hover {
.mw-parser-output a:active {
     transform: scale(1.02);
     transform:translateY(-2px);
}
}




/* =========================================================
  16. LIST INTERACTION
  ========================================================= */


.mw-parser-output li {
/* ================================
    transition:
  2. 目录 TOC
        transform 0.15s ease;
  ================================ */
}


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


 
.toc a {
/* =========================================================
    display:inline-block;
  17. SEARCH / INPUT POLISH
  ========================================================= */
 
input,
textarea,
select {
     transition:
     transition:
         border-color 0.2s ease,
         transform .14s ease,
         box-shadow 0.2s ease,
         color .15s ease,
         background-color 0.2s ease;
         background-color .15s ease;
}
}


input:focus,
textarea:focus,
select:focus {
    border-color: #3366cc;


     box-shadow:
.toc a:hover {
        0 0 0 2px rgba(51, 102, 204, 0.12);
     transform:translateY(-1px);
 
     color:#3366cc;
     outline: none;
}
}




/* =========================================================
.toc a:active {
  18. SUBTLE PAGE DECORATION
     transform:translateY(-2px);
  ========================================================= */
 
/*
  极轻的页面背景装饰。
  不覆盖 Vector 的白色主体。
*/
 
.mw-body {
     position: relative;
}
}




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


/*
/* ================================
   以下规则仅用于主页。
   3. 左侧导航栏
   需要配合 Main Page 中的：
   ================================ */
 
  <div class="mainpage-banner">
      ...
  </div>
*/




body.page-Main_Page .mw-body {
.vector-sidebar .mw-list-item a {
     max-width: 1200px;
     transition:
        transform .14s ease,
        background-color .15s ease,
        color .15s ease;
}
}




/* =========================================================
.vector-sidebar .mw-list-item a:hover {
  20. MAIN PAGE BANNER
    transform:translateY(-1px);
  ========================================================= */
    background:rgba(51,102,204,.05);
}


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


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


    margin:
        10px 0 30px;


    padding:
        70px 30px;


    min-height: 220px;
/* ================================
  4. 当前选中目录项目
  ================================ */


    display: flex;


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


    justify-content: center;


    align-items: center;


    text-align: center;
/* ================================
  5. 分类链接
  ================================ */


    color: #ffffff !important;


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


    background:
        #1f2a44;


     box-shadow:
.catlinks a:hover {
        0 8px 28px rgba(0, 0, 0, 0.12);
     transform:translateY(-1px);
}
}
/* =========================================
  Vector 2022 Complete Menu Motion
  主选单 / 目录 / 用户选项
  ========================================= */




/* =========================================================
/* =========================================
   21. MAIN PAGE BANNER IMAGE
   1. 左侧主选单
   ========================================================= */
   ========================================= */


/*
  将下面的 URL：


  https://example.com/your-banner.jpg
.vector-main-menu .vector-menu-content a,
.vector-main-menu .mw-list-item a {


  替换为你的图片地址。
    display:block;
*/


body.page-Main_Page .mainpage-banner::before {
    transition:
    content: "";
        transform .15s ease,
        background-color .15s ease,
        color .15s ease;


    position: absolute;
}


    inset: 0;


    z-index: 0;


    background-image:
.vector-main-menu .vector-menu-content a:hover,
        url("https://example.com/your-banner.jpg");
.vector-main-menu .mw-list-item a:hover {


     background-size: cover;
     transform:
        translateY(-1px);


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


     background-repeat: no-repeat;
     border-radius:
        6px;


    filter: brightness(0.72);
}


    transform: scale(1.03);


    transition:
        transform 8s ease;
}


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


/* Banner Hover 时背景缓慢放大 */
    transform:
        translateY(-2px);


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;
.vector-main-menu .selected a {


     inset: 0;
     transform:
 
        translateY(-1px);
    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;
}
}




/* Banner 内容放到图片上层 */


body.page-Main_Page .mainpage-banner > * {
/* =========================================
    position: relative;
  2. 左侧目录 TOC
  ========================================= */


    z-index: 2;
}


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


/* =========================================================
    display:inline-block;
  23. MAIN PAGE TITLE
  ========================================================= */


body.page-Main_Page .mainpage-banner h1 {
     transition:
     margin: 0 0 12px;
 
    font-size: 2.8em;
 
    font-weight: 700;
 
    letter-spacing: 1px;
 
    color: #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;
        transform: translateY(12px);
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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


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


body.page-Main_Page .mainpage-banner em,
     color:
body.page-Main_Page .mainpage-banner p {
        #3366cc;
     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 {
.vector-toc a:active,
    max-width: 900px;
.toc a:active {


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


    padding:
}
        20px 24px;


    background: #f8f9fa;


    border:
        1px solid #eaecf0;


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


    line-height: 1.8;
.vector-toc .vector-toc-link--active,
.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;
         transform: translateY(8px);
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}
}




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


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


    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,
    transform: translateY(-3px);
.vector-user-links-dropdown .vector-dropdown-label:hover {


     border-color:
     transform:
         #d5daf0;
         translateY(-1px);


     box-shadow:
     background:
         0 8px 22px rgba(0, 0, 0, 0.08);
         rgba(51,102,204,.06);
}


    border-radius:
        6px;


/* 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 {
.vector-user-links .vector-dropdown-label:active,
    display: flex;
.vector-user-links-dropdown .vector-dropdown-label:active {


     align-items: flex-start;
     transform:
        translateY(-2px);


    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 {
.vector-user-links .vector-dropdown-content a,
    margin-bottom:
.vector-user-links-dropdown .vector-dropdown-content a {
        6px;


     transition:
     transition:
        transform 0.15s ease;
}


body.page-Main_Page .mainpage-module li:hover {
        transform .15s ease,
    transform:
        background-color .15s ease;
        translateX(3px);
 
}
}




/* =========================================================
  28. MAIN PAGE RESPONSIVE
  ========================================================= */


@media (max-width: 900px) {
.vector-user-links .vector-dropdown-content a:hover,
.vector-user-links-dropdown .vector-dropdown-content a:hover {


     body.page-Main_Page .mainpage-columns {
     transform:
         flex-direction: column;
         translateX(3px);
    }


     body.page-Main_Page .mainpage-left,
     background:
    body.page-Main_Page .mainpage-right {
        rgba(51,102,204,.05);
        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;
    }
}


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


/* =========================================================
  29. MOBILE OPTIMIZATION
  ========================================================= */


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


     .mw-content-container {
     transition:
        padding-left: 12px;
        padding-right: 12px;
    }


    body.page-Main_Page .mainpage-banner {
        transform .15s ease,
        margin:
        background-color .15s ease;
            5px 0 20px;


        border-radius:
}
            8px;


        min-height:
            160px;


        padding:
            40px 15px;
    }


    body.page-Main_Page .mainpage-banner h1 {
.vector-menu-heading:hover,
        font-size:
.vector-dropdown-label:hover {
            1.9em;


         letter-spacing:
    transform:
            0.5px;
         translateY(-1px);
    }


    body.page-Main_Page .mainpage-module {
        padding:
            15px;
    }
}
}




/* =========================================================
  30. REDUCED MOTION
  ========================================================= */


/*
.vector-menu-heading:active,
  如果用户系统启用了“减少动态效果”，
.vector-dropdown-label:active {
  自动关闭循环/位移动画。
*/


@media (prefers-reduced-motion: reduce) {
    transform:
        translateY(-2px);


    *,
    *::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
  ========================================================= */
```

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”