查看“MediaWiki:Vector.css”的源代码

/* 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);
}