MediaWiki:Kuranoka.css：修订间差异

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

/* ============================================
   Kuranoka · 世界の彼方
   Blockland Wiki / Citizen Skin
   Sky Glass Theme
   ============================================ */

/* ===== 1. 主题参数 ===== */

body.skin-citizen.page-Kuranoka {
    --kk-glass-bg: rgba(22, 29, 65, 0.38);
    --kk-glass-blur: 3px;
    --kk-glass-border: rgba(215, 225, 255, 0.13);

    --kk-text: #f2f5ff;
    --kk-heading: #ffffff;
    --kk-link: #a9cfff;
    --kk-link-visited: #c5baff;

    --color-surface-0: transparent;
}

/* ===== 2. 页面背景 ===== */

body.skin-citizen.page-Kuranoka {
    background-color: #313b76 !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;
}

/* ===== 3. Citizen 外层透明 ===== */

body.page-Kuranoka .citizen-page-container,
body.page-Kuranoka .citizen-body-container,
body.page-Kuranoka main.mw-body {
    background: transparent !important;

    border: none !important;
    box-shadow: none !important;

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

/* ===== 4. 正文独立玻璃 ===== */

body.page-Kuranoka #bodyContent.citizen-body {
    box-sizing: border-box;
    min-width: 0;

    background: var(--kk-glass-bg) !important;

    backdrop-filter: blur(var(--kk-glass-blur));
    -webkit-backdrop-filter: blur(var(--kk-glass-blur));

    border: 1px solid var(--kk-glass-border);
    border-radius: 12px;

    box-shadow:
        0 8px 30px rgba(8, 12, 45, 0.10);

    padding: 20px;

    color: var(--kk-text);

    --color-base: var(--kk-text);
    --color-emphasized: #ffffff;
    --color-subtle: #c5cde5;

    --color-link: var(--kk-link);
    --color-link--visited: var(--kk-link-visited);
}

/* ===== 5. 正文内部透明 ===== */

body.page-Kuranoka #mw-content-text,
body.page-Kuranoka .mw-parser-output {
    background: transparent !important;
}

/* ===== 6. 正文标题统一白色 ===== */

body.page-Kuranoka #bodyContent .mw-heading h2,
body.page-Kuranoka #bodyContent .mw-heading h3,
body.page-Kuranoka #bodyContent .mw-heading h4,
body.page-Kuranoka #bodyContent .mw-heading h5,
body.page-Kuranoka #bodyContent .mw-heading h6 {
    color: var(--kk-heading) !important;
}

/* ===== 7. 正文文字 ===== */

body.page-Kuranoka #mw-content-text {
    color: var(--kk-text);
}

body.page-Kuranoka #mw-content-text p,
body.page-Kuranoka #mw-content-text li {
    color: inherit;
}

/* 链接使用浅蓝色 */
body.page-Kuranoka #mw-content-text a:not(.new) {
    --color-link: var(--kk-link);
    --color-link--visited: var(--kk-link-visited);
}

/* ===== 8. 页面顶部标题 ===== */

body.page-Kuranoka #citizen-page-header {
    background: rgba(16, 24, 60, 0.30) !important;

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

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

    --color-base: #ffffff;
    --color-emphasized: #ffffff;
    --color-subtle: #d3ddf5;
}

/* Kuranoka 主标题 */
body.page-Kuranoka #firstHeading,
body.page-Kuranoka #firstHeading span,
body.page-Kuranoka #siteSub {
    color: #ffffff !important;
}

/* ===== 9. 右侧目录 ===== */

body.page-Kuranoka #citizen-toc {
    background: rgba(20, 28, 65, 0.30) !important;

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

    border: 1px solid rgba(220,230,255,0.12);
    border-radius: 12px;

    box-shadow:
        0 6px 24px rgba(10, 15, 50, 0.08);

    color: #eef3ff;

    --color-base: #eef3ff;
    --color-emphasized: #ffffff;
    --color-subtle: #c5cde5;
    --color-link: #b5d5ff;
    --color-link--visited: #c5baff;
}

/* ===== 10. 信息框维持正常可读性 ===== */

/* 你的信息框本来就是浅蓝、白色设计，
   所以不强制改成深色。 */

body.page-Kuranoka .mw-parser-output .infobox {
    color: #253650;
}

body.page-Kuranoka .mw-parser-output .infobox a {
    --color-link: #347ac0;
    --color-link--visited: #706cba;
}

/* ===== 11. 深色模式 ===== */

/* 深色模式沿用蓝紫玻璃，不再变成白色 */
html.skin-theme-clientpref-night
body.page-Kuranoka {
    --kk-glass-bg: rgba(16, 22, 55, 0.46);

    --kk-text: #f2f5ff;
    --kk-heading: #ffffff;

    --kk-link: #b2d5ff;
    --kk-link-visited: #cebdff;
}

/* ===== 12. 浅色模式 ===== */

/* 浅色模式保持清透玻璃，
   使用深色文字保证对比度。 */

html:not(.skin-theme-clientpref-night)
body.page-Kuranoka {
    --kk-glass-bg: rgba(246, 248, 255, 0.48);

    --kk-text: #263750;
    --kk-heading: #ffffff;

    --kk-link: #337cbd;
    --kk-link-visited: #7568b3;
}

/* 浅色模式的正文标题改成深蓝，
   避免在浅色玻璃上看不清。 */

html:not(.skin-theme-clientpref-night)
body.page-Kuranoka #bodyContent .mw-heading h2,
html:not(.skin-theme-clientpref-night)
body.page-Kuranoka #bodyContent .mw-heading h3,
html:not(.skin-theme-clientpref-night)
body.page-Kuranoka #bodyContent .mw-heading h4 {
    color: #294c79 !important;
}

/* ===== 13. 移动端 ===== */

@media (max-width: 768px) {
    body.page-Kuranoka {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    body.page-Kuranoka #bodyContent.citizen-body {
        padding: 12px;
        border-radius: 8px;
    }
}

/* ===== 14. 减少动态效果 ===== */

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