跳转到内容
打开/关闭菜单
  • 451 条目
  • 798 文件
  • 22 用户
  • 8983 编辑
Blockland Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Kuranoka.css:修订间差异

MediaWiki界面页面
无编辑摘要
无编辑摘要
 
(未显示同一用户的5个中间版本)
第1行: 第1行:


/* =============================================
/* ==========================================
   Kuranoka · Beyond the Sky
   Kuranoka · 世界の彼方
  Transparent Glass Edition
   Blockland Wiki · Modern Aero UI OS26.2
   Blockland Wiki / Citizen
  ============================================= */


/* ---------- 1. 背景:不加任何遮罩 ---------- */
  保留全站 Citizen 的玻璃设计
  只定制背景、正文、标题文字
  ========================================== */


body.skin-citizen {
 
     background-color: #777eb5 !important;
/* ==========================================
  1. 页面背景
  ========================================== */
 
body.skin-citizen.page-Kuranoka {
     background-color: #313b76 !important;


     background-image:
     background-image:
第19行: 第24行:
     background-attachment: fixed !important;
     background-attachment: fixed !important;


    /* 仅使页面基础表面透明 */
     --color-surface-0: transparent;
     --color-surface-0: transparent;
}


    --color-primary: #729adb;
/* ==========================================
    --color-link: #477fbf;
  2. 页面外层透明
     --color-link--visited: #837bc4;
  不修改 Citizen 的布局尺寸
  ========================================== */
 
body.page-Kuranoka .citizen-page-container,
body.page-Kuranoka .citizen-body-container {
     background-color: transparent !important;
}
}


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


/* ==========================================
  3. 正文玻璃参数
  ========================================== */
body.page-Kuranoka {


/* ---------- 3. 正文:轻薄毛玻璃 ---------- */
    /* 白天:白色玻璃
      夜晚:深灰玻璃
      自动匹配网站的主题 */


    --kk-body-glass: light-dark(
        rgba(255, 255, 255, 0.5),
        rgba(38, 39, 42, 0.5)
    );


    /* 模糊程度 */
    --kk-body-blur: 4px;


/* ---------- 4. 正文内部透明 ---------- */
    /* 边框 */
    --kk-body-border: var(--bl-border);


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


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


body.skin-citizen .mw-body h1,
/* ==========================================
body.skin-citizen .mw-body h2,
  4. 正文毛玻璃
body.skin-citizen .mw-body h3,
  只作用于 #bodyContent
body.skin-citizen .mw-body h4 {
  ========================================== */
    color: #304b72;
}


/* ---------- 6. 顶部导航:轻薄玻璃 ---------- */
body.page-Kuranoka #bodyContent.citizen-body {


body.skin-citizen .citizen-header {
    box-sizing: border-box;
     background: rgba(255, 255, 255, 0.35) !important;
     min-width: 0;


     backdrop-filter: blur(5px);
     background: var(--kk-body-glass) !important;
    -webkit-backdrop-filter: blur(5px);


     border-bottom:
     backdrop-filter:
         1px solid rgba(255, 255, 255, 0.20);
         blur(var(--kk-body-blur)) !important;
}


/* ---------- 7. 目录:更加通透 ---------- */
    -webkit-backdrop-filter:
        blur(var(--kk-body-blur)) !important;


body.skin-citizen .citizen-toc {
     border:
     background: rgba(255, 255, 255, 0.38) !important;
        1px solid var(--kk-body-border) !important;


    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.22);
     border-radius: 12px;
     border-radius: 12px;


     box-shadow:
     box-shadow:
         0 5px 22px rgba(32, 44, 88, 0.07);
         0 6px 24px
        var(--bl-shadow-color-sm);
 
    padding: 20px;
 
}
}


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


html.skin-theme-clientpref-night
/* ==========================================
body.skin-citizen {
  5. 正文内部保持透明
    --color-surface-0: transparent;
  ========================================== */


    --color-primary: #a5b9f0;
body.page-Kuranoka #mw-content-text,
    --color-link: #a1c6ff;
body.page-Kuranoka .mw-parser-output {
     --color-link--visited: #c2b2ff;
     background-color: transparent !important;
}
}


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


    color: #eef3ff;
/* ==========================================
  6. 页面标题:白色文字
  不修改标题栏背景
  ========================================== */


     border-color: rgba(205, 215, 255, 0.20);
body.page-Kuranoka #firstHeading,
body.page-Kuranoka #firstHeading span {
     color: #ffffff !important;
}
}


html.skin-theme-clientpref-night
/* 标题下方的小字 */
body.skin-citizen .mw-body h1,
body.page-Kuranoka #siteSub {
html.skin-theme-clientpref-night
     color: rgba(255, 255, 255, 0.85) !important;
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. 移动端 ---------- */
/* ==========================================
  7. 目录:不修改外观
  仅隐藏内部滚动条
  ========================================== */


@media (max-width: 768px) {
/* Firefox */


    body.skin-citizen {
body.page-Kuranoka #citizen-toc {
        background-attachment: scroll !important;
     scrollbar-width: none !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. 减少动态效果 ---------- */
/* Chrome、Edge、Safari */


@media (prefers-reduced-motion: reduce) {
body.page-Kuranoka
     body.skin-citizen {
#citizen-toc::-webkit-scrollbar {
        background-attachment: scroll !important;
     display: none !important;
     }
    width: 0 !important;
     height: 0 !important;
}
}




/* ==========================================
/* ==========================================
   Kuranoka · 正文范围修复
   8. 移动端
  基于实际 Citizen HTML 结构
   ========================================== */
   ========================================== */


/* 1. 页面外层:完全透明 */
@media screen and (max-width: 768px) {
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.page-Kuranoka {
body.skin-citizen .mw-body {
        background-attachment: scroll !important;
    padding: 0 !important;
        background-position: center top !important;
}
    }


/* 3. 仅文章正文:轻薄玻璃 */
    body.page-Kuranoka
body.skin-citizen #bodyContent.citizen-body {
    #bodyContent.citizen-body {
    box-sizing: border-box;
        padding: 12px;
        border-radius: 8px;
    }


    background: rgba(255,255,255,0.75) !important;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 16px;
    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 {
  9. 系统减少动态效果
    background: rgba(255, 255, 255, 0.35) !important;
  ========================================== */


    backdrop-filter: blur(3px);
@media (prefers-reduced-motion: reduce) {
    -webkit-backdrop-filter: blur(3px);


     border-radius: 12px;
     body.page-Kuranoka {
}
        background-attachment: scroll !important;
    }


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

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


/* ==========================================
   Kuranoka · 世界の彼方
   Blockland Wiki · Modern Aero UI OS26.2

   保留全站 Citizen 的玻璃设计
   只定制背景、正文、标题文字
   ========================================== */


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

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;

    /* 仅使页面基础表面透明 */
    --color-surface-0: transparent;
}


/* ==========================================
   2. 页面外层透明
   不修改 Citizen 的布局尺寸
   ========================================== */

body.page-Kuranoka .citizen-page-container,
body.page-Kuranoka .citizen-body-container {
    background-color: transparent !important;
}


/* ==========================================
   3. 正文玻璃参数
   ========================================== */

body.page-Kuranoka {

    /* 白天:白色玻璃
       夜晚:深灰玻璃
       自动匹配网站的主题 */

    --kk-body-glass: light-dark(
        rgba(255, 255, 255, 0.5),
        rgba(38, 39, 42, 0.5)
    );

    /* 模糊程度 */
    --kk-body-blur: 4px;

    /* 边框 */
    --kk-body-border: var(--bl-border);

}


/* ==========================================
   4. 正文毛玻璃
   只作用于 #bodyContent
   ========================================== */

body.page-Kuranoka #bodyContent.citizen-body {

    box-sizing: border-box;
    min-width: 0;

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

    backdrop-filter:
        blur(var(--kk-body-blur)) !important;

    -webkit-backdrop-filter:
        blur(var(--kk-body-blur)) !important;

    border:
        1px solid var(--kk-body-border) !important;

    border-radius: 12px;

    box-shadow:
        0 6px 24px
        var(--bl-shadow-color-sm);

    padding: 20px;

}


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

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


/* ==========================================
   6. 页面标题:白色文字
   不修改标题栏背景
   ========================================== */

body.page-Kuranoka #firstHeading,
body.page-Kuranoka #firstHeading span {
    color: #ffffff !important;
}

/* 标题下方的小字 */
body.page-Kuranoka #siteSub {
    color: rgba(255, 255, 255, 0.85) !important;
}


/* ==========================================
   7. 目录:不修改外观
   仅隐藏内部滚动条
   ========================================== */

/* Firefox */

body.page-Kuranoka #citizen-toc {
    scrollbar-width: none !important;
}

/* Chrome、Edge、Safari */

body.page-Kuranoka
#citizen-toc::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}


/* ==========================================
   8. 移动端
   ========================================== */

@media screen and (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;
    }

}


/* ==========================================
   9. 系统减少动态效果
   ========================================== */

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

    body.page-Kuranoka {
        background-attachment: scroll !important;
    }

}