MediaWiki:Common.css：修订间差异

2026年8月28日 (五) 15:21的最新版本

:root {
    /* ---------------- 主题色 · 浅蜜瓜绿系 ---------------- */
    --color-theme:          #F1F8E6;  /* 久远澪代表色 · 页面/信息框底色 */
    --color-theme-soft:     #F9FCF4;  /* 更浅底色 · 卡片渐变顶部 */
    --color-theme-deep:     #e0efd0;  /* 稍深浅绿 · 标签/分区底色 */

    /* ---------------- 主强调色 · 绿色系 ---------------- */
    --color-primary:        #8FBC8F;  /* 主强调色 · 标题栏/按钮/边框 */
    --color-primary-hover:  #7AA87A;  /* 主强调色 · 悬停加深 */
    --color-primary-deep:   #2E6B45;  /* 深绿 · 标题/强调文字 */
    --color-primary-light:  #D4E8C0;  /* 浅绿 · 卡片/信息框边框 */
    --color-primary-lite:   #DCEFDC;  /* 更浅绿 · 装饰渐变 */

    /* ---------------- 暖橙强调色 · 点缀 ---------------- */
    --color-accent:         #E8B96A;  /* 暖橙 · 强调卡片/点缀 */
    --color-accent-light:   #F3D9AE;  /* 暖橙浅色 · 渐变 */
    --color-accent-deep:    #8A5A1E;  /* 暖橙深色 · 文字 */
    --color-accent-bg:      #FFF8EF;  /* 暖橙背景 */
    --color-accent-bg-soft: #FDF2E3;  /* 暖橙背景 · 渐变底部 */
    --color-accent-border:  #E8CFA8;  /* 暖橙边框 */

    /* ---------------- 文字 ---------------- */
    --color-text:           #333333;  /* 正文 */
    --color-text-sub:       #5A5A5A;  /* 次要文字 */
    --color-text-muted:     #8A8A8A;  /* 弱化/注释文字 */
    --color-text-invert:    #FFFFFF;  /* 强调色底色上的文字 */

    /* ---------------- 语义色 · 与主题协调 ---------------- */
    --color-info-bg:        #E9F2F7;  /* 信息提示背景 */
    --color-info-border:    #B9D5E1;  /* 信息提示边框 */
    --color-info-text:      #2F5E74;  /* 信息提示文字 */
    --color-success-bg:     #EEF7E4;  /* 成功提示背景 */
    --color-success-border: #C9E2AF;  /* 成功提示边框 */
    --color-success-text:   #3E6B2F;  /* 成功提示文字 */
    --color-warning-bg:     #FBF3E4;  /* 警告提示背景 */
    --color-warning-border: #EAD5A6;  /* 警告提示边框 */
    --color-warning-text:   #7A5C22;  /* 警告提示文字 */
    --color-error-bg:       #FAECEA;  /* 错误提示背景 */
    --color-error-border:   #E4B9B4;  /* 错误提示边框 */
    --color-error-text:     #8A3B36;  /* 错误提示文字 */

    /* ---------------- 中性色 ---------------- */
    --color-border:         #DDDDDD;  /* 通用边框 */
    --color-bg:             #FFFFFF;  /* 卡片/表格底色 */
    --color-bg-subtle:      #FAFAF7;  /* 轻微底纹 */

    /* ---------------- 投影 · 绿色系 ---------------- */
    --shadow-card:          0 1px 3px rgba(143, 188, 143, .25);
    --shadow-card-hover:    0 4px 14px rgba(143, 188, 143, .4);

    /* ---------------- 背景透明度（模板经 inline --glass-opacity 覆盖，默认不透明） ---------------- */
    --glass-opacity: 1;
}

@media screen {
    html.skin-theme-clientpref-night {
        /* ---------------- 主题色 · 墨绿系 ---------------- */
        --color-theme:          #1D2618;  /* 深色页面底色（墨绿） */
        --color-theme-soft:     #232D1D;  /* 更浅一档深色（卡片渐变顶部） */
        --color-theme-deep:     #303D2A;  /* 稍亮深绿（标签/分区底色，与底色区分） */

        /* ---------------- 主强调色 · 绿色系 ---------------- */
        --color-primary:        #7FAA85;  /* 主强调色（深色下略提亮） */
        --color-primary-hover:  #93BC98;  /* 主强调色 · 悬停提亮 */
        --color-primary-deep:   #A9CFAE;  /* 亮绿 · 标题/强调文字 */
        --color-primary-light:  #3A4736;  /* 深绿 · 卡片/信息框边框 */
        --color-primary-lite:   #33402F;  /* 更暗绿 · 装饰渐变 */

        /* ---------------- 暖橙强调色 · 点缀 ---------------- */
        --color-accent:         #E0A85C;  /* 暖橙 · 强调卡片/点缀 */
        --color-accent-light:   #C99A52;  /* 暖橙浅色 · 渐变 */
        --color-accent-deep:    #F0C48A;  /* 暖橙浅色 · 文字 */
        --color-accent-bg:      #2E2719;  /* 暖橙深色背景 */
        --color-accent-bg-soft: #382D1C;  /* 暖橙背景 · 渐变底部 */
        --color-accent-border:  #57451F;  /* 暖橙深色边框 */

        /* ---------------- 文字 ---------------- */
        --color-text:           #E8EDE3;  /* 正文（浅色） */
        --color-text-sub:       #B8C2B0;  /* 次要文字 */
        --color-text-muted:     #8A9484;  /* 弱化/注释文字 */
        --color-text-invert:    #FFFFFF;  /* 强调色底色上的文字 */

        /* ---------------- 语义色 · 深色 ---------------- */
        --color-info-bg:        #1D2A33;  /* 信息提示背景 */
        --color-info-border:    #2E4656;  /* 信息提示边框 */
        --color-info-text:      #9CC7DE;  /* 信息提示文字 */
        --color-success-bg:     #1E2A1A;  /* 成功提示背景 */
        --color-success-border: #33502E;  /* 成功提示边框 */
        --color-success-text:   #A8D29C;  /* 成功提示文字 */
        --color-warning-bg:     #2E2615;  /* 警告提示背景 */
        --color-warning-border: #57481F;  /* 警告提示边框 */
        --color-warning-text:   #E3C07A;  /* 警告提示文字 */
        --color-error-bg:       #301D1C;  /* 错误提示背景 */
        --color-error-border:   #57302C;  /* 错误提示边框 */
        --color-error-text:     #E09A94;  /* 错误提示文字 */

        /* ---------------- 中性色 ---------------- */
        --color-border:         #3A3A3A;  /* 通用边框 */
        --color-bg:             #161A14;  /* 卡片/表格底色 */
        --color-bg-subtle:      #20251C;  /* 轻微底纹 */

        /* ---------------- 投影 · 深色下用黑色 ---------------- */
        --shadow-card:          0 1px 3px rgba(0, 0, 0, .4);
        --shadow-card-hover:    0 4px 14px rgba(0, 0, 0, .55);

        /* ---------------- 背景透明度（深色，默认不透明） ---------------- */
        --glass-opacity: 1;
    }
}


/* ==========================================================================
   Infobox 统一配色
   ========================================================================== */
.infobox {
    float: right;
    margin-left: 10px;
    width: 300px;
    /* 固定宽度（参考 huijiwiki），保证文字环绕时布局稳定 */
    max-width: 100%;
    /* 极窄屏下不溢出 */
    text-align: center;
    color: var(--color-text);
    background-color: var(--color-theme);
    /* 整体浅绿背景 */
    border: 1px solid var(--color-primary-light);
    /* 浅绿边框，与卡片风格呼应 */
    border-collapse: collapse;
    box-shadow: var(--shadow-card);
    /* 轻投影，增加层次 */
    font-size: 88%;
    line-height: 1.5em;
    clear: right;
    margin-bottom: 1em;
    overflow-wrap: break-word;
    /* 长文本自动换行，避免撑破表格 */
}

/* 窄屏（≤768px，参考 huijiwiki）：取消右浮动、居中显示，避免左侧文字列被挤压过窄 */
@media (max-width: 767.98px) {
    .infobox {
        float: none;
        clear: both;
        width: 300px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 手机（≤576px）：占满内容区全宽（用 !important 覆盖模板内联的固定宽度，如 bodystyle=width:20em） */
@media (max-width: 575.98px) {
    .infobox {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 顶部标题行（above）和分组标题行（header） */
.infobox .infobox-above,
.infobox .infobox-header {
    background-color: var(--color-primary);
    /* 暗绿色背景 */
    color: var(--color-text-invert);
    /* 白色文字 */
    font-weight: bold;
    padding: 0.4em 0.2em;
}

/* 标签单元格 */
.infobox .infobox-label {
    width: 30%;
    min-width: 90px;
    /* 保证标签列在任何宽度下都不至于过窄 */
    font-weight: bold;
    background-color: var(--color-theme-deep);
    /* 比整体背景稍深的浅绿，突出标签 */
    padding: 0.3em 0.4em;
    text-align: right;
    vertical-align: top;
}

/* 数据单元格 */
.infobox .infobox-data {
    width: 70%;
    padding: 0.3em 0.4em;
    text-align: left;
    vertical-align: top;
}

/* ==========================================================================
   文字背景效果（Template:文字背景：毛玻璃 / 遮罩 / 阴影）
   ========================================================================== */
.text-bg {
    border-radius: 4px;
    padding: 0.05em 0.28em;
}
/* 毛玻璃：半透明 + 背景模糊（颜色用 --text-bg-color-light/--text-bg-color、透明度用 --text-bg-opacity，默认白 0.5） */
.text-bg-glass {
    background: rgb(from var(--text-bg-color-light, var(--text-bg-color, #ffffff)) r g b / var(--text-bg-opacity, 0.5));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
/* 背景遮罩：半透明（不影响文字颜色；颜色用 --text-bg-color-light/--text-bg-color、透明度用 --text-bg-opacity，默认主题色 var(--color-primary)） */
.text-bg-mask {
    background: rgb(from var(--text-bg-color-light, var(--text-bg-color, var(--color-primary))) r g b / var(--text-bg-opacity, 0.4));
}
/* 文字阴影 */
.text-bg-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   文字描边效果（Template:文字描边）
   ========================================================================== */
.text-stroke {
    -webkit-text-stroke: 1px var(--stroke-color-light, rgba(255, 255, 255, 0.9));
    paint-order: stroke fill;
}

/* 深色模式适配 */
@media screen {
    html.skin-theme-clientpref-night .text-bg-glass {
        background: rgb(from var(--text-bg-color-night, var(--text-bg-color, #000000)) r g b / var(--text-bg-opacity, 0.45));
    }
    html.skin-theme-clientpref-night .text-bg-mask {
        background: rgb(from var(--text-bg-color-night, var(--text-bg-color, var(--color-primary))) r g b / var(--text-bg-opacity, 0.4));
    }
    html.skin-theme-clientpref-night .text-bg-shadow {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.6);
    }
    /* 深色模式默认描边：深灰 */
    html.skin-theme-clientpref-night .text-stroke {
        -webkit-text-stroke: 1px var(--stroke-color-night, rgba(200, 200, 200, 0.9));
    }
}