MediaWiki:Common.css：修订间差异

2026年8月7日 (五) 05:43的最新版本

```css id="qf7x2m"
/* =========================================================
   Griffin Wiki
   MediaWiki:Common.css

   Global Wiki Visual Foundation
   ---------------------------------------------------------
   本文件用于全站通用样式。
   Vector 2022 专属样式请放在 MediaWiki:Vector.css。
   ========================================================= */


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

:root {

    /* Griffin Wiki 主色 */

    --griffin-blue: #3366cc;
    --griffin-blue-dark: #2956b8;

    --griffin-indigo: #6f7cff;

    --griffin-pink: #ff4fa3;

    /* 基础颜色 */

    --griffin-text: #202122;
    --griffin-text-secondary: #54595d;

    --griffin-background: #ffffff;
    --griffin-surface: #f8f9fa;
    --griffin-surface-light: #fbfbfb;

    --griffin-border: #eaecf0;
    --griffin-border-dark: #c8ccd1;

    /* 阴影 */

    --griffin-shadow-small:
        0 2px 8px rgba(0, 0, 0, 0.04);

    --griffin-shadow-medium:
        0 6px 18px rgba(0, 0, 0, 0.08);

    --griffin-shadow-large:
        0 10px 28px rgba(0, 0, 0, 0.12);

    /* 圆角 */

    --griffin-radius-small: 6px;
    --griffin-radius-medium: 10px;
    --griffin-radius-large: 14px;

    /* 动画 */

    --griffin-transition-fast:
        0.15s ease;

    --griffin-transition:
        0.2s ease;

    --griffin-transition-slow:
        0.3s ease;
}


/* =========================================================
   02. GLOBAL BASE
   ========================================================= */

html {
    background:
        var(--griffin-background);
}

body {
    color:
        var(--griffin-text);

    background:
        var(--griffin-background);
}


/* =========================================================
   03. TEXT SELECTION
   ========================================================= */

::selection {
    background:
        rgba(51, 102, 255, 0.18);
}

::-moz-selection {
    background:
        rgba(51, 102, 255, 0.18);
}


/* =========================================================
   04. LINKS
   ========================================================= */

a {
    transition:
        color var(--griffin-transition-fast);
}

a:hover {
    color:
        var(--griffin-blue-dark);
}


/* =========================================================
   05. GENERAL CARDS
   ========================================================= */

/*
   可以给普通 Wiki 内容添加：

   class="griffin-card"
*/

.griffin-card {

    background:
        var(--griffin-background);

    border:
        1px solid var(--griffin-border);

    border-radius:
        var(--griffin-radius-medium);

    box-shadow:
        var(--griffin-shadow-small);

    padding:
        18px 20px;

    transition:
        transform var(--griffin-transition),
        box-shadow var(--griffin-transition),
        border-color var(--griffin-transition);
}


.griffin-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #d5daf0;

    box-shadow:
        var(--griffin-shadow-medium);
}


/* =========================================================
   06. GENERAL SECTION
   ========================================================= */

.griffin-section {

    margin:
        20px 0;

    padding:
        18px 20px;

    background:
        var(--griffin-surface);

    border:
        1px solid var(--griffin-border);

    border-radius:
        var(--griffin-radius-medium);
}


/* =========================================================
   07. COLOR ACCENTS
   ========================================================= */

.griffin-blue {
    color:
        var(--griffin-blue);
}

.griffin-pink {
    color:
        var(--griffin-pink);
}

.griffin-indigo {
    color:
        var(--griffin-indigo);
}


/* =========================================================
   08. GRADIENT TITLE
   ========================================================= */

.griffin-gradient-text {

    background:
        linear-gradient(
            90deg,
            var(--griffin-blue),
            var(--griffin-indigo),
            var(--griffin-pink)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* =========================================================
   09. TABLES
   ========================================================= */

.wikitable {

    border:
        1px solid var(--griffin-border-dark);

    border-collapse:
        separate;

    border-spacing:
        0;

    border-radius:
        var(--griffin-radius-small);

    overflow:
        hidden;

    background:
        #ffffff;
}


/* 表头 */

.wikitable > tr > th,
.wikitable > * > tr > th {

    background:
        var(--griffin-surface);

    color:
        var(--griffin-text);

    border-color:
        var(--griffin-border-dark);

    font-weight:
        600;
}


/* 单元格 */

.wikitable > tr > td,
.wikitable > * > tr > td {

    border-color:
        var(--griffin-border);

    transition:
        background-color var(--griffin-transition-fast);
}


/* Hover */

.wikitable > tr:hover > td,
.wikitable > * > tr:hover > td {

    background:
        rgba(51, 102, 255, 0.025);
}


/* =========================================================
   10. INFOBOX GLOBAL POLISH
   ========================================================= */

.infobox {

    border-radius:
        var(--griffin-radius-small);

    box-shadow:
        var(--griffin-shadow-small);

    transition:
        transform var(--griffin-transition),
        box-shadow var(--griffin-transition),
        border-color var(--griffin-transition);
}


.infobox:hover {

    box-shadow:
        var(--griffin-shadow-medium);
}


/* =========================================================
   11. NOTICE / MESSAGE BOXES
   ========================================================= */

.messagebox {

    border-radius:
        var(--griffin-radius-small);

    box-shadow:
        var(--griffin-shadow-small);

    transition:
        box-shadow var(--griffin-transition);
}


.messagebox:hover {

    box-shadow:
        var(--griffin-shadow-medium);
}


/* =========================================================
   12. AMBOX
   ========================================================= */

.ambox {

    border-radius:
        var(--griffin-radius-small);

    box-shadow:
        var(--griffin-shadow-small);

    transition:
        box-shadow var(--griffin-transition);
}


.ambox:hover {

    box-shadow:
        var(--griffin-shadow-medium);
}


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

.toc {

    background:
        var(--griffin-surface);

    border:
        1px solid var(--griffin-border);

    border-radius:
        var(--griffin-radius-small);

    box-shadow:
        var(--griffin-shadow-small);

    transition:
        box-shadow var(--griffin-transition),
        border-color var(--griffin-transition);
}


.toc:hover {

    border-color:
        #d5daf0;

    box-shadow:
        var(--griffin-shadow-medium);
}


/* =========================================================
   14. CODE BLOCKS
   ========================================================= */

pre,
.mw-code {

    border:
        1px solid var(--griffin-border);

    border-radius:
        var(--griffin-radius-small);

    background:
        #f8f9fa;

    box-shadow:
        var(--griffin-shadow-small);

    transition:
        border-color var(--griffin-transition);
}


pre:hover,
.mw-code:hover {

    border-color:
        #d5daf0;
}


/* =========================================================
   15. INLINE CODE
   ========================================================= */

code {

    padding:
        2px 5px;

    border-radius:
        4px;

    background:
        #f8f9fa;

    border:
        1px solid #eaecf0;
}


/* =========================================================
   16. THUMBNAILS
   ========================================================= */

.thumbinner {

    background:
        #f8f9fa;

    border:
        1px solid var(--griffin-border);

    border-radius:
        var(--griffin-radius-small);

    box-shadow:
        var(--griffin-shadow-small);

    transition:
        transform var(--griffin-transition),
        box-shadow var(--griffin-transition);
}


.thumbinner:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--griffin-shadow-medium);
}


/* =========================================================
   17. IMAGE CAPTIONS
   ========================================================= */

.thumbcaption {

    color:
        var(--griffin-text-secondary);

    line-height:
        1.5;
}


/* =========================================================
   18. GALLERY
   ========================================================= */

.gallerybox {

    transition:
        transform var(--griffin-transition),
        box-shadow var(--griffin-transition);
}


.gallerybox:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--griffin-shadow-small);
}


/* =========================================================
   19. CATEGORY LINKS
   ========================================================= */

.catlinks {

    background:
        var(--griffin-surface);

    border:
        1px solid var(--griffin-border);

    border-radius:
        var(--griffin-radius-small);

    padding:
        8px 12px;
}


/* =========================================================
   20. HORIZONTAL RULE
   ========================================================= */

hr {

    border:
        0;

    border-top:
        1px solid var(--griffin-border);

    margin:
        24px 0;
}


/* =========================================================
   21. BLOCKQUOTES
   ========================================================= */

blockquote {

    margin:
        16px 0;

    padding:
        12px 18px;

    border-left:
        4px solid var(--griffin-blue);

    background:
        var(--griffin-surface);

    border-radius:
        0 var(--griffin-radius-small)
        var(--griffin-radius-small) 0;

    color:
        var(--griffin-text-secondary);
}


/* =========================================================
   22. SMALL UI LABEL
   ========================================================= */

.griffin-label {

    display:
        inline-block;

    padding:
        3px 9px;

    border-radius:
        999px;

    background:
        rgba(51, 102, 255, 0.08);

    color:
        var(--griffin-blue);

    font-size:
        0.85em;

    font-weight:
        600;
}


/* =========================================================
   23. STATUS LABEL
   ========================================================= */

.griffin-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        4px 9px;

    border-radius:
        999px;

    background:
        #f8f9fa;

    border:
        1px solid var(--griffin-border);

    font-size:
        0.85em;
}


.griffin-status::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #36a269;
}


/* =========================================================
   24. SPECIAL HIGHLIGHT BOX
   ========================================================= */

.griffin-highlight {

    position:
        relative;

    padding:
        18px 20px;

    background:
        linear-gradient(
            135deg,
            rgba(51, 102, 255, 0.055),
            rgba(255, 79, 163, 0.035)
        );

    border:
        1px solid rgba(51, 102, 255, 0.12);

    border-radius:
        var(--griffin-radius-medium);

    overflow:
        hidden;
}


/* Highlight 左侧装饰 */

.griffin-highlight::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    bottom:
        0;

    width:
        3px;

    background:
        linear-gradient(
            180deg,
            var(--griffin-blue),
            var(--griffin-pink)
        );
}


/* =========================================================
   25. PAGE NOTICE
   ========================================================= */

.griffin-notice {

    padding:
        14px 18px;

    margin:
        15px 0;

    background:
        #f8f9fa;

    border:
        1px solid var(--griffin-border);

    border-left:
        4px solid var(--griffin-blue);

    border-radius:
        0 var(--griffin-radius-small)
        var(--griffin-radius-small) 0;
}


/* =========================================================
   26. SIMPLE FADE ANIMATION
   ========================================================= */

.griffin-fade {

    animation:
        griffinGlobalFade 0.4s ease-out;
}

@keyframes griffinGlobalFade {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }
}


/* =========================================================
   27. SIMPLE FLOAT ANIMATION
   ========================================================= */

.griffin-float {

    animation:
        griffinFloat 4s ease-in-out infinite;
}

@keyframes griffinFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-3px);
    }
}


/* =========================================================
   28. SCROLLBAR
   ========================================================= */

/*
   只在支持自定义 scrollbar 的浏览器中生效。
*/

::-webkit-scrollbar {

    width:
        9px;

    height:
        9px;
}


::-webkit-scrollbar-track {

    background:
        #f8f9fa;
}


::-webkit-scrollbar-thumb {

    background:
        #c8ccd1;

    border-radius:
        999px;

    border:
        2px solid #f8f9fa;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #a2a9b1;
}


/* =========================================================
   29. RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {

    .griffin-card,
    .griffin-section {

        padding:
            14px 15px;
    }

    .wikitable {

        font-size:
            0.95em;
    }

    .griffin-highlight {

        padding:
            15px 16px;
    }
}


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

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

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

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;
    }
}


/* =========================================================
   END OF GRIFFIN WIKI COMMON.CSS
   ========================================================= */
```