MediaWiki:Common.css

来自RMzas&SMS_Knowledge_Base_Wiki
ML4455739讨论 | 贡献2025年10月8日 (三) 03:08:28的版本
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转到导航 跳转到搜索

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

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件
/* 这里放置的CSS将应用于所有皮肤 */

/* 美化 fandom-table 类表格(含强化表头) */
table.fandom-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1000px;
    margin: 1em 0;
    border: 1px solid #aaa;
}

/* 表头单元格(th)强化样式 */
table.fandom-table th {
    border: 1px solid #999; /* 表头边框加深,与内容区区分 */
    border-bottom: 2px solid #666; /* 表头底部加粗边框,明确分隔表头与内容 */
    padding: 10px 12px; /* 内边距略大于内容区,增加空间感 */
    background-color: #e0e0e0; /* 表头背景色加深,比之前更明显 */
    font-weight: bold; /* 保持粗体,可改为 bolder 进一步加粗 */
    font-size: 1.05em; /* 字号比内容区稍大 */
    color: #333; /* 文字颜色加深,提升对比度 */
    text-align: left;
}

/* 内容单元格(td)样式(保持不变,突出表头) */
table.fandom-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    background-color: white;
}

/* 鼠标悬停行高亮 */
table.fandom-table tr:hover td {
    background-color: #f9f9f9;
}


/* 美化外部图片框体 */
.external-image-container {
  border: 1px solid #cccccc; /* 灰色边框 */
  background-color: #f9f9f9; /* 浅灰背景 */
  padding: 0.5em; /* 内边距 */
  display: inline-block; /* 让容器适应图片宽度 */
  margin: 0.5em; /* 外边距 */
}


/* 信息框整体样式 */
.rmzas-infobox {
    border: 1px solid #ccc; /* 外边框 */
    margin: 0 0 1em 1em; /* 右侧和下方留白 */
    float: right; /* 右浮动(靠页面右侧显示) */
    table-layout: auto; /* 宽度自动分配(根据内容自适应) */
    min-width: 300px; /* 最小宽度,避免过窄 */
    max-width: 500px; /* 最大宽度,避免过宽 */
    border-collapse: collapse; /* 边框合并,避免双边框 */
}

/* 标题行(整个信息框的大标题) */
.rmzas-infobox caption {
    font-size: 1.3em;
    font-weight: bold;
    padding: 10px;
    background-color: #e6f2ff; /* 浅蓝背景 */
    border-bottom: 1px solid #ccc; /* 标题下方分隔线 */
    text-align: left; /* 左对齐 */
    width: 100%; /* 占满整行 */
    box-sizing: border-box; /* 确保padding不撑大宽度 */
}

/* 分组标题(如“虚拟角色设定”“在现实中”等跨列标题) */
.rmzas-infobox .infobox-header {
    background-color: #99ccff; /* 中蓝色背景(区分普通项目名) */
    color: #333; /* 深灰文字 */
    font-size: 1.1em;
    padding: 8px 10px;
    text-align: left;
}

/* 项目名(标签,如“性别”“年龄”) */
.rmzas-infobox th {
    background-color: #4da6ff; /* 蓝色背景(项目名) */
    color: white; /* 白色文字,对比清晰 */
    padding: 6px 10px;
    text-align: left;
    font-weight: bold;
    border: 1px solid #ccc; /* 单元格边框 */
    white-space: nowrap; /* 项目名不换行 */
}

/* 项目内容(值,如“男性”“30岁”) */
.rmzas-infobox td {
    background-color: white; /* 白色背景(内容) */
    padding: 6px 10px;
    border: 1px solid #ccc; /* 单元格边框 */
}

/* 3列数据行的单元格宽度自动分配 */
.rmzas-infobox tr:nth-child(8) td { /* 第三组数据行(性别+年龄+种族) */
    width: 33.33%;
}