MediaWiki:Kuranoka.css：修订间差异

2026年10月20日 (二) 00:00的版本

/* =============================================
   Kuranoka · Beyond the Sky
   Transparent Glass Edition
   Blockland Wiki / Citizen
   ============================================= */

/* ---------- 1. 背景：不加任何遮罩 ---------- */

body.skin-citizen {
    background-color: #777eb5 !important;

    background-image:
        url("https://i.postimg.cc/VL43HCvj/72af46ed-af75-4059-b45d-1123d712f39b.png") !important;

    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;

    --color-surface-0: transparent;

    --color-primary: #729adb;
    --color-link: #477fbf;
    --color-link--visited: #837bc4;
}

/* ---------- 2. 外围完全透明 ---------- */

body.skin-citizen .citizen-body-container,
body.skin-citizen .citizen-page-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---------- 3. 正文：轻薄毛玻璃 ---------- */

body.skin-citizen .mw-body {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.50),
        rgba(255, 255, 255, 0.44)
    ) !important;

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

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;

    box-shadow:
        0 6px 26px rgba(32, 44, 88, 0.08);

    padding: 24px;
    color: #253650;
}

/* ---------- 4. 正文内部透明 ---------- */

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

/* ---------- 5. 标题颜色 ---------- */

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: #304b72;
}

/* ---------- 6. 顶部导航：轻薄玻璃 ---------- */

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

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

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

/* ---------- 7. 目录：更加通透 ---------- */

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

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

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

    box-shadow:
        0 5px 22px rgba(32, 44, 88, 0.07);
}

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

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

    --color-primary: #a5b9f0;
    --color-link: #a1c6ff;
    --color-link--visited: #c2b2ff;
}

html.skin-theme-clientpref-night
body.skin-citizen .mw-body {
    background: rgba(19, 25, 49, 0.48) !important;

    color: #eef3ff;

    border-color: rgba(205, 215, 255, 0.20);
}

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,
html.skin-theme-clientpref-night
body.skin-citizen .mw-body h4 {
    color: #e0eaff;
}

html.skin-theme-clientpref-night
body.skin-citizen .citizen-header,
html.skin-theme-clientpref-night
body.skin-citizen .citizen-toc {
    background: rgba(20, 28, 53, 0.38) !important;
    border-color: rgba(200, 215, 255, 0.16);
}

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

@media (max-width: 768px) {

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

    body.skin-citizen .mw-body {
        padding: 14px;
        border-radius: 9px;

        background: rgba(255, 255, 255, 0.64) !important;

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

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

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