MediaWiki:Kuranoka.css：修订间差异

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

/* =============================================
   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. 外围完全透明 ---------- */


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



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


/* ==========================================
   Kuranoka · 正文范围修复
   基于实际 Citizen HTML 结构
   ========================================== */

/* 1. 页面外层：完全透明 */
body.skin-citizen .citizen-page-container,
body.skin-citizen .mw-body,
body.skin-citizen .citizen-body-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 2. 恢复主容器原有间距 */
body.skin-citizen .mw-body {
    padding: 0 !important;
}

/* 3. 仅文章正文：轻薄玻璃 */
body.skin-citizen #bodyContent.citizen-body {
    box-sizing: border-box;

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

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

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

    box-shadow: 0 5px 24px rgba(25, 40, 85, 0.06);

    padding: 20px;
    min-width: 0;
}

/* 4. 正文内部不要重复叠加背景 */
body.skin-citizen #mw-content-text,
body.skin-citizen .mw-parser-output {
    background: transparent !important;
}

/* 5. 目录独立显示 */
body.skin-citizen #citizen-toc {
    background: rgba(255, 255, 255, 0.35) !important;

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

    border-radius: 12px;
}

/* 6. 手机端 */
@media (max-width: 768px) {
    body.skin-citizen #bodyContent.citizen-body {
        padding: 12px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.55) !important;
    }
}