MediaWiki:Kuranoka.css：修订间差异

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

/* =============================================
   Kuranoka · Beyond the Sky Theme
   Blockland Wiki / Citizen Skin
   ============================================= */

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

    /* Citizen 默认背景透明化 */
    --color-surface-0: transparent;

    /* 页面主题色 */
    --color-primary: #729adb;
    --color-link: #477fbf;
    --color-link--visited: #837bc4;
}

/* ---------------------------------------------
   2. 恢复 Citizen 外层布局透明
   --------------------------------------------- */

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: rgba(255, 255, 255, 0.84) !important;

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

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

    box-shadow:
        0 8px 32px rgba(40, 55, 100, 0.14);

    padding: 24px;

    color: #27364b;
}

/* ---------------------------------------------
   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.63) !important;

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

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

    box-shadow:
        0 3px 18px rgba(30, 45, 90, 0.07);
}

/* ---------------------------------------------
   7. 右侧目录毛玻璃
   --------------------------------------------- */

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

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

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

    border-radius: 12px;

    box-shadow:
        0 6px 24px rgba(35, 50, 90, 0.10);
}

/* ---------------------------------------------
   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(24, 30, 52, 0.88) !important;

    border-color:
        rgba(190, 200, 255, 0.16);

    color: #e8edff;
}

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

html.skin-theme-clientpref-night
body.skin-citizen .citizen-header,
html.skin-theme-clientpref-night
body.skin-citizen .citizen-toc {
    background: rgba(27, 34, 57, 0.88) !important;

    border-color:
        rgba(190, 200, 255, 0.14);
}

/* ---------------------------------------------
   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.90) !important;

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

    body.skin-citizen .citizen-header {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* ---------------------------------------------
   10. 减少动画选项
   --------------------------------------------- */

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

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

}