MediaWiki:Kuranoka.css：修订间差异

2026年10月19日 (一) 23:49的版本

/* ==========================================
   Kuranoka · Summer Sky Theme
   Blockland Wiki / Citizen Skin
   ========================================== */

/* ---------- 1. 夏季晴空背景 ---------- */

body.skin-citizen {
    background-image:
        linear-gradient(
            to bottom,
            rgba(145, 200, 255, 0.06),
            rgba(255, 255, 255, 0.12)
        ),
        url("这里替换成你的天空图片URL") !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #9acbf2 !important;

    /* 让默认页面底色透明 */
    --color-surface-0: transparent;
}

/* ---------- 2. 正文毛玻璃面板 ---------- */

body.skin-citizen .citizen-body-container {
    background: rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;

    box-shadow:
        0 8px 32px rgba(40, 85, 135, 0.12);
}

/* ---------- 3. 正文内部保持透明 ---------- */

body.skin-citizen .mw-body,
body.skin-citizen .mw-parser-output,
body.skin-citizen .citizen-page-container {
    background-color: transparent !important;
}

/* ---------- 4. 顶部导航毛玻璃 ---------- */

body.skin-citizen .citizen-header {
    background: rgba(255, 255, 255, 0.65) !important;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* ---------- 5. 正文标题与文字 ---------- */

body.skin-citizen .mw-body {
    color: #253951;
}

body.skin-citizen .mw-body h1,
body.skin-citizen .mw-body h2,
body.skin-citizen .mw-body h3,
body.skin-citizen .mw-body h4 {
    color: #203650;
}

/* ---------- 6. 链接主题色 ---------- */

body.skin-citizen {
    --color-primary: #428fda;
    --color-link: #327bc8;
    --color-link--visited: #6b7fca;
}

/* ---------- 7. 目录与正文协调 ---------- */

body.skin-citizen .citizen-toc {
    background: rgba(255, 255, 255, 0.88) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;

    box-shadow:
        0 6px 24px rgba(40, 85, 135, 0.10);
}

/* ---------- 8. 深色模式 ---------- */

html.skin-theme-clientpref-night body.skin-citizen {
    --color-surface-0: transparent;
}

html.skin-theme-clientpref-night
body.skin-citizen .citizen-body-container {
    background: rgba(24, 34, 52, 0.88) !important;

    border-color: rgba(180, 210, 255, 0.12);
}

html.skin-theme-clientpref-night
body.skin-citizen .mw-body,
html.skin-theme-clientpref-night
body.skin-citizen .mw-body h1,
html.skin-theme-clientpref-night
body.skin-citizen .mw-body h2,
html.skin-theme-clientpref-night
body.skin-citizen .mw-body h3 {
    color: #e8f1ff;
}

/* ---------- 9. 移动端优化 ---------- */

@media (max-width: 768px) {

    body.skin-citizen {
        background-attachment: scroll !important;
    }

    body.skin-citizen .citizen-body-container {
        border-radius: 8px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* ---------- 10. 减少动态效果 ---------- */

@media (prefers-reduced-motion: reduce) {
    body.skin-citizen {
        background-attachment: scroll !important;
    }
}