跳转到内容
打开/关闭菜单
  • 5 条目
  • 3 文件
  • 13 用户
  • 619 编辑
久远澪Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.css

MediaWiki界面页面
DoubleCircle留言 | 贡献2026年8月26日 (三) 10:39的版本 (创建页面,内容为“:root { ---------------- 主题色 · 浅蜜瓜绿系 ----------------:​ --color-theme: #F1F8E6; 久远澪代表色 · 页面/信息框底色:​ --color-theme-soft: #F9FCF4; 更浅底色 · 卡片渐变顶部:​ --color-theme-deep: #e0efd0; 稍深浅绿 · 标签/分区底色:​ ---------------- 主强调色 · 绿色系 ----------------:​ --color-primary: #8FBC8F; /* 主强调色 · 标题…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)

注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
: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);
}

/* ==========================================================================
   Infobox 统一配色
   ========================================================================== */
.infobox {
    float: right;
    margin-left: 10px;
    max-width: 20em;
    text-align: center;
    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;
}

/* 顶部标题行(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%;
    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;
}