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

/* =========================================================
   Griffin Wiki
   MediaWiki:Vector.css

   Vector 2022 Custom Theme
   Clean Edition
   ========================================================= */


/* =========================================================
   01. GLOBAL
   ========================================================= */

html {
    scroll-behavior: smooth;
}


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


/* 全局过渡 */

a,
button,
input,
.vector-dropdown-label {
    transition:
        color .2s ease,
        background-color .2s ease,
        transform .15s ease,
        box-shadow .2s ease;
}



/* =========================================================
   02. HEADER
   ========================================================= */


.vector-header-container {

    background:
        #ffffff !important;

    border-bottom:
        1px solid #eaecf0;

    transition:
        box-shadow .25s ease,
        background-color .25s ease;
}


.vector-header-container:hover {

    box-shadow:
        0 3px 15px rgba(0,0,0,.06);
}



/* =========================================================
   03. LOGO AREA
   ========================================================= */


.vector-header-start button {

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


.vector-header-start button:hover {

    transform:
        translateY(-1px);

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

    border-radius:
        6px;
}


.vector-header-start button:active {

    transform:
        translateY(-2px)
        scale(.97);
}



/* =========================================================
   04. RIGHT HEADER FUNCTIONS
   ========================================================= */


/*
  右侧：
  搜索
  外观
  工具
  用户菜单

  只做轻微交互
*/


.vector-header-end .vector-dropdown-label {

    transform:
        translateY(0);

    border-radius:
        6px;
}


.vector-header-end
.vector-dropdown-label:hover {

    transform:
        translateY(-1px);

    background:
        rgba(51,102,255,.05);
}


.vector-header-end
.vector-dropdown-label:active {

    transform:
        translateY(-1.5px);
}


/* 打开状态 */

.vector-header-end
.vector-dropdown[aria-expanded="true"]
.vector-dropdown-label {

    transform:
        translateY(-1px);
}



/* =========================================================
   05. DROPDOWN ANIMATION
   ========================================================= */


.vector-header-end
.vector-dropdown-content {


    opacity:
        0;


    transform:

        translateY(-4px)
        scale(.98);


    transform-origin:
        top right;


    transition:

        opacity .18s ease,
        transform .18s ease;

}



.vector-header-end
.vector-dropdown[aria-expanded="true"]
.vector-dropdown-content {


    opacity:
        1;


    transform:

        translateY(0)
        scale(1);

}



/* 菜单项目 */


.vector-header-end
.vector-dropdown-content
.mw-list-item a {


    transition:

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

}



.vector-header-end
.vector-dropdown-content
.mw-list-item a:hover {


    transform:
        translateX(3px);


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

}



/* =========================================================
   06. SIDEBAR
   ========================================================= */


.vector-sidebar {

    background:
        #fbfbfb !important;

    border-right:
        1px solid #eaecf0;
}



.vector-sidebar
.vector-menu-heading {


    border-radius:
        6px;


    cursor:
        pointer;


    transition:

        background-color .2s ease,
        padding-left .2s ease;

}



.vector-sidebar
.vector-menu-heading:hover {


    background:

        rgba(51,102,255,.06);


    padding-left:
        4px;

}



/* Sidebar 链接 */


.vector-sidebar
a {


    transition:

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

}



.vector-sidebar
a:hover {


    transform:
        translateX(3px);

}



/* =========================================================
   07. SIDEBAR MENU MOTION
   ========================================================= */


.vector-sidebar
.vector-menu-content {


    transition:

        opacity .25s ease,
        transform .25s ease;

}



/*
   不改变 display
   避免破坏 Vector JS
*/


.vector-sidebar
.vector-menu-content {


    opacity:
        .98;

    transform:
        translateX(0);

}



/* =========================================================
   08. PAGE FADE
   ========================================================= */


.mw-page-container,
.mw-content-container {


    animation:

        griffinFade .3s ease-out;

}



@keyframes griffinFade {


    from {

        opacity:
            0;

    }


    to {

        opacity:
            1;

    }

}



/* =========================================================
   09. HEADINGS
   ========================================================= */


.mw-first-heading {


    position:
        relative;

    padding-bottom:
        10px;

}



.mw-first-heading::after {


    content:
        "";

    display:
        block;


    width:
        60px;


    height:
        3px;


    margin-top:
        8px;


    border-radius:
        3px;


    background:

        linear-gradient(
            90deg,
            #3366cc,
            #6f7cff,
            #ff4fa3
        );

}



.mw-parser-output h2 {


    border-bottom:
        1px solid #eaecf0;

    padding-bottom:
        6px;

}
/* =========================================================
   10. INFOBOX
   ========================================================= */


.infobox {

    background:
        #f8f9fa !important;


    border:
        1px solid #c8ccd1;


    border-radius:
        8px;


    box-shadow:

        0 2px 8px rgba(0,0,0,.05);


    overflow:
        hidden;


    transition:

        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}



.infobox:hover {


    transform:

        translateY(-2px);


    border-color:

        #b8c2d9;


    box-shadow:

        0 8px 22px rgba(0,0,0,.10);

}



/* Infobox 顶部装饰线 */


.infobox::before {


    content:
        "";


    display:
        block;


    height:
        3px;


    background:

        linear-gradient(
            90deg,
            #3366cc,
            #6f7cff,
            #ff4fa3
        );

}




/* =========================================================
   11. TABLE
   ========================================================= */


.wikitable {


    border:

        1px solid #c8ccd1;


    border-radius:

        8px;


    overflow:

        hidden;


    box-shadow:

        0 2px 8px rgba(0,0,0,.04);

}



.wikitable th {


    background:

        #f8f9fa;


    font-weight:

        600;

}



.wikitable tr {


    transition:

        background-color .15s ease;

}



.wikitable tr:hover {


    background:

        rgba(51,102,255,.035);

}




/* =========================================================
   12. IMAGES
   ========================================================= */


.thumbinner {


    background:

        #ffffff;


    border:

        1px solid #eaecf0;


    border-radius:

        8px;


    box-shadow:

        0 2px 8px rgba(0,0,0,.05);


    transition:

        transform .25s ease,
        box-shadow .25s ease;

}



.thumbinner:hover {


    transform:

        translateY(-3px);


    box-shadow:

        0 8px 20px rgba(0,0,0,.10);

}



.thumbinner img {


    transition:

        transform .25s ease;

}



.thumbinner:hover img {


    transform:

        scale(1.02);

}




/* =========================================================
   13. TOC
   ========================================================= */


.toc {


    background:

        #f8f9fa;


    border:

        1px solid #eaecf0;


    border-radius:

        8px;


    box-shadow:

        0 2px 8px rgba(0,0,0,.04);

}



.toc a:hover {


    color:

        #3366cc;

}




/* =========================================================
   14. CODE BLOCK
   ========================================================= */


pre,
.mw-code {


    background:

        #f8f9fa;


    border:

        1px solid #eaecf0;


    border-radius:

        8px;


    padding:

        12px;

}




code {


    background:

        #f8f9fa;


    border:

        1px solid #eaecf0;


    border-radius:

        4px;


    padding:

        2px 5px;

}




/* =========================================================
   15. MAIN PAGE BANNER
   ========================================================= */


/*
   使用方法：

   <div class="mainpage-banner">
       <h1>标题</h1>
       <p>介绍</p>
   </div>


   修改下面 URL 为你的图片
*/


.mainpage-banner {


    position:

        relative;


    overflow:

        hidden;


    min-height:

        220px;


    margin:

        20px 0;


    padding:

        60px 30px;


    display:

        flex;


    flex-direction:

        column;


    justify-content:

        center;


    align-items:

        center;


    text-align:

        center;


    color:

        white;


    border-radius:

        14px;


    background:

        #1f2a44;


    box-shadow:

        0 8px 28px rgba(0,0,0,.12);

}




.mainpage-banner::before {


    content:

        "";


    position:

        absolute;


    inset:

        0;


    background-image:


        url("https://example.com/banner.jpg");



    background-size:

        cover;


    background-position:

        center;


    filter:

        brightness(.65);


    transition:

        transform 8s ease;

}



.mainpage-banner:hover::before {


    transform:

        scale(1.06);

}




.mainpage-banner::after {


    content:

        "";


    position:

        absolute;


    inset:

        0;


    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.2),

            rgba(0,0,0,.6)

        );

}




.mainpage-banner > * {


    position:

        relative;


    z-index:

        2;

}




.mainpage-banner h1 {


    font-size:

        2.8em;


    margin:

        0 0 10px;


    color:

        #ffffff;


    text-shadow:

        0 3px 12px rgba(0,0,0,.5);

}





/* =========================================================
   16. MAIN PAGE MODULE
   ========================================================= */


.mainpage-module {


    background:

        #ffffff;


    border:

        1px solid #eaecf0;


    border-radius:

        10px;


    padding:

        18px;


    margin-bottom:

        18px;


    box-shadow:

        0 2px 8px rgba(0,0,0,.04);


    transition:

        transform .25s ease,
        box-shadow .25s ease;

}



.mainpage-module:hover {


    transform:

        translateY(-3px);


    box-shadow:

        0 8px 22px rgba(0,0,0,.08);

}




/* =========================================================
   17. CATEGORY / NOTICE
   ========================================================= */


.catlinks {


    background:

        #f8f9fa;


    border:

        1px solid #eaecf0;


    border-radius:

        8px;


    padding:

        8px 12px;

}





/* =========================================================
   18. SCROLLBAR
   ========================================================= */


::-webkit-scrollbar {


    width:

        9px;

}



::-webkit-scrollbar-track {


    background:

        #f8f9fa;

}



::-webkit-scrollbar-thumb {


    background:

        #c8ccd1;


    border-radius:

        10px;

}



::-webkit-scrollbar-thumb:hover {


    background:

        #a2a9b1;

}





/* =========================================================
   19. RESPONSIVE
   ========================================================= */


@media(max-width:900px){


    .mainpage-banner {


        padding:

            45px 20px;

    }


    .mainpage-banner h1 {


        font-size:

            2.2em;

    }

}





@media(max-width:640px){


    .infobox {


        max-width:

            100%;

    }



    .mainpage-banner {


        min-height:

            160px;


        padding:

            35px 15px;

    }



    .mainpage-banner h1 {


        font-size:

            1.8em;

    }

}




/* =========================================================
   20. REDUCED MOTION
   ========================================================= */


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after {


        animation:

            none !important;


        transition:

            none !important;

    }

}


/* =========================================================
   END OF VECTOR.CSS
   ========================================================= */